@charset "utf-8";
ul{
  padding: 0 !important;
  margin: 0 !important;
}
.hr{
  opacity: 0.5 !important;
}
.fixed-header{
  z-index: 99 !important;
}
.row>*{
  padding-right: 0 !important;
  padding-left: calc(var(--bs-gutter-x)* .5) !important;
}
#date{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: #3B82F6 !important;
  height: 60px !important;
  border-radius: 30px !important;
}
select{
  -webkit-appearance: none; /* 기본 화살표 제거 */
  -moz-appearance: none; /* 파이어폭스에서 기본 화살표 제거 */
  appearance: none; /* 모든 브라우저에서 기본 화살표 제거 */
}
select:focus{
  outline: none; /* 포커스 시 테두리가 생기지 않도록 설정 */
  box-shadow: none; /* 포커스 시 그림자 효과가 생기는 경우 방지 */
}
option{
  font-size: 18px !important;
  color: #0E1A33 !important;
}
.select-container {
  width: 100% !important;
  position: relative;
  display: flex !important;
  justify-content: space-between;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0 1rem;
}
#year,#month{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 5px 10px !important;
  border: none !important;
  border-radius: 30px !important;
  font-weight: bold !important;
  color: #fff !important;
  font-size: 24px !important;
  background-color: transparent !important;
  z-index: 0 !important;
}
#year:active,#month:active{
  border: none !important;
}
#calendar{
  position: relative !important;
  margin-top: 2rem !important;
  gap: 20px !important;
  color: #94A3B8 !important;
  font-weight: bold !important;
  z-index: 1 !important;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.dayoftheweek{
  border: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
/* 일정 */
#data-display{
  margin-top: 1rem !important;
  color: #ffffff !important;
  padding-bottom: 5rem !important;
}
#data-display * {
  color: #ffffff !important;
}
#data-display .event-addreess,
#data-display .event-date,
#data-display .event-playercount,
#data-display .event-buyin {
  color: #94A3B8 !important;
}
.event-img {
  width: 100px !important;
  height: 100px !important;
  /* object-fit: cover !important;
  min-width: 60px;
  min-height: 60px;
  height: auto; */
}
.event-right{
  width: 70%;
}
.event-title{
  font-size: 18px !important;
  font-weight: bold !important;
  color: #ffffff !important;
}
.event-addreess, .event-date, .event-playercount, .event-buyin{
  font-size: 15px !important;
  font-weight: bold !important;
  color: #94A3B8 !important;
}
.event-addreess2, .event-date2, .event-playercount2, .event-buyin2{
  font-size: 15px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  padding: 0 !important;
}
.today {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2563EB;
  color: #fff;
  border-radius: 30px;
  width: 45px; /* 동그라미의 너비 */
  height: 45px; /* 동그라미의 높이 */
  z-index: 2; /* 가장 위에 오도록 설정 */
}
.day {
  position: relative;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  z-index: 1; /* today 아래에 위치하도록 설정 */
}
.day.selected::after {
  content: '';
  position: absolute;
  bottom: 0px; /* 적절한 위치로 조정 */
  left: 50%;
  transform: translateX(-50%);
  width: 45px; /* 동그라미의 너비 */
  height: 45px; /* 동그라미의 높이 */
  border-radius: 30px; /* 둥글게 만들기 */
  background-color: #3B82F6; /* 동그라미 색상 */
  z-index: -1; /* 다른 요소들 아래에 위치하도록 설정 */
}
.day.today .dot {
  bottom: -10px; /* today와 selected일 때의 dot 위치 */
}
.dot {
  width: 8px;
  height: 8px;
  background-color: #3B82F6;
  border-radius: 50%;
  position: absolute;
  bottom: -10px; /* 조정 필요할 수 있음 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 0; /* day 아래에 위치하도록 설정 */
}

.day.today.selected {
  position: relative; /* 다른 스타일과 충돌하지 않도록 조정 */
}
.day.today.selected::after {
  content: '';
  position: absolute;
  bottom: 0px; /* 적절한 위치로 조정 */
  left: 50%;
  transform: translateX(-50%);
  width: 45px; /* 동그라미의 너비 */
  height: 45px; /* 동그라미의 높이 */
  border-radius: 30px; /* 둥글게 만들기 */
  background-color: #3B82F6; /* 동그라미 색상 */
  z-index: -1; /* 다른 요소들 아래에 위치하도록 설정 */
}

.month-nav {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #ffffff;
}

/* .d-flex.align-items-center.justify-content-end {
  pointer-events: none;
}

.goAdminModify {
  pointer-events: auto;
} */
/* 모달 다크 테마 */
.modal-content {
  background-color: #1E293B !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
}
.modal-header {
  border-bottom: 1px solid #334155 !important;
}
.modal-footer {
  border-top: 1px solid #334155 !important;
}

@media screen and (max-width: 450px) {
  #calendar{
  margin-top: 2rem !important;
  gap: 5px !important;
  color: #94A3B8 !important;
  font-weight: bold !important;
  }
  #year,#month{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 5px 10px !important;
  border: none !important;
  border-radius: 30px !important;
  font-weight: bold !important;
  color: #fff !important;
  font-size: 22px !important;
  background-color: transparent !important;
  }
  .today{
    top: 7px !important;
    width: 30px !important; /* 동그라미의 너비 */
    height: 30px !important; /* 동그라미의 높이 */
  }
  /* .today.selected > .dot{
    top: 20px !important;
  } */
  .day.selected::after {
    bottom: 7px; /* 숫자 아래에 위치 */
    left: 50%;
    width: 30px !important; /* 동그라미의 너비 */
    height: 30px !important; /* 동그라미의 높이 */
  }
  .day.today .dot {
    bottom: -10px; /* today와 selected일 때의 dot 위치 */
  }
  .dot {
    bottom: -2px; /* 조정 필요할 수 있음 */
  }
}
@media screen and (max-width: 415px) {
  .event-left{
    display: none;
  }
  .event-right{
    width: 100%;
  }
}
@media screen and (max-width: 365px) {
  #date{
  height: 50px !important;
  }
  #calendar{
  margin-top: 2rem !important;
  gap: 0px !important;
  color: #94A3B8 !important;
  font-weight: bold !important;
  }
}