/* For Searching Bar */
.search {
    display: flex;
}
.search input {
    box-sizing: border-box;
    display: block;
    width: 650px;
    font-size: 0.9rem;
    padding: 0.5rem;
    border-radius: 2px;
    border: 2px solid var(--asu-red);
}
.search input:focus {
    outline: thick double var(--asu-red);
}

/* For Filter Bar on Top */
.filter{
    padding: 1rem 0;
    display: flex;
    flex-wrap: wrap;
}

/* For Each Filters */
.chip{
    color:  white;
    border-radius: 1rem;
    background: lightgray;
    padding: .2rem 0.5rem;
    margin: .2rem;
    cursor: pointer;
    transition: all 0.2s;
}
.chip:hover{
    color: var(--asu-red);
}
.chip.selected{
    background: var(--asu-red);
}


/* For Paper Section */
.pub{
    display: flex;
    width:100%;
    margin: 2rem 0; 
}

.pub-group{
    animation: slide-down .2s ease-out;
}

.pub-group .title{
    margin: 0.5rem 0 0.2rem 0;
}

.pub-teaser{
    width:20%;
    height:7.5rem;
    background-size:cover;
    background-position:top left;
    transition:all 2s;
}
.pub-teaser:hover{
    background-position:bottom right;
}

.pub-detail{
    width:80%;
    margin-left:10px;
}
.pub-materials{
    display: flex;
    flex-wrap: wrap;
    margin-top:0.5rem;
}
.pub-materials .item{
    font-size: 0.9rem;
}
.pub-materials .item:not(:last-child){
    margin-right: 0.5rem;
}

.pub a {
  color: gray;
  border-bottom: 2px solid var(--asu-red); 
  text-decoration: none;
  cursor: pointer;
}

.pub a:hover {
  background-position:0 calc(100% - 1.5px);
  border-bottom:unset;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%238C1D40' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: auto 4px;
  border-bottom: 0;
  padding-bottom: .25em;
  text-decoration: none;
  cursor: pointer;
}

/* For switching slider */

.switch-container{
  display: flex;
  padding-right: 30px;
  align-items: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

.label{
  margin-left: 5px;
  height: 28px;
  line-height: 28px;
}
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--asu-red);
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 28px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

.checkbox:checked + .slider {
  background-color: var(--asu-yellow);
}

.checkbox:focus + .slider {
  box-shadow: 0 0 1px var(--asu-red);
}

.checkbox:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}


/* For title before each category */
.title{
  width :100%;
  margin:0;
  font-weight: 100;
  position: relative;
  display: table;
  padding:0 5px;
  
}
.title::after {
  content: '';
  background-color: var(--asu-yellow);
  height: 20%;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: -1;
}

.title2{
  width :100%;
  margin:0;
  font-weight: 100;
  position: relative;
  display: table;
  padding:0 5px;
  
}
.title2::after {
  content: '';
  background-color: var(--asu-red);
  height: 20%;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: -1;
}

/* For bibtext content */
.bibContent{
    background-color: rgb(52, 53, 65);
    margin-top: 6px;
    padding-bottom: 1px;
    color: white;
    display: none;
}

.bibContent pre{
    text-wrap: wrap;
    padding-left: 10px;
}

.copybib{
    width: 100%;
    background-color: rgb(217, 217, 227);
    display: flex;
    justify-content: flex-end;
}

button[class=copy-button] {
  position: relative;
  border: none;
  background-color: transparent;
  padding-top: 5px;
  padding-bottom: 5px;
  cursor: pointer;
}


/**/