html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
}

.body-content {
    margin: 0 auto;
    max-width: 1020px;
}

#global-header,
#global-footer {
    flex: 0 0 auto;
}

#content {
    flex: 1 1 auto;
}

/* hmmm */
#content > .body-content {
    padding: 0 1rem;
    font-size: 19px;
}

a:link {
    color: #6b0504;
}

a:visited {
    color: rgb(68, 3, 2);
}

a:hover {
    color: rgb(145, 4, 2);
}

a:active {
    color: rgb(141, 7, 5);
}

/**
 ** FOOTER
 **/

#global-footer {
    border-top: 10px solid #6b0504;
    background-color: #dee0e2;
    padding: 1rem 0;
}

#global-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#global-footer li {
    display: inline-block;
    padding: 0.5rem 1rem;
}

#global-footer a {
    color: #454a4c;
}


.login-wrapper {
    display: flex;
    min-height: 50px;
    flex-direction: column;
}

.login-wrapper > .input {
    flex: 1 1 auto;
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25;
    height: 50px;
    padding: 0 0.5em;
    border: none;
}

.textInputLogin {
    background-color: #fff;
    width: 100%;
    height: 32px;
    padding: 10px;
    font-size: 24px;
    font-weight: 700;
    font-family: Arial, sans-serif;
    border: #000 solid;
    padding-top: 24px;
    padding-bottom: 24px;
    margin-bottom: 10px;
}


.bigButton {
    background-color: #e3e3e3;
    padding: 10px;
    font-size: 24px;
    font-weight: 700;
    font-family: Arial, sans-serif;
    border: #000 solid;
}

.textInputLogin {
    background-color: #fff;
    width: 100%;
    height: 32px;
    padding: 10px;
    font-size: 24px;
    font-weight: 700;
    font-family: Arial, sans-serif;
    border: #000 solid;
    padding-top: 24px;
    padding-bottom: 24px;
    margin-bottom: 10px;
}

/**
 ** HEADER
 **/
.global-header-top {
    float: left;
    height: 64px;
}

#global-header {
    background-color: #0b0c0c;
    padding: 1rem;
    width: calc(100% - 85px);
}

#global-header-blob {
    width: 101px;
    height: 66px;
    background-color: #700;
    float: right;
    padding: 5px;
    text-align: center;
    margin-top: -66px;
}

#global-header-bar {
    width: 100%;
    height: 23px;
    background-color: #700;
    float: left;
    padding-left: 7px;
    margin-top: -15px;
    display: none;
}

.auth-header-blob {
    width: 45px;
    height: 64px;
    background-color: #700;
    float: right;
}

#auth-header-text {
    color: #fff;
    margin: 0;
    position: relative;
    top: 35%;
    text-decoration: none;
    font-weight: 700;
}

.small-clearfix {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}

.header-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.header-wrapper > .logo {
    flex: 1 0 0;
    color: #fff;
    text-decoration: none;
    font-size: 27px;
    line-height: 1.1;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjAiIHZpZXdCb3g9IjAgMCAzMTAgMjEwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9Ii42NTYyNSIgeDI9IjI5OS45NCIgeTE9IjEyNS4xMiIgeTI9IjEyNS4xMiIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgtLjMxMzQyIDg1MS44NykiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI2ZmZiIgb2Zmc2V0PSIwIi8+CjxzdG9wIHN0b3AtY29sb3I9IiNmZmYiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC4xNTYyNSAtODQyLjU5KSI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuODU5MyAtNC44MjU0KSI+CjxnPgo8cGF0aCBkPSJtMC4zNDI4MyA5MDEuOXYxMDAuNjNoMC4wMzEyNWMwLjEzMzIzIDE3LjEwMyAyNi45MzUgMzMuNzM5IDc0LjgxMiA0Mi45MDYgNzEuNTU5IDEzLjcwMiAxNjMuMDYgNS41NDQ0IDIwNC4zOC0xOC4xODggMTMuNTktNy44MDY1IDIwLjA1LTE2LjMwOSAyMC4wNjItMjQuNzE5di0xMDAuMzhjLTAuMDQ0NCA4LjM4OTYtNi41MDYyIDE2Ljg2OS0yMC4wNjIgMjQuNjU2LTQxLjMxNCAyMy43MzItMTMyLjgyIDMxLjg1OC0yMDQuMzggMTguMTU2LTQ4LjA0OS05LjIwMDEtNzQuODctMjUuODk1LTc0LjgxMi00My4wNjJoLTAuMDMxMjV6IiBmaWxsPSJ1cmwoI2EpIi8+CjxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KDEuMTQxOCAuMjE4NjMgLS42NTkyMyAuMzc4NjcgNDA2Ljc3IDYwOC44NikiIGQ9Im0yODAuNDQgNjc4LjY5YTExMy40OCAxMTMuNDggMCAxIDEgLTIyNi45NSAwIDExMy40OCAxMTMuNDggMCAxIDEgMjI2Ljk1IDB6IiBmaWxsPSIjZmZmIi8+CjxwYXRoIGQ9Im0yMjkuOTMgODk4LjQ4LTE4Ljc4NCAxMC43OSA2Ni41ODEgMTIuNzQ4LTEyLjUyMyA3LjE5MzMtNjYuNTgxLTEyLjc0OC0xOC43ODQgMTAuNzktMTIuNDg1LTIxLjU3MyA2Mi41NzYtNy4yMDA0eiIgZmlsbC1ydWxlPSJldmVub2RkIi8+CjxwYXRoIGQ9Im0xMjAuMTYgODc3LjQ3LTE4Ljc4NCAxMC43OS02Ni41ODEtMTIuNzQ4LTEyLjUyMyA3LjE5MzMgNjYuNTgxIDEyLjc0OC0xOC43ODQgMTAuNzkgNjIuNTc2LTcuMjAwNC0xMi40ODUtMjEuNTczeiIgZmlsbC1ydWxlPSJldmVub2RkIi8+CjxwYXRoIGQ9Im0xMzYuMjQgOTM2Ljg0LTI2LjAyOC00Ljk4MzYgMzguNDQxLTIyLjA4MS0xNy4zNTItMy4zMjI0LTM4LjQ0MSAyMi4wODEtMjYuMDI4LTQuOTgzNyAxMy4wMzYgMTkuMDkyIDU2LjM3Mi01LjgwMTl6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPHBhdGggZD0ibTIzMy4xNiA4ODEuMTctMjYuMDI4LTQuOTgzNi0zOC40NCAyMi4wODEtMTcuMzUyLTMuMzIyNCAzOC40NC0yMi4wOC0yNi4wMjgtNC45ODM3IDU2LjM3My01LjgwMjQgMTMuMDM1IDE5LjA5MnoiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgo8L2c+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0uMzEyNSA4NTIuMjIpIiBkPSJtMTQ3LjA5IDAuNTMxMjVjLTUwLjUyIDAuMzc1NC05OS4yMzEgOS4yMzg1LTEyNi4zNCAyNC44MTItMTMuMzg3IDcuNjg5NS0xOS44NiAxNi4wNTctMjAuMDYyIDI0LjM0NGgtMC4wMzEyNXYxMDAuNjJoMC4wMzEyNWMwLjEzMzIzIDE3LjEwMyAyNi45MzUgMzMuNzM5IDc0LjgxMiA0Mi45MDYgNzEuNTU5IDEzLjcwMiAxNjMuMDYgNS41NDQ0IDIwNC4zOC0xOC4xODggMTMuNTktNy44MDY1IDIwLjA1LTE2LjMwOSAyMC4wNjItMjQuNzE5di0xMDAuMDNjMC4wOTA4Mi0xNy4xNzktMjYuNzM0LTMzLjkxOS03NC44MTItNDMuMTI1LTI0LjU5OC00LjcwOTktNTEuNTY4LTYuODIxNi03OC4wMzEtNi42MjV6IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiLz4KPC9nPgo8L2c+Cjwvc3ZnPgo=);
    background-size: 50px 30px;
    background-repeat: no-repeat;
    /* for logo */
    padding-left: 58px;
    margin-right: 1rem;
}

.header-wrapper > .search {
    flex: 2 0 0;
}

.header-wrapper > .padding {
    flex: 1 1 0;
}

@media screen and (max-width: 768px) {
    .header-wrapper > .logo {
        margin-right: 1rem;
    }

    .header-wrapper > .padding {
        display: none;
    }
}

.search-wrapper {
    display: flex;
    min-height: 50px;
}

.search-wrapper > .input {
    flex: 1 1 auto;
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25;
    height: 50px;
    padding: 0 0.5em;
    border: none;
}

.search-wrapper > .submit {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    padding: 0;
    background-color: #6b0504;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAABGCAYAAADPeLrZAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4goaEQgRXcHczgAAAQlJREFUeNrt1z1KA1EUhuETFcTCTtBNuABL1+AGXITY6RYE00sqCzdh6Sa0yRoC/hD9bAIOEYTRUS/heWCYJtyB884Nd6oAAAAAAAAAAACAP5VkO8lpkl3TaDfQeZJZkmuh2ox0tgiUJK9JboQa1toAazwurXdUVWOh2ttNJ0me8sGOEgqhhGKoQY+SHCd5SPLyjWuez+6S7Jlufxs9fjf64bM2ezyPgY/gX27Kzn1aVc9G3l6kUed+UFX7Rv57f3fznuuuL70A86qaVNWtkf//gWMrySTJW+fAME1yaDoCIdBqBLoSqO1IF4sPWIEajrSTZLwIdS9Q26EuBQIAAAAAAAAAAACAVfAObAaXVSNNSK4AAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    background-position: -12.5% 50%;
    overflow: hidden;
    text-indent: -5000px;
    appearance: none;
    -webkit-appearance: none;
    border: none;
}

/* TODO: Is there a common breakpoint for this? */
@media screen and (max-width: 450px) {
    /* Make the search box expand to take up the entire header on phones */
    #global-header .search-wrapper > .submit {
        display: none;
    }

    #global-header .search-wrapper > .input:focus {
        position: absolute;
        left: 0;
        right: 50px;
    }

    #global-header .search-wrapper > .input:focus + .submit {
        display: block;
        position: absolute;
        right: 0;
    }
}

/**
 ** TABS
 **/
.tab-bar {
    margin: 1rem 0;
    /* delistify */
    list-style: none;
    padding: 0;
    /* Set up for tabs */
    display: flex;
    position: relative;
    /* Let tabs wrap if the screen is too small */
    flex-wrap: wrap;
    /* Have a border for the tabs to sit on */
    border-bottom: 1px solid #0b0c0c;
}

.tab-bar > .tab {
    flex: 0 0 auto;
    margin-top: 0.5em;
    position: relative;
    /* move us over the tab bar's border */
    bottom: -1px;
    /* Fake bottom edge in case of wrapping */
    border-bottom: 1px solid #0b0c0c;
    /* Padding to compensate for active border */
    padding: 1px;
    padding-bottom: 0;
}

.tab-bar > .tab > a {
    /* Fill the whole tab */
    display: block;
    /* Extra padding to make it a tap target (& aesthetic grey stuff) */
    padding: 0.6em 1em;
    background: #dee0e2;
    /* White border around grey stuff also for aesthetics */
    margin: 0.4em;
    /* Slightly less link-y */
    text-decoration: none;
}

.tab-bar > .tab.-active {
    /* Remove padding and replace with border */
    border: 1px solid #0b0c0c;
    padding: 0;
    /* Hide the bottom bar so the tab looks like it's popped out */
    background: white;
    border-bottom-color: white;
}

.tab-bar > .tab.-active > a {
    /* de-grey for active */
    background: none;
}

.tab-content > .pane.-hidden {
    display: none;
}

.tab-content > .pane > h2 {
    display: none;
    margin-top: 0;
}

.tab-content > .pane > h3 {
    border-bottom: 1px solid #0b0c0c;
}

@media screen and (max-width: 768px) {
    .tab-content > .pane h3 {
        border-bottom: 1px solid #0b0c0c;
    }
}

.no-js .tab-bar {
    /* Make the tab bar a usable method of navigation without JS */
    position: sticky;
    top: 0;
    background: white;
    margin: 1rem -1rem;
    padding: 0 1rem;
}

.no-js .tab-content > .pane {
    /* Make a very clear deliniation between sections */
    border-bottom: 3px solid black;
}

.no-js .tab-content > .pane > h2 {
    display: block;
}

.no-js .tab-content > .pane:not(:first-child) {
    /* Compensate for sticky tab bar when tabs are clicked */
    padding-top: 5rem;
}

/* 500px scientifically picked because it's a round number */
@media screen and (max-width: 500px) {
    /* Shrink the tabs down so they don't wrap on phones */
    .tab-bar {
        font-size: 12px;
    }
}

/**
 ** COLUMNS
 **/
@media screen and (min-width: 768px) {
    .columns {
        display: flex;
    }

    .columns > .column {
        flex: 1;
    }
}
/**
 ** MAPPAGE
 **/
#connectivity-map {
    max-height: 600px;
    max-width: 100%;
    display: block;
    margin: 0.5rem auto;
    border: 3px solid black;
}

/**
 ** ???
 **/
.data {
    font-weight: bold;
}

.flag-img {
    max-height: 24px;
}

.whois {
    overflow-x: auto;
    background: #dee0e2;
    padding: 1rem;
    margin: 1rem 0;
}

.nowrap {
    white-space: nowrap;
}

.scroll-content {
    margin: 0 auto;
    overflow-x: auto;
}

.scroll-content > * {
    margin: 0 1rem;
}

@media screen and (max-width: 768px) {
    .whois {
        font-size: 12px;
        margin: 1rem -1rem;
    }
}

.warningbox {
    color: #0b0c0c;
    padding: 12px;
    background-color: #dee0e2;
    border-style: solid;
    margin-bottom: 10px;
    font-weight: 700;
    border-color: rgb(0, 0, 0);
    border-width: 5px;
}

/**
 ** TABLES
 **/
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

table th,
table td {
    font-size: 16px;
    padding: 0.5em 0.6em;
    text-align: left;
    border-bottom: 1px solid #bfc1c3;
}

table th.nobold {
    font-weight: normal;
}

@media screen and (max-width: 768px) {
    table td.smallonmobile {
        font-size: 12px;
    }
}

/**
 ** ASN Header
 **/
#asn-header::after {
    content: "";
    clear: both;
}

#asn-header > .header {
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

#asn-header > .image {
    max-height: 250px;
    float: right;
    border-style: solid;
}


#asn-header > .data > dt {
    font-weight: normal;
}

#asn-header > .data > dt::after {
    content: ":";
}