@import url("https://fonts.googleapis.com/css?family=Fira+Sans:300,400,600,700");
.container {
  width: 100%;
}

section#header {
  border-radius: 0;
  background-color: #313443;
  font-family: "Fira Sans", Helvetica, sans-serif;
}
section#header .logo {
  display: block;
  padding: 10px 0 15px 0;
}
section#header .logo > img {
  display: block;
  height: 32px;
  max-width: 340px;
  margin: 0 auto;
}

#main-menu .navbar-main {
  background-color: #44485c;
  font-family: "Fira Sans", Helvetica, sans-serif;
}
#main-menu .navbar-main a.open-support-ticket {
  display: inline-block;
  padding-left: 15px;
  font-size: 16px;
  line-height: 50px;
  color: #5db75c;
}
#main-menu .navbar-main a.open-support-ticket:hover, #main-menu .navbar-main a.open-support-ticket:focus {
  color: #5db75c;
  text-decoration: none;
}
#main-menu .navbar-main .navbar-toggle {
  margin: 4px 5px 5px 0;
  padding: 10px;
}
#main-menu .navbar-main .navbar-toggle .icon-bar {
  height: 4px;
  width: 32px;
}
#main-menu .navbar-main .nav {
  margin-top: 0;
  margin-bottom: 0;
}
#main-menu .navbar-main .nav .nav-divider {
  background-color: #363837;
  margin: 5px 0;
}
#main-menu .navbar-main .nav li a {
  padding: 10px 25px;
}
#main-menu .navbar-main .nav li a:hover, #main-menu .navbar-main .nav li a:focus {
  color: #019EDA;
  background-color: #44485c;
}
#main-menu .navbar-main .nav li.open > a {
  color: #019EDA;
  background-color: #44485c;
}
#main-menu .navbar-main .nav li.account {
  background-color: #44485c;
}
#main-menu .navbar-main .nav li .dropdown-menu {
  background-color: #f1ebeb;
}
#main-menu .navbar-main .nav li .dropdown-menu li a {
  color: #363837;
  padding: 10px 25px;
}
#main-menu .navbar-main .nav li .dropdown-menu li a:hover, #main-menu .navbar-main .nav li .dropdown-menu li a:focus {
  color: #019EDA;
  background-color: #f1ebeb;
}

ul.top-nav {
  width: 100%;
}
ul.top-nav li {
  padding: 6px 0;
  margin-right: 10px;
}
ul.top-nav li:last-of-type {
  margin-right: 0;
}
ul.top-nav li a {
  font-size: 13px;
  line-height: 18px;
  padding: 0;
  color: #7981a8;
}
ul.top-nav li a:focus, ul.top-nav li a:hover {
  color: #019EDA;
}
ul.top-nav li:active a,
ul.top-nav li:active a:focus,
ul.top-nav li:active a:hover,
ul.top-nav li:focus a,
ul.top-nav li:focus a:focus,
ul.top-nav li:focus a:hover,
ul.top-nav li:hover a,
ul.top-nav li:hover a:focus,
ul.top-nav li:hover a:hover {
  color: #019EDA;
}
ul.top-nav li.primary-action {
  border: none;
}

.language-popover {
  background: #f1ebeb;
  border-radius: 0;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}
.language-popover.popover.bottom > .arrow:after {
  border-bottom-color: #f1ebeb;
}
.language-popover .popover-content li a {
  color: #363837;
}

div.header-lined h1 {
  color: #313443;
}

.pagination > .active > a,
.pagination > .active > a:active,
.pagination > .active > a:hover {
  background-color: #313443;
  border-color: #313443;
}

.table-container .dataTables_info {
  background-color: #313443;
}

.text-wrap {
  word-wrap: break-word;
}

.error {
  color: #a94442;
}

.btn-product-action {
  min-width: 175px;
}

.tile .icon {
  height: 44px;
  width: 44px;
}
.tile .icon.services {
  height: 44px;
  width: 79px;
  background: url("/templates/webmate/img/icons/services.png") no-repeat;
}
.tile .icon.domains {
  background: url("/templates/webmate/img/icons/globe.png") no-repeat;
}
.tile .icon.tickets {
  height: 57px;
  width: 34px;
  background: url("/templates/webmate/img/icons/tickets.png") no-repeat;
}
.tile .icon.invoices {
  height: 49px;
  width: 46px;
  background: url("/templates/webmate/img/icons/invoices.png") no-repeat;
}

div.product-icon {
  padding: 15px 15px 5px 15px;
  font-size: 48px;
}
div.product-icon .product {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto;
}
div.product-icon .product.webmate, div.product-icon .product.managed-web-hosting {
  background: url("/templates/webmate/img/products/macmate.png") no-repeat;
}
div.product-icon .product.quadra-partner-pack, div.product-icon .product.quadra-pack, div.product-icon .product.hosting {
  background: url("/templates/webmate/img/products/quadra.png") no-repeat;
}
div.product-icon .product.cpack, div.product-icon .product.cpack-hosting {
  background: url("/templates/webmate/img/products/cpack.png") no-repeat;
}
div.product-icon .product.broadband {
  background: url("/templates/webmate/img/products/broadband.png") no-repeat;
}
div.product-icon .product.telecoms, div.product-icon .product.voip, div.product-icon .product.sip, div.product-icon .product.mobile {
  background: url("/templates/webmate/img/products/telecoms.png") no-repeat;
}
div.product-icon .product.email {
  background: url("/templates/webmate/img/products/email.png") no-repeat;
}

.kbarticle-content {
  padding: 0;
  border: none;
}

.mailing-list-optin {
  display: block;
  width: 100%;
  padding: 20px 0 60px 0;
}

.customfield-grid--phonenumbers {
  display: grid;
}

.contact-method {
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon heading" "desc desc";
  margin-bottom: 20px;
}

.contact-method__icon {
  grid-area: icon;
  font-size: 48px;
  line-height: 1;
  color: #ccc;
}

.contact-method__heading {
  grid-area: heading;
  align-self: center;
  color: #313443;
  margin: 0;
}

.contact-method__description {
  grid-area: desc;
  margin: 0;
}

@media (min-width: 768px) {
  section#header .logo {
    float: left;
    padding: 10px 0 18px 0;
  }
  section#header.match-website .logo {
    padding: 8px 0 20px 0;
  }
  section#header.match-website .top-nav {
    margin-top: 21px;
  }

  ul.top-nav {
    width: auto;
    margin-top: 21px;
  }
  ul.top-nav li {
    margin-right: 30px;
  }
  ul.top-nav li a {
    font-size: 15px;
  }

  .customfield-grid--phonenumbers {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 10px;
  }
}
@media (min-width: 992px) {
  #main-menu .navbar-main {
    font-weight: 300;
    font-size: 13px;
  }
  #main-menu .navbar-main #Primary_Navbar-Open_Ticket > a {
    color: #5db75c;
    font-weight: 400;
  }
  #main-menu .navbar-main #Primary_Navbar-Open_Ticket > a:hover, #main-menu .navbar-main #Primary_Navbar-Open_Ticket > a:focus {
    color: #5db75c;
  }
  #main-menu .navbar-main .nav li a {
    padding: 10px 15px;
  }
  #main-menu .navbar-main .nav li .dropdown-menu {
    border-bottom: 3px solid #363837;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  }
  #main-menu .navbar-main .nav li .dropdown-menu li a {
    padding: 8px 25px;
    line-height: 14px;
  }

  .product-renewal {
    margin-top: 24px;
  }

  .product-upgrade {
    margin-top: 113px;
  }

  .product-cancel {
    margin-top: 156px;
  }

  .product-upgrade + .product-cancel {
    margin-top: 0;
  }
}
@media (min-width: 1200px) {
  #main-menu .navbar-main {
    font-size: 15px;
  }

  .nav li a {
    padding: 10px 20px;
  }
}