@font-face {
    font-family: 'DIN_Regular';
	src: url("../fonts/D-DIN/D-DIN.ttf") format("truetype"),
		 url("../fonts/D-DIN/D-DIN.otf") format("opentype"),
		 url("../fonts/D-DIN/D-DIN.woff") format("woff"),
		 url("../fonts/D-DIN/D-DIN.woff2") format("woff2");
}
@font-face {
    font-family: 'DIN_Bold';
	src: url("../fonts/D-DIN/D-DIN-Bold.ttf") format("truetype"),
		 url("../fonts/D-DIN/D-DIN-Bold.otf") format("opentype"),
		 url("../fonts/D-DIN/D-DIN-Bold.woff") format("woff"),
		 url("../fonts/D-DIN/D-DIN-Bold.woff2") format("woff2");
}

html {
    font-family: 'DIN_Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
    margin: 0;
    padding: 0;
	min-height: 100vh;
    font: 16px/20px Helvetica, Arial, Verdana, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    background-color: #0a0a0a;
    background: linear-gradient(#0a0a0a, #353535);
    color: #FFF;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

img {
    border: 0;
    padding: 0;
    border-style: none;
}

a {
    font: 16px/20px Helvetica, Arial, Verdana, sans-serif;
    font-weight: 700;
    font-style: normal;
}

a:link {
    color: #ececec;
    text-decoration: none;
}

a:active {
    color: #ececec;
    text-decoration: none;
    outline: none;
}

a:visited {
    color: #ececec;
    text-decoration: none;
}

a:hover {
    color: #c9c9c9;
    text-decoration: none;
}

h1 {
    position: relative;
    font: 32px/32px "DIN_Bold";
    font-weight: 700;
    margin: auto;
}

p {
    margin: 15px 0;
}

button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.wrapper {
    width: 100%;
    text-align: center;
}

.section {
    display: block;
    position: relative;
    width: 95%;
    margin: 0 auto;
    max-width: 540px;
    text-align: center;
}

.logo {
    display: block;
    margin-bottom: 35px;
}

form {
    display: block;
    margin-top: 25px;
}

.form-input {
    display: block;
    font: 12px/50px Roboto, Helvetica, Arial, Verdana, geneva, sans-serif;
    width: 100%;
    height: 50px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    margin: 10px 0 0 0;
    padding: 8px 25px;
    background: #4a4a4a;
    border: 1px solid #FFFFFF80;
    border-radius: 4px;
    color: #FFF;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #AAA;
	opacity: 1; /* Firefox */
}

.form-input:focus {
    border: 1px solid #FFF;
}

.primary-button {
    background: #FFF;
    width: 100%;
    margin-top: 35px;
    padding: 0 25px;
    border-radius: 4px;
    color: #000;
    text-transform: uppercase;
    font: 14px/48px "DIN_Bold", Roboto, Helvetica, Arial, Verdana, geneva, sans-serif;
    font-weight: 700;
    height: 50px;
    max-width: 260px;
}

.primary-button:active {
    background: #CCC;
}

.top-links {
    margin-top: 15px;
    margin-bottom: 15px;
}

.network-detail {
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.network-detail .label {
    font-size: 14px;
}

.network-detail .value {
    margin-top: 10px;
    font-size: 20px;
    font-weight: bold;
}

p.error {
    font: 12px/20px Helvetica, Arial, Verdana, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: red;
}

.form-input.error {
    border: 1px solid #ff0000;
}

#mesh {
    margin-left: 20px;
}

label {
    font: 14px Roboto, Helvetica, Arial, Verdana, geneva, sans-serif;
}

.regulatory-label-link {
    display: block;
    margin-block-start: 2em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

/* Overrides for phone screens. */
@media only screen and (max-width: 768px) {
    .primary-button {
        max-width: unset;
    }

    .top-links {
        margin-top: 15px;
        margin-bottom: 50px;
    }

    .section {
        width: 80%;
    }

    .network-detail {
        margin-top: 50px;
    }
}