.grid--two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
    align-items: start;
}
@media (max-width: 768px) {
    .grid--two-column {
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }
}
.column {
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
    background-color: #fff;
}
label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px !important;
}
input[type="radio"] {
    margin-right: 5px;
    height: 20px;
    width: 20px;
    margin-top: 3px;
}
input[type="radio"]+label {
    margin-bottom: 10px !important;
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    user-select: none; /* Standard */
}
hr {
    margin: 20px 0 !important;
    border: 0;
    border-top: 1px solid #ddd;
}
.product {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 20px;
    margin-bottom: 20px;
}
.product-text {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.mb-10 {
    margin-bottom: 10px !important;
}
.container--registration-plate {
    position: relative;
}
.registration-plate {
    padding: 5px 10px 5px 40px !important;
    border: 2px solid #000 !important;
    border-radius: 4px !important;
    color:#000;
    font-weight: bold;
    font-size: 30px;
    height: 60px;
    box-sizing: border-box;
}
.registration-plate-country {
    background: url(https://www.reisklaar.nl/wp-content/themes/hello-elementor-child/templates/registration-eu.svg);
    background-position: center center;
    display: inline-block;
    height: 56px;
    width: 30px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 2px 0 0 2px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding-top: 35px;
    text-align: center;
    box-sizing: border-box;
}
.registration-plate[data-registration-country="NL"] {
    background-color: #f3b700;
}
.registration-plate[data-registration-country="BE"] {
    background-color: #fff;
    color: #9d1006;
    border-color: #9d1006 !important;
}
[v-cloak] {
    display: none;
}
/* Calender dropdown fixes */
.dp__input {
    border: 1px solid #666;
}
.dp__btn,
.dp--clear-btn {
    background-color: transparent !important;
    color: #000 !important;
}
/* Popover */
label:has(+ span.popover-wrapper) {
display: inline;
} 
.popover-trigger {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(https://www.reisklaar.nl/wp-content/uploads/2024/10/info.svg);
    background-size: cover;
    margin-left: 5px;
}
.popover-wrapper {
    position: relative;
}
.popover-content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    transform: translate(0, 10px);
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    left: -97px;
    width: 220px;
}
.popover-content .popover-message {
    font-size: 12px;
    margin-bottom: 5px;
}
.popover-content:before { /* triangle */
    position: absolute;
    z-index: -1;
    content: "";
    right: calc(50% - 10px);
    top: -10px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #f2f2f2 transparent;
    transition-duration: 0.3s;
    transition-property: transform;
}
.popover-wrapper:hover .popover-content {
    z-index: 10;
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
    transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
/* Popover mobile styling, incase it is too wide and might clip the side */
@media screen and (max-width: 768px) {
    .popover-content {
        left: -85px;
        width: 200px;
    }     
}
.label-payment {
    display: inline-flex;
    align-items: center;
}
.payment-method {
    width: 30px;
    margin-right: 5px;
}
.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    background-color: #FFA500;
    border-color: #FF8C00;
}
.agreement-text {
    line-height: 1.1rem;
    margin-left: 25px;
}
.agreement-text input {
    margin-left: -25px;
    position: absolute;
    margin-top: 3px;
}
.button--loading {
    position: relative;
    padding-left: 40px !important;
}
.button--loading::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    top: calc(50% - 12px);
    left: 12px;
    right: 0;
    bottom: 0;
    border: 4px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    animation: button-loading-spinner 1s ease infinite;
}
@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}
.benefits {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: #3ba554;
    font-size: 11px;
    margin-top: 10px;
}
@media screen and (max-width: 768px) {
    .benefits {
    flex-direction: column;
    align-items: flex-start;
    }
}
.benefit {
    margin-right: 10px;
	display: block;
}
.benefit::before {
	position: absolute;
    content: "\2713"; /* Example Unicode for a check mark */
    font-size: 15px; /* Adjust size as needed */
    color: #000; /* Set color */
    display: inline-block;
    margin-right: 5px;
    color: #3ba554;
}
.benefit .text {
    display: block;
    margin-left: 20px;
    margin-top: 3px;
}
.text-loading {
    display: inline-block;
    position: relative;
    background-color: #f0f0f0;
    color: #f0f0f0;
    border-radius: 4px;

}
// Loading animation
.text-loading:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	background-size: 50% 100%;
	background-repeat: no-repeat;
	animation: loading 1s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

/* .be styling */
.grid--two-column-right-leaning {
	display: grid;
	grid-template-columns: 5fr 2fr;
	grid-gap: 10px;
	align-items: end;
}
.infoSearchButton{
	height: auto;
	width: 100%;
	font-weight: bold;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	color: white;
	background-color: #3ba554;
	border-color: #3ba554;
}
.infoSearchButton:disabled{
	color: #666666;
	border-color:#999999;
	background-color: #cccccc;
}
.infoSearchButton:disabled:hover{
	cursor:not-allowed;
}
.infoSearchButton.checked{
	color: white;
	background-color: #3ba554;
	border-color: #3ba554;
}

.gegevensGevondenBannerWrapper{
	position:relative;
}

.gegevensGevondenBannerWrapper::before{
	content: "";
	background: #3ba554;
	position: absolute;
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	margin-inline: auto;
	right: calc(100% / 7 - 5px);
	top: -5px;
}

.gegevensGevondenBanner{
	height:35px;
	background-color: #3ba554;
	text-align: center;
	justify-content: center;
	display:flex;
	border-radius: 10px;
	margin:2px;
	margin-top: 7px;
	color: white;
	font-weight: bold;
}

.gegevensGevondenBanner t{
	margin: 5px;
}

.supressCursorStyling{
	cursor: default !important;
}
.method-selector-container input[type='radio']{
	appearance: none;
	outline: 1px solid #666;
	border-radius: 50%;
	cursor: pointer;
	accent-color: #3ba554;
}
.method-selector-container input[type='radio']:checked{
	border: 2px solid white;
	background-color: #3ba554;
}
.language-select-container{
	position:fixed;
	right: 10px;
	bottom: 10px;
	width: 150px;
	height:fit-content;
	padding:5px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
	background-color: #fff;
}
.submitButton:hover{
	color:#fff;
	background-color:#c36;
	text-decoration:none;
}

.subtextParent {
	position:relative
}

.subtext {
	margin-left: 25px;
    display: inline-block;
    top: -10px;
}