@charset "utf-8";

.register .list-group-item {
	padding-left:0;
	padding-right:0;
	border-left:0;
	border-right:0;
}

.cp_box_head,
.cp_box_body {display: flex; align-items: center; padding: 5px 10px; gap: 5px;}
.cp_box_head span:first-child, .cp_box_body span:first-child {flex: 1;}
.cp_box_head span:nth-child(2), .cp_box_body span:nth-child(2) {flex: 0 0 20%;}
.cp_box_head span:nth-child(3), .cp_box_body span:nth-child(3) {flex: 0 0 20%; text-align: center;}
.cp_box_head span:nth-child(4), .cp_box_body span:nth-child(4) {flex: 0 0 12%; text-align: center;}

.cp_box_head {background: #dae5ff; border-bottom: 1px solid #ddd;}
.cp_box_body {border-bottom: 1px solid #ddd;}

.cp_box_head button,
.cp_box_body button {border: 0; outline: 0; font-size: 13px; display: inline-block; width: 100%; background: #ddd;}


.cpd_category {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 5px 12px;
}

.cpd_category a {
  display: inline-block;
  padding: 3px 16px;
  font-size: 14px;
  border-radius: 30px;
  background: #f6f7f9;
  color: #333;
  text-decoration: none;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease-in-out;
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
}

.cpd_category a:hover {
  background: #eaecef;
  color: #222;
}

.cpd_category a.active {
  background: #2f79d7;
  color: #fff;
  border-color: #2f79d7;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}
.cpd_box_head,
.cpd_box_body {display: flex; align-items: center; padding: 5px 10px; gap: 5px;}
.cpd_box_head span:first-child, .cpd_box_body span:first-child {flex: 1;}
.cpd_box_head span:nth-child(2), .cpd_box_body span:nth-child(2) {flex: 0 0 30%;}
.cpd_box_head span:nth-child(3), .cpd_box_body span:nth-child(3) {flex: 0 0 30%; text-align: center;}

.cpd_box_head {background: #dae5ff; border-bottom: 1px solid #ddd;}
.cpd_box_body {border-bottom: 1px solid #ddd;}

.cpd_box_head button,
.cpd_box_body button {border: 0; outline: 0; font-size: 13px; display: inline-block; width: 100%; background: #ddd;}

.calendar-head form {margin: 2rem 0 0;}
.calendar-head form>div {display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 0.5rem;}
.calendar-head form select { padding: 10px; outline: 0; border: 1px solid #ddd;}
.calendar-head form input { padding: 5px; outline: 0; border: 1px solid #ddd;}
.calendar-head form label {margin: 0;}
.calendar-head form button {outline: 0; border: 1px solid #ddd; padding: 5px 10px; background: #333; color: #fff;}
.calendar-head form button:hover {opacity: 0.7;}

.calendar-weeks ul {display: flex; align-items: center; gap: 5px; margin: 1rem 10px 0;}
.calendar-weeks ul li {flex: 0 0 calc(14.2% - 4.5px); text-align: center;}
.calendar-weeks ul li:first-child {color: red;}
.calendar-weeks ul li:last-child {color: blue;}

.calendar {
	display: flex;
	flex-wrap: wrap;
  gap: 5px;
	padding: 0 10px 10px;
}
.calendar>div {
	flex: 0 0 calc(14.2% - 4.5px);
}
.calendar-day {
  aspect-ratio: 1 / 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  text-align: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 12px;
	padding-top: 5px;
}

.calendar-day.checked {background: #333; color: #fff;}

.calendar-day.checked span {
  color: #ffa700;
}

.calendar-day.checked span:first-child {
  color: #fff;
	font-weight: bold;
}

.calendar-day.checked span:last-child {
  color: #fff;
	font-weight: bold;
}

.point-info-use {
	display: flex;
	align-items: center;
	gap: 10px;
}
.point-info-use div:first-child span {color: blue;}
.point-info-use div:last-child span {color: red;}

@media all and (max-width:575px) {
	.register .list-group-item {
		padding-left:1.0rem;
		padding-right:1.0rem;
	}
}

@media (max-width:480px) {
	.cp_box_head,
	.cp_box_body {
		font-size: 12px !important;
		padding: 8px 10px;
	}

	.cp_box_head span:nth-child(2), .cp_box_body span:nth-child(2) {display: none;}
	.cp_box_head span:nth-child(3), .cp_box_body span:nth-child(3) {flex: 0 0 20%; text-align: center;}
	.cp_box_head span:nth-child(4), .cp_box_body span:nth-child(4) {flex: 0 0 20%; text-align: center;}
	.cp_box_body button {font-size: 12px;}

	.cpd_box_head,
	.cpd_box_body {
		font-size: 12px !important;
		padding: 8px 10px;
	}

	.cpd_box_head span:nth-child(2), .cpd_box_body span:nth-child(2) {flex: 0 0 30%; text-align: center;}
	.cpd_box_head span:nth-child(3), .cpd_box_body span:nth-child(3) {flex: 0 0 30%; text-align: center;}
	.cpd_box_body button {font-size: 12px;}
}