/* Custom styling and global style overrides */

.view-login .login-notification, .view-login .container.account-select {
    margin-top: 0;
    margin-bottom: 20px;
    margin-left: 40px;
    margin-right: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

.grid__col.text-center, .text-center {
    text-align: center;
}

.table__head .table__cell.table__first-column, .table__cell.table__first-column {
    padding-left: 65px;
}

.table__head .table__cell.table__last-column, .table__cell.table__last-column {
    padding-right: 65px;
}

.dropdown__list #delegations-notice {
    margin: 0 20px;
    white-space: normal;
}

.compact-notification {
    margin: 20px;
}

.server-info .table__first-column,
.server-info .accordion__table__first-column,
.resource-usage-email .table__first-column,
.resource-usage-mysql .table__first-column {
    width: 400px;
}

/* Code */
.code__line-text.is-wrapped {
    word-break: break-all;
}
.code__box-wrapper:after {
    /* Why is it at 87%? changing to 100 */
    height: 100%;
 }
/* End of code */



/* Login page */
#mid-error {
    display: none;
    margin-bottom: 40px;
}
.login-confirmation-code {
    border: none;
    font-size: 22px;
    font-weight: bold;
    background: inherit;
    width: 100px;
    margin: 0;
    text-align: center;
}
/* End of login page */

/* By default its at 100%, but with a short text the loader will push the text to the left. Automatic width is more natural
   in this case (loader gets appended to right of text and text doesn't move) */
/*
.actions__button.js-loader {
    width: auto;
}
*/

/*
.textfield__inner.has-tooltip-icon {
    position: relative;
}
.textfield__inner.has-tooltip-icon .tooltip {
    display: block;
}
.tooltip-help-icon {
    position: absolute;
    top: -3px;
    right: -15px;
}
*/

/* Input text should not run into password visibility icon */
.textfield__input.is-password-input {
    padding-right: 50px;
}

/* Display readonly fields as visibly readonly. */
.textfield__input[readonly] {
    background-color: rgba(0,0,0,0);
    color: rgba(0,0,0,0.56);
    -webkit-text-fill-color: rgba(0,0,0,0.56);
    outline: none;
}

.navigation__link-locked {
    position: relative;
}
.navigation__link-locked .icon {
    height: 12px;
    position: absolute;
    right: 0;
    bottom: 6px;
    color: silver;
}
.navigation__link-locked:hover .icon {
    color: #e95a0c;
}

.actions--packages .navigation__external-link {
    color: #217fde;
}

.notification.bg-white .notification__inner {
    background: #fff;
}

.textfield__pretext-empty {
    padding: 0;
}

.bulk-select-not-clickable {
    pointer-events: none;
}

.loader-horizontal {
    display: inline-block;
    position: relative;
    top: 1px;
}

.js-toggle-button label {
    cursor: pointer;
}

/* Zendesk chat */
.button--support {
    position: fixed;
    right: 30px;
    bottom: 15px;
    display: none;
}
/* So that chat button does not overlap with footer content */
@media only screen and (max-width: 1240px) {
    .button--support {
        right: 40px;
        bottom: 60px;
    }
}
/* End of Zendesk chat */

/*
 * Alter the input field styles so that autofilled fields browser styling (background color) would fill the whole input,
 * not just a part of it.
 */
.textfield__inner:before {
    bottom: 8px;
}
.textfield__input, .fake-select {
    top: -8px;
    position: relative;
    padding-bottom: 0;
    height: 46px;
}
.fake-select {
    line-height: 46px;
    padding-right: 30px;
}
.filtered-select .dropdown__trigger {
    width: 100%;
}
.textfield__inner {
    margin-bottom: -8px;
}
.textfield__password-icon {
    bottom: 19px;
}
.textfield__input:hover {
    background: #f5faff;
}
.textfield--search #domain_search {
    top: 0;
}
.textfield--search .textfield__inner {
    margin-bottom: 0;
}
.textarea__input {
    padding-top: 8px;
    height: 80px;
}
.textarea--code {
    font-family: "Source Code Pro", monospace;
    height: 10em;
}

/*
 * Test custom background color for the autofilled input fields.
 * Currently not using it, leaving for reference in case we decide to use our own coloring.
 */
/*
.textfield__input:-webkit-autofill, .textfield__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px white inset;
}
.textfield__input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 100px #f5faff inset;
}
*/

/* End of input field styles override */

/*
 * A fix for autofilled input field labels. Move them above the input field.
 */
input:-webkit-autofill ~ .textfield__label {
  font-size: 12px;
  color: rgba(0,0,0,0.4);
  padding-top: 0;
  -webkit-animation: hideBigLabel 50ms ease-out, showSmallLabel 100ms ease-out 50ms;
          animation: hideBigLabel 50ms ease-out, showSmallLabel 100ms ease-out 50ms;
}

input:-webkit-autofill ~ .textfield__label:before {
  top: 8px;
  -webkit-animation: floatLineWithBigLabelToTop 50ms ease-out, floatLineWithSmallLabelToTop 100ms ease-out 50ms;
          animation: floatLineWithBigLabelToTop 50ms ease-out, floatLineWithSmallLabelToTop 100ms ease-out 50ms;
}

input:-webkit-autofill ~ .textfield__label:before,
input:-webkit-autofill ~ .textfield__label:after {
  border-color: #e7e7e7;
}

/*
 * The below style needs to be applied to autofilled fields, but the rule doesn't work for whatever reason
 * (and is not cross-browser frieldly). Also there is no CSS parent selector. Applying a fix through javascript
 * by adding is-dirty class to autofilled inputs, which applies the required styling.
 * In general this adds a white area below the input label text.
 */
/*
.textfield__inner:has(input:-webkit-autofill):after {
  opacity: 0;
}
*/

/* End of autofilled input field labels fix */

/*
 * TODO: The design is not responsive yet. When the window is smaller, the bulk actions disappear
 * (are left out of the screen). A small quickfix to have them visible.
 */
@media (max-width: 1240px) {
    .bulkedit__inner.h-container {
        width: 100%;
        min-width: 500px;
    }
}


.spamscore__email-address {
    margin-top: 16px;
}

.spamscore-email-account-row .textfield {
    padding-left: 20px;
}
.spamscore-copy-button {
    position: relative;
}
.spamscore-copy-button a {
    position: absolute;
    top: -30px;
    right: -20px;
}

.table__cell--check {
    width: 65px;
}

/* ui_wizard */
.do-it-web__step.wizard-step-completed .do-it-web__step-number {
    background: #00D267;
}
.do-it-web__step.wizard-step-completed {
    border-color: transparent;
    cursor: pointer;
}
.wizard-uninitialized {
    background: none;
}
.wizard-uninitialized .do-it-web__step-wrapper {
    display: none;
}
/* End of ui_wizard */

.icon--narrow {
    font-size: 100%;
}

/* Adjust the padding of the lower left links sidebar box, for its height to be equal with the resources usage box. */
.domain-overview .box--sidebar {
     padding-bottom: 98px;
}

/* Websites */
.do-it-web__image {
    max-width: 163px;
}

.web-element__logo-img img {
    width: 100%;
}

.do-it-web__done-icon {
    width: 84px;
    height: 84px;
    background: #00D267;
    border: 10px solid #F1FFF8;
    border-radius: 50%;
}

/* WP */
.wp-domain-select-wrapper {
    margin: 0;
    float: right;
    margin-right: 13px;
}
.wp-extra-settings .accordion__header-inner {
    width: 265px;
    margin: 0 auto;
}
.wp-extra-settings .accordion__header-link, .wp-extra-settings.accordion--table .accordion__inner, .accordion--table.accordion-no-left-margin .accordion__inner {
    padding-left: 32px;
}
.wp-extra-settings .accordion__header-inner .accordion__arrow {
    right: 10px;
}
.wp-plugins .plugin-read-more {
    font-size: 12px;
}
.wp-plugins .plugin-read-more .icon {
    font-size: 16px;
}
.wp-plugins .accordion--toggle .accordion__arrow {
    display: block;
}
.wp-plugins .accordion__header-inner {
    width: 360px;
    margin: 0 auto;
    margin-top: 40px;
}
.wp-plugins .wp-plugins-no-margin-top .accordion__header-inner {
    margin-top: 0;
}
.notification--no-icon .notification__content {
    margin-left: 0;
}
.subdomain-directory {
    margin-top: 5px;
}
.custom_dir_info .notification__inner {
    border: 2px solid #E4EFFA;
    background-color: #f5faff;
}
.wp-clone-error {
    background-color: #fd3d3d;
    color: #fff
}
/* End of websites */



#invoice-download {
    margin-top: -20px;
}

.invoice-pdf__credit-info {
    text-align: center;
    border: 2px dashed #fd3d3d;
    font-weight: bold;
    padding: 10px;
    margin-top: 5px;
}
.table--compact .table__cell--tools-no-padding {
    padding-top: 0;
    padding-bottom: 0;
}

/* Resource usage and domain overview */
.box__no-border {
    border: none;
    box-shadow: none;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 20px;
}
/* TODO add the "is-disabled" class to the progressbar and diagram components if this gets into conflict with other usages of grid__col. */
.grid__col .is-disabled, .opacity-half {
    opacity: .5;
}
.resource-usage-stats-with-bg .diagram canvas {
    z-index: 0;
}

#billing-contact .h-text > p {
    margin-top: 0;
}

.box--error.box--hasHeader {
    background-color: #fff;
}


.js-modal-ajax-content #domain-redirecting-section {
    box-shadow: none;
}

/* Feedback */
.feedback__textarea .textarea__input {
    height: 170px;
}
/* End of feedback */

.delegated-domains-inaccessible-notification {
    padding: 10px 24px 10px 24px;
    color: rgba(0,0,0,0.4);
    font-size: 12px;
    font-weight: 400;
    white-space: normal;
    line-height: 14px;
}

/* Packet choosing, additional services */
#input-promotion-code {
    width: 50%;
}
#package-edit-box .service-element__title {
    white-space: normal;
    font-size: 15px;
}
.additional-service-ordered-quantity {
    max-width: 12.5em;
}

.service-end-msg {
    height: 160px;
}
/* End of packet choosing */

/* Dashboard */
.service-element.is-expired:before {
  background-color: #fd3d3d;
}
.service-element.is-in-progress:before {
  background-color: #e7e7e7;
}
.service-element.is-registered-elsewhere:before,
.service-element.is-new-pending:before {
    background-color: #d8d8d8;
}
.is-expired .service-element__description,
.is-expired .service-element__expires {
  color: #fd3d3d;
}
.service-element__note-error {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #fd3d3d;
  -ms-flex-preferred-size: 190px;
      flex-basis: 190px;
  max-width: 190px;
}
.service-element__note-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #f5a100;
  -ms-flex-preferred-size: 190px;
      flex-basis: 190px;
  max-width: 190px;
}
.service-element__note-pending {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #00d267;
  -ms-flex-preferred-size: 190px;
      flex-basis: 190px;
  max-width: 190px;
}
.service-element__note--warning .service-element__error-icon {
  font-size: 19px;
  color: #f5a100;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 1em;
          flex: 0 0 1em;
  margin-right: 8px;
}
.table.is-edit .service-list__table {
  border: 1px transparent;
}
.service-element-placeholder {
  padding: 16px 30px;
}
/* End of dashboard */

.js-modal-ajax-content #domain-redirecting-section {
    box-shadow: none;
}

.js-authmode-edit, .js-authmode-submit-button, .js-authmode-cancel-button {
    display: none;
}

/* Domain overview */
.text-state--error:before {
  background-color: #fd3d3d;
}
.text-state--disabled:before {
  background-color: #d8d8d8;
}
/* End of domain overview */

.user-tracking-allow label {
    line-height: 1.5;
}

/* Quick commands autocomplete dropdown */
.ui-autocomplete.autocomplete-dropdown {
    padding-top: 5px;
    padding-bottom: 5px;
}

.ui-autocomplete.autocomplete-dropdown.ui-widget.ui-widget-content {
  border: none;
  background-color: #fff;
  border-radius: 4px;
  -webkit-box-shadow: 2px 2px 12px rgba(33,127,222,0.16);
          box-shadow: 2px 2px 12px rgba(33,127,222,0.16);
}

.ui-autocomplete.autocomplete-dropdown.ui-widget.ui-widget-content:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 67px;
  margin: 0 auto;
  border: 3px solid #000;
  border-color: transparent transparent #fff #fff;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  -webkit-box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.05);
          box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.05);
  opacity: 1;
  z-index: 3;
}

.ui-autocomplete.autocomplete-dropdown.ui-widget.ui-widget-content .ui-state-active {
    background: #f5faff;
    border: none;
}

.ui-menu.autocomplete-dropdown .ui-menu-item-wrapper {
    padding: 10px 24px;
    font-weight: 400;
    font-size: 14px;
    position: relative;
    color: #000;
}

.ui-autocomplete.autocomplete-dropdown.ui-widget.ui-widget-content .ui-state-active:hover {
    color: #217fde;
}

.dashboard-search-input {
    max-width: 22em;
}
/* End of quick commands autocomplete dropdown */

/* Domain renewal, nameserver for admin */
.padding-left-medium {
    padding-left: 40px;
}
.padding-right-medium {
    padding-right: 40px;
}
.padding-top-medium {
    padding-top: 40px;
}
.padding-bottom-medium {
    padding-bottom: 40px;
}
.padding-left-small {
    padding-left: 20px;
}
.padding-right-small {
    padding-right: 20px;
}
.padding-top-small {
    padding-top: 20px;
}
.padding-bottom-small {
    padding-bottom: 20px;
}
.padding-bottom-tiny {
    padding-bottom: 10px;
}
.no-bottom-margin,
.no-margin-bottom {
  margin-bottom: 0;
}
.info-box--data-thin {
    height: auto;
    min-height: 0;
    text-align: center;
    padding-bottom: 44px;
    padding-top: 44px;
}
/* End of domain renewal */

/* Here until added to general css file */
.textfield .tooltip .notification__icon {
    position: absolute;
    top: 50%;
    margin-top: -7px;
    margin-left: 10px;
}

.dropdown__item-link.is-current .dropdown__item {
    font-weight: 700;
    color: #e95a0c;
}

/* Bulk editor overlay */
.bulkeditor-active .header {
    z-index: 99;
}
/* End of bulk editor */

/* Onboarding wizard */
.shepherd-content {
    background: #000;
    box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.1), 2px 0px 14px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    position: relative;
}
.shepherd-text {
    font-family: Overpass;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    mix-blend-mode: normal;
    padding: 60px 20px;
}
.shepherd-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.shepherd-button-close, .shepherd-button-back {
    font-family: Overpass;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 16px;
    color: #FFFFFF;
    mix-blend-mode: normal;
    opacity: 0.56;

    position: absolute;
    height: 18px;
    left: 20px;
    bottom: 24px;
}
.shepherd-arrow {
    border-top-color: #000;
}
.shepherd-element .shepherd-arrow {
    border: 10px solid transparent;
}
.shepherd-button-forward {
    position: absolute;
    right: 24px;
    bottom: 24px;
    color: #5AACFF;
    mix-blend-mode: normal;
    text-align: right;
}
.shepherd-title {
    color: #FFFFFF;
    mix-blend-mode: normal;
    opacity: 0.56;
    font-size: 12px;
    line-height: 16px;
    position: absolute;
    top: 24px;
    left: 20px;
}
.shepherd-element.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-arrow {
    border-bottom-color: #000;
}

.shepherd-cancel-icon {
    border: none;
    background: transparent;
    padding: 0;
    position: absolute;
    top: 24px;
    right: 24px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 24px;
}
.shepherd-cancel-icon span {
    display: none;
}
.shepherd-cancel-icon:after {
    content: "\2A09";
    opacity: 0.56;
    color: #fff;
}
.shepherd-cancel-icon:hover:after, .shepherd-button:hover {
    color: #217fde;
    opacity: 1;
}
.no-scrolling {
    overflow: hidden;
}
.onboarding-wizard.margin-bottom-medium {
    margin-top: -40px;
}
.onboarding-wizard.margin-right-medium {
    margin-left: -40px;
}
.onboarding-wizard {
    min-width: 400px;
}
/* Onboarding wizard end */

/* Forced wordbreak*/
.word-break-all {
    word-break: break-all;
}
.table__cell.word-break-word {
    word-break: break-word;
}
/* End of forced wordbreak. */

/* Bulk-select checkboxes */
/* Always display the bulk-select checkboxes by default, with a bit of opacity. */
.service-list__check .check__label, .table__check .check__label {
    opacity: 0.25;
    visibility: visible;
}
/* Add border to the bottom of the bulk select table columns, now that all checkboxes are visible. */
.table__cell {
  -webkit-box-shadow: 0 1px 0 rgba(33,127,222,0.08);
          box-shadow: 0 1px 0 rgba(33,127,222,0.08);
}
/* The text was not properly aligned to the middle (visually) compared to bulk-select checkboxes. */
.table__cell--longText .table__text-main {
    vertical-align: bottom;
}
.table__cell--verticalTop  {
    vertical-align: top;
}
/* End of fixes related to bulk-select checkboxes */

.table__cell--longType {
    width: 35%;
}
.box__parent.is-edit .js-package-edit-close {
    display: inline-block;
}
.box__parent.is-edit .js-package-edit-button {
    display: none;
}
#upgrade-crm-packet .do-it-web__description, .wp-install-tool .actions__paragraph, .voog-installer .actions__paragraph {
    color: #000;
    font-weight: 400;
}

/* Searchable dropdowns with keyboard navigatable results list start */
.dropdown.is-active .dropdown__box.dropdown__searchable {
    overflow-y: hidden;
    min-width: 200px;
}
.dropdown.is-active .dropdown__searchable .dropdown__list {
    max-height: 425px;
    overflow-y: auto;
}
.dropdown__searchable .dropdown__search {
    display: none;
    padding: 10px 20px 20px;
}
.dropdown.is-active .dropdown__searchable .dropdown__search {
    display: block;
}
.text .grid__col .textfield.dropdown__search {
    margin-top: 0;
}
.dropdown__searchable .notification {
    padding: 0 10px;
}
.dropdown__searchable .notification__content, .dropdown__searchable .dropdown__group-label {
    text-wrap: auto;
}
.dropdown__search .textfield__search-icon {
    position: absolute;
    right: 10px;
    left: auto;
}
.dropdown__search  .textfield__input {
    padding-right: 40px;
}
.dropdown__searchable .dropdown__group:first-of-type .dropdown__group-label {
    padding-top: 0;
}

.dropdown__searchable .kb-navigating .dropdown__item {
    background: #f5faff;
}
/*
 * Originally .dropdown__group:last-child rule applies the correct colour, but with a searchable dropdown, perfectscrollbar
 * elements will be last instead so the rule won't apply. Added a separate class to fix the issue.
 */
.crm-logout .dropdown__link {
    color: #217fde;
}
/* Searchable dropdowns end */

/* The service element things that are not acting as a link */
.service-element__expires, .service-element__note {
    cursor: default;
}

.modal__content .modal__description {
    word-wrap: break-word;
}

/* TODO: This is not OK css for dropdowns in CRM developer view and similar usecases */
.dropdown--left .dropdown__box {
    right: -10px;
    left: auto;
}
.dropdown--right .dropdown__box {
    right: auto;
    left: -10px;
}

/* Don't display the label as red if it is not on top of the input (input is dirty or focused) */
/* TODO: tiny inputs that are not focused or dirty have a small gap in the border */
.textfield.is-invalid .textfield__label {
    color: rgba(0,0,0,0.56);
}
.textfield.is-invalid.is-dirty .textfield__label, .textfield.is-invalid.is-focused .textfield__label {
    color: #fd3d3d;
}
/* End of label color fix */

/* Max width removal for elements that have max width defined. */
.max-width-none {
    max-width: none;
}
/* End of max width removal. */

/* Mobile footer support online-offline icon color */
.footer--mobile__support.closed:before {
    background-color: #fd3d3d;
}
/* End of support online-offline icon color */

/* Mobile locked menu links */
.header--mobile__link-locked .icon {
    color: silver;
    height: 12px;
}
/* End of mobile locked menu links */

@media only screen and (max-width: 680px) {
    .table__head .table__cell.table__first-column, .table__cell.table__first-column {
        padding-left: 15px;
    }

    .table__head .table__cell.table__last-column, .table__cell.table__last-column {
        padding-right: 15px;
    }

    .table--mobile .table__cell.table__first-column, .table--mobile .table__cell.table__first-column {
        padding-left: 0;
    }

    .table--mobile .table__head .table__cell.table__last-column, .table--mobile .table__cell.table__last-column {
        padding-right: 15px;
    }
}

@media only screen and (max-width: 980px) {
    .modal--domain-no-exclamation .modal__content form .modal__button,
    .modal--domain .modal__content form .modal__button {
        margin-top: 5px;
    }
}

/* Override the pointer-cursor in the header of the invoices table in the column used for sorting. */
table.invoices_table .table__cell.sorting_asc, table.invoices_table .table__cell.sorting_desc, table.invoices_table .table__cell.sorting {
    cursor: auto;
}

.stats-update-icon {
    font-size: 12px;
    position: absolute;
    color: orange;
}

/* Sticky header for domain nameserver edit tables */
.is-data-edit .table__header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff;
    border-bottom: 1px solid rgba(33,127,222,0.16);
    padding: 24px 64px;
}

.is-data-edit .table__form-footer {
    top: 8px;
}

.is-data-edit.table--first .table__form-footer {
    top: 12px;
}

.is-data-edit .table__head {
    border: 0;
}

.table.is-data-edit {
    padding: 8px 0 12px;
}
/* End of sticky header for domain nameserver edit tables */

.range__button .loader__horizontal {
    padding-bottom: 2px;
}
.extra-service-form-add .loader__circle, .extra-service-form-add .button--loader:hover .loader__circle {
    background-color: #00d267;
}
.extra-service-form-cancel .loader__circle, .extra-service-form-cancel .button--loader:hover .loader__circle {
    background-color: #fff;
}

.service-element--unlimited .service-element__col--tools, .service-element--by-support .service-element__col--tools, .service-element--needs-upgrade .service-element__info .orange {
    font-size: 11px;
}
.service-element--needs-upgrade .service-element__info .service-element__title {
    color: #fd3d3d;
}

/* Domain registrant signing buttons */
#ee_form .button__icon {
    display: flex;
}

#ee_form .button-group {
    margin-top: 1em;
}

#ee_form .button-group .button__icon {
    margin-left: 8px;
    margin-right: 20px;
}

#ee_form .button-group .button__icon img {
    width: 46px;
    height: 40px;
}

#ee_form .button-group .button__text {
    text-align: left;
}

.modal__eis-icon {
    width: 60px;
    height: 60px;
}
/* End of domain registrant signing buttons */

@media only screen and (min-width: 980px) {
    #installed-wps .web-element__body {
        display: flex;
        justify-content: space-between;
    }

    #installed-wps .web-element__meta {
        position: relative;
    }
}

/* Accordion with arrow right after its header */
.accordion-arrow-near-header .accordion__header-inner {
    width: initial;
}

.accordion-arrow-near-header .accordion__title {
    display: inline;
}

.accordion-arrow-near-header .accordion__arrow {
    display: inline;
    margin-left: 18px;
}
/* End of accordion with arrow right after its header */

/* Modal with less whitespace */
.compact-modal .modaal-container {
    display: inline-block;
    width: auto;
}
.compact-modal .modal__content {
    padding: 20px;
}
.compact-button {
    padding: 10px;
    height: auto;
}
.compact-modal .modaal-close {
    top: 5px;
    right: 5px;
}
/* End of modal with less whitespace */

/* Cross and check bullets for lists */
.cross_check_list {
    line-height: 1.4;
}

.cross_check_list>*+* {
    margin-top: .7em;
}

.cross_check_list>ul li+li,
.cross_check_list>ol li+li,
.cross_check_list>ul li ul li,
.cross_check_list>ol li ul li {
    margin-top: .7em;
}
.cross_check_list>ul+ul {
    margin-top: 2.1em;
}

.cross_check_list ul {
    list-style: none;
}

.cross_check_list ul li {
    font-size: 14px;
    line-height: 24px;
    list-style: none;
    padding-left: 20px;
    position: relative;
}

.cross_check_list ul li.check:before {
    content: '';
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg fill='green' width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path d='M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z'/></svg>") no-repeat;
    position: absolute;
    top: 4px;
    left: 0;
}

.cross_check_list ul li.cross:before {
    content: '';
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg fill='red' width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path d='M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z'/></svg>") no-repeat;
    position: absolute;
    top: 4px;
    left: 0;
}
/* Cross and check bullets for lists */

.noWrap  {
    white-space: nowrap;
}

#partnerprogram-features .info-box__image {
    max-width: 90px;
}

/*
jQuery autocomplete. This is used for example by ui_searchableselect element.
This stuff was handpicked to make autocomplete UI suit modern theme dropdown.
*/
.ui-autocomplete {
    z-index: 999;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 15px;
    text-align: left;
}
/* End of jQuery autocomplete. */

/* Searchable select */
.searchable_select .textfield__search-icon {
    position: absolute;
    right: 10px;
    left: auto;
}

.searchable_select .desc-text {
    font-size: 12px;
    color: gray;
}

.searchable_select .ui-state-active {
    border: none;
    background-color: #0078D7;
    padding: 4px 7px;
}

.searchable_select .ui-state-active .desc-text {
    color: #fff;
}
/* End of searchable select */

.invoice-change-contact-link {
    font-size: 16px;
    line-height: 25px;
    font-weight: 600;
    margin-bottom: 8px;
}

.box--header-sticky .box__header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    background-color: #fff;
    border-bottom: 1px solid rgba(33,127,222,0.16) !important;
    padding: 24px 64px !important;
}

.file-upload .file-upload__filename:not(:empty):before {
    content: attr(data-prepend-title);
    display: inline-block;
    margin-right: 8px;
    height: 20px;
    color: #AAAAAA;
    font-size: 14px;
    line-height: 20px;
}

.file-upload .file-upload__filename {
    height: 20px;
}

.promotionalCode__code{
    overflow: hidden;
    text-overflow: ellipsis;
}

#installed-wps .web-element__title .wp-title-link {
    font-size: 13px;
    font-weight: normal;
    margin-bottom: -2px;
}
@media only screen and (min-width: 768px) {
	.web-element__main-options .web-element__option {
	    line-height: 30px;
	}
}
#installed-wps .wp-extra-options .accordion__header-inner {
    display: block;
}
#installed-wps .wp-extra-options .accordion__title {
    display: inline-block;
}
#installed-wps .wp-extra-options .accordion__arrow {
    display: inline-block;
    margin-left: 10px;
    vertical-align: bottom;
}
#installed-wps .accordion__item.is-open .accordion__title {
    font-weight: normal;
}

/* We don't want to use header--mobile__link--selected because it adds a coloured bar before the link which does
   not suit for a few mobile menu links */
.header--mobile__link.is-current {
    color: #e95a0c;
}

/* Public service announcement header. Styles copied from .header and
   .h-box--light classes. */
.psa {
    background-color: #fffa80;
    padding: 10px 20px;
}
.psa .text {
    max-width: 1154px;
    margin: 0 auto;
    font-size: 15px;
}
/* End public service announcement header. */

/* Datatables */
.table--mobile .dataTable {
    width: 100% !important;
}

.dataTables_processing {
    color: gray;
    position: absolute;
    top: 38px;
    right: 260px;
    font-size: 12px;
}

@media only screen and (max-width: 680px) {
    .tableContainer__tools {
        display: block;
        position: static;
        margin: 20px auto;
        width: 80%;
        padding: 0;
    }
    .dataTables_processing {
        top: 108px;
        right: 65px;
    }
}

.paginate_button {
    margin-bottom: 5px;
}
/* End of datatables */

/* Simple flex system.

Usage:
    - `.flex-row` and `.flex-column` are self-explanatory.
    - `.flex-container` can be used to apply certain styles for small screen widths
      (i.e. make children take 100% width and thus list them in a single column).
    - If an element acts strangely, you can always try wrapping it with either `.flex-row` or `.flex-column`.
*/
.flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
}

.flex-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}

@media only screen and (max-width: 982px) {
    .flex-container > * {
        flex-basis: 100%;
        max-width: 100%;
        width: 100%;
        margin-top: 16px;
    }

    .flex-container {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
}
/* End of simple flex system. */

/* WP (Plausible) Analytics page styles. */
.wp-analytics__pluss-banner {
    width: 100%;
}

.wp-analytics__pluss-banner .flex-container {
    justify-content: space-between;
}

.wp-analytics__pluss-banner .list-bullet {
    margin-top: 0.25em;
}

.wp-analytics__pluss-banner .list-bullet .icon {
    margin-top: 1px;
}

.wp-analytics__pluss-banner .button-container {
    justify-content: center;
}

.wp-analytics__pluss-banner .button-container .button {
    width: 100%;
}

.wp-analytics__wp-select-container {
    align-items: center;
}

.wp-analytics__wp-select-container .dropdown__item:before {
    content: "";
    display: inline-block;
    min-width: 8px;
    min-height: 8px;
    background-color: #e7e7e7;
    margin-right: 10px;
    border-radius: 30px;
}

.wp-analytics__wp-select-container .analytics-inactive .dropdown__item:before {
    background-color: #e7e7e7;
}

.wp-analytics__wp-select-container .analytics-active .dropdown__item:before {
    background-color: #00d267;
}
/* End of WP (Plausible) Analytics page styles. */

/* Pluss service packet promotion modal. */
.pluss-promotion-modal__content {
    /* Set max-width to wrap text at a desired point. Using `rem` to ignore text size. */
    max-width: 28rem;
}

.pluss-promotion-modal__content .modal__title-container {
    justify-content: center;
}

.pluss-promotion-modal__content .modal__title-container h2{
    max-width: 26rem;
}

.pluss-promotion-modal__content .modal__text .icon {
    margin-top: 2px;
}

.pluss-promotion-modal__content .bell-icon {
    margin-top: -2px;
}

.pluss-promotion-modal__content .permission-restriction-text {
    font-size: 14px;
}

#upgrade-packet:hover {
    text-decoration: none;
}

.modal-packet-upgraded-info-wrapper ul {
    list-style: none;
}
/* End of Pluss service packet promotion modal. */

/* Email page account list `Volume` field progressbar modifications. */
#email_accounts_list .progress-bar {
    padding-right: 0px;
}
/* End of `Volume` field progressbar modifications. */

.wp-extra-actions {
    font-size: 13px;
    padding: 15px 5px 15px;
}