body{
    background-color: #EEF;
    user-select: none;
}

.headBar{
    text-align: center;
    padding: 20px;
    font-size: 2em;
}

.inputRow{
    margin-bottom: 2em;
    font-size: 20pt;
}
.profileInput{
    font-size: 20pt;
}
.profileInputLabel{
    text-align: right;
    line-height: 54px;
    font-weight: bold;
}

.btnDisabled{
    background-color: grey;
    border-color: grey;
}
.btn:hover{
    color: white;
}

.gripTable{
    margin: auto;
}

.gripTable th, td{
    padding: 5px 20px;
}

.alertRow{

    text-align: center;
    margin: 10px auto;
    padding: 5px;
    background-color: khaki;
    border: solid 1px darkred;
    border-radius: 2em;
    color: darkred;
    font-size: 20pt;
}

.confirmRow{

    text-align: center;
    margin: 10px auto;
    padding: 5px;
    background-color: lightgreen;
    border: solid 1px darkgreen;
    border-radius: 2em;
    color: darkgreen;
    font-size: 20pt;
}

.cardBox{
    border: solid 1px #ccc;
    border-radius: 20px;
    width: 100%;
    max-width: 720px;
    margin: 6vh auto;
    padding: 20px;
    text-align: center;
    font-size: 1.5em;
    background-color: #FEFEFE;
}

.contentWrap{
    text-align: center;
}
.guidanceBtnWrap{
    padding-top: 30vh;
}

.btnWrap{
    text-align: center;
}

.frontRadioInput{
    transform: scale(4);
    margin-right: 30px;
}
.frontRadioLabel{
    line-height: 2.5em;
}
.genderCaption{
    padding: 0.2em 0.5em;
    border-radius: 0.5em;
}
.genderCaption._male {
    background-color: #0d70b7;
    color:white;
}
.genderCaption._female {
    background-color: #db7093;
    color:white;
}

.stageButton{
    font-size: 2em;
    width: 300px;
}

.menuButtonsRow{
    text-align: center;
}

.examName {
    position: relative;
    top: 0;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding-top: 40px;
}

.frontMenuButton{
    display: inline-flex;
    background-color: steelblue;
    color: #ffffff;
    font-size: 2em;
    font-weight: bold;
    width: 270px;
    height: 270px;
    margin: 30px;
}
.frontMenuButton._ufov{
    width: 240px;
    height: 120px;
    background-color: darkseagreen;
}

.frontMenuButton .examName{
    margin: auto;
}
.frontMenuButton .examName .examSubName{
    height: 36px;
    font-size:1.5rem;
}

.frontMenuButton .examName .examComplete{
    position: absolute;
    top: 206px;
    background-color: indianred;
    border-radius: 0.25rem;
    padding: 2px;
    width: 200px;
    font-size:1.5rem;
}

.frontSubMenuButton .completeBadge{
    /*position: relative;*/
    /*border: none;*/
    /*border-radius: 1rem;*/
    /*background-color: indianred;*/
    /*padding: 2px;*/
    /*font-size: 1.5rem;*/
    /*width: 200px;*/
    /*top: 17px;*/
    position: absolute;
    top: 206px;
    margin: 0 auto;
    background-color: indianred;
    border-radius: 0.25rem;
    padding: 2px;
    width: 200px;
    font-size:1.5rem;
}
.completeBadge._pending{
    top: 170px;
    background-color: darkorange;
}
.completeBadge._ufov{
    margin-left: 105px;
    top: 38px;
}

.frontMenuButton.frontMenuButtonDone{
    background-color: darkseagreen;
}
.frontMenuButtonDone>p{
    font-size: 0.75em;
}

.frontSubMenuButton {
    display: inline-flex;
    font-size: 2em;
    font-weight: bold;
    width: 240px;
    height: 120px;
    margin: 30px;
}

.frontSubMenuButton._interview{
    background-color: steelblue;
    color: #ffffff;
    height: 270px;
    width: 270px;
    flex-direction: column;
}
.frontSubMenuButton._interview._otherInterview{
    background-color: steelblue;
    color: #ffffff;
    height: 120px;
    width: 240px;
}
.frontSubMenuButton._statistics{
    background-color: darkcyan;
    color: #ffffff;
    height: 270px;
    width: 270px;
}
.frontSubMenuButton._profile{
    background-color: dodgerblue;
    color: #ffffff;
}

.frontExitButton{
    background-color: indianred;
    color: #ffffff;
    position: absolute;
    top: 0;
    width: 100px;
    height: 50px;
    margin: 3px;
    padding: 0;
    right: 30px;
    font-size: 20pt;
    font-weight: bold;
}
.browserExitButton{
    background-color: indianred;
    color: #ffffff;
    position: absolute;
    top: 0;
    margin: 3px;
    padding: 10px;
    right: 30px;
    font-size: 1.2em;
    font-weight: bold;
    width: 50px;
    height: 50px;
}
.headerHomeButton{
    background-color: #999;
    color: #ffffff;
    position: absolute;
    top: 0;
    height: 50px;
    margin: 3px;
    padding: 10px;
    right: 30px;
    font-size: 1.2em;
    font-weight: bold;
    z-index: 99999;
}
.headerSkipButton{
    background-color: darkseagreen;
    color: #ffffff;
    position: absolute;
    top: 0;
    height: 50px;
    margin: 3px;
    padding: 10px;
    right: 30px;
    font-size: 1.2em;
    font-weight: bold;
    z-index: 99999;
}

.frontButtonFree{
    background-color: cornflowerblue;
    color: #ffffff;
    font-size: 1.2em;
    font-weight: bold;
    height: 60px;
    margin: 30px;
}

.frontButtonGreen{
    background-color: darkseagreen;
    color: #ffffff;
    font-size: 2em;
    font-weight: bold;
    width: 240px;
    height: 120px;
    margin: 30px;
}

.frontButtonRed{
    background-color: indianred;
    color: #ffffff;
    font-size: 2em;
    font-weight: bold;
    width: 240px;
    height: 120px;
    margin: 30px;
}

.frontButtonGray{
    background-color: #6b6e75;
    color: #ffffff;
    font-size: 2em;
    font-weight: bold;
    width: 240px;
    height: 120px;
    margin: 30px;
}

.frontButtonDisabled{
    opacity: .65;
    pointer-events: none;
}

.statisticsHeaderButton{
    background-color: cornflowerblue;
    color: #ffffff;
    font-weight: bold;
}
.statisticsHeaderButtonRed{
    background-color: indianred;
}

.interviewQuestionArea{
    margin: auto;
    max-width: 95vw;
    border: solid 1px #ccc;
    border-radius: 10px;
    padding: 10px;
    background-color: #fefefe;
    height: 65vh;
    overflow-y: auto;
}

.interviewQuestion{
    margin-bottom: 1em;
    padding: 0.5em;
}
.interviewQuestion.disabled{
    background-color: #eee;
    pointer-events: none;
    color: #aaa;
}

.interviewQuestionLabel{
    font-weight: bold;
    font-size: 2em;
}

.interviewOptionLabel{
    font-size: 2em;
    padding-left: 30px;
}
.interviewInputText{
    font-size: 2em;
}
.interviewInputText._numberInput{
    max-width: 10em;
}
.interviewTextOptionLabel{
    font-size: 2em;
}

.interviewExtraButton{
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.2em 1em;
    color: white;
}
.interviewExtraButton._LINE{
    background-color: #00B900;
}
.interviewExtraButton._mail{
    background-color: dodgerblue;
}
.interviewExtraButton._none{
    background-color: #2c4762;
}
.interviewExtraButton._Contact._inactive{
    background-color: transparent;
    color: #000000;
    border: solid 1px #ccc;
}
.interviewExtraQRCodeArea{
    padding-left: 2em;
    text-align: center;
}
.interviewExtraQRCodeImage{
    max-height: 140px;
}
.interviewExtraQRCodeCaption{
    font-size: 1em;
    font-weight: bold;
    margin: 0.2em 0.2em;
    color: white;
    background-color: #00B900;
    padding: 0.5em;
    border-radius: 1.5em;
}

.frontModalMessage{
    font-size: 2rem;
}
@media (min-width: 576px){
    .modal-dialog {
        max-width: 900px;
        margin: 1.75rem auto;
    }
}

.input-activator-button{
    font-size: 1em;
}

.frontHomeFooterToggleButton{
    z-index: 1;
    position: absolute;
    right: 1em;
    background-color: #7D7D7D;
    color: #ffffff;
    width: 200px;
    height: 3em;
    margin: 0 1em;
    font-weight: bold;
    font-size: 1.5em;
}

.no-spin {
    -moz-appearance: textfield; /* Firefox用 */
}

.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Chrome, Safari, Edge用 */
    margin: 0;
}

.secNumber {
    font-size: 1.3em;
}