/* any custom changes should be made in the theme custom CSS. */

.dk-speakout-signaturelistWrapper{
    margin-left:10px;
}
.dk-speakout-signaturelist-header{
    font-weight:bold;
    margin-top:10px;
}
.dk-speakout-signaturelistWrapper table{
    margin: 1rem 0 !important;
}
.dk-speakout-signaturelistWrapper tr{
    white-space: nowrap
}
.dk-speakout-signaturelistWrapper table {
    table-layout: auto;
    width:100%;
}
.dk-speakout-signaturelist{
	 border-top: 1px solid #999;  /*uncomment if you would like a border at the top of each name*/
	clear: both;
	font-family: Helvetica, Arial, sans-serif;
	font-size: .9em;
	width: 100%; /* change this to e.g. 250px, for multiple columns */
    display: inline-table;
}
.dk-speakout-signaturelist-flag-icon{
    height:15px !important;
    float:left;
    margin: 5px 5px 0 0;
}
.dk-speakout-signaturelist caption {
	font-weight: bold;
	line-height: 2em;
	text-align: left;
}
.dk-speakout-signaturelist-name,
.dk-speakout-signaturelist-city,
.dk-speakout-signaturelist-state,
.dk-speakout-signaturelist-country {
	text-transform: capitalize;
}
.dk-speakout-signaturelist-id{
    color:grey;
    font-size:80%;

}
.dk-speakout-signaturelist-name {
	white-space: nowrap;
}
.dk-speakout-even {
	background: #eee;
}
.dk-speakout-odd {
	background: transparent;
}

.dk-speakout-signaturelist .dk-speakout-signaturelist-pagelinks  {
	border-bottom: none;
	padding: 8px 0 0 0;
	text-align: right;
}
a.dk-speakout-signaturelist-first, a.dk-speakout-signaturelist-prev, a.dk-speakout-signaturelist-next,a.dk-speakout-signaturelist-last {
    background: #dedede url(../images/bg-pagination-button.png) repeat-x top left;
	border-radius: 4px;
	border: 1px solid #ccc;
	box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.1 );
	color: #777;
	cursor: pointer;
	display: inline-block;
	font-size: 12px;
	font-weight: bold;
	line-height: 22px;
	margin-bottom: 5px;
	margin-left: 2px;
	padding: 0 10px;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.7 );
}
a.dk-speakout-signaturelist-first:hover, a.dk-speakout-signaturelist-prev:hover, a.dk-speakout-signaturelist-next:hover, a.dk-speakout-signaturelist-last:hover {
	color: #444;
}
a.dk-speakout-signaturelist-first:active, a.dk-speakout-signaturelist-prev:active,
a.dk-speakout-signaturelist-next:active, a.dk-speakout-signaturelist-last:active {
	box-shadow: none;
	position: relative;
	top: 1px;
}
a.dk-speakout-signaturelist-prev:hover {
	text-decoration: none;
}
.dk-speakout-signaturelist-disabled {
	cursor: default !important;
	opacity: 0.3;
}
.dk-speakout-signaturelistWrapper #search-button {
    width: 20px;
    height: 20px;
    position: relative;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
}
.dk-speakout-signaturelistWrapper #search-button svg {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

/*
 * HEROJI internal signature list refresh
 */
:root,
.dk-speakout-signaturelistWrapper {
  --heroji-font: var(--heroji-site-font, var(--e-global-typography-primary-font-family, "Montserrat", Arial, sans-serif));
  --heroji-red: var(--heroji-site-primary, var(--e-global-color-primary, var(--wp--preset--color--primary, #EA302B)));
  --heroji-red-dark: var(--heroji-site-primary-hover, #E50101);
  --heroji-blue: var(--heroji-site-secondary, var(--e-global-color-secondary, var(--wp--preset--color--secondary, #0A62B0)));
  --heroji-ink: var(--heroji-site-heading, var(--e-global-color-accent, var(--wp--preset--color--contrast, #2A2A2A)));
  --heroji-muted: var(--heroji-site-text, var(--e-global-color-text, var(--wp--preset--color--secondary, #626262)));
  --heroji-line: var(--heroji-site-border, var(--wp--preset--color--border, #DADADA));
  --heroji-soft: var(--heroji-site-muted-bg, var(--wp--preset--color--tertiary, var(--wp--preset--color--base-2, #F6F6F6)));
  --heroji-surface: var(--heroji-site-surface, var(--wp--preset--color--base, #fff));
  --heroji-on-primary: var(--heroji-site-on-primary, var(--wp--preset--color--base, #fff));
  --heroji-focus-ring: rgba(10, 98, 176, 0.2);
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  :root,
  .dk-speakout-signaturelistWrapper {
    --heroji-red-dark: var(--heroji-site-primary-hover, #E50101);
    --heroji-muted: var(--heroji-site-text, var(--e-global-color-text, #626262));
    --heroji-line: var(--heroji-site-border, color-mix(in srgb, var(--heroji-ink) 18%, var(--heroji-surface)));
    --heroji-soft: var(--heroji-site-muted-bg, color-mix(in srgb, var(--heroji-surface) 96%, var(--heroji-red)));
    --heroji-focus-ring: color-mix(in srgb, var(--heroji-blue) 22%, transparent);
  }
}

.dk-speakout-signaturelistWrapper {
  box-sizing: border-box;
  font-family: Montserrat, Arial, sans-serif;
  margin: 24px 0;
  max-width: 100%;
  overflow-x: auto;
}

.dk-speakout-signaturelist-header {
  border-left: 5px solid var(--heroji-red);
  color: var(--heroji-ink);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 16px;
  padding-left: 14px;
}

.dk-speakout-signaturelistWrapper table,
.dk-speakout-signaturelist {
  border: 1px solid var(--heroji-line) !important;
  border-collapse: collapse;
  display: table;
  font-family: Montserrat, Arial, sans-serif !important;
  table-layout: auto;
  width: 100%;
}

.dk-speakout-signaturelist *,
.dk-speakout-signaturelistWrapper * {
  box-sizing: border-box;
}

.dk-speakout-signaturelist td {
  border-top: 1px solid var(--heroji-line);
  color: var(--heroji-muted);
  font-size: 14px;
  line-height: 1.35;
  padding: 13px 14px;
  vertical-align: top;
  white-space: normal;
}

.dk-speakout-signaturelist-count {
  color: var(--heroji-red) !important;
  font-weight: 800;
  width: 1%;
}

.dk-speakout-signaturelist-name {
  color: var(--heroji-ink) !important;
  font-weight: 800;
  white-space: normal !important;
}

.dk-speakout-signaturelist-city {
  color: var(--heroji-muted) !important;
  font-weight: 700;
}

.dk-speakout-even {
  background: var(--heroji-soft) !important;
}

.dk-speakout-odd {
  background: var(--heroji-surface) !important;
}

.dk-speakout-signaturelist-flag-icon {
  height: 16px !important;
  margin: 1px 6px 0 0;
}

.dk-speakout-signaturelist .dk-speakout-signaturelist-pagelinks {
  text-align: right;
}

a.dk-speakout-signaturelist-first,
a.dk-speakout-signaturelist-prev,
a.dk-speakout-signaturelist-next,
a.dk-speakout-signaturelist-last {
  background: var(--heroji-ink) !important;
  border: 2px solid var(--heroji-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--heroji-on-primary) !important;
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 800;
  line-height: 34px;
  min-width: 38px;
  padding: 0 12px;
  text-align: center;
  text-shadow: none !important;
}

a.dk-speakout-signaturelist-first:hover,
a.dk-speakout-signaturelist-prev:hover,
a.dk-speakout-signaturelist-next:hover,
a.dk-speakout-signaturelist-last:hover,
a.dk-speakout-signaturelist-first:focus,
a.dk-speakout-signaturelist-prev:focus,
a.dk-speakout-signaturelist-next:focus,
a.dk-speakout-signaturelist-last:focus {
  background: var(--heroji-red) !important;
  border-color: var(--heroji-red) !important;
  color: var(--heroji-on-primary) !important;
  outline: 2px solid transparent;
}

@media (max-width: 700px) {
  .dk-speakout-signaturelistWrapper table,
  .dk-speakout-signaturelist,
  .dk-speakout-signaturelist tbody,
  .dk-speakout-signaturelist tr,
  .dk-speakout-signaturelist td {
    display: block;
    width: 100%;
  }

  .dk-speakout-signaturelist tr {
    border-top: 1px solid var(--heroji-line);
    padding: 12px 14px;
  }

  .dk-speakout-signaturelist td {
    border: 0;
    padding: 4px 0;
  }

  .dk-speakout-signaturelist td::before {
    color: var(--heroji-ink);
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 2px;
  }

  .dk-speakout-signaturelist-count {
    width: auto;
  }

  .dk-speakout-signaturelist .dk-speakout-signaturelist-pagelinks td {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  a.dk-speakout-signaturelist-first,
  a.dk-speakout-signaturelist-prev,
  a.dk-speakout-signaturelist-next,
  a.dk-speakout-signaturelist-last {
    margin: 0;
  }
}

/*
 * Budi Heroj site alignment
 */
.dk-speakout-signaturelistWrapper,
.dk-speakout-signaturelistWrapper table,
.dk-speakout-signaturelist,
.dk-speakout-signaturelist td,
a.dk-speakout-signaturelist-first,
a.dk-speakout-signaturelist-prev,
a.dk-speakout-signaturelist-next,
a.dk-speakout-signaturelist-last {
  font-family: var(--heroji-font) !important;
  letter-spacing: 0;
}

.dk-speakout-signaturelistWrapper table,
.dk-speakout-signaturelist,
.dk-speakout-signaturelist tr,
a.dk-speakout-signaturelist-first,
a.dk-speakout-signaturelist-prev,
a.dk-speakout-signaturelist-next,
a.dk-speakout-signaturelist-last {
  border-radius: 0 !important;
}