@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');

* {
    box-sizing: border-box;
}

html, body {
    font-family:'Nunito', sans-serif;
    /*font-family:'Baloo 2';*/
}

body {
    display:flex;
    justify-content:center;
    align-items:center;
}

#game-body {
    width:85%;
    height:95%;
    border-radius:.25rem;
}

#div_body {
    position:relative;
    border-radius:.5rem;
}

#S_LOGIN_div {
    background-color:rgb(25, 25, 25)!important;
    background-image:none!important;
}

#S_LOGIN_div .asako-wrapper {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    width:100vw;
    height:100vh;
}

button {
    font-family:'Nunito', sans-serif;
}

/*#S_LOGIN_div .login-container {*/
/*    display:flex;*/
/*    flex-direction:column;*/
/*    justify-content:center;*/
/*    width:500px;*/
/*    margin:0;*/
/*}*/

#S_LOGIN_div .message {
    background-color:#007bff;
    color:#fff;
    text-align:left;
    padding-left:18px;
    padding-right:18px;
    display:block;
    width:500px;
    font-size:16px;
    padding-top:15px;
    padding-bottom:15px;
    margin-left:auto;
    margin-right:auto;
    border-radius:0.25rem;
    word-break: break-all;
}

#S_LOGIN_div .message.success {
    background-color:#28a745;
    color:#fff;
}

#S_LOGIN_div .message.danger {
    background-color:#dc3545;
    color:#fff;
}

#S_LOGIN_div .nerd_control {
    text-align:left;
    padding:.175rem .75rem;
    display:block;
    width:500px;
    background-color:#1f1f1f!important;
    border:2px solid #2b2b2b;
    outline:none;
    color:#fff;
    border-radius:.25rem;
    font-family:'Nunito';
    height:calc(1.5em + .75rem + 2px);
    font-size:1rem;
    margin-top:15px;
    margin-bottom:0px;
    transition:border-color .15s;
}

#S_LOGIN_div .nerd_control:nth-child(3) {
    margin-bottom:15px;
    margin-top:10px;
}

#S_LOGIN_div .nerd_control:focus {
    border-color:#007bff;
}

#S_LOGIN_div .bd-example {
    padding:0!important;
}

.btn-success {
    color:#fff!important;
    background-color:#28a745!important;
    border-color:#28a745!important;
    display:block!important;
    width:500px;
    padding:.175rem 1rem!important;
    transition: background-color .15s, border-color .15s!important;
    font-family:'Nunito'!important;
}

.btn-success:hover {
    background-color:#218838!important;
    border-color:#1e7e34!important;
}

.btn-success.disabled {
    opacity:0.8!important;
    pointer-events:none!important;
}

.btn-success.lord {
    padding:0!important;
}

.btn-success.lord-1 {
    padding:0!important;
    display:flex;
    background-image:url('https://el.asako.dev/image/ui/31_cloud_garden/cloud_bt2.png');
    background-color:transparent!important;
    background-size:100% 100%;
    background-position:center;
    display:block;
    position:fixed;
    top:13.5%;
    right:12%;
    z-index:999999;
    border-radius:4px;
    font-size:13px;
    width:87px;
    height:33px;
}

.btn-success.lord-2 {
    padding:0!important;
    display:flex;
    background-image:url('https://el.asako.dev/image/ui/31_cloud_garden/cloud_bt2.png');
    background-color:transparent!important;
    background-size:100% 100%;
    background-position:center;
    display:block;
    position:fixed;
    top:13.5%;
    left:12%;
    z-index:999999;
    border-radius:4px;
    font-size:13px;
    width:87px;
    height:33px;
}

.btn-success.lord:hover {
    transform:scale(1.05);
}

#S_LOGIN_div .auth_buttons {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

#S_LOGIN_div .auth_buttons .btn {
    width:auto;
    margin-left:2.5px;
    margin-right:2.5px;
}

#S_CHAT_DIV {
    width:300px;
    bottom:45px;
}

.chat-body .chat-content {
    height:300px;
}

.chat-body .chat-content, #S_CHAT_DIV .chat-input, #S_CHAT_DIV input {
    width:300px;
}

#S_CHAT_DIV.hide {
    transform:translateX(-130px) translateY(250px);
}

/*.chat-body {*/
/*    height:500px;*/
/*    pointer-events:auto;*/
/*    margin-top:auto;*/
/*}*/

/*.chat-body .chat-content {*/
/*    width:100%;*/
/*    background:#1f1f1f!important;*/
/*}*/

/*.chat-body .chat-input {*/
/*    background:#1f1f1f!important;*/
/*    border-radius:.25rem;*/
/*}*/

/*.chat-body .chat-input input {*/
/*    text-align:left;*/
/*    padding:.175rem .75rem;*/
/*    display:block;*/
/*    width:500px;*/
/*    background-color:#1f1f1f!important;*/
/*    border:2px solid #2b2b2b!important;*/
/*    outline:none;*/
/*    color:#fff;*/
/*    border-radius:.25rem;*/
/*    font-family:'Nunito', sans-serif;*/
/*    height:calc(1.5em + .75rem + 2px);*/
/*    font-size:1rem;*/
/*    transition:border-color .15s;*/
/*}*/

/*.chat-body .chat-input input:focus {*/
/*    border-color:#007bff!important;*/
/*}*/

.f1-effect {
  position: relative;
  z-index: 99999999; }
  .f1-effect .f1-effect-flower {
    opacity: 1;
    border-radius: 100%;
    background: url(https://file.hstatic.net/200000259653/file/pages_17a8568517e94dcd9c8aec5587_570924d1fa4b4da1aa011044c9d7cc1c.png);
    position: fixed;
    top: -10%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    -webkit-animation-name: snowflakes-fall, snowflakes-shake;
    -webkit-animation-duration: 10s, 3s;
    -webkit-animation-timing-function: linear, ease-in-out;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-play-state: running, running;
    animation-name: snowflakes-fall, snowflakes-shake;
    animation-duration: 10s, 3s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running; }
    @media (max-width: 767px) {
      .f1-effect .f1-effect-flower:nth-of-type(2n) {
        display: none; } }
    .f1-effect .f1-effect-flower:nth-of-type(0) {
      left: 5%;
      -webkit-animation-delay: 1s, 1s;
      animation-delay: 1s, 1s;
      width: 16px;
      height: 16px;
      background-position: 0 -23px; }
    .f1-effect .f1-effect-flower:nth-of-type(1) {
      left: 10%;
      -webkit-animation-delay: 6s, 0.5s;
      animation-delay: 6s, 0.5s;
      width: 13px;
      height: 13px;
      background-position: 0 -50px; }
    .f1-effect .f1-effect-flower:nth-of-type(2) {
      left: 20%;
      -webkit-animation-delay: 4s, 2s;
      animation-delay: 4s, 2s;
      width: 15px;
      height: 15px;
      background-position: -49px -35px; }
    .f1-effect .f1-effect-flower:nth-of-type(3) {
      left: 30%;
      -webkit-animation-delay: 2s, 2s;
      animation-delay: 2s, 2s;
      width: 14px;
      height: 14px;
      background-position: -31px 0; }
    .f1-effect .f1-effect-flower:nth-of-type(4) {
      left: 40%;
      -webkit-animation-delay: 8s, 3s;
      animation-delay: 8s, 3s;
      width: 16px;
      height: 16px;
      background-position: 0 -23px; }
    .f1-effect .f1-effect-flower:nth-of-type(5) {
      left: 50%;
      -webkit-animation-delay: 6s, 2s;
      animation-delay: 6s, 2s;
      width: 13px;
      height: 13px;
      background-position: 0 -50px; }
    .f1-effect .f1-effect-flower:nth-of-type(6) {
      left: 60%;
      -webkit-animation-delay: 2.5s, 1s;
      animation-delay: 2.5s, 1s;
      width: 15px;
      height: 15px;
      background-position: -49px -35px; }
    .f1-effect .f1-effect-flower:nth-of-type(7) {
      left: 70%;
      -webkit-animation-delay: 1s, 0s;
      animation-delay: 1s, 0s;
      width: 14px;
      height: 14px;
      background-position: -31px 0; }
    .f1-effect .f1-effect-flower:nth-of-type(8) {
      left: 80%;
      -webkit-animation-delay: 2s, 2s;
      animation-delay: 2s, 2s;
      width: 14px;
      height: 14px;
      background-position: -31px 0; }
    .f1-effect .f1-effect-flower:nth-of-type(9) {
      left: 90%;
      -webkit-animation-delay: 8s, 3s;
      animation-delay: 8s, 3s;
      width: 16px;
      height: 16px;
      background-position: 0 -23px; }
    .f1-effect .f1-effect-flower:nth-of-type(10) {
      left: 95%;
      -webkit-animation-delay: 6s, 2s;
      animation-delay: 6s, 2s;
      width: 13px;
      height: 13px;
      background-position: 0 -50px; }
 
@-webkit-keyframes snowflakes-fall {
  0% {
    top: -10%; }
  100% {
    top: 100%; } }
 
@-webkit-keyframes snowflakes-shake {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); }
  50% {
    -webkit-transform: translateX(80px);
    transform: translateX(80px); }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); } }
 
@keyframes snowflakes-fall {
  0% {
    top: -10%; }
  100% {
    top: 100%; } }
 
@keyframes snowflakes-shake {
  0% {
    transform: translateX(0px); }
  50% {
    transform: translateX(80px); }
  100% {
    transform: translateX(0px); } }
    
#Img_MM_bg_map {
    background:url(https://eldorado.asako.dev/map_bg)!important;
}

#main_facebook {
    bottom:32px;
    text-shadow:none;
}

#main_facebook a {
    color:#fff;
    text-decoration:none;
}

#main_facebook a:hover {
    opacity:0.8;
}

#Img_MM_bg_frame {
    background:url(/image/new/mm_bg.jpg);
    background-size:cover;
}

#main_menu>div {
    background-image:url(/image/ui/31_cloud_garden/cloud_bt2.png);
    background-size:100% 100%;
    text-align:center;
}

#main_menu>div:hover {
    background-image:url(/image/ui/31_cloud_garden/cloud_bt2.png);
    transform:scale(1.05);
}

#TXT_MM_tip {
    display:none!important;
}

#start_button {
    background-image:url(/image/ui/31_cloud_garden/cloud_bt1.png);
    background-size:100% 100%;
    height:78px;
    display:flex;
    align-items:center;
}

#start_button:hover {
    background-image:url(/image/ui/31_cloud_garden/cloud_bt1.png);
    transform:scale(1.05);
}

#start_button .icon {
    display:none!important;
}

#start_button label {
    margin-left:25px;
    font-size:20px!important;
}

#S_TOP_LEVEL_div button {
    background-color:transparent;
    background-image:url(/image/ui/31_cloud_garden/cloud_bt1.png);
    background-size:100% 100%;
    font-family:'Nunito', sans-serif;
}

#Img_MM_top_point {
    display:none!important;
}

#TXT_MM_guide2 {
    color:#fff!important;
    text-shadow:none!important;
}

#RA_left, #RV_left {
    background:url(../image/ui/13_ranking/pvp_bgbox_eng.png);
}

.header {
    background-color:transparent;
}

#rank_content .item {
    background-color:transparent;
    margin-bottom:4px;
}

#RA_left .header, #RV_left .header {
    margin-top:54px;
}

#rank_content .item .ranking {
    font-size:20px;
}

#rank_content .item .name, #rank_content .item .score {
    font-size:18px;
}

#RA_left #rank_content, #RV_left #rank_content {
    top:148px!important;
    left:38px !important;
}


#RA_left #Txt_RA_top10, #RV_left #Txt_RV_top10 {
    position:relative;
    top:34.5px;
}

#AD_btn1 {
    background:url(/image/ui/31_cloud_garden/cloud_bt1.png);
    background-size:100% 100%;
    background-repeat:no-repeat;
    cursor:pointer;
}

#AD_btn1:hover {
    transform:scale(1.05);
}

#AD_btn_focus {
    display:none;
}

#RV_enterance_num_info1 {
    text-align:center!important;
}

#Img_SM_focus_20, #Img_SM_focus_21 {
    display:none!important;
}

#Img_SM_menu20_bg:hover, #Img_SM_menu21_bg:hover {
    transform:scale(1.05)!important;
}

#Img_SM_menu20_icon, #Img_SM_menu21_icon, #Txt_SM_menu20, #Txt_SM_menu21 {
    pointer-events:none;
}

#Img_SM_menu20_bg, #Img_SM_menu21_bg {
    width:230px;
    height:75px;
}

#Img_SM_menu21_icon {
    left:795px!important;
}

#Txt_SM_menu21 {
    left:658px!important;
}