﻿@charset "UTF-8";

/* fade image in after load */

.lazyload {
  opacity: 0;
}

.lazyloading {
  opacity: 1;
}

.lazyloaded {
  opacity: 1;
  transition: opacity 200ms;
}

.block-genre-tree--item-container > a.has-checked, .block-genre-tree--item-container > a.is-checked,
.block-category-tree--item-container > a.has-checked,
.block-category-tree--item-container > a.is-checked {
  background: #f6dfde;
}
.block-genre-tree--item-container > a label,
.block-category-tree--item-container > a label {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  margin-top: -4px;
}
.block-genre-tree--item-container > a label input,
.block-category-tree--item-container > a label input {
  opacity: 0;
  position: absolute;
  visibility: hidden;
}
.block-genre-tree--item-container > a label input:checked + span,
.block-category-tree--item-container > a label input:checked + span {
  background: #D32D26;
  border-color: #D32D26;
}
.block-genre-tree--item-container > a label input:checked + span::before,
.block-category-tree--item-container > a label input:checked + span::before {
  opacity: 1;
}
.block-genre-tree--item-container > a label span,
.block-category-tree--item-container > a label span {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid #949494;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 2px;
  transition: background-color 0.2s, border-color 0.2s;
}
.block-genre-tree--item-container > a label span::before,
.block-category-tree--item-container > a label span::before {
  content: "";
  display: block;
  width: 7px;
  height: 4px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity 0.2s;
}

.search-breadcrumbs {
  color: #757575;
  margin-bottom: 3.2rem;
  height: 1.7em;
  overflow: hidden;
}

.mr20 {
  margin-right: 20px;
}

.w40 {
  width: 40% !important;
}

.f-center {
  text-align: center;
}

.block-member-info--message-authtell{
    color:#000000;
    text-decoration: underline;
}

.form-group.block-member-info--name.auth-tell{ 
    flex-direction: column; 
    align-items: stretch; 
    flex-wrap: nowrap;
}

.auth-tell .form-label, 
.auth-tell .form-control { 
  display: flex; 
  align-items: center; 
  min-height: 3.2em; 
}
