/**
  * 箱
  **********************************************************************************************************************
 */
main > form,
.mainForm {
  font-size       : 1rem;
  justify-content : center;
  margin          : 1rem auto;
}

form .formContainer {
  padding : 1rem 0 0 0;
}

form .hiddenBox {
  text-align    : right;
  border-bottom : lightgray 0.1rem solid;
}

/*  検索句 */
.searchBox > form,
#uploadForm > form {
  display         : flex;
  justify-content : center;
  text-align      : left;
  margin          : 30px 0 0;
}

#uploadForm {
  border-bottom  : 0.1rem solid gray;
  padding-bottom : 0.3rem;
}

#uploadForm > form > .submitBox {
  margin-left : 1rem;
}

#uploadForm ~ #itemBox {
  margin-top : 1rem;
}

.searchBox > form > .formContainer,
.searchBox > form > .submitBox {
  margin  : 0 10px 0 0;
  padding : 0;
}

/**
  * ボタン
  **********************************************************************************************************************
 */
.searchBox .btn,
.operationBox .btn,
#orderBox .btn,
#actionBtn .btn {
  border             : 1px solid #CCCCCC;
  background         : #F1E767;
  background         : -webkit-gradient(linear, left top, left bottom, from(#FDFBFB), to(#EBEDEE));
  background         : -webkit-linear-gradient(top, #FDFBFB 0%, #EBEDEE 100%);
  background         : linear-gradient(to bottom, #FDFBFB 0%, #EBEDEE 100%);
  -webkit-box-shadow : inset 1px 1px 1px #FFFFFF;
  box-shadow         : inset 1px 1px 1px #FFFFFF;
}

.searchBox .btn-switch:hover,
.operationBox .btn:hover,
#orderBox .btn:hover,
#actionBtn .btn:hover {
  background         : -webkit-gradient(linear, left bottom, left top, from(#FDFBFB), to(#EBEDEE));
  background         : -webkit-linear-gradient(bottom, #FDFBFB 0%, #EBEDEE 100%);
  background         : linear-gradient(to top, #FDFBFB 0%, #EBEDEE 100%);
  -webkit-box-shadow : none;
  box-shadow         : none;
}

#actionBtn {
  display         : flex;
  justify-content : flex-start;
  margin          : 10px;
}

#itemBox {
  display         : flex;
  justify-content : flex-end;
  margin          : 10px;
}

#limitBox {
  margin-left : 10px;
}

#limitBox > select {
  border-radius : 100vh;
  font-size     : 0.8rem;
  margin        : 0 5px 0 0;
  padding       : 0.4rem 0.5rem;
}

#orderBox {
  margin-left : 5px;
}

#orderBox .btn,
#actionBtn .btn {
  font-size : 0.7rem;
  margin    : 0 5px 0 0;
  padding   : 0.5rem 0.5rem;
}

#actionBtn {
  display : flex;
}

/*  ListTable */
.operationBox {
  display : flex;
}

.operationBox .btn {
  font-size : 0.8rem;
  margin    : 0 5px 0 0;
  padding   : 0.3rem;
}

.pagingBox > div {
  display         : flex;
  justify-content : center;
}

.pagingBox > div > span,
.pagingBox > div > a {
  margin  : 0 1px;
  padding : 0.2rem;
}

.pagingBox > div > .current {
  font-weight : bold;
}

#dataTable table,
.dataTable table {
  margin     : 0 auto 30px;
  text-align : center;
}

#dataTable tr td,
.dataTable tr td {
  border-bottom  : 1px solid #CCCCCC;
  font-size      : 0.9rem;
  margin         : 1rem 0 0;
  padding        : 0.8rem 0.8rem 0.2rem;
  vertical-align : bottom;
}

#dataTable tr td.noteBox,
.dataTable tr td.noteBox {
  vertical-align : top;
}

#dataTable tr td.operationBox,
.dataTable tr td.operationBox {
  padding : 0;
}

#dataTable tr td.tdRight,
.dataTable tr td.tdRight {
  text-align : right;
}

#dataTable tr td.tdLeft,
.dataTable tr td.tdLeft {
  text-align : left;
}

.orderColumnBtn {
}

/*  FORM  */
/*  フォーム部品の大枠　 */
.formContainer {
}

/*  名前枠 　*/
.formName {
  border-left : slategray 0.3rem solid;
  padding     : 0 0 0 0.5rem;
  text-align  : left;
}

.formName span.required {
  color       : #990000;
  font-weight : bold;
}

/*  エラー発生している項目枠  */
.dialogForm div.error,
form div.error {
  background-color : wheat;
  color            : #990000;
  font-weight      : bold;
}

/*  エラー文  */
ul.errorMes > li {
  color       : #990000;
  font-weight : bold;
}

/*  部品枠  */
.formInput {
  padding : 3px 0 0 0;
}

.formInput > p {
  margin : 0.3rem 0 0;
  color  : slategrey;
}

.formInput > input,
.formInput > select,
.formInput > textarea {
  border        : thin solid slategrey;
  border-radius : 10px 10px 10px 10px;
  padding       : 10px;
}

/*  選択肢の大枠  */
.selectContainer {
  display   : flex;
  flex-wrap : wrap;
}

.selectContainer > .selectBox {
  margin : 0 0 0 1rem;
}

/*  選択肢の余白  */
.nullBox {
  width : 100%;
}

/*  Submitボタンを配置する枠  */
.submitBox {
  margin : 30px 0 0 0;
}

.btn:disabled {
  opacity : 0.33;
}

/*  Submitボタン  */
.btn {
  position            : relative;
  display             : inline-block;
  padding             : 1rem 2rem;
  cursor              : pointer;
  -webkit-user-select : none;
  -moz-user-select    : none;
  -ms-user-select     : none;
  user-select         : none;
  -webkit-transition  : all 0.3s;
  transition          : all 0.3s;
  text-align          : center;
  vertical-align      : middle;
  text-decoration     : none;
  letter-spacing      : 0.1em;
  color               : #212529;
  border-radius       : 0.5rem;
}

.btn-switch {
  color              : #333333;
  border             : 1px solid #DDDDDD;
  border-radius      : 100vh;
  background         : #FBFBFC;
  background         : -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#FBFBFC),
      to(#DCDDDE)
  );
  background         : -webkit-linear-gradient(top, #FBFBFC 0%, #DCDDDE 100%);
  background         : linear-gradient(180deg, #FBFBFC 0%, #DCDDDE 100%);
  -webkit-box-shadow : -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
  0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1);
  box-shadow         : -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
  0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1);
}

.btn-switch span {
  display            : inline-block;

  -webkit-transition : all 0.3s;

  transition         : all 0.3s;
}

.btn-switch:hover {
  -webkit-box-shadow : -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
  0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1),
  inset 0 3px 3px rgba(0, 0, 0, 0.18);
  box-shadow         : -1px -5px 6px rgba(0, 0, 0, 0.2), 3px 3px 5px white,
  0 10px 10px rgba(0, 0, 0, 0.1), inset 0 -4px 5px rgba(0, 0, 0, 0.1),
  inset 0 3px 3px rgba(0, 0, 0, 0.18);
}

.btn-switch:hover span {
  -webkit-transform : scale(0.96);
  transform         : scale(0.96);
}

.redBtn {
  align-items      : center;
  background-color : [object object];
  background-image : linear-gradient(180deg, rgba(233, 60, 60, 1), rgba(255, 126, 168, 1));
  border           : none;
  border-radius    : 20px;
  box-shadow       : 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
  color            : #FFFFFF;
  display          : flex;
  font-size        : 18px;
  font-weight      : bold;
  height           : 40px;
  justify-content  : center;
  line-height      : 1;
  margin           : 0 auto;
  padding          : 0;
  text-decoration  : none;
  transition       : 0.3s;
  width            : 200px;
}

.original-button:hover {
  box-shadow : 0 0 rgba(0, 0, 0, 0);
}

/**
  * ファイル選択Dialog
  **********************************************************************************************************************
 */
/** ディレクトリのボックス */
.fileSelectDir {

}

/** ファイル表示枠 */
.fileSelectList {
}

/** ファイル単体の枠 */
.fileSelectListFloat {

}

/** ファイル単体の枠 - 改行 */
.fileSelectListClear {

}

/**
  * Dialog
  **********************************************************************************************************************
 */
/** ダイアログに表示するパネル外枠 */
.dialogShowContainer {

}

.dialogShowContainer.tpl {
  display : none;
}

.dialogTpl {
  display : none;
}

/** ダイアログに表示するパネル行枠  */
.dialogShowBox {

}

.noneDis {
  display : none;
}