body {
  overflow-x: hidden;
}

ul.ui-menu{
  z-index: 2000 !important;
}

.searchclear {
    position: absolute;
    right: 8px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;
}

/* Buttons */

.btn.btn-primary {
  background-color: var(--babble-blue);
}

.btn-group:not( .bootstrap-select ) > .btn:hover,
button.btn.btn-primary:hover,
button.btn.btn-primary:active {
  background-color: var(--babble-green);
  border-color: var(--babble-green);
  color: var(--babble-violet);
}

.table > tbody > tr > td {
  border-bottom: 1px solid #dee2e6;
}

table > tr > td > button.btn-danger {
  background-color: #dc3545;
  color: #fff;
}

div.input-group {
  border: none;
}

/* Form styles */

.form-control.disabled {
  background-color: #e9ecef;
}

/* Navbar styles */

.navbar-brand {
  height: auto;
}

.nav-pills > li.nav-item {
  margin: 0 0.5rem;
}

.nav-pills > li.nav-item > a.nav-link {
  font-size: 1rem;
}

.nav-pills > li.nav-item > a.nav-link {
  color: #444;
  background-color: var(--www-white);
  border: 1px solid var(--bs-border-color);
}

.nav-pills > li.nav-item.active > a.nav-link {
  color: var(--www-white);
  background-color: var(--babble-blue);
  border: 1px solid var(--babble-blue);
}

.nav-pills > li.nav-item > a.nav-link:hover,
.nav-pills > li.nav-item > a.nav-link:focus-visible {
  color: var(--babble-violet);
  background-color: var(--babble-green);
  border: 1px solid var(--babble-green);
}

div.ui-state-active:hover {
  background: #d1eaff !important;
  border: 1px solid #d1eaff !important;
  color: #000!important;
}

.ui-state-active,
.ui-widget-content
.ui-state-active,
.ui-widget-header
.ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  background: #d1eaff !important;
  border: 1px solid #d1eaff !important;
  color: #000!important;
}

.navbar.navbar-expand-md {
  background-color: var(--babble-blue);
  color: #fff;
}

.navbar-nav > .nav-item > a.nav-link {
  border-bottom: 2px solid transparent;
  padding: 0.4rem 0;
  margin: 0 0.8rem;
}

.navbar-nav > .nav-item > a.nav-link:hover,
.navbar-nav > .nav-item > a.nav-link:focus,
.navbar-nav > .nav-item > a.nav-link:focus-visible {
  color: var(--www-white);
}

.navbar-nav > .nav-item > a.nav-link:hover,
.navbar-nav > .nav-item > a.nav-link:focus-visible,
.navbar-nav > .nav-item > a.nav-link.active:hover,
.navbar-nav > .nav-item > a.nav-link.active:focus-visible {
  border-bottom: 2px solid var(--babble-green);
}

.navbar-nav > .nav-item > a.nav-link.active {
  color: var(--www-white);
  border-bottom: 2px solid var(--www-white);
}

a.nav-link {
  color: #fff;
  font-family: 'Open Sans', sans-serif; 
  font-size: 1.3rem;
}

.navbar {
  border-radius: 0;
}

.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
  margin-right: 0;
  margin-left: 0;
}

.nav-item > .nav-link:focus, 
.nav-item > .nav-link:hover {
  color: #d1eaff;
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.1);
}

.navbar-collapse > .desktop-searchbox {
  width: 60%;
  justify-self: center;
}

.navbar-collapse > .desktop-searchbox > input
{
  background-color: #d1eaff;
  border: none;
}

/* Domains Section Styles */

#domain-table > .panel > .panel-heading:not(:first-child) {
  border-top: 1px solid #ddd;
}

#domain-table > .panel > .panel-heading > .panel-title {
  font-size: 1.5rem;
  color: var(--babble-violet);
}

.domain-card {
  color: #333;
  background-color: #fff;
  margin: 2rem;
}

.domain-card h3 {
  margin: 20px 0;
}

.domain-card ul {
  padding-inline-start: 20px;
  margin-top: 0;
  margin-bottom: 20px;
}

.domain-card .row {
  margin-bottom: 10px;
}

.tariff-table {
  font-family: 'Open sans', sans-serif;
}

.tariff-table.current-tariff-table {
  margin-bottom: 1rem;
}

.tariff-table > table > tbody > tr > td,
.tariff-table > table > thead > tr > th {
  padding: 5px 0 5px 5px;
  vertical-align: middle;
}

.tariff-table > table > tbody > tr > td,
.tariff-table > table > tbody > tr > td:hover {
  border-bottom: 1px solid #EAE8F0;
  background-color: #fff;
}

.tariff-table > table > thead > tr > th,
.tariff-table > table > thead > tr > th:hover {
  background-color: #fff;
  color: var(--babble-violet);
}

.tariff-table > table > thead > tr > th {
  border-bottom: 1px solid #979797;
}

.tariff-table > table > tbody > tr.even > td,
.tariff-table > table > tbody > tr.even > td:hover {
  background-color: #f9f8fb;
}

.tariff-table > table > tbody > tr > td.change-tariff {
  text-align: center;
}

.domain_fixed_price > div > button {
  margin-top: 10px;
}

.help-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.help-icon {
  color: var(--babble-blue);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Accordion styles */

button.accordion-button:not(.collapsed) {
  color: black;
  background-color: #d1eaff;
  box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-item:first-of-type {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.accordion-item:first-of-type>.accordion-header .accordion-button {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.accordion-item:last-of-type {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
}