/**
 * Note that custom classes added to a field by enabling "Dev Mode" 
 * Dashboard > Settings > ticking the 'Form Builder Dev Mode' box
 * will override these classes.
 */
 .ui-autocomplete {
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index:1000 !important;
}

.ui-widget {
	font-size: 1em!important;
  font-weight: 500!important;
}
 
.tfc-playrao-book {
	width: 40%!important;
	margin-bottom: 1vh!important;
	margin-right: 2%!important;
	color:var(--global--color-primary)!important;
	font-weight: 500!important;
}

.tfc-playrao-chapter {
	width: 20%!important;
	margin-right: 2%!important;
	color:var(--global--color-primary)!important;
	font-weight: 500!important;
}

.tfc-playrao-addrow-btn {
  top:.1em!important;
  width: 12%!important;
  height: 2.2em!important;
  font-size: 1.4em!important;
  padding-top: 1%!important;
  padding-bottom: 1%!important;
}

.tfc-playrao-add-new-row-btn {
  top:.15em!important;
  width: 12%!important;
  height: 2.1em!important;
  font-size: 1.4em!important;
  padding-top: 1%!important;
  padding-bottom: 1%!important;
}

.tfc-playrao-remove-new-row-btn {
  top:.15em!important;
  width:12%!important;
  height: 3em!important;
  font-size: 1em!important;
	font-weight:600!important;
  padding-top: 1.5%!important;
  padding-bottom: .8%!important;
  margin-left: 1.5%!important;
}

/* Styles to ensure box shadows are consistent with the rest of the fields */
.tfc-playrao-addrow-btn,
.tfc-playrao-add-new-row-btn,
.tfc-playrao-remove-new-row-btn {
    box-shadow: 0 2px 2px 0 rgba(153,153,153,0.1), 0 3px 1px -2px rgba(153,153,153,0.15), 0 1px 5px 0 rgba(153,153,153,0.1)!important;
    transition: box-shadow 0.3s ease;
}

.tfc-playrao-addrow-btn:hover,
.tfc-playrao-add-new-row-btn:hover,
.tfc-playrao-remove-new-row-btn:hover {
    box-shadow: 0 3px 4px 0 rgba(153,153,153,0.2), 0 4px 3px -2px rgba(153,153,153,0.3), 0 2px 6px 0 rgba(153,153,153,0.2)!important;
}