﻿body {
    margin: 0px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: 'CLCF-Regular';
}

button {
    border: none;
}

.cntchemlab {
    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(0, 18, 63);
    overflow: hidden;
    z-index: 26;
}

.npcBalloonText {
    font-family: 'CLCF-Bold';
    background-color: transparent;
    color: rgb(0, 18, 63);
    overflow: hidden;
    z-index: 27;
}

.uiBatteryBack {
    background-color: transparent;
}

.uiBatteryBackStepTitle {
    background-color: rgba(255, 255, 255, 0.1);
}

.uiBatteryTitle {
    font-family: 'CLCF-Regular';
    color: white;
    overflow: visible;
    text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
}

.uiBatteryTitle2 {
    font-family: 'CLCF-Regular';
    color: black;
    overflow: visible;
    text-shadow: 0 0 1em darkgray, 0 0 0.2em darkgray;
}

.uiBatteryTitle3 {
    font-family: 'CLCF-Bold';
    color: rgba(43, 46, 69);
    overflow: visible;
    text-shadow: 0 0 1em darkgray, 0 0 0.1em darkgray;
}

.uiBatteryStepTitle {
    vertical-align: middle;
    white-space: nowrap;
}

.uiBatteryDetail {
    font-family: 'CLCF-Regular';
    vertical-align: top;
    color: white;
    background-color: transparent;
    text-shadow: 0 0 0.5em skyblue, 0 0 0.1em skyblue;
}

.uiBatteryDetail2 {
    font-family: 'CLCF-Bold';
    vertical-align: top;
    color: white;
    background-color: transparent;
}

.uiBatteryDetail3 {
    font-family: 'CLCF-Bold';
    vertical-align: top;
    color: #180f31;
    background-color: transparent;
}

.uiBatteryAnalysisImg {
    border-radius:4%;
}

.uiBatteryMultiLineH150 {
    line-height: 150%;
}

.uiBatteryStepDetail {
    vertical-align: middle;
    white-space: nowrap;
}

.uiBatteryTitleFail {
    font-family: 'CLCF-Regular';
    vertical-align: top;
    color: white;
    background-color: transparent;
    text-shadow: 0 0 0.2em black, 0 0 0.2em black;
}

.uiBatteryDetailFail {
    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;
}


.uiBatteryStepNum {
    font-family: 'CLCF-Bold';
    text-align: left;
    vertical-align: top;
    color: darkblue;
    background-color: transparent;
    overflow: visible;
    font-weight: 900;
    font-style: italic;
}

.uiBatteryCounter {
    background-color: transparent;
}

.uiBatteryBtn1 {
    font-family: 'CLCF-Regular';
    background-color: transparent;
    background-image: url('./image/chemlab_btn_normal.png');
    background-size: 100% 100%;
}

.uiBatteryBtn1:hover {
    background-image: url('./image/chemlab_btn_pushed.png');
}

.uiBatteryBtn1:active {
    background-image: url('./image/chemlab_btn_pushed.png');
}

.uiBatteryBtnText1 {
    color: white;
    text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
    text-align: center;
    background-color: transparent;
}

.uiBatteryBtn2 {
    font-family: 'CLCF-Regular';
    background-color: transparent;
    background-image: url('./image/pro_btn_normal.png');
    background-size: 100% 100%;
}

.uiBatteryBtn2:hover {
    background-image: url('./image/pro_btn_pushed.png');
}

.uiBatteryBtn2:active {
    background-image: url('./image/pro_btn_pushed.png');
}

.uiBatteryBtnText2 {
    color: white;
    text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
    text-align: center;
    background-color: transparent;
}




.uiBatteryBtnExperiment {
    background-color: orange;
    border: black 1px solid;
    color: black;
    text-align: center;
}

.uiBatteryBtnStep {
    background-color: transparent;
    background-image: url('./image/btn_step_main_normal.png');
    background-size: 100% 100%;
}

.uiBatteryBtnStep_Selected {
    background-image: url('./image/btn_step_main_pushed.png');
}

.uiBatteryBtnSubstep {
    background-color: transparent;
    background-image: url('./image/btn_step_sub_normal.png');
    background-size: 100% 100%;
}

.uiBatteryBtnSubstep_Selected {
    background-image: url('./image/btn_step_sub_pushed.png');
}

.uiBatteryBtnCloseSteps {
    background-color: transparent;
    background-size: 100% 100%;
}

.uiBatteryBtnCloseSteps_btn {
    background-color: transparent;
    background-image: url('./image/btn_step_list_close.png');
    background-size: 100% 100%;
}


.my-element {
    display: inline-block;
    margin: 0 0.5rem;
    animation: bounce; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 2s; /* don't forget to set a duration! */
}


