@font-face {
  font-family: 'Nunito';
  src: url('/garage/font/Nunito-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito';
  src: url('/garage/font/Nunito-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}




img {border: 0px; padding: 0px; margin: 0px}
body {font-size: 14px; color: #333; margin: 0px;  font-family: "Nunito","Nunito Sans"; background-color: black}
a {text-decoration: underline}

video {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}
video.fade-out {
    opacity: 0;
}



.clear {clear: both}
.no_dis {display: none}
.dis {display: block}
.lef {float: left}

.blue {color: #0289ff}
.skyblue {color: #68cdff}

.splash {position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; background-image: url('/garage/images/splash.png'); background-size: cover; background-position: center;}
.splash_logo {position: fixed; width: 200px; height: 200px; top: calc(50svh - 100px); left: calc(50% - 100px); z-index: 1; background-image: url('/garage/images/splash_logo.png'); background-size: contain; background-position: center; background-repeat: no-repeat;}
.splash_login {display: none;position: fixed;bottom: 0;left: 0;width: 100%;z-index: 2}


.undercons_logo {position: fixed; width: 200px; height: 200px; top: calc(50svh - 100px); left: calc(50% - 100px); z-index: 1; background-image: url('/garage/images/undercons_logo.png'); background-size: contain; background-position: center; background-repeat: no-repeat;}
.undercons_login {display: none;position: fixed;bottom: 0;left: 0;width: 100%;z-index: 2}


.bt_type_blue {margin: 0px 5% 2.5% 5%; background-color: #0088ff; border-radius: 15px; height: 64px; line-height: 64px; color: white; font-size: 16px; text-align: center;}
.bt_type_gray {margin: 0px 5% 2.5% 5%; background-color: #333333; border-radius: 15px; height: 64px; line-height: 64px; color: white; font-size: 16px; text-align: center;}


.bg_bk {display: none; position: fixed; top: 0px; left: 0px; width: 100%; min-height: 100vh; background-image: url('/garage/images/op50.png'); z-index: 10000}
.bg_bk_max {position: fixed; top: 0px; left: 0px; width: 100%; min-height: 100vh; background-image: url('/garage/images/op50.png'); z-index: 100000}
.bg_bk_toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%);
  border-radius: 15px;
  padding: 5px 10px;
  background-image: url('/garage/images/op50.png');
  z-index: 100000;
  color: white;
  text-align: center;
  white-space: nowrap;
}
.bg_bk_process {height: 40px; line-height: 20px; text-align: center; margin: calc(50svh - 30px) auto 0px 0px; color: white; font-size: 14px;}

.privacy {position: fixed; top: 0px; left: 0px; width: 100%; min-height: 100vh; background-image: url('/garage/images/op50.png'); z-index: 10000000}

.dialog {width: 80%; padding: 5%; background-color: white; border-radius: 15px; text-align: center; max-width: 420px; transform: translate(-50%, -50%); position: absolute; top: calc(50% - 160px); left: 50%;}
.dialog_se {max-width: 420px;width: 80%;padding: 5%;background-color: white;border-radius: 15px;text-align: center;transform: translate(-50%, -50%);left: 50%;top: 50%;position: absolute;}


.ctitle {font-size: 18px; font-weight: bold;}
.cbutton {font-size: 16px; height: 44px; line-height: 44px; background-color: #0088ff; border-radius: 10px; margin: 20px 0px 0px 0px; color: white; cursor: pointer;}
.cbutton_gr {font-size: 16px; height: 44px; line-height: 44px; background-color: gray; border-radius: 10px; margin: 10px 0px 0px 0px; color: white; cursor: pointer;}

.cbutton50_bf {float: left; width: 48.5%; font-size: 16px; height: 44px; line-height: 44px; background-color: #DDE1E4; border-radius: 10px; margin: 0px 0px 0px 0px; color: white; cursor: pointer;}
.cbutton50 {float: left; width: 48.5%; font-size: 16px; height: 44px; line-height: 44px; background-color: #0088ff; border-radius: 10px; margin: 0px 0px 0px 0px; color: white; cursor: pointer;}
div.cbutton50 a {color: white; text-decoration: none;}
.cbutton50_gr {float: left; width: 48.5%; font-size: 16px; height: 44px; line-height: 44px; background-color: #899096; border-radius: 10px; margin: 0px 3% 0px 0px; color: white; cursor: pointer;}


.cbody {line-height: 24px; font-size: 14px; margin: 10px 0px;}
div.cbody span {color: #0088ff;}
.cbody_se {line-height: 24px; font-size: 14px; margin: 10px 0px 24px 0px;}
div.cbody_se span {color: #0088ff;}

.header_settings {position: fixed; width: 32px; height: 32px; top: 5svh; right: 7.5%; background-image: url('/garage/images/ic_settings.png'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 1001; margin: 0px}
.header_missions {position: fixed; width: 32px; height: 32px; top: 10svh; right: 7.5%; background-image: url('/garage/images/ic_missions.png'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 1001; margin: 0px}
.header_events {position: fixed; width: 32px; height: 32px; top: 15svh; right: 7.5%; background-image: url('/garage/images/ic_event.png'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 1001; margin: 0px 0px 0px 0px}

.mission_wrapper {position: relative;}



.header_new_missions {position: fixed; width: 6px; height: 6px; top: calc(10vh + 1px); right: calc(7.5% + 1px); border-radius: 3px; background-color: red; z-index: 1001}
.settings {position: fixed; left: 0px; bottom: -100vh; width: 100%; padding: 5% 0px 2.5% 0px; height: 80svh; overflow-y: scroll; background-color: white; border-top-left-radius: 20px; border-top-right-radius: 20px; z-index: 1002; box-shadow: 0px 0px 10px gray;}
.settings_close {position: absolute; width: 24px; height: 24px; background-size: 100%; background-image: url('/garage/images/ic_close.png'); background-position: center; background-repeat: no-repeat; top: 0px; right: 5%}
.settings_title {font-size: 18px}

.settings_top {position: relative; width: 100%; height: 24px; line-height: 24px; text-align: center; background-color: white}
.settings_middle {position: relative; width: 100%; height: calc(77.5vh - 90px); margin: 0px 0px 2.5svh 0px; overflow-y: scroll; }
.settings_bottom {position: relative; width: 100%; height: 64px; line-height: 64px; padding: 0px 0px 0px 0px; text-align: center;}


.setting_copy {float: left; width: 24px; height: 24px; background-image: url('/garage/images/ic_copy.png'); background-size: contain; background-repeat: no-repeat; background-position: center; margin: 0px 0px 0px 10px}

.settings_t {font-size: 16px; color: #a1a1a1; padding: 10% 5% 2.5% 5%; border-bottom: 1px solid #efefef}
.settings_bt {height: 64px; line-height: 64px; text-align: center; color: white; font-size: 16px; background-color: #66b8ff; border-radius: 18px;}
.settings_ipt {padding: 5%; text-align: center; color: white; font-size: 16px; border-bottom: 1px solid #efefef;}
.settings_ipt_txt {width: 90%; background-color: #f2f2f2; border-radius: 15px; line-height: 44px; color: #333; margin: 10px 0px 0px 0px; text-align: left; padding: 0px 5%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.settings_ipt_txt_no {width: 90%; background-color: #f2f2f2; border-radius: 15px; line-height: 44px; color: #dfdfdf; margin: 10px 0px 0px 0px; text-align: left; padding: 0px 5%; overflow: hidden;}
div.settings_ipt_txt span {color: #a1a1a1}

.settings_ipt_t {font-size: 16px; color: #333; text-align: left;}
.settings_ipt_c {color: #333; margin: 7px 0px}
.settings_ipt_cl {float: left}
.settings_ipt_cr {float: right}
.settings_ipt_b {height: 16px; line-height: 16px; border-radius: 8px; background-color: #efefef;}
.settings_ipt_b_inner {width: 50%; height: 16px; border-radius: 8px; background-image: linear-gradient(to right, #68cdff , #0289ff)}

.settings_ipt_lef {float: left; line-height: 40px; color: #333}
.settings_ipt_rig {float: right; width: 260px; height: 40px; line-height: 40px; color: white; border-radius: 20px; background-color: #f5f5f5; font-size: 14px}
.settings_ipt_rig_t {float: left; width: 40%; text-align: center; color: #333}
.settings_ipt_rig_c {float: right; width: 60%; background-color: #333; color: white; border-radius: 20px; text-align: center;}

.settings_submit {width: 90%; height: 64px; line-height: 64px; text-align: center; color: white; font-size: 16px; border-radius: 18px; background-image: linear-gradient(to right, #68cdff , #0289ff); margin: 0px 5%}
div.settings_submit a {color: white; text-decoration: none;}

.events {position: fixed; left: 0px; bottom: -100vh; width: 100%; padding: 5% 0px 0px 0px; min-height: 200px; height: 70vh; background-color: white; border-top-left-radius: 20px; border-top-right-radius: 20px; z-index: 1002; box-shadow: 0px 0px 10px gray}
.events_ipt_txt {width: 90%; background-color: #f2f2f2; font-size: 14.5px; border-radius: 15px; line-height: 18.85px; color: #333; margin: 10px 0px 0px 0px; text-align: left; padding: 5% 5%}
.events_ipt_txt_more {width: 90%; margin: 24px 5%; color: #a1a1a1; font-size: 16px; text-align: center;}
div.events_ipt_txt span {font-weight: bold;}

.events_top {position: absolute; top: 2.5vh; left: 0px; width: 100%; height: 24px; line-height: 24px; text-align: center; background-color: white}
.events_middle {position: absolute; left: 0px; top: calc(2.5svh + 24px); width: 100%; height: 67.5vh; padding: 0px; margin: 0px 0px 0px 0px; overflow-y: scroll}
.events_bottom {position: absolute; left: 0px; bottom: 2.5vh; width: 100%; height: 64px; line-height: 64px; padding: 0px 0px 0px 0px; text-align: center; background-color: white;}


.custom-select {position: relative;width: 100%;}
.custom-select select {display: none;}
.select-selected {height: 44px;background-color: #f2f2f2;border: 0;border-radius: 15px;padding: 0 40px 0 20px;color: #333;cursor: pointer;display: flex;align-items: center;position: relative;margin: 10px 0 0 0;}
.select-selected:after {content: "";position: absolute;right: 15px;top: 50%;width: 0;height: 0;margin-top: -3px;border: 6px solid transparent;border-top-color: #6b7280;transition: transform 0.3s;}
.select-selected.select-arrow-active:after {transform: rotate(180deg);margin-top: -9px;}
.select-items {position: absolute;background-color: white;bottom: 50px;right: 0;z-index: 99;border-radius: 15px;box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);max-height: 280px;overflow-y: auto;display: none;width: 100%;}
.select-items.show {display: block;}
.select-items div {padding: 12px 20px;cursor: pointer;transition: all 0.2s;color: black;}
.select-items div:hover {background-color: #f7f7f7;}
.select-items div.same-as-selected {background-color: #e3f2fd;color: #1976d2;}
.select-items::-webkit-scrollbar {width: 6px;}
.select-items::-webkit-scrollbar-thumb {background: #ddd;border-radius: 10px;}

.missions {position: fixed; left: 0px; bottom: -100vh; width: 100%; padding: 5% 0px 0px 0px; min-height: 200px; height: 80vh; background-color: white; border-top-left-radius: 20px; border-top-right-radius: 20px; z-index: 1002; box-shadow: 0px 0px 10px gray}
.missions_top {position: absolute; top: 2.5vh; left: 0px; width: 100%; height: 24px; line-height: 24px; text-align: center; background-color: white}
.missions_middle {position: absolute; left: 0px; bottom: 0px; width: 100%; height: calc(77.5vh); margin: 0px 0px 0px 0px; overflow-y: scroll;}


.mission_m {border: 1px solid #EFEFEF; margin: 0px 5% 10px 5%; padding: 16px; color: #333; border-radius: 10px;}
.mission_m_t {float: left; padding: 5px 0px; font-size: 12px; color: #a1a1a1}
div.mission_m_t span {color: #333; font-size: 16px;}
.mission_m_bt_done {float: right; width: 128px; height: 50px; line-height: 50px; border-radius: 15px; background-color: #0088FF; color: white; text-align: center;}
.mission_m_bt_ing {float: right; width: 128px; height: 50px; line-height: 50px; border-radius: 15px; background-color: #f5f5f5; color: #959BA0; text-align: center;}
.mission_m_bt_claim {float: right; width: 128px; height: 50px; line-height: 50px; border-radius: 15px; background-color: #DDE1E4; color: #A0A8AF; text-align: center;}


.mission_time {float: right; width: 75px; height: 20px; line-height: 20px; text-align: center; color: #a1a1a1; padding: 0px 0px 0px 15px; background-image: url('/garage/images/ic_clock.png'); background-size: 16px; background-position: left center; background-repeat: no-repeat;}

/* idol Conversation */
.idol_video {position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh}
.idol_wallpaper {width: 100%; height: 100vh; object-fit: cover;}
.idol_wallpaper2 {position: absolute; top: 0px; left: 0px; width: 100%; height: 100vh; object-fit: cover; z-index: 1}
.qqqqidol_chat {position: fixed; bottom: 0px; left: 0px; width: 85%; height: 44px; background-color: white; border-radius: 22px; margin: 20px 7.5% 30px 7.5%; box-shadow: 0px 0px 20px rgb(45, 44, 44);}

.idol_chat {position: fixed; bottom: 0px; left: 5%; width: 90%; height: 44px; background-color: white; border-radius: 22px; margin: 0px; box-shadow: 0px 0px 20px rgb(45, 44, 44); z-index: 1}

.idol_chat_ipt {float: left; width: calc(100% - 50px); margin: 0px; height: 44px;}
.ipt_idol_chat {width: 90%; height: 44px; line-height: 44px; padding: 0px 5%; border: 0px; color: #333; margin: 0px; background: none; border-radius: 20px; font-size: 16px; font-family: 'Nunito'; font-weight: 400}
.ipt_idol_chat:focus {outline: none; box-shadow: none;}
.idol_chat_send {float: right; width: 44px; height: 44px; border-radius: 50%; margin: 0px; background-image: url('/garage/images/ic_send.png'); background-size: 30px; background-position: center; background-repeat: no-repeat;}

.idol_chat_list {
    display: flex;
    flex-direction: column-reverse;
    position: fixed;
    left: 5%;
    top: 200px;
    width: 90%;
    height: calc(100svh - 140px);
    overflow-y: auto;
    z-index: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0px 0px 24px 0px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 1) 50%);
}

.idol_chat_list::-webkit-scrollbar {
    display: none;
}

.chat_ppl {float: right; max-width: 80%; line-height: 20px; padding: 11px 16px; border-radius: 15px; border-bottom-right-radius: 0px; font-size: 14px; color: white; margin: 8px 0px 0px 0px; word-break: break-word;}
.chat_bot {float: left; max-width: calc(100% - 32px); line-height: 20px; padding: 11px 16px; border-radius: 15px; border-bottom-left-radius: 0px; font-size: 14px; color: white; margin: 8px 0px 0px 0px; word-break: break-word; }

.chat_input {display: none; opacity : 0.5; width: 80px; height: 40px; line-height: 40px; min-height: 40px; text-align: center; border-radius: 15px; border-bottom-left-radius :0px; background-image: url('/garage/images/now_talking.gif'); background-size: 40px; background-repeat: no-repeat; background-position: center; background-color: rgb(135, 130, 130); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin: 8px 0px 0px 0px}

.feedback {width: 100%; height: 24px; line-height: 24px; border-radius: 12px;  color: #D1F1FF; margin: 4px 0px 0px 0px; text-shadow: 0px 0px 5px gray}
.feedback_txt {float: left}
.feedback_icon {float: left; height: 20px; padding: 2px; border-radius: 5px; margin: 0px 0px 0px 5px; background-image: url('/garage/images/op50_wh.png');}
div.feedback_icon img {width: 20px; height: 20px; float: left; margin: 0px 1px;}
.feedback_done {float: left; height: 24px; margin: 0px 0px 0px 5px}
div.feedback_done img {float: left; height: 24px;}
.feedback_res {width: 100%; height: 24px; line-height: 24px; margin: 4px 0px 0px 0px; display: none; color: #D1F1FF; text-shadow: 0px 0px 5px gray}

.invite {position: fixed;top: 50%;left: 50%;width: 90%;padding: 5% 2.5%;border-radius: 15px;background-color: white;text-align: center;font-size: 18px;font-weight: bold;max-width: 420px;transform: translate(-50%, -50%);}
.invite.invite-popup {padding: 24px 16px;width: 95%;box-sizing: border-box;}
.invite.invite-popup .invite_list {scrollbar-width: none;margin: 14px 0 24px 0;}
.invite.invite-popup .invite-btn {display: flex;width: 100%;gap: 8px;}
.invite.invite-popup .invite_bt, .invite.invite-popup .invite_bt2_s {width: 100%;}
.invite.invite-popup .invite_code_w_txt {padding: 0 0 0 16px;}

.invite_txt {font-size: 14px; margin: 10px 0px 10px 0px; font-weight: normal;}
.invite_ipt {width: 90%; height: 44px; line-height: 44px; background-color: #f2f2f2; border-radius: 7px; padding: 0px 5%; border: 0px; margin: 0px 0px 10px 0px; font-size: 16px; color: #333333; font-weight: 400; font-family: 'Nunito Sans';}
input.invite_ipt::placeholder {color: #cecece}
.invite_bt {float: left; width: 47.5%; height: 50px; line-height: 50px; text-align: center; background-color: #899096; border-radius: 10px; color: white; font-size: 16px; font-weight: 400;}
.invite_bt2 {float: right; width: 47.5%; height: 50px; line-height: 50px; text-align: center; background-color: #DDE1E4; border-radius: 10px; color: white; font-size: 16px; font-weight: 400}
.invite_bt2_s {float: right; width: 47.5%; height: 50px; line-height: 50px; text-align: center; background-color: #0088FF; border-radius: 10px; color: white; font-size: 16px; font-weight: 400}
.invite_bt3 {height: 50px; line-height: 50px; text-align: center; background-color: #0088FF; border-radius: 10px; color: white; font-size: 16px; font-weight: 400; margin: 20px 0px 0px 0px}

.invite_list {max-height: 260px; margin: 10px 0px; overflow-y: scroll;}

.invite_code_w {float: left; width: calc(100% - 95px); height: 40px; background-color: #f5f5f5; border-radius: 10px; margin: 4px 0px;}
.invite_code_w_txt {float: left; line-height: 40px; padding: 0px 10px; font-size: 16px;}
.invite_code_w_icon {float: right; width: 24px; height: 24px; background-image: url('/garage/images/ic_copy.png'); background-size: 100%; background-repeat: no-repeat; background-position: center; margin: 8px;}
.invite_code_share {float: right; width: 85px; height: 40px; line-height: 40px; text-align: center; color: white; background-color: #333; cursor: pointer; border-radius: 10px; margin: 4px 0px; font-weight: normal; font-size: 16px}

.settings_discord {float: left; width: 47.5%; height: 24px; line-height: 24px; padding: 8px 0px; vertical-align: middle; background-color: #333; border-radius: 8px;}
div.settings_discord img {height: 24px; vertical-align: middle;}
div.settings_discord a {color: white; text-decoration: none;}
.settings_logout {float: right; width: 47.5%; height: 40px; line-height: 40px; vertical-align: middle; background-color: #f5f5f5; border-radius: 8px; color: #333}
div.settings_logout img {height: 24px; vertical-align: middle;}
.invite-unavailable {padding: 24px 16px 16px;box-sizing: border-box;width: 95%;}
.invite-unavailable .invite_txt {margin: 24px 0;}

pre > code {
    white-space: pre-wrap;   /* allow wrapping */
    word-break: break-word;  /* break long words if needed */
}

pre > code.code_area {
    border-left: 4px solid #3776ab;
    background-color: rgba(0, 0, 0, 0.6);
    color: #e5e7eb;
    display: block;
    padding: 12px;
    border-radius: 6px;
    position: relative;
}


.mission_title {border-top: 1px solid #efefef; margin: 5% 0px 0px 0px; padding: 7.5% 5% 5% 5%}
.mission_title_se {float: left; color: #333; font-size: 16px; font-weight: 400;}

.talk-wrap {
        display: flex;
        align-items: center;
        gap: .5rem;
        margin: .5rem 0 0
    }

    .talk-btn {
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: grid;
        place-items: center;
        background: #111;
        color: #fff;
        box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
        transition: transform .05s ease, background .2s ease;
        touch-action: none;
        margin: -2.5px 0px 0px 8px;
    }

    .talk-btn:active {
        transform: scale(.96)
    }

    .talk-btn.recording {
        background: #0088ff;
        animation: pulse 1s infinite
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(214, 48, 49, .5)
        }
        70% {
            box-shadow: 0 0 0 12px rgba(214, 48, 49, 0)
        }
        100% {
            box-shadow: 0 0 0 0 rgba(214, 48, 49, 0)
        }
    }