:root {
    --color-blue: #327BA9;
    --color-grey: #DBDADA;
    --color-test-pass: #61B841;
    --color-test-fail: #DE1F19;
    --color-test-inprogress: rgb(255, 255, 230);
    --color-gauge-yellow: rgb(255, 234, 118);
    --font-size-header: 21px;
    --font-size-bread: 13px;
    background-color: #2e2e2e;
}

body {
    background: rgb(250, 255, 255);
    color: rgb(80, 79, 79);
    font-family: "Arial, Helvetica Neue", Helvetica, sans-serif;
}

#header {
    height: 100px;
    width: 80%;
    margin: auto;
}

#logo-speedtest {
    float: left;
}

#logo-netrounds {
    float: right;
    height: 90%;
}

#box-error {
    display: none;
    width: 40%;
    height: 40%;
    background: white;
    border: 1px solid #ccc;
    border-radius: 20px;
    position: fixed;
    z-index: 650;
    margin: auto;
    left: 30%;
    top: 30%;
}

#box-error-header {
    width: 100%;
}

#box-error h1 {
    padding-left: 20px;
    float: left;
    font-size: var(--font-size-header);
}

#button-close-error {
    float: right;
    margin: 10px;
}

#error-message {
    width: 100%;
    float: left;
    font-size: var(--font-size-bread);
}

#box-content {
    padding: 20px;
    width: 80%;
    margin: auto;
}

#box-left {
    margin-left: 20px;
    width: 35%;
    float: left;
}

#box-right {
    width: 60%;
    float: right;
    margin-right: -20px;
    height: 100%;
}


#field-information {
    width: 100%;
}

    #field-information h2 {
        font-size: var(--font-size-header);
    }

    #field-information p {
        font-size: var(--font-size-bread);
    }

#field-control {
    margin-top: 50px;
}

    #field-control p {
        font-size: var(--font-size-bread);
    }

#field-measure {
    width: 95%;
}

#field-user {
    float: right;
    width: 200px;
    margin-bottom: -25px;
}

#icon-user {
    float: left;
    font-size: 40px;
    margin: auto;
}

#field-ip {
    margin-top: -12px;
    padding-left: 10px;
    float: left;
    font-size: var(--font-size-bread);
}

h4 {
    margin-bottom: 0px;
}

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    vertical-align: top;
    overflow: hidden;
}

.svg-container-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0px;
}

#field-result {
    margin-top: 30px;
    width: 95%;
    height: 40%;
}

#field-control {
    border: 1px solid black;
}

table {
    width: 100%;
}

#field-control th,
#field-control p {
    padding: 10px;
}

a {
    font-size: var(--font-size-bread);
}

.border {
    border: 1px solid black;
    border-radius: 10px;
}

.button {
    color: white;
    background: var(--color-blue);
    display: inline-block;
    text-decoration: none;
    border: none;
    border-radius: 15px;
    font-size: var(--font-size-header);
    padding: 10px;
}

#textarea-comment {
    width: 95%;
    float: left;
    font-size: var(--font-size-bread);
}


.table-setup-name {
    float: left;
    font-size: var(--font-size-bread);
}


#header-settings {
    padding-bottom: 5px;
    border-bottom: 1px solid black;
    margin: 0px;
    padding: 5px;
    background: var(--color-grey);
    font-size: var(--font-size-header);
}


#field-progressbar {
    margin-top: 10px;
    width: 100%;
}

progress {
    width: 63%;
    margin: auto;
    display: block;
    color: var(--color-blue);
    background-color: #FFFFFF;
    border: none;
    margin-bottom:40px;
}

#field-startbutton {
    height: 150px;
    width: 100%;
    margin-top: -15%;
}

#button-start {
    width: 150px;
    height: 100%;
    border-radius: 50%;
    border: none;
    display: block;
    margin: auto;
    position: relative;
    z-index: 500;
    background: white;
}

    #button-start i {
        width: 100%;
        height: 100%;
        font-size: 150px;
        color: var(--color-blue);
    }

#button-stop {
    display: none;
    float: right;
    margin-right: 30px;
    margin-bottom: 10px;
    margin-top: -40px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    font-size: var(--font-size-bread);
}

#table-result {
    border-collapse: collapse;
    font-size: 30px;
    width: 95%;
    margin: auto;
    font-size: var(--font-size-header);
}

    #table-result th,
    #table-result td {
        border: 1px solid black;
        padding: 0 10px;
    }

    #table-result tr:nth-child(2n-1) {
        background: var(--color-grey);
    }

    #table-result tr:nth-child(n+2) th:nth-child(2),
    #table-result tr:nth-child(n+2) td:nth-child(2) {
        opacity: 1;
    }

.table-result-name {
    width: 20%;
    text-align:left;
}

.table-result-unit {
    width: 20%;
    padding-left:5px;
    text-align: left;
}

.table-result-measured {
    width: 40%;
    padding-left: 10px;
}

.table-result-status {
    width: 50px;
}

.table-result-token {
    height: 50px;
    color: black;
}

.status {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: auto;
}

#status-download {
    background: var(--color-grey);
}

#status-upload {
    background: white;
}

#status-delay {
    background: var(--color-grey);
}

    #status-download .spinner,
    #status-upload .spinner,
    #status-delay .spinner {
        display: none;
        font-size: 30px;
    }

.spinner {
    width: 50%;
    height: 50%;
    margin: auto;
    margin-top: 25%;
    display: none;
}

.speed-meter .background {
    fill: var(--color-grey);
}

.speed-meter text {
    font-size: 50px;
    color: var(--color-blue);
}

.speed-meter .text-expected {
    font-size: var(--font-size-header);
    color: grey;
}

.text-speed {
    font-size: 30px;
}

.text-status {
    font-size: 30px;
}

.expected {
    color: white;
    background: white;
}

#InitialModalPage{

}

#SpeedTestModal{
    keyboard: false;
    backdrop: 'static';
}

#SpeedTestModalContent {
    height: auto;
}

#SpeedTestModalPage {
}

#ResultsModalPage {
}

#field-information{
    padding:20px;
}

#field-title {
    padding: 20px;
    text-align:center;
    font-size:20px;
}

#column{
    width:50px;
    margin:0;
    padding:0;
}

#speedTestButtons {
    text-align: center;
    margin: 0 auto;
    display: block;
    margin-bottom: 5px;
    margin-top: 15px;
}

#speedTestLinks {
    text-align: center;
    margin: 0 auto;
    display: block;
    margin-bottom: 10px;
    text-decoration: underline;
}

#speedTestLinks a {
    cursor: pointer;
}

#ModalPageHeader {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 15px;
}

#table-display-result{
    margin-bottom:10px;
}

#comment-form {
    margin-bottom: 15px;
    margin-top: 15px;
}

.just-text {
    text-align: justify;
}

.cent-text {
    text-align: center;
}

.crabbly_spinner {
    position: fixed;
    width: 75px;
    height: 75px;
    -webkit-animation: crabbly_spinner infinite .75s linear;
    -moz-animation: crabbly_spinner infinite .75s linear;
    -o-animation: crabbly_spinner infinite .75s linear;
    animation: crabbly_spinner infinite .75s linear;
    border: 5px solid rgba(125, 125, 125, 0.9);
    border-top-color: rgba(0, 0, 0, .1);
    border-right-color: rgba(0, 0, 0, .1);
    border-bottom-color: rgba(0, 0, 0, .1);
    border-radius: 100%;

    position: fixed;
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 50px;
    right: 0;
}

@keyframes crabbly_spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spinner-holder {
    width: auto;
    margin:140px;
}

#table-speedtest-body {
    font-size: 18px;
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
}

#field-info {
    padding-left: 20px;
    padding-right: 20px;
}