@charset "utf-8";

body {
  height: 100vh;
  background: #2c32a0;
  background: -moz-linear-gradient(top, #2c32a0 0%, #3632a9 50%, #a338fd 100%);
  background: -webkit-linear-gradient(top, #2c32a0 0%,#3632a9 50%,#a338fd 100%);
  background: linear-gradient(to bottom, #2c32a0 0%,#3632a9 50%,#a338fd 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c32a0', endColorstr='#a338fd',GradientType=0 );
}
@media only screen and (max-width: 798px){
  body {
    display: inline-table;
  }
}

.wrapper {
  background: url("/Games/donut/images/loginbg_mobile.jpg?v=20250827") no-repeat center;
  background-size: auto 130%;
}

@media screen and (min-width: 768px) {
    .wrapper {
        background-image: url(/Games/donut/images/loginbg.jpg?v=20250827);
    }
}

.content-logo{
  display: block;
  margin:0 auto;
  padding-bottom: 2%;
  width:50%;
}

@media screen and (min-width: 500px) {
  .content-logo{
    width: auto;
  }
}

/* ================= 引用GT行動版CSS ================= */
.f-danger {
  color: #00f6ff;
}

/*===box Start===*/
.box {
  width: 90%;
  margin: 10px auto;
  padding: 5px;
}

.login_box .box {
  width: 90%;
  margin: 10px auto;
  padding: 5px;
}

.boxA {
  width: 98%;
  margin: 10px auto;
  padding: 5px;
}

.box--styleA {
  border: 1px solid #ab875c;
}

.box--styleA h3 {
  color: #FF0004;
}

.box--styleA p {
  margin: 10px 0;
}

.box--styleB {
  border: 1px solid #ffd800;
  clear: both;
}

.box--styleB h3 {
  color: #ffd800;
}

/* ================= 查詢密碼頁面CSS ================= */
.header {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  display: none;
}

.header .container {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0;
  width: 300px;

}

.content_grain{
  margin:0 auto;
  padding: 1.5vw 0;
  max-width: 980px;
  background-color: rgba(25, 24, 57, 0.75);
  border-radius: 14px;
  border: 1px solid #363566;
  height: 100%;
}

@media (orientation: landscape){
  .content_grain{
    height: auto;
  }
}

@media screen and (min-width: 980px) {
  .content_grain{
    height: 100%;
  }
}




.content_grain .content {
  padding: 0 10px;
}

h3 {
  text-align: center;
  font-size: 1.8em;
  color: #d6beeb;
  line-height: 2.5em;
}

h4 {
  color: #e5bbff;
  box-sizing: border-box;
  line-height: 2em;
}

table {
  color: #fff;
}

table div a {
  color: #ffd800;
  text-decoration: underline;
  /*display: inline-block;
  font-size: 13px;
  border-radius: 6px;
  padding: .05em .5em;
  color: #FFF;
  border: 1px solid #af6124;
  text-shadow: 1px 1px 1px #1a1302, 1px 1px 1px #1a1302;
  background: #f9c377;
  background: linear-gradient(to bottom, #f9c377 0%, #ea9431 50%, #dd8430 51%, #af4a24 100%);*/
}

table div a:hover {
  color: #ff6dff;
  text-decoration: underline;
}

p {
  padding: 0 20px;
  margin: 0;
}

p .textareaborder {
  height: 2.2em;
  padding-left: 8px;
  border: 1px solid #b188cc;
  border-radius: 6px;
  background-color: #fff;
}

.textarea {
  padding: 0 20px;
}

.textarea .textareaborder {
  width: 100%;
  height: 2.2em;
  padding-left: 8px;
  border: 1px solid #b188cc;
  border-radius: 6px;
  margin: 5px auto;
  background-color: #fff;
}

.content-phone-number {
  width: 100%;
  margin: 5px auto;
  display: inline-block;
}

.content-phone-number .input-width {
  width: 100%;
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.content-phone-number .country-code {
  width: 90px;
  float: left;
  height: 2.5em;
  border: 1px solid #b188cc;
  border-radius: 6px;
  margin-right: 3px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #696969;
}

.content-phone-number .phone-number {
  width: calc(100% + -93px);
  height: 2.2em;
  float: left;
  padding-left: 8px;
  border: 1px solid #b188cc;
  border-radius: 6px;
}

.textarea ul {
  list-style-type: none;
  padding-left: 0;
}

.textarea ul li {
  width: 6em;
  float: left;
  margin-right: .5em;
  display: flex;
  justify-content: center;
  display: -webkit-flex;
  -webkit-justify-content: center;
}

.button--styleA {
  color: #FFF;
  text-shadow: 0 1px 1px #1c3606;
  background: linear-gradient(to bottom, #83ab4e 0%, #609026 50%, #44651b 51%, #3a5518 100%);
  border: 1px solid #3c5819;
}

.box--styleA h3 {
  font-size: 1em;
  color: #e5bbff;
  text-align: left;
}

.boxA.box--styleA {
  padding: 0.3em;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

.box_bank_Text {
  padding: 0.3em;
  background-color: #fff;
  color: #000;
}

.listStyleOtp--A li font {
  color: #4eb677 !important;
}

.btn-focus-primary {
  width:300px;
  border: 0;
  box-shadow: 0;
  border-radius: 0;
  box-shadow: none;
  background: url(/Games/donut/images/btn_orange.png?v=20250827) no-repeat center;
  background-size:100% !important;
  text-shadow: 0px 1px 1px #be6602, 1px 0px 1px #be6602, 0px -1px 1px #be6602, -1px 0px 1px #be6602,
    1px 1px 1px #be6602, -1px -1px 1px #be6602, 1px -1px 1px #be6602, -1px 1px 1px #be6602;
}

.btn-focus-primary:hover {
  transition: all 0.2s linear;
  -webkit-filter: brightness(1.2);
}

.btn-focus-primary:before {
  border: none;
}

.btn-focus:after {
  border: none;
}

.list--styleB li font {
  color: #ffd800;
}
.list--styleB li:first-child{
  color: #ffd800 !important;
}