﻿
body {
    margin: 0px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: 'CLCF-Regular';
}

button {
    border: none;
}


.cntproteinsim {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}


.cntnpc {
    position: absolute;
    overflow: visible;
    left: 0px;
    top: 0px;
    z-index: 25;
    background-color: transparent;
    pointer-events: none;
}

.npcBalloonBack {
    font-family: 'CLCF-Bold';
    background-color: transparent;
    color: rgb(11, 33, 91);
    overflow: hidden;
    z-index: 26;
}

.npcBalloonText {
    font-family: 'CLCF-Bold';
    background-color: transparent;
    color: rgb(11, 33, 91);
    overflow: hidden;
    z-index: 27;
}


.uiProSimBack {
    background-color: transparent;
}

.uiProSimBackTitle {
    background-color: black;
}

.uiProSimBackNone {
    background-color: rgba(255, 255, 255, 0.1);
}

.uiProSimTitle {
    font-family: 'CLCF-Regular';
    color: white;
    overflow: visible;
    text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
}

.uiProSimTitle2 {
    font-family: 'CLCF-Regular';
    color: black;
    overflow: visible;
    text-shadow: 0 0 1em darkgray, 0 0 0.2em darkgray;
}

.uiProSimTitle3 {
    font-family: 'CLCF-Bold';
    color: rgba(29, 45, 66);
    overflow: visible;
    text-shadow: 0 0 1em darkgray, 0 0 0.1em darkgray;
}

.uiProSimTitleInfo {
    font-family: 'CLCF-Bold';
    color: rgba(78, 102, 102);
}

.uiProSimTitleEnergyTarget {
    font-family: 'CLCF-Bold';
    color: rgba(158, 235, 232);
}

.uiProSimTitleEnergyCurrent {
    font-family: 'CLCF-Bold';
    color: rgba(235, 221, 158);
}

.uiProSimUnitEnergyTarget {
    font-family: 'CLCF-Regular';
    text-align: right;
    vertical-align: baseline;
    color: rgba(158, 235, 232);
}

.uiProSimUnitEnergyCurrent {
    font-family: 'CLCF-Regular';
    text-align: right;
    vertical-align: baseline;
    color: rgba(235, 221, 158);
}

.uiProSimTitleNum {
    font-family: 'CLCF-Bold';
    color: white;
    overflow: visible;
    text-shadow: 0 0 0.2em aquamarine, 0 0 0.2em skyblue;
}

.uiProSimTitleSelectList {
    font-family: 'CLCF-Bold';
    color: rgb(109, 116, 100);
    text-align: center;
    overflow: visible;
}


.uiProSimMultiLineH150 {
    line-height: 150%;
}

.uiProSimDetail {
    font-family: 'CLCF-Regular';
    text-align: left;
    vertical-align: top;
    color: white;
    background-color: transparent;
    text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
}

.uiProSimDetail2 {
    font-family: 'CLCF-Regular';
    text-align: left;
    vertical-align: top;
    color: rgb(29, 45, 66);
    background-color: transparent;
}

.uiProSimDetailInfo {
    font-family: 'CLCF-Bold';
    color: rgb(29, 45, 66);
    overflow: hidden;
    overflow-wrap: break-word;
}

.uiProSimProgressMsg {
    font-family: 'CLCF-Bold';
    color: rgb(225, 255, 152);
}





.uiProSimTitleFail {
    font-family: 'CLCF-Regular';
    vertical-align: top;
    color: white;
    background-color: transparent;
    text-shadow: 0 0 0.2em black, 0 0 0.2em black;
}

.uiProSimDetailFail {
    font-family: 'CLCF-Regular';
    vertical-align: top;
    color: rgb(180, 194, 223);
    background-color: transparent;
    text-shadow: 0 0 0.2em black, 0 0 0.2em black;
}

.uiProSimDetailSucc {
    font-family: 'CLCF-Regular';
    vertical-align: top;
    color: rgb(225, 255, 152);
    background-color: transparent;
    text-shadow: 0 0 0.2em black, 0 0 0.2em black;
}



.uiProSimMoleModel {
    background-color: transparent;
}

.uiProSimBtn1 {
    font-family: 'CLCF-Regular';
    background-color: transparent;
    background-image: url('./image/pro_btn_normal.png');
    background-size: 100% 100%;
}

.uiProSimBtn1:hover {
    background-image: url('./image/pro_btn_pushed.png');
}

.uiProSimBtn1:active {
    background-image: url('./image/pro_btn_pushed.png');
}

.uiProSimBtnText1 {
    color: white;
    text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
    text-align: center;
    background-color: transparent;
}

.uiProteinSimListBack {
    background-color: transparent;
}

.uiProSimShowProtein {
    pointer-events: auto;
}

.uiProSimShowMole {
    pointer-events: auto;
}

.uiProSimProteinList {
    background-color: transparent;
}

.uiProSimMoleList {
    background-color: transparent;
}


.SelectProteinList_Back {
    position: absolute;
    float: left;
    pointer-events: auto;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: transparent;
    color: black;
    z-index: 40;
    overflow-x: hidden;
    overflow-y: auto;
}

.SelectProteinList_Item {
    position: relative;
    float: left;
    width: calc(100% - 8px);
    height: 64px;
    background-position: center;
    background-size: 100% 100%;
    background-image: none;
    background-color: transparent;
 
    z-index: 42;
    pointer-events: auto;
}

.SelectProteinList_Item:hover {
    background-image: url('./image/item_protein_selected.png');
    opacity: 0.4;
}

.SelectProteinList_Item:active {
    background-image: url('./image/item_protein_selected.png');
    opacity: 1.0;
}

.SelectProteinList_Item_Selected {
    background-image: url('./image/item_protein_selected.png');
    opacity: 1.0;
}

.SelectProteinList_Item_Selected:hover {
    background-image: url('./image/item_protein_selected.png');
    opacity: 1.0;
}


.SelectProteinList_Item_Icon {
    position: absolute;
    left: 5%;
    top: 20%;
    width: 12%;
    height: 50%;
    background-position: center;
    background-size: 100% 100%;
    background-image: none;
    background-color: transparent;
}

.SelectProteinList_Item_Text {
    position: absolute;
    left: 6%;
    top: 20%;
    width: 88%;
    height: 70%;
    font-family: 'CLCF-Bold';
    font-size: 2.5vh;
    color: rgba(29, 45, 66);
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
}

.SelectMoleList_Back {
    position: absolute;
    float: left;
    pointer-events: auto;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: transparent;
    color: black;
    z-index: 40;
    overflow-x: hidden;
    overflow-y: auto;
}

.SelectMoleList_Item {
    position: relative;
    float: left;
    width: calc(100% - 16px);
    height: 64px;
    background-position: center;
    background-size: 100% 100%;
    background-image: none;
    background-color: transparent;
    z-index: 42;
    pointer-events: auto;
}

.SelectMoleList_Item:hover {
    background-image: url('./image/item_protein_selected.png');
    opacity: 0.4;
}

.SelectMoleList_Item:active {
    background-image: url('./image/item_protein_selected.png');
    opacity: 1.0;
}

.SelectMoleList_Item_Selected {
    background-image: url('./image/item_protein_selected.png');
    opacity: 1.0;
}

.SelectMoleList_Item_Selected:hover {
    background-image: url('./image/item_protein_selected.png');
    opacity: 1.0;
}

.SelectMoleList_Item_Icon {
    position: absolute;
    left: 5%;
    top: 20%;
    width: 12%;
    height: 50%;
    background-position: center;
    background-size: 100% 100%;
    background-image: none;
    background-color: transparent;
}

.SelectMoleList_Item_Text {
    position: absolute;
    left: 6%;
    top: 20%;
    width: 88%;
    height: 70%;
    font-family: 'CLCF-Bold';
    font-size: 2.5vh;
    color: rgba(29, 45, 66);
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
}

.ProteinModeBtn {
    pointer-events: auto;
}

.MsgBoxBack {
    pointer-events: all;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.2);
}

.MsgBoxOverlay {
    z-index: 101;
}

.uiProSimMsgBox {
    font-family: 'CLCF-Regular';
    text-align: center;
    vertical-align: top;
    color: white;
    background-color: transparent;
    text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
    line-height: 150%;
}

.uiProSimStepItem_Normal {
    background-position: center;
    background-size: 100% 100%;
    background-image: url('./image/pro_step_box_normal.png');
    background-color: transparent;
    font-family: 'CLCF-Bold';
    color: rgb(0, 22, 51);
    
}

.uiProSimStepItem_Current {
    background-image: url('./image/pro_step_box_current.png');
}

.uiProSimStepItem_Finished {
    background-image: url('./image/pro_step_box_finished.png');
}

.uiProSimStepLink_Normal {
    background-position: center;
    background-size: 100% 100%;
    background-image: url('./image/pro_step_link_normal.png');
    background-color: transparent;
}

.uiProSimStepLink_Finished {
    background-image: url('./image/pro_step_link_finished.png');
}

.uiProSimPropVScroll {
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
}
