/*
	This CSS file matches the color scheme from MudBlazor to Bootstrap when utilized for authentication.
	The file remains available at all times for demonstration purposes,
	but it is exclusively employed in the 'App.razor' component when authentication is enabled.
*/
@import url("https://fonts.googleapis.com/css2?family=Cookie&display=swap");
.btn-primary {
  text-transform: uppercase;
  --bs-btn-bg: var(--mud-palette-primary) !important;
  --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
  --bs-nav-link-color: var(--mud-palette-primary) !important;
  --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}

.culture-selector {
  min-width: 100px;
}
.culture-selector .mud-select {
  margin: 0;
}
.culture-selector .mud-typography-body2 {
  font-size: 12px;
}
.culture-selector .mud-input {
  font-size: 12px;
  margin: 0 !important;
  color: var(--mud-palette-appbar-text);
}

.page {
  position: relative;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.navbar-brand {
  font-size: 1.1rem;
  color: white;
}

.top-row {
  justify-content: center;
  display: flex;
  align-items: center;
  background: var(--mud-palette-appbar-background);
}

.top-row ::deep a,
.top-row ::deep .btn-link {
  white-space: nowrap;
  margin-left: 1.5rem;
  text-decoration: none;
}

.top-row ::deep a:hover,
.top-row ::deep .btn-link:hover {
  text-decoration: underline;
}

.top-row ::deep a:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640.98px) {
  .top-row {
    justify-content: space-between;
  }
  .top-row ::deep a,
.top-row ::deep .btn-link {
    margin-left: 0;
  }
}
@media (min-width: 641px) {
  .page {
    flex-direction: row;
  }
  .sidebar {
    width: 250px;
    height: 100vh;
    position: sticky;
    top: 0;
  }
  .top-row {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .top-row.auth ::deep a:first-child {
    flex: 1;
    text-align: right;
    width: 0;
  }
}
.navbar-toggler {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  width: 3.5rem;
  height: 2.5rem;
  color: white;
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked {
  background-color: rgba(255, 255, 255, 0.5);
}

.nav-scrollable {
  display: none;
}

.navbar-toggler:checked ~ .nav-scrollable {
  display: block;
}

@media (min-width: 641px) {
  .navbar-toggler {
    display: none;
  }
  .nav-scrollable {
    /* Never collapse the sidebar for wide screens */
    display: block;
    /* Allow sidebar to scroll for tall menus */
    height: calc(100vh - 3.5rem);
    overflow-y: auto;
  }
}
.mud-toolbar-appbar .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
  background-color: #cdc9f5;
}

.mud-collapse-entered {
  height: auto;
}

.cookie-regular {
  font-family: "Cookie", cursive;
  font-weight: 400;
  font-style: normal;
}

.mud-typography-h6.cookie-regular {
  font-size: 2rem;
}

a {
  -webkit-text-decoration: underline 0.15em rgba(0, 0, 0, 0) !important;
          text-decoration: underline 0.15em rgba(0, 0, 0, 0) !important;
  transition: -webkit-text-decoration-color 300ms;
  transition: text-decoration-color 300ms;
  transition: text-decoration-color 300ms, -webkit-text-decoration-color 300ms;
}

a:hover {
  -webkit-text-decoration-color: var(--bs-link-hover-color-rgb) !important;
          text-decoration-color: var(--bs-link-hover-color-rgb) !important;
}

.search-list-term-popover {
  z-index: calc(var(--mud-zindex-appbar) + 4) !important;
  max-width: -moz-max-content !important;
  max-width: max-content !important;
}

.mud-icon-size-medium {
  line-height: 1.5rem;
  vertical-align: middle;
}
.mud-icon-size-medium[class^=icon-cn-]:before, .mud-icon-size-medium[class*=" icon-cn-"]:before {
  width: inherit;
  height: inherit;
  margin: 0;
}

.mud-icon-size-small {
  line-height: 1.25rem;
  vertical-align: middle;
}
.mud-icon-size-small[class^=icon-cn-]:before, .mud-icon-size-small[class*=" icon-cn-"]:before {
  width: inherit;
  height: inherit;
  margin: 0;
}

.mud-drawer .top-right-menu {
  flex-direction: column-reverse !important;
}

@media (max-width: 960px) {
  .search-popover {
    position: absolute !important;
    top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4) !important;
    left: 0 !important;
    width: 100% !important;
  }
  .search-popover .search-key {
    display: none;
  }
}
html:has(.comics-blazor-view),
body:has(.comics-blazor-view) {
  overscroll-behavior: none;
}