:root{
    --card-body-padding-x: 26px;
    /*
    --faq-box-padding-top: 10px;
    --faq-box-padding-bottom: 10px;
    --faq-box-padding-x: 10px;
     */
    /* ~ same values */
    --faq-box-padding-top: 0.835rem;
    --faq-box-padding-bottom: 0.835rem;
    --faq-box-padding-x: 0.835rem;
    /* graphs */
    /* --link-score-chart-size: 121px; */
    --donut-chart-size: 280px;
    --donut-chart-competitor-size: 236px;
    --donut-chart-height-ratio: 0.737;

    --pagespeed-chart-size: 150px;
    --pagespeed-chart-competitor-size: 120px;
}
.wrapper-mobile .keywords,
.wrapper-mobile .btn-show-images,
.wrapper-mobile .btn-hide-images,
.wrapper-mobile .field-on-page-links .task-list,
.wrapper-mobile .btn-show-uimobile,
.wrapper-mobile .btn-hide-uimobile,
.wrapper-mobile .btn-show-seo,
.wrapper-mobile .btn-hide-seo,
.wrapper-mobile .btn-show-performance,
.wrapper-mobile .btn-hide-performance,
.wrapper-mobile .btn-show-subpagesmore,
.wrapper-mobile .btn-hide-subpagesmore,
.wrapper-mobile .images {
    display: none;
}
.wrapper-mobile .seo,
.wrapper-mobile .performance,
.wrapper-mobile .subpagesmore,
.wrapper-mobile .uimobile {
    display: block;
}

.app-header {
    background-color: var(--bs-app-header-minimize-bg-color);
    box-shadow: var(--bs-app-header-minimize-box-shadow);
}

.card .card-body {
    padding-left: var(--card-body-padding-x);
    padding-right: var(--card-body-padding-x);
}

.report-wrapper .card .card-body {
    --card-body-padding-x: 15px;
}

.report-wrapper .card .card-header {
    min-height: 67px;
}

@media (max-width: 540px) {
    .app-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

main, span, ol, ul, pre, div {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-scrollbar-color) transparent;
}

.lh-1_65 {
    line-height: 1.65;
}

table thead {
    color: var(--bs-text-gray-500) !important;
    font-size: .95rem;
    font-weight: 600;
    text-transform: uppercase;
    vertical-align: top;
}

table tbody {
    color: var(--bs-text-gray-600) !important;
    font-weight: 500;
}

.table:not(.table-bordered) tr:first-child, .table:not(.table-bordered) th:first-child, .table:not(.table-bordered) td:first-child {
    padding-left: 0.75rem;
}
.table:not(.table-bordered) tr:last-child, .table:not(.table-bordered) th:last-child, .table:not(.table-bordered) td:last-child {
    padding-right: 0.75rem;
}

.table > thead > tr > th {
    vertical-align: top;
}

.table td .table-icon {
    max-height: 16px;
}

#radar_chart .apexcharts-canvas svg:not(:root) {
    overflow: visible !important;
}

body .menu-item .menu-link {
    padding: 0.5rem 1rem;
}

body .menu-item .menu-link {
    padding: 0.5rem 1rem;
}
.custom-tooltip p {
    text-align: left;
}

.custom-tooltip p:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

.hidden, .hidden-web {
    display: none;
}

.activity-item img {
    width: 76px;
}

.item-image {
    width: 64px;
    height: 64px;
    background-size: contain !important;
    position: relative;
}

.item-image-social {
    width: 100px;
    height: 100px;
    background-size: contain !important;
}

.screenshot {
    height: 485px;
    margin-top: 30px;
    position: relative;
    width: 250px;
}
.screenshot-img-container {
    position: absolute;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
}

.screenshot.desktop {
    background: url(/img/desktop.png) no-repeat;
    height: 220px;
}
.screenshot.desktop .screenshot-img-container {
    width: 181px;
    height: 121px;
    clip: rect(0,181px,121px,0);
    top: 45px;
    left: 32px;
}

.col-screenshot-mobile {
    margin-left: 5%;
    margin-right: 5%;
}

.screenshot.mobile {
    background: url(/img/mobile.png) no-repeat;
    background-size: cover;
    height: 485px;
}

.screenshot.mobile .screenshot-img-container {
    width: 90%;
    height: 80%;
    top: 10%;
    left: 5%;
    background-size: contain;
}

.screenshot.tablet {
    background: url(/img/tablet.png) no-repeat;
    background-size: cover;
    height: 485px;

    width: 354px;
}
.screenshot.tablet .screenshot-img-container {
    width: 88%;
    height: 88%;
    top: 6%;
    left: 6%;
}

@media (min-width: 720px) and (max-width: 1130px) {
    .report-sidebar .screenshot {
        zoom: 0.8;
        -moz-transform: scale(0.8);
        -moz-transform-origin: left top;
    }
}

.faq-box .badge {
    white-space: wrap;
    text-align: start;
}
.overflow-ellipsis .badge {
    white-space: nowrap;
    overflow-wrap: anywhere;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.competitor-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.faq-box canvas, .faq-box .canvas-label {
    zoom: 1;
}

@media (max-width: 540px) {
    .report-sidebar .screenshot {
        zoom: 0.6;
        -moz-transform: scale(0.6);
        -moz-transform-origin: left top;
    }

    .faq-box canvas, .faq-box .canvas-label {
        zoom: 0.93;
    }
}

@media (max-width: 370px) {
    .faq-box canvas, .faq-box .canvas-label {
        zoom: 0.85;
    }
}

.append2 {
    margin-top: 20px;
}

.field-contentCount .append2 {
    margin-top: 11px;
}

.competitor .append2,
.competitor .check-badge {
    display: none;
}
.competitor .activity-item {
    width: 98px;
}
.competitor .item-image {
    width: 32px;
    height: 32px;
}
.competitor .value-item {
    font-size: 16px;
}
.competitor .title-item {
    font-size: 0.9em;
}

.competitor .screenshot.mobile {
    height: 314px;
    width: 162px;
}

.competitor .screenshot.tablet {
    height: 314px;
    width: 230px;
}

.competitor .rendering-images .field-value-table {
    margin-left: 12px;
}

.rendering-images-container + .check-info{
    margin-top: 30px;
}

.faq-box.competitor.field-hasGzip .charts .row,
#speedchart-competitor, #sizechart-competitor,
.competitor-charts-container {
    width: 90%;
}

@media (min-width: 1200px) {
    .faq-box.competitor.field-coreWebVitals .row.competitor-charts-container,
    .faq-box.competitor.field-serverResponseTime .row.competitor-charts-container {
        margin-left: -14px;
    }

    .faq-box.competitor.field-hasGzip .charts .row {
        margin-left: -5px;
    }
}

.faq-box.competitor.page-speed .chart-title {
    height: 50px;
}
.competitor .chart-title {
    font-size: 18px;
}

.competitor .item-image-social {
    width: 50px;
    height: 50px;
}

.competitor .item-image-social.youtube-image_official {
    width: 80px;
}

.field-backlinks.competitor .backlinks-mt10 {
    margin-top: 0;
}

.resources-breakdown {
    column-gap: 12px;
    row-gap: 12px;
    display: flex;
    flex-wrap: wrap;
}

.activity-item {
    width: 125px;
    display: inline-block;
    vertical-align: text-top;
    color: var(--bs-card-color);;
}

@media (max-width: 540px) {
    .resources-breakdown {
        column-gap: 5px;
        row-gap: 10px;
    }

    .activity-item {
        width: 118px;
    }
}

@media (min-width: 1400px) {
    .resources-breakdown {
        column-gap: 19px;
        row-gap: 12px;
    }

    .activity-item {
        width: 134px;
    }
}

.score-graph-wrapper {
    position: relative;
}

/* don't show competitors if main check dont show
   (.recent-reviews-list boxes are exempt: check cards reveal via .fadeIn() -> inline
   display:block, which these rules key off - the listing review panels reveal via
   removeClass('hidden') instead, and a business legitimately shows there even when the
   main business has no reviews on that platform, e.g. only a competitor is on Bing) */
.faq-box:not([style*="display: block"]):not(.competitor) + .faq-box.competitor:not(.recent-reviews-list){
    display: none!important;
}
.faq-box:not([style*="display: block"]) + .faq-box.competitor + .faq-box.competitor:not(.recent-reviews-list) {
    display: none !important;
}

.backlink-image {
    background: url("/img/icons/spec/Chain.png") no-repeat center center;
}

.facebook-image {
    background: url("/img/icons/social/256x256/squares/Facebook.png") no-repeat center center;
}

.twitter-image {
    background: url("/img/icons/social/256x256/squares/Twitter.png") no-repeat center center;
}

.gplus-image {
    background: url("/img/icons/social/256x256/squares/Google+.png") no-repeat center center;
}

.linkedin-image {
    background: url("/img/icons/social/256x256/squares/LinkedIn.png") no-repeat center center;
}

.pinterest-image {
    background: url("/img/icons/social/256x256/squares/Pinterest.png") no-repeat center center;
}

.stumbleupon-image {
    background: url("/img/icons/social/256x256/squares/StumbleUpon.png") no-repeat center center;
}

.vkontakte-image {
    background: url("/img/icons/social/256x256/squares/VKontakte.png") no-repeat center center;
}

.moimir-image {
    background: url("/img/icons/social/256x256/squares/moimir.png") no-repeat center center;
}

.odnoklassniki-image {
    background: url("/img/icons/social/256x256/squares/Odnoklassniki.png") no-repeat center center;
}

.instagram-image {
    background: url("/img/icons/social/256x256/squares/Instagram.png") no-repeat center center;
}

.youtube-image {
    background: url("/img/icons/social/256x256/squares/Youtube.png") no-repeat center center;
}

.ps-total-size-image {
    background: url("/img/icons/pagesize/total page size.png") no-repeat center center;
}

.ps-host-size-image {
    background: url("/img/icons/pagesize/hosts.png") no-repeat center center;
}

.ps-html-size-image {
    background: url("/img/_metronic/svg/files/html.svg") no-repeat center center;
}

[data-bs-theme="dark"] .ps-html-size-image {
    background: url("/img/_metronic/svg/files/html-dark.svg") no-repeat center center;
}

.ps-image-size-image {
    background: url("/img/_metronic/svg/files/images.svg") no-repeat center center;
}

[data-bs-theme="dark"] .ps-image-size-image {
    background: url("/img/_metronic/svg/files/images-dark.svg") no-repeat center center;
}

.ps-total-resources-image {
    background: url("/img/icons/pagesize/total_resources.png") no-repeat center center;
}

.ps-static-resources-image {
    background: url("/img/_metronic/svg/files/other.svg") no-repeat center center;
}

[data-bs-theme="dark"] .ps-static-resources-image {
    background: url("/img/_metronic/svg/files/other-dark.svg") no-repeat center center;
}

.ps-css-resources-image {
    background: url("/img/_metronic/svg/files/css.svg") no-repeat center center;
}

[data-bs-theme="dark"] .ps-css-resources-image {
    background: url("/img/_metronic/svg/files/css-dark.svg") no-repeat center center;
}

.ps-js-resources-image {
    background: url("/img/_metronic/svg/files/js.svg") no-repeat center center;
}

[data-bs-theme="dark"] .ps-js-resources-image {
    background: url("/img/_metronic/svg/files/js-dark.svg") no-repeat center center;
}

.value-item {
    font-size: 20px;
    padding: 0;
    margin: 10px 0 0 0;
    font-weight: bold;
    line-height: 21px;
}

.volume-bar-wrapper{
    vertical-align: middle;
    text-align: left;
    overflow: hidden;
}

.volume-bar-wrapper span{
    background-color: var(--bs-primary);
    display: block;
    /* height: 12px; */
    height: 0.925rem;
    text-align: left;
    transition: 0.5s all;
    /* border-radius: 6px; */
    border-radius: calc(0.925rem / 2);
}

.progress-bar-container {
    width: calc(100vw - 40px);
    margin-top: -1px;
    padding-right: calc(100vw - 100%);
}

.progress-bar-container .container-xxl {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

@media (min-width: 992px) {
    [data-kt-app-header-fixed=true][data-kt-app-sidebar-fixed=true][data-kt-app-sidebar-push-header=true] .progress-bar-container {
        left: calc(var(--bs-app-sidebar-width-actual) + var(--bs-app-sidebar-gap-start, 0px) + var(--bs-app-sidebar-gap-end, 0px));
        width: calc(100vw - var(--bs-app-sidebar-width-actual) - var(--bs-app-sidebar-gap-start, 0px) - var(--bs-app-sidebar-gap-end, 0px));
    }

    [data-kt-app-header-fixed=true][data-kt-app-sidebar-fixed=true][data-kt-app-sidebar-push-header=true][data-kt-app-sidebar-minimize=on] .progress-bar-container {
        left: calc(75px + var(--bs-app-sidebar-gap-start, 0px) + var(--bs-app-sidebar-gap-end, 0px));
        width: calc(100vw - 75px - var(--bs-app-sidebar-gap-start, 0px) - var(--bs-app-sidebar-gap-end, 0px));
    }

    .progress-bar-container {
        margin-top: -10px;
    }

    .progress-bar-container .container-xxl {
        padding-right: 30px !important;
        padding-left: 30px !important;
    }
}

@media (max-width: 540px) {
    .progress-bar-container {
        width: calc(100vw - 30px);
    }
}

.check-info {
    margin: 15px 0 0;
    display: none;
    background-color: var(--bs-primary-light);
    border-radius: 4px;
    padding: 0.8rem;
}

.check-info p:last-child {
    margin-bottom: 0;
}

.check-group .faq-box{
    padding: var(--faq-box-padding-top) var(--faq-box-padding-x) var(--faq-box-padding-bottom);
}

.faq-box.competitor {
    /*
    --faq-box-padding-top: 4px;
    --faq-box-padding-x: 23px;
    --faq-box-padding-bottom: 10px;
     */
    /* ~ same values */
    --faq-box-padding-top: 0.4rem !important;
    --faq-box-padding-x: 1.92rem;
    --faq-box-padding-bottom: 0.835rem !important;
}

.faq-box + .faq-box.competitor + .faq-box.competitor {
    /*
    --faq-box-padding-top: 4px;
    --faq-box-padding-x: 23px;
    --faq-box-padding-bottom: 10px;
     */
    /* ~ same values */
    --faq-box-padding-top: 0.34rem !important;
    --faq-box-padding-x: 1.92rem;
    --faq-box-padding-bottom: 0.835rem !important;
}

.faq-box.competitor .bg-icon i {
    font-size: calc(1.45rem + 1.2vw) !important;
}

@media (min-width: 720px) {
    .check-group .faq-box{
        /*
        --faq-box-padding-top: 14px;
        --faq-box-padding-x: 16px;
        --faq-box-padding-bottom: 14px;
         */
        /* ~ same values */
        --faq-box-padding-top: 1.077rem;
        --faq-box-padding-x: 1.23rem;
        --faq-box-padding-bottom: 1.077rem;
    }

    .faq-box.competitor {
        /*
        --faq-box-padding-top: 4px!important;
        --faq-box-padding-x: 36px!important;
        --faq-box-padding-bottom: 10px!important;
         */
        /* ~ same values */
        --faq-box-padding-top: 0.3rem !important;
        --faq-box-padding-x: 2.77rem !important;
        --faq-box-padding-bottom: 0.77rem !important;
    }

    .faq-box + .faq-box.competitor + .faq-box.competitor {
        /*
        --faq-box-padding-top: 4px!important;
        --faq-box-padding-x: 36px!important;
        --faq-box-padding-bottom: 10px!important;
         */
        /* ~ same values */
        --faq-box-padding-top: 0.3rem !important;
        --faq-box-padding-x: 2.77rem !important;
        --faq-box-padding-bottom: 0.77rem !important;
    }
}

@media only screen and (max-width: 410px) {
    #speedchart-competitor, #sizechart-competitor,
    .competitor-charts-container{
        width: 100% !important;
    }
}

@media (min-width: 1200px) {
    .faq-box.competitor .bg-icon i {
        font-size: 2.25rem !important;
    }
}

.table-wrapped td {
    white-space: -moz-pre-wrap !important;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
    white-space: -webkit-pre-wrap;
    word-break: break-all;
    white-space: normal;
}

.explainer .faq-box.expandable {
    cursor: pointer;
}

.explainer .faq-box.expandable:hover:not(:target), .recommendation-item:hover {
    background-color: #fcfcfc;
}

[data-bs-theme="dark"] .explainer .faq-box.expandable:hover:not(:target), .recommendation-item:hover {
    background-color: var(--bs-light);
}

/* even if mouseover highlighting is disabled in the report template, we still enable this
   recommendations highlighting functionality.
   Applied by the smooth-scroll click handler (report.js), NOT via :target: the handler
   commits the hash with history.pushState(), which browsers deliberately do not re-evaluate
   :target for - so a :target rule never fired on click, and instead lit up stale hashes on
   the next page load (late-arriving PSI cards "spontaneously" turned green). A one-shot
   fade, on click only. */
.faq-box.js-target-flash{
    animation: faq-target-fade 3s ease-out 1 forwards;
}
@keyframes faq-target-fade {
    0%, 40% { background-color: var(--bs-success-light); }
    100%    { background-color: transparent; }
}

.explainer .faq-box.competitor {
    cursor: inherit;
}
.explainer .faq-box.competitor:hover {
    background-color: inherit;
}

.top-backlinks-ref-url-cell {
    word-break: break-all;
}

.top-backlink-summary-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.top-backlink-summary-text {
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
}

.nowrap {
    white-space: nowrap;
}

.backlink-summary-score {
    margin-top: 10px;
    margin-bottom: 25px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
}

.backlink-summary-score .score_name {
    margin-bottom: 0 !important;
}

.top-backlinks-table td:nth-child(4) {
    overflow-wrap: anywhere;
}

.field-numberOfResources .field-details {
    margin-top: 15px !important;
}

.faq-box .field-details:not(:empty) {
    margin-top: 15px;
}

#recommendations .recommendation-item:last-child .border-bottom-dotted {
    border-bottom: none !important;
}

#recommendations .recommendation-item h5 {
    line-height: 1.5;
}

.field-hasHreflang tbody td:first-child,
.field-hasH1Header tbody td:first-child,
.field-hasHeaders tbody td:first-child,
.field-keywords tbody td:first-child,
.field-topKeywordRankings tbody td:first-child,
.field-keywordPositions tbody td:first-child,
.field-backlinksList tbody td:first-child,
.field-backlinksTopPages tbody td:first-child,
.field-backlinksTopAnchors tbody td:first-child,
.field-onPageLinks tbody td:first-child,
.field-mobilePageInsights tbody td:first-child,
.field-desktopPageInsights tbody td:first-child,
.field-hasAmp tbody td:first-child,
.field-hasOpenGraphTags tbody td:first-child,
.field-hasTwitterTags tbody td:first-child,
.field-localBusinessSchema tbody td:first-child,
.field-hasImageWithoutAlt tbody td:nth-child(2),
.field-hasFriendlyUrl tbody td:nth-child(2),
.field-hasEmail tbody td:nth-child(2),
.field-hasDeprecated tbody td:nth-child(2),
.field-hasInlineCss tbody td:nth-child(2),
.field-technologies tbody td:nth-child(2)
{
    font-weight: 600;
}

.field-keywords tbody td:nth-child(2),
.field-keywords tbody td:nth-child(3),
.field-keywords tbody td:nth-child(4),
.field-hasAmp tbody td:nth-child(2) {
    padding-top: 14px;
    padding-bottom: 4px;
}

.field-keywords tbody td i,
.field-hasAmp tbody td i {
    line-height: 0.6;
}

.field-keywordPositions tbody td:first-child {
    white-space: nowrap;
}

.field-mobilePageInsights table.table,
.field-desktopPageInsights table.table {
    margin-bottom: 0;
}

.total-estimated-table {
    margin-bottom: 0;
}

.field-hasAmp tbody td:last-child {
    text-align: end;
}

.field-onPageLinks tbody tr td:first-child {
    word-wrap: break-word;
    word-break: break-all;
}

.ki-cross .path2:before {
    opacity: 1 !important;
}

.ki-abstract-49 {
    zoom: 1.4;
    -moz-transform: scale(1.4);
    rotate: 135deg;
    margin-top: -3px;
}

.form-switch .form-check-input,
.form-switch .form-check-label {
    cursor: pointer;
}

.form-switch.form-check-custom .form-check-input.form-check-small {
    width: 2.25rem;
    height: 1.25rem;
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected:after {
    display: none !important;
}

.colorpicker-preview {
    position: absolute;
    cursor: pointer;
    min-height: 25px;
    min-width: 25px;
    max-width: 25px;
}

.colorpicker.dropdown-menu.colorpicker-right.colorpicker-visible {
    margin-left: -8px;
}

.flag-icon-background {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
}

.flag-icon-squared {
    /* width: 24px !important; */
    /* line-height: 24px !important; */
    /* border-radius: 4px; */
    width: 1.85rem !important;
    line-height: 1.85rem !important;
    border-radius: 0.31rem;
    margin-right: 4px;
}

.country-flag-icon.flag-icon.flag-icon-squared {
    width: 20px !important;
    height: 20px;
    margin-right: .5rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.text-justify {
    text-align:justify;
}

.report-settings-nav.nav-pills .nav-item {
     margin-right: 0;
}

.report-settings-nav.nav-pills .nav-link {
    padding-left: 6px;
    padding-right: 6px;
    width: 105px;
}

@media (min-width: 992px) {
    .report-settings-nav.nav-pills .nav-link {
        width: 110px;
    }
}

.highlighted-keyword {
    text-decoration: underline;
}

@media (min-width: 992px) {
    .btn-md {
        padding: calc(var(--bs-btn-padding-y) - 0.7px) var(--bs-btn-padding-x) !important;
    }
}

.agency-min-header-height{
    min-height: auto!important;
}

.switcher-primary-bg {
    cursor: pointer;
}

.switcher-primary-bg:not(:checked) {
    background-color: #1B84FF !important;
}

.domain-page-authority {
    max-width: 90px;
    min-width: 90px;
    padding-right: 20px;
}

.table-actions-column {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
}

.ps-70px {
    padding-left: 70px !important;
}

.no-wrap {
    white-space: nowrap !important;
}
.no-select{
    /* pointer-events: none; */
    /* -webkit-touch-callout: none; */ /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.color-gray {
    color: var(--bs-gray-600);
}

table.dataTable>thead .sorting_asc,
table.dataTable>thead .sorting_desc {
    vertical-align: top !important;
}

.dataTables_info {
    color: var(--bs-text-gray-600) !important;
}

/* when disable class is not set by some reason */
.dataTables_paginate .paginate_button[id$="_ellipsis"]:not(.disabled) {
    pointer-events: none;
    cursor: default;
    opacity: .4;
}

.dataTables_filter input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    margin-right: -3px;
    background-color: var(--bs-gray-700);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    background-size: 13px 13px;
    height: 13px;
    width: 13px;
    cursor: pointer !important;
}

.dataTables_filter input[type="search"]::-webkit-search-cancel-button:hover {
    background-color: var(--bs-primary);
}

/* popup */
.dt-button-info {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    width: auto !important;
}
div.dt-button-info {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    margin-top: -100px;
    margin-left: -200px;
    background-color: white;
    border-radius: 0.75em;
    box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.8);
    text-align: center;
    z-index: 2003;
    overflow: hidden;
}
div.dt-button-info > div {
    padding: 1em 2em 2em 2em;
}
.dt-button-info h2 {
    color: #78829D;
    display: none;
}
.dt-button-info div {
    color: #78829D;
    font-size: 1.3em !important;
    margin-top: 17px;
}

.dt-buttons .btn {
    font-weight: 400 !important;
}

.text-no-wrap{
    white-space: nowrap;
}

table.dataTable td {
    vertical-align: top !important;
}

.running .table-actions-column a {
    display: none;
}

#leads .dropdown-menu.dt-button-collection {
    width: 200px;
}

@media (max-width: 430px) {
    /* todo: I didn't quite understand what was planned to be done with such a transformation, but it definitely
         can't be applied to the base class '.menu-sub-dropdown', otherwise all the menus will float away */
    #backlink-crawl .menu-sub-dropdown {
        /*transform: translate3d(-48px, 308.333px, 0px) !important;*/
    }

    /* Also bugged on 870 */
}

#task-modal .modal-dialog {
    --bs-modal-width: 720px;
}

@media (max-width: 768px) {
    .scan-issue-inner-first {
        width: 60%;
    }
}

@media (min-width: 7680px) and (max-width: 1200px) {
    .scan-issue-inner-first {
        width: 50%;
    }
}

@media (min-width: 1201px) {
    .scan-issue-inner-first {
        width: 40%;
    }
}

@media (min-width: 485px) {
    .buttons-colvis {
        margin-left: 15px;
    }
}

@media (max-width: 484px) {
    .dt-buttons.btn-group {
        display: inline-flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 5px;
    }

    .dt-buttons .btn-group {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px !important;
    }

    .dt-buttons .btn {
        flex: 0 0 auto;
    }
}

.dt-button-collection a {
    color: var(--bs-gray-700);
    background: #fff;
}

.dt-button-collection a:hover,
.dt-button-collection a.dt-button-active:hover {
    color: var(--bs-primary);
    background: var(--bs-dropdown-link-hover-bg);
}

.dt-button-collection a.dt-button-active {
    color: var(--bs-primary);
    background: var(--bs-dropdown-link-hover-bg);
}

div.dt-button-collection .dt-button-active:after {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3e%3cpath fill='%231B84FF' d='M4.89557 6.49823L2.79487 4.26513C2.26967 3.70683 1.38251 3.70683 0.857309 4.26513C0.375593 4.77721 0.375593 5.57574 0.857309 6.08781L4.74989 10.2257C5.14476 10.6455 5.81176 10.6455 6.20663 10.2257L13.1427 2.85252C13.6244 2.34044 13.6244 1.54191 13.1427 1.02984C12.6175 0.471537 11.7303 0.471536 11.2051 1.02984L6.06096 6.49823C5.74506 6.83403 5.21146 6.83403 4.89557 6.49823Z'/%3e%3c/svg%3e") !important;
    display: inline-block;
    height: 0.75rem;
    width: 0.75rem;
}

.form-control:disabled {
    color: var(--bs-gray-500);
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-300);
}

.disabled .select2-container,
[disabled] + .select2-container,
.select2-container--disabled {
    pointer-events: none !important;
    cursor: not-allowed !important;
}

.disabled .select2-selection,
[disabled] + .select2-container .select2-selection,
.select2-container--disabled .select2-selection {
    pointer-events: none !important;
    cursor: not-allowed !important;
    background-color: #f5f8fa !important;
}

.badge-light-cyan {
    /* background-color: var(--bs-cyan-light); */
    /* TODO: Use var(--bs-cyan-light) when it's added to the variables */
    background-color: rgba(13, 202, 240, .1);
    color: var(--bs-cyan);
}

.h-46px {
    height: 46px;
}

/* bootstrap 5 style */
input.disabled-like {
    color: var(--bs-gray-500);
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-300);
    opacity: 1;
    pointer-events: none;
}

.btn[spinner]{
    white-space: nowrap!important;
}
.btn.btn-warning-primary{
    color: var(--bs-warning-inverse);
    border-color: var(--bs-warning);
    background-color: var(--bs-warning);
}
.btn.btn-warning-primary:hover,
.btn.btn-warning-primary:focus{
    color: var(--bs-warning-inverse);
    border-color: var(--bs-warning-active);
    background-color: var(--bs-warning-active) !important;
}
.btn.btn-warning-primary[disabled]:not([spinner]),
.btn.btn-warning-primary[disabled]:not([spinner]):focus{
    color: var(--bs-primary-inverse)!important;
    border-color: var(--bs-primary)!important;
    background-color: var(--bs-primary)!important;
}

.modal-header .btn.btn-active-color-primary[disabled]:hover:not(.btn-active),
.modal-header .btn.btn-active-color-primary[disabled]:hover:not(.btn-active) i {
    color: var(--bs-text-muted);
    cursor: auto;
}

.btn.btn-outline.btn-outline-danger.js-unlink-btn:focus,
.btn.btn-outline.btn-outline-danger.js-unlink-btn:hover,
.btn.btn-outline.btn-outline-danger.js-unlink-btn:active {
    color: var(--bs-white) !important;
    background-color: var(--bs-danger) !important;
    outline: none !important;
}

.row.g-15{
    --bs-gutter-x: 3.75rem;
}
.row.g-20{
    --bs-gutter-x: 5rem;
}
/* double border without container resizing */
.children-inputs-border-hover-primary:hover input {
    border-color: var(--bs-primary) !important;
    outline-color: var(--bs-primary) !important;
    outline-style: solid;
    outline-width: 1px;
}

.paginate_button.previous,
.paginate_button.next {
    display: none;
}

[data-bs-theme=dark] .btn:active,
[data-bs-theme=dark] .btn:focus-visible,
[data-bs-theme=dark] .btn:focus,
[data-bs-theme=dark] .btn.active,
[data-bs-theme=dark] .btn.btn-outline-secondary {
    background: transparent !important;
}

[data-bs-theme=dark] .btn:hover {
    background-color: var(--bs-gray-200) !important;
}

/* Center the modal on mobile */
@media screen and (max-width: 767px) {
    div.dt-button-info {
        width: 80%;
        margin-left: 0;
        left: 10%;
        right: 10%;
    }
}

.my-40 {
    margin-top: 10rem !important;
    margin-bottom: 10rem !important;
}


@keyframes pulsate {
    0% {
        transform: scale(.1);
        opacity: .0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}
.loader {
    border: 3px solid #5d9cec;
    border-radius: 30px;
    height: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: -15px 0 0 -15px;
    opacity: 0;
    position: absolute;
    z-index: 10;
    width: 30px;
    animation: pulsate 0.7s ease-out infinite;
}

.spinner-account {
    position: relative;
    margin: 0 auto;
    font-size: 10px;
    text-indent: -9999em;
    border-top: 2px solid transparent;
    border-left: 2px solid var(--bs-primary);
    border-bottom: 2px solid var(--bs-primary);
    border-right: 2px solid var(--bs-primary);
    /* -webkit-transform: translateZ(0); */
    /* transform: translateZ(0); */
    /* -webkit-animation: SpinnerAnimation 1.1s infinite linear; */
    animation: SpinnerAnimation 1.1s infinite linear;
}

.spinner-account {
    border-radius: 50%;
    width: 25px;
    height: 25px;
}

.spinner-wrapper {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes SpinnerAnimation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

/* Disable text selection in flatpickr time input */
.flatpickr-time .numInput::selection {
    background-color: white !important;
    color: inherit !important;
}

.flatpickr-time .numInput {
    cursor: default !important;
}

.select2-container--bootstrap5.select2-container--disabled .select2-selection {
    color: var(--bs-gray-500) !important;
    background-color: var(--bs-gray-200) !important;
    border-color: var(--bs-gray-300) !important;
}

@media (min-width: 767px) {
    .no-left-padding-sm {
        padding-left: 0 !important;
    }
}

@media (max-width: 767px) {
    .half-left-padding-sm-only {
        padding-left: 5px !important;
    }

    .half-right-padding-sm-only {
        padding-right: 5px !important;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .no-left-padding-sm-only {
        padding-left: 0 !important;
    }
}

/* Hide progress bar in toast notifications */
.awn-toast-progress-bar {
    display: none !important;
}

table.google-serp-results td {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

@media (min-width: 992px) and (max-width: 1043px) {
    #check-keywords, #check-domain {
        padding-left: 12px;
        padding-right: 12px;
    }
}

#keywords-table_filter {
    padding-top: 6.5px;
    padding-bottom: 6.5px;
}

.h-14px {
    height: 14px;
}

.w-14px {
    width: 14px;
}

.select2-results__option span {
    display: flex;
    align-items: flex-start;
}

#select2-language-results .select2-results__option span {
    justify-content: space-between;
}

.select2-results__option img {
    flex-shrink: 0;
    margin-right: 0.5rem; /* me-2 equivalent */
}

.website-link {
    text-wrap: wrap;
}

.trial-disable-btns .dt-buttons.btn-group .disabled,
.trial-disable-btns .pagination .disabled {
    opacity: 0.4;
    pointer-events: auto;
    cursor: default;
}

.trial-disable-btns .pagination .disabled a,
.trial-disable-btns .pagination .disabled span {
    cursor: default;
}

.trial-disable-btns .dataTables_length select:disabled {
    opacity: 0.4 !important;
    border: 1px solid #eaeaea;
    background-color: #ffffff !important;
    color: #4c5667;
}

/* Flatpickr calendar customization */
.flatpickr-innerContainer {
    user-select: none;
}

.flatpickr-calendar .select2-selection__rendered {
    font-size: 1rem;
    font-weight: 500;
}

/* Past (disabled) dates */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--bs-gray-300) !important;
    background: transparent !important;
    border-color: transparent !important;
    cursor: not-allowed !important;
}

/* Previous/Next month dates that are selectable */
.flatpickr-day.prevMonthDay:not(.flatpickr-disabled),
.flatpickr-day.nextMonthDay:not(.flatpickr-disabled) {
    color: var(--bs-gray-500) !important;
    background: transparent !important;
    border-color: transparent !important;
    opacity: 1 !important;
}

/* Hover state for selectable prev/next month dates */
.flatpickr-day.prevMonthDay:not(.flatpickr-disabled):hover,
.flatpickr-day.nextMonthDay:not(.flatpickr-disabled):hover {
    color: var(--bs-gray-700) !important;
    background: var(--bs-gray-100) !important;
}

.flatpickr-current-month {
    margin-top: 8px;;
}

.flatpickr-current-month .select2-selection {
    width: 100%;
    justify-content: space-between;
}

.flatpickr-current-month .select2-selection .select2-selection__arrow {
    padding-bottom: 4px;
}

.tooltip-inner {
    text-align: left !important;
}

.form-select.time-zone-select {
    border: 0 !important;
}

.flatpickr-wrapper {
    width: 100% !important;
}

#closeBannerButton {
    color: var(--bs-link-color);
}

#closeBannerButton:hover {
    color: var(--bs-link-hover-color);
    transition: color 0.2s ease;
}

@media (min-width: 1400px) {
    .guide_links {
        font-size: 1.18rem !important;
    }
}

.menu-content-email {
    word-break: break-all;
}

.height-45 {
    height: 45px !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar  {
    scrollbar-width: none;             /* Firefox */
    -ms-overflow-style: none;          /* IE 10+ */
    background-color: #0d0e12;
    will-change: transform;
    contain: strict;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

.highlight .highlight-code pre {
    background-color: var(--bs-prismjs-bg);
    will-change: transform;
}

.highlight .highlight-code pre::-webkit-scrollbar {
    width: 6px;
}

.highlight .highlight-code pre::-webkit-scrollbar-track {
    background: var(--bs-prismjs-bg);
}

.highlight .highlight-code pre::-webkit-scrollbar-thumb {
    background: var(--bs-prismjs-scrollbar-color);
    border-radius: 3px;
}

.highlight .highlight-code pre::-webkit-scrollbar-thumb:hover {
    background: var(--bs-prismjs-scrollbar-color-hover);
}

#input-popover-group div.menu-sub {
    border-top-left-radius: 0.475rem !important;
    border-bottom-left-radius: 0.475rem !important;
}

.submit-spinner-and-disable input.form-control:read-only,
.submit-spinner-and-disable input.form-control:read-only:focus {
    color: var(--bs-gray-500);
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-300);
    opacity: 1;
    pointer-events: none;
}

.overflow-break-anywhere {
    overflow-wrap: anywhere;
}

/* Guest conversion banners (report/_banner_default.php, tools/_banner_bottom.php).
   Painted from .guest-banner rather than Metronic's .bg-primary (#1B84FF): that class
   doubles as the white-label theming hook (report/index.php rewrites it to the agency's
   foreground_color), and the softer brand blue below is the one the homepage testimonial
   bands use (.client-feedback-slider-eight in frontend-new/override.css). */
.guest-banner {
    background-color: #5d9cec;
}
/* Cross-product banners carry their own brand instead of SEOptimer blue: the card colour
   comes from 'banner_class' and the CTA from the button's own 'class', both set per banner
   in app\helpers\GuestBanners. Add a pair like the two below for each new brand.

   TubeRanker: charcoal card with its red on the button. Both values are its own - the red
   is from /img/logo_tuberanker_nav.svg, and the charcoal is the colour the banner logo is
   drawn against (the chart arrow in logo_tuberanker_banner.svg is #252525, knocked out of
   the white play button), so the logo only reads correctly on this exact background.

   Mirrored in www/css/core.css for the pre-Metronic surfaces, which load that copy
   instead of this one. */
.guest-banner--tuberanker {
    background-color: #252525;
}
.btn.btn-tuberanker {
    background-color: #c1080e;
    border-color: #c1080e;
}
.btn.btn-tuberanker:hover,
.btn.btn-tuberanker:focus,
.btn.btn-tuberanker:active {
    background-color: #a3070b;
    border-color: #a3070b;
}
/* CTA label. Mirrors the homepage "What are you waiting for?" CTA (.btn-orange-cta):
   heavy label lifted off the fill with a soft shadow. Metronic's fw-* scale tops out at
   fw-bolder = 700, so 800 is set here; Inter is loaded with the 800 cut in layouts/main.php. */
.result_banner-btn a {
    font-weight: 800;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
/* Banner headings run to two deliberate lines (see GuestBanners::audit/whiteLabel), and
   Metronic's default h2 leading sets them too tight. Scoped to .guest-banner so the
   global heading rhythm is untouched. */
.guest-banner h2 {
    line-height: 1.35;
}
/* Guest upsell strips under the Local SEO / Social sections ("Try our Local SEO Tool",
   "Try our YouTube SEO Tool"). They sit on the same guest report as the banners above, so
   they take the same brand blue rather than Metronic's .badge-primary azure. Two classes
   beats .badge-primary on specificity, so no !important needed. */
.badge.guest-upsell {
    background-color: #5d9cec;
}
/* Below lg the banner artwork is back in normal flow (it is only position-lg-absolute),
   so the per-banner nudges in GuestBanners::*['image_style'] stop being free: a transform
   shifts the image visually but leaves its layout box behind, which shows up as dead space
   between the image and the text on tablet/mobile. The nudges only ever exist to fine-tune
   the absolute placement at lg+, so drop them below that. !important is required to beat
   the inline style. */
@media (max-width: 991.98px) {
    .guest-banner-image-container img {
        transform: none !important;
    }
}

/* Below lg the artwork is sized purely by the per-banner width percentage against a container
   that is w-100/w-md-75 for a mirrored banner but only w-75/w-md-50 for a normal one - so the
   mirrored ones (keywords at 76%, growthbar at 88%) rendered roughly half again as wide as the
   audit banner on a tablet, which is where they looked oversized. A ceiling in px normalises
   every banner to about the size the audit banner already rendered at, without touching the
   percentages that still govern on a narrow phone or the absolute placement from lg up. */
@media (max-width: 991.98px) {
    .guest-banner-image-container img {
        max-width: 320px;
    }
}

/* From lg up the artwork is position-lg-absolute with no `top`, so it takes the static
   position of the flex container - and that container is align-items: flex-start (core.css,
   left there for an old iPhone bug). It therefore hangs off the top of the panel.

   That is fine on a wide screen, where the image is large enough to fill the column. As the
   viewport narrows the two move in opposite directions: the image is sized in %, so it gets
   shorter, while the text column wraps onto more lines and makes the panel taller. The
   difference shows as blue dead space beneath the image, worst just above the lg breakpoint.

   Nudging it down at the narrower steps is deliberate over switching the container to
   align-items: center. Centring would fix this band, but it would also move every banner
   image down on wide screens, throwing away the per-banner placement already tuned in
   GuestBanners::*['image_style']. These margins only apply where the gap actually appears.

   margin-top rather than transform: the per-banner nudges are inline transforms and would
   overwrite a stylesheet one. Nothing else sets margin-top on this image, so no !important. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .guest-banner-image-container img {
        margin-top: 14px;
    }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .guest-banner-image-container img {
        margin-top: 8px;
    }
}