@import "variables";
.cp-sqlRequest {
	font-size: 13px;
}
.cp-sqlRequest-table {
	position: relative;
	overflow: hidden;
	overflow-x: auto;
	a {
		border-bottom-color: transparent;
		&:hover {
			border-bottom-color: $blue;
		}
	}
	.table-cloned {
		display: none;
	}
	.table-requests {
		width: 100%;
		min-width: 750px;
		font-size: 12px;
		line-height: 1.25;
		tr {
			th {
				padding: 6px 12px;
				font-size: 12px;
				&:not(:first-child){
					border-left: 1px solid #d2d2d2;
				}
			}
			td {
				padding: 4px 12px;
				border-bottom: 1px solid #e1e1e1;
				&:not(:first-child){
					border-left: 1px solid #e1e1e1;
				}
			}
		}
		thead {
			tr {
				td, th {
					background: #e9e9e9;
				}
			}
		}
		tbody {
			tr{
				&.tr-hide {
					& > td {
						background: #f3f6f9;
						border-color: #f3f6f9;
						border-bottom-color: #e1e1e1;
						padding-top: 16px;
						padding-bottom: 16px;
						vertical-align: top;
					}
				}
			}
			&:not(.in) {
				.visible-off {
					display: none;
				}
				.tr-hide {
					display: none;
					visibility: hidden;
				}
			}
			&.in {
				tr {
					&:first-child {
						td {
							background: #d5e6f6;
							&:not(:first-child){
								border-left: 1px solid darken(#e1e1e1, 5%);
							}
						}
					}
					&.tr-hide {
						& > td {}
					}
				}
				.visible-on {
					display: none;
				}
			}
			&.highlight {
				tr:first-child td {
					animation: animateFlashing 2s ease-in-out 1;
					@keyframes animateFlashing {
						0%, 45%, 75%, 100% {
							background: #d5e6f6;
						}
						30%, 60%, 90% {
							background: darken(#d5e6f6, 10%);
						}
					}
				}
			}
		}

		.td-btns {
			width: 100px;
			.btn {
				min-width: 120px;
				padding-top: 4px;
				padding-bottom: 4px;
				white-space: nowrap;
			}
		}
	}
}
.cp-sqlRequest-form {}
.cp-sqlRequest-link {
	background: #dde4ec;
	display: inline-block;
	max-width: 450px;
	padding: 12px 16px;
}

#modal-cp-sqlRequest {
	font-size: 13px;
}