:root {
    --color-main: #29275F;
    --color-link: #2955EE;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-purple: #5336ca;

    --color-cotton-candy: #FD95B4;  /* Cotton Candy */
    --color-clear-skies: #A6DAF0;   /* Clear Skies */
    --color-soft-lavender: #E1BDDF; /* Soft Lavender */
    --color-ripe-peach: #EA987B;    /* Ripe Peach */
    --color-zest: #D3BF2B;          /* Zest */

    --color-primary: #F64B53;
    --color-secondary: #cf4327;
    --color-tertiary: #4C56BA;
    --color-faded: #A9B2C8;

    --color-neon-green-transparent: rgba(5, 203, 99, 0.2);

    --color-complementary: #212b36;

    --flatui-midnight-blue: #2c3e50;
    --flatui-turquoise: #1abc9c;
    --flatui-green-sea: #16a085;
    --flatui-asbestos: #7f8c8d;

    --color-timing-dns: #009688;
}



.roar-alert-mask{position:fixed;z-index:9998;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,.6)}.roar-alert-message-body{position:fixed;z-index:9999;min-width:640px;max-width:720px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#fafafc;text-align:center;border-radius:3px;-webkit-box-shadow:0 0 48px rgba(0,0,0,.15);box-shadow:0 0 48px rgba(0,0,0,.15);-webkit-animation:roar-show .1s;animation:roar-show .1s}@media screen and (max-width:480px){.roar-alert-message-body{min-width:320px;max-width:100%}}.roar-alert-message-tbf{padding:0 20px;font-size:16px}.roar-alert-message-title{font-weight:400;font-size:18px;padding:8px 24px}.roar-alert-message-content{padding:24px;text-align:center}.roar-alert-message-button{position:relative;padding:24px;font-size:18px;display:-webkit-box;display:-ms-flexbox;display:flex;align-items:center;justify-content:center}.roar-alert-message-button a{display:block;margin:0 24px;color:#3cc51f;text-decoration:none;border-radius:3px;padding:12px 24px}a.roar-alert-message-button-cancel,a.roar-alert-message-button-cancel:link{color:#FFF;background-color:#95A5A6}a.roar-alert-message-button-cancel:hover{color:#FFF;background-color:#7F8C8D;text-decoration:none}a.roar-alert-message-button-confirm,a.roar-alert-message-button-confirm:link{color:#FFF;background-color:#34495E}a.roar-alert-message-button-confirm:hover{color:#FFF;background-color:#2C3E50;text-decoration:none}@-webkit-keyframes roar-show{0%{-webkit-filter:opacity(.2);filter:opacity(.2);margin-top:-16px}100%{-webkit-filter:opacity(1);filter:opacity(1);margin-top:0}}@keyframes roar-show{0%{-webkit-filter:opacity(.2);filter:opacity(.2);margin-top:-16px}100%{-webkit-filter:opacity(1);filter:opacity(1);margin-top:0}}.roar-open{overflow:hidden}


.sf-url-size-list {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 12px;
    line-height: 1.75;
    word-break: break-all;
    margin: 24px 0 0 0;
}
.sf-url-size-list code {
    font-size: inherit;
}
.sf-url-size-list a,
.sf-url-size-list a:link,
.sf-url-size-list a:visited {
    text-decoration: none;
}
.sf-url-size-list a:hover {
    text-decoration: underline;
}
.sf-url-size-list b {
    color: var(--flatui-green-sea);
    font-weight: 700;
}
.sf-url-size-list i {
    color: #e74c3c;
    font-weight: 700;
    font-style: normal;
}

.sf-flex {
	display: flex;
	flex-direction: row;
}
.sf-flex .sf-flex-child {
	flex: 1;
}

.is-good,
.sf-color--green {
    color: var(--flatui-turquoise);
}
.is-bad,
.sf-color--red {
    color: #e74c3c;
}
.is-ugly,
.sf-color--yellow {
    color: #e67e22;
}

#scores {
    display: flex;
    flex-wrap: wrap;
}
#scores div {
    flex-basis: 31%;
    margin: 1%;
}

.progress {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: calc(25% - 2rem);
    height: 183px;
    width: 183px;
    min-width: 183px;
    position: relative;
    margin: 48px auto;
}
.progress__track, .progress__progress {
    height: 100%;
    width: 100%;
    position: absolute;
    stroke-width: 18;
    fill: none;
}
.progress__track {
    stroke: #ccc;
}
.progress__progress {
    stroke: #e74c3c;
}
.progress__indicator {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50%;
    width: 0;
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
.progress__indicator-hand {
    height: 35px;
    width: 35px;
    position: absolute;
    bottom: -10px;
    left: calc(50% - 20px);
    background-color: #e74c3c;
    border: 3px solid #fff;
    border-radius: 50%;
}
.progress__label {
    color: #444;
    text-align: center;
}
.progress__text {
    display: block;
    font-size: 4rem;
    line-height: 0.9;
}
.progress__percent {
    font-size: 0.8rem;
    text-transform: uppercase;
}



/**
 * User Dashboard: Sites
 *
 * @Volt
 */
.sf-row {
    display: flex;
    flex-wrap: nowrap;
}
.sf-row--header {
    display: flex;
    flex-wrap: nowrap;
    background-color: rgba(0, 0, 0, 0.05);

    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #333333;
}
.sf-row--cell {
    padding: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.sf-row--cell small {
    display: block;
    font-size: 12px;
    color: #a9b2c8;
}
.sf-row--cell.sf-row-domain {
    flex-basis: 60%;
}
.sf-row--cell.sf-row-latest {
    flex-basis: 40%;
}



.sf-header--primary {
	font-size: 16px;
    margin: 16px 0 12px 0;
	padding: 16px 0 12px 0;
    font-weight: 600;
}
.sf-header--secondary {
	font-size: 18px;
    margin: 24px 0 16px 0;
    color: var(--flatui-midnight-blue);
    font-weight: 400;
}
.sf-header--secondary small {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #a9b2c8;
}

h2.sf-heading--secondary,
.page h2.sf-heading--secondary {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    padding: 8px 0 16px 0;
}

.sf-header--tertiary {
    font-size: 20px;
    margin: 18px 0 12px 0;
}
.sf-header--tertiary small {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #a9b2c8;
}




.sf-progress-bars {
    display: flex;
    align-content: space-around;
    justify-content: center;
    margin: 24px 0 48px 0;
}

.progress-bar {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 168px;
}
.progress-bar svg {
    transform: rotate(-90deg);
    width: 168px;
}
.progress-bar .progress-bar__background {
    fill: none;
    stroke: #666666;
    stroke-width: 0.1;
}
.progress-bar .progress-bar__progress {
    fill: none;
    stroke: var(--flatui-turquoise);
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
    stroke-linecap: round;
}
.progress-bar .progress-text {
    font-size: 42px;
	line-height: 1.5;
    text-align: center;
    position: absolute;
}
.progress-bar .progress-text b {
    font-weight: 600;
}
.progress-bar--title {
	font-size: 14px;
	font-weight: 400;
}


.sf-form-element,
.sf-form-wrapper input,
.sf-form input[type="text"],
.sf-form input[type="url"],
.sf-form input[type="email"],
.sf-form input[type="number"],
.sf-form input[type="file"],
.sf-form input[type="password"],
.sf-form button {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    padding: 8px;
    border: 1px solid #a9b2c8;
    border-radius: 2px;
}
.sf-form-wrapper label,
.sf-form--new label {
    display: block;
}
.sf-form-wrapper button[type="submit"],
.sf-form-submit {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    padding: 8px 24px;
    border: 0 none;
    border-radius: 2px;
    background-color: var(--color-link);
    cursor: pointer;
}

.sf-notification {
    padding: 4px;
}
.sf-notification--success {
    background-color: var(--flatui-turquoise);
}



.label {
    color: var(--primary_colour);
    padding: 0 5px;
    height: 15px;
    margin: 0 0 0 2px;
    font-size: 10px;
    border-radius: 2px;
    font-weight: 600;
    display: inline-block;
    vertical-align: super;
}
.sf-button .label.label-beta {
    border-left: 3px solid var(--color-ripe-peach);
    background-color: #ffffff;
}
.sf-button .label.label-alpha {
    border-left: 3px solid var(--color-zest);
    background-color: #ffffff;
}



/**
 * https://cdn.jsdelivr.net/npm/chart.js@2.9.2/dist/Chart.css
 */

/*
 * DOM element rendering detection
 * https://davidwalsh.name/detect-node-insertion
 */
@keyframes chartjs-render-animation {
    from { opacity: 0.99; }
    to { opacity: 1; }
}

.chartjs-render-monitor {
	animation: chartjs-render-animation 0.001s;
}

/*
 * DOM element resizing detection
 * https://github.com/marcj/css-element-queries
 */
.chartjs-size-monitor,
.chartjs-size-monitor-expand,
.chartjs-size-monitor-shrink {
	position: absolute;
	direction: ltr;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
	z-index: -1;
}

.chartjs-size-monitor-expand > div {
	position: absolute;
	width: 1000000px;
	height: 1000000px;
	left: 0;
	top: 0;
}

.chartjs-size-monitor-shrink > div {
	position: absolute;
	width: 200%;
	height: 200%;
	left: 0;
	top: 0;
}
/**/



canvas#chartjs-ttfb-evolution,
canvas#chartjs-curl-phases,
canvas#chartjs-curl-response,
canvas#chartjs-curl-transfer,
canvas#chartjs-key-factors,
canvas#chartjs-speed-factors,
canvas#ttfb-bar-values {
    width: 100%;
    height: 300px;
	margin: 0 0 24px 0;
}
canvas#chartjs-bar-values {
    width: 100%;
    height: 250px;
}


details.sf-help-details summary {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.025);
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 2px;
}
details.sf-help-details summary::-webkit-details-marker {
    display: none;
}
.sf-help-details p {
    margin: 16px 0;
    font-size: 14px;
}




/**
 * Volt UI
 *
 * Contains all UI elements for the Volt app
 */
.sf {
	font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
.sf a:link,
.sf a:visited {
	color: var(--color-tertiary);
}

.sf-navigation {
	margin: 24px 0;
}

.sf-font-size-36 {
	font-size: 36px;
}




/**
 * UI: Form Elements
 */
.sf input[type="text"],
.sf input[type="url"],
.sf input[type="email"],
.sf input[type="number"],
.sf input[type="file"],
.sf input[type="password"],
.sf input[type="button"],
.sf button,
.sf select,
.sf textarea {
  display: inline-block;
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;
  padding: 10px 12px;
  margin: 2px;
  color: #333333;
  border: 1px solid #BDC3C7;
  background-color: #ffffff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  outline-color: #3498db;
}

.sf input[type="button"],
.sf input[type="file"],
.sf button {
  color: #000000;
  background-color: #CFD6DE;
  border: 0 none;
  cursor: pointer;
}

.sf input:hover,
.sf button:hover,
.sf select:hover,
.sf textarea:hover {
  border-color: #95A5A6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}



/*
 * Buttons
 *
 * Button types: Primary, secondary, tertiary (neutral)
 * Button sizes: Hero, large, regular, small
 * Button roles: File download, (external) link, (internal) action
 *
 * Usage class: "sf sf-button sf-button-primary sf-button-regular"
 *
 * Nice UI https://www.npmjs.com/package/overlapping-marker-spiderfier-leaflet
 * Nice colours https://www.mapillary.com/
 * Nice ideas https://rigor.com/blog/analyzing-performance-using-visual-record
 * Nice ideas https://rigor.com/blog/monitoring-the-ux
 */
.sf-button {
    font-weight: 400;
    display: inline-block;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 2px;
}
.sf-button:hover {
    box-shadow: inset 0 99px 0 rgba(0, 0, 0, 0.15);
    text-decoration: none;
}
a.sf-button-primary,
.sf-button-primary {
    color: #ffffff !important;
    background-color: var(--color-primary);
}
a.sf-button-secondary,
.sf-button-secondary {
    color: #ffffff !important;
    background-color: var(--flatui-turquoise);
}
a.sf-button-tertiary,
.sf-button-tertiary {
    color: #ffffff !important;
    background-color: var(--flatui-green-sea);
}
a.sf-button-faded,
.sf-button-faded {
    color: #000000 !important;
    background-color: var(--color-neon-green-transparent);
}

.sf-wrapper--overview .sf-link-overview,
.sf-wrapper--performance .sf-link-performance {
    background-color: var(--thin-ui-primary);
    color: #ffffff;
}


.sf-button-small {
    padding: 6px 10px;
    font-size: 11px;
}
.sf-button-regular {
    padding: 6px 16px;
    font-size: 14px;
}
.sf-button-large {
    padding: 12px 18px;
    font-size: 15px;
}
.sf-button-hero {
    padding: 16px 28px;
    font-size: 18px;
}






.sf-option {
    margin: 0 0 16px 0;
}



/*
 * Flex Panels
 *
 */

.sf-panel-item--dead-center {
	display: flex;
    justify-content: center;
    align-items: center;
}
.progress-bar .progress-bar__background {
    stroke: #29275F;
    stroke-width: 2px;
}
.progress-bar .progress-bar__progress {
    stroke-linecap: initial;
}

.sf-shadow-dreamy {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
                0 2px 4px rgba(0, 0, 0, 0.05),
                0 4px 8px rgba(0, 0, 0, 0.05),
                0 8px 16px rgba(0, 0, 0, 0.05),
                0 16px 32px rgba(0, 0, 0, 0.05),
                0 32px 64px rgba(0, 0, 0, 0.05);
}
.sf-shadow-discrete {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.025),
                0 2px 4px rgba(0, 0, 0, 0.025),
                0 4px 8px rgba(0, 0, 0, 0.025),
                0 8px 16px rgba(0, 0, 0, 0.025);
}


/* https://flatuicolors.com/palette/es */
.sf-section {
	display: flex;
	flex-direction: column;
	font-size: 14px;
}
.sf-section p {
	margin: 0 0 16px 0;
}
.sf-section--help {
    color: #3a414e;
}
.sf-section--help a,
.sf-section--help a:visited {
    text-decoration: none;
    color: #1195dc;
}
.sf-section--help a:active,
.sf-section--help a:focus,
.sf-section--help a:hover {
    text-decoration: none;
    color: #0e75ad;
}

.sf-grey {
	color: #84817a;
}
.sf-faded {
	opacity: 0.72;
}

.sf-badge {
	display: inline-block;
	line-height: 1;
	padding: 4px 6px;
	border-radius: 2px;
	color: #ffffff;
	font-size: 11px;
	font-weight: 400;
}
.sf-badge--pro {
	background-color: #33d9b2;
}
.sf-badge--new {
	background-color: #34ace0;
}
.sf-badge--soon {
	background-color: #ff793f;
}









.binary-switch-container * {
    box-sizing: border-box;
}
.binary-switch-container {
    display: block;
    position: relative;
}
.binary-switch-container label {
    font-size: 14px;
    user-select: none;
}
.binary-switch-container .binary-switch {
    display: inline-block;
    position: relative;
    width: 24px;
    height: 14px;
    cursor: pointer;
    margin: 0 4px 0 0;
    user-select: none;
}
.binary-switch-container .binary-switch input[type="checkbox"] {
    display: none;
}
.binary-switch-container .binary-switch .binary-switch-track {
    background-color: #9da6af;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 7px;
    transition: background-color 0.1s ease;
}
.binary-switch .binary-switch-button {
  box-sizing: border-box;
    background: #fff;
    position: absolute;
    top: 2px;
    right: 12px;
    bottom: 2px;
    left: 2px;
    border-radius: 5px;
    transition: left 0.1s ease-in-out, right 0.1s ease-in-out;
}
.binary-switch input[type="checkbox"]:checked ~ .binary-switch-track {
    background: var(--color-link);
}
.binary-switch input[type="checkbox"]:checked ~ .binary-switch-button {
    right: 2px;
    left: 12px;
}



/**
 * Sparkline
 */
.sparkline--svg {
    margin: 16px 0 0 0;
}
.sparkline--tooltip {
    font-size: 12px;
    white-space: nowrap;
}
.sparkline--cursor {
    stroke: #29275F;
}
.sparkline--spot {
    fill: #29275F;
    stroke: #29275F;
}
.sparkline--fill {
    fill: rgba(41, 39, 95, 0.35);
}



.flex-direction-column {
    flex-direction: column;
}


.sf-boxie {
    padding: 12px;
    margin: 4px;
    border-radius: 2px;
    background: #fff;
}






/**
 * Multilevel menu
 */
.sf-menu,
.sf-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sf-menu {
    display: flex;
    position: relative;
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: inset 0 -2px #ecf0f1;
}
.sf-menu ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
                0 2px 4px rgba(0, 0, 0, 0.05),
                0 4px 8px rgba(0, 0, 0, 0.05),
                0 8px 16px rgba(0, 0, 0, 0.05),
                0 16px 32px rgba(0, 0, 0, 0.05),
                0 32px 64px rgba(0, 0, 0, 0.05);
}
.sf-menu > li > ul {
    left: 0;
    top: 100%;
}
.sf-menu li {
    list-style: none !important;
    position: relative;
    background: #ecf0f1;
}
.sf-menu li a {
    white-space: nowrap;
    font-size: 14px;
    color: #34495e;
    text-decoration: none;
    padding: 12px 16px;
    display: inline-block;
    background-color: #ffffff;
}
.sf-menu li:hover > ul {
    display: block;
    animation: moo 0.25s ease-in-out forwards;
    will-change: opacity margin;
}
.sf-menu > li > a {
    box-shadow: inset 0 -2px #ecf0f1;
}
.sf-menu li a:hover,
.sf-menu li:hover > a,
.sf-menu > li > a:hover {
    background: #bdc3c7;
    box-shadow: inset 0 -2px #34495e;
}
.sf-menu li li a {
    min-width: 180px;
    padding: 8px 16px;
    font-size: 13px;
    background: #ecf0f1;
}
.sf-menu li li a:hover {
    box-shadow: none;
}
.sf-menu > li > a:not(:only-child):after {
    opacity: .5;
    content: ' \22EE';
}

@keyframes moo {
    from {
        opacity: 0;
        margin-top: 8px;
    }
    to {
        opacity: 1;
        margin-top: 0;
    }
}







/**
 * Restrict Content Pro
 * @type CSS
 */
.rcp-table {
    border-collapse: separate;
    border-spacing: 0;
    border-width: 1px 0 0 1px;
    margin: 0 0 1.75em;
    table-layout: fixed;
    width: 100%;
}
.rcp-table, .rcp-table th, .rcp-table td {
    border: 1px solid #d1d1d1;
}
.rcp-table th, .rcp-table td {
    padding: 5px;
}

#rcp_login_form input[type="text"],
#rcp_login_form input[type="password"],
#rcp_registration_form input[type="text"],
#rcp_registration_form input[type="password"] {
    color: #000000;
	background-color: #ffffff;
	width: 100%;
	padding: 12px;
    border: 1px solid #CCCCCC;
	border-radius: 2px;
	font-family: inherit;
	font-size: inherit;
}

#rcp_login_form input[type=text]:focus,
#rcp_login_form input[type=password]:focus,
#rcp_registration_form input[type=text]:focus,
#rcp_registration_form input[type=password] {
	background-color: #FFFFFF;
}

/* Remove username and passowrd (again) */
p#rcp_user_login_wrap, p#rcp_password_again_wrap {
    display: none;
}





a.sf-button--rounded,
.sf-button--rounded {
    background-color: var(--color-purple);
    color: var(--color-white);
    padding: 12px 32px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 64px;
}




.col-item--value {
    font-weight: 500;
    font-size: 16px;
}

.grid-container {
    padding: 16px;
}





.sf-menu a sup {
    display: inline-block;
    vertical-align: unset;
    font-size: 9px;
    line-height: 1;
    padding: 3px 4px;
    top: -4px;
    color: #ffffff;
    background-color: var(--thin-ui-primary);
    position: relative;
    border-radius: 2px;
    text-transform: uppercase;
}


.chart-container {
    font-family: "Muli" !important;
}
.chart-container .legend-dataset-text {
    fill: #000000 !important;
    font-weight: 400 !important;
}

.aws-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 24px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    min-height: 260px;
    max-height: 400px;
}

.aws-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    margin: 0 !important;
}

@supports not (aspect-ratio: 1) {
    .aws-container {
        min-height: 0;
        height: 0;
        padding-bottom: 62.5%;
        max-height: none;
    }
}

textarea {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    padding: 0.667em;
    width: 100%;
}

/**
 * New design: v2.0.0 Vanilla
 */
i[class^="ai-"].ai-fw {
	width: 1.25em;
    display: inline-block;
    text-align: center;
}


details {
	background: #ffffff;
	border: 1px solid color-mix(in srgb, #000 10%, #fff);
	border-radius: 6px;
	padding: 1em 1.334em;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
	transition: border-color 0.25s, box-shadow 0.25s;
}

details:hover {
	border-color: color-mix(in srgb, #0078ff 20%, #000 10%);
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.08);
}

summary {
	cursor: pointer;
	font-weight: 500;
	list-style: none;
	user-select: none;
}

summary::-webkit-details-marker {
	display: none;
}

details::details-content {
	opacity: 0;
	transition: opacity 0.35s ease;
}

details[open]::details-content {
	opacity: 1;
}

/* Optional: refine form inside details */
details form {
	padding-block-start: 0.5rem;
}

/* Optional: emphasize open state */
details:has([open]) {
	background: color-mix(in srgb, #0078ff 4%, white);
}

kbd {
  background-color: #eeeeee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow:
    0 1px 1px rgb(0 0 0 / 0.2),
    0 2px 0 0 rgb(255 255 255 / 0.7) inset;
  color: #333333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: bold;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

.upgrade {
    display: flex;
    flex-direction: column;
    gap: 1em;
    background: #5f27cd url("upgrade.gif") center center / cover;
    background-blend-mode: screen;
    color: #ffffff;
    padding: 2em;
    border-color: color-mix(in srgb, #5f27cd 20%, #000 10%);
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.08);
    border-radius: 6px;
    text-align: center;
    font-size: 18px;
}
.upgrade i {
    font-size: 48px;
    filter: drop-shadow(0 0 24px #ff6b6b);
}