body {
    overflow-x: hidden; /* 전체 페이지의 가로 스크롤 막기 */
    font-family: 'Play','Noto Sans KR';
    font-size: 15px !important;
    color: #3C2639;
  }
  
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    align-items: center;
    color: white;
    border-bottom: solid #D9C6D1;
    border-width: 0 0 1px 0;
    padding: 12px;
    background-color: #FAFAFA;
    z-index: 1030; /* Bootstrap navbar z-index is 1030 */
  }
  a {
    color : #3C2639;
    text-decoration: none;
  }
  a:link {
    color : #3C2639;
    text-decoration: none;
  }
  a:visited {
    color : #3C2639;
    text-decoration: none;
  }
  a:focus {
    color : #3C2639;
    text-decoration: none;
  }
  a:hover {
    color : #3C2639;
    text-decoration: none;
  }
  main {
    position: relative;
    margin-top: 70px; /* header의 높이만큼 여백 추가 */
  }
  caption {
      /* 기존 스타일 속성 유지하면서 캡션 위치를 위로 조정 */
      display: table-caption; /* 기본값: table-caption */
      caption-side: top; /* 캡션을 위로 배치 */
      text-align: left; /* 캡션 가운데 정렬 */
      font-weight: bold; /* 캡션 텍스트의 글꼴 굵기 설정 */
      /* 원하는 다른 스타일 속성을 추가할 수 있습니다 */
    }
  
  .highlighted {
    background-color: #9ACD32;
  }
  
  .highlighted-date {
    background-color: #9ACD32 !important; /* 원하는 강조 색상으로 변경하세요 */
  }

  /* VIP List의 점(bullet) 제거 */
  .sidebar .nav-item {
    list-style-type: none;
  }
  
  /* VIP List의 ul 태그 자체의 여백 제거 */
  .sidebar .nav {
    padding-left: 0;
    margin-left: 0;
  }

  /* VIP List의 왼쪽 여백(padding) 제거 */
  .sidebar .nav-link {
    padding-left: 0;
  }
  
  
  .ui-state-default {
    background-color: transparent !important;
    border: 0px;
  }
  
  
  
  .row {
    display: flex;
    width: 100%;
    padding: 0px;
  }
  .col-3 {
    width: 400px;
    overflow-y: auto;
    padding: 20px;
    max-height: calc(100vh - 80px);
  }
  .col {
    flex: 1;
    overflow-y: scroll;
    width: 100%;
    max-width : calc(100% - 400px); /* 최대 너비 설정 */
    max-height: calc(100vh - 80px);
  }
  
  .calendar {
    display: flex; /*자식 요소들의 정렬을 위해 사용 */
    overflow-x: auto; /* 가로 스크롤을 추가하여 넘치는 부분 처리 */
    width: 100%;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    flex-direction: row; /*내용을 오른쪽부터 시작*/
    /*flex-direction: row-reverse; /*달력이 하나만 나옴 */
    margin: 0;
    padding: 0;
  }
  
  /*
  .calendar {
    flex: 0 0 auto;
    width: 200px;
    margin: 0px;
    padding: 0;
  
  }
  */
  .ui-datepicker-group {
    margin: 3px;
  }
  
  
  .popper,
  .tooltip {
    position: absolute;
    z-index: 9999;
    background: #FFC107;
    color: black;
    width: 150px;
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    padding: 10px;
    text-align: center;
  }
  .style5 .tooltip {
    background: #1E252B;
    color: #FFFFFF;
    max-width: 200px;
    width: auto;
    font-size: .8rem;
    padding: .5em 1em;
  }
  .popper .popper__arrow,
  .tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
  }
  
  .tooltip .tooltip-arrow,
  .popper .popper__arrow {
    border-color: #FFC107;
  }
  .style5 .tooltip .tooltip-arrow {
    border-color: #1E252B;
  }
  .popper[x-placement^="top"],
  .tooltip[x-placement^="top"] {
    margin-bottom: 5px;
  }
  .popper[x-placement^="top"] .popper__arrow,
  .tooltip[x-placement^="top"] .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
  .popper[x-placement^="bottom"],
  .tooltip[x-placement^="bottom"] {
    margin-top: 5px;
  }
  .tooltip[x-placement^="bottom"] .tooltip-arrow,
  .popper[x-placement^="bottom"] .popper__arrow {
    border-width: 0 5px 5px 5px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
  .tooltip[x-placement^="right"],
  .popper[x-placement^="right"] {
    margin-left: 5px;
  }
  .popper[x-placement^="right"] .popper__arrow,
  .tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }
  .popper[x-placement^="left"],
  .tooltip[x-placement^="left"] {
    margin-right: 5px;
  }
  .popper[x-placement^="left"] .popper__arrow,
  .tooltip[x-placement^="left"] .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    right: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }

/* bodytype layout sidebar */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 56px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

main.col-md-9.ms-sm-auto.col-lg-10.px-md-4 {
    margin-top: 56px; /* header의 높이만큼 여백 추가 */
}