/* #region text style */
/* color: rgb(5, 7, 137);
font-weight: bold;
text-align: center;
cursor: pointer;
font-size: 2.500rem;
line-height: 2.500em;
font-family: Arial, Helvetica, sans-serif; */
/* #endregion */

:root {
    --commentBkgrndColorLiteGreen: rgb(216, 242, 215);
    --commentBkgrndColorMidGreen: rgb(181, 230, 178);
    --commentBkgrndColorPyramidGreen: rgb(51, 204, 51);
    --commentProgBkgrndColorYellow: rgb(255,255,179);
    --commentTextColorYellow: rgb(255, 204, 0);
    --commentBkgrndColorBlue: rgb(204, 214, 255);
    --commentBkgrndColorDrkrBlue: rgb(128, 153, 255);
    --commentBkgrndColorDefinitionBlue: rgb(230, 243, 255);
    --commentBorder2_ColorBlue: 0.125em solid blue;
    --commentBorder3_ColorBlue: 0.188em solid blue;
    --commentBkgrndColorGray: rgb(191, 191, 191);
    --commentBkgrndColorPurple: rgb(204,0,204);
    --commentBkgrndColorAnalysisPurple: rgb(255,204,255);
    --commentBorder2_ColorBlack: 0.125em solid black;
    --commentBorder2_ColorPurple: 0.125em solid rgb(204,0,204);
}

@import url(https://fonts.googleapis.com/css?family=Roboto);

.loader,
.loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

.loader {            
    margin: 30vh auto;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.3);
    border-right: 1.1em solid rgba(255, 255, 255, 0.3);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.3);
    border-left: 1.1em solid #067b1b;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#loadingDiv {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:#90ff9d;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: rgb(216, 242, 215);
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

body {
    min-height: 100vh;
    margin-left: 0.313em;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.notShowing {
    opacity: 0.0;
}

.showing {
    opacity: 1.0;
}

#passwordInstructionSection1_ID {
    font-size: 1.125rem;
    color: rgb(253, 0, 17);
    font-weight: bolder;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}

#passwordInstructionSection2_ID {
    font-size: 1.125rem;
    color: rgb(4, 163, 23);
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
}

a {
    pointer-events: all;
    position: relative;
    z-index: 1;
    color: #000;
    /* border-bottom: 0.125em solid rgba(255,102,0,0.8); */
    font-size: 100%;
    cursor: help;
}

/* a::after {
    content: "";
    position: absolute;
    bottom: -0.016em;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom center;
    background-color: rgba(255,102,0,0.8);
    z-index: -1;
    transition: transform 0.4s;
}

a:hover::after {
    transform: scaleY(1);
} */

img {
    max-width: 100%;
}

sub {
    bottom: -0.016em;
}

sup {
    font-size: 50%;
    vertical-align: super;
    color: rgb(51,102,0);
}

h1 {
    text-align: center;
    margin: 35px 0 20px 0 !important;
  }

p {
    margin: 0.250em;
}

.ol li {
  color: #ff00ff;
}

ol.red {
    list-style: none;
    counter-reset: li;
    padding-left: 1.000em;
    padding-right: 1.000em;
}

li.red::before {
    content: counter(li);
    color: red;
    font-weight: bold;
    display: inline-block;
    width: 1.000em;
    margin-left: 1.000em;
    margin-top: 0.500em;
}

.g_txt {
    font-size: 100%;
    color: rgb(0, 105, 0);
    font-weight: bolder;
}

.ir_txt {
    font-size: 100%;
    color: rgb(253, 0, 17);
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
}

li.red {
    counter-increment: li;
}

ul.grn_ul {
    list-style: none;
}

ul ul.lev2_ul {
    list-style-position: inside;
    margin-left: calc(var(--calcConstant) * 24);
}

ul li.grn_ul {
    font-family: Times New Roman, serif;
    font-size: 100%;
}

ul li.grn_ul::before {
    background-color: #1c680d;
    border-radius: 50%;
    content: "";
    display: inline-block;
    margin-right: calc(var(--calcConstant) * 10);
    margin-bottom:  calc(var(--calcConstant) * 2);
    height: calc(var(--calcConstant) * 10);
    width: calc(var(--calcConstant) * 10);
}

ul.red_ul {
    list-style: none;
}

ul ul.lev2_ul {
    list-style-position: inside;
    margin-left: calc(var(--calcConstant) * 24);
}

ul li.red_ul {
    font-family: Times New Roman, serif;
    font-size: 100%;
}

ul li.red_ul::before {
    background-color: #e31c11;
    border-radius: 50%;
    content: "";
    display: inline-block;
    margin-right: calc(var(--calcConstant) * 10);
    margin-bottom: calc(var(--calcConstant) * 4);
    height: calc(var(--calcConstant) * 10);
    width: calc(var(--calcConstant) * 10);
}

li.red::before {
    content: counter(li);
    color: red;
    font-weight: bold;
    display: inline-block;
    width: calc(var(--calcConstant) * 16);
    margin-left: calc(var(--calcConstant) * -16);
    margin-top: 0.500em;
}

li.red {
    counter-increment: li;
}

ul.grn_ul {
    list-style: none;
}

ul ul.lev2_ul {
    list-style-position: inside;
    margin-left: calc(var(--calcConstant) * 24);
}

ul li.grn_ul {
    font-family: Times New Roman, serif;
    font-size: 100%;
}

ul li.grn_ul::before {
    background-color: #1c680d;
    border-radius: 50%;
    content: "";
    display: inline-block;
    margin-right: calc(var(--calcConstant) * 10);
    margin-bottom:  calc(var(--calcConstant) * 2);
    height: calc(var(--calcConstant) * 10);
    width: calc(var(--calcConstant) * 10);
}

ul.red_ul {
    list-style: none;
}

ul ul.lev2_ul {
    list-style-position: inside;
    margin-left: calc(var(--calcConstant) * 24);
}

ul li.red_ul {
    font-family: Times New Roman, serif;
    font-size: 100%;
}

ul li.red_ul::before {
    background-color: #e31c11;
    border-radius: 50%;
    content: "";
    display: inline-block;
    margin-right: calc(var(--calcConstant) * 10);
    margin-bottom: calc(var(--calcConstant) * 4);
    height: calc(var(--calcConstant) * 10);
    width: calc(var(--calcConstant) * 10);
}

span.bl_txt {
    font-size: 50%;
    color: rgb(0, 0, 0);
    font-weight: bold;
}

.jBox-overlay {
    background-color: rgba(51, 204, 51, 0.1) !important;
}

.closeAnswerWindowBtn {
    background-color: red;
    border: none;
    color: white;
    margin-top: 0.0em;
    margin-left: 2.000em;
    height: 2.750vh;
    width: 6.500vw;
    font-size: 1.125rem;
    padding-top: 0.125em;
    text-align: center;
    font-weight: bolder;
    cursor: pointer;
    border-radius:  0.125em;
    box-shadow: 0.067em  0.067em #999;
}

.closeAnswerWindowBtn:hover {
    background-color: rgb(252, 163, 163);
    color: black;
}

.closeAnswerWindowBtn:active  {
    background-color: red;
    color: white;
    box-shadow: 0 0 #666;
    transform: translate(0.067em, 0.067em);
}

#finishEight {
    height: 2.750vh;
    width: fit-content;
    padding: 0.250em;
}

.probTextButton {
    background-color: rgb(168, 255, 171);
    border: 0.125em solid ;
    height: 1.5em;
    width: 6.0em;
    font-family: "Tahoma", sans-serif;
    font-weight: normal;
    color: rgb(10,94,12);
    cursor: pointer;
    font-size: 1.125;
    border-radius: 0.250em;
    box-shadow: 0.250em 0.250em #999;
    z-index: 100000;
}

.probTextButton:hover{
    color: white;
    background-color: rgb(2, 59, 3);
}

.probTextButton:active  {
    color: darkseagreen;
    background-color: rgb(168, 255, 171);
    box-shadow: 0 0 #666;
    transform: translate(0.250em 0.250em);
}

.io_txt-ul {
    font-size: 100%;
    color: rgb(240,178,115);
    font-weight: bolder;
    font-style: italic;
    text-decoration: underline;
}

.ir_txt-ul {
    font-size: 100%;
    color: rgb(255, 0, 0);
    font-weight:bolder;
    font-style: italic;
    text-decoration: underline;
}

.ig_txt-ul {
    font-size: 100%;
    color: green;
    font-weight:bolder;
    font-style: italic;
    text-decoration: underline;
}

.iy_txt-ul {
    font-size: 100%;
    color: rgb(233, 218, 4);
    font-weight:bolder;
    font-style: italic;
    text-decoration: underline;
}

.if_txt-ul {
    font-size: 100%;
    color: rgb(221,7,202);
    font-weight:normal;
    font-style: italic;
    text-decoration: underline;
}

.circleHeaderRed {
    display:inline-flex;
    width: 1.625em;
    height: 1.625em;
    border-radius: 50%;
    font-size: 0.875rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
    color: yellow;
    background: red;
    text-align: center;
    position: relative;
    margin-right: 1.000em;
}

.circleHeaderRed span {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.circleHeaderGrn {
    display:inline-flex;
    width: 1.625em;
    height: 1.625em;
    border-radius: 50%;
    font-size: 0.875rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
    color: yellow;
    background: rgb(30, 255, 0);
    text-align: center;
    position: relative;
    margin-right: 1.000em;
}

.circleHeaderGrn span {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.circleHeaderBlu {
    display:inline-flex;
    width: 1.625em;
    height: 1.625em;
    border-radius: 50%;
    font-size: 0.875rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
    color: yellow;
    background: blue;
    text-align: center;
    position: relative;
    margin-right: 1.000em;
}

.circleHeaderBlu span {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.circleHeaderPur {
    display:inline-flex;
    width: 1.625em;
    height: 1.625em;
    border-radius: 50%;
    font-size: 0.875rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
    color: yellow;
    background: rgb(217, 0, 255);
    text-align: center;
    position: relative;
    margin-right: 1.000em;
}

.circleHeaderPur span {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.circleHeaderEnabled {
    pointer-events: all;
    display:inline-flex;
    cursor: pointer;
    width: 2.000em;
    height: 2.000em;
    border-radius: 50%;
    font-size: 1.125rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
    color: yellow;
    background: rgb(174, 2, 2);
    text-align: center;
    position: relative;
    margin-right: 1.000em;
}

.circleHeaderEnabled span {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.circleHeaderDisabled {
    pointer-events: none;
    display:inline-flex;
    cursor: pointer;
    width: 2.000em;
    height: 2.000em;
    border-radius: 50%;
    font-size: 1.125rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
    color: rgb(0, 0, 0);
    background: rgb(171, 150, 150);
    text-align: center;
    position: relative;
    margin-right: 1.000em;
}

.circleHeaderDisabled span {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.lgr_txt {
    font-size: 110%;
    color: rgb(128, 0, 0);
    font-weight:bold;
    font-style: italic;
}

.ig_txt {
    font-size: 100%;
    color: green;
    font-weight:normal;
    font-style: italic;
}

p.probText {
    color: black;
    margin-top: 0.750em;
    margin-bottom: 0.750em;
    line-height: 1.250em;
    font-size: 1.375rem;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    font-weight: normal;
    background-color: rgb(197, 255, 179);
}

p.ltBluBkgrnd {
    color: black;
    margin-top: 0.750em;
    margin-bottom: 0.750em;
    line-height: 1.250em;
    font-size: 1.000;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    font-weight: normal;
    background-color: rgb(180, 180, 246); 
}

.questionResponseBox .jBox-title {
    background-color: rgb(128, 153, 255) !important;
    font-size: 1.500rem;
    font-family: "Tahoma", sans-serif;
    text-align: left;
    line-height: 1.500rem;
    color: black;
    font-weight: bold;
    height: 7vh;
}

.questionResponseBox .jBox-content {
    color: black;
    text-align: left;
    line-height: 1.250em;
    font-family: "Times New Roman", serif;
    font-size: 1.250rem;
    font-weight: normal;
    padding: 0.250em 0.313em;
    background-color: rgb(222, 222, 252) !important;
}

.questionResponseBox {
    border-radius: 0.250em;
    border: blue;
}

.button {
    display: inline-block;
}

html {
    background-color: rgb(216, 242, 215);
    height: 99vh;
}

body {
    margin-left: 0.500em;
    padding: 0;
}

p {
    margin: 1.000em;
}

p.edit {
    margin-bottom: 2.000em;
}

sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    color: rgb(204, 51, 0);
}

sub {
    bottom: -1.000;
}

sup {
    font-size: 50%;
    vertical-align: super;
    color: rgb(51,102,0);
}

.r_txt {
    font-size: 100%;
    color: rgb(255, 0, 0);
    font-weight: bolder;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}

.rshad_txt {
    font-size: 105%;
    color: rgb(255, 0, 9);
    font-weight: bolder;
    text-shadow: 0.125em 0.125em 0.125em rgb(88, 88, 88);
}

.yshad_txt {
    font-size: 105%;
    color: rgb(255, 255, 0);
    font-weight: bolder;
    text-shadow: 0.125em 0.125em 0.125em rgb(88, 88, 88);
}

.lg-g_txt {
    font-size: 115%;
    color: rgb(16, 129, 19);
    font-weight: bold;
}

.b_txt {
    font-size: 105%;
    color: rgb(49, 68, 238);
    font-weight: bold;
    /*text-decoration: underline;*/
}

.ib_txt {
    font-size: 100%;
    color: blue;
    font-weight: normal;
    font-style: italic;
}

.o_txt {
    font-size: 100%;
    color: rgb(198, 69, 5);
    font-weight: bold;
}

.y_txt {
    font-size: 100%;
    color: rgb(255, 251, 0);
    font-weight: bold;
    font-style: italic;
}


.io_txt {
    font-size: 100%;
    color: rgb(255, 85, 0);
    font-weight: normal;
}

.m_txt {
    font-size: 100%;
    color: magenta;
    font-weight: normal;
    font-style: italic;
    text-decoration: underline;
}

.radioBtn {
    pointer-events: all;
    height: 3.500em;
    width: 3.500em;
    margin-right: 0em;
    margin-top: 0em;
    font-weight: bold;
    text-align: center;
    font-size: 1.500rem;
    cursor: pointer;
    background-color: rgb(151, 245, 190);
    color: rgb(1, 95, 40);
    border-radius: 50%;
    border: 0.250em solid blue;
    box-shadow: 0.500em 0.500em 0.500em rgba(0, 0, 0, 0.5);
    opacity: 1.0;
    z-index: 10000;
  }

  .radioBtn:hover {
    color: white;
    background-color: rgb(1, 95, 40);
  }
  
  .radioBtn:active {
    background-color: rgb(151, 245, 190);
    color: rgb(1, 95, 40);
    transform: translate(0.250em, 0.250em);
    box-shadow: none;
  }

.radioBtnDisabled {
    pointer-events: none;
    height: 3.500em;
    width: 3.500em;
    margin-right: 0em;
    margin-top: 0em;
    color: black;
    font-weight: bold;
    text-align: center;
    font-size: 1.5005rem;
    cursor: pointer;
    background-color: rgb(217, 245, 255);
    border-radius: 50%;
    border: 0.250em solid black;
    box-shadow: 0.500em 0.500em 0.500em rgba(0, 0, 0, 0.5);
    opacity: 1.0;
  }

  .clearBtn {
    height: calc(var(--calcConstant) * 50);
    width: calc(var(--calcConstant) * 70);
    margin-top: calc(var(--calcConstant) * 2);
    padding: calc(var(--calcConstant) * 2);
    color: blue;
    font-weight: bold;
    text-align: center;
    font-size: var(--fontSize_1-875);
    cursor: pointer;
    background-color: rgb(180, 180, 235);
    border: calc(var(--calcConstant) * 3) solid blue;
    box-shadow: calc(var(--calcConstant) * 4) calc(var(--calcConstant) * 4) calc(var(--calcConstant) * 2) rgba(0, 0, 0, 0.5);
  }
  
  .clearBtn:hover {
    color: #e31c11;
  }
  
  .clearBtn:active {
    transform: translate(0.125em, 0.125em);
    box-shadow: none;
  }

  .gotoIntroduction {
    height: 6vh;
    width: 18vw;
    padding-top: 0.188em;
    color: rgb(255, 115, 0);
    font-weight: bold;
    text-align: center;
    font-size: 1.500rem;
    cursor: pointer;
    background-color: rgb(255, 206, 166);
    border: 0.188em solid rgb(255, 115, 0);
    border-radius: 0.250em;
    box-shadow: 0.188em 0.188em #999;
  }
  
  .gotoIntroduction:hover {
    color: rgb(255, 206, 166);
    background-color: rgb(255, 115, 0);
  }
  
  .gotoIntroduction:active {
    color: rgb(255, 115, 0);
    background-color: rgb(255, 206, 166);
    box-shadow: 0 0 #999;
    transform: translate(0.125em, 0.125em);
  }

  .passwordErrBox .jBox-title {
    background-color: rgb(247, 62, 62) !important;
    height: calc(var(--calcConstant) * 40);
    text-align: center;
    color: black;
    font-family: "Tahoma", sans-serif;
    font-size: var(--fontSize_1-375);
    font-weight: bold;
}

.passwordErrBox .jBox-content {
    color: rgb(0, 0, 0);
    text-align: left;
    font-family: "Times New Roman", serif;
    font-size: 1.500rem;
    line-height: 1.500em;
    font-weight: normal;
    padding: calc(var(--calcConstant) * 4) calc(var(--calcConstant) * 5);
    background-color: rgb(255, 213, 213) !important;
}

.passwordErrBox {
    border-radius: calc(var(--calcConstant) * 5);
    border: 0.125em solid blue;
}

img {
    max-width: 100%;
    object-fit: fill;
}

table {
    width: 100%;
    padding: calc(var(--calcConstant) * 16);
    margin-left: calc(var(--calcConstant) * 100);
}

p.centered {
    text-align: center;
}

.introMainGrid {
    position: relative;
    height: 97vh;
    width: 97vw;
    display: grid;
    grid-template-columns: [col] 47% [col] 53%;
    grid-template-rows: [row] 26% [row] auto;
    gap: 0.250em;
    background-color: rgb(216, 242, 215);
    border: 0.250em solid black;
}

.questionAnswerGenWindow {
    position: absolute;
    height: 0vh;
    width: 0vw;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: [col] 100%;
    grid-template-rows: [row] 10% [row] 90%;
    background-color: rgb(180, 180, 235);
    border: 0.188em solid rgb(0, 0, 255);
    box-shadow: 0.250em  0.250em #999;
    border-radius: 0.250em;
    z-index: 1000;
    opacity: 0.0;
}

.questionAnswerGenWindowTitle {
    grid-row: row 1;
    color: white;
    font-family: "Arial Rounded MT Bold", sans-serif;
    font-size: 2.500rem;
    font-weight: bolder;
    text-align: center;
    padding-top: 0.375m;
    background-color: rgb(0, 0, 255);
    border-bottom: 0.067em solid black;
}

.questionAnswerGenWindowText {
    grid-row: row 2;
    color: rgb(4, 4, 137);
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.125em;
    font-size: 1.250rem;
    font-weight: normal;
    text-align: left;
    padding: 0.875em;
    background-color: transparent;
}

.questionAnswerOneWindow {
    position: absolute;
    height: 0vh;
    width: 0vw;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: [col] 100%;
    grid-template-rows: [row] 10% [row] 9% [row] 14% [row] auto;
    background-color: rgb(180, 180, 235);
    border: 0.188em solid rgb(0, 0, 255);
    border-radius: 0.250em;
    box-shadow: 0.250em  0.250em #999;
    z-index: 1000;
    opacity: 0.0;
}

.questionAnswerOneWindowTitle {
    grid-row: row 1;
    color: white;
    font-family: "Arial Rounded MT Bold", sans-serif;
    font-size: 2.500rem;
    font-weight: bolder;
    text-align: center;
    padding-top: 0.250em;
    background-color: rgb(0, 0, 255);
    border-bottom: 0.067em solid black;
}

.questionAnswerOneWindowSubtext {
    grid-row: row 2;
    color: black;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.125rem;
    font-weight: normal;
    text-align: left;
    padding: 0.500em;
    background-color: transparent;
}

.questionAnswerOneWindowProb {
    grid-row: row 3;
    color: white;
    font-family: "Arial Rounded MT Bold", sans-serif;
    line-height: 1.250em;
    font-style: italic;
    font-size: 1.375rem;
    font-weight: normal;
    text-align: left;
    padding: 0.500em;
    background-color: rgb(10, 130, 18);
}

.questionAnswerOneWindowText {
    grid-row: row 4;
    color: rgb(4, 4, 137);
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.125em;
    font-size: 1.250rem;
    font-weight: normal;
    text-align: left;
    padding: 0.875em;
    background-color: transparent;
}

.pageTitleGrid {
    grid-column: col 1 / span 2;
    grid-row: row 1;
    margin: 0.250em;
    display: grid;
    grid-template-columns: [col] 100%;
    grid-template-rows: [row] 37% [row] 37% [row] auto;
    background-image: linear-gradient(-90deg, rgb(68,130,229,0.5), rgba(0,255,0,0.5), rgba(255,255,0,0.5));
    background-size: 97vw;
    border: 0.067em solid black;
    box-shadow: 0.250em  0.250em #999;
}

.titleAreaTop {
    grid-column: col 1;
    grid-row: row 1;
    color: rgb(0, 29, 252);
    font-family: "Arial Rounded MT Bold", sans-serif;
    font-size: 3.500rem;
    font-weight: bold;
    text-align: center;
    padding-top: 0.125em;
    text-shadow: 0.125em 0.125em 0.125em rgb(88, 88, 88);
}

.titleAreaBottom {
    grid-row: row 2;
    color: rgb(0, 29, 252);
    font-family: "Arial Rounded MT Bold", sans-serif;
    font-size: 3.000rem;
    font-weight: bold;
    text-align: center;
    padding-top: 0.0em;
    text-shadow: 0.125em 0.125em 0.125em rgb(88, 88, 88);
}

.subTitleArea {
    grid-row: row 3;
    color: blue;
    font-family: "Arial Rounded MT Bold", sans-serif;
    font-size: 2.000rem;
    font-weight: bolder;
    text-align: center;
    padding-top: 0.0em;
    text-shadow: 0.250em 0.250em 0.250em #313131;
}

.dsaspmSummary {
    position: absolute;
    left: 0vw;
    top: 0vh;
    height: 1.0vh;
    width: 1.0vw;
    display: grid;
    grid-template-columns: [col] 100%;
    grid-template-rows: [row] 28% [row] 15% [row] 7% [row] 49%;
    gap: 0;
    margin-left: 0.500em;
    padding: 0.500em;
    background-color: rgb(178, 211, 177);
    border: 0.250em solid rgb(74, 136, 74);
    border-radius: 0.250em;
    box-shadow: 0.250em  0.250em #999;
    opacity: 0.0;
    z-index: 1;
}

.introText {
    grid-column: col 1;
    grid-row: row 1;
    color: rgb(49, 104, 49);
    padding: 0.033em;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.250rem;
    line-height: 1.250em;
    font-weight: normal;
    font-style: italic;
    background-color: rgb(167, 255, 191);
}

.passWordInputGrid {
    grid-column: col 1;
    grid-row: row 2;
    display: grid;
    grid-template-columns: [col] 9.99% [col] 9.99% [col] 9.99% [col] 9.99% [col] 9.99% [col] 9.99% [col] 9.99% [col] 9.99% [col] 9.99% [col] auto;
    grid-template-rows: [row];
    background-color: transparent;
}

.passwordBtnContainer {
    position: absolute;
    left: 0vw;
    top: 0vh;
    height: 1.0vh;
    width: 1.0vw;
    opacity: 0.0;
    transition: transform 2s ease-out;
    /* background-color: #ff00ff; */
    z-index: 1000;
}

.passWordTextInput {
    grid-column: col 1;
    grid-row: row 3;
    margin-top: 0.125em;
    padding-top: 0.250em;
    background-color: transparent;
}

.passwordTextEntryBox {
    position:relative;
    left:45%;
    height:4vh;
    width:4vw;
    border: 0.250em solid rgb(74, 136, 74);
    border-radius: 0.250em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.250em;
    text-align: center;
    color: green;
    font-weight: bolder;
    text-shadow: 0.067em 0.067em 0.067em rgb(142, 142, 186);
    background-color: rgb(161, 253, 184);
}

.passWordInstruction {
    grid-column: col 1;
    grid-row: row 4;
    background-color: rgb(167, 255, 191);
}

.passwordInstructionText {
    color: blue;
    padding: 0.125em;
    padding-top: 0.0em;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.250rem;
    line-height: 1.125em;
    font-weight: normal;
    font-style: italic;
}

.titleButton {
    pointer-events: all;
    height: 7.1vh;
    width: 42.3vw;
    margin-top: 0.250em;
    margin-left: 0.750em;
    background-color: rgb(151, 245, 190);
    color: rgb(1, 95, 40);
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    line-height: 1.750em;
    font-size: 1.750rem;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 0.125em;
    border: 0.125em solid rgb(1, 95, 40);
    border-radius: 0.125em;
    box-shadow: 0.125em 0.125em 0.125em #999;
}

.titleButton:hover {
    background-color: rgb(1, 95, 40);
    color: white;
}

.titleButton:active {
    background-color: rgb(151, 245, 190);
    color: rgb(1, 95, 40);
    box-shadow: 0 0 #999;
    transform: translate(0.250em, 0.250em);
}

.titleButtonDisabled {
    pointer-events: none;
    height: 7.1vh;
    width: 42.3vw;
    margin-top: 0.250em;
    margin-left: 0.750em;
    background-color: rgb(233, 176, 176);
    color: rgb(137, 5, 5);
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    font-size: 1.500rem;
    line-height: 1.500em;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 0.125em;
    border: 0.125em solid rgb(137, 5, 5);
    border-radius: 0.125em;
    box-shadow: 0.125em 0.125em 0.125em #999;
}

.titleButtonVisited {
    pointer-events: all;
    height: 7.1vh;
    width: 42.3vw;
    margin-top: 0.250em;
    margin-left: 0.750em;
    background-color: rgb(176, 185, 233);
    color: rgb(5, 7, 137);
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    font-size: 1.500rem;
    line-height: 1.500em;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 0.125em;
    border: 0.125em solid rgb(5, 7, 137);
    border-radius: 0.125em;
    box-shadow: 0.125em 0.125em 0.125em #999;
}

.continueButton {
    pointer-events: all;
    height: 3.0vh;
    width: 10.0vw;
    background-color: rgb(164, 246, 170);
    color: rgb(1, 95, 40);
    font-weight: bolder;
    text-align: center;
    cursor: pointer;
    line-height: 1.125em;
    font-size: 1.000rem;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 0.125em;
    border: 0.125em solid rgb(1, 95, 40);
    border-radius: 0.125em;
    box-shadow: 0.125em 0.125em 0.125em #999;
}

.continueButton:hover{
    color: white;
    background-color: rgb(51, 255, 85);
}

.continueButton:active  {
    color: rgb(1, 95, 40);
    background-color: rgb(164, 246, 170);
    box-shadow: 0 0 #666;
    transform: translate(0.125em 0.125em);
}

.exitButton {
    pointer-events: all;
    height: 3.0vh;
    width: 10.0vw;
    background-color: rgb(246, 164, 164);
    color: rgb(185, 0, 0);
    font-weight: bolder;
    text-align: center;
    cursor: pointer;
    line-height: 1.125em;
    font-size: 1.000rem;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 0.125em;
    border: 0.125em solid rgb(185, 0, 0);
    border-radius: 0.125em;
    box-shadow: 0.125em 0.125em 0.125em #999;
}

.exitButton:hover{
    color: white;
    background-color: rgb(185, 0, 0);
}

.exitButton:active  {
    color: rgb(185, 0, 0);
    background-color: rgb(246, 164, 164);
    box-shadow: 0 0 #666;
    transform: translate(0.125em 0.125em);
}

.questionTitlesGrid {
    position: absolute;
    left: 0vw;
    top: 0vh;
    height: 1.0vh;
    width: 1.0vw;
    background-color: rgb(178, 211, 177);
    border: 0.250em solid rgb(74, 136, 74);
    border-radius: 0.250em;
    box-shadow: 0.250em  0.250em #999;
    margin-left: 0.250em;
    opacity: 0.0;
    z-index: 1;
}

.resolutionStatementContainer {
    position: absolute;
    left: 0vw;
    top: 0vh;
    height: 1.0vh;
    width: 1.0vw;
    padding: 0.250em;
    color: rgb(11, 46, 11);
    font-weight: bolder;
    text-align: left;
    font-size: 2.500rem;
    line-height: 1.500em;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
    border: 0.125em solid rgb(246, 246, 8);
    border-radius: 0.250em;
    opacity: 0.0;
    z-index: 1000; 
}

img {
      display: block;
      margin: auto; /* This centers the image horizontally */
      margin-top: 3%;
    }

.questionTitleBtnContainer {
    position: absolute;
    left: 0vw;
    top: 0vh;
    height: 1.0vh;
    width: 1.0vw;
    opacity: 0.0;
    z-index: 1000;
}

.clickMsg {
    position: absolute;
    top: 80.500vh;
    left: 75.000vw;
    z-index: 1000000;
}

.clickMsgBtn {
    background-color: rgb(249, 218, 255);
    border: 0.125em solid rgb(229, 51, 255);
    height: calc(var(--calcConstant) * 56);
    width: calc(var(--calcConstant) * 292);
    font-family: "Tahoma", sans-serif;
    font-weight: bolder;
    color: rgb(229, 51, 255);
    cursor: pointer;
    font-size: var(--fontSize_1-000);
    border-radius: calc(var(--calcConstant) * 5);
    box-shadow: calc(var(--calcConstant) * 4) calc(var(--calcConstant) * 5) #999;
}

.clickMsgBtn:hover{
    color: white;
    background-color: rgb(229, 51, 255);
}

.clickMsgBtn:active  {
    color: rgb(70, 51, 255);
    background-color: rgb(249, 218, 255);
    box-shadow: 0 0 #666;
    transform: translate(calc(var(--calcConstant) * 4), calc(var(--calcConstant) * 4));
}

#arrowContainer_1 {
    position: absolute;
    left: 0vw;
    top: 0vh;
    height: 0%;
    width: 0%;
    background-color: transparent;
    /* background-color: rgba(0, 255, 0, 0.5); */
    opacity: 0.0;
    z-index: 10000;
}

#arrowHead_1 {
    opacity: 0.0;
    z-index: 10000;
}