:root {
  --nettools-border-radius: .5em;
  --page-width: 66em;
  --required-color: #226ba6;
}

body {
  background-color: #fff;
}

h1, h2, h3, h4, strong {
  font-weight: 500;
}

.content h2 {
  margin-bottom: .5em;
}

.content h3 {
  margin-top: .6em;
  font-size: 1.25em;
}

.content h4 {
  margin-bottom: .3em;
  font-size: 1.15em;
}

.envelope {
  border-radius: calc(var(--nettools-border-radius)  + .03em);
  max-width: calc(100% - 2em);
  width: var(--page-width);
  border: .05em solid #333;
  margin: 1.85em auto;
  padding: 0;
  display: block;
  position: relative;
  box-shadow: 3px 3px 8px 1px #00000026;
}

header {
  border-top-left-radius: var(--nettools-border-radius);
  border-top-right-radius: var(--nettools-border-radius);
  background-color: #1478c8;
  padding: .5em 0;
}

header a.logo {
  color: #fff;
  letter-spacing: .015em;
  padding: .1em .66em;
  font-size: 1.66em;
  font-weight: 700;
  text-decoration: none;
}

header .user-info {
  padding: .3em;
  position: absolute;
  top: .65em;
  right: .7em;
}

header .user-info a {
  color: #fff;
}

header .user-info a.registration {
  border-left: 1px solid #fff;
  margin-left: .5em;
  padding-left: .6em;
}

header .user-info .logged-user-name {
  color: #fff;
  cursor: pointer;
  text-align: right;
  background-image: url("../../img/icon/user-white.svg");
  background-position: 0 .05em;
  background-repeat: no-repeat;
  background-size: 1.66em;
  min-width: 14em;
  padding: .1em .4em .5em 2.2em;
  display: block;
}

header .user-info.logged > div {
  border-bottom-left-radius: var(--default-border-radius);
  border-bottom-right-radius: var(--default-border-radius);
  min-width: 14em;
  margin-top: .8em;
  padding: .6em 1em;
  display: none;
}

nav.user-info > div input[type="submit"] {
  margin-top: .6em;
}

header .user-info.logged:hover {
  opacity: .96;
  background-color: #e5ecff;
  border-radius: .5em;
  box-shadow: 5px 5px 16px 2px #00000054;
}

header .user-info.logged:hover .logged-user-name {
  color: #000;
  opacity: .9;
  background-image: url("../../img/icon/user.svg");
  border-bottom: 1px dotted #999;
}

header .user-info.logged:hover > div {
  display: block;
}

nav.user-info.logged:hover > div > a {
  color: #000;
  padding: .6em 0;
  display: block;
}

nav.main {
  position: absolute;
  top: -1.7em;
  left: .9em;
}

nav.main > ul {
  display: block;
}

nav.main > ul > li {
  border-right: .1em solid #999;
  margin: 0 .5em 0 .2em;
  display: inline-block;
}

nav.main > ul > li:last-child {
  border-right: none;
}

nav.main > ul > li > a {
  padding-right: .7em;
}

#pagetop h1 {
  padding: .33em .5em;
  font-size: 1.8em;
}

footer {
  max-width: calc(100% - 2em);
  width: var(--page-width);
  position: absolute;
  bottom: -2.2em;
  left: 0;
}

footer .copyright {
  text-align: center;
  margin-top: .33em;
  font-size: .86em;
}

footer .copyright .app-name {
  font-weight: 300;
}

.content {
  border-bottom-left-radius: var(--nettools-border-radius);
  border-bottom-right-radius: var(--nettools-border-radius);
  background-color: #e5ecff;
  border-top: none;
  padding: 1.1em 1em;
}

.content h3 {
  margin-bottom: .66em;
}

.content ul, .content ol {
  padding-left: 1.2em;
}

.content ul {
  list-style-type: disc;
}

.content ol {
  list-style-type: decimal;
}

.content ul > li, .content ol > li {
  margin-bottom: .5em;
}

.content ol ul > li, .content ol ol > li, .content ul ul > li, .content ul ol > li {
  margin-bottom: .2em;
}

#whoisform {
  background-color: #ffcf58;
  border-top: .01em solid #666;
  border-bottom: .01em solid #666;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: .7em;
  display: flex;
}

#whoisform > input[type="text"] {
  width: 90%;
}

#whoisform > input[type="submit"] {
  width: 10%;
  min-width: 6em;
  margin-left: .7em;
}

.content > #result > .whois-result-info-table, .content > .domain-info-table, .content > .domain-nameservers-table {
  margin-bottom: 1em;
  line-height: 1.4;
}

.content > #result > .whois-result-info-table th, .content > .domain-info-table th {
  text-align: right;
  padding-right: .3em;
  font-weight: 200;
}

.content > #result > .whois-result-info-table td, .content > .domain-info-table td {
  padding-left: .3em;
  font-weight: 400;
}

.content > #result > .response {
  border-radius: var(--default-border-radius);
  white-space: pre-wrap;
  word-wrap: break-word;
  background-color: #fff;
  border: 1px solid #999;
  margin-top: .2em;
  margin-bottom: 1em;
  padding: .6em .3em .6em .6em;
  font-size: .8em;
  line-height: 1.3em;
}

.content > #result > h3 {
  margin-top: .66em;
}

.content > #result > h4 {
  margin-top: .4em;
}

.content > #result > h4 > strong {
  color: #30239f;
  font-weight: 600;
}

.cache-info {
  font-size: .8em;
}

.query-info {
  margin: 4em auto .5em;
}

.content > .domain-nameservers-table th {
  text-align: left;
  font-weight: 400;
}

.content > .domain-nameservers-table th, .content > .domain-nameservers-table td {
  padding-right: 1em;
}

.content .user-account-choices {
  flex-direction: row;
  justify-content: space-around;
  align-items: stretch;
  height: auto;
  margin: 2em;
  display: flex;
}

.content .user-account-choices > div, .content .user-verification {
  text-align: center;
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: .9em;
  flex-direction: column;
  justify-content: space-between;
  width: 35%;
  min-width: 14em;
  margin: 2em;
  padding: 1.66em 1em;
  display: flex;
}

.content .user-account-choices > div > h4, .content .user-verification > h4 {
  font-size: 1.15em;
  font-weight: 300;
}

.content .user-account-choices > div > .button, .content .user-verification > .button {
  clear: both;
  width: 10em;
  margin: 2em auto 1.3em;
  display: block;
}

.content .user-verification {
  margin: 2em 0 1em;
}

.content .user-verification > .button {
  margin: 1em auto 1.3em;
  padding-left: 2em;
  padding-right: 2em;
}

.queries-overview-holder ul {
  columns: 3;
}

.queries-overview-holder ul > li {
  margin-bottom: .3em;
}

.content .tlds-list {
  columns: 3;
  padding: 0;
  display: block;
}

.content .tlds-list.short {
  columns: 1;
}

.content h3.tld-letter {
  color: #000;
}

.content h3.tld-letter a.top-link {
  float: right;
  font-weight: 300;
  text-decoration: none;
}

.content .tlds-list > li {
  display: inline;
}

.content .tlds-list > li:after {
  content: ", ";
}

.content .tlds-letter-navigation > a {
  border-right: .12em solid #aaa;
  padding: 0 .3em .1em .1em;
  font-weight: 400;
}

.content .tlds-letter-navigation > a:last-child {
  border-right: none;
}

html.login .envelope {
  background-color: #e5ecff;
}

html.login .pagetop h1 {
  margin-top: 1em;
}

html.login .content {
  background-color: #0000;
  margin-top: -1.5em;
}

html.login .content .box-shadow {
  border: .005em solid #999;
  box-shadow: .2em .3em .5em .3em #00000014;
}

html.login .registration fieldset > div {
  margin: .1em .5em;
}

@media only screen and (width <= 600px) {
  .envelope {
    box-shadow: none;
    border: none;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  header {
    border-radius: 0;
  }

  header .user-info {
    background-image: url("../../img/icon/user-white.svg");
    background-position: -.3em -.1em;
    background-repeat: no-repeat;
    background-size: 2.4em;
    width: 2em;
    height: 2.4em;
    padding: .2em 0;
    top: .4em;
    right: .8em;
    overflow: hidden;
  }

  header .user-info.logged {
    background-image: none;
  }

  header .user-info.logged:hover {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    width: 100%;
    height: auto;
    margin-top: -.4em;
    margin-right: -.8em;
  }

  header .user-info a {
    color: #0000;
  }

  header .user-info .logged-user-name {
    background-position: -.3em -.3em;
    background-size: 2.8em;
    min-width: 3em;
  }

  header .user-info:hover .logged-user-name {
    text-align: left;
    background-position: right .3em center;
    padding: .8em 3em .8em 1em;
    font-weight: 400;
  }

  header .user-info .login {
    height: 3em;
    display: block;
  }

  .content {
    border-radius: 0;
  }

  .footer {
    width: 100%;
    max-width: 100%;
  }

  .content h3 {
    margin-top: .2em;
  }

  .content .user-account-choices {
    flex-direction: column;
    align-items: center;
    margin: 0;
  }

  .content .user-account-choices > div {
    width: fit-content;
    margin: 1em 0;
  }

  #whoisform input[type="text"] {
    width: 95%;
  }

  #whoisform input[type="submit"] {
    color: #0000;
    background-image: url("../../img/icon/search-white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 2em;
    width: 2.3em;
    min-width: 2.3em;
  }

  .content .tlds-list {
    columns: 2;
    line-height: 1.8em;
  }

  .content .tlds-list > li {
    padding: .3em;
  }

  .tlds-letter-navigation {
    margin-bottom: 1.5em;
    font-size: 1.15em;
    line-height: 2em;
  }

  .content .tlds-letter-navigation > a {
    display: inline block;
    background-color: #eee;
    border-radius: .3em;
    margin: .1em;
    padding: .01em .5em .2em;
    border: .12em solid #aaa !important;
  }

  .content h3.tld-letter a.top-link {
    margin-top: -.2em;
    font-size: 1.2em;
  }

  .queries-overview-holder ul {
    columns: 1;
  }

  .queries-overview-holder ul > li {
    margin-bottom: .5em;
  }
}