.wcap_line-center {
  margin: 0;
  padding: 0 10px;
  background: #fff;
  display: inline-block;
}
.wcap_config_title {
  text-align: center;
  position: relative;
  z-index: 2;
}
.wcap_config_title:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: solid 1px #666666;
  z-index: -1;
}
.wcap_hr_separator {
  margin: 2px;
  border-top: 1px solid #a9b3bd;
  width: 100%;
}
.wcop_product_domain_options .whcom_product_domain_option {
  background: #f3f3f3;
  border-radius: 4px;
  margin-bottom: 5px;
  overflow: hidden;
}
.wcop_product_domain_options .whcom_product_domain_option .whcom_product_domain_option_form {
  display: none;
  width: 80%;
  margin: 0 auto;
}
/***************************************/
/**         Nav-bar                   **/
/***************************************/
:root {
  --wcap-menu-primary: #31b0d5;
  --wcap-menu-secondary: #f0f9fc;
  --wcap-menu-surface: #ffffff;
  --wcap-menu-text: #1d4f5f;
  --wcap-menu-muted-text: #4f7b8a;
  --wcap-menu-border: #c7e6ef;
  --wcap-menu-hover: #e3f5fa;
  --wcap-menu-active: #d4eef7;
}

#primary_nav_wrap {
  margin: 15px 0;
  display: block !important;
  background: var(--wcap-menu-primary);
  color: var(--wcap-menu-surface);
  font-weight: 400;
  overflow: visible !important;
  padding: 0 !important;
  border: 1px solid var(--wcap-menu-border);
  border-radius: 10px;
}
#primary_nav_wrap:after {
  clear: both;
  content: ' ';
  width: 100%;
  display: block;
}
#primary_nav_wrap ul,
#primary_nav_wrap ul li {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
}
#primary_nav_wrap ul li.separator {
  height: 1px;
  background-color: var(--wcap-menu-border);
}
#primary_nav_wrap ul li.current-menu-item,
#primary_nav_wrap ul li:focus-within,
#primary_nav_wrap ul li:hover {
  background: var(--wcap-menu-secondary);
}
#primary_nav_wrap ul li.current-menu-item > a,
#primary_nav_wrap ul li:focus-within > a,
#primary_nav_wrap ul li:hover > a {
  color: var(--wcap-menu-text) !important;
}
#primary_nav_wrap ul li:hover > ul,
#primary_nav_wrap ul li:focus-within > ul {
  display: block;
  z-index: 999;
}
#primary_nav_wrap ul a {
  display: block;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  line-height: 32px;
  padding: 5px 15px;
  color: var(--wcap-menu-surface);
}
#primary_nav_wrap > ul > li > a {
  color: var(--wcap-menu-surface);
}
#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--wcap-menu-surface);
  border: 1px solid var(--wcap-menu-border);
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(19, 59, 72, 0.18);
}
#primary_nav_wrap ul ul li {
  float: none;
  width: 220px;
}
#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px;
  color: var(--wcap-menu-text);
}
#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%;
}
#primary_nav_wrap ul.wcap_navbar_right > li > ul {
  left: auto;
  right: 0;
}
@media (min-width: 768px) {
  #primary_nav_wrap ul.wcap_navbar_left {
    display: flex;
    float: left;
  }
  #primary_nav_wrap ul.wcap_navbar_right {
    float: right;
  }
}

.wcap_page_container.whcom_main.whcom_main_style_two {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
}

.wcap_page_container.whcom_main.whcom_main_style_two #wcap_menu_div:not(.whcom_let_side_main_menu) {
  width: 100%;
  margin-bottom: 8px;
}

.wcap_page_container.whcom_main.whcom_main_style_two #wcap_menu_div:not(.whcom_let_side_main_menu) #primary_nav_wrap {
  width: min(960px, 92%);
  margin: 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.wcap_page_container.whcom_main.whcom_main_style_two #wcap_menu_div:not(.whcom_let_side_main_menu) #primary_nav_wrap ul.wcap_navbar_left,
.wcap_page_container.whcom_main.whcom_main_style_two #wcap_menu_div:not(.whcom_let_side_main_menu) #primary_nav_wrap ul.wcap_navbar_right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.wcap_page_container.whcom_main.whcom_main_style_two #wcap_menu_div:not(.whcom_let_side_main_menu) #primary_nav_wrap ul.wcap_navbar_right {
  margin-left: auto;
}

.wcap_page_container.whcom_main.whcom_main_style_two #wcap_menu_div:not(.whcom_let_side_main_menu) #primary_nav_wrap > ul > img {
  display: none !important;
}

.wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu {
  flex: 0 0 250px;
  max-width: 250px;
  position: relative;
  z-index: 30;
}

.wcap_page_container.whcom_main #wcap_main_div.whcome_main_div_side_bar {
  flex: 1 1 calc(100% - 268px);
  min-width: 0;
}

.wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu {
  min-height: 620px;
}

.wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu #primary_nav_wrap {
  margin: 0;
  background: var(--wcap-menu-surface);
  color: var(--wcap-menu-text);
  border: 1px solid var(--wcap-menu-border);
  border-radius: 12px;
  overflow: visible !important;
}

.wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul {
  list-style: none;
  margin: 0;
  padding: 10px;
  background: var(--wcap-menu-surface);
  border-radius: 12px;
}

.wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li {
  border: 1px solid transparent;
  border-radius: 10px;
  margin-bottom: 2px;
}

.wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li:last-child {
  margin-bottom: 0;
}

.wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--wcap-menu-text) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  padding: 11px 12px;
  border-radius: 9px;
  text-decoration: none;
}

.wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li > a i.whcom_icon_down-dir {
  margin-left: auto;
  font-size: 11px;
  color: var(--wcap-menu-muted-text);
}

.wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li.current-menu-item,
.wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li > a:hover,
.wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li:hover {
  background: var(--wcap-menu-hover);
  border-color: var(--wcap-menu-border);
}

.wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li.current-menu-item > a,
.wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li > a:hover {
  color: var(--wcap-menu-text) !important;
}

.whcom_side_menu_icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 18px;
}

.wcap_sidebar_profile {
  display: flex;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid var(--wcap-menu-border) !important;
  border-radius: 10px !important;
  background: var(--wcap-menu-secondary) !important;
  padding: 10px !important;
  margin-bottom: 8px !important;
}

.wcap_sidebar_avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--wcap-menu-surface);
}

.wcap_sidebar_profile_name {
  display: block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wcap-menu-text);
  font-size: 12px;
  font-weight: 700;
}

@media (min-width: 992px) {
  .wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu {
    min-height: calc(100vh - 190px);
    position: relative;
  }

  .wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li {
    position: relative;
  }

  .wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li > ul {
    display: none;
    position: absolute;
    left: calc(100% + 2px);
    top: 0;
    min-width: 220px;
    list-style: none;
    margin: 0;
    padding: 8px;
    background: var(--wcap-menu-surface);
    border: 1px solid var(--wcap-menu-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(19, 59, 72, 0.2);
    z-index: 80;
  }

  .wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li:hover > ul,
  .wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li:focus-within > ul,
  .wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li.current-menu-item > ul {
    display: block;
  }

  .wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li > ul > li > a {
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--wcap-menu-muted-text);
    font-size: 12px;
    line-height: 1.35;
    text-decoration: none;
  }

  .wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li > ul > li.current-menu-item > a,
  .wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li > ul > li > a:hover {
    color: var(--wcap-menu-text);
    background: var(--wcap-menu-active);
  }
}

.wcap_mobile_sidebar_header,
.wcap_mobile_menu_overlay {
  display: none;
}

@media (max-width: 991px) {
  .wcap_page_container.whcom_main {
    display: block;
  }

  .wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu,
  .wcap_page_container.whcom_main #wcap_main_div.whcome_main_div_side_bar {
    max-width: 100%;
    width: 100%;
    flex: none;
  }

  .wcap_page_container #primary_nav_wrap > ul > li,
  .wcap_page_container #primary_nav_wrap ul ul li {
    width: 100%;
    float: none;
  }

  .wcap_page_container #primary_nav_wrap ul ul {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    border: 0;
    border-top: 1px solid var(--wcap-menu-border);
    border-radius: 0;
    box-shadow: none;
    background: var(--wcap-menu-secondary);
    padding: 4px 0;
  }

  .wcap_page_container #primary_nav_wrap ul ul a {
    padding-left: 22px;
  }

  .wcap_mobile_sidebar_header {
    display: block;
    margin: 0 0 15px;
  }

  .wcap_mobile_header_inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .wcap_mobile_menu_toggle {
    border: 0;
    background: var(--wcap-menu-primary);
    color: var(--wcap-menu-surface);
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
  }

  .wcap_hamburger_icon {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
  }

  .wcap_hamburger_icon span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--wcap-menu-surface);
    transition: all .2s ease;
  }

  .wcap_mobile_menu_toggle.wcap_toggle_active .wcap_hamburger_icon span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .wcap_mobile_menu_toggle.wcap_toggle_active .wcap_hamburger_icon span:nth-child(2) {
    opacity: 0;
  }

  .wcap_mobile_menu_toggle.wcap_toggle_active .wcap_hamburger_icon span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .wcap_mobile_menu_overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
  }


  .wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(286px, 88vw);
    transform: translateX(-110%);
    transition: transform .3s ease;
    z-index: 10001;
    overflow-y: auto;
    padding: 10px;
    background: var(--wcap-menu-surface);
    box-shadow: 0 8px 30px rgba(2, 6, 23, 0.2);
  }

  .wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu.wcap_sidebar_open {
    transform: translateX(0);
  }

  .wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu #primary_nav_wrap {
    border-radius: 8px;
  }

  .wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li > ul {
    display: none;
    position: static;
    left: auto;
    top: auto;
    margin-top: 4px;
    border: 0;
    border-top: 1px solid var(--wcap-menu-border);
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    background: var(--wcap-menu-secondary);
    padding: 4px 0;
  }

  .wcap_page_container.whcom_main #wcap_menu_div.whcom_let_side_main_menu .whcom_let_side_menu .whcom_side_menu_link > ul > li.wcap_submenu_expanded > ul {
    display: block;
  }

  body.wcap_body_menu_open {
    overflow: hidden;
  }
}

/***************************************/
/**         Main Container            **/
/***************************************/
.wcap_page_container,
.wcap_dialog {
  background: white;
  max-width: 1360px;
  padding: 15px;
  margin: 0 auto 50px !important;
  color: #040404;
  font-size: 14px;
  line-height: 1.4;
  min-height: 400px;
}
.wcap_page_container,
.wcap_dialog,
.wcap_page_container *,
.wcap_dialog *,
.wcap_page_container:after,
.wcap_dialog:after,
.wcap_page_container:before,
.wcap_dialog:before,
.wcap_page_container:after,
.wcap_dialog:after,
.wcap_page_container:before,
.wcap_dialog:before {
  box-sizing: border-box;
}
.wcap_page_container .text_small,
.wcap_dialog .text_small,
.wcap_page_container small,
.wcap_dialog small {
  font-size: 12px;
}
.wcap_page_container .text_large,
.wcap_dialog .text_large {
  font-size: 16px;
}
.wcap_page_container h2,
.wcap_dialog h2 {
  font-size: 30px;
}
.wcap_page_container h3,
.wcap_dialog h3 {
  font-size: 22px;
}
.wcap_page_container table.dataTable.dtr-inline.collapsed tbody td:first-child:before,
.wcap_dialog table.dataTable.dtr-inline.collapsed tbody td:first-child:before,
.wcap_page_container table.dataTable.dtr-inline.collapsed tbody th:first-child:before,
.wcap_dialog table.dataTable.dtr-inline.collapsed tbody th:first-child:before {
  color: #040404;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  content: "\f078";
  font-family: FontAwesome, serif;
  top: 50%;
  margin-top: -8px;
}
.wcap_page_container table.dataTable.dtr-inline.collapsed tbody tr.parent td:first-child:before,
.wcap_dialog table.dataTable.dtr-inline.collapsed tbody tr.parent td:first-child:before,
.wcap_page_container table.dataTable.dtr-inline.collapsed tbody tr.parent th:first-child:before,
.wcap_dialog table.dataTable.dtr-inline.collapsed tbody tr.parent th:first-child:before {
  content: "\f077";
  font-family: FontAwesome, serif;
  background-color: transparent;
}
.wcap_page_container .wcap_load_page,
.wcap_dialog .wcap_load_page {
  visibility: visible;
}
/***************************************/
/**         General Components        **/
/***************************************/
.wcap_display_block {
  display: block !important;
}
.wcap_page_heading {
  margin-bottom: 30px;
}
.wcap_page_heading h2 {
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid #ccc;
  font-weight: 400;
}
.wcap_sub_heading {
  margin-bottom: 15px;
}
.wcap_progress_circle {
  max-width: 150px;
  margin: -25px auto 0;
  max-height: 100px;
  overflow: hidden;
}
.wcap_services .wcap_services_header {
  text-align: right;
  margin-bottom: 15px !important;
}
.wcap_services .wcap_services_header input[type="text"],
.wcap_services .wcap_services_header label {
  margin-left: 15px;
}
.wcap_services .wcap_service_box {
  padding: 15px;
  border-right: 1px solid #e6e6e6;
  background: #F6F6F6;
  margin-bottom: 15px !important;
  position: relative;
}
.wcap_services .wcap_service_box .wcap_service_box_qty {
  font-size: 28px;
  margin-top: 20px;
}
.wcap_services .wcap_service_box i.wcap_service_icon {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 50px;
  line-height: 40px;
  color: lightgray;
  width: auto;
  height: auto;
}
.wcap_services .wcap_services_boxes > div:nth-child(1) .wcap_service_box .wcap_service_box_title {
  border-bottom: 2px solid #5bc0de;
}
.wcap_services .wcap_services_boxes > div:nth-child(2) .wcap_service_box .wcap_service_box_title {
  border-bottom: 2px solid #5cb85c;
}
.wcap_services .wcap_services_boxes > div:nth-child(3) .wcap_service_box .wcap_service_box_title {
  border-bottom: 2px solid #d9534f;
}
.wcap_services .wcap_services_boxes > div:nth-child(4) .wcap_service_box .wcap_service_box_title {
  border-bottom: 2px solid #f0ad4e;
}
.wcap-service-box {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 30px;
}
.wcap-service-box .wcap-service-text {
  padding: 30px 15px;
  background: #EFEFEF;
  border-radius: 19px;
}
.wcap-service-box .wcap-service-icon {
  width: 120px;
  height: 120px;
  line-height: 120px;
  background: #333;
  color: white;
  margin: 0 auto 35px;
  font-size: 60px;
  border-radius: 100px;
}
.wcap-service-box .wcap-service-status-text {
  padding: 8px 16px;
  text-transform: uppercase;
  color: white;
}
.wcap_href {
  cursor: pointer !important;
}
div.wcap small {
  font-size: 12px;
  color: #666;
}
#wcap_loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: visible;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;
}
#wcap_loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
#wcap_loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#wcap_loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#whmcs_validation_form,
#wcap_update_password_form1 {
  max-width: 480px;
  margin: 0 auto;
}
.wcap_product_boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}
.wcap_product_boxes .wcap_product_box {
  width: 49%;
  min-width: 240px;
  position: relative;
  padding-bottom: 65px;
}
.wcap_product_boxes .wcap_product_box .wcap_product_info {
  text-align: center;
  display: block;
  padding: 0 0 10px;
  min-height: 95px;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 10px;
}
.wcap_product_boxes .wcap_product_box .wcap_product_info .wcap_product_price {
  font-size: 18px;
  font-weight: bold;
}
.wcap_product_boxes .wcap_product_box .wcap_product_submit {
  padding: 10px 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
/*
Start of summary Panel
*/
.wcap_summary_panel {
  border: 1px solid #f8f8f8;
  border-bottom: 4px solid #666666;
  margin-bottom: 15px !important;
  border-radius: 8px;
  overflow: hidden;
  line-height: 1.42857143;
  font-size: 0.8em;
}
.wcap_summary_panel .wcap_text_total {
  font-size: 2.3em;
  display: block;
}
.wcap_summary_panel .wcap_summary_panel_header,
.wcap_summary_panel .whcom_panel_footer {
  background: #666666;
  color: #ffffff;
}
.wcap_summary_panel .wcap_summary_panel_body {
  background: #f8f8f8;
}
.wcap_summary_panel .wcap_summary_panel_header.wcap_summary_panel_header_white,
.wcap_summary_panel .wcap_summary_panel_footer.whcom_panel_footer_white {
  background: white;
}
.wcap_summary_panel .wcap_summary_panel_header,
.wcap_summary_panel .wcap_summary_panel_body,
.wcap_summary_panel .wcap_summary_panel_footer {
  overflow: hidden;
  padding: 10px;
}
.wcap_summary_panel .wcap_summary_panel_header.panel_body_has_list,
.wcap_summary_panel .wcap_summary_panel_body.panel_body_has_list,
.wcap_summary_panel .wcap_summary_panel_footer.panel_body_has_list {
  padding: 10px 0;
}
.wcap_summary_panel .wcap_summary_panel_header {
  font-size: 20px;
  border-bottom: 1px solid #f8f8f8;
}
.wcap_summary_panel .wcap_summary_panel_header.wcap_summary_panel_has_icon {
  padding-left: 40px;
  position: relative;
}
.wcap_summary_panel .wcap_summary_panel_header.wcap_summary_panel_has_icon [class^="whcom_icon_"] {
  font-size: 20px;
  line-height: 30px;
  position: absolute;
  height: 30px;
  width: 30px;
  text-align: center;
  top: 50%;
  margin-top: -15px;
  left: 10px;
}
.wcap_summary_panel .wcap_summary_panel_footer {
  border-top: 1px solid #f8f8f8;
}
/*
End of Summary Panel
*/
.wcap_checkout_form_container {
  margin: 0 auto 15px !important;
}
.wcap_checkout_form_container .submit_div {
  min-width: 180px !important;
}
/*# sourceMappingURL=styles.css.map */

/* =====================================================================
 *  SECONDARY SIDEBAR  ->  HORIZONTAL PANEL BAR
 * ---------------------------------------------------------------------
 *  When the MODERN or SLEEK template runs in SIDEBAR-menu mode (the body
 *  wrapper carries `.whcom_main_style_two`), the in-page secondary sidebar
 *  `.whcom_main_side_bar_menu_style_two` (the `whcom_col_sm_3` column that
 *  holds panels like View / Actions / Currency / Support) is too narrow and
 *  skews the content beside it. Here we convert that column into a compact
 *  HORIZONTAL BAR of dropdowns placed under the page heading, and let the
 *  content column span full width.
 *
 *  Each `.whcom_panel` becomes a dropdown: the `.whcom_panel_header` is the
 *  trigger and the `.whcom_panel_body`(+footer) is a flyout that is collapsed
 *  by default, slides open on hover / focus, and can be pinned open by click
 *  (JS adds `.wcap_panelbar_pinned`). All links/selects inside keep working
 *  exactly as before — only presentation changes.
 *
 *  Scope notes:
 *   - `.whcom_main_style_two` is present ONLY for modern/sleek + sidebar mode,
 *     so top-menu mode is never affected (the sidebar stays as-is there).
 *   - We target only the row that directly `:has()` the secondary sidebar,
 *     so nested content rows are untouched.
 *   - Applied at >=992px (desktop/tablet-landscape). On narrow screens the
 *     bar wraps and the whcom grid stacks normally.
 *   - Modern look is defined here; sleek visual overrides live in sleek.css.
 * ===================================================================== */
@media (min-width: 992px) {
  /* The outer row becomes a vertical stack: bar on top, content below. */
  .whcom_main_style_two .whcom_row:has(> .whcom_col_sm_3 > .whcom_main_side_bar_menu_style_two) {
    display: block;
  }
  /* Sidebar column spans full width and becomes the bar wrapper. It sits in a
     higher stacking layer so its dropdowns overlay the content below. */
  .whcom_main_style_two .whcom_row:has(> .whcom_col_sm_3 > .whcom_main_side_bar_menu_style_two) > .whcom_col_sm_3 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 15px;
    position: relative;
    max-height: 55px;
  }
  /* Content column spans full width (was sm_9), below the bar's dropdowns. */
  .whcom_main_style_two .whcom_row:has(> .whcom_col_sm_3 > .whcom_main_side_bar_menu_style_two) > .whcom_col_sm_9 {
    width: 100% !important;
    float: none !important;
    position: relative;
    z-index: 1;
  }

  /* The panel container becomes a horizontal flex bar. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    padding: 10px !important;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 2px 24px rgba(0, 0, 0, 0.08);
  }

  /* Each panel becomes a self-contained dropdown trigger cell.
     `overflow:visible` is essential: whcom.css sets `.whcom_panel{overflow:hidden}`,
     and since this panel is the positioned containing block for the absolute
     flyout that sits BELOW it, hidden overflow would clip the whole dropdown
     away (the exact "header hovers but nothing drops down" bug). */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel {
    position: relative;
    overflow: visible !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    flex: 0 0 auto;
  }

  /* Header = the always-visible trigger button. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel > .whcom_panel_header {
    display: flex !important;
    align-items: center;
    cursor: pointer;
    padding: 11px 16px !important;   /* comfortable left/right breathing room */
    padding-left: 16px !important;   /* override whcom.css .whcom_has_icon 30px */
    margin: 0 !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 8px;
    background: #f7f9fb !important;
    color: #363636 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    user-select: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
  }
  /* whcom.css positions header icons absolutely (top:50%; left:0; 30x30). In a
     flex trigger that leaves the glyph off-center and glued to the edge. Reset
     it to a normal, vertically-centred inline-flex item with a clear gap. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel > .whcom_panel_header > [class^="whcom_icon_"],
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel > .whcom_panel_header i {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    top: auto !important;
    left: auto !important;
    margin: 0 9px 0 0 !important;   /* clear gap between icon and label */
    font-size: 16px !important;
    line-height: 1 !important;
    flex: 0 0 auto;
    width: auto !important;
    height: auto !important;
  }
  /* A caret to hint the dropdown. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel > .whcom_panel_header::after {
    content: "\25BE";               /* ▾ */
    margin-left: 10px;
    font-size: 11px;
    opacity: .7;
    flex: 0 0 auto;
    transition: transform .22s ease;
  }
  /* Selected-currency badge shown in the Currency trigger. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel > .whcom_panel_header .wcap_currency_current {
    font-weight: 700;
    opacity: .85;
    white-space: nowrap;
  }
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel:hover > .whcom_panel_header,
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel:focus-within > .whcom_panel_header,
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel.wcap_panelbar_pinned > .whcom_panel_header {
    background: #eef4f8 !important;
    border-color: #cfe0ea !important;
  }
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel:hover > .whcom_panel_header::after,
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel:focus-within > .whcom_panel_header::after,
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel.wcap_panelbar_pinned > .whcom_panel_header::after {
    transform: rotate(180deg);
  }

  /* THE FLYOUT.
     Robust by design: the dropdown works with PURE CSS using the raw
     `.whcom_panel_body` as the flyout, so it never depends on JS. When JS is
     available it wraps body+footer in `.wcap_panelbar_flyout` (so panels that
     have a real footer — e.g. "Pay All"/"Update" — show it too); that wrapper
     then becomes the flyout and the raw body inside it flows normally.
     Both the raw body AND the wrapper are styled as the flyout below. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel > .whcom_panel_body,
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel > .wcap_panelbar_flyout {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 120;
    min-width: 240px;
    max-width: 360px;
    padding: 0 14px !important;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(19, 59, 72, 0.18);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transition: max-height .28s ease, opacity .2s ease, padding .28s ease, visibility 0s linear .28s;
  }
  /* A raw (un-wrapped) footer that is a DIRECT child of the panel is hidden;
     footers only carry meaning inside the JS flyout wrapper (where they show).
     This prevents a loose footer strip in the bar before/without JS. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel > .whcom_panel_footer {
    display: none !important;
  }
  /* When wrapped, the body/footer inside the wrapper flow normally. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel > .wcap_panelbar_flyout > .whcom_panel_body,
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel > .wcap_panelbar_flyout > .whcom_panel_footer {
    position: static !important;
    top: auto;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none;
    min-width: 0;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel > .wcap_panelbar_flyout > .whcom_panel_footer:empty {
    display: none !important;
  }
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel > .wcap_panelbar_flyout > .whcom_panel_footer {
    margin-top: 10px !important;
  }
  /* A hover bridge so travelling from trigger to flyout keeps it open. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 10px;
  }
  /* Reveal on hover / focus / pinned. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel:hover > .whcom_panel_body,
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel:focus-within > .whcom_panel_body,
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel.wcap_panelbar_pinned > .whcom_panel_body,
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel:hover > .wcap_panelbar_flyout,
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel:focus-within > .wcap_panelbar_flyout,
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel.wcap_panelbar_pinned > .wcap_panelbar_flyout {
    max-height: 70vh;
    opacity: 1;
    padding: 14px !important;
    pointer-events: auto;
    visibility: visible;
    overflow-y: auto;
    transition: max-height .28s ease, opacity .2s ease, padding .28s ease, visibility 0s;
  }
  /* Explicitly-collapsed (user clicked to close) stays shut even on hover. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel.wcap_panelbar_collapsed:hover > .whcom_panel_body,
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel.wcap_panelbar_collapsed:hover > .wcap_panelbar_flyout {
    max-height: 0;
    opacity: 0;
    padding: 0 14px !important;
    pointer-events: none;
    visibility: hidden;
  }
  /* When a wrapper exists, hide the (now-inner) raw body's absolute duplicate
     styling is avoided because the inner body is reset to static above. But if
     BOTH exist as direct children (shouldn't happen), the wrapper wins via
     source order. Right-align flyouts for the last two panels to avoid clip. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel:nth-last-child(-n+2) > .whcom_panel_body,
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel:nth-last-child(-n+2) > .wcap_panelbar_flyout {
    left: auto;
    right: 0;
  }

  /* Lists inside the flyout render as a clean vertical menu. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel .whcom_panel_body ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel .whcom_panel_body ul li a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px !important;
    border-radius: 7px;
    color: #474747 !important;
    white-space: nowrap;
  }
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel .whcom_panel_body ul li a:hover {
    background: #f2f6f9;
  }
  /* Highlight the currently-selected filter option / active category tab. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel .whcom_panel_body ul li a.wcap_filter_active,
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel .whcom_panel_body ul li.current-menu-item a,
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel .whcom_panel_body ul li.whcom_tab_link.active a {
    background: #e7f2f8;
    color: #17313b !important;
    font-weight: 700;
  }
  /* Category tab links have no href; make the whole li clickable-looking. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel .whcom_panel_body ul li.whcom_tab_link a {
    cursor: pointer;
  }
  /* Currency select fills the flyout width. */
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel .whcom_panel_body select {
    width: 100%;
  }
  .whcom_main_style_two .whcom_main_side_bar_menu_style_two > .whcom_panel .whcom_panel_footer .wcap_load_page {
    margin-top: 0 !important;
  }
}

/* Narrow screens: revert to the normal stacked sidebar (whcom grid handles
   the full-width stacking); the panel bar only applies at >=992px above. */

main#content {
  max-width: 1360px !important;
}

/* Private Nameservers: Register / Modify / Delete cards (default + modern). */
.wcap_privatens_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.wcap_privatens_grid .wcap_privatens_card {
  margin: 0 !important;
}
.wcap_ns_input {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--wcap-menu-border, #c7e6ef);
  border-radius: 8px;
  overflow: hidden;
}
.wcap_ns_input input {
  border: 0 !important;
  border-radius: 0 !important;
  flex: 1;
  min-width: 0;
}
.wcap_ns_suffix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--wcap-menu-secondary, #f0f9fc);
  color: var(--wcap-menu-muted-text, #4f7b8a);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border-left: 1px solid var(--wcap-menu-border, #c7e6ef);
}
@media (max-width: 600px) {
  .wcap_privatens_grid { grid-template-columns: 1fr; }
}

/* Email Forwarding: prefix input with @domain suffix (default + modern). */
.wcap_ef_prefix {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--wcap-menu-border, #c7e6ef);
  border-radius: 8px;
  overflow: hidden;
}
.wcap_ef_prefix input {
  border: 0 !important;
  border-radius: 0 !important;
  flex: 1;
  min-width: 0;
}
.wcap_ef_suffix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--wcap-menu-secondary, #f0f9fc);
  color: var(--wcap-menu-muted-text, #4f7b8a);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border-left: 1px solid var(--wcap-menu-border, #c7e6ef);
}