:root {
  --rgb-orange: 253, 126, 20;
  --rgb-yellow: 255, 193, 7;
  --rgb-gray-500: 173, 181, 189;
}
body {
  font-family: 'Kiwi Maru', serif;
}
.event-filter-label{
  font-size: 16px;
  font-weight: 700;
}

#id_event_status{
  display: flex;
}

.btn-list{
  display: flex;
  justify-content: space-evenly;
  margin: 2rem 0;
}

.event-fil-reset-btn{
  display: block;
  width: 20%;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  text-align: center;
  background: blue;
  background: linear-gradient(317deg, blue 0%, rgb(59, 131, 255) 100%);
  border-radius: 0.6rem;
  position: relative;
  padding: 10px;  
}

.event-fil-submit-btn{
  display: block;
  width: 20%;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  text-align: center;
  background: rgb(255,113,113);
  background: linear-gradient(317deg, rgba(255,113,113,1) 0%, rgba(255,59,71,1) 100%);
  border-radius: 0.6rem;
  position: relative;
  padding: 10px;
}


.d-grid {
  display: grid !important;
}

/* .dgrid.gantt-month,
.dgrid.gantt-days {
  position: sticky;
} */

.gantt-month{
  position: sticky;
  top: 0;
  z-index: 1;
}
.gantt-days{
  position: sticky;
  top: 30px;
  z-index: 1;
}

.gantt-month,
.gantt-days,
.vlines {
  grid-template-columns: 200px 100px repeat(42, 30px);
}
.gantt-cell.row-start {
  grid-template-columns: 300px 1fr;
  position: relative;
}
.gantt-cell {
  grid-template-columns: 200px 100px 1fr;
  position: relative;
}
.gantt-cell>.d-grid {
  grid-template-columns: repeat(42, 30px);
  position: relative;
}

.gantt-title.date{
  text-align: center;
}

.gantt-title.name{
  color: blue;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.colors-one .gantt-title,
.colors-one .gantt-col {
  grid-column: 5 / 21;
}
.colors-two .gantt-title,
.colors-two .gantt-col {
  grid-column: 21 / 32;
}
.gantt-month .month {
  border-bottom: 1px solid var(--bs-gray-300);
  border-right: 1px dotted rgba(var(--rgb-gray-500), .5);
  font-size: 14px;
  height: 30px;
  text-align: center;
  padding: 3px 0;
}
.gantt-days>div {
  border-bottom: 1px solid var(--bs-gray-300);
}
.gantt-days .gantt-first {
  display: flex;
  align-items: center;
  justify-content: center;
}
.day {
  background-color: var(--bs-white);
  border-right: 1px dotted rgba(var(--rgb-gray-500), .5);
  font-size: 14px;
  height: 60px;
  padding: 6px 0;
  position: relative;
  text-align: center;
}
.day span {
  display: block;
}
.day.sat{
  color: blue;
}
.day.sun{
  color: red;
}
.day.holiday{
  color: red;
}
.gantt-first {
  background-color: var(--bs-white);
  border-right: 1px dotted var(--bs-gray-300);
  position: relative;
  z-index: 2;
}
.gantt-second {
  background-color: var(--bs-white);
  border-right: 1px solid var(--bs-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
  .gantt-first {
    position: sticky !important;
    left: 0;
  }
  .gantt-second {
    position: sticky !important;
    left: 200px;
  }

.accordion-item {
  border: none;
  border-radius: 0;
}
.vlines {
  background-color: transparent;
  position: absolute;
  height: calc(100% - 90px);
  width: 100%;
}
.vlines span {
  display: block;
  border-right: 1px dotted rgba(var(--rgb-gray-500), .5);
}

.gantt-title span {
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: 13px;
  font-weight: 700;
  height: 100%;
  white-space: nowrap;
}
.gantt-bars {
  height: 6px;
  margin: auto 5px 5px 0;
  position: relative;
}
.gantt-bars::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  position: absolute;
  top: calc(50% - 5px);
  right: -5px;
}
.gantt-bars span {
  display: flex;
  align-items: center;
  font-size: 13px;
  padding: 0 .3rem;
  position: absolute;
  top: -23px;
  z-index: 1;
  white-space: nowrap;
}
.gantt-bars span a {
  display: inline-block;
  margin-left: .3rem;
}
.accordion-button,
.gantt-first>span {
  padding: .5rem;
}
.gantt-cell.row-start>.gantt-first {
  border-right-style: solid;
}
.gantt-cell:not(.row-start):nth-child(2n+1) .d-grid,
.gantt-cell:not(.row-start):nth-child(2n+1) .gantt-first,
.gantt-cell:not(.row-start):nth-child(2n+1) .gantt-second {
  background-color: rgba(184, 184, 184, .1);
}
.gantt-cell:not(.row-start) .gantt-first>span {
  padding-left: 1.5rem;
}
.gantt-first>span {
  display: block;
}
.gantt-second>span {
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: -0.1em;
}
.gantt-col {
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 0;
}
.colors-one .gantt-cell:first-child .gantt-col,
.colors-two .gantt-cell:first-child .gantt-col {
  border-top: 1px solid transparent;
}
.colors-one .gantt-cell:last-child .gantt-col,
.colors-two .gantt-cell:last-child .gantt-col {
  border-bottom: 1px solid transparent;
}
.colors-one .gantt-title,
.colors-one .accordion-button {
  background-color: rgba(var(--rgb-orange), .4);
}
.colors-one .gantt-bars {
  background-color: var(--bs-orange);
}
.colors-one .gantt-bars::after {
  border-color: transparent transparent transparent var(--bs-orange);
}
.colors-one .gantt-col,
.colors-one .gantt-cell:first-child .gantt-col,
.colors-one .gantt-cell:last-child .gantt-col {
  border-color: var(--bs-orange);
}
.colors-two .gantt-title,
.colors-two .accordion-button {
  background-color: rgba(var(--rgb-yellow), .4);
}
.colors-two .gantt-bars {
  background-color: var(--bs-yellow);
}
.colors-two .gantt-bars::after {
  border-color: transparent transparent transparent var(--bs-yellow);
}
.colors-two .gantt-col,
.colors-two .gantt-cell:first-child .gantt-col,
.colors-two .gantt-cell:last-child .gantt-col {
  border-color: var(--bs-yellow);
}
.gantt-days .today {
  position: relative;
  z-index: 0;
}
.gantt-days .today::after {
  background-color: var(--bs-red);
  bottom: -1px;
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: calc(50% - 4.5px);
  transform: rotate(45deg);
  height: 9px;
  width: 9px;
  z-index: 0;
}
.vlines .today {
  position: relative;
}
.vlines .today::after {
  background-color: var(--bs-red);
  content: "";
  display: block;
  position: absolute;
  left: calc(50% - 1px);
  height: 100%;
  width: 1px;
  z-index: 1;
}
.accordion-button {
  border-radius: 0 !important;
}
.accordion-button:not(.collapsed) {
  box-shadow: none;
  color: inherit;
}
.accordion-button:focus {
  box-shadow: none;
}
.accordion-button[aria-expanded="true"] {
  font-weight: 700;
}
.accordion-button::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/></svg>");
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'><path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/></svg>");
}


@media screen and (max-width: 768px) {
  .event-fil-reset-btn, .event-fil-submit-btn{
    width:45%;
    font-size: 16px;
    font-weight: 700;
  }
}