/* Reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}
article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video {
  display: block;
}
a img { border: 0; }
	
@font-face {
    font-family: 'Orbitron';
    src: url('../fonts/Orbitron-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

html
{
    height:100%;
    color-scheme:light;
    --bg:#f3f5f7;
    --surface:#ffffff;
    --surface-2:#eef2f6;
    --text:#1a2332;
    --muted:#5e6e80;
    --border:#d7dee7;
    --accent:#0f6e56;
    --accent-text:#ffffff;
    --link:#0c5c8c;
    --ip-bg:#062831;
    --ip-fg:#3ee08f;
    --info-bg:#e5f3fb;
    --ok-bg:#e5f6ee;
    --danger-bg:#fdecea;
    --danger-border:#c0392b;
    --danger-text:#7a1f1a;
    --focus:#0c5c8c;
    --shadow:0 6px 26px 0 rgba(26, 35, 50, 0.08);
    --hover:rgba(12, 92, 140, 0.12);
    --row-a:#ffffff;
    --row-a-label:#e4eef6;
    --row-b:#e8eef5;
    --row-b-label:#d3e0ec;
    --code-bg:#e8eef5;
    --code-fg:#0c5c8c;
}

html[data-theme="dark"]
{
    color-scheme:dark;
    --bg:#141414;
    --surface:#181818;
    --surface-2:#161616;
    --text:#E2E2E2;
    --muted:#A3A3A3;
    --border:#2A2A2A;
    --accent:#3dbe8c;
    --accent-text:#062018;
    --link:#D4D4D4;
    --ip-bg:#062831;
    --ip-fg:#5ef0a4;
    --info-bg:#1A2428;
    --ok-bg:#14241C;
    --danger-bg:#2A1616;
    --danger-border:#e07070;
    --danger-text:#ffc9c4;
    --focus:#A3A3A3;
    --shadow:0 4px 14px rgba(0, 0, 0, 0.45);
    --hover:rgba(255, 255, 255, 0.06);
    --row-a:#181818;
    --row-a-label:#1F1F1F;
    --row-b:#161616;
    --row-b-label:#1C1C1C;
    --code-bg:#242424;
    --code-fg:#98CDFF;
}

body
{
	background-color: var(--bg);
	color: var(--text);
	font-family: Verdana, Arial;
	margin: 0px;
	padding: 0px;	
	text-align:center;	
	
    background: var(--bg);

	height:100%;
}

#root
{
    min-height:100%;
	position:relative;
	padding-top:5.5rem;
}

input
{
	font-family: Verdana, Arial;
	font-size: 1em;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
}

a
{
	color: var(--link);
}

img
{
	border:0px;
	vertical-align:middle;
}

p
{
    margin:0em;
    padding-bottom:0.5em;
}

h1
{
    font-size:1.3em;
}

h2
{
    font-size:1.2em;
}

form
{
    font-size:1.2em;   
}

h1
{
  color:var(--text);
  border-top:1px solid var(--border);
  padding:0.5em;
  margin:0.3em;
}

div
{
    margin:0em;
    padding:0em;
}

.js_required
{
	display:none;
}

.js_reccomended
{
	display:inline-block;
	border:1px solid var(--danger-border);
	padding:10px;
	margin:10px;
	text-align:center;	
	color:var(--danger-text);
	background:var(--danger-bg);
}

.nowrap
{
	white-space:nowrap;
}

.notes
{
	color:var(--muted);
	font-size:0.7em;
}

.blockinline
{
	border:1px solid var(--border);
	padding:0.5em;
	margin:0.5em;
	display:inline-block;
	vertical-align: middle;
}

.row
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	width:100%;
}

.box
{
	background-color:var(--surface);	
	box-shadow: var(--shadow);
	padding:0em;
	margin:1em;
	border-radius:0.5em;

	max-width:40em;

	border:1px solid var(--border);
}

.box_padding
{
	padding:0.5em;
}

.box_full
{
	width:95vw;
	max-width: max-content;
}

.box table
{
	width:100%;
}

img.status
{
	height:1em;
	margin-right:0.5em;
	vertical-align: baseline;
}

table.properties
{
	border-collapse: collapse;
}

table.properties td,
table.properties th
{
	font-family:Verdana, Helvetica, sans-serif;
	font-size: 0.9em;
	text-align:left;
	padding:5px;
	padding-left:10px;
}

table.properties tr
{
	background-color: transparent;
	transition: background-color 0.5s;
}

table.properties tr:nth-child(2n+1) > td {
	background-color: var(--row-a);
}

table.properties tr:nth-child(2n) > td {
	background-color: var(--row-b);
}

table.properties tr:nth-child(2n+1) > td:first-child {
	background-color: var(--row-a-label);
}

table.properties tr:nth-child(2n) > td:first-child {
	background-color: var(--row-b-label);
}

table.properties tr:hover > td {
	background-color: var(--hover);
}

table.properties tr:hover > td:first-child {
	background-color: color-mix(in srgb, var(--hover) 70%, var(--row-b-label));
}

table.properties tr > td.separator {
	background-color: transparent;
}

table.properties tr > td:first-child {
	white-space: nowrap;
	text-align:right;
	vertical-align:middle;
	width:50%;
}

table.properties img
{
	vertical-align: middle;		
}

.icon_16
{
	width: 16px;	
	vertical-align:middle;
}

div#tooltip {
	display:none;
  position: absolute;
  z-index: 10;
  padding:1em;
  font-size:0.9em;
  max-width: 30em;
  
  color: var(--text);
  box-shadow: var(--shadow);
    border-radius: 1em;
    border:1px solid var(--border);
	background: var(--surface);

}

.ip_box, .ipv4_box, .ipv6_box
{	
	display:inline-block;    
	width:26em;
	padding:0.3em;
	text-align:center;
	margin:0.6em;
	
	
    background-color:var(--surface);

	box-shadow: var(--shadow);
	border-radius: 0.5em;			
	border:1px solid var(--border);

    transition: box-shadow 0.5s;
}

img.flag
{
	background-color:#ffffff;
}

.ipv4_box .flag, .ipv6_box .flag
{
    height:2.3em;
	float:left;
}

.ipv6_box .ip
{
    font-size:1em;
}

.ip_stats
{
	text-align:right;
	color:var(--muted);
	font-size:0.8em;
	padding:0;
	margin:0;
}

.ip_reserved
{
    background-color:var(--info-bg);
}

.title
{
	margin:0.5em;
	margin-left:1em;
	margin-right:1em;
	font-size:1.1em;
}

.description
{	
	padding:2px;
	color: gray;
	font-size:0.9em;
}

.wait
{	
	display:inline-block;
	width:32px;
	height:32px;
	background-image:url("../images/misc/wait.gif");
	background-repeat:no-repeat;
	background-position:50% 50%;
    margin:1em;
}

#dnsdetection_results
{
	display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}





.wait2
{
    display:inline-block;
    margin:0px;
    padding:0px;
    background-color:var(--accent);    
    height:1.8em;
    transition:opacity 1s;
}



#query
{
	width:30vw;
	height:2.6rem;
	box-sizing:border-box;
	margin:0;
	padding:0 0.9rem;
	font-size:1rem;
	background:var(--surface);
	color:var(--text);
	border:1px solid var(--border);
	border-right:none;
	border-radius:0.45rem 0 0 0.45rem;
}

.query_staff
{
	background-color: var(--ok-bg);
}

#query.query_invalid
{
	border: 1px solid var(--danger-border);
	background-color: var(--danger-bg);
	color: var(--danger-text);
}

#content
{
	clear:both;
	margin-left: auto;
	margin-right: auto;
	text-align:center;		
}

#footer_margin
{
	clear:both;
	height:5em;
}

#site-info
{
	clear:both;
	max-width:60em;
	margin:3em auto 0;
	padding:1.2em 1em 0;
	border-top:1px solid var(--border);
	color:var(--muted);
	font-size:0.8em;
	text-align:center;
}

#site-info p
{
	padding-bottom:0.6em;
}

#header, #footer
{		
	display:block;    
    font-size:0.8em;
	text-align:center;

    padding:1em;
	
	color:var(--muted);
    z-index:2000;
	box-sizing:border-box;
     
}

#header
{
    position:fixed;
    top:0;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    text-align:left;
    padding:0.7rem 1rem;
    background:color-mix(in srgb, var(--bg) 78%, transparent);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    box-shadow:none;
}

#header > a
{
    display:flex;
    align-items:center;
}

form
{
    display:inline-block;
}

#header form
{
    display:flex;
    align-items:center;
    margin:0 0 0 1.25rem;
}

#header form input[type="submit"]
{
    height:2.6rem;
    box-sizing:border-box;
    margin:0;
    padding:0 1.15rem;
    font-size:1rem;
    font-weight:600;
    letter-spacing:0.01em;
    background:#98CDFF;
    color:#0E2E7D;
    border:none;
    border-radius:0 0.45rem 0.45rem 0;
    cursor:pointer;
}

#header form input[type="submit"]:hover
{
    background:color-mix(in srgb, #98CDFF 78%, #0E2E7D);
}

#logo-img
{
    height:2.6rem;
    width:auto;
}

#logo-img-air
{
    width:8em;
}

#logo-img-air-footer
{
    width:8em;
}

#footer
{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    padding-left:0px;
    padding-right:0px;
    width:100%;
    background:color-mix(in srgb, var(--bg) 78%, transparent);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border-top:1px solid var(--border);
    box-shadow:none;
    font-size:0.7em;
}

.docs_center
{
	text-align:center;
	padding:10px;
	color:gray;
}

.docs_small
{
	font-size: 0.9em;
}

.docs_verbose
{
	font-size:0.8em;
	color:gray;
}

#docs
{
	margin:10px;
	margin-top:50px;
	margin-bottom:30px;
	text-align:left;
}

#docs pre
{
	margin:0.6em 0 1em;
	padding:0.8em 1em;
	overflow:auto;
	background:var(--surface);
	color:var(--text);
	border:1px solid var(--border);
	border-radius:0.4em;
	font-family:Consolas, "Liberation Mono", monospace;
	font-size:0.85em;
	line-height:1.45;
}

#docs code
{
	font-family:Consolas, "Liberation Mono", monospace;
}

#wait
{
	width:16px;
	height:11px;
	position:absolute;
	left:50vw;
	top:50vh;
}

.error_box
{
	text-align:center;
	margin:50px;	
}

.error_box_message
{
	font-size:2em;
	margin:50px;
}

.activate_button
{
	display: inline;
	padding:0.2em;
    padding-left:2em;
    padding-right:2em;
	margin:0.5em;
    width: 30em;
    line-height:3em;
	text-align:center;
	background-color:var(--surface-2);
	border:1px solid var(--border);
	box-shadow:none;
	
	-webkit-transition: background-color 1s;
  	transition: background-color 1s;
  	text-decoration: none;
  	color: black;
	cursor:pointer;
}

.activate_button:hover
{
	background-color: white;
}


.ip, .digital
{
    font: 1em 'Orbitron', Arial, sans-serif;    
    background-color:#000000;
    color: #00ED64;

    text-shadow: 0px 0px 5px #27AE60;
	text-decoration:none;
}

.digital 
{
    padding:0.2em;
	margin:0.2em;	
	box-shadow:none;
}

span.digital 
{
	line-height: 1.8em;	
}

.ip
{	
	display:block;	
	padding:0.3em;	
    margin-bottom:0.3em;	
	
	border:none;
    border-radius: 0.3em;
}

.location
{
	white-space:nowrap;
    overflow:hidden;
	font-size: 1em;
    color:#444444;
}

.isp
{
	white-space:nowrap;
    overflow:hidden;
	font-size: 0.8em;
    color:#888888;
}

.details
{
	margin-left:auto; 
  margin-right:auto;
}

hr,
.separator
{
	border:0;
	border-top: 1px solid var(--border) !important;
	background:none;
	height:0;
	padding:0px !important; 
	margin:0px !important;	
}

.padding1em
{
	padding:1em;
}

.width70p
{
	width:70%;
}

.width100p
{
	width:100%;
}

.width16px
{
	width:16px;
}

.textalign_center
{
	text-align:center;
}

.clear
{
	clear:both;
}

.display_none
{
	display:none;
}

.confidence
{
	border:1px solid green;	
	width:10em;
	display:inline;
	float:right;
	padding-left:20px;
	font-size: 0.8em;
	color:green;
}

#geolocation_map
{
	width:95%;
	height:30em;
}

.map_view_large
{
	color:#0000FF;
	text-align:left;
}

#hash_input
{
	max-width: 80%;
	width:70em;
	margin:1em;
	padding:0.5em;
}

#torrentdetection
{		
	padding:5px;
	margin:5px;
	text-align:center;
}

#rtc_placeholder
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:0.75em;
}

#rtc_placeholder > div
{
	display:block;
}

#rtc_placeholder > .rtc_mdns
{
	order:10;
	max-width:36em;
	text-align:center;
	font-size:0.7em;
	line-height:1.35;
	color:var(--muted);
	word-break:break-all;
}

#rtc_placeholder > .rtc_mdns code
{
	display:inline-block;
	margin-top:0.25em;
	font-size:1em;
	max-width:100%;
	word-break:break-all;
}

code
{
	font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size:0.92em;
	background:var(--code-bg);
	color:var(--code-fg);
	padding:0.1em 0.35em;
	border-radius:3px;
}

pre code
{
	display:block;
	padding:0.6em 0.8em;
	overflow-x:auto;
	word-break:normal;
}

table.data
{
	border-collapse: collapse;
	border:1px solid var(--border);
}

.data td
{
	border:1px solid var(--border);
	padding:3px;
	text-align:center;			
}

.data td,
.data th
{
	vertical-align:middle;	
	
	margin: 0px; 	
	padding: 3px;
	padding-left: 5px;
	padding-right: 5px;
	vertical-align: middle;
}

.data th
{
	border:1px solid #3586FF;
	white-space: nowrap;		
}

.data td img
{
	vertical-align:middle;	
}

.data tr
{
	background-color: #fafafa;
}

.data th
{
	padding: 5px;
	text-align:left;
	background-color: #66A3FF;	
	text-align:center;
	color:white;
	text-shadow: #4488DD 0px 0px 2px;  
}

.data th a
{
	color:white;
	text-decoration:underline;
}

table.data tr:nth-child(2n) {
	background-color: rgba(0,0,0,0.08);
}

table.data tr:nth-child(2n+1) {
	background-color: rgba(0,0,0,0);
}

#theme-switch
{
	position:fixed;
	top:10px;
	right:10px;
	height:auto;
	display:flex;
	align-items:center;
	z-index:10000;
	font-size:14px;
	font-style:normal;
	line-height:1.2;
}

#theme-switch-toggle
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	margin:0;
	padding:0;
	border:1px solid rgba(0, 0, 0, 0.2);
	border-radius:6px;
	background:rgba(255, 255, 255, 0.9);
	color:#1e2433;
	font-size:16px;
	line-height:1;
	cursor:pointer;
	box-shadow:0 1px 3px rgba(0, 0, 0, 0.12);
}

#theme-switch-toggle:hover
{
	background:rgba(74, 105, 196, 0.12);
}

#theme-switch-menu
{
	position:absolute;
	top:calc(100% + 0.35em);
	right:0;
	min-width:9.5em;
	padding:0.35em;
	border:1px solid rgba(0, 0, 0, 0.12);
	border-radius:0.35em;
	background:#ffffff;
	box-shadow:0 0.4em 1.2em rgba(0, 0, 0, 0.25);
}

#theme-switch-menu[hidden]
{
	display:none;
}

#theme-switch-menu button
{
	display:flex;
	align-items:center;
	gap:0.65em;
	width:100%;
	margin:0;
	padding:0.55em 0.7em;
	border:none;
	border-radius:0.25em;
	background:transparent;
	color:#1e2433;
	font-family:inherit;
	font-size:0.95em;
	line-height:1.2;
	text-align:left;
	cursor:pointer;
}

#theme-switch-menu button:hover,
#theme-switch-menu button:focus-visible
{
	background:rgba(74, 105, 196, 0.12);
}

#theme-switch-menu button.active
{
	background:rgba(74, 105, 196, 0.18);
	font-weight:700;
}

#theme-switch-menu .theme-switch-icon
{
	display:inline-flex;
	width:1.25em;
	justify-content:center;
	flex-shrink:0;
}

#theme-switch-toggle:focus-visible,
#theme-switch-menu button:focus-visible
{
	outline:2px solid #4a69c4;
	outline-offset:2px;
}

html[data-theme="dark"]
{
	color-scheme:dark;
}

html[data-theme="dark"] body
{
	background:#141414;
	color:#E2E2E2;
}

html[data-theme="dark"] #header,
html[data-theme="dark"] #footer
{
	color:#A3A3A3;
}

html[data-theme="dark"] #header
{
	background:color-mix(in srgb, #141414 78%, transparent);
}

html[data-theme="dark"] #footer
{
	background:color-mix(in srgb, #141414 78%, transparent);
}

html[data-theme="dark"] a
{
	color:#D4D4D4;
}

html[data-theme="dark"] h1
{
	color:#A3A3A3;
	border-top-color:#333333;
}

html[data-theme="dark"] .box,
html[data-theme="dark"] .blockinline
{
	background:#181818;
	border:none;
	box-shadow:0 4px 14px rgba(0, 0, 0, 0.45);
	color:#E2E2E2;
}

html[data-theme="dark"] .ip_box,
html[data-theme="dark"] .ipv4_box,
html[data-theme="dark"] .ipv6_box
{
	background:#1F1F1F;
	border:none;
	box-shadow:0 4px 14px rgba(0, 0, 0, 0.45);
	color:#E2E2E2;
}

html[data-theme="dark"] .ip,
html[data-theme="dark"] a.ip,
html[data-theme="dark"] a.ip:link,
html[data-theme="dark"] a.ip:visited,
html[data-theme="dark"] a.ip:hover,
html[data-theme="dark"] a.ip:focus,
html[data-theme="dark"] .digital
{
	background-color:#000000;
	color:#00ED64;
	text-shadow:0px 0px 5px #27AE60;
	border:none;
}

html[data-theme="dark"] .notes,
html[data-theme="dark"] .docs_center,
html[data-theme="dark"] .docs_verbose,
html[data-theme="dark"] .ip_stats,
html[data-theme="dark"] .location
{
	color:#A3A3A3;
}

html[data-theme="dark"] input
{
	background:#1F1F1F;
	color:#E2E2E2;
	border-color:#333333;
}

html[data-theme="dark"] #query.query_invalid
{
	border-color:#c0392b;
	background:#4a2424;
	color:#E2E2E2;
}

html[data-theme="dark"] .activate_button
{
	background:#1F1F1F;
	color:#E2E2E2;
	border:none;
	box-shadow:0 8px 18px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .activate_button:hover
{
	background:#2A2A2A;
}


html[data-theme="dark"] #theme-switch-toggle
{
	border:1px solid #333333;
	background:#1F1F1F;
	color:#E2E2E2;
	text-shadow:none;
	box-shadow:none;
}

html[data-theme="dark"] #theme-switch-toggle:hover
{
	background:#2A2A2A;
	color:#fff;
}

html[data-theme="dark"] #theme-switch-menu
{
	background:#1F1F1F;
	border-color:#333333;
	box-shadow:0 0.4em 1.2em rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] #theme-switch-menu button
{
	color:#E2E2E2;
}

html[data-theme="dark"] #theme-switch-menu button:hover,
html[data-theme="dark"] #theme-switch-menu button:focus-visible
{
	background:rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] #theme-switch-menu button.active
{
	background:rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] #theme-switch-toggle:focus-visible,
html[data-theme="dark"] #theme-switch-menu button:focus-visible
{
	outline-color:#A3A3A3;
}

@media screen and (max-width: 680px) {
    body
    {
        font-size:0.8em;
    }

    #root
    {
        padding-top:3.1rem;
    }

    #header
    {
        flex-wrap:nowrap;
        align-items:center;
        padding:0.7rem 2.2rem 0.7rem 0.6rem;
    }

    #logo-img
    {
        height:1.15rem;
    }

    #header form
    {
        flex:1 1 auto;
        min-width:0;
        margin-left:0.45rem;
    }

    #query
    {
        width:auto;
        flex:1 1 auto;
        min-width:0;
        height:1.15rem;
        padding:0 0.4rem;
        font-size:0.7rem;
        border-radius:0.3rem 0 0 0.3rem;
    }

    #header form input[type="submit"]
    {
        height:1.15rem;
        padding:0 0.45rem;
        font-size:0.7rem;
        border-radius:0 0.3rem 0.3rem 0;
    }

    #theme-switch
    {
        top:0.7rem;
        right:0.55rem;
    }

    #theme-switch-toggle
    {
        width:1.15rem;
        height:1.15rem;
        font-size:0.7rem;
        border-radius:0.3rem;
    }

    .box
    {
        max-width:calc(100% - 1.2rem);
        margin-left:auto;
        margin-right:auto;
    }

    .box_full
    {
        width:auto;
        max-width:100%;
    }

    #dnsdetection_results
    {
        flex-direction:column;
        align-items:stretch;
    }

    #myipv4_placeholder,
    #myipv6_placeholder,
    #rtc_placeholder > div
    {
        display:block;
        width:auto;
        max-width:100%;
        box-sizing:border-box;
    }

    #rtc_placeholder > .rtc_mdns
    {
        max-width:100%;
        padding:0 0.5em;
    }

    .ip_box,
    .ipv4_box,
    .ipv6_box
    {
        display:block;
        width:auto;
        max-width:100%;
        box-sizing:border-box;
    }

    .ip
    {
        overflow-wrap:anywhere;
    }

    .location,
    .isp
    {
        white-space:normal;
        overflow:visible;
        overflow-wrap:break-word;
    }

    .activate_button
    {
        width:auto;
        max-width:100%;
        box-sizing:border-box;
    }

    #hash_input
    {
        width:auto;
        max-width:100%;
        box-sizing:border-box;
    }

    table.properties tr > td:first-child
    {
        white-space:normal;
    }

    #docs pre
    {
        white-space:pre-wrap;
        overflow-wrap:anywhere;
    }
}