/* START - MI badge */
/* =========== Budget Transparency Information ============= */
/* mi badge css*/
#view-header {
  position: relative;
}

#badgeLiner {
  position: absolute;
  right: 0;
  top: 100%;
  padding-right: 16px;
  --aspect-ratio: 1/1.1;
  --button-small-width: 70px;
}

#app.fixed-position #badgeLiner {
  position: fixed;
  top: 0;
}

#app .sticky #badgeLiner {
  top: 100%;
  position: absolute;
}

#badgeLiner .minimize_logos {
  padding: 10px;
  margin-right: -4px;
  background: #555;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}

#badgeLiner .minimize_logos:hover {
  padding-right: 20px;
  background: #333;
}

.small-badge #badgeLiner .minimize_logos {
  padding: 4px 6px 4px 3px;
  margin-right: -2px;
}

.small-badge #badgeLiner .minimize_logos:hover {
  padding-right: 15px;
}

#badgeLiner .minimize_logos::after {
  width: 18px;
  height: 18px;
  content: "";
  background-color: #fff;
  transition: all 0.3s ease-in-out;
  mask-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 443.52 443.52' style='enable-background:new 0 0 443.52 443.52;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M336.226,209.591l-204.8-204.8c-6.78-6.548-17.584-6.36-24.132,0.42c-6.388,6.614-6.388,17.099,0,23.712l192.734,192.734L107.294,414.391c-6.663,6.664-6.663,17.468,0,24.132c6.665,6.663,17.468,6.663,24.132,0l204.8-204.8C342.889,227.058,342.889,216.255,336.226,209.591z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
  mask-repeat: no-repeat no-repeat;
  mask-position: center center;
  mask-size: contain;
  display: block;
}

.small-badge #badgeLiner .minimize_logos::after {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

#badgeLiner,
#custom-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

#badgeLiner .button-link {
  margin: 0 4px;
  text-decoration: none;
  display: block;
}

#badgeLiner .button-link .hide-trans,
#badgeLiner .hide-text {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  display: block;
}

#badgeLiner .button-link .button {
  border-bottom-right-radius: 95px;
  border-bottom-left-radius: 95px;
  width: clamp(6.25rem, 2.232rem + 7.143vw, 9.375rem); /*  150>100, 1600>900 */
  /*width: 5.208vw;*/
  aspect-ratio: var(--aspect-ratio);
  padding: 0;
  overflow: hidden;
  display: block;
  background: var(--button-bg-color, #fff);
  color: var(--button-text-color, #000);
  -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  transition: all 0.3s ease-in-out;
}

.small-badge #badgeLiner .button-link .button {
  width: var(--button-small-width);
  opacity: 0.9;
}

.small-badge #badgeLiner .button-link {
  margin: 0 2px;
}

#badgeLiner .button-link .button:hover,
#badgeLiner .button-link:focus .button {
  padding-top: 15px;
  transition: all 0.3s ease-in-out;
}

.small-badge #badgeLiner .button-link .button:hover,
.small-badge #badgeLiner .button-link:focus .button {
  opacity: 1;
  width: calc(var(--button-small-width) * 2);
  aspect-ratio: 1/1;
}
#badgeLiner .button .button-text {
  margin-block: 10px;
  font-size: clamp(1.063rem, 0.821rem + 0.429vw, 1.25rem);
  color: currentColor;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  padding-inline: 10px;
  box-sizing: border-box;
  display: block;
}
#badgeLiner .button-link .button:not(:has(img)) .button-text {
  margin-bottom: 30px;
}
.small-badge
  #badgeLiner
  .button-link:not(:hover)
  .button:has(img)
  .button-text {
  display: none;
}
.small-badge #badgeLiner .button-link .button:has(:not(img)) .button-text {
  font-size: 16px;
  padding-inline: 13px;
}
.small-badge #badgeLiner .button-link .button:has(:not(img)) .button-text {
  font-size: 10px;
  padding-inline: 2px;
  margin-bottom: 20px;
}
.small-badge #badgeLiner .button-link:hover .button .button-text {
  font-size: 16px;
  padding-inline: 15px;
}

#badgeLiner .button-link img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
#badgeLiner .button-link:not(.transparencyReporting):not(.miSchoolData) img {
  margin-bottom: 14px;
}
.small-badge
  #badgeLiner
  .button-link:not(.transparencyReporting):not(.miSchoolData)
  .button-link:not(:hover)
  img {
  margin-bottom: 7px;
}
#badgeLiner
  .button-link:has(.button-text):has(.button-text:not(.hide-trans))
  img {
  max-width: 75%;
  max-height: 64%;
}
.small-badge
  #badgeLiner
  .button-link:has(.button-text):has(.button-text:not(.hide-trans))
  img {
  max-width: 95%;
  max-height: 95%;
}
#m5 + #badgeLiner {
  right: 25px;
}
#view-header:has(.h5) {
  --bottom-bar-height: 75px;
}
.h5:has(.header-container):has(.bottom-bar) + #badgeLiner {
  top: calc(100% + var(--bottom-bar-height));
}
@media only screen and (min-width: 960px) {
  #view-header:has(.h5) {
    --bottom-bar-height: 81px;
  }
}
@media screen and (max-width: 960px) {
  .small-badge
    #badgeLiner
    #custom-buttons:has(.transparencyReporting, .miSchoolData) {
    align-items: center;
  }
  .small-badge
    #badgeLiner
    #custom-buttons:has(.transparencyReporting, .miSchoolData)::before {
    content: "Michigan State Links";
    display: block;
    margin-right: 10px;
    font-size: 13px;
    line-height: 1.1;
    text-transform: uppercase;
    color: #333;
    font-weight: 700;
  }

  .small-badge #badgeLiner {
    position: relative;
    top: 0;
    background: #f1f1f1;
    padding: 2px 5px;
    -webkit-box-shadow: 0px 0px 7px 0px rgb(0 0 0 / 40%);
    box-shadow: 0px 0px 7px 0px rgb(0 0 0 / 40%);
  }

  .fixed-position #badgeLiner {
    width: 100%;
  }

  .small-badge #badgeLiner .button-link .button {
    height: auto;
    padding: 0 4px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    -webkit-box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 0%);
    box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 0%);
    width: auto;
    aspect-ratio: unset;
  }
  .small-badge #badgeLiner .button-link .button:hover,
  .small-badge #badgeLiner .button-link:focus .button {
    width: auto;
    height: auto;
    aspect-ratio: unset;
  }
  #badgeLiner .button .button-text {
    font-size: 10px;
  }
  .small-badge #badgeLiner .button-link .button:has(:not(img)) .button-text {
    margin-bottom: 5px;
    margin-top: 4px;
  }
  .small-badge #badgeLiner .button-link:hover .button .button-text {
    font-size: 13px;
  }

  .small-badge #badgeLiner .button img {
    width: auto;
    height: 50px;
    margin-bottom: 0 !important;
  }

  .small-badge #badgeLiner {
    align-items: center;
    padding-right: 5px;
  }

  .small-badge #badgeLiner .minimize_logos {
    margin-right: 10px;
    margin-left: 10px;
  }

  #badgeLiner .minimize_logos::after {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
  }

  .small-badge #badgeLiner .minimize_logos::after {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }
  #custom-buttons {
    align-items: stretch;
  }
  #badgeLiner .button-link {
    min-height: 100%;
    margin-inline: 2px;
  }
  #badgeLiner.buttons-numbers-2 .button-link {
    max-width: calc(49vw - 20px);
  }
  #badgeLiner.buttons-numbers-3 .button-link {
    max-width: calc(32vw - 20px);
  }
  #badgeLiner.buttons-numbers-4 .button-link {
    max-width: calc(24vw - 15px);
  }
  #badgeLiner .button-link .button {
    max-width: 100%;
    aspect-ratio: unset;
    height: 100%;
  }
  #badgeLiner .minimize_logos {
    padding: 4px;
    margin-right: -2px;
  }
  #badgeLiner {
    padding-right: 8px;
  }
}
@media screen and (max-width: 600px) {
  .small-badge
    #badgeLiner
    #custom-buttons:has(.transparencyReporting, .miSchoolData)::before {
    display: none;
  }
}

/* END - MI badge */