@charset "utf-8";

#sectionWaitTime{
  width: 90%;

  margin-top: 2rem;
  margin-right: auto;
  margin-left: auto;
}

#sectionWaitTime>h1{
  display: block;

  width: 100%;
  height: 3rem;
  
  margin: 1rem 0 0 0;
  padding: 0;

  color: var(--text);
  font-size: 1.75rem;
  font-weight: 400;

  line-height: 3rem;
  text-align: center;
}

#sectionWaitTime>small{
  display: inline-block;

  width: 100%;
  height: 2rem;

  margin: 0 0 1rem 0;
  padding: 0;

  color: var(--text);
  font-size: 1.25rem;
  font-weight: 400;

  line-height: 2rem;
  text-align: center;
}

#sectionWaitTime>h2{
  display: block;

  width: 100%;
  height: 2rem;
  
  margin: 0;
  padding: 0.5rem 0;

  color: var(--text);
  font-size: 1.125rem;
  font-weight: 400;

  line-height: 1.5rem;
  text-align: left;
}

.waitContainer{
  display: grid;
  grid-template:
    "class title time" 5rem
    "desc desc desc" 24rem
    / 1fr 6fr 5rem;
  
  width: 100%;
  height: 5rem;

  margin: 0 auto 1.5rem auto;
  padding: 0;
  
  border-radius: 15px;
  background: linear-gradient(225deg, var(--background3), var(--background1));
  box-shadow:
    -15px 15px 30px var(--background2),
    15px -15px 30px var(--background1);

  transition: all .4s;
}

.waitContainer.active{
  height: 28rem;
}

.waitContainer>h2{
  grid-area: class;

  display: block;
  width: 100%;
  height: 5rem;

  margin: 0;
  padding: 0;

  color: var(--text);
  font-size: 1.375rem;
  font-weight: 500;

  line-height: 2.5rem;
  text-align: center;
}

.waitContainer>h2::after{
  content: "\f107";
  display: inline-block;

  width: 100%;
  height: auto;

  margin: 0;
  padding: 0;

  color: var(--textPale);
  font-family: "Font Awesome 6 Free";
  font-size: 1.25rem;
  font-weight: 900;

  line-height: 2.5rem;
  text-align: center;

  transition: all .4s;
  transform: rotate(0deg);
  transform-origin: center;
}

.waitContainer.active>h2::after{
  /* content: "\f106"; */

  transform: rotate(180deg);
}

.waitContainer>h1{
  grid-area: title;

  display: block;
  width: 100%;
  height: 5rem;

  margin: 0;
  padding: 0;

  color: var(--text);
  font-size: 1.375rem;
  font-weight: 500;

  line-height: 5rem;
  text-align: left; 
}

.waitContainer>div:nth-of-type(1){
  grid-area: time;

  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.waitContainer>div:nth-of-type(1)>p{
  display: block;
  width: 60%;
  height: 60%;

  margin: auto;
  padding: 0;

  border-radius: calc(5rem * 0.6 / 2);

  color: var(--background1);
  font-size: 1.25rem;
  font-weight: 500;

  line-height: calc(5rem * 0.6);
  text-align: center;
}

.waitContainer>div:nth-of-type(1)>p.high{
  background-color: var(--waitHigh);
}

.waitContainer>div:nth-of-type(1)>p.middle{
  background-color: var(--waitMiddle);
}

.waitContainer>div:nth-of-type(1)>p.low{
  background-color: var(--waitLow);
}

/* ======================================== */

.waitContainer>div:nth-of-type(1)>span{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  width: 60%;
  height: 60%;

  margin: auto;
  padding: 0;
}

/* ======================================== */

.waitContainer>div:nth-of-type(1)>span>span{
  display: block;
  width: calc(100% - 3px);
  height: calc(100% - 3px);

  margin: auto;
  padding: 0;

  border-radius: calc(4rem / 3 / 2);
  color: var(--background1);
  font-size: 2.5rem;
  /* font-weight: 500; */

  line-height: calc(5rem * 1 - 3px);
  text-align: center;
}

.waitContainer>div:nth-of-type(1)>span.high>span{
  background-color: #23648C;
  background-color: #4C97BF;
  background-color: #7FD9FB;
}

.waitContainer>div:nth-of-type(1)>span.middle>span{
  background-color: #4C97BF;
  background-color: #7FD9FB;
}

.waitContainer>div:nth-of-type(1)>span.low>span{
  background-color: #7FD9FB;
  background-color: #4C97BF;
  background-color: #7FD9FB;
}

.waitContainer>div:nth-of-type(1)>span.middle>span:nth-of-type(1){
  background-color: #E8E8E8;
}

.waitContainer>div:nth-of-type(1)>span.low>span:nth-of-type(1), .waitContainer>div:nth-of-type(1)>span.low>span:nth-of-type(2){
  background-color: #E8E8E8;
}

/* ======================================== */

.waitContainer>.waitContainerStretch{
  grid-area: desc;

  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  transition: all .4s;
  transform: scaleY(0);
  transform-origin: 0 0;
}

.waitContainer.active>.waitContainerStretch{
  transform: scaleY(1);
}

.waitContainerStretch>a{
  display: block;

  width: calc((100% - 5rem) / 7 * 6);
  height: 1.5rem;

  margin: 0;
  padding: 0.25rem 5rem 0.25rem calc((100% - 5rem) / 7 * 1);

  color: var(--textPale);
  font-size: 1.2rem;
  font-weight: 500;

  line-height: 2.5rem;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.waitContainerStretch>a>i{
  margin: 0 0.75rem 0 0;
}

.waitContainerStretch>p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  text-overflow: ellipsis;

  width: calc((100% - 5rem) / 7 * 6);
  height: 9rem;
  margin: 1rem 0;
  padding: 0 5rem 0 calc((100% - 5rem) / 7 * 1);

  color: var(--text);
  font-size: 1.2rem;
  font-weight: 300;

  line-height: calc(9rem / 6);
  max-height: 9rem;
}

.waitContainerStretch>img{
  display: block;

  width: 100%;
  height: 11rem;

  margin: 0;
  padding: 0;
  
  object-fit: cover;

  border-radius: 0 0 15px 15px;
}

/* ======================================== */

#waitTimeLegends{
  display: grid;
  grid-template-rows: 1fr 1fr;
  width: 80%; 
  height: 8rem;

  margin: 1.5rem auto 3rem auto;
  padding: 2rem;

  background: linear-gradient(225deg, var(--background3), var(--background1));
  box-shadow:
    -15px 15px 30px var(--background2),
    15px -15px 30px var(--background1);
  border-radius: 1rem;

  transition: all .4s;
}

#waitTimeLegends>h2{
  display: flex;
  justify-content: center;
  width: 100%;
  height: 4rem;

  margin: 0;
  padding: 0;

  text-align: center;
}

#waitTimeLegends>h2>i{
  display: block;

  width: 2rem;
  height: 100%;

  margin: 0 0.5rem;
  padding: 0;

  color: #23648C;
  font-size: 2rem;
  font-weight: 400;

  text-align: center;
  line-height: 4rem;
}

#waitTimeLegends>h2>p{
  display: block;

  width: auto;
  height: 100%;

  margin: 0;
  padding: 0;

  color: #23648C;
  font-size: 1.75rem;
  font-weight: 600;

  text-align: justify;
  line-height: 4rem;
}

#waitTimeLegends>div{
  display: flex;
  flex-direction: row;

  width: auto;
  height: 100%;

  overflow-x: auto;
}

#waitTimeLegends>div>div{
  display: flex;
  flex-direction: row;
  width: auto;
  height: 100%;

  margin: 0 0.5rem;
  padding: 0;
}

#waitTimeLegends>div>div>span{
  display: block;
  width: 2rem;
  height: 2rem;

  margin: 1rem 0.5rem;
  padding: 0;

  border: none;
  border-radius: 50%;
}

#waitTimeLegends>div>div>p{
  display: block;
  width: auto;
  height: 100%;

  margin: 0;
  padding: 0;

  color: var(--text);
  font-size: 1.25rem;
  font-weight: 400;

  text-align: justify;
  line-height: 4rem;

  word-break: keep-all;
}

#waitTimeLegends>div>div:nth-of-type(1)>span{
  background-color: #23648C;
}

#waitTimeLegends>div>div:nth-of-type(2)>span{
  background-color: #4C97BF;
}

#waitTimeLegends>div>div:nth-of-type(3)>span{
  background-color: #7FD9FB;
}

#waitTimeLegends>div>div:nth-of-type(4)>span{
  background-color: #D0D0D0;
}