/* wj-labeled-input: adapted from MDL styles */

/* underline access keys */
.wj-labeled-input .accesskey {
  text-decoration: underline;
}

/* label input container */
.wj-labeled-input {
  position: relative;
  font-size: 16px;
  display: inline-block;
  box-sizing: inherit;
  width: 300px;
  max-width: 100%;
  margin: 0 20px;
  padding: 20px 0;
}

/* Wijmo control in the container */
.wj-labeled-input .wj-control.wj-content {
  margin: 0;
  width: 100%;
  background-color: transparent;
  /* border: none;
        background-color: white;*/
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.wj-labeled-input .wj-control.wj-content button {
  opacity: 0.75;
  border-color: rgba(0, 0, 0, 0.1);
}

/* label in the container (must come after the control) */
.wj-labeled-input label {
  font-size: 16px;
  top: 24px;
  bottom: 0;
  margin: 0;
  pointer-events: none;
  position: absolute;
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  color: rgba(0, 0, 0, 0.258824);
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* move label out of the way when control is focused or not empty */
.wj-static-labels .wj-labeled-input :not(.wj-state-focused) + label,
.wj-labeled-input .wj-state-focused + label,
.wj-labeled-input :not(.wj-state-empty) + label {
  font-size: 14px;
  top: 0px;
  color: #353535;
  visibility: visible;
}

/* 以下で、invalid時にタイトルテキストが赤くなる */
.wj-labeled-input .wj-state-invalid + label {
  color: #d50000;
}

.wj-labeled-input wj-multi-auto-complete.wj-state-focused {
  border: var(--primary-custom) solid 1.5px !important;
}

.wj-labeled-input .wj-state-focused.wj-content:not(.wj-state-readonly) {
  border: var(--primary-custom) solid 1.5px !important;
}
textarea:focus {
  border: var(--primary-custom) solid 1.5px !important;
}

.wj-labeled-input .wj-content.wj-state-readonly {
  background-color: rgb(240, 240, 240);
}

.wj-labeled-input .wj-content.wj-state-readonly * {
  background-color: transparent;
}

.wj-labeled-input fpms-multi-auto-complete-editable {
  background-color: transparent !important;
}

.wj-labeled-input fpms-multi-auto-complete-delete-only {
  background-color: transparent !important;
}

.wj-labeled-input .wj-content.wj-state-readonly .wj-multi-autocomplete {
  background-color: red;
}
/*
    .wj-labeled-input fpms-multi-auto-complete-editable .wj-template {

      background-color: transparent !important;

    }*/

/* underline label */
.wj-labeled-input label:after {
  /*  background-color: rgb(63,81,181); */
  background-color: transparent;
  bottom: 20px;
  content: '';
  height: 30px;
  left: 45%;

  /*border-bottom: black solid 1.5px;*/
  border-radius: 5px;
  position: absolute;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
  width: 10px;
}

.wj-labeled-input .wj-state-readonly + label:after {
  border-bottom: transparent solid 1px;
}

td .wj-content {
  border: transparent solid 0px !important;
}

/* show underline when focused */
.wj-labeled-input .wj-state-focused + label:after {
  left: 0;
  visibility: visible;
  width: 100%;
}
/* invalid時のunderline色*/
.wj-labeled-input .wj-state-invalid,
.wj-labeled-input .ng-invalid {
  /*background-color: #d50000;*/
  background-color: transparent;
  border: #d50000 solid 1.5px !important;
}

/* validation message */
/* データ検証エラーメッセージ */
.wj-labeled-input .wj-error {
  color: #d50000;
  position: absolute;
  font-size: 12px;
  margin-top: 3px;
  visibility: hidden;
  display: block;
}
.wj-labeled-input .wj-control.wj-state-invalid ~ .wj-error,
.wj-labeled-input .wj-control.ng-touched.ng-invalid ~ .wj-error {
  visibility: visible;
}

/* --------------------------------------------------------------------- */
/* textrarea用 */
/* move label out of the way when control is focused or not empty */
/* .wj-static-labels .wj-labeled-input textarea:focus + label,
     {
        font-size: 14px;
        top: 4px;
        color: #7500d5;
        visibility: visible;
    } */

/* wj-multi-autocompleteの❌ボタンを太字にする */
.wj-multi-autocomplete .wj-token-close {
  font-weight: bold;
}
.wj-labeled-input textarea {
  margin: 0;
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  outline: none;
  resize: vertical;
  display: block;
  box-sizing: border-box !important;
  min-height: 2.2em;
}

.wj-labeled-input textarea:focus + label:after {
  left: 0;
  visibility: visible;
  width: 100%;
}

/* move label out of the way when control is focused or not empty */
.wj-static-labels :not(textarea:focus) + label {
  font-size: 14px;
  top: 4px;
  color: #000000;
  visibility: visible;
}

/* textarea入力時、エラー状態ならタイトル色*/
.wj-labeled-input textarea:focus.ng-touched.ng-invalid + label {
  color: #d50000;
}

/* invalid時のunderline色*/
/*.wj-labeled-input textarea.ng-touched.ng-invalid + label:after {
  background-color: #d50000;
}*/

/* invalidの時、エラーメッセージを表示する */
.wj-labeled-input textarea.ng-touched.ng-invalid ~ .wj-error {
  visibility: visible;
}

/* --------------------------------------------------------------------- */
/* mat-radio-button用 */
/* move label out of the way when control is focused or not empty */
/* .wj-static-labels .wj-labeled-input textarea:focus + label,
     {
        font-size: 14px;
        top: 4px;
        color: #7500d5;
        visibility: visible;
    } */

.wj-labeled-input .mat-radio-group .mat-radio-button {
  margin: 10;
  width: 100%;
  height: auto;
  background-color: #d50000;
  border: none;
  border-bottom: 1px solid rgba(248, 3, 3, 0.1);
  /* outline: none; */
  /* resize: vertical; */
  /* display: block; */
}

.wj-labeled-input textarea:focus + label:after {
  left: 0;
  visibility: visible;
  width: 100%;
}

/* move label out of the way when control is focused or not empty */
.wj-static-labels :not(textarea:focus) + label {
  font-size: 14px;
  top: 4px;
  color: #000000;
  visibility: visible;
}

/* textarea入力時、エラー状態ならタイトル色*/
.wj-labeled-input textarea:focus.ng-touched.ng-invalid + label {
  color: #d50000;
}

/* invalid時のunderline色*/
/*.wj-labeled-input textarea.ng-touched.ng-invalid + label:after {
  background-color: #d50000;
}*/

/* invalidの時、エラーメッセージを表示する */
.wj-labeled-input textarea.ng-touched.ng-invalid ~ .wj-error {
  visibility: visible;
}

.wj-labeled-input .wj-state-readonly:not(.wj-multi-autocomplete) + label {
  /* color: rgb(130, 130, 130) !important; */
  color: black !important;
}
/*.wj-labeled-input .wj-state-readonly:not(.wj-multi-autocomplete)  {

border-color: rgb(255,255,255);

}*/