/*!
Simple-DataTables
Github: https://github.com/fiduswriter/Simple-DataTables
*/

// Creative Tim Changes

.dataTable-wrapper{
	.dataTable-top{
		padding: $card-header-padding;
		.dataTable-dropdown{
			float: left;
			label{
				margin-bottom: 0;
				margin-left: 0;
				color: $secondary;
				font-weight: $font-weight-normal;
				.dataTable-selector{
					border-color: $gray-200;
					border-radius: $border-radius-md;
				}
			}
		}
		.dataTable-search{
			input{
				font-size: $font-size-sm;
				color: $input-color;
				border:1px solid $gray-200;
				@include border-radius($input-border-radius, 0);
				&:focus-visible{
					outline: none;
				}
			}
		}
	}
	.dataTable-container{
		.table{
			thead{
				tr{
					th{
						padding: $table-head-spacer-y $table-head-spacer-x;
						opacity: .7;
						font-weight: bolder;
						color: $secondary;
						text-transform: uppercase;
						font-size: $font-size-xxs;
					}
				}
			}
			tbody{
				tr{
					td{
						padding: $table-head-spacer-y $table-head-spacer-x;
					}
				}
			}
		}
	}
	.dataTable-bottom{
		padding: $card-header-padding;
    padding-top: 0;
		.dataTable-info{
			color: $secondary;
			font-size: $font-size-sm;
		}
		.dataTable-pagination{
			.dataTable-pagination-list{
				li{
					a{
						display: $page-link-display;
				    align-items: $page-link-align-items;
				    justify-content: $page-link-justify-content;
				    color: $secondary;
				    padding: 0;
				    margin: $page-link-margin;
						border: 1px solid $gray-300;
				    border-radius: $page-link-radius !important;
				    width: $page-link-width;
				    height: $page-link-height;
				    font-size: $font-size-sm;
						margin-left: 0;
						&:hover{
							background: $gray-200;
						}
					}
				}
				.active{
					a{
						background: transparent;
						@include gradient-directional(nth($primary-gradient, 1) 0%, nth($primary-gradient-state, -1) 100%, $deg: 195deg);
						box-shadow: $pagination-active-box-shadow;
						color: $white;
						border: none;
						border-radius: $page-link-radius !important;
						&:hover{
							@include gradient-directional(nth($primary-gradient, 1) 0%, nth($primary-gradient-state, -1) 100%, $deg: 195deg);
						}
					}
				}
			}
		}
	}
	&.no-footer{
		.dataTable-container{
			border-bottom: 0;
		}
	}
}

.dataTable-table {
  thead,
  tbody,
  tfoot {
    td,
    th {
      vertical-align: middle !important;
    }
  }
}

@include media-breakpoint-down(sm) {
	.dataTable-top > div:last-child{
		float: left;
		margin-top: $spacer;
	}
}