/*
 * Serpstash additions: utility classes that the compiled app.css leaves out.
 * Loaded after app.css on every page.
 */
.col-1,.col-2,.col-4,.col-5,.col-lg-1,.col-lg-9,.col-lg-11{position:relative;width:100%;padding-left:1rem;padding-right:1rem}
.col-1{flex:0 0 8.33333333%;max-width:8.33333333%}
.col-2{flex:0 0 16.66666667%;max-width:16.66666667%}
.col-4{flex:0 0 33.33333333%;max-width:33.33333333%}
.col-5{flex:0 0 41.66666667%;max-width:41.66666667%}
@media (min-width:992px){
    .col-lg-1{flex:0 0 8.33333333%;max-width:8.33333333%}
    .col-lg-9{flex:0 0 75%;max-width:75%}
    .col-lg-11{flex:0 0 91.66666667%;max-width:91.66666667%}
}
@media (min-width:768px){
    .mr-md-4{margin-right:1.5rem!important}
    .ml-md-4{margin-left:1.5rem!important}
}
.mt-auto{margin-top:auto!important}
.text-nowrap{white-space:nowrap!important}
.mw-100{max-width:100%!important}
.btn-link{background-color:transparent;border-color:transparent;box-shadow:none}
.text-xs{font-size:.75rem}

/* Page / Sitemap toggle on the report form: white when unselected, yellow when selected */
[data-report-type] .btn-outline-primary{background-color:#fff;border-color:#dee2e6;color:#262626}
[data-report-type] .btn-outline-primary:hover{background-color:#fff8e1;border-color:#ffc107;color:#262626}
[data-report-type] .btn-outline-primary:not(:disabled):not(.disabled).active,
[data-report-type] .btn-outline-primary:not(:disabled):not(.disabled):active{background-color:#ffc107;border-color:#ffc107;color:#262626}
[data-report-type] .btn-outline-primary:focus,
[data-report-type] .btn-outline-primary.focus,
[data-report-type] .btn-outline-primary:not(:disabled):not(.disabled).active:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.4)}
.letter-spacing-wide{letter-spacing:.04em}

/*
 * Flat design: light borders instead of shadows, outlined buttons and tabs,
 * one yellow .btn-cta per page. Overrides the admin custom CSS (loaded before this file).
 */
:root{--ss-line:#e6e9ee;--ss-line-strong:#cfd4dc;--ss-ink:#262626;--ss-muted:#5f6672;--ss-surface:#fff;--ss-hover:rgba(0,0,0,.035);--ss-cta:#FAD776;--ss-cta-hover:#F7CA4C}
html.dark{--ss-line:#3b3b3b;--ss-line-strong:#555;--ss-ink:#ececec;--ss-muted:#a3a3a3;--ss-surface:#282828;--ss-hover:rgba(255,255,255,.05)}

/* Cards and panels */
.card.shadow-sm,.bg-base-0.rounded.shadow-sm{box-shadow:none!important}
.card.border-0.shadow-sm,.bg-base-0.rounded.shadow-sm{border:1px solid var(--ss-line)!important}
.card{border-color:var(--ss-line)}
.card-header{border-bottom-color:var(--ss-line)}

/* Sidebar: flat with a hairline on desktop (the mobile slide-in menu keeps its shadow) */
@media (min-width:992px){
    .slide-menu{box-shadow:none!important;border-right:1px solid var(--ss-line)}
    [dir=rtl] .slide-menu{border-right:0;border-left:1px solid var(--ss-line)}
}

/* Tabs: spaced pills, the active one outlined */
.nav-pills{gap:.375rem}
.nav-pills .nav-link{border:1px solid transparent;color:var(--ss-muted);padding:.4375rem .875rem;border-radius:.375rem}
.nav-pills .nav-link:hover{background-color:var(--ss-hover);color:var(--ss-ink)}
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{background-color:var(--ss-surface);border-color:var(--ss-line-strong);color:var(--ss-ink);font-weight:500}
.page-tabs{margin-bottom:1.5rem}

/* Outlined buttons: neutral outline; the selected/pressed state is a darker outline, never a fill */
.btn-outline-primary,.btn-outline-secondary{background-color:transparent;border-color:var(--ss-line-strong);color:var(--ss-ink)}
.btn-outline-primary:hover,.btn-outline-secondary:hover{background-color:var(--ss-hover);border-color:var(--ss-muted);color:var(--ss-ink)}
.btn-outline-primary:focus,.btn-outline-primary.focus,.btn-outline-secondary:focus,.btn-outline-secondary.focus{box-shadow:0 0 0 .2rem rgba(38,125,255,.15)}
.btn-outline-primary.disabled,.btn-outline-primary:disabled,.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{background-color:transparent;border-color:var(--ss-line);color:var(--ss-muted)}
.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle,
.btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):active,.show>.btn-outline-secondary.dropdown-toggle{background-color:var(--ss-surface);border-color:var(--ss-ink);color:var(--ss-ink)!important;font-weight:500}
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,125,255,.15)}
.btn-outline-danger:not(:disabled):not(.disabled).active{background-color:transparent;border-color:#dc3545;color:#dc3545;font-weight:500}

/* The page's single call to action */
.btn-cta{background-color:var(--ss-cta);border-color:var(--ss-cta);color:#262626}
.btn-cta:hover,.btn-cta:focus,.btn-cta.focus{background-color:var(--ss-cta-hover);border-color:var(--ss-cta-hover);color:#262626}
.btn-cta:focus,.btn-cta.focus{box-shadow:0 0 0 .2rem rgba(250,215,118,.5)}
.btn-cta:not(:disabled):not(.disabled):active{background-color:#F2BE2E;border-color:#F2BE2E;color:#262626}

/*
 * Website owner flow: clickable stat cards, next steps, tracked keywords, getting started.
 */
.min-width-0{min-width:0}
a.ss-stat{color:inherit;text-decoration:none;transition:border-color .15s ease}
a.ss-stat:hover{border-color:var(--ss-line-strong)!important}
a.ss-stat .ss-stat-go{color:var(--ss-muted);opacity:0;transition:opacity .15s ease}
a.ss-stat:hover .ss-stat-go{opacity:1}
/* The info icon stays next to the label when it wraps */
.ss-stat-label>span{display:inline-flex;vertical-align:-.125em}
.ss-stat-label>svg{vertical-align:-.125em}
.ss-tag{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ss-muted);background:var(--ss-hover);border-radius:.25rem;padding:.125rem .375rem;line-height:1.4;white-space:nowrap}

/* Next steps */
.ss-step{display:flex;align-items:flex-start;padding:1rem 1.25rem;border-bottom:1px solid var(--ss-line)}
.ss-step:last-child{border-bottom:0}
.ss-step-dot{flex-shrink:0;width:.625rem;height:.625rem;border-radius:50%;margin-top:.45rem}
.ss-step-high{background:#dc3545}
.ss-step-medium{background:#ffc107}
.ss-step-low{background:#adb5bd}
.ss-step-body{flex:1 1 0%;min-width:0}
.ss-step-how{background:var(--ss-hover);border-radius:.375rem;padding:.75rem 1rem}
.ss-step-actions{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;margin-inline-start:1rem}
.ss-step-more{display:flex;margin-top:.25rem}
/* Phones: the buttons go under the text, so it keeps the full width */
@media (max-width:575.98px){
.ss-step{flex-wrap:wrap}
.ss-step-actions{flex-basis:100%;flex-direction:row;flex-wrap:wrap;align-items:center;margin:.625rem 0 0;padding-inline-start:1.625rem}
.ss-step-more{margin:0;margin-inline-start:.5rem}
}
.ss-steps-group{font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ss-muted);padding:1rem 1.25rem .25rem}
.ss-done{display:flex;align-items:center;padding:.5rem 0;color:var(--ss-muted)}
.ss-check-circle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.375rem;height:1.375rem;border-radius:50%;border:2px solid var(--ss-line-strong);color:#fff}
.ss-check-circle.done{background:#28a745;border-color:#28a745}
.ss-progress{height:.375rem;border-radius:1rem;background:var(--ss-hover);overflow:hidden}
.ss-progress>span{display:block;height:100%;border-radius:1rem;background:#28a745}

/* Welcome banner after adding a website */
.ss-welcome{background:rgba(250,215,118,.16);border:1px solid rgba(250,215,118,.75);border-radius:.5rem}

/* Tracked keywords */
.ss-keyword{border-bottom:1px solid var(--ss-line)}
.ss-keyword:last-child{border-bottom:0}
.ss-keyword-row{display:flex;align-items:center;padding:.875rem 1.25rem;cursor:pointer}
.ss-keyword-row:hover{background:var(--ss-hover)}
.ss-keyword-name{flex:1 1 100%;min-width:0}
@media (min-width:992px){.ss-keyword-name{flex:1 1 auto}}
.ss-keyword-details{padding:0 1.25rem 1.25rem}
/* Links to a keyword, step or card stop below the sticky header on phones and tablets */
@media (max-width:991.98px){.ss-keyword,.ss-step,.card,.collapse{scroll-margin-top:5rem}}
.ss-spark{display:block;width:5rem;height:1.5rem;overflow:visible}
.ss-position{font-weight:600;font-variant-numeric:tabular-nums}
.ss-score{display:inline-block;min-width:2.75rem;text-align:center;border-radius:1rem;padding:.0625rem .5rem;font-size:.8125rem;font-weight:600}
.ss-score-good{background:rgba(40,167,69,.15);color:#1e7e34}
.ss-score-ok{background:rgba(255,193,7,.2);color:#9a7400}
.ss-score-bad{background:rgba(220,53,69,.12);color:#c82333}
html.dark .ss-score-good{color:#5dd879}
html.dark .ss-score-ok{color:#ffd451}
html.dark .ss-score-bad{color:#ff8a96}

/* Sidebar: the user's websites under Projects */
.sidebar .ss-site-link{padding-top:.375rem!important;padding-bottom:.375rem!important;font-size:.875rem}
.sidebar .ss-site-link img{width:1rem;height:1rem}