.search_box {
	width: 600px;
	margin: 20px auto;
}

.error_box {
	width: 560px;
    margin: 30px auto 20px auto;
    border: #fd8f8f 1px solid;
    background: #fbeaea;
    padding: 20px;
    font-size: 15px;
    line-height: 21px;
    color: #ba0000;
}

.search_box_left {
	width: 70%;
	float: left;
	position: relative;
}

.search_box_right {
	width: 30%;
	float: right;
}

.search_button {
	font-family: 'Montserrat';
	color: #FFFFFF;
	font-size: 13px;
	display: inline-block;
	line-height: 22px;
	padding: 17px 14px 16px 14px;
	text-align: center;
	letter-spacing: 1.86px;
	cursor: pointer;
	font-weight: 300;
	border: #2EB472 1px solid;
	background: #2EB472;
	margin: 0px;
	width: 100%;
}

.search_button:hover {
	background: #0CAB5F;
}

.search_button:active {
	background: #04a557;
	border: #028747 1px solid;
}

.search_input {
	background: #FFFFFF;
	padding: 19px 20px 16px 13px;
	font-size: 16px;
	margin: 0px;
	border: 0px;
	width: calc(100% - 33px);
	color: #39454c;
	border-bottom: solid 3px #FFFFFF;
}

.search_input::placeholder {
	opacity: 0.8;
	font-family: 'Montserrat';
	font-size: 14px;
	color: #3D4E57;
}

.search_input:focus {
	outline: none;
	border-bottom: solid 3px #2EB472;
	transition: all 0.5s linear;
	caret-color: #2EB472;
}

.introduction_holder {
	width: 100%;
	background: #F3F7F9;
	padding: 80px 0px;
}

.holder_bubble {
	background: #FFFFFF;
	border-radius: 4px;
	box-shadow: 0 13px 24px 0 rgba(233, 234, 235, 0.48);
	padding-top: 30px;
	padding-bottom: 30px;
	width: 1360px;
	margin-left: auto;
	margin-right: auto;
	/* Removed margin-top: -100px — was a legacy overlap trick that pulled the
	   results bubble under the v3 dark hero, hiding the top of the tile strip. */
}

.holder_orange_trial_area {
	background: #F99132;
	height: 316px;
	padding-top: 70px;
	width: 1360px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 60px;
	margin-bottom: -20px;
	position: relative;
	overflow: hidden;
}

.orange_trial_header {
	line-height: 40px;
	font-size: 30px;
	margin-left: 110px;
	color: #FFFFFF;
	font-weight: bold;
	font-style: normal;
}

.orange_trial_desc {
	margin-top: 40px;
	margin-left: 110px;
	margin-bottom: 10px;
	color: #FFFFFF;
	max-width: 600px;
	font-size: 18px;
	line-height: 28px;
	font-weight: 300;
}

.orange_trial_image {
	background: url('/website/img/orange-availability-trial.svg');
	width: 488px;
	height: 488px;
	position: absolute;
	top: -47px;
	right: 60px;
}


.orange_trial_form {
	margin-top: 40px;
	margin-left: 110px;
	text-align: left;
}

.orange_trial_input {
	background: #FFFFFF;
	padding: 10px;
	border: 1px solid #D9E2E8;
	box-sizing: border-box;
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	line-height: 22px;
	color: #3D4E57;
	mix-blend-mode: normal;
	width: 270px;
}

.orange_trial_button {
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	line-height: 15px;
	text-align: center;
	letter-spacing: 0.5px;
	color: #FFFFFF;
	border: #FFFFFF 1px solid;
	background: #F99132;
	display: inline-block;
	width: 171px;
	padding-top: 15px;
	padding-bottom: 14px;
	padding-left: 20px;
	padding-right: 20px;
	cursor: pointer;
	margin-left: 20px;
}

.orange_trial_button:hover {
	background: #f38e31;
}

.orange_trial_button:active {
	background: #e8872f;
}

.orange_trial_error {
	color: #ff0600;
	font-size: 13px;
	text-align: left;
	margin-left: 110px;
	width: 410px;
	margin-top: 30px;
	display: none;
}

@media screen and (max-width: 1380px) {
	.holder_orange_trial_area {
		width: 95%;
	}
}

@media screen and (max-width: 1250px) {
	.orange_trial_image {
		background: url('/website/img/orange-availability-trial.svg');
		width: 488px;
		height: 488px;
		position: absolute;
		top: -47px;
		right: -60px;
	}
}

@media screen and (max-width: 1000px) {
	.holder_orange_trial_area {
		display: none;
	}
}

.introduction_inside {
	width: 1200px;
	margin: 0px auto;
}

.introduction_inside_holder {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	width: 100%;
}

.intro_divider_left {
	float: left;
	width: 47%;
	margin-right: 3%;
}

.intro_divider_right {
	float: right;
	width: 47%;
	margin-left: 3%;
}

.introduction_image {
	width: 100%;
	height: auto;
}

.introduction-block-left {
	float: left;
	width: 45%;
}

.introduction-block-right {
	float: right;
	width: 45%;
}

.introduction-block-left.bottom, .introduction-block-right.bottom {
	margin-top: 35px;
}

h3.intro {
	color: #54656f;
	font-weight: bold;
	font-size: 26px;
	line-height: 41px;
	font-stretch: normal;
	font-style: normal;
	letter-spacing: normal;
	text-align: left;
	margin-top: 40px;
}

h3.intro.lower {
	margin-top: 60px;
}

h3.intro.header {
	text-align: center;
	margin-top: 80px;
}

h4.intro {
	color: #54656f;
	font-weight: bold;
	font-size: 22px;
	line-height: 32px;
	text-align: left;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
}

h4.website_go_down {
	font-family: 'Montserrat';
	font-size: 23px;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: center;
	color: #ffffff;
	margin-bottom: 10px;
}

.website_go_down_desc {
	font-family: 'Montserrat';
	font-size: 14px;
	font-weight: 300;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.57;
	letter-spacing: normal;
	text-align: center;
	color: #ffffff;
	padding-top: 10px;
	padding-bottom: 10px;
}

.website_go_down_holder {
	width: 450px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 80px;
	margin-top: 56px;
}

.website_go_down_holder_dark {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 80px;
	margin-top: 56px;
	background: rgba(0,0,0,0.8);
	border-radius: 10px;
	padding-bottom: 20px;
}


.website_go_down_dark_left {
	float: left;
	width: 240px;
	padding-left: 20px;
	padding-top: 30px;
	opacity: 1;
}

.website_go_down_dark_right {
	float: right;
	width: 470px;
	padding-right: 20px;
}

.website_go_down_dark_header {
	font-size: 23px;
	font-style: normal;
	font-weight: bold;
	text-align: left;
	line-height: 30px;
	color: #FFFFFF;
	padding-top: 30px;
}

.website_go_down_dark_desc {
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	line-height: 22px;
	color: #FFFFFF;
	text-align: left;
	padding-top: 10px;
}

.website_go_down_dark_form {
	margin-top: 20px;
	text-align: left;
}

.website_go_down_dark_input {
	background: #FFFFFF;
	padding: 10px;
	border: 1px solid #D9E2E8;
	box-sizing: border-box;
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	line-height: 22px;
	color: #3D4E57;
	mix-blend-mode: normal;
	width: 250px;
}

.website_go_down_dark_button {
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	line-height: 15px;
	text-align: center;
	letter-spacing: 0.5px;
	color: #FFFFFF;
	background: #2DB572;
	display: inline-block;
	width: 171px;
	padding-top: 15px;
	padding-bottom: 14px;
	padding-left: 10px;
	padding-right: 10px;
	cursor: pointer;
}

.website_go_down_dark_button:hover {
	background: #0CAB5F;
}

.website_go_down_dark_button:active {
	background: #04a557;
}

.website_go_down_dark_error {
	background-color: #fbe9e9;
	color: #ca1915;
	padding: 15px;
	font-size: 12px;
	text-align: left;
	width: 410px;
	margin-top: 20px;
	display: none;
	margin-bottom: 7px;
}

p.intro_desc {
	color: #3d4e57;
	font-weight: 300;
	font-size: 14px;
	line-height: 1.57;
	text-align: left;
}

.down_icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='17' viewBox='0 0 19 17'%3E%3Cpath fill='%23F37862' fill-rule='evenodd' d='M9.826 12.235c0 .442-.358.8-.8.8-.442 0-.8-.358-.8-.8 0-.442.358-.8.8-.8.442 0 .799.359.799.8v.002-.002zM9.026 1.5c-.065 0-.185.019-.259.149L1.543 14.161c-.075.13-.032.243 0 .298.032.057.108.15.258.15H16.25c.151 0 .227-.094.26-.15.031-.055.074-.168 0-.298L9.283 1.649c-.075-.13-.194-.149-.259-.149zm7.223 14.609H1.801c-.65 0-1.232-.336-1.557-.899-.325-.563-.325-1.235 0-1.798L7.467.899C7.793.336 8.375 0 9.025 0c.65 0 1.233.336 1.558.898v.001l7.224 12.512c.325.563.325 1.235 0 1.798s-.907.9-1.558.9zm-7.223-5.28c-.414 0-.75-.336-.75-.75V7.596c0-.414.336-.75.75-.75s.75.336.75.75v2.483c0 .414-.336.75-.75.75z'/%3E%3C/svg%3E");
	display: inline-block;
	width: 19px;
	height: 17px;
}

.up_icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath fill='%232BB371' fill-rule='evenodd' d='M7.655 10.798c-.192 0-.385-.074-.53-.22l-1.399-1.4c-.292-.293-.292-.768.001-1.06.294-.293.77-.293 1.062 0l.876.878 3.1-2.989c.297-.287.772-.279 1.06.02.287.297.278.772-.02 1.06l-3.629 3.501c-.146.14-.334.21-.52.21zM8.423 1.5C4.606 1.5 1.5 4.605 1.5 8.423c0 3.817 3.106 6.923 6.923 6.923s6.923-3.106 6.923-6.923c0-3.818-3.106-6.923-6.923-6.923zm0 15.346C3.778 16.846 0 13.067 0 8.423 0 3.778 3.778 0 8.423 0s8.423 3.778 8.423 8.423c0 4.644-3.778 8.423-8.423 8.423z'/%3E%3C/svg%3E");
	display: inline-block;
	width: 17px;
	height: 17px;
}

table.table {
	border-spacing: 0px;
	margin-top: 25px;
	width: 100%;
	border: solid 1px #d9e2e8;
}

.table td {
	padding: 15px;
	color: #696c6e;
	font-size: 14px;
	font-weight: 300;
	text-align: center;
	line-height: 1.57;
}

.table td.left, .table th.left {
	max-width: 200px;
	overflow: hidden;
	white-space: nowrap;
	text-align: left;
}

.table th {
	padding: 15px;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.1px;
	background: #5e7482;
	text-align: center;
	text-transform: uppercase;
}

.table tr:nth-child(even) {
	background: #ffffff;
}

.table-waterfall-headers {
	padding-left:60px;
	vertical-align: top;
}

.table tr:nth-child(odd) {
	background: #edf3f6;
}

table.table-analysis {
	border-spacing: 0px;
	margin-top: 25px;
	width: 100%;
	border: solid 1px #d9e2e8;
}

.table-analysis td {
	padding: 15px;
	color: #696c6e;
	font-size: 14px;
	font-weight: 300;
	text-align: left;
	line-height: 1.57;
	vertical-align: middle;
}

.table-analysis td.icon {
	width: 25px;
	padding-right: 0px
}

.table-analysis td.percent-graph {
	width: 120px;
	padding-right: 0px;
}

.table-analysis td.percent-number {
	padding-left: 0px;
}

.table-analysis td.footer-td {
	font-weight: 600;
	background: #ffffff !important;
}

.table-analysis  th {
	padding: 15px;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.1px;
	background: #5e7482;
	text-align: left;
	text-transform: uppercase;
	vertical-align: middle;
}

.table-analysis  tr:nth-child(even) {
	background: #ffffff;
}

.table-analysis  tr:nth-child(odd) {
	background: #edf3f6;
}



table.table-results {
	border-spacing: 0px;
	width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
}

.table-results td {
	padding: 14px 16px;
	color: #1f2937;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid #f1f3f5;
}

.table-results tbody tr:nth-child(even) td,
.table-results tr:nth-child(even) td {
	background-color: #f7fafc;
}

.table-results tr:last-child td {
	border-bottom: none;
}

.table-results td.icon {
	vertical-align: middle;
}

.table-results td.icon {
	vertical-align: middle;
	text-align: left;
}

.table-results td.icon {
	vertical-align: middle;
	text-align: center;
	font-size: 14px;
	font-weight: 300;
}

.table-results td.size {
	font-size: 14px;
	font-weight: 300;
	width: 40px;
}

.table-results td.progress {
	border-left: solid 2px #d9e2e8;
}

.request-response-body-left {
	width: 40%;
	float: left;
	overflow-x: hidden;
	word-wrap: anywhere;
}

.request-response-body-right {
	width: 50%;
	float: right;
	overflow-x: hidden;
	word-wrap: anywhere;
}

.request-response-header {
	font-size: 16px;
	font-weight: bold;
	margin-top: 20px;
}

.request-response-element {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.57;
	margin-top: 10px;
}

.explaination-holder {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid #eef2f5;
}

.explaination-body {
	width: 100%;
	max-width: 720px;
}

.explaination-body .sub-intro {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: #1f2937;
}

.explaination-body h4.sub-intro {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 400;
	color: #6b7280;
	line-height: 1.5;
}

.explaination-body > .icon-explaination-body:first-of-type {
	margin-top: 4px;
}

.icon-explaination-body {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 10px;
	margin: 0 8px 8px 0;
	background: #f7fafc;
	border: 1px solid #eef2f5;
	border-radius: 8px;
	vertical-align: top;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.icon-explaination-body:hover {
	background: #eef7f1;
	border-color: rgba(0, 163, 95, 0.25);
}

.explaination-text {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: #1f2937;
	white-space: nowrap;
}

.explaination-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin: 0;
	vertical-align: middle;
	object-fit: contain;
}

.time-graph {
	height: 28px;
	display: inline-block;
	margin-top: 10px;
}

.time-graph.green {
	background-color: #77c39d;
}

.time-graph.blue {
	background-color: #7aa2ba;
}

.graph-holder {
	width: 100%;
}

.content-analysis-box {
	width: 48%;
	margin: 0px;
	margin-top: 30px;
}

.content-analysis-box.left {
	float: left;
}

.content-analysis-box.right {
	float: right;
}

table.response-codes {
	border: 0px;
}

table.response-codes td {
	text-align: left;
	padding-bottom: 20px;
	font-size: 14px;
	color: #3d4e57;
	font-weight: 300;
}

table.response-codes td.green {
	font-weight: bold;
	color: #2db572;
	padding-right: 20px;
}

table.response-codes td.grey {
	font-weight: bold;
	color: #3d4e57;
	padding-right: 20px;
}

table.response-codes td.red {
	font-weight: bold;
	color: #f76146;
	padding-right: 20px;
}

.waterfall-url {
	font-family: 'Montserrat';
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.57;
	letter-spacing: normal;
	color: #3d4e57;
	max-width: 250px;
	overflow-x: hidden;
	overflow-y: hidden;
	max-height: 25px;
}

.waterfall-domain {
	font-family: 'Montserrat';
	font-size: 13px;
	font-weight: 300;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.69;
	letter-spacing: normal;
	color: #a0adb5;
	max-width: 250px;
	overflow-x: hidden;
}

.table-results-dotted {
	border-bottom: #3d4e57 1px dotted;
}

h3.sub-intro {
	font-family: 'Montserrat';
	font-size: 23px;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.3;
	letter-spacing: normal;
	color: #54656f;
	margin-bottom:15px;
}

h4.sub-intro {
	font-family: 'Montserrat';
	font-size: 14px;
	font-weight: 300;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.57;
	letter-spacing: normal;
	color: #3d4e57;
	margin-top:0px;
}

.table-results th {
	padding: 14px 16px;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	background: #1f2937;
	text-transform: uppercase;
	text-align: left;
}

.table-results th.seconds {
	text-transform: lowercase;
}

.expand-collapse-grey {
	margin-top:6px;
	margin-left:14px;
	width: 8px;
	height: 8px;
	padding: 4px;
	background-color: #54656f;
	border-radius: 15px;
	vertical-align: top;
}



.waterfall-locations {
	display: block;
	font-size: 14px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	color: #1f2937;
	line-height: 1.3;
	padding: 14px 40px 14px 38px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #d9e2e8;
	border-radius: 8px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='4' viewBox='0 0 9 4'%3E%3Cpath fill='%233D4E57' fill-rule='evenodd' d='M4.054 3.856L.184.84C-.061.647-.061.336.185.144a.762.762 0 0 1 .892 0L4.5 2.814 7.924.144a.762.762 0 0 1 .891 0c.247.192.247.503 0 .695l-3.87 3.017A.728.728 0 0 1 4.5 4a.729.729 0 0 1-.446-.144z'/%3E%3C/svg%3E");
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	font-family: 'Montserrat';
}
.waterfall-locations::-ms-expand {
	display: none;
}
.waterfall-locations:hover {
	border-color: #888;
}
.waterfall-locations:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}
.waterfall-locations option {
	font-weight:normal;
}

.waterfall-locations-holder {
	position: relative;
	margin-bottom: 30px;
}

.progress_holder_div {
	width: 100%;
	overflow-x: hidden;
	height: 42px;
	overflow-y: hidden;
}

.map-pin {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6' fill='none' stroke='%2300a35f' stroke-width='1.4'/%3E%3Ccircle cx='7' cy='7' r='2.4' fill='%2300a35f'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	pointer-events: none;
}

.progress-bar-container {
	width: 124px;
	height: 10px;
	border-radius: 13px;
	margin: 11.5px 10px 0 0;
	position: relative;
	border: solid 1px #cfdbe3;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	overflow: hidden;
	display: inline-block;
	vertical-align: top;
	background: #FFFFFF;
}

.progress-bar-child {
	color: white;
	text-align: center;
	line-height: 75px;
	font-size: 35px;
	animation-direction: reverse;
	background: #e5405e;
	background-image: none;
	background-image: linear-gradient(to right, #f76146 0%, #f79841 79px, #2db572 105px);
	height: 100%;
	display: flex;
	overflow: hidden;
	border-radius: 0.25rem;
}

.progress-bar-child.colorless {
	background: #d9e2e8;
	background-image: none;
}

.progress-score-number {
	font-size: 14px;
	display: inline-block;
}

.table-results-content-header {
	vertical-align: top;
}

.table-results-content-body {
	font-size: 14px;
	line-height: 3;
	font-weight:300;
}


.table-results-content-body.head {
	font-weight: 500;
	margin-top:20px;
}

.result_holder {
	width: 100%;
	background: #f3f7f9;
	padding: 30px 0px;
}

.results_top_left {
	float: left;
	width: calc(30% - 40px);
	padding-left: 40px;
	height: 280px;
}

.results_top_right {
	float: right;
	width: 65%;
	height: 280px;
}

.website-host {
	vertical-align: top;
	display: inline-block;
	max-width: 220px;
	overflow: hidden;
	height: 40px;
}

.website-name-result {
	font-family: 'Montserrat';
	font-size: 23px;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.6;
	letter-spacing: normal;
	text-align: left;
	color: #54656f;
	margin-left: 25px;
	width: 290px;
	height: 40px;
}

.website-result-favicon {
	padding: 7px;
	width: 26px;
	height: 26px;
	border-radius: 4px;
	box-shadow: 0 13px 24px 0 rgba(233, 234, 235, 0.48);
	background-color: #ffffff;
	border: solid 1px #d5e0e6;
	margin-top: -6px;
	margin-right: 10px;
}

.website-result-link {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cpath fill='%2354656F' fill-rule='evenodd' d='M9.904 9.904H1.096V1.096h3.856a.548.548 0 0 0 0-1.096H.43A.43.43 0 0 0 0 .43v10.14c0 .238.192.43.43.43h10.14a.43.43 0 0 0 .43-.43V6.029a.548.548 0 0 0-1.096 0v3.876zM6.358.594c0 .328.266.594.594.594h2.02L3.174 6.986a.594.594 0 1 0 .84.84l5.798-5.798v2.02a.594.594 0 0 0 1.188 0V.465A.465.465 0 0 0 10.535 0H6.952a.594.594 0 0 0-.594.594z'/%3E%3C/svg%3E");
	width: 11px;
	height: 11px;
	object-fit: contain;
	opacity: 0.5;
	display: inline-block;
	margin-left: 10px;
	margin-bottom: 14px;
	margin-top:10px;
}

.website-screenshots-browser {
	width: 342px;
	height: 230px;
	background-size: 100% auto;
	background-image: url('https://cdn.uptimia.com/website/img/svg/browser.svg');
	position: relative;
}

.website-screenshots-browser-picture {
	position: absolute;
	left: 25px;
	top: 33px;
	width: 290px;
	height: 180px;
	border-left: #E8E8E8 1px solid;
	border-right: #E8E8E8 1px solid;
	border-bottom: #E8E8E8 1px solid;
	border-radius: 0px 0px 8px 8px;
	box-shadow: 0px 0px 20px 5px rgb(232, 232, 232);
}

.results-link-box {
	position: relative;
	display: flex;
	box-sizing: border-box;
	width: 480px;
	margin-right: 0px;
}

.website-screenshots-browser-picture-img {
	width: 100%;
	height: 100%;
	border-radius: 0px 0px 10px 10px;
}


.website-screenshots-phone-picture-img {
	width: 100%;
	height: 100%;
}

.website-screenshots-holder {
	position: relative;
	width: 300px;
}

.website-screenshots-phone {
	border: solid 0.5px #c1c1c1;
	border-radius: 10px;
	background-image: linear-gradient(to bottom, #f7f6f7 20%, #e6e6e6);
	position: absolute;
	right: -75px;
	width: 98px;
	height: 178px;
	bottom: 0px;
}

.website-screenshots-browser-inside, .website-screenshots-phone-inside {
	width: 100%;
	height: 100%;
	position: relative;
}

.website-screenshots-phone-speaker {
	width: 17px;
	height: 2px;
	border-radius: 20px;
	border: solid 0.5px #D8D8D8;
	background: #D8D8D8;
	position: absolute;
	top: 10px;
	left: 41px;
}

.website-screenshots-phone-picture {
	position: absolute;
	left: 5px;
	top: 20px;
	width: 88px;
	height: 152px;
}

.result_inside {
	width: 1200px;
	margin: 0px auto;
	text-align: center;
}

.results-stats-holder {
	width: 100%;
}

.results-stats-actions {
	width: 100%;
	margin-top: 40px;
}

.results-stats-action {
	display: inline-block;
	margin-right: 10px;
}

#test-url-loader {
	min-width: 500px;
}


.share-link {
	font-size: 12px;
	color: #FFFFFF;
	display: block;
	font-weight: 400;
	text-align: center;
	cursor: pointer;
	border: 1px solid transparent;
	padding: .375rem .75rem;
	line-height: 1.5;
	border-radius: .25rem;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
}

.share-link.facebook {
	background-image: linear-gradient(to bottom, #4b68b9, #3b55a0);
}


.share-link.twitter {
	background-color: #1dadeb;
}

.share-link.email {
	background-color: #ffffff;
	border: solid 1px #b5cad7;
	color: #3d4e57;
}

.share-link:hover {
	text-decoration: none;
}

.results-stats-unit-desc {
	font-family: 'Montserrat';
	font-size: 12px;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: 1.1px;
	color: #a0adb5;
	text-transform: uppercase;
	margin-top: 10px;
}

.results-stats-unit.left {
	width: 200px;
	display: inline-block;
	border-right: solid 1px #d9e2e8;
	padding: 5px;
	margin-right: 40px;
}

.results-stats-unit.middle {
	width: 230px;
	display: inline-block;
	border-right: solid 1px #d9e2e8;
	padding: 5px;
	margin-right: 40px;
}

.results-stats-unit.right {
	width: 230px;
	display: inline-block;
	padding: 5px;
}

.results-stats-unit.bottom {
	margin-top: 50px;
}

.result-stats-stat {
	vertical-align: top;
	font-family: 'Montserrat';
	font-size: 30px;
	font-weight: 300;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: #54656f;
}

h4.result_head {
	color: #3d4e57;
	font-weight: bold;
	font-size: 24px;
	line-height: 32px;
	margin-top: 10px;
	text-align: center;
}

.result_box {
	display: inline-block;
	background: #f5f5f5;
	padding: 20px;
	margin: 0px 5px 20px 5px;
	border-radius: 3px;
	color: #3d4e57;
	width: 250px;
}


.result_box.red {
	background: #D46A6A;
	color: #FFFFFF;
}

p.result_box_head {
	text-align: center;
	font-weight: 700;
	font-size: 30px;
	line-height: 40px;
	margin: 10px 0px 0px 0px;
}

p.result_box_desc {
	text-align: center;
	font-weight: 500;
	font-size: 20px;
	line-height: 30px;
	margin: 0px 0px 10px 0px;
}

.result_box.left {
	background: #3d4e57;
	color: #FFFFFF !important;
}

.table_result_holder {
	width: 100%;
	background: #f3f7f9;
	padding: 30px 0px 50px 0px;
}

.table_result_holder {
	background: #FFFFFF;
}

.table_result_inside {
	width: 1200px;
	margin: 0px auto;
	text-align: center;
}

.usage_desc {
	font-family: 'Montserrat';
	font-size: 14px;
	font-weight: 300;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.57;
	letter-spacing: normal;
	text-align: left !important;
	color: #3d4e57;
	padding-bottom: 10px;
}

.status_up {
	background-color: #48B077;
	padding: 6px;
	font-size: 12px;
	color: #FFFFFF;
}

.status_down {
	background-color: #B0413E;
	padding: 6px;
	color: #FFFFFF;
}

.global-results {
	padding-top: 40px;
	width: 100%;
	max-width: 1360px;
	margin: 0px auto;
}

.other-results {
	padding-top: 40px;
	padding-bottom: 40px;
	width: 100%;
	max-width: 1360px;
	margin: 0px auto;
}

.display-block-box-holder {
	border-radius: 16px;
	box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.03);
	border: 1px solid rgba(15, 23, 42, 0.05);
	background-color: #ffffff;
	width: 100%;
	margin-top: 24px;
	overflow: hidden;
}

.display-block-box-head {
	padding: 20px 28px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.display-block-box-content {
	padding: 28px;
	border-top: 1px solid #eef2f5;
}

.performance-grade-box {
	padding-left: 4px;
	padding-right: 4px;
}

.performance-grade-speed-icon {
	width: 22px;
	height: 14px;
	margin-top:2px;
	margin-right:10px;
}

.performance-grade-speed-big {
	font-family: 'Montserrat';
	font-size: 20px;
	font-weight: 300;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	color: #54656f;
}

.performance-grade-speed-small {
	font-family: 'Montserrat';
	font-size: 12px;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: 1.1px;
	color: #a0adb5;
	text-transform: uppercase;
	line-height: 43px;
	margin-left: 10px;
}


.display-block-box-head-title {
	font-family: 'Montserrat';
	font-size: 17px;
	font-weight: 700;
	color: #1f2937;
	display: flex;
	align-items: center;
	gap: 14px;
}

.display-block-box-head-action {
	font-family: 'Montserrat';
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: #00a35f;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}

.display-block-box-head-action .accordion-chevron {
	width: 12px;
	height: 12px;
	transition: transform 0.2s ease;
}

.display-block-box-head-action.is-open .accordion-chevron {
	transform: rotate(180deg);
}

.display-block-box-head-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background-color: #00a35f;
	color: #ffffff;
	margin: 0;
	flex-shrink: 0;
}

.display-block-box-head-icon svg {
	width: 22px;
	height: 22px;
}

.display-block-box-head-collapse {
	margin-top:0px;
	margin-left:14px;
	width: 8px;
	height: 8px;
	padding: 6px;
	background-color: #2db572;
	border-radius: 15px;
	cursor: pointer;
}

.display-block-box-head-text {
	vertical-align: top;
}

.tab-box {
	margin-top: 30px;
}

.tabs-head {
	height: 57px;
	width: 100%;
}

.tab-element {
	font-family: 'Montserrat';
	font-size: 12px;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: 1.1px;
	text-align: center;
	color: #a0adb5;
	padding: 22px;
	text-transform: uppercase;
	display: inline-block;
	cursor: pointer;
}

.tab-element.selected, .tab-element:hover {
	color: #3d4e57;
	background: #FFFFFF;
	border-top: solid 2px #2db572;
	cursor: pointer;
}

.tabs-content {
	background: #FFFFFF;
	min-height: 300px;
	width: 100%;
}



.global-results-table-holder {
	padding: 20px;
}

.waterfall-icon {
	width: 22px;
	height: 20px;
	margin-right: 8px;
	display: inline-flex;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='20' viewBox='0 0 22 20'%3E%3Cpath fill='%232BB371' fill-rule='evenodd' d='M13.832 15.817c.16.027.342.042.557.042.43 0 .716-.06.973-.15h-.057V2.449c0-.48-.373-.9-.86-.9h-5.52v4.62c0 .27-.2.51-.486.51-.258 0-.487-.21-.487-.51V1.55h-.6c-.458 0-.859.39-.859.9v13.26c.258.09.572.15 1.002.15.2 0 .343 0 .486-.03v-7.35c0-.27.2-.51.486-.51.258 0 .487.21.487.51v7.02c0-.03.029-.03.029-.03.457-.24.972-.48 1.945-.48.973 0 1.487.27 1.945.48l.209.1-.002-.048V8.48c0-.253.173-.479.42-.479s.42.226.42.479v7.042c0 .11-.032.213-.088.296zm7.422.042c.286 0 .486.24.601.51 0 .27-.2.51-.486.51-.973 0-1.488-.27-1.946-.48-.428-.21-.772-.39-1.515-.39-.745 0-1.116.18-1.517.39-.457.24-.973.48-1.945.48-.973 0-1.487-.27-1.946-.48-.428-.21-.772-.39-1.515-.39-.744 0-1.115.18-1.516.39-.23.09-.43.21-.716.3-.085.06-.17.09-.257.09h-.029c-.257.06-.572.09-.943.09-.973 0-1.488-.27-1.945-.48-.401-.21-.773-.39-1.517-.39-.744 0-1.115.18-1.516.39-.457.24-.973.48-1.945.48-.257 0-.487-.21-.487-.51 0-.27.2-.51.487-.51.743 0 1.115-.18 1.515-.39.459-.24.973-.48 1.946-.48.659 0 1.087.12 1.459.27V3.168H.6c-.257 0-.487-.21-.487-.51 0-.27.2-.51.487-.51H5.55c.143-.93.915-1.62 1.83-1.62h7.095c.916 0 1.688.69 1.83 1.62h4.95c.257 0 .485.21.485.51 0 .27-.2.51-.486.51h-4.92v12.09c.343-.15.801-.27 1.46-.27.972 0 1.487.27 1.944.48.43.21.773.39 1.516.39zm.254 3.061c.29 0 .492.255.492.54 0 .286-.203.54-.492.54-.984 0-1.506-.285-1.969-.508-.434-.222-.781-.412-1.533-.412-.754 0-1.13.19-1.535.412-.463.254-.985.508-1.969.508-.984 0-1.504-.285-1.968-.508-.434-.222-.782-.412-1.534-.412s-1.13.19-1.534.412c-.464.254-.984.508-1.968.508s-1.506-.285-1.969-.508c-.405-.222-.781-.412-1.535-.412-.752 0-1.128.19-1.533.412-.464.254-.985.508-1.969.508C.231 20 0 19.778 0 19.46c0-.285.203-.54.492-.54.752 0 1.128-.19 1.534-.412.463-.255.984-.508 1.968-.508.985 0 1.506.285 1.969.508.405.222.781.412 1.535.412.752 0 1.128-.19 1.534-.412.462-.255.984-.508 1.968-.508s1.506.285 1.968.508c.434.222.782.412 1.534.412.754 0 1.13-.19 1.535-.412.463-.255.984-.508 1.969-.508.984 0 1.504.285 1.968.508.434.222.782.412 1.534.412zM11.5 3c.247 0 .42.241.42.511V14.49c0 .27-.173.51-.42.51-.222 0-.42-.21-.42-.51V3.51c0-.27.173-.511.42-.511z'/%3E%3C/svg%3E");
}

.recommendations-icon {
	width: 18px;
	height: 16px;
	margin-right: 8px;
	display: inline-flex;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18' height='16' viewBox='0 0 18 16'%3E%3Cdefs%3E%3Cpath id='prefix__a' d='M0 0L18 0 18 16 0 16z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='prefix__b' fill='%23fff'%3E%3Cuse xlink:href='%23prefix__a'/%3E%3C/mask%3E%3Cpath fill='%232BB371' d='M3.946 11.292c.143 0 .287-.055.398-.164l4.193-4.161c.146-.145.384-.145.53 0l1.443 1.432c.566.562 1.555.562 2.122 0l3.847-3.82v1.793c0 .31.253.56.563.56.31 0 .563-.252.563-.56v-3.14c0-.072-.015-.145-.043-.212-.058-.137-.167-.245-.304-.303-.069-.027-.142-.042-.215-.042h-3.164c-.311 0-.562.25-.562.558 0 .308.251.559.562.559h1.806l-3.848 3.817c-.146.144-.383.144-.53 0L9.864 6.177c-.584-.58-1.536-.58-2.12 0l-4.193 4.16c-.22.219-.22.572 0 .791.108.109.251.164.395.164M18 15.442c0 .309-.251.558-.562.558H1.5C.673 16 0 15.333 0 14.512V.559C0 .25.251 0 .562 0c.31 0 .562.25.562.56v13.952c0 .205.17.373.376.373h15.938c.31 0 .562.249.562.557' mask='url(%23prefix__b)'/%3E%3C/g%3E%3C/svg%3E");
}

.analysis-icon {
	width: 24px;
	height: 15px;
	margin-right: 8px;
	display: inline-flex;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='15' viewBox='0 0 24 15'%3E%3Cpath fill='%232BB371' d='M16.221 13.655v-6.05c0-.944.765-1.709 1.71-1.709h1.456c.945 0 1.71.765 1.71 1.71v6.049h2.054c.276 0 .5.224.5.5s-.224.5-.5.5H.5c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h2.055V6.487c0-.945.765-1.71 1.709-1.71H5.72c.944 0 1.709.765 1.709 1.71v7.168h1.958V1.71c0-.945.765-1.71 1.71-1.71h1.456c.944 0 1.71.765 1.71 1.71v11.945h1.957zM6.43 6.487c0-.392-.317-.71-.71-.71H4.265c-.392 0-.71.318-.71.71v7.165H6.43V6.487zm6.833 7.165V1.71c0-.393-.317-.71-.709-.71h-1.457c-.391 0-.709.317-.709.71v11.942h2.875zm6.833 0V7.606c0-.392-.317-.71-.709-.71H17.93c-.391 0-.709.318-.709.71v6.046h2.875z'/%3E%3C/svg%3E");
}

.summary-loader {
	max-width: 180px;
	min-height: 35px;
}






@media screen and (max-width: 1380px) {

	.holder_bubble, .other-results {
		width: 95%;
	}

	.tab-box {
		width: 95%;
		margin: 30px auto 0px auto;
	}

	.global-results {
		width: 100%;
	}

}

@media screen and (max-width: 1350px) {

	.results_top_left {
		padding-left: 20px;
	}

	.result-stats-stat {
		font-size: 26px;
	}

	.results-stats-unit-desc {
		font-size: 10px;
	}

	.results-stats-unit.left, .results-stats-unit.middle, .results-stats-unit.right {
		width: 180px;
	}

	.results_top_right {
		width: 64%;
	}

	.results-stats-action {
		margin-right: 0px;
	}



}

@media screen and (max-width: 1280px) {
	#test_url_holder {
		width: 410px;
	}

	#test_url_loader {
		min-width: 0px;
	}
}

@media screen and (max-width: 1250px) {
	.introduction_inside, .result_inside, .table_result_inside {
		width: calc(100% - 60px);
		padding: 0px 30px;
	}



}

@media screen and (max-width: 1180px) {
	.website-screenshots-phone {
		display: none;
	}

	.results_top_left {
		width: 30%;
	}

	.results_top_right {
		width: 65%;
	}

	.global-load-time-avg {
		left: 0px;
	}

	.results-link-box {
		width: 410px;
	}
}

@media screen and (max-width: 1100px) {
	.website-screenshots-browser-picture {
		width: 212px;
		height: 128px;
		left: 19px;
		top: 24px;
	}

	.website-screenshots-browser {
		width: 250px;
		height: 165px;
	}

	.results_top_left {
		width: 25%;
	}

	.results_top_right {
		width: 71%;
	}


}

@media screen and (max-width: 1050px) {
	.global-results-map-holder {
		margin-left: -50px;
	}

	#average_speed_map_holder {
		left: 90px;
	}

	.website-host {
		max-width: 180px;
	}
}

@media screen and (max-width: 1015px) {
	#test_twitter_holder, #test_facebook_holder {
		display: none !important;
	}

	#test_url_loader {
		max-width: 100%;
		width: calc(100% - 30px);
	}

	#test_url_holder {
		width: 100%;
	}
}

@media screen and (max-width: 1000px) {
	.map_area_holder {
		display: none;
	}

	.global-results, .other-results {
		display: none;
	}

	.results-stats-unit.right {
		display: none;
	}

	.results-stats-unit.middle {
		border-right: none;
	}

	.results_top_right {
		margin-left: 30px;
		float: left;
		width: 500px;
	}

	.results_top_left {
		width: 250px;
	}

	.global-load-time-avg {
		left: 40px;
	}
}

@media screen and (max-width: 900px) {
	.intro_divider_left, .intro_divider_right {
		width: 100%;
		margin: 0px;
	}

	.table td.optional, .table th.optional {
		display: none;
	}

	.introduction-block-left, .introduction-block-right {
		float: left;
		width: 100%;
		margin-bottom: 35px;
	}

	.introduction-block-left.bottom, .introduction-block-right.bottom {
		margin-top: 0px;
	}
}


@media screen and (max-width: 850px) {
	.results_top_left {
		display: none;
	}

	.website_go_down_holder_dark {
		display: none;
	}

	.results-stats-unit.right {
		display: inline-block;
	}

	.results-stats-unit.middle {
		border-right: solid 1px #d9e2e8;
	}

	.results_top_right {
		width: calc(100% - 30px);
		margin-left:0px;
		padding-left: 30px;
	}

	.results-stats-unit.left, .results-stats-unit.middle {
		margin-right: 20px;
	}

	.results-stats-unit.right {
		margin-right: 0px;
	}

	.summary-loader {
		max-width: 150px;
	}
}

@media screen and (max-width: 700px) {



	.search_box {
		width: 100%;
	}

	.error_box {
		width: calc(100% - 40px);
	}

	.table td.left {
		max-width: 100px;
	}

	.search_box_left {
		float: none;
		display: inline-block;
		width: 300px;
		padding: 0px;
	}

	.search_box_right {
		float: none;
		display: inline-block;
		width: 170px;
		padding: 0px;
	}

	.search_input {
		padding: 14px 10px 14px 13px;
		width: calc(100% - 23px);
	}

	.search_button {
		padding: 13px 14px;
	}
}

@media screen and (max-width: 670px) {
	.results-stats-unit.right {
		display: none;
	}

	.results-stats-unit.middle {
		border-right: none;
	}

	.results-stats-actions {
		display: none;
	}

	.results-stats-unit {
		width: 35%;
	}

	.results_top_right {
		height: auto;
	}
}


@media screen and (max-width: 550px) {


	.main_header_medium {
		padding-top: 40px;
	}

	.search_box_left {
		width: 50%;
	}

	.website_go_down_holder {
		width: 100%;
	}
}

@media screen and (max-width: 450px) {
	.results-stats-unit-desc {
		font-size: 9px;
	}

	.results-stats-unit.left {
		width: 150px;
	}

	.results-stats-unit.middle {
		width: 150px;
		margin-right: 0px;
	}
}


/* ═════════ Hero CTA card (shown in the dark hero when has_hash == true) ═════════
   The template at templates/website/availability-test-frontpage.html.twig:88-102
   renders this block, but no CSS existed for it anywhere on the site, so it
   appeared as raw unstyled HTML on top of the dark hero. Styled to sit on the
   .hero.on-dark background with light text and an accent-green submit button. */

.hero-cta-card {
	display: flex;
	align-items: center;
	gap: 28px;
	max-width: 760px;
	margin: 28px auto 0;
	padding: 24px 28px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 16px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.hero-cta-illustration {
	flex-shrink: 0;
	width: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-cta-illustration img {
	max-width: 100%;
	height: auto;
}

.hero-cta-body {
	flex: 1;
	min-width: 0;
}

.hero-cta-h {
	margin: 0 0 6px;
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.3;
}

.hero-cta-p {
	margin: 0 0 14px;
	font-family: 'Montserrat', sans-serif;
	font-size: 13.5px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.5;
}

.hero-cta-form {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.hero-cta-input {
	flex: 1;
	min-width: 0;
	padding: 11px 14px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	outline: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.hero-cta-input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.hero-cta-input:focus {
	border-color: rgba(0, 163, 95, 0.6);
	background: rgba(255, 255, 255, 0.14);
}

.hero-cta-btn {
	flex-shrink: 0;
	padding: 11px 18px;
	font-family: 'Montserrat', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: #ffffff;
	background: #00a35f;
	border: 1px solid #00a35f;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, transform 0.05s ease;
}

.hero-cta-btn:hover {
	background: #00b86c;
	border-color: #00b86c;
}

.hero-cta-btn:active {
	transform: translateY(1px);
}

.hero-cta-error {
	margin-top: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	color: #fb7185;
}

@media (max-width: 720px) {
	.hero-cta-card {
		flex-direction: column;
		text-align: center;
		gap: 18px;
		padding: 20px;
	}

	.hero-cta-illustration {
		width: 72px;
	}

	.hero-cta-form {
		flex-direction: column;
	}
}


/* ═════════ Post-test signup modal (#avSignupModal) ═════════════════════════
   Template at templates/website/availability-test-frontpage.html.twig:450-477
   wires up the modal — overlay starts with aria-hidden="true" and the JS in
   the same file adds class .is-open to open it. No CSS for the classes used
   existed anywhere on the site, so the modal rendered as inline raw HTML at
   the bottom of the page. */

.av-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease;
}

.av-modal-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.av-modal-overlay[aria-hidden="true"]:not(.is-open) {
	visibility: hidden;
}

.av-modal {
	position: relative;
	display: flex;
	width: 100%;
	max-width: 720px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
	overflow: hidden;
	transform: translateY(8px);
	transition: transform 0.18s ease;
}

.av-modal-overlay.is-open .av-modal {
	transform: translateY(0);
}

.av-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, 0.05);
	border: none;
	border-radius: 8px;
	color: #4b5563;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	z-index: 1;
}

.av-modal-close:hover {
	background: rgba(15, 23, 42, 0.1);
	color: #1f2937;
}

.av-modal-left {
	flex-shrink: 0;
	width: 240px;
	background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 24px;
}

.av-modal-left img {
	max-width: 100%;
	height: auto;
	max-height: 220px;
}

.av-modal-right {
	flex: 1;
	min-width: 0;
	padding: 32px 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.av-modal-header {
	margin: 0 0 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #1f2937;
	line-height: 1.3;
}

.av-modal-desc {
	margin: 0 0 18px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #6b7280;
	line-height: 1.55;
}

.av-modal-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.av-modal-input-row {
	width: 100%;
}

.av-modal-input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	color: #1f2937;
	background: #ffffff;
	border: 1px solid #d9e2e8;
	border-radius: 8px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.av-modal-input::placeholder {
	color: #9ca3af;
}

.av-modal-input:focus {
	border-color: #00a35f;
	box-shadow: 0 0 0 3px rgba(0, 163, 95, 0.15);
}

.av-modal-error {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	color: #dc2626;
	line-height: 1.4;
}

.av-modal-button {
	width: 100%;
	padding: 12px 18px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: #ffffff;
	background: #00a35f;
	border: 1px solid #00a35f;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
}

.av-modal-button:hover {
	background: #00b86c;
	border-color: #00b86c;
}

.av-modal-button:active {
	transform: translateY(1px);
}

.av-modal-foot {
	margin-top: 14px;
	text-align: center;
}

.av-modal-later {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	color: #00a35f;
	text-decoration: none;
	cursor: pointer;
}

.av-modal-later:hover {
	text-decoration: underline;
}

@media (max-width: 640px) {
	.av-modal {
		flex-direction: column;
		max-width: 460px;
	}

	.av-modal-left {
		width: 100%;
		padding: 24px;
	}

	.av-modal-left img {
		max-height: 140px;
	}

	.av-modal-right {
		padding: 24px 24px 28px;
	}

	.av-modal-header {
		font-size: 18px;
	}
}



/* ═════════ World map mockup background (.av-map-stage--real) ═══════════════
   The template at availability-test-frontpage.html.twig:212 uses the --real
   variant of .av-map-stage to overlay positioned probe dots on a world map.
   The variant had no CSS, so the dots floated on a plain gradient with no map
   underneath. Sets the world map SVG (1146×555) as background, preserves
   aspect ratio, and gives the stage a sensible min-height so the dots land
   on the correct continents. */

.av-map-stage--real {
	background-image:
		linear-gradient(180deg, rgba(248, 250, 249, 0) 0%, rgba(241, 245, 243, 0.4) 100%),
		url("/website/img/svg/map.svg");
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-size: cover, contain;
	aspect-ratio: 1146 / 555;
	min-height: 260px;
}

/* At narrow widths the 260px min-height forces the stage taller than its
   natural aspect, leaving the world-map image floating in the middle of an
   over-tall container. Probe dots positioned by percentage then land in
   the empty space above/below the map, looking like they overflowed.
   Drop the min-height on phones so the stage shrinks with the map. */
@media (max-width: 720px) {
	.av-map-stage--real {
		min-height: 0;
	}
}

/* On very narrow screens the .av-map card padding eats too much room
   and the legend in the head crashes into the title — tighten both. */
@media (max-width: 560px) {
	.av-map { padding: 14px 12px 12px; }
	.av-map-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 10px;
	}
	.av-map-legend { gap: 10px; }
	.av-map-strip { gap: 6px; margin-top: 10px; }
	.ams { padding: 5px 8px; font-size: 11px; }
}

.av-map-stage--real .av-dot {
	position: absolute;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.18);
}

.av-map-stage--real .av-dot.up    { background: #16a34a; }
.av-map-stage--real .av-dot.slow  { background: #f59e0b; }
.av-map-stage--real .av-dot.down  { background: #dc2626; animation: av-dot-pulse 1.4s ease-out infinite; }

@keyframes av-dot-pulse {
	0%   { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 0 0 0 rgba(220, 38, 38, 0.55); }
	70%  { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 0 0 8px rgba(220, 38, 38, 0); }
	100% { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 0 0 0 rgba(220, 38, 38, 0); }
}