.value-program-result {
	.dark-blue {
		color: #fff;
		background-color: #0051a5;
	}

	.desktop-only {
		.pricing {
			h3 {
				font-size: 34px !important;
			}
			p {
				font-size: 14px !important;
			}
		}
	}

	.avion-info {
		p {
			color: #252525;
			font-weight: 400;
		}
	}

	.mobile-only {
		@media only screen and (max-width: 639px) {
			.pricing {
				h3 {
					font-size: 28px !important;
				}
				p {
					font-size: 12px !important;
				}
			}
		}
	}
}

.modal-container {
	display: flex;
	align-items: flex-start;
	gap: 64px;
	background-color: #e1ebef;
	border-radius: 8px;
	border: 1px solid #b3b3b3;

	&::after {
		border: none;
	}

	@media only screen and (max-width: 639px) {
		.modal:after {
			border: 0px !important;
		}
		.modal {
			overflow: auto !important;
		}
	}

	.modal-inner {
		max-height: 95vh;
	}
}

.results-container {
	display: flex;
	gap: 8px;
}

.monthly-blue-container {
	flex-basis: 431px;
	background-color: #0051a5;
	border-radius: 8px;
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	justify-content: space-between;
	color: #fff;

	@media only screen and (max-width: 768px) {
		flex-basis: 50%;
		width: 50%;
		padding: 19.7px;
		flex-direction: column;
	}

	.icon__fee {
		display: flex;
		align-items: center;
		gap: 15px;

		@media only screen and (max-width: 768px) {
			flex-direction: column;
		}

		h4 {
			font-size: 26px !important;
			font-family: Roboto;
			text-align: center;

			@media only screen and (max-width: 768px) {
				font-size: 18px !important;
			}
		}

		img {
			width: 32px;
			height: 32px;
			object-fit: cover;

			@media only screen and (max-width: 768px) {
				width: 23.48px;
				height: 23.48px;
			}
		}
	}
}

.avion-point-white-container {
	flex: 1;
	background-color: #fff;
	border-radius: 8px;
	padding: 16px;

	@media only screen and (max-width: 768px) {
		flex-basis: 50%;
		width: 50%;
	}

	.avion-info {
		display: flex;
		flex-direction: column;
		gap: 14.5px;
		height: 100%;

		.val {
			font-weight: 500 !important;
			font-size: 18px !important;
		}

		.text {
			font-weight: 400 !important;
			font-size: 14px !important;
		}

		img {
			width: 100%;
			object-fit: contain;
			height: 24px;
		}
	}
}

.result-value-container {
	text-align: center;

	.calc-widget-monthly-fee {
		font-size: 34px !important;
		font-weight: 500;

		@media only screen and (max-width: 768px) {
			font-size: 28px !important;
		}
	}

	p {
		font-size: 14px !important;
		font-weight: 400;

		@media only screen and (max-width: 768px) {
			font-size: 12px !important;
		}
	}
}

@media only screen and (max-width: 639px) {
	.rounded-corners {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}
}

@media only screen and (max-height: 865px) {
    .modal .close {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 15px;
        z-index: 300;
        cursor: pointer;
    }

	.modal .close:before {
        content: url(/dvl/v1.0/assets/images/ui/ui-close-blue.svg);
        display: inline-block;
        height: 15px;
        width: 15px;
        line-height: 0;
        font-size: 0;
    }
}