html {
  font-size: 62.5%;
}

form {
  line-height: 0;
  font-size: 0;
}

body {
  margin: 0;

  --size-header-height: 56px;
  --size-footer-height: 50px;
  --size-content-height: calc(100vh - (var(--size-header-height) + var(--size-footer-height)));

  --color-JAL-Red: #cc0000;
  --color-JAL-Black: #000;
  --color-Light-Gray: #F4F5F6;
  --color-Gray33: #333;
  --color-GrayDD: #ddd;
  --color-Gray99: #999;
  --color-Gray4C: #4c4c4c;
  --color-White: #fff;
  --color-Blue: #0A116B;

  --color-Prussian-Blue: #2A344B;
  --color-Success-Green: #0D8738;

  --tid-header-content-background-color: rgba(0, 0, 0, .7);
  --tid--button-padding: 0 1rem;
  --tid-secondary-button-border: 0;
  --tid-title-color: var(--color-JAL-Black);
  --tid-text-color: var(--color-JAL-Black);
  --tid-hub-teaser-title-color: var(--color-JAL-Black);
  --tid-demo-app-identification-pres-title-color: var(--color-JAL-Red);
  --tid-demo-app-overview-pres-title-color: var(--color-JAL-Red);
  --tid-demo-app-dangerous-goods-pres-title-color: var(--color-JAL-Red);
  --tid-demo-app-regulatory-pres-title-color: var(--color-JAL-Red);
  --tid-demo-app-seatmap-pres-title-color: var(--color-JAL-Red);
  --tid-demo-app-overview-journey-pres-title-color: var(--color-Blue);
  --tid-demo-app-overview-journey-pres-times-color: var(--color-Blue);
  --tid-demo-app-dangerous-goods-pres-section-title-color: var(--color-Blue);
  --tid-demo-app-regulatory-pres-section-title-color: var(--color-Blue);
  --tid-hub-required-information-title-color: var(--color-JAL-Black);
  --tid-hub-no-travel-requirements-pres-title-color: var(--color-JAL-Black);
  --tid-hub-login-pres-form-field-hint-color: var(--color-Gray33);
  --tid-collection-method-pres-title-color: var(--color-JAL-Red);
  --tid-regulatory-dynamic-form-pres-expansion-panel-color: var(--color-White);
  --tid-regulatory-identity-document-send-document-border: none;
  --tid-regulatory-dynamic-form-pres-panel-title-color: var(--color-Gray33);
  --tid--accordion-panel-indicator-color: var(--color-White);
  --tid-regulatory-dynamic-form-pres-page-form-header-padding: .5rem 0 2rem 0;
  --tid-regulatory-dynamic-form-pres-title-padding: 2rem 0 0 0;
  --tid-regulatory-dynamic-form-pres-message-panel-margin: 20px;
  --tid-text-color: var(--color-Gray33);
  --tid-hub-teaser-skip-text-color: var(--color-Blue);

  --tid-message-panel-container-info-background: var(--color-Prussian-Blue);
  --tid-basic-layout-min-height: var(--size-content-height);
  --tid-hub-no-travel-requirements-min-height: var(--size-content-height);
  --tid-identity-confirmation-pres-data-cancel-link-color: var(--color-Blue);
  --tid-message-panel-title-error-color: var(--color-JAL-Red);
  --tid-message-panel-message-dot-error-color: var(--color-JAL-Red);
  --warn-default: var(--color-JAL-Red);
  --tid-message-panel-message-color: var(--color-Blue);

  --application-text-color: var(--color-Gray33);
  --tid--accordion-panel-form-field-label-color: var(--color-Gray33);
  --mdc-icon-button-icon-color: var(--color-Gray33);
  --colors-iron-color: var(--color-GrayDD);

  --tid-identity-confirmation-pres-data-error-color: var(--color-JAL-Red);
  --tid-entry-confirmation-pres-data-error-color: var(--color-JAL-Red);
  --tid-entry-mrz-instruction-pres-cancel-color: var(--color-Blue);
  --tid-entry-instruction-pres-no-mrz-color: var(--color-Blue);
  --tid-entry-document-visualization-pres-cancel-color: var(--color-Blue);
  --tid-identity-document-visualization-pres-cancel-color: var(--color-Blue);
  --tid-identity-error-pres-do-later-text-color: var(--color-Blue);
  --tid-regulatory-identity-document--sub-panel-passport-background: var(--color-Light-Gray);
  --tid-regulatory-identity-document--subtitle-color: var(--color-Gray33);
  --tid-regulatory-entry-document-send-document-border: 1px solid var(--color-GrayDD);
  --tid-regulatory-identity-document--sub-panel-passport-background: var(--color-White);
  --tid-shared-tips-pres-images-text-color: var(--color-Gray33);

}

button:focus {
  outline: 2px solid #333;
}

@media (min-width: 751px) {
  body {
    --size-header-height: 63px;
  }
}

.tid-basic-layout-container--with-background-image {
  background-image: none !important;
  background-color: #FFFFFF !important;
}

.tid-basic-layout-container--bottom-section {
  background-color: var(--color-Light-Gray);
  border-top: 1px solid var(--color-GrayDD);
}

@media (min-width: 751px) {
  .tid-basic-layout-container--bottom-section {
    background-color: transparent;
    margin-top: 32px;
  }
}

.tid-header {
  background-size: cover;
  background-repeat: no-repeat;
}

.tid--primary-button {
  --tid--button-color: #CC0000;
  text-transform: uppercase;
  min-height: 50px;
}

.tid--button {
  white-space: normal;
  line-height: 1.4;
}

.tid--secondary-button {
  text-transform: uppercase;
  --tid--button-color: #FFFFFF;
  background-color: #4b4b4b !important;
  height: 50px;
}

tid-demo-app-hub-pres .mat-accordion .mat-expansion-panel {
  --tid-regulatory-dynamic-form-pres-expansion-panel-padding: 0;
}

tid-demo-app-hub-pres .mat-accordion .mat-expansion-panel .mat-expansion-panel-header {
  background-color: #4b4b4b !important;
}

tid-demo-app-hub-pres .mat-accordion .mat-expansion-panel.mat-expanded .mat-expansion-panel-content {
  padding: 2rem;
}

tid-demo-app-hub-pres .tid-regulatory-dynamic-form--other {
  display: none !important;
}

tid-demo-app-hub-pres tid-identity-confirmation-pres .mat-list-base .mat-line:nth-child(2n+1) {
  text-transform: uppercase;
  --tid-identity-confirmation-pres-data-text-weight: 700;
}

tid-demo-app-hub-pres tid-regulatory-identity-document-pres .tid--display-1 {
  font-weight: 700 !important;
  text-transform: uppercase;
}

/* ----------------------------------- */
/* header */
.headerUnit {
  padding: 0 10px;
}

.headerUnit .unitInner {
  width: min(100%, 950px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.headerUnit .title {
  display: flex;
}

.headerUnit .logo {
  width: min(100%, 209px);
}



@media (min-width: 751px) {
  .headerUnit {
    min-height: 63px;
  }

  .headerUnit .logo {
    width: 381px;
  }
}

.headerUnit img {
  vertical-align: bottom;
}

.headerUnit .langUnit {
  display: inline-flex;
  align-items: center;
  border: 1px solid #999;
  border-radius: 6px;
  padding: 0 4px 0 6px;
}

.headerUnit .langUnit .langLabel {
  font-size: 14px;
  background: url('../img/lang.png') no-repeat 0 0;
  width: 20px;
  height: 21px;
  display: inline-block;
  color: transparent;

}

.headerUnit .langUnit .langSelect {
  font-size: 14px;
  padding: 0 6px;
  border: none;
  border-radius: 6px;
  height: 2.5em;
}

@media (min-width: 751px) {
  .headerUnit .langUnit {
    border: none;
  }

  .headerUnit .langUnit .langLabel {
    width: auto;
    background-image: none;
    color: var(--color-Gray4c);
  }

  .headerUnit .langUnit .langSelect {
    border: 1px solid var(--color-Gray99);
  }

}

/* footer */
.footerUnit {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-JAL-Black);
  color: var(--color-White);
  min-height: 50px;
  line-height: 50px;
  padding: 0 10px;
}

.footerUnit .copyright {
  color: var(--color-White);
}


/* Notice area */
.noticeArea {
  width: 100%;
  padding-inline: 20px;
  margin: 20px auto;
  box-sizing: border-box;
}

@media (min-width: 751px) {
  .noticeArea {
    width: 950px;
    padding: 0px;
    margin: 20px auto;
  }
}

.noticeArea .boxInfo .boxInfo_inner {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  width: 100%;
  border: 1px solid #d3d3d3;
}

@media (min-width: 751px) {
  .noticeArea .boxInfo .boxInfo_inner {
    flex-direction: row;
  }

}

.noticeArea .boxInfo .boxInfo_inner .heading {
  width: 100%;
  padding: 7px 10px;
  color: #fff;
  font-size: 16px;
  line-height: 1.;
  margin-block: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background-color: #666;
}

.noticeArea .boxInfo .boxInfo_inner .heading .icon_alert {
  background: url("../img/icon_notice.png") no-repeat 0 0;
  width: 20px;
  height: 20px;
  background-size: 20px;
  display: inline-block;
  margin-right: 10px;
  margin-left: -20px;
}

@media (min-width: 751px) {
  .noticeArea .boxInfo .boxInfo_inner .heading {
    width: 230px;
    padding: 20px;
  }
}

.noticeArea .boxInfo .boxInfo_inner .inr {
  padding: 20px 16px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 751px) {
  .noticeArea .boxInfo .boxInfo_inner .inr {
    padding: 20px;
    width: calc(100% - 230px);
  }
}

.noticeArea .boxInfo .boxInfo_inner .inr .text {
  margin-block: 0;
  padding: 0;
  font-size: 14px;
}

.noticeArea .boxInfo .boxInfo_inner .inr .text+.text {
  margin-top: 4px;
}

.noticeArea .boxInfo .boxInfo_inner .inr .text.red {
  color: #cc0000;
}

.noticeArea .boxInfo .boxInfo_inner .inr .noticeButton {
  width: 70%;
  margin-inline: auto;
  text-align: center;
  display: block;
  padding: 14px 30px 12px 20px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  margin-top: 20px;
  line-height: 1.3;
  border: 1px solid;
  position: relative;
  z-index: 0;
}

@media (min-width: 751px) {
  .noticeArea .boxInfo .boxInfo_inner .inr .noticeButton {
    width: auto;
    margin-inline: 0;
    display: inline-block;
    text-align: left;
    font-weight: 400;
    font-size: 14px;
    margin-top: 10px;
  }
}

.noticeArea .boxInfo .boxInfo_inner .inr .noticeButton:hover {
  text-decoration: underline;
}

.noticeArea .boxInfo .boxInfo_inner .inr .noticeButton .altIcon {
  display: inline-block;
  width: 12px;
  height: 10px;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.noticeArea .boxInfo .boxInfo_inner .inr .noticeButton.red {
  background-color: #CC0000;
  border-color: #cc0000;
  color: #fff;
}

.noticeArea .boxInfo .boxInfo_inner .inr .noticeButton.gry {
  background-color: #eeeeee;
  border-color: #dedede;
  color: #333;
}

.noticeArea .boxInfo.head_red .boxInfo_inner {
  border-color: #cc0000;
}

.noticeArea .boxInfo.head_red .boxInfo_inner .heading {
  background-color: #cc0000;
}

/* linkBoxArea */
.linkBoxArea {
  padding-inline: 20px;
  margin-block: 0 32px;
}

@media (min-width: 751px) {
  .linkBoxArea {
    padding-inline: 0;
  }
}

.linkBoxInner {
  width: 100%;
  padding: 10px 16px;
  margin-inline: auto;
  box-sizing: border-box;
  border: 2px solid #ccc;
  font-size: 14px;
}

@media (min-width: 751px) {
  .linkBoxInner {
    width: 806px;
  }
}

.linkBoxArea p {
  margin: 0;
}

.linkBoxArea p+p {
  margin-top: .5rem;
}

/* textLink */
.txtLink {
  text-decoration: none;
  color: #0f0f69;
  display: inline-block;
  padding-left: 16px;
  position: relative;
  background: url("../img/icon_arrow_rd.svg") no-repeat 2px 50%;
  background-size: 8px auto;
  font-size: 14px;
}

.txtLink:hover {
  text-decoration: underline;
}


.txtLink.iconOther {
  background: none;
}

.txtLink.iconOther .altIcon {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
  transform: translateY(-50%);
  width: 12px;
  height: auto;
}

/* contents */

.tid-style-wrapper .tid--page-title {
  padding-left: 20px;
  padding-right: 20px;
}

.tid-regulatory-compliance-pres {
  min-height: auto;
}

.tid-style-wrapper .mat-form-field-label-wrapper {
  line-height: 2;
  margin-top: -3px;
  margin-left: 4px;
  display: inline-block;
}

.tid-style-wrapper .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-infix {
  padding-top: .65em;
}

tid-regulatory-dynamic-form-pres .tid-regulatory-dynamic-form--mat-accordian .mat-expansion-panel {
  border-bottom: none;
  border-left: none;
  border-right: none;
}

@media (min-width: 751px) {
  tid-regulatory-dynamic-form-pres .tid-regulatory-dynamic-form--mat-accordian .mat-expansion-panel {
    border: 1px solid var(--color-GrayDD);
  }
}

tid-regulatory-compliance-pres {
  min-height: var(--tid-basic-layout-min-height);
}

/* icon */
.tid-message-panel-container--error .mat-icon.notranslate.tid-message-panel--icon.mat-icon-no-color svg path,
tid-identity-confirmation-pres .tid-identity-confirmation--data-wrapper .tid-identity-confirmation--error-messages svg path,
tid-entry-confirmation--error-messages-content svg path {
  fill: var(--color-JAL-Red);
}

.tid-message-panel-container--info .mat-icon.notranslate.tid-message-panel--icon.mat-icon-no-color svg path {
  fill: var(--color-Prussian-Blue);
}

tid-identity-instruction-pres .tid-identity-instruction-highlight {
  color: var(--color-JAL-Black);
}

tid-collection-method-pres .tid-collection-method-title,
tid-shared-summary-pres .tid-shared-summary--value {
  color: var(--color-Gray33);
}

tid-identity-error-pres .tid-identity-error--content .tid-identity-error--title,
tid-entry-error-pres .tid-entry-error--content .tid-entry-error--title,
tid-entry-confirmation-pres .tid-entry-confirmation--error-messages .tid-entry-confirmation--error-messages-content .details .details-title {
  color: var(--color-JAL-Red);
}

tid-entry-confirmation-pres .tid-entry-confirmation--error-messages .tid-entry-confirmation--error-messages-content {
  border-color: var(--color-JAL-Red);
}

@media (max-width: 750px) {
  tid-regulatory-dynamic-form-pres .tid-regulatory-dynamic-form--page-title-container .tid-regulatory-dynamic-form--page-form-header {
    padding-inline: 1rem;
  }
}

.mat-expansion-panel-header-title.tid--button {
  font-weight: 400;
  padding-top: 1rem;
}

.tid-style-wrapper .mat-accordion .mat-expansion-panel .mat-expansion-indicator:after {
  color: var(--color-Gray33);
}

.cls-1 {
  fill: var(--color-Gray33);
}

.mdc-icon-button svg path {
  fill: var(--color-Gray33);
}

tid-regulatory-identity-document-pres .tid-regulatory-identity-document--send-document {
  border: 1px solid var(--color-Gray99);
  padding-block: 20px;
}