html {
  overflow-x: hidden;
}

html, body {
  height: 100%;
}

#ermsFontAwesome {
  font-size: 18px;
  margin-top: 4px;
  color: gray;
}

#backToTop {
  display: none;
  position: fixed;
  bottom: 50%;
  right: 0;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #8660ab;
  color: #FFFFFF;
  cursor: pointer;
  padding: 5px;
  height: 45px;
  width: 45px;
  border-radius: 15px 0px 0px 15px;
}

#backToTop:hover {
  background-color: #48206E;
  color: #FFFFFF;
}

.close-btn {
  position: relative;
  margin-left: 100px;
  transform: scale(.8);
}

#minimizeBtn, #maximizeBtn {
  position: absolute;
  right: 1px;
  z-index: 100;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  z-index: 1;
}



.announcement-btn-small {
  position: relative;
  right: 0;
  left: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 90px;
  margin-right: auto;
  border-radius: 999px;
}

.btn-announcements {
  width: 280px;
  align-items: center;
  transition: width 0.3s ease, height 0.3s ease !important;
  background-color: #FFD33F;
}

.btn-announcements,
.btn-askalibrarian {
    transition: width 0.3s ease;
}

#sideButtonLabel {
  transition: opacity 0.3s ease, width 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
}

#askLibrarianLabel {
    transition: opacity 0.3s ease, width 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
}

.announcement-btn-small {
    width: 65px !important;
}

.askalibrarian-btn-small {
    width: 65px !important;
}

.announcement-btn-small #sideButtonLabel,
.announcement-btn-small #askLibrarianLabel {
    opacity: 0;
    width: 0;
}

.btn-askalibrarian {
  display: flex;
  align-items: center;
  background-color: #92C770;
  /* margin: 0px; */
}

#minimizeBtn:hover {
  color: rgb(147, 143, 143);
}

#headerCycle {
    opacity: 0;
    transition: opacity 2s;
}

.hanging-indent {
  padding: 10px 100px 10px 75px;
  text-indent: -50px;
}

.flex-0 {
  flex: 0!important;
}

.searchThrough .eresourceSearchItem {
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  -o-column-break-inside: avoid;
  -ms-column-break-inside: avoid;
  column-break-inside: avoid;
  page-break-inside: avoid;
}

.img-1 {
  width: 100px;
}

.img-2 {
  width: 200px;
}

.img-3 {
  width: 300px;
}

.col-overflow-2 {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  column-fill: auto;
}
.col-overflow-3 {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  column-fill: auto;
}
.col-overflow-4 {
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  column-fill: auto;
}

.col-overflow-2 > col {
  width: 50%;
}
.col-overflow-3 > col {
  width: 33%;
}
.col-overflow-4 > col {
  width: 25%;
}

@media only screen and (min-width: 0px) { /* xs */
  .w-xs-0 {
    width: 0%!important;
  }
  .w-xs-25 {
    width: 25%!important;
  }
  .w-xs-50 {
    width: 50%!important;
  }
  .w-xs-75 {
    width: 75%!important;
  }
  .w-xs-100 {
    width: 100%!important;
  }

  .col-overflow-xs-2 {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    column-fill: auto;
  }
  .col-overflow-xs-3 {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    column-fill: auto;
  }
  .col-overflow-xs-4 {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    column-fill: auto;
  }

  .col-overflow-xs-2 > col {
    width: 50%;
  }
  .col-overflow-xs-3 > col {
    width: 33%;
  }
  .col-overflow-xs-4 > col {
    width: 25%;
  }
}

@media only screen and (min-width: 576px) { /* sm */
  .w-sm-0 {
    width: 0%!important;
  }
  .w-sm-25 {
    width: 25%!important;
  }
  .w-sm-50 {
    width: 50%!important;
  }
  .w-sm-75 {
    width: 75%!important;
  }
  .w-sm-100 {
    width: 100%!important;
  }

  .col-overflow-sm-2 {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    column-fill: auto;
  }
  .col-overflow-sm-3 {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    column-fill: auto;
  }
  .col-overflow-sm-4 {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    column-fill: auto;
  }

  .col-overflow-sm-2 > col {
    width: 50%;
  }
  .col-overflow-sm-3 > col {
    width: 33%;
  }
  .col-overflow-sm-4 > col {
    width: 25%;
  }
}

@media only screen and (min-width: 768px) { /* md */
  .w-md-0 {
    width: 0%!important;
  }
  .w-md-25 {
    width: 25%!important;
  }
  .w-md-50 {
    width: 50%!important;
  }
  .w-md-75 {
    width: 75%!important;
  }
  .w-md-100 {
    width: 100%!important;
  }

  .col-overflow-md-2 {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    column-fill: auto;
  }
  .col-overflow-md-3 {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    column-fill: auto;
  }
  .col-overflow-md-4 {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    column-fill: auto;
  }

  .col-overflow-md-2 > col {
    width: 50%;
  }
  .col-overflow-md-3 > col {
    width: 33%;
  }
  .col-overflow-md-4 > col {
    width: 25%;
  }
}

@media only screen and (min-width: 992px) { /* lg */
  .w-lg-0 {
    width: 0%!important;
  }
  .w-lg-25 {
    width: 25%!important;
  }
  .w-lg-50 {
    width: 50%!important;
  }
  .w-lg-75 {
    width: 75%!important;
  }
  .w-lg-100 {
    width: 100%!important;
  }

  .col-overflow-lg-2 {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    column-fill: auto;
  }
  .col-overflow-lg-3 {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    column-fill: auto;
  }
  .col-overflow-lg-4 {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    column-fill: auto;
  }

  .col-overflow-lg-2 > col {
    width: 50%;
  }
  .col-overflow-lg-3 > col {
    width: 33%;
  }
  .col-overflow-lg-4 > col {
    width: 25%;
  }
}

@media only screen and (min-width: 1200px) { /* xl */
  .w-xl-0 {
    width: 0%!important;
  }
  .w-xl-25 {
    width: 25%!important;
  }
  .w-xl-50 {
    width: 50%!important;
  }
  .w-xl-75 {
    width: 75%!important;
  }
  .w-xl-100 {
    width: 100%!important;
  }

  .col-overflow-xl-2 {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    column-fill: auto;
  }
  .col-overflow-xl-3 {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    column-fill: auto;
  }
  .col-overflow-xl-4 {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    column-fill: auto;
  }

  .col-overflow-xl-2 > col {
    width: 50%;
  }
  .col-overflow-xl-3 > col {
    width: 33%;
  }
  .col-overflow-xl-4 > col {
    width: 25%;
  }
}

@media only screen and (min-width: 1400px) { /* xxl */
  .w-xxl-0 {
    width: 0%!important;
  }
  .w-xxl-25 {
    width: 25%!important;
  }
  .w-xxl-50 {
    width: 50%!important;
  }
  .w-xxl-75 {
    width: 75%!important;
  }
  .w-xxl-100 {
    width: 100%!important;
  }

  .col-overflow-xxl-2 {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    column-fill: auto;
  }
  .col-overflow-xxl-3 {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    column-fill: auto;
  }
  .col-overflow-xxl-4 {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    column-fill: auto;
  }

  .col-overflow-xxl-2 > col {
    width: 50%;
  }
  .col-overflow-xxl-3 > col {
    width: 33%;
  }
  .col-overflow-xxl-4 > col {
    width: 25%;
  }
}

.custom-container {
  position: relative;
  float: none;
  top: 50%;
  left: 50%;
  text-align: center;
}

.cta {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 2px solid var(--button-color, black);
  background-color: var(--button-color, black);
  color: #000000;
  transition: width 0.5s;
  transform: translateX(-50%);
  text-align: center;
  line-height: 40px;
  overflow: hidden;
}
.cta:hover , .cta.hover{
  width: 200px;
  transition: width 0.5s;
}

.cta i {
  opacity: 1;
  transition: opacity 0.5s
}

.cta:hover i , .cta.hover i{
  opacity: 0;
  transition: opacity 0.5s
}

.cta .button-text {
  opacity: 0;
  transition: opacity 0.3s;
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  font-size: 1.4em;
  text-align: center;
}

.cta.hover .button-text, .cta:hover .button-text {
  opacity: 1;
  transition: opacity 1s;
}

/* Disable animation on mobile devices */
@media (max-width: 768px) {
  .cta {
    width: 50px;
    transition: none;
  }

  .cta:hover, .cta.hover {
    width: 50px;
    transition: none;
  }

  .cta i {
    opacity: 1;
    transition: none;
  }

  .cta:hover i, .cta.hover i {
    opacity: 1;
    transition: none;
  }

  .cta .button-text {
    opacity: 0;
    transition: none;
  }

  .cta.hover .button-text, .cta:hover .button-text {
    opacity: 0;
    transition: none;
  }
}