/* 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.vm-sorting-asc,
table.invoices_table .table__cell.vm-sorting-desc,
table.invoices_table .table__cell.vm-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. */


/* 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. */

/* End of WP (Plausible) Analytics page styles. */

/* 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;
}

/* Fix for missing search-choice-close icon in Chosen multiple selects */
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    background: none !important;
    font-size: 14px !important;
    line-height: 12px;
    text-align: center;
    color: #999;
    cursor: pointer;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:before {
    content: "×";
    display: block;
    font-size: 18px;
    font-weight: bold;
    line-height: 12px;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
    color: #000;
    background-position: 0 0 !important;
}

/* Select All link styling for multiple selects */
.textfield .select__select-all,
.select__chosen-wrapper .select__select-all {
    position: absolute;
    display: block;
    bottom: -25px;
    right: 10px;
    font-size: 13px;
    color: #0078D7;
    text-decoration: none;
    cursor: pointer;
    z-index: 1;
}

.textfield .select__select-all:hover,
.select__chosen-wrapper .select__select-all:hover {
    text-decoration: underline;
    color: #0063B1;
}

.textfield .select__select-all:active,
.select__chosen-wrapper .select__select-all:active {
    color: #005A9E;
}

/* Wrapper for multiple_chosen selects to enable absolute positioning */
.select__chosen-wrapper {
    position: relative;
}