:root {
    --jci-green: #00D8D2;
    --jci-light-green: #B2F3F1;
    --jci-red-caution: #f00;
    --jci-g-examiner: #3cb371; /* ボタン診断士 */
    --jci-lg-examiner: #90ee90; /* 背景診断士 */
    --jci-g-engineer: #6495ed; /* ボタン技士 */
    --jci-lg-engineer: #add8e6; /* 背景技士 */
    --jci-g-cheif-engineer: #db7093; /* ボタン主任技士 */
    --jci-lg-cheif-engineer: #ffc0cb; /* 背景主任技士 */
}

.bg-jci-g-examiner {
    background: var(--jci-g-examiner);
    color:black;
}

.bg-jci-lg-examiner {
    background: var(--jci-lg-examiner);
}

.bg-jci-g-engineer {
    background: var(--jci-g-engineer);
    color: black;
}

.bg-jci-lg-engineer {
    background: var(--jci-lg-engineer);
}
.bg-jci-g-cheif-engineer {
    background: var(--jci-g-cheif-engineer);
    color: black;
}

.bg-jci-lg-cheif-engineer {
    background: var(--jci-lg-cheif-engineer);
}
.bg-jci-g {
    background: var(--jci-green);
}

.bg-jci-lg {
    background: var(--jci-light-green);
}

.border-jci-g {
    border: 2px var(--jci-green) solid;
}

.border-jci-lg {
    border: 2px var(--jci-light-green) solid;
}

.jci-button {
    background-color: var(--jci-green);
    filter: drop-shadow(0px 3px 3px #000);
    transition: .3s;
    color: #fff
}

.jci-button:hover {
    background-color: var(--jci-green);
    filter: none;
    color: #fff
}

.jci-button-correct {
    background-color: var(--bs-gray-200);
    filter: drop-shadow(0px 3px 3px #000);
    transition: .3s;
    color: var(--jci-green)
}


    .jci-button-correct:hover {
        background-color: var(--bs-gray-200);
        filter: none;
        color: var(--bs-gray)
    }

.text-danger {
    color: #f00;
}

.caption-danger {
    color: #f00;
    font-size: small;
}

.text-caution {
    color: var(--jci-red-caution);
}

#header-menu .navbar-nav div {
    width: calc(80vw/5);
}

#header .navbar-nav div {
    width: calc(80vw/11);
}

#header-menu .navbar-nav div:hover {
    background: var(--jci-light-green);
}

#bread-crumbs ol:first-child {
    padding-left: 10vw;
}

#inputFacePhotoButton {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    height:0;
}

#login001{
    margin-left: 200px;
    width:480px;
}

#pass002{
    margin-left: 200px;
    width:480px;
}

#last-foot{
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}

.tbl {
    border-collapse: collapse;
    width: 100%;
}
.tbl, .tbl th,.tbl td {
    border: 1px solid;
}

.tbl th,.tbl td{
    min-height: 2rem;
}

.table-wrap {
    overflow-x: scroll;
  }
  .tabulate {
    width: 500%;
    border-collapse: collapse;
    white-space: nowrap;
  }
  .tabulate, .tabulate th,.tabulate td {
    border: 1px solid;
}

.tabulate th,.tabulate td{
    min-height: 2rem;
}

  .tabulate-user {
    width: 70%;
    border-collapse: collapse;
    white-space: nowrap;
  }
  .tabulate-user, .tabulate-user th,.tabulate-user td {
    border: 1px solid;
}

.tabulate-user th,.tabulate-user td{
    min-height: 2rem;
}

.bg-jci-footer-br{
    background: #432C1C;
}
.bg-jci-footer-or{
    background: #D5834B;
}

.underline-less {
    text-decoration: none;
}

.timeline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
  
  .step {
    text-align: center;
    flex: 1;
    position: relative;
  }
  
  .step::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 auto 10px;
  }
  
  .step.completed::before {
    background-color: #00b0f0;
  }

  .step.fail::before {
    background-color: var(--jci-red-caution);
  }

  .step.current::before {
    background-color: #00b0f0;
    border: 4px solid #ccc;
  }
  
  .step::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 0%;
    width: 100%;
    height: 2px;
    background-color: #ccc;
    z-index: 1;
  }
  
  .step:first-child::after {
    left: 50%;
    width: 50%;
  }
  
  .step:last-child::after {
    width: 50%;
  }
  
  .step.completed::after {
    background-color: #00b0f0;
  }

  .step.fail::after {
    background-color: var(--jci-red-caution);
  }
  
  .step.current::after {
    background-color: #00b0f0;
  }

.tbl > caption {
    font-size: x-large;
    font-weight: bold;
}

.tabulate-test {
  width: 90%;
  border-collapse: collapse;
  white-space: nowrap;
}
.tabulate-test, .tabulate-test th,.tabulate-test td {
  border: 1px solid;
}

.tabulate-test th,.tabulate-test td{
  min-height: 2rem;
}

.line {
  padding: 10px;
  border-bottom: 2px solid;
  width: 88%;
}
.faceimg{
  margin: 20px 0 0 200px;
}

.invalid-message {
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-danger);
}

/* プレースホルダの色を薄めに */
.form-control::placeholder {
    color: #cccccc;
}

.logoutcolor {
    background-color: #87ceeb
}