:root {
  --backgroundColour: white;
  --background: var(--backgroundColour);
  --backgroundBlue: #02a1e2;
  --backgroundGradient: linear-gradient(180deg, var(--backgroundBlue) 0%, var(--backgroundColour) 100%);
  --searchBox: var(--backgroundColour);
  --searchBoxBorder: rgb(175,175,175);
  --searchGlyph: rgb(52,52,52);
  --label: black;
  --header: var(--label);
  --tileEmpty: rgb(247,247,247);
  --tileContent: var(--backgroundColour);
  --tileBorder: rgb(217,217,217);
  --deleteNormal: rgb(167,165,165);
  --deleteHot: rgb(231,60,60);
  --activityLabel: rgb(109,109,109);
  --footerLabel: rgb(85,85,85);
  --footerSeparator: rgb(204,204,204);
}
:root[appearance=IE97777] {
  --backgroundBlue: #9ddaf5;
}
:root[appearance=IE10Plus], :root[appearance=IE11] {
  --background: color-mix(in srgb, var(--desiredColourForUIALWAYS) 10%, var(--backgroundColour));
  --header: rgb(80,80,80);
  --tileBorder: rgb(228,228,228);
}
:root[customcolour] {
  --backgroundBlue: var(--desiredColourForUI);
}
:root[lang=ko] body {
  font-family: "Malgun Gothic", Tahoma, Geneva, Verdana, sans-serif;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

@keyframes open {
  0% {
    width: calc(var(--size) - 10px);
    height: calc(var(--size) - 10px);
    margin: 5px 0;
  }
  100% {
    width: var(--size);
    height: var(--size);
    margin: 0;
  }
}
*:focus-visible {
  outline: 1px solid black;
  outline-style: dotted;
}

body {
  font-size: 9pt;
  font-kerning: none;
  display: flex;
  margin: 0;
  background-image: var(--backgroundGradient);
  background-size: 100% 84px;
  background-repeat: no-repeat;
  background-color: var(--background);
}

h1 {
  margin: 0;
  margin-left: 3px;
  font-weight: normal;
  font-size: 14pt;
  margin-bottom: 25px;
}

p {
  margin: 0;
}

hbox {
  display: flex;
}

.container {
  position: relative;
  margin: 0 auto;
  margin-top: 52px;
  width: 849px;
}
@media (max-width: 959px) {
  .container {
    width: 679px;
  }
}
.container::before {
  position: absolute;
  top: -52px;
  right: 80px;
  height: 97px;
  width: 209px;
  background-image: url("chrome://userchrome/content/resources/ieframe.dll/Bitmap/821.png");
  background-size: cover;
  opacity: 0.5;
}

.recentSitesContainer {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.recentSitesContainer > .tileContainer {
  position: relative;
  --size: 150px;
  height: var(--size);
  width: var(--size);
  animation: open 0.1s linear;
}
@media (max-width: 959px) {
  .recentSitesContainer > .tileContainer {
    --size: 120px;
  }
}
.recentSitesContainer > .tileContainer .delete {
  all: unset;
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  height: 16px;
  width: 16px;
  margin-left: auto;
  cursor: pointer;
  -webkit-mask-image: url("chrome://userchrome/content/pages/newTabHome/resources/delete.svg");
          mask-image: url("chrome://userchrome/content/pages/newTabHome/resources/delete.svg");
  -webkit-mask-size: 8px;
          mask-size: 8px;
  mask-position-y: center;
  mask-position-x: 5px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background: var(--deleteNormal);
}
.recentSitesContainer > .tileContainer .delete:hover {
  background: var(--deleteHot);
}
.recentSitesContainer > .tileContainer:hover .delete,
.recentSitesContainer > .tileContainer:hover .activityLabel {
  display: block !important;
}
.recentSitesContainer > .tileContainer > .tile {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid var(--tileBorder);
  background-color: var(--tileEmpty);
  padding: 8px;
  display: block;
  font-size: 10pt;
  color: var(--label);
  text-decoration: none;
  font-weight: normal;
}
.recentSitesContainer > .tileContainer > .tile[href] {
  background-color: var(--tileContent);
}
.recentSitesContainer > .tileContainer > .tile > hbox {
  margin-bottom: 12px;
}
@media (max-width: 959px) {
  .recentSitesContainer > .tileContainer > .tile > hbox {
    margin-bottom: 6px;
  }
}
.recentSitesContainer > .tileContainer > .tile .icon {
  height: 32px;
  width: 32px;
  background-size: 32px;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.recentSitesContainer > .tileContainer > .tile > .title {
  height: 34px;
  overflow: hidden;
  margin: 0;
}
.recentSitesContainer > .tileContainer > .tile > .activity {
  position: relative;
  height: 8px;
  background-color: var(--websiteColour);
  width: 100%;
  margin-top: 29px;
}
@media (max-width: 959px) {
  .recentSitesContainer > .tileContainer > .tile > .activity {
    margin-top: 13px;
  }
}
.recentSitesContainer > .tileContainer > .tile > .activity::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: white;
  opacity: 0.15;
}
.recentSitesContainer > .tileContainer > .tile > .activityLabel {
  margin: 0 2px;
  color: var(--activityLabel);
  display: none;
}

.footer {
  margin-top: 30px;
  height: 46px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.footer hr {
  border: 0;
  border-top: 1px solid var(--footerSeparator);
  margin-top: 7px;
  margin-bottom: 5px;
  width: 100%;
}
.footer .button {
  display: inline-block;
  color: var(--footerLabel);
  height: 13px;
  text-decoration: none;
  cursor: default;
  display: flex;
}
.footer .button:hover {
  text-decoration: underline;
}
.footer .button:first-of-type {
  margin-left: 2px;
}
.footer .button:last-of-type {
  margin-right: 2px;
}
.footer #top > img {
  transform: translateY(-1px);
}
.footer #top > img:first-of-type {
  margin-right: 5px;
}
.footer #top > .button:last-of-type {
  margin-left: auto;
}
.footer separator {
  width: 1px;
  height: 13px;
  margin: 0 15px;
  background-color: var(--footerSeparator);
}

#searchForm {
  display: flex;
  flex: 1;
}

#searchContainer {
  margin-top: 90px;
  margin-bottom: 50px;
  height: 47px;
}

#searchLogo {
  display: flex;
  width: 125px;
  align-items: center;
}
#searchLogo > img {
  height: 41px;
  filter: grayscale(100%) contrast(2%);
}

#searchBoxContainer {
  flex: 1;
  box-sizing: border-box;
  background-color: var(--searchBox);
  border: 1px solid var(--searchBoxBorder);
}
#searchBoxContainer #searchBox {
  all: unset;
  flex: 1;
  font-size: 18pt;
  padding-left: 14px;
}
#searchBoxContainer #searchBox::-moz-placeholder {
  font-style: italic;
  text-transform: lowercase;
}
#searchBoxContainer #searchBox::placeholder {
  font-style: italic;
  text-transform: lowercase;
}
#searchBoxContainer #searchGlyph {
  all: unset;
  width: 43px;
  -webkit-mask: url(chrome://userchrome/content/images/newtabhome-search-mask.svg);
          mask: url(chrome://userchrome/content/images/newtabhome-search-mask.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center 9px;
          mask-position: center 9px;
  background-color: var(--searchGlyph);
}

.IE97777,
.IE97930,
.IE9,
.IE10Plus,
.IE11 {
  display: none;
}

:root[appearance=IE97777] .IE97777 {
  display: flex;
}
:root[appearance=IE97777] .container::before {
  background-position-y: 0px;
}
:root[appearance=IE97930] .IE97930 {
  display: flex;
}
:root[appearance=IE97930] .container::before {
  background-position-y: -97px;
}
:root[appearance=IE97777] .container::before, :root[appearance=IE97930] .container::before {
  content: "";
}
:root[appearance=IE97777] .recentSitesContainer > .tileContainer > .tile, :root[appearance=IE97930] .recentSitesContainer > .tileContainer > .tile {
  border-radius: 4px;
}
:root[appearance=IE9] .IE9 {
  display: flex;
}
:root[appearance=IE10Plus] .IE10Plus, :root[appearance=IE11] .IE10Plus {
  display: flex;
}
:root[appearance=IE10Plus] body, :root[appearance=IE11] body {
  background-image: none;
  font-size: 11pt;
}
:root[appearance=IE10Plus] .container, :root[appearance=IE11] .container {
  margin-top: 50px;
}
:root[appearance=IE10Plus] h1, :root[appearance=IE11] h1 {
  margin-left: 7px;
  color: var(--header);
  font-size: 21pt;
}
:root[appearance=IE10Plus] .recentSitesContainer > .tileContainer > .tile, :root[appearance=IE11] .recentSitesContainer > .tileContainer > .tile {
  font-size: 11pt;
}
:root[appearance=IE10Plus] .recentSitesContainer > .tileContainer > .tile .title, :root[appearance=IE11] .recentSitesContainer > .tileContainer > .tile .title {
  height: 39px;
}
:root[appearance=IE10Plus] .recentSitesContainer > .tileContainer > .tile .activity, :root[appearance=IE11] .recentSitesContainer > .tileContainer > .tile .activity {
  margin-top: 26px;
}
:root[appearance=IE10Plus] .recentSitesContainer > .tileContainer > .tile .activityLabel, :root[appearance=IE11] .recentSitesContainer > .tileContainer > .tile .activityLabel {
  margin-top: 1px;
  font-size: 8pt;
}
:root[appearance=IE10Plus] .footer, :root[appearance=IE11] .footer {
  margin-top: 55px;
}
:root[appearance=IE10Plus] .footer .button, :root[appearance=IE11] .footer .button {
  height: 20px;
}
:root[appearance=IE10Plus] .footer .button:first-of-type, :root[appearance=IE11] .footer .button:first-of-type {
  margin-left: 3px;
}
:root[appearance=IE10Plus] .footer .button:last-of-type, :root[appearance=IE11] .footer .button:last-of-type {
  margin-right: 3px;
}
:root[appearance=IE10Plus] .footer hr, :root[appearance=IE11] .footer hr {
  margin-bottom: 4px;
}
:root[appearance=IE10Plus] .footer separator, :root[appearance=IE11] .footer separator {
  margin: 0 26px;
  margin-top: 5px;
}
:root[appearance=IE11] .IE11 {
  display: flex;
}/*# sourceMappingURL=style.css.map */