/* 한글 폰트 */

@font-face {
  font-family: "NotoSansKR";
  src: url("../fonts/NotoSansKR-Light.ttf") format('truetype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  /* 영문,숫자 폰트 별도 사용시 -> unicode-range: U+AC00-D7A3; */
  unicode-range: U+AC00-D7A3, U+0020-007E;
}

@font-face {
  font-family: "NotoSansKR";
  src: url("../fonts/NotoSansKR-Regular.ttf") format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+0020-007E;
}

@font-face {
  font-family: "NotoSansKR";
  src: url("../fonts/NotoSansKR-Medium.ttf") format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+0020-007E;
}

@font-face {
  font-family: "NotoSansKR";
  src: url("../fonts/NotoSansKR-Bold.ttf") format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+0020-007E;
}

@font-face {
  font-family: "NotoSansKR";
  src: url("../fonts/NotoSansKR-Black.ttf") format('truetype');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+0020-007E;
}


/* 영문, 숫자 폰트 */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Light.ttf") format('truetype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  /* unicode-range: U+0041-005A, U+0061-007A, U+0030-0039; */
  unicode-range: U+0020-007E;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.ttf") format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Medium.ttf") format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0020-007E;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBold.ttf") format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0020-007E;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Bold.ttf") format('truetype');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  unicode-range: U+0020-007E;
}

body {
    /* 영문,숫자 폰트 별도 사용시 -> font-family: 'Poppins', 'NotoSansKR'; */
    font-family: 'NotoSansKR';
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
}

#content {
    max-width: 850px;
    margin: 0 auto;
}

* {
    font-family: inherit;
}

.main_bg {
    /* background: transparent; */
    background: #2D2D2D;
    color: #FFFFFF;
}

pre {
  white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* Portrait layout (default) */
.app {
    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
    position:absolute;             /* position in the center of the screen */
    left:50%;
    top:50%;
    height:50px;                   /* text area height */
    width:225px;                   /* text area width */
    text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}

h1 {
    font-size:24px;
    font-weight:normal;
    margin:0px;
    overflow:visible;
    padding:0px;
    text-align:center;
}

.event {
    border-radius:4px;
    color:#FFFFFF;
    font-size:12px;
    margin:0px 30px;
    padding:2px 0px;
}

.event.listening {
    background-color:#333333;
    display:block;
}

.event.received {
    background-color:#4B946A;
    display:none;
}

#deviceready.ready .event.listening { display: none; }
#deviceready.ready .event.received { display: block; }

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}

@media screen and (prefers-color-scheme: dark) {
    body {
        /* background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%); */
    }
}

.opacity70 {
    width: 100%;
    height: 100%;
    background-color: #000000;
    filter:alpha(opacity=70);
    opacity:0.70
}

.footer_select {
    /*filter: invert(66%) sepia(71%) saturate(930%) hue-rotate(161deg) brightness(91%) contrast(89%);*/
    color: #194696;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 6em;
  height: 6em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(0,0,0, 0.2);
  border-right: 1.1em solid rgba(0,0,0, 0.2);
  border-bottom: 1.1em solid rgba(0,0,0, 0.2);
  border-left: 1.1em solid #FFFFFF;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

input, select {
    color: #DFBD94 !important;
    background: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0px 4px 8px 0px rgba(74, 74, 74, 0.25) !important;
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    background-image: linear-gradient(#434343, #434343), linear-gradient(180deg, rgba(223, 189, 148, 0.2) 0%, #DFBD94 51.35%, rgba(223, 189, 148, 0.2) 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

input:focus, select:focus {
    outline: none;
    border: none;
    border-right: 0px;
    border-top: 0px;
    boder-left: 0px;
    boder-bottom: 0px;
}

input::placeholder {
  color: #C4C4C4 !important;
  font-size: 11px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #000000;
}

input:focus + .slider {
  box-shadow: 0 0 1px #000000;
}

input:checked + .slider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}

.tag {
  position: absolute;
  margin: 5px 0px 0px 5px;
  padding: 1px 7px;
  border-radius: 66px;
  color: #fff;
  font-size: 14px;
}

.profileImg {
  width: 36px;
  height: 36px !important;
  background: #FFFFFF;
  border: 2px solid #FFFFFF;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  border-radius: 50%!important;
  border-top-left-radius: 50% !important;
  border-top-right-radius: 50% !important;
  border-bottom-right-radius: 50% !important;
  border-bottom-left-radius: 50% !important;
}

.rounded-circle {
    border-radius: 50%!important;
}

.nft_btn_off {
    width:50%;
    height:42px;
    background: #FAFCFD;
    border: 1px solid #CFDBE1;
    color:#868686;
}

.nft_btn_on {
    width:50%;
    height:42px;
    background: #194696;
    color:#FFFFFF;
}

.circle_text {
  margin: 0 auto;
  padding-top: 1px;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  color: #194696;
  border: 1px solid #194696;
  font-size: 12px;
  text-align: center;
}

.circle_text_gray {
  margin: 0 auto;
  padding-top: 1px;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  color: #C4C4C4;
  border: 1px solid #C4C4C4;
  font-size: 12px;
  text-align: center;
}

.timer_overlay {
  position: relative;
  bottom: 20px;
  margin-bottom: -16px;
  color: white;
  font-size: 10px;
}

.timer_overlay_detail {
  position: relative;
  bottom: 40px;
  margin-bottom: -32px;
  color: white;
  font-size: 20px;
}

.timer {
  /*width: 30px;*/
  background: #E9323D;
  border-radius: 10px;
  /*opacity: 0.7;*/
  /*box-shadow: 0px 0px 35px rgba(91, 124, 254, 0.25);*/
}

.btn_color {
  color: #000000;
  font-weight: bold;
  border-radius: 16px;
  background: linear-gradient(180deg, #F9D7AE 0%, #EABD88 100%);
}

.btn_none {
  color: #DFBD94;
  font-weight: bold;
  border: 1px solid #000000;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  background-image: linear-gradient(#434343, #434343), linear-gradient(180deg, rgba(223, 189, 148, 0.2) 0%, #DFBD94 51.35%, rgba(223, 189, 148, 0.2) 100%) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}

.border_gradient {
    color: #EABD88;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0px 4px 8px 0px rgba(74, 74, 74, 0.25);
    border: 1px solid transparent;
    border-radius: 12px;
    background-image: linear-gradient(#434343, #434343), linear-gradient(180deg, rgba(223, 189, 148, 0.2) 0%, #DFBD94 51.35%, rgba(223, 189, 148, 0.2) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.btn_text {
  color: #000000;
  font-weight: bold;
}

.line_o1 {
  width: 100%;
  height: 1px;
  background: linear-gradient(270deg, rgba(223, 189, 148, 0.12) 0%, rgba(223, 189, 148, 0.60) 51.35%, rgba(223, 189, 148, 0.12) 100%);
}

.line_o2 {
  background-image: linear-gradient(90deg, rgba(148, 178, 223, 0.2) 0%, #94A5DF 51.35%, rgba(148, 173, 223, 0.2) 100%);
  height: 1px;
  /*border-bottom: 1px solid #D9D9D9;*/
  margin-left:1%;
  width:92%;
}

.line_input {
  background: linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(rgba(148, 178, 223, 0.2) 0%, #94A5DF 51.35%, rgba(148, 173, 223, 0.2) 100%) border-box;
  border-radius: 16px;
  border: 5px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #FFFFFF;
}

.play_item {
  background: #ECEDEE;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
  border-radius: 22px;
}

.seed_item {
  border: 1px solid #DFBD94;
}

.seed_check {
  border: 1px dashed rgba(223, 189, 148, 0.30);
}

.request_on {
  border-radius: 4px;
  background: #DFBD94;
  color: #000000;
}

.request_off {
  border-radius: 4px;
  background: linear-gradient(180deg, #BABABA 0%, #757575 100%);
  color: #5E5E5E;
}

.request_withdraw {
  border-radius: 4px;
  background: linear-gradient(180deg, #BABABA 0%, #757575 100%);
}