@import "variables";
.cp-cost-control {}
.cp-cost-control-forms {
	max-width: 660px;
	.headline {
		margin-bottom: 1rem;
		h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
			margin-bottom: 4px;
		}
		.h-description {
			font-size: 11px;
			color: #9b9b9b;
		}
	}
	.form-group {
		.form-label {
			margin-bottom: 4px;
			font-size: 11px;
		}
	}
	.form-flex {
		display: flex;
		align-items: flex-end;
		margin-left: -8px;
		margin-right: -8px;
		.form-group {
			padding-left: 8px;
			padding-right: 8px;
		}
	}
	.form-control-file {
		display: flex;
		align-items: center;
		padding-top: 0;
		padding-bottom: 0;
		input {
			display: block;
			width: 100%;
			font-size: 10px;
		}
	}
}
.cp-cost-control-table {
	position: relative;
	overflow: hidden;
	overflow-x: auto;
	.cost-control-toggle {
		background: #606070;
		position: relative;
		display: inline-block;
		vertical-align: middle;
		width: 12px;
		height: 12px;
		@include border-radius(2px);
		&:hover {
			background: $blue;
			cursor: pointer;
		}
	}
	table {
		//background: #f6f7f8;
		background: #fff;
		width: 100%;
		font-size: 12px;
		color: #606070;
		thead {
			font-size: 11px;
			tr {
				th, td {
					//background: #dadee2;
					background: rgba(0,0,0,.12);
					border-left: 1px solid #585867;
					border-bottom: 1px solid #585867;
					padding: 6px 8px;
					font-weight: bold;
					color: #646675;
					text-align: center;
				}
				th {
					text-transform: uppercase;
					&:first-child {
						border-left: 0 !important;
					}
				}
			}
		}
		tbody {
			tr {
				td {
					vertical-align: top;
					padding: 8px;
					border-bottom: 1px dotted #cecfda;
					color: #606070;
					&:not(:first-child){
						border-left: 1px dotted #cecfda;
					}
					&.td-style-bordered {
						border-left: 1px solid #585867 !important;
					}
					&.td-control {
						//background: $white !important;
						border-left-color: transparent !important;
						width: 1px;
						padding-right: 0 !important;
						white-space: nowrap;
						text-align: right;
						& + td {
							border-left-color: transparent !important;
						}
					}
					&.td-id {
						width: 1px;
						padding-right: 0 !important;
						white-space: nowrap;
						& + td {
							border-left-color: transparent !important;
						}
					}
				}
				&.tr-a {
					td {
						//background: #dddedf;
						background: rgba(0,0,0,.12);
					}
					&.tr-open {
						@include box-shadow(0 2px 4px rgba(0,0,0,.2));
						td {
							border-bottom: 1px solid #9d9fb4;
						}
					}
				}
				&.tr-b {
					td {
						background: rgba(0,30,100,.05);
					}
					&.tr-open {
						@include box-shadow(0 2px 4px rgba(0,0,0,.25));
						td {
							//background: #fff3ca;
							background: rgba(230,175,0,.25);
							border-bottom: 1px solid #9d9fb4;
						}
					}
				}
				&.tr-c {
					td {
						border-bottom-style: solid;
					}
					//&:nth-child(even){
					&.even {
						td {
							//background: #f1f7ff;
							background: #2876dd10;
							background: rgba(40,120,220,.075);
						}
					}
				}
				&:not(.tr-open){
					.cost-control-toggle {
						&:before, &:after {
							content: '';
							background: #fff;
							position: absolute; top: 50%; left: 50%;
							display: block; width: 60%; height: 2px;
							@include transform(translateX(-50%) translateY(-50%));
						}
						&:after {
							@include transform(translateX(-50%) translateY(-50%) rotate(90deg));
						}
					}
				}
				&.tr-open {
					.cost-control-toggle {
						&:before {
							content: '';
							background: #fff;
							position: absolute; top: 50%; left: 50%;
							display: block; width: 60%; height: 2px;
							@include transform(translateX(-50%) translateY(-50%));
						}
					}
				}
				&.tr-hide {
					display: none;
				}
			}
		}

		.form-check {
			input {
				top: 1px;
				@include transform(none);
			}
			&.stylize {
				.arr {
					top: 1px;
					margin: 0;
				}
			}
		}
	}
}