/* Buttons */
.button {
  font-size: 1.2rem;
  line-height: 1.2rem;
  cursor:pointer;
  padding: 4px 12px;
}

.button i { line-height: 1.2rem; }

.bigButton {
  width:100%;
  display:inline-block;
  font-size: 1.5rem;
  padding: 5px 10px;
  margin:10px 0px 0px;
}

.pill {
  display: inline-block;
  border-radius: 999px;
  border-style: solid;
  border-width: 2.5px;
  border-color: #888;
  font-weight: 550;
  color:#888;
  background:rgba(0, 0, 0, 0.0);
}

.pill:hover {
  color: #fff;
  background: #888;
}

.invertPillPurple{
  display: inline-block;
  border-radius: 999px;
  border-style: solid;
  border-width: 2.5px;
  border-color: #48206E;
  font-weight: 550;
  color: #fff;
  background: #48206E;
}

.invertPillPurple:hover {
  color: #48206E;
  background: #fff;
}

.pillPurple{
  display: inline-block;
  border-radius: 999px;
  border-style: solid;
  border-width: 2.5px;
  border-color: #48206E;
  font-weight: 550;
  color:#48206E;
  background:rgba(0, 0, 0, 0.0);
}

.pillPurple:hover {
  color: #fff;
  background: #48206E;
}

.invertPillPurple{
  display: inline-block;
  border-radius: 999px;
  border-style: solid;
  border-width: 2.5px;
  border-color: #48206E
  font-weight: 550;
  color: #fff;
  background: #48206E;
}

.invertPillPurple:hover {
  color: #48206E;
  background: #fff;
}


/* Filters */
.filter {
  font-size: 12px;
  cursor:pointer;
  background-color: #48206E;
  padding: 4px;
  display: inline-block;
  margin-top: 2px; /*incase tags go in next line, will space */
  color:#fff;
  border-radius: 3px;
  margin: 3px;
}

.filterSelected {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-self: center;
  align-content: center;
  text-align: center;
  margin 0 auto;
  width:70%;
}

form { margin:0px; }

.form-input{
  width:100%;
  height:1.8rem;
}

.input-group, select {
    margin: 0;
    padding: 0;
}

.tag {
  font-size: 0.9rem;
  line-height: 0.9rem;
  cursor:pointer;
  padding: 4px 8px;
  margin: 5px 0px 0px 0px;
}

#filterSections {
  font-size: 16px;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #ccc;
}

#filterBoxSection {
    display: flex;
    justify-content: center;
    align-items: center;
}

#filterBoxSection select {
    width: 100%;
    margin: 0;
    padding: 0.375rem;
    border: 1px solid #ced4da;
}

.noMatches {
  align-content: center;
  text-align: center;
  vertical-align: center;
  margin: 0 auto;
  font-weight: bold;
  background-color: #FFE2E2;
  color: red;
  border-color: red;
  border-style: solid;
  border-width: 2px;
  width:20vw;
  min-width:200px;
}

.row .diecut{ padding: 0.2rem 0.4rem;}
.row .hidden{ display: none; }
.hideElement {display: none; }
.showElement {display: block; }


table {
  border: none;
  border-collapse: collapse;
  table-layout: fixed;
  cursor: pointer;
}

table td {
  border-left: 1px solid #dee2e6;
  border-bottom: 1px solid #383838;
  vertical-align: middle;
}

tr { background-color: #f8f8f8; }


table td:first-child { border-left: none; }

.expanded-details {
    padding: 20px;
    background-color: #f2f2f2;
}

.fa-chevron-right {
  color: #818181;
  cursor: pointer;
  font-size: 9pt;
}

.fa-chevron-down {
  color: #818181;
  cursor: pointer;
  font-size: 9pt;
}

.sort-icon { cursor: pointer; }


/* Misc */
a.tab-link        {color:#eca500;}
a.tab-link:hover  {color: #b98100;}

.inline{
  display: inline-block;
  vertical-align: bottom;
}

.titleLimit { /* collapsible titles */
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 1;
         line-clamp: 1;
 -webkit-box-orient: vertical;
 transition: 0.3s;
 margin-bottom: 1px; !important
}
.titleLimit:hover { /* expand title on hover */
  overflow: show;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 8;
          line-clamp: 8;
  -webkit-box-orient: vertical;
  transition: 0.3s;
}

#tagResultSeparator {margin-top: 10px;}

#x {
  position: relative;
  float: right;
  background: red;
  color: white;
  top: -10px;
  right: -10px;
  border-radius: 50%;
}
#x i{
  padding-top: 25%;
  padding-bottom: 25%;
}