/* inputFile valid */
.aion-input-file.form-control {
	height: unset;
	padding: unset;
}
/* inputFile invalid */
.aion-input-file-is-invalid.form-control.is-invalid {
	background-image: none;
	padding-right: unset;
}
/* inputText invalid */
.aion-input-text-is-invalid.form-control.is-invalid {
	background-image: none;
	padding-right: unset;
}
/* inputSecret invalid */
.aion-input-secret-is-invalid.form-control.is-invalid {
	background-image: none;
	padding-right: unset;
}
/* inputTextarea invalid */
.aion-input-textarea-is-invalid.form-control.is-invalid {
	background-image: none;
	padding-right: unset;
}
/* selectOneListbox invalid */
.aion-select-one-listbox-is-invalid.form-control.is-invalid {
	background-image: none;
	padding-right: unset;
}
/* selectOneMenu invalid */
.aion-select-one-menu-is-invalid.form-control.is-invalid {
	background-image: none;
	padding-right: unset;
}
/* selectManyListbox invalid */
.aion-select-many-listbox-is-invalid.form-control.is-invalid {
	background-image: none;
	padding-right: unset;
}
/* selectManyMenu invalid */
.aion-select-many-menu-is-invalid.form-control.is-invalid {
	background-image: none;
	padding-right: unset;
}

/*
複数チェックボックスおよびラジオボタンについて、bootstrapではinput,labelに対してスタイルクラスを適用するが、
selectItemsを使用して出力するとinput,labelに対してスタイルクラスを指定できないため、
divに対してスタイルクラスをあて、セレクタを利用してinput,labelに対して間接的にスタイルを適用させている。
適用するスタイルクラスはbootstrapのcustom-checkbox,custom-radio関連のスタイルです。
*/
/* チェックボックス */
.aion-select-many-checkbox > table > tbody > tr > td > label::before {
  border-radius: 0.25rem;
}

.aion-select-many-checkbox > table > tbody > tr > td > input:checked ~ label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

.aion-select-many-checkbox > table > tbody > tr > td > input:indeterminate ~ label::before {
  border-color: #007bff;
  background-color: #007bff;
}

.aion-select-many-checkbox > table > tbody > tr > td > input:indeterminate ~ label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}

.aion-select-many-checkbox > table > tbody > tr > td > input:disabled:checked ~ label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.aion-select-many-checkbox > table > tbody > tr > td > input:disabled:indeterminate ~ label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

/* ラジオボタン */
.aion-select-one-radio > table > tbody > tr > td > label::before {
  border-radius: 50%;
}

.aion-select-one-radio > table > tbody > tr > td > input:checked ~ label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.aion-select-one-radio > table > tbody > tr > td > input:disabled:checked ~ label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

/** チェックボックス、ラジオボタン共通 */
.aion-select-many-checkbox > table > tbody > tr > td,
.aion-select-one-radio > table > tbody > tr > td {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
}

.aion-select-many-checkbox > table > tbody > tr > td,
.aion-select-one-radio > table > tbody > tr > td {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 1rem;
}
.aion-select-many-checkbox > table > tbody > tr > td > input,
.aion-select-one-radio > table > tbody > tr > td > input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.aion-select-many-checkbox > table > tbody > tr > td > input:checked ~ label::before,
.aion-select-one-radio > table > tbody > tr > td > input:checked ~ label::before {
  color: #fff;
  border-color: #007bff;
  background-color: #007bff;
}

.aion-select-many-checkbox > table > tbody > tr > td > input:focus ~ label::before,
.aion-select-one-radio > table > tbody > tr > td > input:focus ~ label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.aion-select-many-checkbox > table > tbody > tr > td > input:focus:not(:checked) ~ label::before,
.aion-select-one-radio > table > tbody > tr > td > input:focus:not(:checked) ~ label::before {
  border-color: #80bdff;
}

/*
■ラジオボタンの「input:not(:disabled):active ~ label::before」に対するスタイルについて
当該スタイルをラジオボタンに指定すると、chromeにおいてフォーカス時にスペース押下で不正なスタイルが設定されてしまう。
ラジオボタンの状態はチェックの有無とフォーカスの有無のみが存在すれば十分であるため削除する。
*/
.aion-select-many-checkbox > table > tbody > tr > td > input:not(:disabled):active ~ label::before {
  color: #fff;
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}

.aion-select-many-checkbox > table > tbody > tr > td > input:disabled ~ label,
.aion-select-one-radio > table > tbody > tr > td > input:disabled ~ label {
  color: #6c757d;
}

.aion-select-many-checkbox > table > tbody > tr > td > input:disabled ~ label::before,
.aion-select-one-radio > table > tbody > tr > td > input:disabled ~ label::before {
  background-color: #e9ecef;
}

.aion-select-many-checkbox > table > tbody > tr > td > label,
.aion-select-one-radio > table > tbody > tr > td > label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}

.aion-select-one-radio > table > tbody > tr > td > label::before,
.aion-select-many-checkbox > table > tbody > tr > td > label::before {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
}

.aion-select-one-radio > table > tbody > tr > td > label::before,
.aion-select-many-checkbox > table > tbody > tr > td > label::before {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.aion-select-many-checkbox > table > tbody > tr > td > label::after,
.aion-select-one-radio > table > tbody > tr > td > label::after {
  position: absolute;
  top: 0.25rem;
  left: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: no-repeat 50% / 50% 50%;
}

.aion-select-many-checkbox-invalid > table > tbody > tr > td > input ~ label,
.aion-select-one-radio-invalid > table > tbody > tr > td > input ~ label {
  color: #dc3545;
}

.aion-select-many-checkbox-invalid > table > tbody > tr > td > input ~ label::before,
.aion-select-one-radio-invalid > table > tbody > tr > td > input ~ label::before {
  border-color: #dc3545;
}

.aion-select-many-checkbox-invalid > table > tbody > tr > td > input:checked ~ label::before,
.aion-select-one-radio-invalid > table > tbody > tr > td > input:checked ~ label::before {
  border-color: #e4606d;
  background-color: #e4606d;
}

.aion-select-many-checkbox-invalid > table > tbody > tr > td > input:focus ~ label::before,
.aion-select-one-radio-invalid > table > tbody > tr > td > input:focus ~ label::before {
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.aion-select-many-checkbox-invalid > table > tbody > tr > td > input:focus:not(:checked) ~ label::before,
.aion-select-one-radio-invalid > table > tbody > tr > td > input:focus:not(:checked) ~ label::before {
  border-color: #dc3545;
}

@media (min-width: 576px) {
  .form-inline .aion-select-many-checkbox,
  .form-inline .aion-select-one-radio {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .form-inline .aion-select-many-checkbox > table > tbody > tr > td > label,
  .form-inline .aion-select-one-radio > table > tbody > tr > td > label {
    margin-bottom: 0;
  }
}