#calendar_gen {
	width: 100%;
	/* overflow: hidden; */
}
.calendar {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(136px, 100%) 16px minmax(136px, 100%);
  grid-template-columns: repeat(2, minmax(136px, 100%));
  gap: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.calendar_block {
  background: #FFFFFF;
  -webkit-box-shadow: 0px 8px 8px rgb(0 6 26 / 10%);
          box-shadow: 0px 8px 8px rgb(0 6 26 / 10%);
  border-radius: 16px;
  height: auto;
  text-align: center;
  cursor: pointer;
}
.calendar_block>b {
  display: block;
  width: 100%;
  text-align: center;
  margin: 32px 0px 24px 0px;
  font-family: 'Inter';
  font-weight: 400;
  font-size: 20px;
  line-height: 26px;
  color: #00061A;
}
.calendar_block:hover {
	-webkit-box-shadow: 0px 16px 16px rgba(0, 6, 26, 0.1);
	        box-shadow: 0px 16px 16px rgba(0, 6, 26, 0.1);
}
.calendar_block__active {
	border: 1px solid #4772FF;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
}
.calendar_block:hover>b, .calendar_block__active>b {
	color: #4772FF;
}
.calendar_div {
  display: none;
}
.calendar_num {
	display: block;
  background: #F4F6FA;
  width: 32px;
  height: 32px;
  border-radius: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: 'Inter';
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  font-style: normal;
  color: #00061A;
}
.calendar_none {
	display: block;
  width: 32px;
  height: 32px;
}
.calendar_active {
	background: #C7D4FF;
}
.calendar_info {
	display: none;
    width: 100%;
    background: #F4F6FA;
    margin: 64px 0px;
	padding: 64px 0px;
	position: relative;
}
.calendar_close {
    cursor: pointer;
    position: relative;
    top: unset;
    right: unset;
	z-index: 2;
}
.calendar_text {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    grid-gap: 32px;
}
.calendar_text__block {
    background: #FFFFFF;
    padding: 16px;
	margin-bottom: 24px;
}
.calendar_text__block:last-child {
	margin-bottom: 0px;
}
.calendar_text__block>b {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
	cursor: pointer;
}
.calendar_name__block {
	display: none;
	margin-top: 29px;
}
.calendar_text__block:first-child() .calendar_name__block {
	display: block;
}
.calendar_text__no {
	margin-top: 12px;
	margin-bottom: 29px;
}
.calendar_filter {
	width: 100%;
	max-width: 776px;
	margin: 0 auto;
}
.calendar_year {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    color: var(--black700);
}
.calendar_year>a {
    padding: 7px 16px;
    cursor: pointer;
}
.calendar_year>a:hover {
    color: var(--black900);
}
.calendar_year__active {
    color: var(--black900);
    background: var(--black100);
    border-radius: 12px;
}
.calendar_right {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	position: sticky;
	top: 0;
}
.calendar_h2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: start;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}


/*md*/
@media (min-width: 768px) { 
	.calendar {
		-ms-grid-columns: minmax(336px, 372px) 32px minmax(336px, 372px);
		grid-template-columns: repeat(2, minmax(336px, 372px));
		gap: 32px;
	}
	.calendar_div {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: 0px 20px 12px 20px;
		gap: 12px;
	}
	.calendar_block {
		height: 366px;
	}
	.calendar_right {
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		gap: 32px;
	}
}

/*lg Desktop*/
@media (min-width: 992px) {
	.calendar_div {
		margin: 0px 36px 12px 36px;
	}
	.calendar_close {
		height: 38px;
		position: absolute;
		top: 64px;
		right: 64px;
	}
	.calendar_text {
		-ms-grid-columns: minmax(auto, 776px) 32px minmax(auto, 372px);
		grid-template-columns: minmax(auto, 776px) minmax(auto, 372px);
	}
	.calendar_right {
		display: block;
	}
}
/*xl*/
@media (min-width: 1200px) { 
	.calendar {
		-ms-grid-columns: (minmax(336px, 372px))[3];
		grid-template-columns: repeat(3, minmax(336px, 372px));
	}
}