/* Root */
:root {
	--theme-primary-color: #003973;
	--theme-secondary-color: #EFA800;
	--ct-body-font-size: 1rem;
	--ct-menu-item-active: var(--theme-primary-color);
	--ct-menu-item-hover: var(--theme-primary-color);
	--ct-component-active-bg: var(--theme-primary-color);
}

a,
a:hover {
	text-decoration: none;
	color: unset;
	background: 0 0;
}

.object-fit-contain {
	object-fit: contain;
}

.object-fit-cover {
	object-fit: cover;
}

/* Theme */
.theme-text-primary-color {
	color: var(--theme-primary-color);
}

.theme-bg-primary-color {
	background-color: var(--theme-primary-color);
}

body::before {
	content: '';
	border-left: 7px solid var(--theme-primary-color);
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	z-index: 9999;
}

body.remove-line-page::before {
	display: none;
}

/* Button */
.btn-primary {
	background-color: var(--theme-primary-color);
	border-color: var(--theme-primary-color);
}

.btn-outline-primary {
	color: var(--theme-primary-color);
	border-color: var(--theme-primary-color);
}

.btn-primary:hover {
	background-color: #0066cc;
	border-color: #0066cc;
}

.btn-outline-primary:hover {
	background-color: var(--theme-primary-color);
	border-color: var(--theme-primary-color);
}

.btn-check:checked+.btn-outline-primary {
	background-color: var(--theme-primary-color);
	border-color: var(--theme-primary-color);
}

/* Sidebar */
#sidebar-menu .menuitem-active .active {
	font-weight: 600;
}

/* Page */
.auth-page {
	.btn-provider {
		position: relative;

		.btn-icon {
			height: 20px;
			position: absolute;
			top: 50%;
			left: 14px;
			transform: translateY(-50%);
		}
	}

	.form-footer {
		left: 50%;
		transform: translateX(-50%);
		bottom: 16px;
		column-gap: 20px;
		row-gap: 8px;
	}
}

.package-price-page {
	.ribbon span {
		background: var(--theme-primary-color);
	}

	.ribbon span:before {
		border-left: 3px solid var(--theme-primary-color);
		border-top: 3px solid var(--theme-primary-color);
	}

	.ribbon span:after {
		border-right: 3px solid var(--theme-primary-color);
		border-top: 3px solid var(--theme-primary-color);
	}
}

.order-page,
.setting-page {
	.card-order {
		.card-header {
			display: flex;
			align-items: center;
			gap: 12px;
			flex-wrap: nowrap;
			font-size: 1.25rem;

			.card-icon {
				width: 35px;
				height: 35px;
				background-color: var(--theme-primary-color);
				color: white;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 1.375rem;
			}

			span {
				flex: 1;
			}
		}

		.card-body {

			input,
			select,
			textarea {
				font-size: 0.9375rem;
				font-weight: 300;
				color: black;
			}

			.radio-theme {
				label.btn:hover {
					background-color: var(--theme-primary-color);
					border-color: var(--theme-primary-color);
				}

				.btn-check:checked+.btn {
					background-color: var(--theme-primary-color);
					border-color: var(--theme-primary-color);
				}

				.btn-check:focus+.btn {
					box-shadow: 0 0 0 .15rem rgba(113, 182, 249, .5) !important;
				}
			}

			.radio-order-renew {
				label.btn {
					min-width: 150px;
				}
			}

			.radio-payment-method {
				label.btn {
					min-width: 180px;
				}
			}
		}
	}

	.card-payment-method {
		.card-body {
			position: relative;

			.card-bottom {
				position: absolute;
				right: 14px;
				bottom: 14px;
			}
		}
	}
}

/* Form */
.form-input-required:has(input[required]) label:after,
.form-input-required:has(select[required]) label:after,
.form-input-required:has(textarea[required]) label:after {
	content: "*";
	color: red;
	font-size: 1rem;
	margin-left: 2px;
	opacity: 1;
	position: relative;
	display: inline;
}

/* Border */
.border-primary {
	border-color: var(--theme-primary-color) !important;
}

/* Pagination */
.pagination a,
.pagination span {
	line-height: 1.25 !important;
}

/* Background */
.background-blur {
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	height: inherit;
	width: 100%;
	height: 100%;
}

.login-page .background-blur {
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}