//colors
// $white: #fff;
// $color_green_leaf_approx: #4c7607;
// $color_alto_approx: #ddd;
// $color_gallery_approx: #ededed;
// $color_chicago_approx: #5a5a5a;
// $color_venice_blue_approx: #115d85;
// $red: #f00;
// $color_quill_gray_approx: #d4d4d4;

//urls
// $url_gdd_1: url(../../../../images/gem/skin/flat/icon-add.png);
// $url_gdd_2: url(../../../../images/gem/skin/flat/icon-delete.png);
// $url_gdd_3: url(../../../../images/gem/skin/flat/icon-pencil.png);

//@extend-elements
//original selectors
//#detailForm >div, #detailForm .formArchive >div
%extend_gdd_1 {
	display: block;
	float: left;
	width: 100%;
}

//original selectors
//.tbl-section input[type=text], .tbl-section input[type=password], .tbl-section textarea
%extend_gdd_2 {
	border: 1px solid $color_alto_approx;
	font-size: 1rem;
	width: 100%;
	padding: 2px 5px;
	margin: 2px 0;
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: border-box;
}

//original selectors
//.add-btn, input[type=button].add-btn, .del-btn, input[type=button].del-btn
%extend_gdd_3 {
	display: inline-block;
	text-align: right;
	font-size: 1rem;
	padding: 0 10px 0 30px;
	min-width: 70px;
	height: 27px;
	line-height: 27px;
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: border-box;
	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
	transition: background 300ms;
	float: left;
	border: 1px solid $color_alto_approx !important;
	background: 10px 7px no-repeat transparent;
}

%extend_gdd_4 {
	display: inline-block;
	padding: 2px 0;
	margin: 2px 15px 2px 0;
}

%extend_gdd_5 {
	height: 25px;
	width: calc(100% - 80px);
	border: 0 !important;
}

%extend_gdd_6 {
	padding-bottom: 10px;
	font-size: 1rem;
	display: block;
}

#detailForm {
	> div {
		@extend %extend_gdd_1;
	}
	.formArchive > div {
		@extend %extend_gdd_1;
	}
}
.formArchive {
	padding: 20px;
	padding-bottom: 0;
	margin-bottom: 20px;
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: border-box;
	background: $white;
	border-top: 2px solid $color_green_leaf_approx;
	h3 {
		font-size: 1.42857rem;
	}
	> div {
		.sechead {
			display: block;
			float: left;
			width: 100%;
			padding-top: 20px;
			position: relative;
			cursor: pointer;
			&.disclosure-close::after {
				margin-top: 3px;
				//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
				transform: rotate(45deg);
			}
		}
		.sechead::after {
			content: '';
			display: block;
			height: 10px;
			width: 10px;
			position: absolute;
			right: 4px;
			margin-top: 6px;
			//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
			transform: rotate(-135deg);
			border-right: 1px solid $color_venice_blue_approx;
			border-bottom: 1px solid $color_venice_blue_approx;
			//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
			transition: transform 300ms;
		}
		> .sechead {
			//TopレベルのSectionのタイトルにBorderを設定
			border-top: 1px solid $color_alto_approx;
		}
		&:first-child > .sechead {
			//Topレベルの先頭にはBorderとSpaceを除去(formArchiveで設定)
			border-top: none;
			margin-top: 0;
			padding-top: 0;
		}
	}
	.inner-section > div > .sechead {
		//inner-section に対して12pxのpaddingが設定されているので、タイトル上のSpaceを調整
		padding-top: 12px;
		&> h3 {
			margin-bottom: 12px;;
		}
	}
	.upload-button {
		width: 100%;
		margin: 2px 0;
	}
	p.error {
		clear: both;
		padding-top: 10px;
		color: $red;
		span.error {
			padding-bottom: 0;
		}
	}
}
.tbl-section {
	margin-bottom: 20px;
	.explanation {
		display: inline-block;
		width: 100%;
		font-size: 0.85714rem;
		color: $color_chicago_approx;
		margin-top: 8px;
	  margin-bottom: 2px;
	}
	.box-scroll {
		overflow-x: auto;
		margin-bottom: 10px;
		margin: 2px 0;
		padding: 2px 0;
		width: 100%;
	}
	input[type=text] {
		@extend %extend_gdd_2;
	}
	input.custom-type-text {
		@extend %extend_gdd_2;
	}
	input[type=password] {
		@extend %extend_gdd_2;
	}
	textarea {
		@extend %extend_gdd_2;
	}
	select {
		width: 100%;
		height: 24px;
		margin: 2px 0;
	}
	select[multiple] {
		height: auto;
		padding: 2px 5px;
	}
	th.section-data {
		padding: 12px 10px;
		border: 1px solid $color_alto_approx;
		width: 180px;
		background: $color_gallery_approx;
		vertical-align: top;
		&.w-auto {
			width: auto;
		}
	}
	td.section-data {
		padding: 12px 10px;
		border: 1px solid $color_alto_approx;
		vertical-align: top;
		.list-add {
			input[type=text] {
				margin: 0;
			}
			input.custom-type-text {
				margin: 0;
			}
			input[type=password] {
				margin: 0;
			}
			textarea {
				margin: 0;
			}
		}

	}
	.cke {
		margin: 2px 0;
	}
	.numericRange {
		> span:nth-child(n+2) {
			margin-left: 4px; //2つ目以降の先頭を空ける
		}
		input {
			width: 45%;
		}
	}
	.dateRange > span:nth-child(n+2) {
		margin-left: 4px; //2つ目以降の先頭を空ける
	}
	.layout-row {
		height: auto;
		visibility: collapse;
		> th.section-data {
			height: 0 !important;
			border: none !important;
			padding-top: 0 !important;
			padding-bottom: 0 !important;
		}
		> td.section-data {
			height: 0 !important;
			border: none !important;
			padding-top: 0 !important;
			padding-bottom: 0 !important;
		}
	}
	.data-label {
		overflow-wrap: break-word;
	}
}
.tbl-reference {
	th {
		width: 180px;
		background: $color_gallery_approx;
		border: 1px solid $color_alto_approx;
		padding: 10px;
		vertical-align: top;
	}
	td {
		border: 1px solid $color_alto_approx;
		padding: 10px;
		vertical-align: top;
	}
  .sel-btn {
    padding: 5px 10px;
    min-width: 70px;
  }
  .ins-btn {
    padding: 5px 10px;
    min-width: 70px;
  }
	.delButton {
		width: 80px;
		margin: 2px 0;
	}
	.colLink {
		width: 60px;
	}
	.orderCol {
		width: 20px;
	}
	.order-icon {
		display: block;
		cursor: pointer;
		text-align: center;
	}
	tr {
		&:nth-child(2) .order-icon.up-icon {
			display: none;
		}
		&:last-child .order-icon.down-icon {
			display: none;
		}
	}
	&.view tr {
		&:nth-child(1) .order-icon.up-icon {
			display: none;
		}
		&:nth-child(2) .order-icon.up-icon {
			display: block;
		}
	}
	.timestamppicker-field {
		white-space: nowrap;
	}
}
.detail_edit {
	.tbl-section {
		td.section-data {
			padding: 8px 10px;
		}
		.data-label {
			display: inline-block;
			padding: 2px 0;
			margin: 2px 0;
		}
	}
}
.list-add {
	border: 1px solid $color_alto_approx;
	margin-top: 2px;
	margin-bottom: 8px;
	overflow: auto;
	overflow-wrap: break-word;
	> a {
		line-height: 25px;
		padding-left: 5px;
	}
	input[type=text] {
		@extend %extend_gdd_5;
		&.datepicker-form-size-01 ~ .del-btn {
			float: none;
			margin-left: 10px;
		}
		&.datetimepicker-form-size-01 ~ .del-btn {
			float: none;
			margin-left: 10px;
		}
		&.timepicker-form-size-01 ~ .del-btn {
			float: none;
			margin-left: 10px;
		}
	}
	input.custom-type-text {
		@extend %extend_gdd_5;
	}
	input[type=password] {
		@extend %extend_gdd_5;
	}
	input[type=button] {
		float: right;
		height: 25px;
		line-height: 25px;
		border: 0 !important;
	}
	.cke {
	  margin-top: 0;
	}
	&.picker-list {
		border: none;
		.del-btn {
			border: 1px solid $color_alto_approx !important;
		}
		input {
			&.datepicker-form-size-01 {
				border: 1px solid $color_alto_approx !important;
			}
			&.datepicker-form-size-02 {
				border: 1px solid $color_alto_approx !important;
			}
			&.datetimepicker-form-size-01 {
				border: 1px solid $color_alto_approx !important;
			}
			&.datetimepicker-form-size-02 {
				border: 1px solid $color_alto_approx !important;
			}
			&.timepicker-form-size-01 {
				border: 1px solid $color_alto_approx !important;
			}
			&.timepicker-form-size-02 {
				border: 1px solid $color_alto_approx !important;
			}
		}
	}
	textarea ~ input[type=button] {
		float: none;
		border: inherit !important;
		margin: 2px 0;
	}
	.cke ~ input[type=button] {
		float: none;
		border: inherit !important;
		margin: 2px 0;
	}
	&.unique-list {
		border: none;
		display: flex;
		flex-wrap: wrap;
		> span.unique-key {
			width: auto;
			margin-right: 5px;
		}
		> span.unique-ref {
			border: 1px solid $color_alto_approx !important;
			margin-top: 2px;
			margin-bottom: 8px;
			flex-grow: 1;
		}
		.del-btn {
			float: right !important;
			border: 0px !important;
		}
		a {
			line-height: 25px;
			padding-left: 5px;
		}
		input[type=text] {
			&.unique-form-size-01 {
				width: auto;
				border: 1px solid $color_alto_approx !important;
			}
		}
		input[type=button] {
			float: none;
			height: auto !important;
		}
	}
}
.add-btn {
	@extend %extend_gdd_3;
	background-image: $url_gdd_1;
	&:hover {
		text-decoration: none;
		background-color: $color_gallery_approx;
	}
}
input[type=button] {
	&.add-btn {
		@extend %extend_gdd_3;
		margin: 2px 0;
		background-image: $url_gdd_1;
		&:hover {
			text-decoration: none;
			background-color: $color_gallery_approx;
		}
	}
	&.del-btn {
		@extend %extend_gdd_3;
		background-image: $url_gdd_2;
		&:hover {
			text-decoration: none;
			background-color: $color_gallery_approx;
		}
	}
}
.del-btn {
	@extend %extend_gdd_3;
	background-image: $url_gdd_2;
	&:hover {
		text-decoration: none;
		background-color: $color_gallery_approx;
	}
}
.binaryDelete {
	float: none;
}
.list-bin {
	margin-bottom: 10px;
	&:last-child {
		margin-bottom: 0;
	}
	p {
		overflow-x: hidden;
		overflow-y: hidden;
	}
}
.mr-btn {
	display: block;
	float: left;
	margin: 15px 0;
	input[type=button] {
		display: block;
		float: left;
		margin-left: 10px;
		&:first-child {
			margin-left: 0;
		}
	}
}
.massReference {
	display: block;
	float: left;
	width: 100%;
	margin-bottom: 20px;
	.mr-btn {
		margin-bottom: 0;
	}
	.result-nav {
		margin-bottom: 20px;
		&:last-child {
			margin-top: 20px;
			margin-bottom: 0;
		}
	}
}
span.success{
	@extend %extend_gdd_6;
}
span.error {
	@extend %extend_gdd_6;
	color: $red;
}
a + .binaryDelete {
	margin-left: 10px;
}
.list-check-01 li {
	@extend %extend_gdd_4;
}
.list-radio-01 li {
	@extend %extend_gdd_4;
}
.ui-jqgrid .ui-jqgrid-bdiv td.detail-links a {
	&.lnk-mr-01 {
		display: inline-block;
		position: relative;
		vertical-align: middle;
		height: 20px;
		width: 20px;
		overflow: hidden;
		font-size: 0;
		color: $color_gallery_approx;
		background: $color_gallery_approx;
		//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 50%;
		//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
		transition: background 300ms;
		&:hover {
			background: $color_quill_gray_approx;
		}
	}
	&.lnk-mr-01::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		height: 20px;
		width: 20px;
		background: $url_gdd_3 center center no-repeat;
	}
}
.ui-jqgrid {
	a.modal-lnk {
		color: #115d85;
		&:hover {
			text-decoration: underline;
		}
	}
}
.tbl-version {
	margin-bottom: 20px;
	td {
		border: 1px solid $color_alto_approx;
		padding: 10px;
		vertical-align: top;
	}
}
.modal-body{
	.tbl-section {
		td.section-data {
			.numericRange input {
				width: 44%;
			}
		}
	}
}
