@charset "UTF-8";

.octm-apply-step-wrapper {
  display: flex;
  position: sticky;
  top: 76px;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: var(--octm-color-lightgray);
  padding: 15px 0; }
  @media screen and (max-width: 991.98px) {
    .octm-apply-step-wrapper {
      position: inherit; }}

.octm-apply-navi-bar {
  display: flex;
  width: 100%;
  height: 70px;
  flex-direction: row;
  justify-content: space-around; }
 
 /* --- Circle icons in steps --- */ 
.octm-apply-navi-bar .octm-apply-step {
  display: flex;
  width: 25%;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  @media screen and (max-width: 575.98px) {
    .octm-apply-navi-bar .octm-apply-step {
      justify-content: flex-start; }}
  
    
.octm-apply-navi-bar .octm-apply-step .octm-step-icon-wrapper {
  display: flex;
  width: 100%;
  height: 30px; 
  align-content: center;
  justify-content: center; }
	.octm-apply-navi-bar .octm-apply-step:first-child .octm-step-icon-wrapper{
	  justify-content: flex-end; }
	.octm-apply-navi-bar .octm-apply-step:last-child .octm-step-icon-wrapper{
	  justify-content: flex-start; }
      
.octm-apply-navi-bar .octm-apply-step .octm-step-icon-wrapper::before {
  display: flex;
  content: "";
  width: calc(50% - 5px); /* 5px = (.octm-step-icon width)/2 */
  height: 30px; 
  font-size: 0;
  overflow: hidden;
  position: relative;
  top: 50%;
  border-top: 1px dotted var(--octm-color-darkgray); }
  .octm-apply-navi-bar .octm-apply-step:first-child .octm-step-icon-wrapper::before {
    content: none; }
    
.octm-apply-navi-bar .octm-apply-step .octm-step-icon-wrapper::after {
  display: flex;
  content: "";
  width: calc(50% - 5px); /* 5px = (.octm-step-icon width)/2 */
  font-size: 0;
  overflow: hidden;
  position: relative;
  top: 50%;
  border-top: 1px dotted var(--octm-color-darkgray); }
  .octm-apply-navi-bar .octm-apply-step:last-child .octm-step-icon-wrapper::after {
    content: none; }

.octm-apply-navi-bar .octm-apply-step .octm-step-icon-wrapper .octm-step-icon {
  display: flex;
  background: var(--octm-color-darkgray);
  height: 10px;
  width: 10px;
  border-radius: 15px; 
  margin-top: 10px; }

.octm-apply-navi-bar .octm-apply-step .octm-step-subtext {
  display: flex; 
  font-size: 1rem;
  color: var(--octm-color-darkgray);
  white-space: pre-line;
  word-break: break-word;
  text-align: center; }
  @media screen and (max-width: 575.98px) {
    .octm-apply-navi-bar .octm-apply-step .octm-step-subtext {
      height: 45px;
      font-size: 0.9rem; } }
      
  /* Step - Previous */
  .octm-apply-navi-bar .octm-apply-step.previous .octm-step-icon-wrapper::before {
    width: calc(50% - 15px);
    border-top: 2px solid var(--octm-color-yellow); }
  .octm-apply-navi-bar .octm-apply-step.previous .octm-step-icon-wrapper::after {
    width: calc(50% - 15px);
    border-top: 2px solid var(--octm-color-yellow); }
  .octm-apply-navi-bar .octm-apply-step.previous .octm-step-icon-wrapper .octm-step-icon {
    width: 30px;
    height: 30px;
    background: var(--octm-color-yellow);
    margin-top: 0; }
  .octm-apply-navi-bar .octm-apply-step.previous .octm-step-icon-wrapper .octm-step-icon::before {
    color: var(--octm-color-white);
    margin: 2px 8px;
    font-family: "FontAwesome";
    font-size: 18px;
    content: "\f00c"; }
  .octm-apply-navi-bar .octm-apply-step.previous .octm-step-subtext {
    color: var(--octm-color-blue); }

  /* Step - Active */
  .octm-apply-navi-bar .octm-apply-step.active .octm-step-icon-wrapper::before {
    width: calc(50% - 15px);
    border-top: 2px solid var(--octm-color-yellow); }
  .octm-apply-navi-bar .octm-apply-step.active .octm-step-icon-wrapper::after {
    width: calc(50% - 15px); }
  .octm-apply-navi-bar .octm-apply-step.active .octm-step-icon-wrapper .octm-step-icon {
    width: 30px;
    height: 30px;
    background: var(--octm-color-navy);
    margin-top: 0; }
  .octm-apply-navi-bar .octm-apply-step.active .octm-step-icon-wrapper .octm-step-icon::before {
      display: flex;
      content: "";
      width: 10px;
      height: 10px;
      background: var(--octm-color-yellow); 
      margin: 10px; /* ((.octm-step-icon width) - (.octm-step-icon::before ))/2 */
      border-radius: 8px; }
  .octm-apply-navi-bar .octm-apply-step.active .octm-step-subtext {
    color: var(--octm-color-navy); }