/************************************
BASIC STYLE
************************************/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --green: #179F9A;
    --dark-grey: #99999A;
    --light-grey: #F0F0F0;
    --thin-grey: #FAFAFA;

    --white: #fff;
    --black: #000;

    --text-grey: #535354;

    --border-grey: #C9C8C8;

    /*BS*/
    --bs-success-rgb: 53, 165, 83 !important;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, article, ul, ol) {
    margin-bottom: 0 !important;
}

/************************************
CONTAINER
************************************/
:root {
    --container-width: 1728px;
    --container-padding: 0;
}

.container {
    max-width: var(--container-width) !important;
    padding-inline: var(--container-padding) !important;
}

/************************************
TYPOGRAPHY
************************************/
h1,
.h1 {
    font-size: 24px !important;
    line-height: 27.31px !important;
    font-weight: 500 !important;
    font-family: "Montserrat", sans-serif;
}

h2,
.h2 {
    font-size: 20px !important;
    line-height: 27.31px !important;
    font-weight: 500 !important;
    font-family: "Montserrat", sans-serif;
}

h3,
.h3 {
    font-size: 19px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    font-family: "Montserrat", sans-serif;
}

h4,
.h4 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    font-family: "Montserrat", sans-serif;
}

h5,
.h5 {
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    font-family: "Montserrat", sans-serif;
}

h6,
.h6 {
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    font-family: "Montserrat", sans-serif;
}

.h7 {
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    font-family: "Montserrat", sans-serif;
}

.h8 {
    font-size: 10px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    font-family: "Montserrat", sans-serif;
}
.wp_page_title{
    color: var(--text-grey);
}
p {
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    font-family: "Montserrat", sans-serif;
}

.para p {
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    font-family: "Montserrat", sans-serif;
}

.text-12 {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    font-family: "Montserrat", sans-serif;
}

@media screen and (max-width:767px) {

    h1,
    .h1 {
        font-size: 20px !important;
        line-height: 27.31px !important;
    }

    h2,
    .h2 {
        font-size: 18px !important;
        line-height: 23.31px !important;
    }
}

@media screen and (max-width:480px) {

    h1,
    .h1 {
        font-size: 18px !important;
        line-height: 27.31px !important;
    }

    h2,
    .h2 {
        font-size: 16px !important;
        line-height: 23.31px !important;
    }
}

.text-block :is(h2, h3, h4, h5, h6, p, ul, ol):not(:first-child) {
    margin-top: 21px;
}

.text-block P {
    font-weight: 400;
}

/************************************
LISTING
************************************/
.listing-ul ul {
    padding-left: 0;
    list-style: none;
}

.listing-ul ul li {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    position: relative;
    padding-left: calc(16px + 7px);
}

.listing-ul ul li:not(:last-child) {
    margin-bottom: 9px;
}

.listing-ul ul li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Sharp";
    font-size: 16px;
    font-weight: 500;
    color: var(--green);
    position: absolute;
    top: -3px;
    left: 0;
}

/**/
.listing-ul-dots ul {
    padding-left: 0;
    list-style: none;
}

.listing-ul-dots ul li {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    position: relative;
    padding-left: 15px;
}

.listing-ul-dots ul li:not(:last-child) {
    margin-bottom: 9px;
}

.listing-ul-dots ul li::before {
    content: "\f111";
    font-family: "Font Awesome 6 Sharp";
    font-size: 6px;
    font-weight: 900;
    color: var(--text-grey);
    position: absolute;
    top: 7px;
    left: 0;
}
/************************************
BUTTON
************************************/
:root {
    --btn-font-size: 12px;
    --btn-font-weight: 500;
    --btn-line-height: 19px;
    --btn-px: 19px;
    --btn-py: 5.5px;
}

@media screen and (max-width:767px) {
    :root {
        --btn-line-height: 21px;
        --btn-px: 15px;
        --btn-py: 5.5px;
    }
}

.btn:not(.no-btn),
.button:not(.no-btn) {
    font-size: var(--btn-font-size) !important;
    font-weight: var(--btn-font-weight) !important;
    line-height: var(--btn-line-height) !important;
    padding-block: var(--btn-py) !important;
    padding-inline: var(--btn-px) !important;
    color: var(--white) !important;
    border: 1px solid var(--green) !important;
    border-radius: 0 !important;
    background-color: var(--green) !important;
    margin-block: 0 !important;
    margin-inline: 0 !important;
    transition: all 0.3s !important;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    grid-gap: 15px;
}

:where(.btn, .button):not(.no-btn):is(.btn-light, .button-grey, .cancel-button-class, .back-button-class) {
    background-color: var(--dark-grey) !important;
    border-color: var(--dark-grey) !important;
}

:where(.btn, .button):not(.add-another-btn, .no-btn, .clear-phone, .remove-phone, .clear-email, .clear-social, .remove-social-media, .remove-email, #edit-clear-submit, .manual-address-btn, .user-manual-address-btn, [id*="edit-manual-address-button"], [name="edit_company_logo_remove_button"], [data-drupal-selector="edit-dynamic-user-logo-remove-button"]):hover {
    color: var(--green) !important;
    border-color: var(--green) !important;
    background-color: var(--white) !important;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.16);
}

:where(.btn, .button):not(.add-another-btn, .no-btn, .clear-phone, .remove-phone, .clear-email, .clear-social, .remove-social-media, .remove-email, #edit-clear-submit, .manual-address-btn, .user-manual-address-btn, [id*="edit-manual-address-button"], [name="edit_company_logo_remove_button"], [data-drupal-selector="edit-dynamic-user-logo-remove-button"]):hover a {
    color: var(--green) !important;
}

/*grey*/
.btn.btn-grey:not(.no-btn),
.button.button-grey:not(.no-btn) {
    background-color: var(--dark-grey) !important;
    border-color: var(--dark-grey) !important;
}

.btn.btn-grey:not(.no-btn):hover,
.button.button-grey:not(.no-btn):hover {
    color: var(--green) !important;
    border-color: var(--green) !important;
    background-color: var(--white) !important;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.16);
}

/*GROUP*/
.button-group {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 15px 25px;
}

@media screen and (max-width:480px) {
    .button-group {
        grid-gap: 15px 15px;
    }
}

/************************************
LINK ICON BUTTON
************************************/
.link-with-icon {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    grid-gap: 0 8px;
    cursor: pointer;
    user-select: none;
}
.link-with-icon a{
    color: var(--text-grey) !important;
}
.link-with-icon>i {
    font-size: 15px;
    color: var(--green);
}

/************************************
GRID STYLE
************************************/
.add-new-btn,
.add-new-btn:is(.btn, .button) {
    padding-inline: 38px 17.8px !important;
    background-image: url(../images/plus-white.png);
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: center left 9px;
}

.add-new-btn:hover,
.add-new-btn:is(.btn, .button):hover {
    background-image: url(../images/plus-green.png);
}

/************************************
GRID STYLE
************************************/
:root {
    --col-px: 12px;
}

body .row>* {
    padding-right: var(--col-px);
    padding-left: var(--col-px);
}

/************************************
FORM ELEMENTS
************************************/
:root {
    --form-label-margin: 8px;
    --form-title-margin: 17.5px;
}

.field-mt {
    margin-top: 17px;
}

.form-item {
    margin-block: 0 17px !important;
}

:where(.form-item-description-of-business-value).form-item {
    margin-block: 0 0 !important;
}

.form-item label,
.custom-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-block: 0 !important;
}

.form-item label :is(b, strong),
.custom-label :is(b, strong) {
    font-weight: 600 !important;
}

.custom-label {
    display: block;
}

.form-control {
    font-weight: normal !important;
    font-size: 13px !important;
    text-align: left !important;
    color: #535354 !important;
    font-weight: 500 !important;
    height: 32px !important;
    border: 1px solid #c9c8c8 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.form-control:is([readonly="readonly"]) {
    background-color: var(--thin-grey) !important;
}

.form-control,
.select2,
.form-textarea-wrapper {
    margin-top: var(--form-label-margin) !important;
}

.form-control::placeholder {
    color: #535354 !important;
}

.form-control[readonly] {
    background-color: var(--thin-grey) !important;
}

/*Modal*/
.ui-dialog .form-control {
    height: 40px !important;
}

.ui-dialog .form-textarea-wrapper textarea {
    height: 145px !important;
}

/*TEXTAREA*/
.form-textarea-wrapper {
    position: relative;
}

.form-textarea-wrapper textarea {
    height: 130px !important;
    background-color: var(--thin-grey);
    padding-block: 15px !important;
    padding-left: 45px;
    resize: none;
}

.form-textarea-wrapper::before {
    content: "\f3c5";
    font-family: "Font Awesome 6 Pro";
    font-size: 30px;
    font-weight: 300;
    color: var(--green) !important;
    position: absolute;
    top: 4.6px;
    left: 12.9px;
}

/*LABEL AND TITLE*/
fieldset legend,
.fieldset-legend,
.company-info .social-media-title,
.logo-section h3,
.social-media-title,
form.form-add-user-form table[data-drupal-selector="edit-working-hours"] caption,
form.editemployeedetials table[data-drupal-selector="edit-working-hours"] caption,
.reset-password-form .form-item-email label,
:is(.link-contact-personal-details, .edit-partnership-communication-preference) details summary {
    display: block;
    font-size: 16px !important;
    line-height: 27.31px !important;
    font-weight: 600 !important;
    color: var(--text-grey) !important;
    margin-block: 0 var(--form-title-margin) !important;
}

/*SEARCH INPUT*/
.search-input-wrapper {
    position: relative;
}

:where(#edit-search-and-filter) input {
    background-image: url(../images/search-green.png) !important;
    background-position: center right 6.5px !important;
    background-repeat: no-repeat !important;
    background-size: 16px !important;
    padding-right: 30px !important;
}

.search-input-wrapper .search-input-clear {
    position: absolute;
    inset-block: 0;
    right: 0;
    font-size: 14px;
    color: var(--green);
    padding: 5px 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/*DESCRIPTION*/
.form-item .description {
    font-size: 12px;
}

/* ERROR */
.my-custom-validation-message {
    font-size: 12px;
    line-height: normal;
    margin-bottom: 10px;
    margin-top: -15px;
}

:where(#individual-phones-table-wrapper, #individual-emails-table-wrapper, #partnership-phones-table-wrapper, #partnership-emails-table-wrapper, #phones-table-wrapper, #emails-table-wrapper, #social-media-table, #emergency-phones-fieldset, #emergency-emails-table, #home-contact-phones-table, #home-contact-emails-table) tr.custom-error-tr td>.form-wrapper {
    position: relative;
    padding-bottom: 20px;
}

:where(#individual-phones-table-wrapper, #individual-emails-table-wrapper, #partnership-phones-table-wrapper, #partnership-emails-table-wrapper, #phones-table-wrapper, #emails-table-wrapper, #social-media-table, #emergency-phones-fieldset, #emergency-emails-table, #home-contact-phones-table, #home-contact-emails-table) tr.custom-error-tr td div[id*="validation-message"] .my-custom-validation-message {
    position: absolute;
    inset-inline: 0;
    bottom: 3px;
    margin: 0;
    padding-inline: 5px;
}

/*Image preview*/
:where(.logo-preview-section) .validation-message {
    position: absolute;
    bottom: -30px;
    left: 0;
}

/************************************
DATE FIELD
************************************/
input[type="date"]::-webkit-calendar-picker-indicator {
    width: 16px;
    height: 17px;
    background-image: url(../images/calendar-green.png);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

/************************************
TIME FIELD
************************************/
input[type="time"]::-webkit-calendar-picker-indicator {
    width: 16px;
    height: 17px;
    background-image: url(../images/time.png);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

/************************************
AUTO COMPLETE
************************************/
.js input.form-autocomplete {
    background-position: center right 10px;
}

/************************************
SWITCH CHECKBOX
************************************/
.form-switch:not(.common-switch, .multiple-switch-btn),
.form-switch-wrap .form-checkboxes .form-item,
:is(#options-checkboxes, #options-checkboxes-select-all) .form-checkboxes .form-item,
:is(#options-checkboxes, #options-checkboxes-select-all) .form-item-select-all,
.multiple-switch-btn .form-checkboxes .form-type-checkbox,
.multiple-switch-btn .form-type-checkbox,
.multiple-switch-btn div[class*="form-item-select-all"],
#edit-parntership-options-checkboxes .form-item-select-all {
    display: flex !important;
    align-items: center;
    width: 100px;
    height: 15px !important;
    min-height: auto !important;
    padding: 0 !important;
    grid-gap: 0 13.8px;
    cursor: pointer;
    margin: 3px 0 !important;
}

.form-switch:not(.common-switch) .form-item,
.form-switch-wrap .form-checkboxes .form-item,
:is(#options-checkboxes, #options-checkboxes-select-all) .form-checkboxes .form-item,
:is(#options-checkboxes, #options-checkboxes-select-all).form-item-select-all,
.multiple-switch-btn .form-checkboxes .form-type-checkbox,
.multiple-switch-btn .form-type-checkbox {
    width: 40px;
    height: 15px;
    position: relative;
    margin: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-switch:not(.common-switch) input[type="checkbox"],
.form-switch-wrap .form-checkboxes .form-item input[type="checkbox"],
:is(#options-checkboxes, #options-checkboxes-select-all) .form-checkboxes .form-item input[type="checkbox"],
:is(#options-checkboxes, #options-checkboxes-select-all) .form-item-select-all input[type="checkbox"],
.multiple-switch-btn .form-checkboxes .form-type-checkbox input[type="checkbox"],
.multiple-switch-btn .form-type-checkbox input[type="checkbox"] {
    width: 40px;
    height: 15px;
    border-radius: 0;
    background-color: var(--light-grey);
    border: 0;
    cursor: pointer;
    background-image: none !important;
    margin: 0 !important;
    float: none;
    outline: 0 !important;
    box-shadow: none !important;
    position: relative;
}

.form-switch:not(.common-switch) .form-item input::after,
.form-switch-wrap .form-checkboxes .form-item input::after,
:is(#options-checkboxes, #options-checkboxes-select-all) .form-checkboxes .form-item input::after,
:is(#options-checkboxes, #options-checkboxes-select-all) .form-item-select-all input::after,
.multiple-switch-btn .form-checkboxes .form-type-checkbox input::after,
.multiple-switch-btn .form-type-checkbox input::after {
    content: '\f00d';
    font-size: 14px;
    font-family: "Font Awesome 6 Sharp";
    color: var(--text-grey);
    line-height: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 21px;
    height: 21px;
    background-color: var(--white);
    border: 1px solid var(--border-grey);
    position: absolute;
    top: -3px;
    left: 0;
    transition: all 0.3s;
    padding-top: 2px;
}

.form-switch:not(.common-switch) input[type="checkbox"]:checked,
.form-switch-wrap .form-checkboxes .form-item input[type="checkbox"]:checked,
:is(#options-checkboxes, #options-checkboxes-select-all) .form-checkboxes .form-item input[type="checkbox"]:checked,
:is(#options-checkboxes, #options-checkboxes-select-all) .form-item-select-all input[type="checkbox"]:checked,
.multiple-switch-btn .form-checkboxes .form-type-checkbox input[type="checkbox"]:checked,
.multiple-switch-btn .form-type-checkbox input[type="checkbox"]:checked {
    background-color: var(--green);
}

.form-switch:not(.common-switch) input[type="checkbox"]:checked::after,
.form-switch-wrap .form-checkboxes .form-item input[type="checkbox"]:checked::after,
:is(#options-checkboxes, #options-checkboxes-select-all) .form-checkboxes .form-item input[type="checkbox"]:checked::after,
:is(#options-checkboxes, #options-checkboxes-select-all) .form-item-select-all input[type="checkbox"]:checked::after,
.multiple-switch-btn .form-checkboxes .form-type-checkbox input[type="checkbox"]:checked::after,
.multiple-switch-btn .form-type-checkbox input[type="checkbox"]:checked::after {
    content: '\f00c';
    border-color: var(--green);
    color: var(--green);
    left: 20px;
}

.form-switch:not(.common-switch) .form-check-label,
.form-switch-wrap .form-checkboxes .form-item .form-check-label,
:is(#options-checkboxes, #options-checkboxes-select-all) .form-checkboxes .form-item .form-check-label,
:is(#options-checkboxes, #options-checkboxes-select-all) .form-item-select-all .form-check-label,
.multiple-switch-btn .form-checkboxes .form-type-checkbox .form-check-label,
.multiple-switch-btn .form-type-checkbox .form-check-label {
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    display: inline-block;
}

/*CHECKBOX WITH LABEL*/
.form-switch.form-switch-with-label {
    width: auto;
}

:is(.add-products-form) .form-switch:not(.common-switch) .form-item,
.add-bundle-forms #status-checkbox-wrapper .save-draft-text,
.edit-product-information-form #status-checkbox-wrappers .form-item,
.edit-bundle-information-form #status-checkbox-wrapper .form-switch,
.form-switch.form-switch-with-label .form-item {
    width: auto;
    grid-gap: 0 11px;
}

:is(.add-products-form) .form-switch:not(.common-switch) .form-item label,
.add-bundle-forms #status-checkbox-wrapper .save-draft-text span,
.edit-product-information-form #status-checkbox-wrappers .form-item label,
.edit-bundle-information-form #status-checkbox-wrapper .form-switch span,
.form-switch.form-switch-with-label .form-item :where(label, span) {
    white-space: nowrap;
    font-weight: 500 !important;
}

/*REVERSE*/
:is(.add-products-form) .form-switch:not(.common-switch) .form-item:is(.form-item-status),
.edit-product-information-form #status-checkbox-wrappers .form-item {
    flex-direction: row-reverse;
}

/************************************
SWITCH BUTTON
************************************/
.switch-toggle-btn :is(.form-check, .form-switch, .common-switch) {
    padding: 0 !important;
}

.switch-toggle-btn :is(.form-check, .form-switch, .common-switch) .form-item {
    margin: 0 !important;
    display: flex;
    align-items: center;
    grid-gap: 15px;
}

/*switch*/
.switch-toggle-btn :is(.form-check, .form-switch, .common-switch) .form-item input {
    width: 40px;
    height: 15px;
    border-radius: 0;
    background-color: var(--light-grey);
    border: 0;
    cursor: pointer;
    background-image: none !important;
    margin: 0 !important;
    float: none;
    outline: 0 !important;
    box-shadow: none !important;
    position: relative;
    cursor: pointer;
}

.switch-toggle-btn :is(.form-check, .form-switch, .common-switch) .form-item input::after {
    content: '\f00d';
    font-size: 14px;
    font-family: "Font Awesome 6 Sharp";
    color: var(--text-grey);
    line-height: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 21px;
    height: 21px;
    background-color: var(--white);
    border: 1px solid var(--border-grey);
    position: absolute;
    top: -3px;
    left: 0;
    transition: all 0.3s;
    padding-top: 2px;
}

.switch-toggle-btn :is(.form-check, .form-switch, .common-switch) .form-item input:checked {
    background-color: var(--green);
}

.switch-toggle-btn :is(.form-check, .form-switch, .common-switch) .form-item input:checked::after {
    content: '\f00c';
    border-color: var(--green);
    color: var(--green);
    left: 20px;
}

/*label*/
.switch-toggle-btn :is(.form-check, .form-switch, .common-switch) .form-item label {
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    user-select: none;
    cursor: pointer;
}

/************************************
SQUARE RADIO BUTTON
************************************/
.form-item:is(.form-item-auto-generate-checkbox, .form-item-let-me-create-checkbox, .form-item-require-password-change, .form-item-send-password-email, .form-item-password-options, .add-contact-common-form .form-item-contact-type) input,
.add-contact-common-form fieldset[data-drupal-selector="edit-type"] .form-checkboxes .form-item input,
.add-contact-common-form fieldset[data-drupal-selector="edit-gender"] .form-item input,
.add-contact-common-form div[data-drupal-selector="edit-prefered-contact-method"] .form-item input,
.add-contact-common-form fieldset[data-drupal-selector="edit-main-gender"] .form-item input,
.square-checkbox-group .form-item input,
.form-radios .form-item-bank-location input,
.reset-password-form fieldset[data-drupal-selector="edit-edit-password-options"] .form-radios input,
.form-radios :is(.form-item-contact-type, .form-item-gender) input,
.edit-contact-personal-details fieldset[data-drupal-selector="edit-type"] .form-checkboxes .form-type-checkbox input,
.edit-contact-communication-preference fieldset[data-drupal-selector="edit-prefered-contact-method"] .form-radios .form-item-prefered-contact-method input,
.link-contact-personal-details fieldset[data-drupal-selector="edit-type"] .form-type-checkbox input,
#partnership-accordions-container .radio-checkboxes fieldset[data-drupal-selector="edit-main-gender"] .form-radios .form-item-main-gender input,
#new_partners-wrapper .radio-checkboxes fieldset[data-drupal-selector="edit-new-partner-gender-1"] .form-radios .form-item-new-partner-gender-1 input,
.radio-square-btn .form-radios .form-item input {
    display: none;
}

.form-item:is(.form-item-auto-generate-checkbox, .form-item-let-me-create-checkbox, .form-item-require-password-change, .form-item-send-password-email, .form-item-password-options, .add-contact-common-form .form-item-contact-type) label,
.add-contact-common-form fieldset[data-drupal-selector="edit-type"] .form-checkboxes .form-item label,
.add-contact-common-form fieldset[data-drupal-selector="edit-gender"] .form-item label,
.add-contact-common-form div[data-drupal-selector="edit-prefered-contact-method"] .form-item label,
.add-contact-common-form fieldset[data-drupal-selector="edit-main-gender"] .form-item label,
.square-checkbox-group .form-item label,
.form-radios .form-item-bank-location label,
.reset-password-form fieldset[data-drupal-selector="edit-edit-password-options"] .form-radios label,
.form-radios :is(.form-item-contact-type, .form-item-gender) label,
.edit-contact-personal-details fieldset[data-drupal-selector="edit-type"] .form-checkboxes .form-type-checkbox label,
.edit-contact-communication-preference fieldset[data-drupal-selector="edit-prefered-contact-method"] .form-radios .form-item-prefered-contact-method label,
.link-contact-personal-details fieldset[data-drupal-selector="edit-type"] .form-type-checkbox label,
#partnership-accordions-container .radio-checkboxes fieldset[data-drupal-selector="edit-main-gender"] .form-radios .form-item-main-gender label,
#new_partners-wrapper .radio-checkboxes fieldset[data-drupal-selector="edit-new-partner-gender-1"] .form-radios .form-item-new-partner-gender-1 label,
.radio-square-btn .form-radios .form-item label {
    position: relative;
    padding-left: calc(30px + 15px);
    cursor: pointer;
    user-select: none;
    font-weight: 500 !important;
}

.form-item:is(.form-item-auto-generate-checkbox, .form-item-let-me-create-checkbox, .form-item-require-password-change, .form-item-send-password-email, .form-item-password-options, .add-contact-common-form .form-item-contact-type) label::before,
.add-contact-common-form fieldset[data-drupal-selector="edit-type"] .form-checkboxes .form-item label::before,
.add-contact-common-form fieldset[data-drupal-selector="edit-gender"] .form-item label::before,
.add-contact-common-form div[data-drupal-selector="edit-prefered-contact-method"] .form-item label::before,
.add-contact-common-form fieldset[data-drupal-selector="edit-main-gender"] .form-item label::before,
.square-checkbox-group .form-item label::before,
.form-radios .form-item-bank-location label::before,
.reset-password-form fieldset[data-drupal-selector="edit-edit-password-options"] .form-radios label::before,
.form-radios :is(.form-item-contact-type, .form-item-gender) label::before,
.edit-contact-personal-details fieldset[data-drupal-selector="edit-type"] .form-checkboxes .form-type-checkbox label::before,
.edit-contact-communication-preference fieldset[data-drupal-selector="edit-prefered-contact-method"] .form-radios .form-item-prefered-contact-method label::before,
.link-contact-personal-details fieldset[data-drupal-selector="edit-type"] .form-type-checkbox label::before,
#partnership-accordions-container .radio-checkboxes fieldset[data-drupal-selector="edit-main-gender"] .form-radios .form-item-main-gender label::before,
#new_partners-wrapper .radio-checkboxes fieldset[data-drupal-selector="edit-new-partner-gender-1"] .form-radios .form-item-new-partner-gender-1 label::before,
.radio-square-btn .form-radios .form-item label::before {
    content: '\f111';
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-grey);
    color: var(--light-grey);
    font-size: 12px;
    font-family: "Font Awesome 6 Sharp";
    font-weight: 900;
    background-color: var(--white);
    position: absolute;
    top: -9px;
    left: 0;
}

.form-item:is(.form-item-auto-generate-checkbox, .form-item-let-me-create-checkbox, .form-item-require-password-change, .form-item-send-password-email, .form-item-password-options, .add-contact-common-form .form-item-contact-type) input:checked+label::before,
.add-contact-common-form fieldset[data-drupal-selector="edit-type"] .form-checkboxes .form-item input:checked+label::before,
.add-contact-common-form fieldset[data-drupal-selector="edit-gender"] .form-item input:checked+label::before,
.add-contact-common-form div[data-drupal-selector="edit-prefered-contact-method"] .form-item input:checked+label::before,
.add-contact-common-form fieldset[data-drupal-selector="edit-main-gender"] .form-item input:checked+label::before,
.square-checkbox-group .form-item input:checked+label::before,
.form-radios .form-item-bank-location input:checked+label::before,
.reset-password-form fieldset[data-drupal-selector="edit-edit-password-options"] .form-radios input:checked+label::before,
.form-radios :is(.form-item-contact-type, .form-item-gender) input:checked+label::before,
.edit-contact-personal-details fieldset[data-drupal-selector="edit-type"] .form-checkboxes .form-type-checkbox input:checked+label::before,
.edit-contact-communication-preference fieldset[data-drupal-selector="edit-prefered-contact-method"] .form-radios .form-item-prefered-contact-method input:checked+label::before,
.link-contact-personal-details fieldset[data-drupal-selector="edit-type"] .form-type-checkbox input:checked+label::before,
#partnership-accordions-container .radio-checkboxes fieldset[data-drupal-selector="edit-main-gender"] .form-radios .form-item-main-gender input:checked+label::before,
#new_partners-wrapper .radio-checkboxes fieldset[data-drupal-selector="edit-new-partner-gender-1"] .form-radios .form-item-new-partner-gender-1 input:checked+label::before,
.radio-square-btn .form-radios .form-item input:checked+label::before {
    color: var(--green);
}

/*Inline*/
.radio-square-btn {
    padding-inline: 0 !important;
}

.radio-square-btn-inline .form-radios {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 15px 30px;
}

/************************************
CHECKBOX
************************************/
.reset-password-form .form-item-edit-require-password-change input,
.reset-password-form .form-item-edit-send-password-email input {
    display: none;
}

.reset-password-form .form-item-edit-require-password-change label,
.reset-password-form .form-item-edit-send-password-email label {
    position: relative;
    padding-left: calc(30px + 15px);
    cursor: pointer;
    user-select: none;
    font-weight: 500 !important;
}

.reset-password-form .form-item-edit-require-password-change label::before,
.reset-password-form .form-item-edit-send-password-email label::before {
    content: '\f00c';
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-grey);
    color: var(--white);
    font-size: 19px;
    font-family: "Font Awesome 6 Sharp";
    font-weight: 900;
    position: absolute;
    top: -9px;
    left: 0;
}

.reset-password-form .form-item-edit-require-password-change input:checked+label::before,
.reset-password-form .form-item-edit-send-password-email input:checked+label::before {
    color: var(--green);
}

/************************************
CHECKBOX with checked arrow
************************************/
:is(#branch-diary, .checkbox-with-checked-icons) .form-item {
    display: flex;
    align-items: center;
    grid-gap: 5px 9px;
}

:is(#branch-diary, .checkbox-with-checked-icons) .form-item label {
    font-size: 12px !important;
    font-weight: 500 !important;
}

:is(#branch-diary, .checkbox-with-checked-icons) .form-item input {
    all: unset;
    width: 15px;
    height: 15px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-block: 0;
    border-radius: 0;
    border: 1px solid #C9C8C8 !important;
    box-shadow: unset !important;
    cursor: pointer;
    background-color: var(--white) !important;
    background-image: none !important;
}

:is(#branch-diary, .checkbox-with-checked-icons) .form-item input::after {
    content: '\f00c';
    font-family: "Font Awesome 6 Pro";
    font-size: 10px;
    font-weight: 900;
    color: transparent;
}

:is(#branch-diary, .checkbox-with-checked-icons) .form-item input:checked::after {
    color: var(--green);
}

/************************************
CHECKBOX with checked arrow (NO LABEL)
************************************/
.checkbox-style input[type="checkbox"] {
    all: unset;
    width: 15px;
    height: 15px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-block: 0;
    border-radius: 0;
    border: 1px solid #C9C8C8 !important;
    box-shadow: unset !important;
    cursor: pointer;
    background-color: var(--white) !important;
    background-image: none !important;
}

.checkbox-style input[type="checkbox"]::after {
    content: '\f00c';
    font-family: "Font Awesome 6 Pro";
    font-size: 10px;
    font-weight: 900;
    color: transparent;
}

.checkbox-style input[type="checkbox"]:checked::after {
    color: var(--green);
}

/************************************
autocomplete
************************************/
.ui-autocomplete {
    border: 1px solid var(--green) !important;
    list-style: none;
}

.ui-autocomplete .ui-menu-item a,
.ui-autocomplete .ui-menu-item div.ui-menu-item-wrapper {
    width: 100%;
    display: block;
    padding: 6px 13.3px;
    background: var(--white);
    cursor: pointer;
    font-size: 12px;
    text-decoration: none;
    color: var(--text-grey);
    border: 0 !important;
}

.ui-autocomplete .ui-menu-item a:is(:hover, .ui-state-active, .ui-state-focus),
.ui-autocomplete .ui-menu-item div.ui-menu-item-wrapper:is(:hover, .ui-state-active, .ui-state-focus) {
    background-color: var(--light-grey) !important;
    color: var(--text-grey);
    margin: 0 !important;
}

/************************************
TOOLTIP
************************************/
.tooltip {
    width: auto;
    min-width: 142px;
    max-width: 177px;
    background: #fff;
    border: 1px solid var(--green);
    filter: drop-shadow(4px 6px 8px rgba(0, 0, 0, 0.16));
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    opacity: 0;
    visibility: hidden;
}

.tooltip .tooltip-item:nth-child(1):after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: var(--white);
    border-top: 1px solid var(--green);
    border-right: 1px solid var(--green);
    position: absolute;
    top: -11px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: rotate(-45deg);
    z-index: -1;
}

.tooltip .tooltip-item:hover::after {
    background-color: var(--light-grey);
}

.tooltip .tooltip-item {
    display: block;
    min-height: 30px;
    padding: 0 14px;
    font-weight: 500;
    font-size: 12px;
    line-height: 30px;
    text-align: left;
    color: var(--text-grey);
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.tooltip .tooltip-item a {
    color: var(--text-grey);
    text-decoration: none;
}
.tooltip .tooltip-item a:hover{
    color: var(--text-grey);
}
.tooltip input,
.tooltip input:is(.btn, .button) {
    background-color: transparent !important;
    color: inherit !important;
    border: 0 !important;
    padding: 0 !important;
    width: 100%;
    font-size: inherit !important;
    text-align: left;
}

.tooltip input:is(.remove-social-media) {
    padding-inline: 0 !important;
    font-size: 12px !important;
    line-height: 30px !important;
    text-align: left !important;
    color: var(--text-grey) !important;
}

.tooltip input:is(.remove-social-media):hover {
    background-color: var(--light-grey) !important;
}

.tooltip input:hover,
.search-and-filter-bar .filter-right-buttons .batch-actions-container .product-table .button-wrapper .tooltip .tooltip-item input[type="submit"]:is(.button).apply-button:hover {
    box-shadow: none !important;
    background-color: transparent !important;
}

.tooltip .tooltip-item i {
    font-size: 14px;
    color: var(--green);
    margin-right: 14.7px;
}

.tooltip .tooltip-item:hover {
    background-color: var(--light-grey);
}

.tooltip .tooltip-item:hover i {
    color: var(--text-grey);
}

.tooltip .tooltip-item:hover .trash-icon::before {
    background-image: url("../images/delete-large-grey.png") !important;
}

.tooltip-options-wrap {
    position: relative;
}

.tooltip-options-wrap i {
    font-size: 14px;
    color: var(--green);
}

.tooltip-options-wrap:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

/*INFO ICONS*/
.favicon-wrapper .favicon-tooltip .tooltip-item {
    padding-block: 15px;
    white-space: normal;
    line-height: 18px;
}

.favicon-wrapper .fa-question,
.password-container .fa-question,
.custom-tooltip-container .fa-question {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #C9C8C8;
    font-size: 12px !important;
    color: var(--white) !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/*FAVICON TOLLTIP WIDTH*/
.logo-section .favicon-wrapper .favicon-tooltip {
    width: 178px;
}

/**/
.tooltip-options-wrap .tooltip-item button {
    background-color: transparent;
    border: 0;
    padding: 0 14px;
    margin: 0;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    position: absolute;
    inset: 0;
}

.tooltip-options-wrap {
    position: absolute;
    right: 0;
    top: 10px;
    cursor: pointer;
}

.tooltip-options-wrap .tooltip .tooltip-item {
    position: relative;
}

.tooltip-options-wrap .tooltip .tooltip-item input {
    position: absolute;
    inset: 0;
    margin: 0 !important;
    padding: 0 14px !important;
    background-color: transparent !important;
}

.tooltip-options-wrap .tooltip .tooltip-item input:hover {
    background-color: transparent !important;
}

/*bottom*/
.tooltip.bottom {
    top: unset;
    bottom: calc(100% + 11px);
}

.tooltip.bottom .tooltip-item:nth-child(1):after {
    top: unset;
    bottom: -11px;
    transform: rotate(135deg);
}

/*right*/
.tooltip.right {
    left: unset;
    right: -20px;
    transform: translateX(0);
}

.tooltip.right .tooltip-item:nth-child(1):after {
    left: auto;
    right: 10px;
}

/*table action tooltip*/
.table-tooltip-action-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.table-tooltip-action {
    position: relative;
}

.table-tooltip-action i {
    font-size: 16px;
    color: var(--green);
    cursor: pointer;
}

@media screen and (max-width:1280px) {
    .company-name-cell .tooltip {
        left: unset;
        right: -25px;
        transform: translateX(0);
    }

    .company-name-cell .tooltip .tooltip-item:nth-child(1):after {
        left: auto;
        right: 15px;
    }
}

/************************************
CUSTOM TOOLTIP: INFO
************************************/
.custom-tooltip-container {
    display: inline-block;
    position: relative;
}

.custom-tooltip-container .fa-circle-info {
    color: #C9C8C8;
}

.custom-tooltip-container i {
    cursor: pointer;
}

.custom-tooltip-container .tooltip {
    font-size: 10px !important;
    line-height: 15px;
    color: var(--text-grey);
    display: none;
}

.custom-tooltip-overflow {
    max-height: 300px;
    overflow-y: auto;
}

.custom-tooltip-container:hover .tooltip {
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 10px;
    min-width: 210px;
}

.custom-tooltip-container:hover .tooltip:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: var(--white);
    border-top: 1px solid var(--green);
    border-right: 1px solid var(--green);
    position: absolute;
    top: -11px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: rotate(-45deg);
    z-index: -1;
}

/************************************
TOOLTIP: ADD MORE TABLE 
************************************/
.phone-tooltip {
    width: auto;
    min-width: 115px;
    background: #fff;
    border: 1px solid var(--green);
    filter: drop-shadow(4px 6px 8px rgba(0, 0, 0, 0.16));
    position: absolute !important;
    top: calc(100% + 5px);
    right: -23px;
    transform: unset;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
}

:where(#phones-table-wrapper, #emails-table-wrapper, #home-contact-phones-table, #home-contact-emails-table) td .phone-wrapper:hover .phone-tooltip {
    opacity: 1;
    visibility: visible;
}

.phone-tooltip .fieldset-wrapper:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: var(--white);
    border-top: 1px solid var(--green);
    border-right: 1px solid var(--green);
    position: absolute;
    top: -11px;
    left: auto;
    right: 15px;
    margin: 0 auto;
    transform: rotate(-45deg);
    z-index: -1;
}

.phone-tooltip .fieldset-wrapper:has(input:nth-child(1):hover, label:nth-child(1):hover):hover::after {
    background-color: var(--light-grey);
}

.phone-tooltip .fieldset-wrapper {
    width: 100%;
    display: block !important;
}

.phone-tooltip legend {
    display: none;
}

.phone-tooltip input,
.phone-tooltip input.btn,
.phone-tooltip input.button,
.social-media-tooltip>input:is(.remove-social-media) {
    background-color: transparent !important;
    border: 0 !important;
    width: 100% !important;
    display: block !important;
    padding: 0 14px !important;
    font-weight: normal !important;
    font-size: 12px !important;
    line-height: 30px !important;
    text-align: left !important;
    color: #535354 !important;
    white-space: nowrap;
    margin: 0 !important;
    transition: unset !important;
}

.phone-tooltip .fieldset-wrapper a {
    color: var(--text-grey);
    text-decoration: none;
}

.phone-tooltip .fieldset-wrapper i {
    font-size: 14px;
    color: var(--green);
    margin-right: 14.7px;
}

.phone-tooltip input:hover {
    background-color: var(--light-grey) !important;
}

.phone-tooltip .fieldset-wrapper:hover i {
    color: var(--text-grey);
}

:where(#phones-table-wrapper, #emails-table-wrapper) td .phone-wrapper .phone-tooltip {
    margin: 0 !important;
}

/************************************
TOOLTIP WITH PLUS ICON
************************************/
.add-container {
    position: relative;
}

.add-container .tooltip-links {
    z-index: 99999;
}

.tooltip-links::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 10px);
    white-space: nowrap;
    background-color: var(--white);
    font-size: 12px !important;
    font-weight: 500 !important;
    border: 1px solid var(--green);
    padding: 5px 14px;
    opacity: 0;
    visibility: hidden;
}

.tooltip-links::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: var(--white);
    border-top: 1px solid var(--green);
    border-right: 1px solid var(--green);
    position: absolute;
    top: calc(100% - 0px);
    left: -3px;
    right: 0;
    margin: 0 auto;
    transform: rotate(-45deg);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}

.tooltip-links:hover::before,
.tooltip-links:hover::after {
    opacity: 1;
    visibility: visible;
}

/* PLUS ICON */
.tooltip-links {
    width: 14px;
    height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--green);
    font-size: 10px !important;
    color: var(--green) !important;
    text-decoration: none !important;
    border-radius: 2px;
    position: absolute;
    top: 5px;
    right: var(--col-px);
    z-index: 1;
}

.tooltip-links i {
    color: var(--green) !important;
}

/*RIGHT SIDE*/
.tooltip-links.right::after,
.company-info .format-row .add-container:nth-child(even) .tooltip-links::after,
.company-info .addsocialmedia.add-container .tooltip-links::after,
.format-row .tooltip-links.currencyvalue::after,
.addsocialmedia .tooltip-links.socialmediaCustom::after {
    right: -25px;
}

/*TOOLTIP POSITION*/
.company-info .addsocialmedia.add-container .tooltip-links,
#profile .addsocialmedia.add-container .tooltip-links {
    top: -40px;
}

#profile .addsocialmedia.add-container .tooltip-links {
    right: 0;
}

/************************************
TABLE 
************************************/
:is(table.listing-table, table.user-table, table.company-table, table.contact-table, table.products-table) {
    /* width: 100% !important; */
    border-collapse: collapse;
    table-layout: auto;
}

:is(table.listing-table, table.user-table, table.company-table, table.contact-table, table.products-table) thead th {
    background-color: var(--light-grey) !important;
    font-size: 14px !important;
    color: var(--text-grey) !important;
    font-weight: 600;
    padding-block: 8.5px !important;
    padding-inline: 12px !important;
    border: 1px solid var(--border-grey) !important;
    box-sizing: border-box;
}

:is(table.listing-table, table.user-table, table.company-table, table.contact-table, table.products-table, table.existing-add-edit-conn-table) tbody td {
    background-color: var(--white) !important;
    font-size: 13px !important;
    color: var(--text-grey) !important;
    padding-block: 9px 9px !important;
    padding-inline: 12px !important;
    border: 1px solid var(--border-grey) !important;
    box-sizing: border-box;
}

/************************************
TABLE ICON ACTION
************************************/
.table-icon-actions {
    display: flex;
    grid-gap: 15px 17px;
}

.table-icon-actions i {
    font-size: 19px;
    color: var(--green);
    cursor: pointer;
}

.table-icon-actions i:hover {
    color: var(--text-grey);
}

/************************************
DATA TABLE SORTING ARROW
************************************/
table.dataTable thead .sorting,
table.dataTable thead .sorting_desc {
    background-image: url('../images/down-green.png') !important;
    background-position: top calc(50% + 3.5px / 2) right 10px;
    background-repeat: no-repeat;
}

table.dataTable thead .sorting_asc {
    background-image: url('../images/up-green.png') !important;
    background-position: top calc(50% + 3.5px / 2) right 10px;
}

/************************************
LISTING TABLE TOOLTIP
************************************/
:is(table.user-table, table.contact-table, table.products-table) .company-name-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

:is(table.user-table, table.contact-table, table.products-table) .button-wrapper {
    display: inline-block;
    position: relative;
}

:is(table.user-table, table.contact-table, table.products-table) .button-wrapper>i {
    font-size: 16px;
    color: var(--green);
    cursor: pointer;
}

:is(table.user-table, table.contact-table, table.products-table) .button-wrapper:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

/************************************
MODAL TABLE 
************************************/
:is(#drupal-modal, #drupal-off-canvas) table:not([data-drupal-selector="edit-working-hours"], .ui-datepicker-calendar) thead th {
    background-color: var(--light-grey) !important;
    font-size: 13px !important;
    padding-block: 10px !important;
    padding-inline: 12px !important;
    border: 1px solid var(--border-grey) !important;
    font-weight: 600;
}

:is(#drupal-modal, #drupal-off-canvas) table:not(.ui-datepicker-calendar,.existing-add-edit-conn-table) tbody td {
    background-color: var(--white) !important;
    font-size: 13px !important;
    padding-block: 0 !important;
    padding-inline: 0 !important;
    border: 1px solid var(--border-grey) !important;
}

/*FIELDS*/
:is(#drupal-modal, #drupal-off-canvas) form table:not([data-drupal-selector="edit-working-hours"], .ui-datepicker-calendar) {
    margin-bottom: 0 !important;
}

:is(#drupal-modal, #drupal-off-canvas) form table:not([data-drupal-selector="edit-working-hours"], .ui-datepicker-calendar) .form-item {
    margin: 0 !important;
}

:is(#drupal-modal, #drupal-off-canvas) form table:not([data-drupal-selector="edit-working-hours"], .ui-datepicker-calendar) .form-item :is(.form-control, .select2) {
    margin: 0 !important;
    border: 0 !important;
}

:is(#drupal-modal, #drupal-off-canvas) form table:not([data-drupal-selector="edit-working-hours"], .ui-datepicker-calendar) .form-item .select2-container--default .select2-selection--single {
    border: 0 !important;
}

/*FIELD WITH TOOLTIP*/
:where(#partnership-phones-table-wrapper, #partnership-emails-table-wrapper, #phones-table-wrapper, #emails-table-wrapper, #home-contact-phones-table, #home-contact-emails-table, #emergency-phones-fieldset, #emergency-emails-table, #personal-phones-table, #emails-table, #individual-contact-phones-table, #individual-contact-emails-table) td .form-wrapper:not(.phone-tooltip) {
    position: relative;
    width: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 16px;
}

:where(#partnership-phones-table-wrapper, #partnership-emails-table-wrapper, #phones-table-wrapper, #emails-table-wrapper, #home-contact-phones-table, #home-contact-emails-table, #emergency-phones-fieldset, #emergency-emails-table, #personal-phones-table, #emails-table, #individual-contact-phones-table, #individual-contact-emails-table) td .form-wrapper .form-item:not(.phone-tooltip) {
    flex: 1;
}

:where(#partnership-phones-table-wrapper, #partnership-emails-table-wrapper, #phones-table-wrapper, #emails-table-wrapper, #home-contact-phones-table, #home-contact-emails-table, #emergency-phones-fieldset, #emergency-emails-table, #personal-phones-table, #emails-table, #individual-contact-phones-table, #individual-contact-emails-table) td .phone-wrapper:not(.phone-tooltip) {
    width: 5px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

:where(#partnership-phones-table-wrapper, #partnership-emails-table-wrapper, #phones-table-wrapper, #emails-table-wrapper, #home-contact-phones-table, #home-contact-emails-table, #emergency-phones-fieldset, #emergency-emails-table, #personal-phones-table, #emails-table, #individual-contact-phones-table, #individual-contact-emails-table) td .phone-wrapper:not(.phone-tooltip) i {
    color: var(--green);
}

:where(#partnership-phones-table-wrapper, #partnership-emails-table-wrapper, #phones-table-wrapper, #emails-table-wrapper, #home-contact-phones-table, #home-contact-emails-table, #emergency-phones-fieldset, #emergency-emails-table, #personal-phones-table, #emails-table, #individual-contact-phones-table, #individual-contact-emails-table) td .phone-wrapper:hover .phone-tooltip {
    opacity: 1;
    visibility: visible;
}

/*td styling*/
:is(#drupal-modal, #drupal-off-canvas) form table:is(.product-table) tbody tr td {
    padding-block: 10px !important;
    padding-inline: 12px !important;
}

/************************************
TABLE: TIME 
************************************/
:is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] thead tr th {
    font-size: 12px;
    padding: 5px 6px;
    text-align: center;
    border: 0 !important;
    font-weight: 500;
    white-space: nowrap;
}

:is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] thead tr th:nth-child(1) {
    min-width: 70px;
    text-align: left;
}

:is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] tbody tr td {
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 5px 6px !important;
    text-align: center;
    border: 0 !important;
    vertical-align: middle;
}

:is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] tbody tr td:nth-child(1) {
    text-align: left;
}

:is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] tbody tr td:nth-child(1) b {
    font-weight: 500;
}

/*INPUT*/
:is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] tbody tr td span.cell-na {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: normal !important;
    font-size: 14px !important;
    text-align: center !important;
    color: #535354 !important;
    width: 60px;
    height: 30px !important;
    border: 1px solid #c9c8c8 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

:is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] tr :where(th, td) .form-item {
    margin-block: 0 !important;
}

:is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] tbody tr td input {
    width: 60px;
    height: 30px !important;
    text-align: center !important;
    font-size: 12px !important;
    padding: 6px 5px !important;
}

:is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] tbody tr td input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -moz-appearance: textfield;
}

:is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] tbody tr td input[type="number"]::-webkit-outer-spin-button,
:is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] tbody tr td input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*AGGRED*/
table[data-drupal-selector="edit-working-hours"] #agreed-hours-wrapper tbody tr td input {
    background-color: #F0F0F0;
}

@media screen and (max-width:767px) {
    :is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] thead tr th:nth-child(1) {
        min-width: 55px !important;
    }

    :is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] tbody tr td input {
        width: 40px;
        height: 30px !important;
        text-align: center !important;
        padding-inline: 3px !important;
        font-size: 11px !important;
    }

    :is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] tbody tr td span.cell-na {
        font-size: 11px !important;
        width: 40px;
    }

    :is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] thead tr th {
        font-size: 11px;
        padding: 3px 3px;
    }

    :is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] tbody tr td {
        font-size: 11px !important;
        padding: 2px 2px !important;
    }
}

@media screen and (max-width:469px) {
    :is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] thead tr th {
        font-size: 10px;
    }

    :is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] tbody tr td {
        font-size: 10px !important;
    }

    :is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] tbody tr td input {
        width: 33px;
        padding-inline: 2px !important;
        font-size: 10px !important;
    }

    :is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] tbody tr td span.cell-na {
        font-size: 9px !important;
        width: 33px;
    }

    :is(#drupal-modal, #drupal-off-canvas) table[data-drupal-selector="edit-working-hours"] thead tr th:nth-child(1) {
        min-width: 35px !important;
    }
}

/************************************
ADD ANOTHER BUTTON
************************************/
:is(#drupal-modal, #drupal-off-canvas) .add-another-btn {
    width: 100% !important;
    background-color: rgb(23 159 154 / 4%) !important;
    border: 1px solid var(--border-grey) !important;
    border-top: 0 !important;
    color: var(--text-grey) !important;
    text-align: left !important;
    padding-block: 10px !important;
    padding-inline: 46.5px 12px !important;
    margin: 0 !important;
    background-image: url('../images/plus-green.png');
    background-repeat: no-repeat;
    background-position: center left 13px;
}

/*WIDTH WITH SPACING*/
:is(#drupal-modal, #drupal-off-canvas) .company-info .add-another-btn[id*="edit-add-social-media"],
:is(#drupal-modal, #drupal-off-canvas) .form-add-user-form .add-another-btn.add-another-btn-px,
:is(#drupal-modal, #drupal-off-canvas) .link-contact-personal-details .add-another-btn.add-another-btn-px {
    width: calc(100% - (var(--col-px) * 2)) !important;
    margin-inline: auto !important;
}

/************************************
PROFILE PANEL
************************************/
.profile-select-panel:not(.is-logo-preview-panel) {
    --profile-thumb-width: 108px;
    width: 100%;
    padding: 19px 23px;
    background: var(--thin-grey);
    border: 1px solid var(--border-grey);
    margin-top: 45px;
    display: flex;
}

.profile-select-panel:not(.is-logo-preview-panel):is(.edit-user-profile-panel) {
    flex-direction: row-reverse;
}

.profile-select-panel:not(.is-logo-preview-panel) .image-upload-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--profile-thumb-width) !important;
    height: var(--profile-thumb-width);
    background: #F0F0F0;
    border: 1px dashed var(--border-grey);
    border-radius: 50%;
    margin: 0;
    cursor: pointer;
    position: relative;
}

/* :where(.image-container, .image-upload-container) img{
    max-width: 46px;
    height: auto;
} */
.profile-select-panel:not(.is-logo-preview-panel) :where(.image-container, .image-upload-container) img.preview-image-thumb {
    width: 46px !important;
    max-width: unset;
    height: auto !important;
    object-fit: contain;
    object-position: center;
}

.profile-select-panel:not(.is-logo-preview-panel) :where(.image-container, .image-upload-container) img:is(.preview-selected-image) {
    width: var(--profile-thumb-width) !important;
    height: var(--profile-thumb-width) !important;
    object-fit: cover;
    border-radius: 50%;
}

.profile-select-panel:not(.is-logo-preview-panel) .profile-select-panel-text {
    width: calc(100% - var(--profile-thumb-width)) !important;
    padding-block: 15px 0 !important;
    padding-inline: 43px 0 !important;
}

.profile-select-panel:not(.is-logo-preview-panel) .profile-select-panel-text #dynamic-company-domain {
    margin-top: 10px;
    font-size: 13px;
}

.profile-select-panel #user-upload-image-validation-message {
    width: 250px;
    position: absolute;
    left: 0;
    bottom: -27px;
}

.profile-select-panel:not(.is-logo-preview-panel) .profile-select-panel-text #dynamic-department-name {
    margin-top: 5px;
}

@media screen and (max-width:525px) {
    .profile-select-panel:not(.is-logo-preview-panel) {
        --profile-thumb-width: 90px;
    }

    .profile-select-panel:not(.is-logo-preview-panel) .profile-select-panel-text {
        padding-inline: 15px 0 !important;
    }

    .profile-select-panel:not(.is-logo-preview-panel) .profile-select-panel-text #dynamic-company-domain {
        margin-top: 5px;
    }
}

/************************************
TOOLTIP: IMAGE PREVIEW
************************************/
.profile-select-panel:not(.is-logo-preview-panel) div[id*="ajax-wrapper"] {
    width: auto;
    min-width: 100px;
    min-height: 30px;
    background: #fff;
    border: 1px solid var(--green);
    filter: drop-shadow(4px 6px 8px rgba(0, 0, 0, 0.16));
    position: absolute;
    top: calc(50% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    opacity: 0;
    visibility: hidden;
}

.profile-select-panel:not(.is-logo-preview-panel) .image-upload-container:hover div[id*="ajax-wrapper"] {
    opacity: 1;
    visibility: visible;
}

.profile-select-panel:not(.is-logo-preview-panel) div[id*="ajax-wrapper"] .form-item {
    margin-block: 0 !important;
}

.profile-select-panel:not(.is-logo-preview-panel) div[id*="ajax-wrapper"]::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: var(--white);
    border-top: 1px solid var(--green);
    border-right: 1px solid var(--green);
    position: absolute;
    top: -11px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: rotate(-45deg);
    z-index: -1;
}

.profile-select-panel:not(.is-logo-preview-panel) div[id*="ajax-wrapper"]:has(input:nth-child(1):hover, label:nth-child(1):hover)::after {
    background-color: var(--light-grey);
}

.profile-select-panel:not(.is-logo-preview-panel) div[id*="ajax-wrapper"] .form-item label {
    display: block;
    padding: 0 14px;
    font-weight: normal;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    color: var(--text-grey);
    white-space: nowrap;
    cursor: pointer;
}

.profile-select-panel:not(.is-logo-preview-panel):is(.preview-image-uploaded) div[id*="ajax-wrapper"] label:is([id*="edit-dynamic-company-logo"], [id*="edit-edit-company-logo"]) {
    height: 0;
    overflow: hidden;
}

.profile-select-panel:not(.is-logo-preview-panel) div[id*="ajax-wrapper"] .form-item input {
    display: none;
}

.profile-select-panel:not(.is-logo-preview-panel) div[id*="ajax-wrapper"] .form-item :where(input[name="dynamic_company_logo_remove_button"], input[name="edit_company_logo_remove_button"], input[value="Remove"]) {
    display: block !important;
    width: 100%;
    min-height: 30px;
    background-color: transparent !important;
    color: var(--text-grey) !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    transition: unset !important;
}

.profile-select-panel:not(.is-logo-preview-panel) div[id*="ajax-wrapper"] :where(.alert, .file--image) {
    display: none;
}

#drupal-modal .profile-select-panel:not(.is-logo-preview-panel) div[id*="ajax-wrapper"] .form-item label:hover,
#drupal-modal .profile-select-panel:not(.is-logo-preview-panel) div[id*="ajax-wrapper"] .form-item :where(input[name="dynamic_company_logo_remove_button"], input[name="edit_company_logo_remove_button"], input[value="Remove"]):hover {
    background-color: var(--light-grey) !important;
    color: var(--text-grey) !important;
}

/************************************
INPUT WITH BUTTON
************************************/
.input-with-icon {
    position: relative;
}

.input-with-icon .form-item {
    position: relative;
}

.input-with-icon .form-item input {
    padding-right: calc(40px + 12px);
}

.manual-address-search-custom-btn,
.manual-search-custom-btn {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute !important;
    bottom: 0;
    right: 0;
    color: var(--white);
    font-size: 20px !important;
    background-color: var(--green);
    border: 1px solid var(--green);
}

/************************************
BUTTON ARROW
************************************/
.btn-with-arrow {
    color: var(--green);
}

.btn-with-arrow input {
    padding: 0;
    height: auto;
    font-size: 12px !important;
    font-weight: bold;
    color: var(--green) !important;
    margin-inline: 0;
}

.btn-with-arrow::before {
    content: '\f054';
    font-family: "Font Awesome 6 Pro";
    font-size: 16px;
    margin-right: 9px;
}

.btn-with-arrow:hover,
.btn-with-arrow:hover input {
    color: var(--text-grey) !important;
}

/************************************
MANUALLY BUTTON
************************************/
:where(.address-buttons-container, .user-address-buttons-container, .contact-address-buttons-container, .partnership-contact-address-buttons-container, .manual-address-btn-diff-to-main-apl) {
    position: relative;
    display: inline-flex;
}

:where(.address-buttons-container, .user-address-buttons-container, .contact-address-buttons-container, .partnership-contact-address-buttons-container, .manual-address-btn-diff-to-main-apl, .subsequent-address-fields)::after {
    content: '\f0e0';
    font-family: "Font Awesome 6 Pro";
    font-size: 20px;
    color: var(--green);
    font-weight: 300;
    position: absolute;
    top: 5px;
    left: 11.5px;
}

:where(.address-buttons-container, .user-address-buttons-container, .contact-address-buttons-container, .partnership-contact-address-buttons-container, .manual-address-btn-diff-to-main-apl) input:is(.manual-address-btn, .user-manual-address-btn, [data-drupal-selector="edit-manual-address-button"], .contact-manual-address-btn, .partnership-contact-manual-address-btn),
:where(.address-buttons-container, .user-address-buttons-container, .contact-address-buttons-container, .partnership-contact-address-buttons-container, .manual-address-btn-diff-to-main-apl) input:is(.manual-address-btn, .user-manual-address-btn, [data-drupal-selector="edit-manual-address-button"], .contact-manual-address-btn, .partnership-contact-manual-address-btn):is(.btn, .button) {
    background-color: var(--thin-grey) !important;
    color: var(--text-grey) !important;
    border: 1px solid var(--border-grey) !important;
    padding-block: 10px !important;
    padding-left: 40.5px !important;
    margin-inline: 0 !important;
    font-weight: 500 !important;
}

:where(.address-buttons-container, .user-address-buttons-container) input:is(.edit-search-address-button, .search-address-button),
form.form-add-user-form .address-buttons-container+.search-address-button,
form.form-add-user-form .user-address-buttons-container+.search-office-button,
form.edit-additional-details .address-buttons-container+.search-address-button,
form.edit-additional-details .user-address-buttons-container+.search-office-button,
.add-contact-address-autocomplete-wrap .search-contact-button,
.add-partnership-address-autocomplete-wrap .partnership-search-contact-button {
    display: none !important;
}

/************************************
SELECT
************************************/
#drupal-modal .select2-container {
    width: 100% !important;
}

.select2-container.select2-container--open {
    z-index: 9999;
}

.select2-container--default .select2-selection {
    display: flex;
    border: 1px solid var(--border-grey) !important;
    font-weight: 500;
    font-size: 13px;
    text-align: left;
    color: #535354;
    padding: 3px 13.3px;
    border-radius: 0 !important;
    height: 32px;
    cursor: pointer;
}

.ui-dialog .select2-container--default .select2-selection {
    padding: 5px 13.3px;
    height: 40px;
    border-radius: 0;
}

.select2-container--default .select2-selection ul.select2-selection__rendered:empty {
    display: none !important;
}

.select2-container--default .select2-selection .select2-selection__rendered {
    padding-inline: 0;
    width: calc(100% - 20px);
    line-height: 23px;
}

.ui-dialog .select2-container--default .select2-selection .select2-selection__rendered {
    line-height: 31px;
}

.select2-container--default .select2-selection .select2-search .select2-search__field {
    margin: 0 !important;
}

.select2-container--default .select2-selection .select2-search {
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection .select2-selection__arrow {
    width: 40px !important;
    height: 30px !important;
}

.ui-dialog .select2-container--default .select2-selection .select2-selection__arrow {
    height: 37px !important;
}

.select2-container--default .select2-selection .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection .select2-selection__arrow::after,
.select2-selection--multiple::after {
    content: "\f107";
    width: 40px;
    /* height: 30px; */
    height: calc(100% - 2px);
    font-family: "Font Awesome 6 Pro";
    font-size: 20px;
    font-weight: 300;
    color: var(--white);
    background-color: var(--white);
    /* background-color: transparent; */
    color: var(--green);
    position: absolute;
    right: 1px;
    top: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.ui-dialog .select2-container--default .select2-selection .select2-selection__arrow::after,
.ui-dialog .select2-selection--multiple::after {
    height: 37px;
}

/*DROPDOWN*/
.select2-dropdown:is(.custom-select-dropdown) {
    border: 1px solid var(--border-grey);
    border-radius: 0;
}

.select2-dropdown:is(.custom-select-dropdown) .select2-results__options li {
    padding: 6px 13.3px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
}

.select2-dropdown:is(.custom-select-dropdown) .select2-results__options li:is(:hover, .select2-results__option--highlighted, .select2-results__option--selected) {
    background-color: var(--light-grey) !important;
    color: var(--text-grey) !important;
}

/**************************************
SELECT DROPDOWN WITH CHECKBOX
**************************************/
.sorting-item-dropdown {
    width: 192.76px !important;
    background: #fff !important;
    border: 1px solid #499d98 !important;
    filter: drop-shadow(4px 6px 8px rgba(0, 0, 0, 0.16)) !important;
    border-radius: 0 !important;
}

.sorting-item-dropdown.select2-dropdown--above {
    margin-top: -10px !important;
}

.sorting-item-dropdown.select2-dropdown--below {
    margin-top: 10px !important;
}

.sorting-item-dropdown.select2-dropdown--above:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: #fff;
    border-top: 1px solid #499d98;
    border-right: 1px solid #499d98;
    position: absolute;
    bottom: -11px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: rotate(135deg);
    z-index: -1;
}

.sorting-item-dropdown.select2-dropdown--below:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: #fff;
    border-top: 1px solid #499d98;
    border-right: 1px solid #499d98;
    position: absolute;
    top: -11px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: rotate(-45deg);
    z-index: -1;
}

.sorting-item-dropdown .select2-search--dropdown {
    padding: 11.5px !important;
}

.sorting-item-dropdown .select2-search__field {
    width: 100% !important;
    height: 29px !important;
    background: transparent !important;
    border: 0.5px solid #ddd !important;
    background: #ffffff url(../images/green-search.png) no-repeat calc(100% - 10px) center !important;
    padding-right: 30px !important;
    font-weight: normal !important;
    font-size: 12px !important;
    line-height: 27.31px !important;
    text-align: left !important;
    color: #727272 !important;
    padding: 5px 8.3px;
    cursor: auto;
    outline: 0 !important;
    box-shadow: 0 !important;
}

.sorting-item-dropdown .select2-search__field:focus {
    box-shadow: 0 0 5px rgb(73 157 152 / 15%);
}

.sorting-item-dropdown .select2-results {
    overflow: hidden !important;
}

.sorting-item-dropdown .select2-results>.select2-results__options {
    max-height: 200px !important;
    padding-block: 5px;
    /* overflow-y: auto !important; */
}

.sorting-item-dropdown .select2-results__option {
    font-weight: normal !important;
    font-size: 12px !important;
    line-height: initial !important;
    text-align: left !important;
    color: #535354 !important;
    padding: 5px 11.5px !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.sorting-item-dropdown .select2-results__option.select2-results__option--selected {
    background: #f5f5f5 !important;
    border-top: 0.5px solid #499d98 !important;
    border-bottom: 0.5px solid #499d98 !important;
}

.sorting-item-dropdown .select2-results__option.select2-results__option--selected+.select2-results__option.select2-results__option--selected {
    border-top: 0 !important;
}

.sorting-item-dropdown .select2-results__option.select2-results__option--highlighted {
    background: #dedede;
}

.sorting-item-dropdown .select2-results__option:not(.select2-results__message):before {
    content: "";
    display: inline-block;
    position: relative;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 0.5px solid #ddd;
    margin-right: 8.1px;
}

.sorting-item-dropdown .select2-results__option.select2-results__option--selected:not(.select2-results__message):before {
    content: '\f00c';
    font-size: 11px !important;
    font-family: "Font Awesome 6 Pro";
    color: var(--white);
    background-color: #499d98;
    border: 0.5px solid #499d98;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*MULTIPLE SELECT*/
.select2-selection--multiple ul {
    display: flex !important;
    grid-gap: 5px;
}

.select2-selection--multiple ul li {
    margin: 0 !important;
    border: 1px solid var(--border-grey) !important;
    border-radius: 0 !important;
    background-color: var(--light-grey) !important;
    font-size: 11px;
    color: var(--text-grey) !important;
}

/* .select2-selection--multiple .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 23px;
} */
/**************************************
CK EDITOR
**************************************/
#drupal-modal .ck-editor__main> :is(.ck-editor__editable, .ck-source-editing-area) {
    min-height: 120px;
}

.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,
.ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners {
    background-color: var(--light-grey) !important;
}

.ck.ck-button.ck-on:not(.ck-disabled):hover,
a.ck.ck-button.ck-on:not(.ck-disabled):hover {
    background-color: transparent !important;
}

.ck-toolbar__items .ck.ck-button.ck-on {
    border: 0 !important;
    background-color: transparent !important;
    color: var(--green) !important;
}

/**************************************
TABLE
**************************************/
table .ajax-progress .throbber {
    display: inline-block;
    width: 30px;
    padding: 0;
    margin: 0;
}

table .form-item {
    margin-bottom: 0 !important;
}

/**************************************
CHECKBOX
**************************************/
:is(table.listing-table, table.company-table, table.user-table, table.contact-table, table.products-table) tr :is(th, td):nth-child(1):has(.form-check-input[type=checkbox]) {
    width: 40px !important;
}

:is(table.listing-table, table.company-table, table.user-table, table.contact-table, table.products-table) tr :is(th, td):nth-child(1) .form-item:has(.form-check-input[type=checkbox]) {
    display: flex;
    justify-content: center;
}

:is(table.listing-table, table.company-table, table.user-table, table.contact-table, table.products-table) tr :is(th, td):nth-child(1) .form-check-input[type=checkbox] {
    width: 12px;
    height: 12px;
    margin-block: 4px;
    border-radius: 0;
    border: 1px solid #C9C8C8 !important;
    box-shadow: unset !important;
    cursor: pointer;
    display: block;
    margin-inline: auto !important;
}

:is(table.listing-table, table.company-table, table.user-table, table.contact-table, table.products-table) tr :is(th, td):nth-child(1) .form-check-input[type=checkbox]:focus {
    box-shadow: unset !important;
}

:is(table.listing-table, table.company-table, table.user-table, table.contact-table, table.products-table) tr :is(th, td):nth-child(1) .form-check-input[type=checkbox]:checked {
    border: 1px solid var(--green) !important;
    background-color: var(--green);
}

/************************************
PASSWORD LENGTH
************************************/
#strengthIndicator #strengthText {
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    grid-gap: 0 14px;
}

#strengthIndicator #strengthText i {
    font-size: 26px;
    font-weight: 300;
}

#drupal-modal table tbody .product-row td {
    border: none !important;
}

/************************************
CUSTOM RANGE SLIDER
************************************/
.custom-range-slider.ui-slider {
    height: 12px;
    border: 1px solid var(--border-grey);
    box-shadow: inset 2px 2px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
}

.custom-range-slider.ui-slider .ui-slider-range {
    height: 100%;
    min-height: unset !important;
    padding: 0 !important;
    background-color: #EAEAEA !important;
}

.custom-range-slider.ui-slider .ui-slider-handle {
    display: block;
    width: 24px;
    height: 24px;
    border: 7px solid #CBCBCB;
    border-radius: 50%;
    margin-left: -5px;
    background-color: var(--green);
    cursor: pointer;
}

/************************************
CUSTOM LABEL
************************************/
.custom-fieldset-label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 17px;
}

/************************************
ICON INPUT BUTTON
************************************/
.icon-input-btn {
    border: 1px solid var(--border-grey);
    text-align: center;
    position: relative;
    cursor: pointer;
    padding: 16px 15px;
    background-color: var(--white);
}

.icon-input-btn i {
    display: block;
    font-size: 34px;
    color: var(--green);
}

.icon-input-btn span {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-top: 14px;
}

.icon-input-btn input {
    position: absolute;
    inset: 0;
    opacity: 0 !important;
}

.icon-input-btn:is(.active, :hover) {
    background-color: var(--green);
    color: var(--white);
}

.icon-input-btn:is(.active, :hover) i {
    color: var(--white);
}

/*Group*/
.icon-input-btn-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px 30px;
}

@media screen and (max-width:767px) {
    .icon-input-btn {
        padding: 10px 10px;
    }

    .icon-input-btn i {
        font-size: 22px;
    }

    .icon-input-btn span {
        margin-top: 5px;
        font-size: 10px;
    }

    /*Group*/
    .icon-input-btn-group {
        grid-gap: 15px 15px;
    }
}

.subsequent-address-fields .manual-address-btn {
    background-color: var(--thin-grey) !important;
    color: var(--text-grey) !important;
    border: 1px solid var(--border-grey) !important;
    padding-block: 10px !important;
    padding-left: 40.5px !important;
    margin-inline: 0 !important;
    font-weight: 500 !important;

}

.link-company-profile-css {
    --profile-thumb-width: 108px;
    width: 100%;
    padding: 19px 23px;
    background: var(--thin-grey);
    border: 1px solid var(--border-grey);
    margin-top: 45px;

}

.form-link-company:not(.common-switch) .form-item {
    display: block !important;
}


/*  */

:is(table.listing-table, table.user-table, table.company-table, table.contact-table, table.products-table, table.existing-add-edit-conn-table) tbody td {
    background-color: var(--white) !important;
    font-size: 13px !important;
    color: var(--text-grey) !important;
    padding-block: 9px 9px !important;
    padding-inline: 12px !important;
    border: 1px solid var(--border-grey) !important;
    box-sizing: border-box;
}

:is(table.listing-table, table.user-table, table.company-table, table.contact-table, table.products-table, table.existing-add-edit-conn-table) tbody td .button-wrapper>i {
    font-size: 23px;
    font-weight: 300;
    color: var(--green);
    cursor: pointer;
    line-height: 10px;
    vertical-align: middle;
}