body {
    margin: 0px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: 'CLCF-Regular';
}

button {
    border: none;
}

.cntmomentum {
    float: left;
    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;
}

.uiMomentumBack {
    background-color: transparent;
}

.uiMomentumBackStepTitle {
    background-color: rgba(255, 255, 255, 0.1);
}

.uiMomentumTitle {
    font-family: 'CLCF-Regular';
    color: white;
    overflow: visible;
    text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
}

.uiMomentumTitle2 {
    font-family: 'CLCF-Regular';
    color: black;
    overflow: visible;
    text-shadow: 0 0 1em darkgray, 0 0 0.2em darkgray;
}

.uiMomentumTitle3 {
    font-family: 'CLCF-Bold';
    color: rgb(29, 45, 66);
    overflow: visible;
    text-shadow: 0 0 1em darkgray, 0 0 0.1em darkgray;
}

.uiMomentumTitle4 {
    font-family: 'CLCF-Bold';
    color: rgb(53, 18, 0);
}

.uiMomentumStepTitle {
    vertical-align: middle;
    white-space: nowrap;
}

.uiMomentumDetail {
    font-family: 'CLCF-Regular';
    vertical-align: top;
    color: white;
    background-color: transparent;
    text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
}

.uiMomentumDetail2 {
    font-family: 'CLCF-Regular';
    vertical-align: top;
    color: rgb(52, 16, 0);
}

.uiMomentumMultiLineH150 {
    line-height: 150%;
}

.uiMomentumStepDetail {
    vertical-align: middle;
}

.uiMomentumTitleFail {
    font-family: 'CLCF-Regular';
    vertical-align: top;
    color: white;
    background-color: transparent;
    text-shadow: 0 0 0.2em black, 0 0 0.2em black;
}

.uiMomentumDetailFail {
    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;
}

.uiMomentumListBack {
    background-color: transparent;
}

.uiMomentumStepNum {
    font-family: 'CLCF-Bold';
    text-align: left;
    vertical-align: top;
    color: darkblue;
    background-color: transparent;
    overflow: visible;
    font-weight: 900;
    font-style: italic;
}

.uiMomentumCounter {
    background-color: transparent;
}

.uiMomentumBtn1 {
    font-family: 'CLCF-Regular';
    background-color: transparent;
    background-image: url('./image/chemlab_btn_normal.png');
    background-size: 100% 100%;
}

.uiMomentumBtn1:hover {
    background-image: url('./image/chemlab_btn_pushed.png');
}

.uiMomentumBtn1:active {
    background-image: url('./image/chemlab_btn_pushed.png');
}

.uiMomentumBtnText1 {
    color: white;
    text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
    text-align: center;
    background-color: transparent;
}

.uiMomentumBtn2 {
    font-family: 'CLCF-Regular';
    background-color: transparent;
    background-image: url('./image/pro_btn_normal.png');
    background-size: 100% 100%;
}

.uiMomentumBtn2:hover {
    background-image: url('./image/pro_btn_pushed.png');
}

.uiMomentumBtn2:active {
    background-image: url('./image/pro_btn_pushed.png');
}

.uiMomentumBtnText2 {
    color: white;
    text-shadow: 0 0 1em skyblue, 0 0 0.2em skyblue;
    text-align: center;
    background-color: transparent;
}

.uiMomentumBtn3 {
    font-family: 'CLCF-Regular';
    background-color: transparent;
    background-image: url('./image/mm_btn_normal.png');
    background-size: 100% 100%;
}

.uiMomentumBtn3:hover {
    background-image: url('./image/mm_btn_pushed.png');
}

.uiMomentumBtn3:active {
    background-image: url('./image/mm_btn_pushed.png');
}

.uiMomentumBtnText3 {
    color: black;
    text-align: center;
    background-color: transparent;
}


.uiMomentumBtnExperiment {
    background-color: orange;
    border: black 1px solid;
    color: black;
    text-align: center;
}

.uiMomentumBtnStep {
    background-color: transparent;
    background-image: url('./image/btn_step_main_normal.png');
    background-size: 100% 100%;
}

.uiMomentumBtnStep_Selected {
    background-image: url('./image/btn_step_main_pushed.png');
}

.uiMomentumBtnSubstep {
    background-color: transparent;
    background-image: url('./image/btn_step_sub_normal.png');
    background-size: 100% 100%;
}

.uiMomentumBtnSubstep_Selected {
    background-image: url('./image/btn_step_sub_pushed.png');
}

.uiMomentumBtnCloseSteps {
    background-color: transparent;
    background-size: 100% 100%;
}

.uiMomentumBtnCloseSteps_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! */
}

.svgCanvas {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 2;
    pointer-events: none;
}

.measureDistancePoint {
    position: absolute;
    border: 1px solid rgba(54, 19, 0, 0.9);
    background-color: rgba(255, 245, 215, 0.9);
    width: 8px;
    height: 8px;
    border-radius: 4px;
    margin: -4px 0px 0px -4px;
    z-index: 4;
}

.measureDistanceArrow {
    position: absolute;
    width: 128px;
    height: 110px;
    line-height: 60px;
    font-size: 32px;
    text-align: center;
    background-image: url('./image/measure_dist_arrow.png');
    background-size: 100% 100%;
    z-index: 3;
    user-select: none;
    pointer-events: none;
}

.measureDistanceText {
    position: absolute;
    background-image: url('./image/measure_dist_text_box.png');
    background-size: 100% 100%;
    width: 156px;
    height: 74px;
    line-height: 60px;
    text-align: center;
    color: black;
    font-size: 32px;
    font-weight: bold;
    z-index: 3;
    user-select: none;
    pointer-events: none;
    transform: translate(-50%, 10%);
}

.dataTable {
    table-layout: fixed;
    width: 100%;
    height: 100%;
    font-family: 'CLCF-Regular';
    font-size: 20px;
    text-align: center;
}

.dataTable td {
    text-align: center;
    border: 8px solid transparent;
    border-radius: 8px;
}

.dataTableHeaderRow1 {
    font-family: 'CLCF-Bold';
    background-color: yellowgreen;
    height: 20%;
}

.dataTableHeaderRow2 {
    font-family: 'CLCF-Bold';
    background-color: yellowgreen;
    height: 20%;
}

.dtH1 {
    background-color: rgb(255, 252, 183);
    width: 8%;
}

.dtH2 {
    background-color: rgb(183, 255, 241);
    width: 46%;
}

.dtH3 {
    background-color: rgb(233, 203, 231);
    width: 46%;
}

.dtDD2 {
    width: 13%;
    background-color: rgb(183, 255, 241);
}

.dtDD22 {
    width: 20%;
    background-color: rgb(183, 255, 241);
}

.dtDD3 {
    width: 13%;
    background-color: rgb(233, 203, 231);
}

.dtDD32 {
    width: 20%;
    background-color: rgb(233, 203, 231);
}

.dataTableRow {
    font-family: 'CLCF-Regular';
    background-color: lightgray;
    height: 20%;
}

.dataTableRowCurrent {
    font-family: 'CLCF-Regular';
    background-color: white;
    height: 20%;
}

.dataCellReadOnly {
    pointer-events: none;
    background-color: lightgray;
}

.dataCellEdit {
    pointer-events: auto;
    background-color: white;
}

.MsgBoxBack {
    pointer-events: all;
    z-index: 100;
    background-color: rgba(32, 32, 32, 0.7);
}

.MsgBoxOverlay {
    z-index: 101;
}

.uiMomentumMsgBox {
    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%;
}

.uiMomentumQuizAnswerEdit {
    padding: 8px;
    border: 1px solid black;
    box-shadow: 5px 10px 8px #888888;
    color: rgb(53, 18, 0);
}

.uiMomentumQuizAnswerNormal {
    border: 1px solid rgb(53, 18, 0);
    pointer-events: auto;
}

.uiMomentumQuizAnswerSelection {
    border: 1px solid rgb(53, 18, 0);
    background: rgb(53, 18, 0);
    box-shadow: 5px 5px 4px rgb(53, 18, 0);
    color: white;
}