/**
<%@ page contentType="text/css" %>
**/

/*  Hostway's main colors

Header Background - Hex #8B2844 (main color)
On Tabs - Hex #7fb2e5
Off Tabs - Hex #e5effa
On Sub Nav - Hex #530E21
Off Sub Nav - Hex #8B2844
Background - Hex #CCCCCC

Edited by Shobi
*/
/*  WARNING...
Since this style sheet is basically layered on top of ng-global.css, please be aware than changing non-layout realted items make break the site. This includes: padding, margin, indent, etc.  So please be careful and feel free to change all of the properties listed before. If you have any questions, please contact Stu Young of the UI team in the Chicago office stu.young@hostwaycorp.com.

*/

:root {
  --bg-primary: #171717;
  --bg-secondary: #1f1f1f;
  --bg-tertiary: #272727;
  --border-primary: #2a2a2a;
  --text-primary: #ffffff;
  --text-primary2: #dddddd;
  --text-secondary: #aaaaaa;
  --text-tertiary: #666666;

  --accent-primary: #337fa8;
  --accent-primary-light: #7e99b4;

  --color-shadow-light: rgba(255, 255, 255, 0.05);
  --color-shadow-dark: rgba(0, 0, 0, 0.5);
  --gradient-background: linear-gradient(145deg, #2a2a2a, #1d1d1d);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --card-shadow: 0 4px 12px var(--color-shadow-dark);
  --hover-bg: #2f2f2f;
  --focus-ring: 0 0 0 2px var(--accent-primary);
  --accent-success: #4ade80;
  --link-visited: #8e6ec3;
}

/*-------------------------------------------------
HEADERS
-------------------------------------------------*/

#mymusic-logo {
  max-width: 100px;
  margin-top: 1rem;
  margin-left: 1rem;
}

#main-nav-hostway li,
#main-nav-hostway-mainPage li {
  background-color: transparent;
}

h2.step {
  background: transparent;
  letter-spacing: 0.5px;
  font-size: 15px;
  font-weight: 600;
  color: #dddddd;
  margin: 24px 0 12px;
  text-transform: uppercase;
}

h3 {
}

/*-------------------------------------------------
GENERAL - Body tags
-------------------------------------------------*/

body,
#application-body,
#login-body,
#home-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
}
hr {
  background: #e0e0e0;
  color: #e0e0e0;
}
.note {
  font-size: 0.9em;
  background: transparent;
}
.new,
.new a {
  font-style: normal;
  font-size: 85%;
  color: #c00;
}
body {
  text-align: left;
}
/*-------------------------------------------------
LINKS
-------------------------------------------------*/

/* A:link, A:visited, A:active {text-decoration: underline;} */
A:link,
A:visited,
A:active,
A:hover,
A IMG {
  background: transparent;
}
A:link {
  color: var(--accent-primary-light);
}
A:visited {
  color: var(--link-visited);
}
A:hover {
  color: var(--accent-primary);
  text-decoration: none;
}
/* A:active{color: #0066cc;} */
A IMG {
  border: 0;
  text-decoration: none;
}
#main-nav-hostway-mainPage a:hover {
  color: var(--text-primary);
  text-decoration: none;
}
#main-nav-hostway-mainPage .current.main-nav:hover {
  color: var(--text-primary);
  /* text-decoration: none; */
}
#main-nav-hostway-mainPage .current:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent-primary);
  text-underline-offset: 10px;
  text-decoration-thickness: 3px;
}
h2.caption {
  background: transparent;
  color: var(--text-primary);
}
/*-------------------------------------------------
BUTTONS
-------------------------------------------------*/

.box-activate .button-container,
.box-purchase .button-container,
.box-upgrade .button-container {
  background: transparent;
}

/* these are for buttons  */

input:focus {
  background: transparent;
}

input.search-results {
  color: var(--accent-primary);
  text-decoration: underline;
  background: transparent;
}
input.search-results:visited {
  color: var(--accent-primary-light);
  text-decoration: underline;
  background: transparent;
}
input.search-results:active {
  color: var(--accent-primary);
  text-decoration: underline;
  background: transparent;
}
.search-results form input.search-results,
.search-results input.search-results {
  color: var(--accent-primary);
  text-decoration: none;
}

.search-results form input.search-results:hover,
.search-results input.search-results:hover {
  color: var(--accent-primary-light);
  text-decoration: underline;
}
.search-results input.search-results:visited {
  color: var(--accent-primary-light);
  text-decoration: underline;
  background: transparent;
}
.search-results input.search-results:active {
  color: var(--accent-primary);
  text-decoration: underline;
  background: transparent;
  text-align: center;
}
.search-results .search-results input:hover {
  color: var(--accent-primary);
  text-decoration: none;
  background: transparent;
}
.search-results input:active {
  color: var(--accent-primary);
  text-decoration: underline;
  background: transparent;
}

.advanced-dns__form-actions__compact {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.advanced-dns__form-actions__compact input.search-results {
  padding: 6px 12px;
  font-size: 12px;
  min-width: 60px;
  height: 32px;
}

.disabled {
  color: #666666;
}
.table-action-button-submit {
  border: 1px solid #333;
  background: #e6e6e6;
  color: #252525;
  font-size: 0.9em;
}
.table-action-button-submit:focus {
  background: #e6e6e6;
}
.button-submit,
.small-button-submit,
.button-search,
input.button-submit,
.box a.faux-button,
.box a.faux-button:link,
box a.faux-button:hover,
box a.faux-button:visited {
  border: 2px solid #999;
  border-left-color: #ccc;
  border-top-color: #ccc;
  background: #585858;
  margin: 0;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  padding: 3px;
}
.button-submit:hover,
.small-button-submit:hover,
.button-search:hover,
box a.faux-button:hover {
  background: #7c7c7c;
}
.button-submit:focus,
.small-button-submit:focus,
.button-search:focus,
box a.faux-button:focus {
  background-color: #6b6a6a;
}
input.button-submit:hover {
  background: #7c7c7c;
}
input.button-submit:focus {
  background-color: #6b6a6a;
}

.table-actions input:focus {
  background-color: var(--accent-primary-light);
  --focus-ring: 0 0 0 4px var(--accent-primary);
}

.button-container-form-align {
  display: flex;
  flex-direction: row-reverse;
  gap: 2rem;
  align-items: center;
}

.button-container a {
  font-size: 0.875rem;
}

.graph {
  border: 1px solid var(--accent-primary);
}

.graph .bar {
  background: #0066cc;
  color: var(--text-secondary);
}

table.form td.fixedwidth {
  width: 9rem;
}

table.form {
  margin-left: 0;
}
/*-------------------------------------------------
FORM ELEMENTS
-------------------------------------------------*/

label.required {
  background: transparent;
  font-size: 13px;
  color: #aaaaaa;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 6px;
}

label.checkbox {
  color: var(--text-secondary);
  label.checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}

/* specifically for a shaded form */
.shaded {
  background-color: #e6e8f5;
}

legend {
  display: inline-block;
  position: absolute;
  top: 0.4rem;
  left: 1rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 1;
  background-color: #4a4a4a;
  border: 1px solid var(--border-primary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* form inputs */
input,
select,
textarea,
.box-2col-short textarea,
.table-actions input {
  background-color: #1e1e1e; /* dark background */
  color: #f5f5f5; /* light text */
  border: 1px solid #444; /* subtle border */
  border-radius: 8px;
  font-size: 0.75rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  padding: 0.5rem 1rem;
}

#filterUsername {
  background-color: transparent;
}

.box-2col-short textarea.large {
  max-width: 25rem;
  width: 100%;
  height: 5rem;
  resize: vertical;
  margin-bottom: 1rem;
  border: 1px solid #444;
}

textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(51, 127, 168, 0.2),
    /* subtle outer glow */ inset 0 0 0 1px var(--accent-primary);
  background-color: var(--bg-tertiary);
}

input.radio {
  border: 0;
}
input.checkbox {
  border: 1px var(--border-primary) solid;
}

/*  added 2/27/06 by say   */
/* textarea:focus, textarea.narrow:focus {border: 1px solid #818181;background-color: #FFFFCF;} */
select {
  padding: 0.5rem;
  font-weight: 500;
}
.error {
  color: #cc0000;
  font-weight: bold;
  font-size: 0.9em;
}
.form-error-description {
  color: #cc0000;
  font-weight: bold;
  font-size: 0.9em;
}
.form-value-error,
.error input,
.error select {
  color: var(--text-primary);
  border: 2px #cc0000 solid;
  background-color: #304558;
}
ul.form-guidelines {
  font-size: 0.9em;
}
input.readonly {
  font-size: 1em;
  border: 0;
  background: transparent;
}
input.readonly:hover,
input.readonly:visited {
  border: 0;
  font-size: 1em;
  color: #252525;
  background: transparent;
}
.search-results input:hover {
  color: var(--accent-primary);
  text-decoration: none;
  background: transparent;
}
.search-results input:active {
  color: var(--accent-primary-light);
  text-decoration: underline;
  background: transparent;
}

.box UL LI {
  color: var(--text-secondary);
  font-size: 0.7rem;
}

input#createEmailBtn,
button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only:first-child {
  background-color: var(--accent-primary);
  border-radius: 8px;
  padding: 5px 10px;
  margin-left: 0.5rem;
}
button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only:first-child:hover {
  background-color: var(--accent-primary-light);
  transform: translateY(-1px);
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(51, 127, 168, 0.3);
}

button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only {
  color: var(--text-primary);
  cursor: pointer;
}

button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only:hover {
  color: var(--text-primary);
  transform: translateY(-1px);
  background-color: #3a3a3a;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

#searchMailbox {
  background-color: var(--accent-primary);
}

#searchMailbox:hover {
  background: var(--accent-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(51, 127, 168, 0.3);
}

input#createEmailBtn,
input#deleteMailboxesBulk,
#createEmailBtn_overLimit,
button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only {
  background-color: #303030;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  font-weight: 600;
}

#createEmailBtn_overLimit {
  padding: 5px 10px;
  margin-left: 0.5rem;
  color: white;
  background-color: #303030;
  cursor: pointer;
}

#createEmailBtn_overLimit:hover {
  background-color: var(--accent-primary-light);
  transform: translateY(-1px);
  cursor: pointer;
}

button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only:first-child {
  color: var(--text-primary);
  background: transparent;
  background-color: var(--accent-primary);
}

.table-actions input {
  background-color: var(--accent-primary);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.table-actions input:hover {
  background: var(--accent-primary-light);
  transform: translateY(-2px);
}

input#createEmailBtn:hover,
input#deleteMailboxesBulk:hover {
  background-color: #3a3a3a;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

input#createEmailBtn {
  margin-left: 0.5rem;
  min-height: 1.5rem;
  padding: 0.5rem 1rem;
  color: var(--text-primary);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease,
    box-shadow 0.2s ease;
}

.paginator-select {
  border: 1px solid #444;
}
#com_hostway_plugins_commons_purchaseconfirmation {
  display: flex;
  flex-direction: column;
  gap: 0;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none !important; /* Remove default browser outline */
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(51, 127, 168, 0.15);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-guidelines-lists li {
  color: var(--text-secondary);
}

.create-mailbox__container fieldset {
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-top: none;
  margin-top: 0;
}
/*-------------------------------------------------
TYPOGRAPHY
-------------------------------------------------*/

h1 {
  color: var(--text-primary);
}

#login-body h1 {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 3rem;
  color: var(--text-secondary);
  font-weight: 500;
}

h2 {
  font-size: 1.1em;
  font-weight: bold;
  text-align: left;
  color: var(--text-primary2);
  border: 0;
  border-bottom: 1px solid var(--border-primary);
}

h3 {
  color: var(--text-secondary);
}

.section-label {
  font-weight: bold;
}
p.only {
  color: #333;
  font-size: 0.9em;
}

td {
  color: var(--text-secondary);
}

label,
strong.nonrequired,
strong.required {
  color: var(--text-primary2);
}

/*-------------------------------------------------
LISTS
-------------------------------------------------*/
ul.content {
  color: #252525;
}
li.content {
  list-style-type: square;
}
.icon-list-2col {
  display: flex;
  flex-wrap: wrap;
}
UL.icon-list-2col {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}
/* ICON UL 2 COLUMNS */
UL.icon-list-2col a {
  color: #252525;
  width: 100%;
  text-decoration: none;
  color: var(--bg-primary);
  margin: 0.75rem;
  background-color: var(--bg-secondary);
  height: 12rem;
  width: 100%;
  display: flex;
  justify-content: start;
  border-radius: 12px;
  gap: 1rem;
  padding: 1rem;
  background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
  box-shadow: inset 0 0 0.5px rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-primary);
}

UL.icon-list-2col LI {
  margin: 0;
}

UL.icon-list-2col a:hover {
  background-color: var(--bg-tertiary);
  box-shadow: inset 0 0 0 1px rgba(51, 127, 168, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
  cursor: pointer;
}

#com-hostway-plugins-email-landing-mailbox-menuitem,
#com-hostway-plugins-email-landing-smx-emailalias-menuitem,
#com-hostway-plugins-email-landing-mfg-domainalias {
  width: 100%;
}

.icon-list-2col .msg__title {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 1rem;
}

.icon-list-2col .msg__description {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.75rem;
}

.icon-list-2col .msg__description strong {
  font-weight: 500;
  color: var(--text-tertiary);
}

UL.icon-list-2col A:hover LI IMG,
UL.icon-list-2col A:visited:hover IMG {
  text-decoration: underline;
}
/* ICON LIST */
UL.icon-list LI {
  color: #333;
  background-image: none;
}
/* LOGO LIST  */
UL.logo-list-2col LI {
  color: #333;
  background-image: none;
}
UL.inline-list LI {
  color: #333;
  background-image: none;
}
UL.legend LI {
  color: #333;
  list-style-type: none;
}
/*----Definition lists to look like table create by sy on 2/13/07  -----------*/
dl.table-display {
  font-size: 0.8em;
}
.table-display dt {
  font-weight: bold;
}
.table-display dd {
  border-bottom: 1px #ccc solid;
}

.login__list__INC {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  text-align: left;
  width: 100%;
  margin: 0 auto;
}

.login__list__INC li {
  list-style: none;
}

.login__list__username__INC,
.login__list__password__INC {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 90%;
  max-width: 25rem;
  margin: auto 0;
}

.login__list__submit__INC {
  width: 100%;
  max-width: 25rem;
  margin: auto 0;
  background-color: #337fa8;
  border-radius: 8px;
  padding: 0.5rem;
  color: #fff;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  min-height: 2.75rem;
}

/*-------------------------------------------------
CONTAINERS 
-------------------------------------------------*/
/*--- Container for positioning, etc ------*/
#container {
  color: var(--text-primary2);
  width: 90%;
  min-width: unset;
  max-width: 1200px;
}

/*--- Content Container ------*/
html > body #content-container {
  border-bottom: none;
  background: none;
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  width: 100%;
  max-width: unset;
  min-width: unset;
}
html > body #content {
  width: 72%;
}

.action-container {
  border-top: 1px solid #252525;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}

.submenu__link a {
  text-decoration: none;
  color: #878787;
}

.submenu__link a:visited {
  color: #878787;
}
.mainLink-selected .submenu__link a {
  color: #346794;
}

/*-------------------------------------------------
NAVIGATION 
-------------------------------------------------*/

/*--UTILITY NAV (topnav:login, logout, help. etc) ---*/
#utility-nav {
  font-size: 0.9em;
  display: flex;
  align-items: baseline;
}
#login-utility-nav {
  background-color: #06c;
}
#utility-nav a:link,
#utility-nav a:visited {
  color: #e0e0e0;
  text-decoration: none;
}
#utility-nav a:hover {
  color: #e0e0e0;
  text-decoration: underline;
  text-decoration-color: #337fa8;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/*--- Main Nav (tabs)--*/
#main-nav {
  font-size: 12px;
}
#main-nav li {
  background: url(/static/com/hostway/plugins/commons/images/left_en_US_hostway.gif)
    no-repeat left top;
}
#main-nav a {
  background: url(/static/com/hostway/plugins/commons/images/right_en_US_hostway.gif)
    no-repeat right top;
  color: #06c;
  text-decoration: none;
  font-weight: bold;
}

/* Commented Backslash Hack
   hides rule from IE5-Mac \*/

#main-nav a {
  background: transparent
    url(/static/com/hostway/plugins/commons/images/right_en_US_hostway.gif)
    no-repeat right top;
}
/* End IE5-Mac hack */
#main-nav a:hover {
  color: #06c;
  text-decoration: underline;
  background: transparent
    url(/static/com/hostway/plugins/commons/images/right_en_US_hostway.gif)
    no-repeat right top;
}

#main-nav-hostway-mainPage {
  font-size: 12px;
  display: flex;
  width: 100%;
  padding-top: 1rem;
  margin-left: 0;
  border-bottom: 1px solid var(--border-primary);
  justify-content: flex-start;
  align-items: center;
}

#main-nav-hostway-mainPage .top {
  margin-left: 30%;
  display: flex;
  flex-direction: row;
}

#main-nav-hostway-mainPage a {
  font-weight: normal;
}

#main-nav-hostway-mainPage .current {
  background-color: transparent;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-color: var(--accent-primary);
  text-underline-offset: 10px;
  text-decoration-thickness: 3px;
}

#main-nav-hostway-mainPage:hover {
  text-decoration-color: var(--accent-primary);
  color: var(--text-primary);
  font-weight: 900;
}

#main-nav-hostway-mainPage li {
  float: none;
  border: none;
  white-space: nowrap;
  margin-left: 4px;
  border-top-right-radius: 9px;
  border-top-left-radius: 9px;
}
.main-nav {
  padding: 10px 40px;
}

/*---Subsection Nav (sub nav)-------*/
#subsection-nav {
  background: transparent;
  margin: unset;
  width: unset;
  max-width: 261px;
  margin-right: 1rem;
  border-right: 1px solid var(--border-primary);
  /* border-radius: 8px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05); */
}

#subsection-nav ul {
  text-align: left;
}

#subsection-nav li {
  font-size: 1.3em;
  border-bottom: transparent;
  background-color: transparent;
  font-weight: normal;
  /* padding: 12px 40px */
}

#subsection-nav li a,
#subsection-nav li a:link {
  text-decoration: none;
}
.side-menu-list {
  min-width: 149px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.side-menu-list img {
  width: 14px;
  height: 9px;
}

#subsection-nav li:hover,
#subsection-nav li a:hover {
  color: #ffffff;
  background-color: #2d2f35;
}

/* mainlink */
#subsection-nav li.mainlink {
  color: #06c;
  background-color: #fff;
  border-bottom: #999 dotted 1px;
  font-weight: bold;
  text-decoration: none;
}

#subsection-nav li.mainlink a,
#subsection-nav li.mainlink a:link,
#subsection-nav li.mainlink a:visited {
  color: #06c;
  background-color: transparent;
}

#subsection-nav li.mainlink:hover {
  color: var(--accent-primary);
  background-color: #fff;
  text-decoration: none;
}

#subsection-nav li.mainlink a:hover,
#subsection-nav li.mainlink a:active {
  color: var(--accent-primary);
  background-color: transparent;
  text-decoration: none;
}

#subsection-nav ul li.mainlink-selected {
  background: transparent;
  background-image: none;
  color: #535353;
}

#subsection-nav li.mainlink-selected a,
#subsection-nav li.mainlink-selected a:link,
#subsection-nav li.mainlink-selected a:visited {
  color: #838383;
}

#subsection-nav li.mainlink-selected:hover,
#subsection-nav li.mainlink-selected a:hover,
#subsection-nav li.mainlink-selected a:active {
  color: #535353;
  background: #bebebe;
}

/* Base nav item styles */
#subsection-nav li {
  color: #535353; /* unselected */
  background: transparent;
  font-size: 0.95em;
  font-weight: normal;
  text-decoration: none;
  padding: 10px 20px;
  border: none; /* remove any default borders */
  list-style: none;
}

/* First indent — slightly deeper padding */
#subsection-nav li.indent-first {
  padding-left: 40px;
  font-weight: bold;
}

/* First indent links */
#subsection-nav li.indent-first a {
  color: #878787;
  background: transparent;
  text-decoration: none;
}

/* Second indent */
#subsection-nav li.indent-second {
  color: #878787;
  background: transparent;
  font-weight: normal;
  padding: 2px 0 1px 2rem;
  border-bottom: none;
}

/* Second indent links */
#subsection-nav li.indent-second a {
  color: #878787;
  background: transparent;
  text-decoration: none;
}

/* Hover effect for any item or link */
#subsection-nav li:hover,
#subsection-nav li a:hover {
  color: #ffffff;
  background: transparent;
  cursor: pointer;
  font-weight: bold;
}

/* Selected item */
#subsection-nav li.selected,
#subsection-nav li.selected a {
  color: #ffffff;
  background: transparent;
  font-weight: bold;
}

/* indent-second selected with image icon */
#subsection-nav li.indent-second-selected {
  background: transparent
    url(/static/com/hostway/plugins/commons/images/icon-selected.gif) 14px
    no-repeat;
}

/* Selected second indent link */
#subsection-nav li.indent-second-selected a {
  color: #ffffff;
  background: transparent;
}

/* Active/hover state for selected second indent */
#subsection-nav li.indent-second-selected:hover,
#subsection-nav li.indent-second-selected a:hover {
  color: #ffffff;
  background: transparent;
}

#subsection-nav .top {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tabs   */
.tabs-container {
  font-size: 1em;
}

ul.tabs {
  font-size: 0.9em;
}

/*-------------------------------------------------
MESSAGES
-------------------------------------------------*/

.message {
  text-align: left;
  border: 1px solid #ccc;
  font-size: 11px;
}

/* 1. preconfirmation */
.message-preconfirmation {
  border: 1px #f1c02d solid;
  color: #000;
  background: #ffffcb
    url(/static/com/hostway/plugins/commons/images/icon-preconfirm.png) 12px
    12px no-repeat;
  border: 0;
  display: flex;
  align-items: center;
  min-height: 52px;
}

.button-submit.domain-name-fwr-btn {
  margin: 12px 0;
}

.doamin-fwr-lable label {
  padding: 0;
  margin-right: 10px;
}

.message-preconfirmation strong {
  color: #000;
  font-size: 1.25em;
  font-weight: bold;
}

.message-preconfirmation strong.subheader {
  color: #000;
  font-size: 1em;
  font-weight: bold;
}

.message-preconfirmation p {
  color: #000;
  font-weight: normal;
}

.message-preconfirmation li {
  color: #252525;
}

/* 2. pending */
.message-pending {
  border: 1px #358ce3 solid;
  color: #0066cc;
  background: #f7f9f9
    url(/static/com/hostway/plugins/commons/images/icon-pending.gif) 12px 12px
    no-repeat;
}

.message-pending strong {
  color: #0066cc;
  font-size: 1.25em;
  font-weight: bold;
}

.message-pending strong.subheader {
  color: #0066cc;
  font-size: 1em;
  font-weight: bold;
}

.message-pending p {
  color: #0066cc;
  font-weight: normal;
}

.message-pending li {
  color: #0066cc;
}

/* 3. confirmation */
.message-confirmation {
  padding: 2rem 1rem;
  background: var(--gradient-background);
  border-radius: 16px;
  max-width: 640px;
  margin-bottom: 2rem;
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.6;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 2rem;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2rem;
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .message-confirmation {
    padding: 2rem 2.5rem;
  }
}

.message-confirmation p > strong.subheader {
  font-size: 0.95rem;
  font-weight: 500;
  font-weight: 400;
  color: var(--text-primary2);
  margin-bottom: 1.25rem;
}

.message-confirmation li {
  margin-bottom: 0.5rem;
  list-style: none;
  position: relative;
  transition: color 0.2s ease;
  font-size: 1.425rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.message-confirmation p:last-of-type {
  font-size: 0.875rem; 
  font-weight: 400;
  color: var(--text-primary2);
  line-height: 1.4;
}

.message-confirmation .button-container-form-align a {
  font-size: 0.95rem;
  font-weight: 500;
  color: #4eaaff;
  text-decoration: none;
  margin-top: 1rem;
  display: inline-block;
  transition: color 0.2s ease;
}

.message-confirmation .button-container-form-align a:hover {
  text-decoration: underline;
  color: #74c1ff;
}

.message-confirmation__text-block .button-container {
  padding-top: 0;
}

.message-confirmation__text-block .button-container-form-align {
  text-align: left;
}

/* 4. error */
.message-error {
  border: 1px #cc0000 solid;
  color: #cc0000;
  background: #fdd
    url(/static/com/hostway/plugins/commons/images/icon-error.gif) 12px 12px
    no-repeat;
}

.message-error strong {
  color: #cc0000;
  font-size: 1.25em;
  font-weight: bold;
}

.message-error strong.subheader {
  color: #cc0000;
  font-size: 1em;
  font-weight: bold;
}

.message-error p {
  color: #cc0000;
  font-weight: normal;
}

.message-error li {
  color: #cc0000;
}

/* 5. notification */
.message-notification {
  padding: 2rem 2.5rem;
  background: var(--gradient-background);
  border-radius: 16px;
  max-width: 640px;
  margin-bottom: 2rem;
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.6;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 2rem;
}

/* Add subtle glow effect */
.message-notification::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(51, 127, 168, 0.05) 0%,
    rgba(126, 153, 180, 0.05) 100%
  );
  border-radius: 16px;
  pointer-events: none;
  z-index: -1;
}

/* Strong text styling - for labels/metadata */
.message-notification strong {
  color: var(--text-primary2);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* "Please be aware…" — acts like a soft label with better hierarchy */
.message-notification > p:first-of-type {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
  color: var(--accent-primary-light);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
  background: #6372821f;
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 8px 8px 0;
  margin-left: -0.5rem;
}

/* Urgent action subheader - main heading */
.message-notification strong.subheader {
  text-transform: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 0.5rem;
  display: block;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Paragraphs with better spacing and hierarchy */
.message-notification p {
  color: var(--text-secondary);
}
/* Last paragraph with cooperation message */
.message-notification p:last-of-type {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.9rem;
  color: var(--text-primary2);
  font-style: italic;
}

/* Emphasize "MUST" in the cooperation message */
.message-notification p:last-of-type:contains("MUST") {
  color: var(--accent-primary-light);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Bullet List Styling with modern design */
.message-notification ul {
  background: #6372821f;
  border-radius: 12px;
  padding: 1rem 2rem;
  border: 1px solid var(--border-primary);
}

.message-notification li {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  list-style: none;
  position: relative;
  padding-left: 2rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.message-notification li:last-child {
  margin-bottom: 0;
}

/* Custom bullet points with modern icons */
.message-notification li::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-primary);
  font-size: 0.8rem;
  font-weight: bold;
  transform: rotate(0deg);
  transition: transform 0.2s ease, color 0.2s ease;
}

/*---Ajax Loading-----*/
.dialog-info {
  background: #fff
    url(/static/com/hostway/plugins/commons/images/ajax-loader.gif) center 3px
    no-repeat;
  font-size: 0.95em;
  border: 1px dotted #4456ac;
}

/*-------------------------------------------------
CURRENTLY MANAGING
-------------------------------------------------*/

.currently-managing,
.currently-managing-readonly {
  font-size: 1.1em;
  color: var(--text-secondary);
  padding: 0.8em 0.8em 0.8em 0.8em;
  width: 100%;
  background-color: var(--bg-secondary);
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--border-primary);
  box-shadow: 0 2px 4px var(--color-shadow-light),
    0 4px 12px var(--color-shadow-dark);
  background: transparent;
  margin-bottom: 1rem;
}

.currently-managing label {
  font-size: 1.1em;
  font-weight: 500;
  color: var(--text-secondary);
}

/*-------------------------------------------------
BOXES
-------------------------------------------------*/

.box {
  text-align: left;
  border: none;
  font-size: 0.9em;
  color: var(--text-primary);
  background-color: transparent;
  padding: 1rem;
  width: 100%;
}

.box-noclear {
  text-align: left;
  border: 1px solid #272727;
  font-size: 0.85em;
}

/* box info */
.box-info {
  border-color: #ccc;
  color: #333;
  background: #f6f6f6;
}
.box-info caption {
  color: #535353;
  font-size: 0.96em;
  text-transform: uppercase;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  text-align: left;
}
.box-info th {
  font-weight: bold;
}
.box-info p {
  font-size: 1em;
}
.box-info .form-label {
  font-size: 1em;
  font-weight: bold;
}
.box-info .form-value {
  font-size: 1em;
  font-weight: normal;
}
.box-info .button-container {
  background: none;
}
/* box activate */
.box-activate {
  border: 0;
  background: transparent;
  padding: 0;
  border-bottom: 0;
  text-align: center;
  padding: 8px;
  border-radius: 15px;
  width: 249px;
  min-height: 149px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}
.box-activate h2 {
  border-bottom: 0;
}
.button-container-box {
  padding: 0;
  margin: 0;
}
/* box purchase */
.box-purchase {
  border: 1px solid #e8d4ba;
  background: #f4f1ec;
}
/* box upgrade */
.box-upgrade {
  border: 1px solid #fbe9d7;
  background: #faf4ef;
}

.box-2col.service-box-summary h2 {
  text-align: center;
}

#dashboard-domain-menu,
#dashboard-webstats-menu {
  text-decoration: none;
  color: var(--bg-primary);
  margin: 12px 12px 24px 12px;
  background-color: var(--bg-secondary);
  height: 12rem;
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  border-radius: 8px;
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: var(--gradient-background);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0.5px rgba(255, 255, 255, 0.06);
}

#dashboard-domain-menu:hover,
#dashboard-webstats-menu:hover {
  background-color: var(--bg-tertiary);
  box-shadow: inset 0 0 0 1px rgba(51, 127, 168, 0.3),
    /* slight inner accent glow */ 0 2px 6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
  cursor: pointer;
}

@media screen and (min-width: 1029px) {
  #dashboard-domain-menu,
  #dashboard-webstats-menu {
    width: 40%;
  }

  #email-manage-service,
  #domain_names_h-manage {
    width: 44%;
  }
}

.service-box {
  justify-content: center;
  align-items: start;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.service-box__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.service-box__title img {
  width: 1.2rem;
  height: 1.2rem;
}

.service-box__icon-box {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--border-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(74, 158, 255, 0.4),
    rgba(30, 80, 180, 0.5)
  );
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.service-box__description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.autoresponder__checkbox__wrapper,
.forwarding__checkbox_wrapper {
  border: 1px solid var(--border-subtle);
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/*-------------------------------------------------
TABLES
-------------------------------------------------*/

#com-hostway-plugins-mailbox-overview-email-addresses thead tr {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-primary);
  padding: 0.8em;
  border-radius: 8px;
}
#com-hostway-plugins-mailbox-overview-email-addresses thead th {
  background-color: transparent;
  color: var(--text-secondary);
  padding: 0.8em;
}

table {
  font-size: 1em;
}
table caption {
  text-align: left;
}
div.table-actions {
  color: #fff;
  background-color: unset;
  border: 0;
}
.grandtotal {
  background-color: #ffffcb;
  font-weight: bold;
  font-size: 1.1em;
}
/* search results*/

table.search-results th.sortable a:link {
  color: var(--text-primary);
}

table.search-results caption {
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  box-shadow: inset 0 1px 0 var(--color-shadow-light);
  letter-spacing: 0.5px;
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13px;
  padding: 0.75rem 1rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-subtle);
  width: auto;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}

table.search-results {
  width: 100%;
  margin-top: 3rem;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.95rem;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

table.search-results th {
  border-right: var(--border-primary);
}

table.search-results thead {
  border-bottom: 1px solid #3f3f3f;
  background: var(--gradient-background);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: inset 0 1px 0 var(--color-shadow-light);
}

table.search-results thead th {
  text-align: left;
  padding: 0.85rem 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background-color 0.2s ease;
  background-color: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

table.search-results th.ascending {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  background: none;
}

table.search-results th.sortable {
  cursor: pointer;
  position: relative;
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
}

/* ====================================================== */

table.search-results th a {
  color: var(--accent-primary);
  text-decoration: none;
}

table.search-results th a:hover {
  color: var(--accent-primary-light);
}

table.search-results tbody tr {
  transition: background-color 0.2s ease;
}

table.search-results tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.025);
}

table.search-results td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-primary);
  color: var(--text-secondary);
  vertical-align: middle;
}

table.search-results a {
  color: var(--accent-primary);
  text-decoration: none;
}

table.search-results a:hover {
  text-decoration: underline;
  color: var(--accent-primary-light);
}

table.search-results td.error,
table.search-results td.subcategory-error,
table.search-results strong.error {
  color: #ff4c4c;
}

/* table radio */

table.radio caption {
  font-size: 1.1em;
  font-weight: bold;
  color: #252525;
  border-bottom: 1px solid #cccccc;
  text-align: left;
}

p.radio {
  font-size: 0.95em;
}

table.radio td.label {
  font-size: 0.93em;
  font-weight: 400;
  text-align: left;
}

table.radio td.value {
  font-size: 0.93em;
  text-align: left;
}

/* table form small first column begin */

table.form-narrow-first-col td {
  font-size: 1em;
}

table.form-narrow-first-col th {
  text-align: left;
  color: #252525;
  border-right: 0.1em solid var(--border-primary);
  border-bottom: 0.1em solid var(--border-primary);
  font-size: 0.9em;
}

table.form-narrow-first-col td label {
  vertical-align: top;
  font-weight: bold;
  font-size: 1.1em;
}

/* table form small first column ends */

/* transactions / purchase table */
table.transactions {
  border-bottom: 3px solid #ccc;
}

table.transactions caption {
  text-align: left;
  font-size: 1em;
  font-weight: bold;
  color: #252525;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;

  background-color: #d3e1ef;
}

table.transactions tr {
  background-color: #fff;
  text-decoration: none;
}

tr.highlight:hover,
tr.hlt {
  background-color: #ffb;
  text-decoration: none;
}

table.transactions th {
  background-color: #e7e7e7;
  text-align: left;
  color: #252525;

  font-size: 0.9em;
  border: 0;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

table.transactions th.sortable {
  background-color: #cac9c9;
}

table.transactions th.descending,
table.transactions th.order1 {
  background: #d2d2d2
    url(/static/com/hostway/plugins/commons/images/search-results-table-down-arrow.gif)
    no-repeat right;
}

table.transactions th.ascending,
table.transactions th.order2 {
  background: #d2d2d2
    url(/static/com/hostway/plugins/commons/images/search-results-table-up-arrow.gif)
    no-repeat right;
}

table.transactions th.sortable a:link,
table.transactions th.sortable a:hover,
table.transactions th.sortable a:visited {
  color: #252525;
  text-decoration: none;
  background-color: transparent;
}

table.transactions th a:link,
table.transactions th a:hover,
table.transactions th a:visited {
  color: #252525;
  background-color: #d2d2d2;
  text-decoration: none;
}

table.transactions td {
  border-bottom: 1px solid #e6e6e6;
  font-size: 0.9em;
  background: #fff;
}

table.transactions input.checkbox {
  border: 0;
}

table.transactions td.parent {
  font-weight: bold;
  font-size: 0.9em;
}

table.transactions td.parent-hidden {
  font-weight: normal;
  font-size: 0.9em;
  color: #fff;
}

table.transactions td.subcategory,
table.transactions td.child {
  font-weight: normal;
  font-size: 0.9em;
  font-style: italic;
}

table.transactions td.grandchild {
  font-weight: normal;
  font-size: 0.9em;
  font-style: italic;
}

table.transactions td.error {
  color: #cc0000;
}

table.transactions strong.error {
  color: #cc0000;
}

/* transactions subtotal and total */

table.transactions-total tr {
  background-color: #fff;
  text-decoration: none;
}

table.transactions-total th {
  background-color: #e7e7e7;
  text-align: left;
  color: #252525;
  font-size: 0.9em;
  border: 0;
}

table.transactions-total td {
  font-size: 0.9em;
  border: 0;
  background: #fff;
}

/*-------------------------------------------------
FOOTER
-------------------------------------------------*/

#footer {
  /* Removed by request https://hostway.atlassian.net/browse/CCI-284 */
  display: none;
  font-size: 0.8em;
  color: #0c2233;
  width: 100%;
}

#login-footer {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

/*-------------------------------------------------
ANNOUNCEMENTS
-------------------------------------------------*/

/*----Expand & Collapse----*/

div.toggleshow {
  background: #fff;
  border: #000 solid 1px;
  color: #000;
}

/*  Tool Tip  */
a.info {
  color: #000;
  text-decoration: none;
}

a.info:hover {
  background-color: none;
  text-decoration: none;
}

a.info:hover span {
  /*the span will display just on :hover state*/

  border: 1px solid #0cf;
  background-color: #cff;
  color: #000;
  text-align: left;
}

/*-------------------------------------------------
HELP created 4/6/07 by SAY
-------------------------------------------------*/

.help {
  font-size: 0.8em;
  border: 1px solid #ccc;
  background: #ffffcc
    url(/static/com/hostway/plugins/commons/images/woman1_final.gif) no-repeat
    3px 3px;
}

.icon-help {
  font-size: 0.9em;
  background: transparent
    url(/static/com/hostway/plugins/commons/images/icon_help.gif) no-repeat 0px
    15px;
}

/*-------------------------------------------------
PRICING
-------------------------------------------------*/

.price {
  font-weight: bold;
  font-size: 1em;
  background-color: transparent;
}

caption.price {
  font-weight: bold;
  border-bottom: 0;
}

.price-label {
  font-weight: bold;
  font-size: 0.9em;
}

.price-value {
  font-weight: bold;
  font-size: 1em;
}

/*-------------------------------------------------
JAVASCRIPT RELATED
-------------------------------------------------*/

/** Cursors for expand and Collapse **/
.expand-collapse-trigger .expanded,
.expand-trigger .expanded {
  background: transparent
    url(/static/com/hostway/plugins/commons/images/icon_expanded.gif) no-repeat;
}
.expand-collapse-trigger .collapsed,
.expand-trigger .collapsed {
  background: transparent
    url(/static/com/hostway/plugins/commons/images/icon_collapsed.gif) no-repeat;
}

/* Advertisment  frame to login page    */
/* #login-hostway-login {float: left; width: 30%;}
#com-hostway-sitecontrol-adv {float: right;width: 70%} */

@media screen and (max-width: 1028px) {
  #main-nav-hostway-mainPage .top {
    margin-left: 10px;
  }
  #main-nav-hostway-mainPage li {
    white-space: normal;
    text-align: center;
  }
}

@media screen and (max-width: 720px) {
  .main-nav {
    padding: 10px;
  }
}

@media screen and (max-width: 480px) {
  input#createEmailBtn,
  button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only:first-child {
    margin-left: 0;
  }

  .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .ui-dialog .ui-dialog-buttonpane {
    margin: 0;
  }

  .main-nav {
    padding: 6px;
  }
  .advanced-header-table {
    flex-wrap: wrap;
    justify-content: center;
  }
  #dashboard-content,
  html > body #content-container {
    flex-direction: column-reverse;
  }
  html > body #content,
  #homepage-bodycopy {
    width: 100%;
  }

  #subsection-nav {
    margin-bottom: 24px;
    margin-right: unset;
    max-width: none;
  }

  #subsection-nav li.indent-second {
    padding: 6px 40px;
  }
  #subsection-nav li {
    padding: 8px 40px;
    font-size: 1.1em;
  }
}

.button-container {
  background: none;
  padding-top: 1rem;
}

.login__list__submit__wrapper {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

div input.button-submit {
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(80, 150, 200, 0.2); /* gray-blue glow */
  transition: background-color 0.2s ease, box-shadow 0.3s ease,
    transform 0.2s ease;
  border: 0;
  font-size: 13px;
  width: auto;
  margin: auto 0;
  background-color: #337fa8;
  border-radius: 8px;
  padding: 0.5rem;
  color: #fff;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  min-height: 1.1875rem;
}

/* Hover effect */
div input.button-submit:hover {
  background-color: #3a8cb8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 12px rgba(100, 180, 230, 0.25);
  transform: translateY(-1px);
}

/* Active (click) effect */
div input.button-submit:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Focus ring (for keyboard nav) */
div input.button-submit:focus {
  outline: 2px solid #5ea6d8;
  outline-offset: 2px;
}

input.large {
  width: unset;
}

form.form-edit-name-server {
  width: fit-content;
}

.landingMaster-css-sprite {
  margin-right: 0 !important;
  width: 100%;
}

.table-actions input:hover {
  background: #0c2233;
}

table.search-results.edit__multiple__lock th.sortable {
  background: transparent !important;
}

table.search-results.edit__multiple__lock th.sortable.descending,
table.search-results.edit__multiple__lock th.sortable.ascending {
  text-decoration: underline;
  text-decoration-color: #0c2233;
}

a:any-link {
  text-decoration: none;
}
.image-test-run {
  width: 40%;
}

table.paginator_container {
  color: var(--text-secondary);
  background-color: transparent;
}

table.paginator_container .pagination a.disabled,
.pagination a.disabled:hover,
.pagination a.disabled:focus,
.pagination a.disabled:active {
  background: transparent;
  background-image: none;
  border: 0;
  color: var(--color-text-primary);
}
.ui-widget-header {
  background: #dde4eb;
  border: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.ui-dialog-buttonset {
  display: flex;
  flex-direction: row-reverse;
}
.ui-dialog .ui-dialog-buttonpane {
  border: 0;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: 0;
  background: transparent;
}
#mailboxUsage {
  width: 25%;
}

#numStandard {
  font-size: 1.5rem;
  color: var(--accent-primary);
  font-weight: 600;
}
#domainDiskQuota {
  font-size: 1rem;
}
.switch {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.shaded {
  background-color: transparent;
}

.step {
  background-color: transparent;
}

#forwarding_note {
  font-size: 0.9em;
  font-weight: bold;
  color: #666666;
}

#main-nav-hostway a,
#main-nav-hostway-mainPage a {
  color: var(--text-secondary);
}

#main-nav-hostway-mainPage li:hover {
  inset: none;
  color: var(--text-primary);
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: var(--accent-primary);
  text-underline-offset: 10px;
  text-decoration-thickness: 3px;
}

#dashboard-content {
  display: flex;
  flex-direction: column-reverse;
}

#homepage-dashboard-components {
  padding-top: 2rem;
  display: flex;
  flex-direction: row;
}

#com-hostway-subsection-submenu-email-mailbox {
  background-color: transparent;
}

.dashboard-service-menu {
  padding-top: 2rem;
}

#domainDiskQuota {
  color: var(--accent-primary);
  padding-bottom: 0.5rem;
  padding-top: 0.25rem;
}

#mailboxSummaryTable,
#mailboxSummaryTable td {
  color: var(--accent-primary);
}

.mailbox-summary__container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6rem;
  padding-top: 32px;
}

.mail-users__container,
.mail-database__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

p.mail-database__description {
  margin: 0;
}

@media screen and (min-width: 500px) {
  #homepage-dashboard-components {
    flex-direction: column;
    width: 20%;
    min-width: 200px;
  }

  .dashboard-service-menu {
    padding-left: 2rem;
  }

  #dashboard-content {
    flex-direction: row;
  }
}

#domain_names_h-manage-service,
#email-manage-service {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  height: 12rem;
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  border-radius: 12px;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0.5px rgba(255, 255, 255, 0.06);
  background: var(--gradient-background);
}

#domain_names_h-manage-service:hover,
#email-manage-service:hover {
  background-color: var(--bg-tertiary);
  box-shadow: inset 0 0 0 1px rgba(51, 127, 168, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
  cursor: pointer;
}

.domain_names_h__title,
#email-manage-service .email__title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.domain_names_h__description,
#email-manage-service .email__description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

#email-manage-service .email__title-box,
.domain_names_h__title-box {
  display: flex;
  flex-direction: row;
  align-items: end;
  gap: 1rem;
}

#email-manage-service .email__icon-box {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--border-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(74, 158, 255, 0.4),
    rgba(30, 80, 180, 0.5)
  );
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.advanced-dns__select-dns,
fieldset {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--card-shadow);
  color: var(--text-primary);
  padding: 1rem 0.5rem;
  border-radius: 12px;
  margin-top: 2rem;
}

.advanced-dns__form-label {
  color: var(--accent-primary);
  padding-right: 1rem;
}

input[data-com-onepassword-filled="dark"] {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: 0.5rem;
  outline: none;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 0 0 2px var(--accent-primary), 0 0 8px var(--color-shadow-dark);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/*-------------------------------------------------
PROCESSES
-------------------------------------------------*/

/*----Wizard ---*/

h2.wizard {
  font-size: 1.1em;
  color: #252525;
  background: transparent
    url(/static/com/hostway/plugins/commons/images/icon-wizard.gif) no-repeat
    3px 13px;
  border: 0;
  font-weight: normal;
}
h3.wizard {
  font-size: 1.2em;
  font-weight: bold;
  color: #7b9e52;
}

#wizard-container {
  border-left: 1px solid #ccc;
  border-top: 1px solid #fff;
  background: #fff;
}
#wizard-container-rounded-bottom {
  background: url(/static/com/hostway/plugins/commons/images/rounded-bottom.gif)
    left no-repeat;
}
#wizard-button-container {
  text-align: right;
}
#input-image-back {
  background: transparent
    url(/static/com/hostway/plugins/commons/images/icon-arrow-left.gif)
    no-repeat 5px 0px;
  border: 0;
  color: #252525;
  text-align: center;
  font-size: 0.9em;
  text-decoration: underline;
  color: #0066cc;
}
#input-image-back:hover {
  background: transparent;
  color: var(--text-primary);
  text-decoration: none;
}
#input-image-continue {
  background: var(--accent-primary);
  color: var(--text-primary);
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
}
#input-image-continue:hover {
  background: var(--accent-primary-light);
  transform: translateY(-1px);
  color: var(--text-primary);
}

/*-----process steps------*/

ul#process-steps {
  font-size: 0.85em;
}
#process-steps a:link,
#process-steps a:visited {
  color: #252525;
  background-color: #ddd;
  text-decoration: none;
}
#process-steps a:hover {
  color: #fff;
  background-color: #369;
  text-decoration: none;
}
#process-steps li a#current {
  background-color: #ccffbf;
  border: 0;
  border-top: 3px solid #24b300;
  color: #24b300;
  font-weight: bold;
}
#process-steps li a#completed {
  background-color: #cccccc;
  border: 0;
  color: #999;
  font-weight: bold;
}
#process-steps li a:hover,
#process-steps a#current:hover {
  background-color: #777;
  color: #fff;
}
#process-steps li a:active,
#process-steps li#active a#current:active {
  background-color: #667;
  color: #fff;
}
/* progress take 2 */
.progresstable tr.counter td {
  text-align: center;
  font: 0.8em verdana, arial, helvetica, sans-serif;
}
.progresstable td.step {
  background: #cecfce;
  color: #fff;
}
.progresstable tr td.active {
  background: #7b9e52;
  font-weight: bold;
  font-size: 0.85em;
}

.progresstable tr.captions td {
  background: none;
  text-align: center;
  color: #9c9b9c;
  font-size: 0.8em;
}

.progresstable tr.captions td.active {
  color: #404040;
  font-size: 0.8em;
}

/* setup wizard substeps */
#progress-substeps ul {
  background-color: #fff;
  color: #fff;

  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 0.9em;
}

#progress-substeps ul li {
  color: #242424;
  border-right: 1px solid #fff;
  border-bottom: 1px #ccc solid;
}

#progress-substeps ul li a {
  color: #242424;
  text-decoration: none;

  border-right: 1px solid #fff;
}

#progress-substeps ul li.current {
  background-color: #7b9e52;
  color: #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px #ccc solid;
}

#progress-substeps ul li.completed {
  color: #9c9b9c;
  background-color: #cecfce;
}

#login-mailbox__action__container {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: auto 0;
}

.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-dialog-buttons.ui-draggable {
  top: 45% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  padding: 1rem;
  z-index: 1;
  position: absolute;
  max-width: 400px !important;
  width: 95% !important;
  background: linear-gradient(145deg, #1f1f1f, #292929);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-dialog-buttons.ui-draggable
  p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.ui-widget-header {
  background: transparent;
  color: var(--text-primary);
}

.ui-dialog .ui-dialog-content {
  color: var(--text-secondary);
}

.ui-dialog .ui-dialog-buttonpane {
  background-color: transparent;
  padding: 0;
}

input#createEmailBtn,
input#deleteMailboxesBulk,
#createEmailBtn_overLimit,
button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only {
  padding: 5px 10px;
}

input#new-username {
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 95%;
  height: 2.25rem;
}

.table__text__or {
  color: var(--text-secondary);
  text-align: left;
  margin-left: 14px;
}

.email-alias__icon-container img {
  width: 1.25rem;
}

.email-alias__icon-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.75rem;
}

.mymusic-nav__email__icon{
 font-size: 1.125rem;
}

.utility-nav__container{
  display: flex; 
  flex-direction: row-reverse;
}

UL.icon-list-2col LI {
  width: auto;
  max-width: 72ch;
}

@media screen and (min-width: 480px) {
  .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-dialog-buttons.ui-draggable {
    width: 60% !important;
    padding: 16px 32px 32px 32px;
  }
}