/* 全体の初期化 */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing        : border-box
}


body {
  font-family    : Arial, "Meiryo UI", "MS Gothic", system-ui, sans-serif;
  font-size      : 12px;
  height         : initial;
  /* min-height  : 300px; */
  /* max-height  : 680px; */
  padding        : 8px;
  /* max-width   : 400px; */
  /* min-width   : 258px; */
  /* min-width   : 300px; */
  /* max-width   : 800px; */

  user-select: none;
}

.text.white {
  color: #FFFFFF;
}

.text.grey {
  color: #CCCCCC;
}

.text.black {
  color: #1B1C1D;
}

.text.yellow {
  color: #F2C61F;
}

.text.teal {
  color: #00B5AD;
}

.text.red {
  color: #D95C5C;
}

.text.purple {
  color: #564F8A;
}

.text.pink {
  color: #D9499A;
}

.text.orange {
  color: #E07B53;
}

.text.green {
  color: #5BBD72;
}

.text.blue {
  color: #3B83C0;
}

.text.bold {
  font-weight: bold;
}


/* Semantic-UI Calendarのスタイルを上書き */
.ui.table {
  font-size: 1.0em;
}

.ui.calendar .ui.table tr td,
.ui.calendar .ui.table tr th {
  padding       : .2em !important;
  padding-top   : 0.4em !important;
  padding-right : 0.1em !important;
  padding-bottom: 0.4em !important;
  padding-left  : 0.1em !important;
  white-space   : nowrap;
  font-size     : 14px;
}

.ui.calendar .ui.table thead tr:first-child th {
  padding       : .5em !important;
  padding-top   : 0.8em !important;
  padding-right : 0.8em !important;
  padding-bottom: 0.8em !important;
  padding-left  : 0.8em !important;
  white-space   : nowrap;
}

/* カレンダー datepicker */
div.ui.calendar>div>input[type=text] {
  padding-top      : 6px;
  padding-bottom   : 6px;
  width            : 160px;
  /* font-weight   : bold; */
  /* font-size     : 14px; */
}

div.calendar table.ui.table.day {
  /* width: 184px !important; */
  width    : 100%;
  min-width: 184px !important;
}

.ui.calendar .ui.table tr td.range {
  /* background: rgba(28, 3, 75, 0.05); */
  background-color: rgba(255, 0, 0, 0.15);
}

.ui.selection.dropdown {
  padding-top   : 7px;
  padding-bottom: 7px;
  min-height    : 34px !important;
}

/* 
.ui.selection.dropdown {
  min-height: 24px !important;
}
.ui.selection.dropdown .menu > div.item {
  padding: 0.5em 0.75em !important;
}
 */




.ui.checkbox {
  margin-top: 4px;
}


/* カレンダーの選択日 */
.ui.calendar .ui.table td.active {
  background-color: rgb(253, 101, 101) !important;
  color           : white !important;
}

.ui.calendar .calendar.active .ui.table tbody tr td.focus {
  box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.425) !important;
}


div.ui.label {
  padding: 0.5em 0.75em !important;
}

input {
  padding: 0.5em 0.75em !important;
}

/* Semantic UI 上書き */
/* 子供年齢フォーム */
.ui.radio label {
  white-space: nowrap;
}

/* .ui.search.dropdown.selection input.search {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
} */
/* 検索ドロップダウンの横幅 (divタグ) */
.ui.search.dropdown.selection {
  min-width: 100px;
}

/* フィールドタグ内の、カレンダーインプットを含むui.inputは余白を無くす */
.field .ui.input.left.icon:has(.ui.calendar) {
  padding: 0px;
}

/* .ui.input {
  margin-bottom: 2px;
} */

/* ファンダイビング参加申込書内のH3ブロックヘッダー */
h4.ui.block.header {
  padding-top   : 5px;
  padding-bottom: 5px;
}

/* メディカルチェック表のテーブル内 */
.ui.unstackable.table tr>td.fixed {
  width: 135px !important;
  padding-left: 0px;
  padding-right: 8px;
}

div#questions>.ui.unstackable.table {
  max-width: 850px;
}

/* .ui.toggle.checkbox .box:after,.ui.toggle.checkbox label:after {
  width: 1.2rem;
  height: 1.2rem;
  top: 1.5px;
  left: 5px;
}
 */
@media only screen and (max-width: 767px) {

  .ui.form:not(.unstackable) .fields:not(.unstackable)>.eight.wide.field,
  .ui.form:not(.unstackable) .fields:not(.unstackable)>.eleven.wide.field,
  .ui.form:not(.unstackable) .fields:not(.unstackable)>.fifteen.wide.field,
  .ui.form:not(.unstackable) .fields:not(.unstackable)>.five.wide.field,
  .ui.form:not(.unstackable) .fields:not(.unstackable)>.four.wide.field,
  .ui.form:not(.unstackable) .fields:not(.unstackable)>.fourteen.wide.field,
  .ui.form:not(.unstackable) .fields:not(.unstackable)>.nine.wide.field,
  .ui.form:not(.unstackable) .fields:not(.unstackable)>.seven.wide.field,
  .ui.form:not(.unstackable) .fields:not(.unstackable)>.six.wide.field,
  .ui.form:not(.unstackable) .fields:not(.unstackable)>.sixteen.wide.field,
  .ui.form:not(.unstackable) .fields:not(.unstackable)>.ten.wide.field,
  .ui.form:not(.unstackable) .fields:not(.unstackable)>.thirteen.wide.field,
  .ui.form:not(.unstackable) .fields:not(.unstackable)>.three.wide.field,
  .ui.form:not(.unstackable) .fields:not(.unstackable)>.twelve.wide.field,
  .ui.form:not(.unstackable) .fields:not(.unstackable)>.two.wide.field,
  .ui.form:not(.unstackable) .five.fields:not(.unstackable)>.field,
  .ui.form:not(.unstackable) .five.fields:not(.unstackable)>.fields,
  .ui.form:not(.unstackable) .four.fields:not(.unstackable)>.field,
  .ui.form:not(.unstackable) .four.fields:not(.unstackable)>.fields,
  .ui.form:not(.unstackable) .three.fields:not(.unstackable)>.field,
  .ui.form:not(.unstackable) .three.fields:not(.unstackable)>.fields,
  .ui.form:not(.unstackable) .two.fields:not(.unstackable)>.field,
  .ui.form:not(.unstackable) .two.fields:not(.unstackable)>.fields {
    width: 100% !important
  }

  .ui.form .fields {
    /* margin-bottom: 10px; */
  }

  .ui.form .fields .field {
    clear        : both;
    margin-bottom: 10px;
  }
}

/* インラインフィールド内のカレンダーはインラインにする */
div.inline.fields > div.inline.field > div.ui.calendar {
  display: inline-block;
}

/* ファンダイビング参加申込書のラベル内に重要事項ボタンを付けたための調整
   外枠は余白無しにし、内部にFlexを作成
 */
div.ui.segment.diving_registration > div.ui.attached.label {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  height: 36px;
}

/* 参加申込書内のヘッダーの余白調整 */
h4.ui.header {
  margin-top: 4px;
}

/* 作成フィルターのラベル直下の位置調整 */
div.ui.segment.create_target .ui.top.attached.label:first-child+:not(.attached) {
  margin-top: 1.3rem !important;
}

div.ui.top.attached.segment {
  max-width: 880px;
}


/* トグルスイッチの中のデザインを変更 */
.ui.toggle.checkbox .box:after, .ui.toggle.checkbox label:after {
  width: 1.2rem !important;
  height: 1.2rem !important;
  top: 0.15rem !important;
  left: 0.2rem !important;
  box-shadow: none !important;
}
.ui.toggle.checkbox input:checked~.box:after, .ui.toggle.checkbox input:checked~label:after {
  left: 2.1rem !important;
}

/* ファンダイビング参加申込書、メディカルチェック表のセグメントラベルをスティッキーさせる設定
  ちょっとややこしい
  sticky_wrapper で position: stickyのラッパーを作成
  親要素のpaddingを無視するため、marginとwidthを調整
  子要素の上下paddingを無視させるため、padding上下を0にする

*/
.sticky_wrapper {
  position: sticky;
  margin-left: -14px;
  margin-top: -14px;
  width: calc(100% + 28px);
  height: 36px;
  top: 0px;
  left: 0px;
  z-index: 10;
}

.diving_registration > .sticky_wrapper > .ui.top.attached.label {
  padding-top: 0px !important;
  padding-bottom: 0px !important;

}

.sticky_wrapper > .ui.top.attached.label.sticked {
  background-color: #000b !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}