:root {
	--bs-primary: #D400B2;
	/* your new primary color */
	--bs-primary-rgb: 212, 0, 178;
	--bs-success: #064C1A;
	--bs-success-rgb: 6, 76, 26, 1;
	--success-light: #A6FF00;
}

.navbar-nav {
	--bs-nav-link-font-weight: 600;
}

body {
	font-family: 'Inter', sans-serif;
}

h2,
h3,
h4,
h5,
.h2,
.h3,
.h4,
.h5 {
	font-weight: 900;
}

.btn {
	font-weight: 700;
}

.navbar-nav .nav-link {
	color: #000;
}

.navbar-nav .nav-link.active {
	color: #000;
	text-decoration: solid underline var(--bs-primary) 4px;
}

.navbar-nav .nav-link:hover {
	color: #555 !important;
}

.form-control {
	border-color: var(--bs-primary);
}

.form-control:focus {
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

#rpicker .form-control {
	text-align: center;
}

label {
	color: var(--bs-primary);
}

div:not(.radio):not(.checkbox)>label {
	position: relative;
	left: .5em;
	top: .6em;
	background-color: white;
	padding: 0 .3em;
}

div.radio,
div.checkbox {
	padding-bottom: .3em;
}

input[type="checkbox"],
input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 1.4em;
	height: 1.4em;
	border: 3px solid var(--bs-primary);
	border-radius: 0.5em;
	background-color: transparent;
	cursor: pointer;
	position: relative;
	vertical-align: middle;
}

input[type="checkbox"]:checked::after,
input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	border: solid var(--success-light);
	transform-origin: center;

	transform: rotate(-45deg) scale(2.1);
	left: 19.3%;
	width: 76.4%;
	height: 41.0%;
	top: 2.4%;
	border-width: 0 0 .185em .185em;
}

.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #0d4163;
	--bs-btn-hover-border-color: #0c3d5e;
	--bs-btn-focus-shadow-rgb: 51, 103, 138;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #0c3d5e;
	--bs-btn-active-border-color: #0b3958;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--bs-primary);
	--bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-success {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--bs-success);
	--bs-btn-border-color: var(--bs-success);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #0d4163;
	--bs-btn-hover-border-color: #0c3d5e;
	--bs-btn-focus-shadow-rgb: 51, 103, 138;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #0c3d5e;
	--bs-btn-active-border-color: #0b3958;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--bs-success);
	--bs-btn-disabled-border-color: var(--bs-success);
}

.legend .freeDay {
	background-color: var(--success-light) !important;
	border-color: var(--success-light) !important;
}

.legend .selectedDay {
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
}

.legend .disabledDay {
	background-color: var(--bs-danger) !important;
	border-color: var(--bs-danger) !important;
	color: white !important;
}

.rdrDay:not(.rdrDayDisabled, .rdrDayPassive) {
	background-color: var(--success-light) !important;
}

.rdrDayDisabled:not(.rdrDayPassive):not(.rdrDayInPast) {
	background-color: var(--bs-danger) !important;
}

.rdrDayDisabled:not(.rdrDayPassive):not(.rdrDayInPast) span {
	color: white !important;
}

/* custom --- */

.custom-icon {
	width: 1.25em;
	height: 1.25em;
	vertical-align: middle !important;
}

.single-number-circle {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	display: flex;
	background-color: var(--success-light);
	align-items: center;
	justify-content: center;
	color: white;
	container-type: inline-size;
	font-size: min(calc(.5rem + 1vw + 3vh), 6rem);
	font-weight: 900;
}

.number-circles {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	width: 50%;
	margin: 0 auto;
	max-width: 20vh;
	display: flex;
	background-color: var(--success-light);
	align-items: center;
	justify-content: center;
	color: white;
	font-size: min(calc(.5rem + 1vw + 3vh), 5rem);
	font-weight: 900;
}

div:last-of-type > .number-circles::after {
	content: none;
}

.number-circles::after {
	content: "";
	position: absolute;
	border-top: var(--bs-primary) 16px dotted;
	left: 62%;
	right: -38%;
	z-index: -10;	
}

#top-decoration {
	position: absolute;
	top: -151px;
	right: -135px;
	z-index: -10;
	width: 426px;
	height: 293px;
	background-color: var(--success-light);
	border-radius: 0% 0% 60% 50%;
}

#bottom-decoration {
	position: absolute;
	bottom: 0;
	right: 0;
}

.side-date-form {
	box-shadow: 0 0 15px var(--bs-primary);
	border: 1px solid var(--bs-primary);
	max-width: 798px;
	margin: 0 auto;
	border-radius: 16px;
}

.main-date-form {
	box-shadow: 0 0 15px var(--bs-primary);
	border: 1px solid var(--bs-primary);
	background: white;
	max-width: 75vw;
	border-radius: 16px;
}

.main-date-form>div {
	position: relative;
}
.main-date-form>div::before {
	content: "";
	display: block;
	background: var(--success-light, #90ee90);
	z-index: -1;
	border-radius: 50%;
	position: absolute;
	aspect-ratio: 1 / 1;
	top: -3rem;
	left: -3rem;
	right: -3rem;
}

@media (max-width: 991.98px) {
	#top-decoration {
		width: 300px;
	}

	#bottom-decoration {
		display: none;
	}

	div:first-child > .number-circles::after {
		left: 50%;
		right: 0;
	}

	div:nth-child(2) > .number-circles::after,
	div:nth-child(3) > .number-circles::after {
		left: 0;
		right: 0;
	}
	
	div:last-child > .number-circles::after {
		content: "" !important;
		left: 0;
		right: 50%;
	}
}