@font-face {
  font-family: 'Branding';
  font-weight: 400;
  src: url('./Fonts/Branding-Medium.otf');
}

@font-face {
  font-family: 'Branding';
  font-weight: bold;
  src: url('./Fonts/Branding-Bold.otf');
}


#speedtest-container {
	margin: 0;
	font-family: "Branding",sans-serif;
	text-align: center;
	padding-bottom: 30px;
	padding: 0 20px;
}

.speedtest-title {
	margin-top: 30px;
	font-size: 50px;
	font-weight: 500;
	color: white;
	line-height: 45px;
}

.speedtest-title span {
	color: #53AA72;
}

#speedtest {
	margin-top: 50px;
	margin-bottom: 50px;
	padding-left: 100px;
}

@media (max-width: 768px) {
	#speedtest {
		padding-left: 13%;
	}
}

#speedtest svg {
   	max-width: 100%;
}

#startStopBtn {
	margin: 0 auto;
	color: black;
	background-color: #53AA72;
	transition: all 0.3s;
	box-sizing: border-box;
	cursor: pointer;
	width: fit-content;
    padding: 7px 15px;
    font-weight: bold;
}
#startStopBtn:hover{
	opacity: 0.8;
}
#startStopBtn:before{
	content: "Je lance le speedtest";
}
#startStopBtn.running:before{
	content: "Interrompre le test";
}

.type_title.active {
	fill: #53AA72;
}
.type_icon.active,.type_desc.active {
	fill: #FFFFFF;
}

.results-title {
	font-size: 30px;
	font-weight: bold;
	color: white;
}

.results-title span {
	color: #53AA72;
}

.results-texte {
	font-size: 14px;
	color: white;
	padding-top: 20px;
	max-width: 650px;
    margin: auto;
}

.results-texte span {
	color: #53AA72;
	font-weight: bold;
}

#results-buttons {
	margin-top: 35px;
}

.results-button {
	display: inline-block;
	color: black;
	background-color: white;
	transition: all 0.3s;
	box-sizing: border-box;
	cursor: pointer;
	width: fit-content;
    padding: 7px 15px;
    font-weight: bold;
}

.results-button:hover{
	opacity: 0.8;
}

.speedtest-modal-overlay {
    background-color: #0000009e;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 101;
    display: flex;
    align-items: center;
    justify-content: center;
}

.speedtest-modal-container {
    background-color: white;
    padding: 45px;
    border-radius: 15px;
    min-width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 102;
}

.speedtest-modal-close {
	cursor: pointer;
	position: absolute;
	top: 15px;
	right: 15px;
}

.speedtest-modal-result-item {
    text-align: left;
    line-height: 16px;
}

.speedtest-modal-result-item-a {
    font-size: 12px;
}

.speedtest-modal-result-item-b {
    color: green;
    font-size: 16px;
    font-weight: 600;
}

.more-result {
    font-size: 30px;
}