/**
 * Site CSS variables
 */
:root {
    --site-success-color: #3ab44a;
    --site-warning-color: #e7b416;
    --site-error-color: #cc3333;
    --site-skip-color: gray;
    --site-button-text-color: var(--pico-color);
    --site-icon-circle-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7zM8 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8v0z'%3E%3C/path%3E%3Cpath d='M7.1 11.7l-4.2-4.1 1.4-1.4 2.8 2.7 4.9-4.9 1.4 1.4z'%3E%3C/path%3E%3C/svg%3E");
    --site-icon-circle-exclamation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7zM8 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8v0z'%3E%3C/path%3E%3Cpath d='M7 3h2v7h-2v-7z'%3E%3C/path%3E%3Cpath d='M7 11h2v2h-2v-2z'%3E%3C/path%3E%3C/svg%3E");
    --site-icon-circle-x-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7zM8 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8v0z'%3E%3C/path%3E%3Cpath d='M12.2 10.8l-2.8-2.8 2.8-2.8-1.4-1.4-2.8 2.8-2.8-2.8-1.4 1.4 2.8 2.8-2.8 2.8 1.4 1.4 2.8-2.8 2.8 2.8z'%3E%3C/path%3E%3C/svg%3E");
    --spacing-none: calc(var(--pico-typography-spacing-vertical) * 0);
    --spacing-sm: calc(var(--pico-typography-spacing-vertical) * 0.25);
    --color-success-container: #d3e8d3;
    --color-success-border: #59a859;
    --color-error-container: #fadada;
    --color-error-border: #ee7474;
    --color-warning-container: #ffedcc;
    --color-warning-border: #ffbc40;
    --icon-spacing: var(--spacing-sm);
    --color-spf-node-container-border: #969696;
    /* Grid spacing variables */
    --grid-gap: 10px;
    --grid-padding: calc(var(--pico-spacing) * 0.25);
    --grid-margin: 0.75rem;
    /* Breakpoint */
    --mobile-breakpoint: 400px;
    --site-primary-border-color: #646b79;
}
    /**
 * End of site CSS variables
 */

    :root:not([data-theme=dark]), [data-theme=light] {
        --pico-primary-border: var(--site-primary-border-color);
    }

[data-theme=dark] {
    --color-success-container: #163316;
    --color-warning-container: #7b5c23;
    --color-error-container: #6d1b1b;
    --pico-primary-border: var(--site-primary-border-color);
}

/**
 * Svg icons
 */
span.svgicon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

    span.svgicon.circle-check {
        -webkit-mask: var(--site-icon-circle-check);
        mask: var(--site-icon-circle-check);
        mask-position: center;
        mask-size: 1em auto;
        mask-repeat: no-repeat;
    }

    span.svgicon.circle-x-mark {
        -webkit-mask: var(--site-icon-circle-x-mark);
        mask: var(--site-icon-circle-x-mark);
        mask-position: center;
        mask-size: 1em auto;
        mask-repeat: no-repeat;
    }

    span.svgicon.circle-exclamation {
        -webkit-mask: var(--site-icon-circle-exclamation);
        mask: var(--site-icon-circle-exclamation);
        mask-position: center;
        mask-size: 1em auto;
        mask-repeat: no-repeat;
    }
/**
 * End of svg icons
 */


/**
 * SHARED styles
 */
input[type=submit] {
    max-width: 150px;
    color: var(--site-button-text-color);
}

pointer {
    cursor: pointer !important;
}

button {
    max-width: 100px;
    max-height: 90%;
}

    button:hover {
        background-color: var(--pico-primary-hover-background);
    }

#loading-message, #email-loading-message, .child-node {
    display: none;
}

#expand-btn {
    max-width: 100%;
}

#collapse-btn {
    max-width: 100%;
}

#inspectButton {
    max-width: none;
    color: var(--site-button-text-color);
}

.check-container, .mini-domain-check-result {
    --pico-h5-color: var(--pico-color);
    --pico-h3-color: var(--pico-color);
    --pico-h1-color: var(--pico-color);
}

h5, h6 {
    margin-bottom: 0px;
}

    h5 .icon-info-sign {
        color: #326acc;
    }

    h5:not(:last-child) {
        margin-bottom: var(--pico-typography-spacing-vertical);
    }

.copy-txt {
    overflow-x: auto;
}

.ul-margin {
    margin-left: calc(var(--pico-spacing) * 2);
}

.icon-button {
    background: none;
    border: none;
    outline: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.1s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

    .icon-button:hover {
        box-shadow: 0 0 0 10px var(--pico-primary-hover);
        background-color: var(--pico-primary-hover);
    }

        .icon-button:hover svg {
            color: white;
        }

    .icon-button svg {
        color: gray;
        width: 40px;
        height: 40px;
    }

    /* Click feedback */
    .icon-button:active {
        box-shadow: 0 0 0 5px var(--pico-primary-focus); /* Shadow reduces */
        background-color: var(--pico-primary-focus); /* Active state background color */
    }

    .icon-button:focus {
        --pico-box-shadow: none;
    }

/*DMARC/DKIM Table*/

.tag-row {
    width: 90px;
    vertical-align: top;
}

.record-value-column {
    width: 380px;
    text-align: left;
    vertical-align: top;
    max-width: 380px;
}

th {
    border-color: var(--pico-primary-border);
}

/*Containers*/
.container-base {
    border: var(--pico-border-width) solid var(--pico-primary-border);
    border-radius: var(--pico-border-radius);
    padding: var(--pico-spacing);
}

    .container-base:not(:last-child) {
        margin-bottom: var(--pico-spacing);
    }

.valid-container {
    background-color: var(--color-success-container);
    border-color: var(--site-primary-border-color);
}

    .valid-container h5 svg {
        color: var(--site-success-color);
        width: 35px;
        height: 35px;
        margin-right: 10px;
    }

    .valid-container h5 {
        display: flex;
        align-items: center;
    }

        .valid-container h5 .error-svg {
            color: var(--site-error-color);
        }

        .valid-container h5 i .warning-svg {
            color: var(--site-warning-color);
        }

.error-container {
    background-color: var(--color-error-container);
    border-color: var(--site-primary-border-color);
}

    .error-container h5 {
        display: flex;
        align-items: center;
    }

        .error-container h5 svg,
        .error-container p svg {
            color: var(--site-error-color);
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }

        .error-container h5 .ok-svg {
            color: var(--site-success-color);
        }

        .error-container h5 .warning-svg {
            color: var(--site-warning-color);
        }

.warning-container {
    background-color: var(--color-warning-container);
    border-color: var(--site-primary-border-color);
}

    .warning-container p,
    .error-container p {
        color: var(--pico-color);
        font-weight: bold;
        margin-bottom: var(--spacing-none);
        display: flex;
        align-items: center;
    }

        .warning-container p svg {
            color: var(--site-warning-color);
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }

    .warning-container ul,
    .error-container ul {
        margin-bottom: var(--spacing-none);
    }

/*Container icons*/
[class*="-container"] h5 i,
[class*="-container"] p i {
    margin-right: var(--icon-spacing);
}

/* Panel container */
.panel-container {
    border: var(--pico-border-width) solid var(--pico-primary-border);
    border-radius: var(--pico-border-radius);
    margin-bottom: var(--pico-spacing);
}

.panel-title-container {
    background-color: var(--pico-accordion-border-color);
    padding: var(--pico-spacing);
}

/* Panel titles */
[class^="panel-title-"] {
    margin-bottom: var(--spacing-none);
    display: flex;
    align-items: center;
}

    [class^="panel-title-"] svg {
        margin-right: var(--icon-spacing);
    }


.panel-title-success svg {
    color: var(--site-success-color);
    width: 25px;
    height: 25px;
}

.panel-title-warning svg {
    color: var(--site-warning-color);
    width: 25px;
    height: 25px;
}

.panel-title-error svg {
    color: var(--site-error-color);
    width: 30px;
    height: 30px;
}

.panel-content-container {
    padding: var(--pico-spacing);
}

/* Record syntax */
.record-syntax-container {
    background-color: var(--color-success-container);
    border-color: var(--site-primary-border-color);
}

.record-syntax-container-error {
    background-color: var(--color-error-container);
    border-color: var(--site-primary-border-color);
}

    .record-syntax-container p,
    .record-syntax-container-error p {
        margin-bottom: var(--spacing-none);
        color: var(--pico-color);
        font-weight: bold;
    }

/*Grid Layout Styles */
.grid-base {
    display: grid;
    grid-template-columns: 9fr 0.6fr;
    align-items: center;
    gap: var(--grid-gap);
    padding: var(--grid-padding);
}

    .grid-base:not(:last-child) {
        margin-bottom: var(--grid-margin);
    }

/**
 * End of SHARED styles
 */


/**
 * SPF styles
 */

.spf-group-grid {
    grid-template-columns: 0.1fr 3fr;
}

.spf-record-title-grid {
    grid-template-columns: 1fr 2fr;
}

.txt-record-content-grid {
    grid-template-columns: 9fr 1fr;
}

.a-record-grid {
    grid-template-columns: 1fr;
}

.ip-range-grid {
    grid-template-columns: 4fr 1fr 5fr;
}

.txt-record-grid {
    grid-template-columns: 0.2fr 10fr;
}

.spf-txt-svg-success {
    color: var(--site-success-color);
}

.spf-txt-svg-warning {
    color: var(--site-warning-color);
}

.spf-txt-svg-error {
    color: var(--site-error-color);
}

.circle {
    width: 40px;
    height: 40px;
    background-color: #808080;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.chevron-down {
    display: none;
}

.toggle-spf-container {
    display: flex;
    justify-content: right;
}

.error-circle {
    background-color: var(--site-error-color);
}

.spf-node-container {
    border: var(--pico-border-width) solid var(--pico-primary-border);
    border-radius: var(--pico-border-radius);
    padding: calc(var(--pico-spacing)* 0.5);
    background-color: var(--pico-background-color);
}

.spf-child-node-margin {
    margin-left: var(--pico-spacing);
}

.spf-record-title-container {
    background-color: var(--pico-accordion-border-color);
}

.a-record-container {
    margin-left: calc(var(--pico-spacing)* 10);
    margin-bottom: var(--pico-spacing);
}

.mx-record-container {
    margin-left: calc(var(--pico-spacing)* 10);
    margin-bottom: var(--pico-spacing);
}

.active-btn {
    box-shadow: 0 0 0 3px var(--pico-secondary-hover-border);
    background-color: var(--pico-secondary-hover-background);
    border-color: var(--pico-secondary-border);
}

.chip {
    padding: 5px 10px;
    background-color: var(--pico-secondary-background);
    color: white;
    border-radius: 25px;
    display: inline-block;
}

    .chip:hover {
        background-color: var(--pico-secondary-hover-background);
    }

.duplicate-netblocks-container {
    border: var(--pico-border-width) solid var(--pico-primary-border);
    border-radius: var(--pico-border-radius);
    margin: var(--pico-spacing);
}

.duplicate-netblocks-title-container {
    background-color: var(--pico-accordion-border-color);
    padding: calc(var(--pico-spacing)* 0.5);
    font-weight: bold;
}

.duplicate-netblocks-table-container {
    max-height: 300px;
}

.duplicate-netblocks-table {
    width: 100%;
    margin-bottom: 0px;
    border-collapse: collapse;
    table-layout: fixed;
    overflow-y: scroll;
    max-height: 100px;
    overflow-y: auto;
}

th, td {
    border: 1px solid var(--pico-primary-border);
    text-align: left;
    padding: 8px;
}

table.tags tbody tr th, table.tags tbody tr td {
    vertical-align: top
}

.txt-record-grid i.icon-ok-circle.success {
    color: var(--site-success-color);
}

.txt-record-grid i.icon-ok-circle.warning {
    color: var(--site-warning-color);
}

.txt-record-grid i.icon-exclamation-sign {
    color: var(--site-error-color);
}

/**
 * End of SPF styles
 */

/**
 * Domain mini check styles
 */

.container-mini {
    padding-block: 0 !important;
}

.icon-header-container-mini {
    display: inline-grid;
    grid-template-columns: 0.2fr 2fr;
    gap: var(--grid-gap);
}

.domain-check-result-summary-mini {
    @extend .domain-check-result-summary;
    width: 100%;
    display: block !important;
    padding: var(--pico-spacing);
    border-radius: var(--pico-border-radius);
}

.grid-mini {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: center;
    gap: var(--grid-gap);
}

.summary-content-mini {
    text-align: left !important;
}

.summary-icon-mini {
    align-content: center;
}

.get-started-link-mini {
    width: 100%;
    color: var(--site-button-text-color);
}

.mini-svg {
    width: auto !important;
    height: auto !important;
}

.domain-check-tiles .tile-mini {
    margin-bottom: 0px !important;
}

.tile-mini {
    cursor: pointer;
}

    .tile-mini:hover {
        background-color: var(--pico-primary-hover-background);
    }

/**
 * End of Domain mini check styles
 */

/**
 * Domain check styles
 */
.domain-check-result-summary {
    width: 100%;
    display: inline-grid;
    grid-template-columns: 84px auto;
    padding: var(--pico-spacing);
    border-radius: var(--pico-border-radius);
    margin-bottom: var(--pico-spacing);
}

    .domain-check-result-summary.success {
        border: 3px solid var(--site-success-color);
        color: var(--site-success-color);
    }

    .domain-check-result-summary.warning {
        border: 3px solid var(--site-warning-color);
        color: var(--site-warning-color);
    }

    .domain-check-result-summary.error {
        border: 3px solid var(--site-error-color);
        color: var(--site-error-color);
    }

    .domain-check-result-summary .summary-icon {
        text-align: center;
    }

        .domain-check-result-summary .summary-icon svg {
            width: 80px;
            height: 80px;
        }

    .domain-check-result-summary.success .summary-icon svg {
        color: var(--site-success-color);
    }

    .domain-check-result-summary.warning .summary-icon svg {
        color: var(--site-warning-color);
    }

    .domain-check-result-summary.error .summary-icon svg {
        color: var(--site-error-color);
    }

    .domain-check-result-summary .summary-content {
        text-align: center;
    }

    .domain-check-result-summary .summary-content-header {
        font-size: 1.25em;
        margin-bottom: 10px;
        font-weight: bold;
    }

    .domain-check-result-summary .summary-content-main {
        margin-bottom: 10px;
    }

    .domain-check-result-summary .summary-content-footer {
    }

.domain-check-tiles {
    padding-top: var(--pico-spacing);
}

    .domain-check-tiles .dynamic-link {
        cursor: pointer;
    }

    .domain-check-tiles .tile {
        border: 3px solid var(--pico-primary-border);
        border-radius: var(--pico-border-radius);
        padding: var(--pico-spacing);
        margin-bottom: var(--pico-spacing);
    }

    .domain-check-tiles .tile-header {
        text-align: center;
        margin-bottom: var(--pico-spacing);
    }

    .domain-check-tiles .tile.success .tile-header h1 span.svgicon {
        background-color: var(--site-success-color);
    }

    .domain-check-tiles .tile.warning .tile-header h1 span.svgicon {
        background-color: var(--site-warning-color);
    }

    .domain-check-tiles .tile.error .tile-header h1 span.svgicon {
        background-color: var(--site-error-color);
    }

    .domain-check-tiles .tile.skip .tile-header h1 span.svgicon {
        background-color: var(--site-skip-color);
    }

    .domain-check-tiles .tile-content {
        font-size: 0.95em;
        color: var(--pico-color);
        text-align: center;
    }

#get-started-link {
    color: var(--site-button-text-color);
}

/*
* End of domain check styles
**/

/**
 * Micro Checkers
 */

.container-micro {
    padding-block: 0 !important;
}

.micro-checker-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

    .micro-checker-link:focus .micro-checker {
        background-color: var(--pico-primary-hover-background);
    }

    /*override pico*/
    .micro-checker-link:where(a:not([role=button])) {
        --pico-color: inherit;
        --pico-background-color: initial;
        --pico-underline: none;
    }

    .micro-checker-link:where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
        --pico-color: inherit !important;
        --pico-underline: none !important;
        --pico-text-decoration: none !important;
    }

    .micro-checker-link:hover:where(a:not([role=button])) .micro-checker {
        background-color: var(--pico-primary-hover-background);
    }

.micro-checker {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--pico-background-color);
    width: 80px;
    height: 80px;
    text-align: center;
    transition: background-color 0.2s;
}

.micro-checker-border {
    border: 1px solid var(--site-success-color);
}

.micro-checker-border-error {
    border-color: var(--site-error-color);
}

.micro-checker-border-warning {
    border-color: var(--site-warning-color);
}

.micro-checker svg {
    width: 40px;
    height: 40px;
    fill: var(--site-success-color);
    margin-bottom: 5px;
}

.micro-checker-error svg {
    fill: var(--site-error-color);
}

.micro-checker-warning svg {
    fill: var(--site-warning-color);
}

.micro-checker img {
    width: 40px;
    height: 40px;
    fill: var(--site-success-color);
    margin-bottom: 5px;
}

.micro-check-label {
    font-size: 14px;
    font-weight: bold;
    color: var(--pico-color);
}

/**
 * End of Micro Checkers
 */
/**
 * BIMI check styles
 */
.bimi-logo {
    width: 64px;
    margin: 0 auto;
    height: 64px;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.logo-square {
    border-radius: 12px;
}

.logo-squircle {
    border-radius: 30%;
}

.card {
    padding: var(--pico-spacing);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.logo-grid {
    grid-template-columns: 1fr 5fr;
}

.logo-container {
    min-width: min-content;
}

.bg-light {
    background-color: #f8f9fa !important;
}

.bg-dark {
    background-color: #343a40 !important;
}

.error-txt {
    color: var(--site-error-color);
}

.hidden-vmc {
    display: none;
}

.vmc-toggle {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
    margin-bottom: var(--pico-spacing);
}

.vmc-table-container {
    text-align: center;
    margin-bottom: var(--pico-spacing);
}

.inline-logo {
    width: 60px;
}

.inline-browser-logo {
    width: 80px;
}

.phone {
    position: relative;
    width: 100%;
    max-width: 581px;
    margin: 0 auto;
}

.browser {
    position: relative;
    width: 100%;
    margin: 0 auto;
    max-width: 900px
}

.phone div.logo-placement {
    position: absolute;
}

.browser div.browser-logo-placement {
    position: absolute;
}

.phone-bg {
    max-height: 500px;
}

.browser-bg {
    max-height: 900px;
}

.phone img.inline-logo {
    border-radius: 50%;
    background-color: white;
}

.browser img.inline-browser-logo {
    border-radius: 50%;
    background-color: white;
}

.phone div.text-placement {
    position: absolute;
}

.browser div.browser-text-placement {
    position: absolute;
}

.browser-subject {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #373c44;
}

.phone-subject {
    margin-bottom: 0px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #373c44;
}

.phone-title {
    margin-bottom: 0px;
    font-weight: bold;
    font-size: medium;
    color: #373c44;
}

.phone-text {
    margin-bottom: 0px;
    font-size: medium;
}

.toggle-container {
    display: flex;
    justify-content: center;
}

#phoneDark {
    display: none;
}

#browserDark {
    display: none;
}

.tile-title {
    margin-bottom: 0px;
}

.raw-data-grid {
    grid-template-columns: 1fr 0.1fr;
}

.raw-data-title-grid {
    grid-template-columns: 9fr 0.4fr;
    gap: 0px;
    padding: var(--pico-spacing) !important;
    margin-bottom: var(--spacing-none) !important;
}

.hidden-raw-data {
    display: none;
}

.shape-heading {
    text-align: center;
}

/**
 * End of BIMI check styles
 */

/**
 * Email Pdf Styles
 */

/*#send-email-result{
    margin-bottom: var(--pico-spacing);
}*/

#send-email-success {
    margin-bottom: var(--pico-spacing);
    display: none;
}

#send-email-error {
    margin-bottom: var(--pico-spacing);
    display: none;
}

#send-email-validation {
    margin-bottom: var(--pico-spacing);
    display: none;
}

#send-email-too-many-requests {
    margin-bottom: var(--pico-spacing);
    display: none;
}

.email-pdf-fieldset {
    margin-bottom: 0 !important;
}

/**
 * End of Email Pdf Styles
 */
/**
 * Media styles
 */
@media (max-width: 750px) {
    .a-record-container {
        margin-left: calc(var(--pico-spacing)* 5);
        margin-bottom: var(--pico-spacing);
    }

    .record-value-column {
        width: 250px;
        text-align: left;
        vertical-align: top;
        max-width: 250px;
    }

    .mx-record-container {
        margin-left: calc(var(--pico-spacing)* 5);
        margin-bottom: var(--pico-spacing);
    }

    .txt-record-grid {
        grid-template-columns: 1fr 10fr;
    }

    .valid-container h5 {
        display: block;
    }

    .overflow-txt {
        overflow-x: auto;
    }
}

@media (max-width: 500px) {
    .a-record-container {
        margin-left: 0;
        margin-bottom: var(--pico-spacing);
    }

    .mx-record-container {
        margin-left: 0;
        margin-bottom: var(--pico-spacing);
    }

    .txt-record-content-grid {
        grid-template-columns: 8fr 2fr;
    }

    .logo-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 400px) {
    .error-container h5 {
        display: block;
    }

    .warning-container p,
    .error-container p {
        display: block;
    }

    [class^="panel-title-"] {
        display: block;
    }

    .spf-group-grid {
        grid-template-columns: none;
        display: block;
    }

    .spf-record-title-grid {
        grid-template-columns: 1fr;
    }

    .toggle-spf-container {
        justify-content: center;
    }
}

@media(max-width: 350px) {
    .ul-margin {
        margin-left: 0;
    }
}

/**
 * End of Media styles
 */