html {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

h1 {
    font-size: 1.7em;
}

pre, code {
    font-family: Consolas, 'Courier New', Courier, monospace;
    background-color: rgb(248, 249, 250);
    color: rgb(232, 62, 140);
    border-radius: 5px;
}

.io th {
    font-weight: normal;
    vertical-align: bottom;
    font-size: 0.8em;
}

th.indicator>div {
    transform: translate(0px, 0px) rotate(315deg);
    width: 22px;
    padding: 4px;
    padding-top: 5px;
    white-space: nowrap;
}

th.indicator {
    padding-left: 4px;
}

.indicator-group-parent {
    padding-left: 10px;
    margin-bottom: -10px;
    /* slide settitle holder down */
    min-width: 42px;
}

.indicator-group {
    min-width: 160px;
    /* length of line above set-titles */
    display: inline-block;
    text-align: left;
    padding: 4px;
    border-top: 1px solid #ccc;
    padding-top: 4px;
    padding-left: 20px;
    /* left of title under line */
    margin-left: 0px;
    /* slide angled set-titles up and to the right */
    margin-bottom: -4px;
}

a {
    text-decoration: none;
    color: #555;
    cursor: pointer;
}

/* 
.io input[type="text"], .io input[type="search"], .io select {
    height: 30px;
    font-size: 18px;
    border: 1px solid lightgray;
    border-radius: 5px;
    margin-right: 15px;
    padding: 0 5px 0 10px;
} */

/* .io label {
    line-height: 25px;
} */

.text-center {
    text-align: center;
}

/* USEEIO widget styles */

:root {
    --chart-color-1: #3366cc;
    --chart-color-2: #dc3912;
    --chart-color-3: #ff9900;
    --chart-color-4: #109618;
    --chart-color-5: #990099;
    --chart-color-6: #0099c6;
    --chart-color-7: #dd4477;
    --chart-color-8: #66aa00;
    --chart-color-9: #b82e2e;
    --chart-color-10: #316395;
    --chart-color-11: #994499;
    --chart-color-12: #22aa99;
    --chart-color-13: #aaaa11;
    --chart-color-14: #6633cc;
    --chart-color-15: #e67300;
    --chart-color-16: #8b0707;
    --chart-color-17: #651067;
    --chart-color-18: #329262;
    --chart-color-19: #5574a6;
    --chart-color-20: #3b3eac;
    --chart-color-21: #b77322;
    --chart-color-22: #16d620;
    --chart-color-23: #b91383;
    --chart-color-24: #f4359e;
    --chart-color-25: #9c5935;
    --chart-color-26: #a9c413;
    --chart-color-27: #2a778d;
    --chart-color-28: #668d1c;
    --chart-color-29: #bea413;
}

.useeio-sector-list {
    height: 500px;
    width: 100%;
    max-width: 750px;
    margin: auto;
    overflow-y: scroll;
    overflow-x: scroll;
    border: lightgray solid 1px;
    border-radius: 5px;
}

.useeio-sector-list .sector-item {
    height: 25px;
    border-radius: 5px;
    margin: 2px;
    word-wrap: unset;
    font-size: 0.8em;
    overflow: hidden;
}

.useeio-settings-widget {
    border: lightgray solid 1px;
    border-radius: 5px;
    padding: 15px;
}

.useeio-settings-widget .settings-row {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(12, 1fr);
    margin: 15px;
}

.useeio-settings-widget .settings-row label {
    grid-column: 1 / span 4;
}

.useeio-settings-widget .settings-row select {
    grid-column: 5 / span 8;
}

.useeio-filter-widget {
    border: lightgray solid 1px;
    border-radius: 5px;
    width: 100%;
    max-width: 750px;
    margin: auto;
    padding: 15px;
}

.useeio-filter-widget label {
    font-weight: bold;
}

.useeio-filter-widget .filter-value {
    padding-left: 10px;
    font-style: italic;
}

.useeio-impact-chart-indicator {
    font-size: 0.8em;
    overflow: hidden;
}

.matrix-title {
    font-family: "Helvetica Neue", Helvetica, "Lato", sans-serif;
    font-size: 34px;
    font-weight: 300;
    text-align: left;
    float: left;
}

.matrix-sub-title {
    clear: both;
    float: left;
    padding: 5px 0px 10px 0px;
}

.matrix-search {
    display: block;
    min-width: 400px;
    max-width: 400px;
    /* min-width: 98%; */
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
}


.sector-list .noborder {
    background-color: transparent;
}
.sector-list-table tbody td {
    position: relative;
  }
.sector-list-table_sorted-cell-top:after{
    top: -4px !important;
    border-top: 1px solid #333;
}
.sector-list-table_sorted-cell-bottom:after {
    bottom: -4px !important;
    border-bottom: 1px solid #333;
}
.sector-list-table_sorted-cell-side:after {
  content: "";
  position: absolute;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  left: -1px;
  bottom: 0px;
  top: -2px;
  width: 100%;
  z-index: 1;
}

.sector-list-table thead td:first-child {
    max-width: 400px;
}
.sector-list-table tbody td:first-child {
    width:100%;
    max-height: 30px;
    height: 30px;
    display: block;
    overflow: hidden;
    font-size: 12px;
}
.sector-list-table tbody td:first-child > div {
    overflow-x: scroll;
    height:44px;
    max-width: 400px;
}


.arrowdown {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #000;
    margin: 4px;
    float: right;
    pointer-events: auto;
}

.arrowright {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #000;
    margin: 4px;
    pointer-events: auto;
    /* prevent click-through */
    float: right;
    /* needed for size */
}

.arrownext {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #ccc;
    margin: 4px;
    pointer-events: auto;
    /* prevent click-through */
    float: left;
    /* needed for size */
}

.indicator-row {
    height: 170px;
}

.indicator-row a {
    cursor: pointer;
}

.indicator {
    font-size: 0.8em;
}

.sector-list-table {
    width: 100%;
    display:block;
}
.ioColumnInside .sector-list-table {
   overflow: auto; /* prevents overlap of right side */
}
.sector-list-body a {
    text-decoration: none;
    color: none;
}

.sector-list-body td {
    white-space: nowrap;
    padding: 4px;
    padding-left: 6px;
}

.indicator-value {
    font-size: .9em;
    text-align: right;
}

/*
table {
  border-spacing: 0px;
}
input[type="search" i] {
    padding-left: 0px;
}
*/
.indicator-row {
  height: auto;
}
.ioColumns {
  width:100%;
  overflow: hidden; /* Allows bottom padding to apply after float:left columns */
}
.ioColumn {
  width:33.33%;
  float:left;
  margin-bottom: 0px;
  font-size: 12px;
}
/*
.full .ioColumn {
  width:100%;
}
.two .ioColumn {
  width:50%;
}
*/
.ioColumnInside {
  position: relative;
  padding-left: 22px;
  margin-right:30px;
  border: 1px solid rgba(255,255,255,0);
}
.ioColumnTitle {
  font-size: 1.27em;
  line-height: 1.3em;
  margin-top: 20px;
  margin-bottom: 16px;
}
@media (max-width:1200px) {
  .ioColumn, .two .ioColumn {
    width:100%;
  }
  .ioColumnInside {
    margin-bottom:20px;
  }
}

.noborder {
    background-color: #fafafa;
    border-left: 8px solid #fff;
}

/* paginator styles */

.useeio-paginator a {
    cursor: pointer;
}

.useeio-paginator td {
    padding: 2px;
}

.useeio-paginator .paginator-counter {
    padding-right: 30px;
}

.useeio-paginator .paginator-previous {
    padding-right: 25px;
}

.useeio-paginator .paginator-next {
    padding-left: 25px;
}

.useeio-paginator .paginator-number {
    min-width: 25px;
    text-align: center;
}

.useeio-paginator .paginator-selected {
    font-weight: bold;
}

.useeio-matrix-selector {
    max-width: 800px;
    /* margin: auto; */
}

.download-section {
    margin: 15px 0px;
}

th.io-sector-column-header>div {
    transform: translate(0px, 0px) rotate(315deg);
    width: 22px;
    padding: 4px;
    padding-top: 5px;
    white-space: nowrap;
    font-weight: normal;
    font-size: 0.8em;
}

/* A primitive grid system; does not work in IE or Edge; just for testing */

.grid-4 {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(4, 1fr);
}

.grid-8 {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(8, 1fr);
}

.grid-12 {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(12, 1fr);
}

.col-1 {
    grid-column-start: 1;
}

.col-2 {
    grid-column-start: 2;
}

.col-3 {
    grid-column-start: 3;
}

.col-4 {
    grid-column-start: 4;
}

.col-5 {
    grid-column-start: 5;
}

.col-6 {
    grid-column-start: 6;
}

.col-7 {
    grid-column-start: 7;
}

.col-8 {
    grid-column-start: 8;
}

.col-9 {
    grid-column-start: 9;
}

.col-10 {
    grid-column-start: 10;
}

.col-11 {
    grid-column-start: 11;
}

.col-12 {
    grid-column-start: 12;
}

.span-1 {
    grid-column-end: span 1;
}

.span-2 {
    grid-column-end: span 2;
}

.span-3 {
    grid-column-end: span 3;
}

.span-4 {
    grid-column-end: span 4;
}

.span-5 {
    grid-column-end: span 5;
}

.span-6 {
    grid-column-end: span 6;
}

.span-7 {
    grid-column-end: span 7;
}

.span-8 {
    grid-column-end: span 8;
}

.span-9 {
    grid-column-end: span 9;
}

.span-10 {
    grid-column-end: span 10;
}

.span-11 {
    grid-column-end: span 11;
}

.span-12 {
    grid-column-end: span 12;
}