.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
  max-width: 80rem !important;
  padding-left: 1rem !important;
  padding-right: 1em !important;
  margin: 0 auto !important;
}

.btn {
  font-size: 0.92rem;
 
}

.btn-primary {
  /* the main button property used all over */
  background-color: hsl(196, 100%, 24%);
  
}

/* removing the outline that appears when a button is clicked */
button:focus {
  outline: none !important;
}

.montserrat {
  font-family: 'Montserrat', sans-serif;
}

.navbar {
  padding: 1rem 0;
  /* padding-top: 0.6rem; */
}

.navbar-brand {
  padding-top: 0;
}

.header.header .logo-img {
  max-height: 50px;
}

/* Breadcrumb */
.master-breadcrumb {
  background-color: transparent;
  padding: 0 1rem;  
  width: 100%;  
}

.breadcrumb-container {
  max-width: 80rem;
  margin: 0 auto;
}

.breadcrumb {
  background-color: transparent;
}

.breadcrumb-item a {
  color: #231f1f;
  font-size: 12px;
}

.breadcrumb-item.active {
  color: rgb(84, 110, 165);
  font-size: 12px;
}

/* top Navbar */
.cst-nav-alignment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 80rem;
  margin: 0 auto;
  height: 65px;
  position: sticky !important;
  top: 0;
}

/* Very important to keep the main whmcs navbar from collapsing */
.navbar-expand-xl .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}

/* we overide styles in theme.min.css that cause the padding in the whmcs navbar to disappear in small screens */
.navbar-expand-xl > .container,
.navbar-expand-xl > .container-fluid,
.navbar-expand-xl > .container-lg,
.navbar-expand-xl > .container-md,
.navbar-expand-xl > .container-sm,
.navbar-expand-xl > .container-xl {
  padding: 0 15px;
}

/* the original whmcs navbar container*/
.cst-original-navbar {
  padding: 0.2rem 1rem;
  background: linear-gradient(to right, #0f3551, #005878) !important; 
}

/* we overide styles in theme.min.css that add a padding to the whmcs navbar */
header.header .main-navbar-wrapper .navbar-collapse {
  padding: 0.3rem 0;
}

/* this is the Menu that appears on small screens */
.cst-small-nav {
 display: none;
}

.cst-og-nav-links {
  display: flex;
}

/* original whmcs navbar links */
.cst-og-nav-links a {  
  color: #d4d4d4 !important;
  letter-spacing: 0.025em;
  /* font-family: "Poppins", sans-serif; */
  
}
 /* targeting the font size in the links in the whmcs navbar */
.header.header .navbar-nav a {
    font-size: 14px;
    font-weight: 400 !important;
}

/* the dropdown menu, we set the z-index so that it doesnt go over the main nav when scrolling up */
.dropdown-menu {
  z-index: 20;
}

/* the links in the dropdown menus in the whmcs navbar */
.navbar .dropdown-menu a {
  color: #2a313c  !important; /*#524b4b*/
  font-weight: 600;
 
}

/* border on the hamburger and cart in the whmcs navbar */
header.header .toolbar .nav-link {
  border: 1px solid #2c2b2b;
  color: #d4d4d4;
}

/* the badge next to the shopping cart in the top navbar */
.btn .badge {
    position: relative;
    top: -1px;
}

/* we set the color of the account/user dropdown in the whmcs navbar */
.cst-user-icon {
  color: #eaeaea;
}

/* the dropdown menu chevron in the whmcs navbar, it also affects links in the new navbar */
header.header .navbar a {
  color: #d4d4d4;
}

.navbar-nav {
  flex-direction: row;
}

/* controlling the way the dropdown menu appears in the whmcs navbar */
.navbar-nav .dropdown-menu {
  position: absolute !important;

 
}

/* This dropdown divider is used in the dropdown menu in the main whmcs navbar */
.dropdown-divider {
  margin: 0.3rem 0;
}

/* The dropdown items in the dropdown menu */
.dropdown-item {
  padding:0.3rem 1.5rem;
}

/* the navbar a's in the whmcs navbar */
header.header .navbar a:hover {
  text-decoration: none;
  color: #bcb4b4 !important;
}

/* ----- Domain Registration Page ----- */

.list-group-item.active {
  color: #3a3535;
  background-color: #dbdde0;
  border: none;
}

.domain-checker-container .input-group-box {
  /* the input in the register domain box */
  padding: 6px !important;
}

.domain-checker-container .input-group-box .input-group-btn .btn {
  /* the button for submitting a search for a domain */
  font-size: 0.92rem;
}

#order-standard_cart .domain-checker-result-headline,
#order-standard_cart .domain-lookup-primary-results .headline {
  /* the container that has the text that displays the results of a domain search */
  font-size: 1.2rem !important;
}

.domain-checker-available {
  color: rgb(70, 75, 70);
}

.domain-checker-available strong {
  /* the text that displays whether a domain is available or not */
  color: #0f3551;
  font-size: 1.4rem;
}

.domain-price .price {
  /* the price of a domain if it is available */
  margin-right: 1rem;
}

.domain-price button {
  min-width: 12rem !important;
  border-radius: 8px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.domain-promo-box {
  /* the hosting and transfer domain promo boxes in the domain register page */
  display: none;
}

/* --- clientareadomains page --- */

#order-standard_cart label,
#order-standard_cart p.domain-renewal-desc,
.service-renewals .div-renewal-period-label {
  /* the form that appears after buying a service to specify which domain will be used for that service */
  color: #5a5555 !important;
  font-weight: 400 !important;
}

/* the sidebar background color when a link is active */
.sidebar .list-group-item.active, .sidebar .list-group-item.active:focus, .sidebar .list-group-item.active:hover {
  background-color: #c0bcbc;
}

/* ----Footer ----*/

/* the loading spinner is hidden, the code is in footer.tpl */
.loading-spinner-removed {
    display: none !important;
}


@media screen and (max-width: 1020px) {
    .cst-og-nav-links {
      display: none !important;
    }

    .cst-small-nav {
      display: block ;
    }
}


@media (min-width: 768px) {
    
}