/* Datatables */

.wpcl {
  border-collapse : collapse;
  max-width       : 100%;
  overflow-x      : auto;



  tr {
	vertical-align : middle;
	border-right   : 1px solid #dfdfdf;
	border-top     : 0;
	text-align     : left;
	border-bottom  : 1px solid #dfdfdf;

	&:nth-child(even) {
	  background-color : #f9f9f9;
	}

	&:nth-child(odd) {
	  background-color : #fff;
	}

	&:last-child th {
	  border-bottom-width : 0;
	}
  }

  td {
	border-right  : 1px solid #dfdfdf;
	border-top    : 0;
	text-align    : left;
	border-bottom : 1px solid #dfdfdf;
	border-left   : 1px solid #dfdfdf;
	padding       : 8px 10px;
  }

  thead {
	th {

	  background-color : #f1f1f1;
	  font-weight      : 600;

	  border-right     : 1px solid #dfdfdf;
	  padding          : 10px 10px;
	  text-align       : left;
	  border-bottom    : none;
	  border-top       : 0;


	  &:last-child {
		border-right-width : 0;
	  }

	  strong {
		padding-right : 15px;
	  }
	}
  }



  tbody {
	> tr.selected {
	  background-color : #eee !important; // overriding DataTables' CSS
	}

	> tr {
	  > .selected {
		background-color : #eee !important; // overriding DataTables' CSS;
	  }
	}
  }

  .dataTables_scrollBody {
	border-bottom : none;
  }

  .dataTables_wrapper.no-footer {
	.dataTables_scrollBody {
	  border-bottom   : 0;
	  border-top      : 0;
	  white-space     : nowrap;
	  border-bottom   : 0px;
	  border-collapse : collapse;
	  border-bottom   : 0;
	  border-top      : 0;
	}
  }

  .dataTables_scroll {
	border : 1px solid #dfdfdf;
  }

  .wpcl-shortcode {
	p {
	  margin : 8px 16px;
	}
  }

  .counter {
	background-color : #f1f1f1;

	p {
	  text-align : center;
	  margin     : 8px 0;
	}
  }

  .total {
	text-align : right;
	float      : right;
	margin-top : 15px;
  }

  _filter {
	margin-top : 5px;

	input {
	  padding : 0.2em;
	  display : inline;
	  width   : auto;
	}
  }

  .dataTables_wrapper {
	.dataTables_length {
	  margin-bottom : 0.5em;
	  margin-left   : 10px;

	  select {
		width   : auto;
		display : inline;
		padding : 0px 22px 0px 4px;
	  }
	}

	.dataTables_paginate {
	  .paginate_button {
		display       : inline-block;
		min-width     : 30px !important;
		border        : 1px solid #d2d2d2 !important;
		padding       : 3px 5px 7px !important;
		background    : #e4e4e4 !important;
		font-size     : 16px;
		line-height   : 1;
		font-weight   : 400;
		text-align    : center;
		border-radius : 0;
		margin        : 0.5em 0 0 0.2em;

		&:hover {
		  border-color       : #5b9dd9 !important;
		  color              : #fff !important;
		  background         : #00a0d2 !important;
		  -webkit-box-shadow : none !important;
		  box-shadow         : none !important;
		  outline            : 0 !important;
		}
	  }

	  .paginate_button.disabled {
		background-color : #ebebeb !important;
		color            : #b4b4b4 !important;
		border           : 0 !important;

		&:hover {
		  background-color : #ebebeb !important;
		  color            : #b4b4b4 !important;
		  border           : 0 !important;
		}
	  }
	}

	.dataTables_filter {
	  margin-bottom : 0.5em;
	}
  }

  .button {
	color              : #555;
	border-color       : #ccc;
	background         : #f7f7f7;
	box-shadow         : 0 1px 0 #ccc;
	vertical-align     : top;
	display            : inline-block;
	text-decoration    : none;
	font-size          : 13px;
	line-height        : 26px;
	height             : 28px;
	padding            : 0 10px 1px;
	cursor             : pointer;
	border-width       : 1px;
	border-style       : solid;
	-webkit-appearance : none;
	border-radius      : 3px;
	white-space        : nowrap;
	box-sizing         : border-box;
	margin-bottom      : 10px;
	margin-right       : 5px;
	margin-top         : 10px;

	&:hover {
	  background       : #fafafa;
	  border-color     : #ccc;
	  color            : #23282d;
	  background-image : none;
	  box-shadow       : 0 1px 0 #ccc;
	}

	&:active {
	  background        : #eee;
	  border-color      : #999;
	  box-shadow        : inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
	  -webkit-transform : translateY(1px);
	  transform         : translateY(1px);
	}
  }

  a,
  button,
  input {
	&.dt-button {
	  color           : #555;
	  border-color    : #ccc;
	  background      : #f7f7f7;
	  box-shadow      : 0 1px 0 #ccc;
	  vertical-align  : top;
	  display         : inline-block;
	  text-decoration : none;
	  font-size       : 13px;
	  line-height     : 26px;
	  height          : 28px;
	  padding         : 0 10px 1px;
	  cursor          : pointer;
	  border-width    : 1px;
	  border-style    : solid;
	  border-radius   : 3px;
	  white-space     : nowrap;
	  box-sizing      : border-box;

	  margin-right    : 7px;
	}
  }

  _wrapper {
	a.dt-button {
	  span {
		font-size      : 13px;
		line-height    : 26px;
		text-transform : none;
	  }

	  &:hover {
		background       : #fafafa;
		border-color     : #ccc;
		color            : #23282d;
		background-image : none;
		box-shadow       : 0 1px 0 #ccc;
	  }

	  &:active {
		background        : #eee;
		border-color      : #999;
		box-shadow        : inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
		-webkit-transform : translateY(1px);
		transform         : translateY(1px);
	  }
	}
  }

  .button.button-second {
	margin-right : 3px;
  }

  .dataTables_empty {
	padding : 8px !important;
  }

  #list-table {
	border-collapse : collapse;

	tr {
	  border     : 1px solid #dfdfdf;
	  text-align : left;
	  padding    : 8px;
	}

	td {
	  border     : 1px solid #dfdfdf;
	  text-align : left;
	  padding    : 8px;
	}
  }


  p {
	margin : 8px;
  }

  .error {
	color       : #f66;
	font-weight : bold;
  }

  .wpcl-btn-mail-to-all-group {
	display : inline-block;
  }

  .wpcl-email-all-technical-note {
	display    : none;
	font-size  : 0.8em;
	margin-top : 0.2em;
  }

  .dataTables_scrollHeadInner {
	table {
	  border        : 0;
	  margin-bottom : 0;
	}
  }

  div.dataTables_scrollBody {
	.wpcl-shortcode {
	  tbody {
		tr {
		  border-right : 0px !important;
		}

		td {
		  border-right : 0px !important;

		  &:first-child {
			border-left-width : 0 !important;
		  }
		}
	  }
	}
  }

  .wpcl-init {
	display : none;
  }


  .progress-bar {
	padding : 20px 0;

	.result {
	  display    : block;
	  text-align : center;
	}

	.bar {
	  background    : #eef1f3;
	  display       : block;
	  margin        : 5px auto;
	  position      : relative;
	  height        : 10px;
	  width         : 50%;
	  border-radius : 5px;
	  overflow      : hidden;
	}

	.progress {
	  background : #75b800;
	  display    : block;
	  position   : absolute;
	  top        : 0;
	  left       : 0;
	  width      : 0;
	  height     : 100%;
	  transition : all ease-in 0.3s;
	}
  }
}
