@import url("./sp-theme-dark.css");
@import url("./sp-typography.css");
@import url("./sp-buttons.css");
@import url("./sp-modals.css");

body {
    background-color: var(--body-background-color);
    color: var(--base-text-color);
}

a {
    color: var(--link-text-color);
    /*border-bottom: 1px dotted;*/
}
a:active {
    color: var(--link-text-color-active);
    text-decoration: none;
}
a:focus {
    color: var(--link-text-color-focus);
    text-decoration: none;
}
a:hover {
    color: var(--link-text-color-hover);
    text-decoration: none;
}
a:disabled, a.disabled {
    color: var(--link-text-color-disabled);
    text-decoration: none;
}
a:not([href]):not([tabindex]),
a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
    color: unset;
    text-decoration: unset;
}
a.link,
a.link:hover,
a.link:focus,
a.link:active,
a.link:disabled,
a.link.disabled {
    color: var(--link-text-color);
    text-decoration: none;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    border-bottom-color: var(--base-text-color);
}
a.link:hover {
    color: var(--link-text-color-hover);
    border-bottom-color: var(--link-text-color-hover);
}
a.link:focus {
    color: var(--link-text-color-focus);
    border-bottom-color: var(--link-text-color-focus);
}
a.link:active {
    color: var(--link-text-color-focus);
    border-bottom-color: var(--link-text-color-active);
}
a.link:disabled, a.link.disabled {
    color: var(--link-text-color-disabled);
    border-bottom-color: var(--link-text-color-disabled);
}

select {
    background-color: var(--select-background-color);
    color: var(--select-text-color);
}

select option {
    background-color: var(--select-option-background-color);
    color: var(--link-text-color);
}

.active-screencast {
    border-left-color: var(--active-screencast-left-border-color) !important;
}

.analytics-popover-header {
    background-color: var(--analytics-popover-header-color);
}

.publish-block .flatpickr-input,
.unpublish-block .flatpickr-input {
    background-color: var(--flatpickr-input-background-color);
}

.popover a {
    color: var(--popover-link-text-color);
}
.popover a:hover {
    color: var(--popover-link-text-color-hover);
    border-bottom-color: var(--popover-link-underline-color-hover);
}
.popover a:focus {
    color: var(--popover-link-text-color-focus);
}
.popover a:active {
    color: var(--popover-link-text-color-active);
}

.tabs a {
    color: var(--tab-button-link-text-color);
}
.tabs a:hover {
    color: var(--tab-button-link-text-color-hover);
}
.tabs a:focus {
    color: var(--tab-button-link-text-color-focus);
}
.tabs a:active {
    color: var(--tab-button-link-text-color-active);
}

.table, .table th, .table td {
    color: var(--base-text-color);
}
.table tr {
    border-bottom-color: var(--separator-color);
}
.table tbody tr {
    background-color: var(--table-background-color);
}
.table thead th {
    background-color: var(--table-header-row-background-color);
    color: var(--base-text-color);
}
.table thead th a, .table tbody td a {
    color: var(--table-cell-link-color);
}
.table thead th a:hover, .table tbody td a:hover,
.table thead th a:active, .table tbody td a:active {
    color: var(--table-cell-link-color-hover);
}
.table-hover tbody tr:hover {
    background-color: var(--table-row-bakground-color-hover);
    color: var(--sp-white);
}
.table-light tbody tr {
    background-color: var(--table-light-row-background-color);
}
.table-light tbody tr:hover {
    background-color: var(--table-light-row-bakground-color-hover);
}
.table-transparent tbody tr {
    background-color: var(--table-transparent-row-background-color);
}
.table-transparent tbody tr:hover {
    background-color: var(--table-transparent-row-bakground-color-hover);
}

.trends-table td {
    font-size: var(--text-size-lg);
}
.trends-table td.numeric {
    font-size: var(--text-size-sm);
}
.trends-table td.percentage {
    font-size: var(--text-size-xl);
}
.trends-table td.trends-table-column-title {
    font-size: var(--text-size-sm);
}
.trends-table thead th.trends-table-th-lable {
    background-color: var(--analytics-trends-table-th-label-background-color);
    border-color: var(--analytics-trends-table-th-label-border-color);
    color: var(--analytics-trends-table-th-label-color);
}
.trends-table thead tr.trends-thead-border {
    border-top: var(--analytics-trends-table-thead-border-top-color);
    border-bottom: var(--analytics-trends-table-thead-border-bottom-color);
    border-right: var(--analytics-trends-table-thead-border-right-color);
    border-left: var(--analytics-trends-table-thead-border-left-color);
}
.trends-table tbody tr {
    border-top: var(--analytics-trends-table-tbody-border-top-color);
    border-bottom: var(--analytics-trends-table-tbody-border-bottom-color);
    border-right: var(--analytics-trends-table-tbody-border-right-color);
    border-left: var(--analytics-trends-table-tbody-border-left-color);
}
.trends-table td.trends-table-column-title {
    color: var(--analytics-trends-table-column-title-color);
}

.heatmap-table thead tr {
    border-bottom-color: var(--analytics-heatmap-table-thead-border-bottom-color);
}
.heatmap-table tbody tr {
    border-bottom-color: var(--analytics-heatmap-table-tbody-border-bottom-color);
}

.dropdown-menu {
    color: var(--base-text-color);
    background-color: var(--dropdown-background-color);
}
.dropdown-item {
    color: var(--dropdown-link-text-color);
}
.dropdown-item:active {
    background-color: var(--dropdown-link-background-color-active);
    color: var(--dropdown-link-text-color-active);
}
.dropdown-item:focus {
    background-color: var(--dropdown-link-background-color-focus);
    color: var(--dropdown-link-text-color-focus);
}
.dropdown-item:hover {
    background-color: var(--dropdown-link-background-color-hover);
    color: var(--dropdown-link-text-color-hover);
}
.dropdown-item:disabled, .dropdown-item.disabled {
    background-color: var(--dropdown-link-background-color-disabled);
    color: var(--dropdown-link-text-color-disabled);
}
.dropdown-menu a.dropdown-item {
    color: var(--link-text-color);
}
.dropdown-menu a.dropdown-item:hover {
    color: var(--link-text-color);
}

.form-control {
    background-color: var(--form-control-background-color);
    color: var(--form-control-color);
    border-radius: 20px;
}
.form-control::placeholder {
    color: var(--form-control-placeholder-color);
}
.form-control:focus {
    background-color: var(--form-control-background-color-focus);
    color: var(--form-control-color-focus);
}
.form-control:disabled, .form-control.disabled, .form-control[readonly] {
    background-color: var(--form-control-background-color-disabled);
    color: var(--form-control-color-disabled);
}
.form-control::placeholder {
    color: var(--form-control-placeholder-color);
}

.help-card {
    background-color: var(--help-card-backgroud-color);
    color: var(--help-card-text-color);
}

.info-list .active {
    border-bottom-color: var(--active-tab-bottom-border-color);
}

.input-group .input-group-prepend .btn,
.input-group .input-group-append .btn,
.input-group .input-group-addon .btn,
.input-group .input-group-append .input-group-text {
    background-color: var(--form-control-background-color);
    border-color: var(--form-control-border-color);
    color: var(--form-control-color);
}

.alert.alert-success {
    background-color: var(--alert-success-background-color);
    border-color: var(--alert-success-border-color);
    color: var(--alert-success-color);
}
.alert.alert-success a {
    color: var(--alert-success-link-color);
}
.alert.alert-success i.fa {
    color: var(--alert-success-icon-color);
}
.alert.alert-danger {
    background-color: var(--alert-danger-background-color);
    border-color: var(--alert-danger-border-color);
    color: var(--alert-danger-color);
}
.alert.alert-danger a {
    color: var(--alert-danger-link-color);
}
.alert.alert-danger i.fa {
    color: var(--alert-danger-icon-color);
}

hr {
    background-color: var(--separator-color);
    border-color: var(--separator-color);
}

.body-background-color {
    background-color: var(--body-background-color);
}

.commenting-box-footer-bg-color {
    background-color: var(--commenting-box-footer-bg-color);
}

.comment,
.commenting-button-container {
    border-color: var(--form-control-border-color);
}

.highlight-comment-background {
    background-color: var(--commenting-box-highlight-background-color);
}

.filters .filter-item,
.filters .filter-item:visited,
.filters .filter-item:active,
.filters .filter-menu-header {
    color: var(--link-text-color);
    font-size: var(--text-size-base);
}

.navbar-separator {
    background-color: var(--navbar-separator-color);
}

.primary-nav-background-color {
    background-color: var(--primary-nav-background-color);
}

.side-section:first-child,
.side-section.selected {
    border-color: var(--side-section-border-color);
}

.screencasts .card-body, .quizzes .card-body {
    background-color: var(--media-card-body-background-color);
}

.screenpal-dropdown {
    background-color: var(--screenpal-dropdown-background-color);
    color: var(--screenpal-dropdown-text-color);
}

code {
    color: var(--base-text-color);
}
code.info {
    color: var(--info-text-color);
}

.guides-text-blue {
    color: var(--guide-text-blue-color);
}
.guides-text-green {
    color: var(--guide-text-green-color);
}
.guides-text-yellow {
    color: var(--guide-text-yellow-color);
}
.guides-text-pink {
    color: var(--guide-text-pink-color);
}
.guides-text-purple {
    color: var(--guide-text-purple-color);
}

.counter-component button.btn-minus, .counter-component button.btn-plus {
    background-color: var(--counter-component-button-background-color);
    border: 1px solid var(--counter-component-border-color);
    color: var(--counter-component-button-text-color);
}
.counter-component input {
    border: var(--counter-component-border-color);
    background-color: var(--counter-component-input-background-color);
    color: var(--counter-component-input-text-color);
    font-size: var(--text-size-base);
    font-weight: var(--font-weight-semi-bold);
}
.counter-component button.btn-minus:hover, .counter-component button.btn-plus:hover {
    background-color: var(--counter-component-button-background-color-hover);
}
.count-component button.btn-minus:focusm .count-component button.btn-plus:focus {
    outline-color: var(--input-outline-color-focus);
}
.counter-component input:focus {
    background-color: var(--counter-component-input-background-color-focus);
    color: var(--counter-component-input-text-color-focus);
    outline-color: var(--input-outline-color-focus);
}
/*.minus-box, .plus-box {*/
/*    background-color: var(--color-primary-hover);*/
/*    border: 1px solid var(--color-primary-hover);*/
/*}*/

.card-body {
    background-color: var(--modify-plan-card-body-backgroud-color);
}

nav.nav-pagination .page-item.disabled .page-link,
nav.nav-pagination .page-item:disabled .page-link {
    background-color: var(--color-primary-outline-background-disabled);
    border-color: var(--color-primary-outline-border-disabled);
}

.page-link {
    background-color: var(--color-primary-outline-background);
    border-color: var(--color-primary-outline-border);
    color: var(--color-primary-outline);
}
.page-link:hover {
    background-color: var(--color-primary-outline-background-hover);
    border-color: var(--color-primary-outline-border-hover);
    color: var(--color-primary-outline-hover);
}

.password-page-text {
    color: var(--password-page-text-color)
}

.recorder-buttons {
    background-color: var(--recorder-buttons-background-color);
    color: var(--recorder-buttons-text-color);
}

.question-block {
    background-color: var(--question-block-background-color);
}

.question-plus {
    background-color: var(--question-plus-background-color);
}

.question-plus::after {
    color: var(--question-plus-icon-color);
}

.jstree-default .jstree-wholerow-clicked {
    background: var(--sidebar-nav-link-background-color-selected);
    border-left-color: var(--sidebar-nav-link-left-border-color-selected);
}

.solo-deluxe-card {
    border: 1px solid var(--solo-deluxe-card-color);
}

.solo-deluxe-card-title {
    color: var(--solo-deluxe-card-title-color);
}

.solo-deluxe-card-box {
    box-shadow: 0 0 5px var(--solo-deluxe-card-color);
    border: 1px solid var(--solo-deluxe-card-color);
}

.solo-deluxe-card-footer {
    background-color: var(--solo-deluxe-card-footer-color);
}

.solo-deluxe-card-hover:hover {
    border: 1px solid var(--solo-deluxe-card-hover-color);
}

.solo-premier-card {
    border: 1px solid var(--solo-premier-card-color);
}

.solo-premier-card-title {
    color: var(--solo-premier-card-title-color);
}

.solo-premier-card-box {
    box-shadow: 0 0 7px var(--solo-premier-card-color);
    border: 1px solid var(--solo-premier-card-color);
}

.solo-premier-card-footer {
    background-color: var(--solo-premier-card-footer-color);
}

.solo-premier-card-hover:hover {
    border: 1px solid var(--solo-premier-card-hover-color);
}

.solo-max-card {
    border: 1px solid var(--solo-max-card-color);
}

.solo-max-card-title {
    color: var(--solo-max-card-title-color);
}

.solo-max-card-box {
    box-shadow: 0 0 7px var(--solo-max-card-color);
    border: 1px solid var(--solo-max-card-color);
}

.solo-max-card-footer {
    background-color: var(--solo-max-card-footer-color);
}

.solo-max-card-hover:hover {
    border: 1px solid var(--solo-max-card-hover-color);
}

.solo-card-footer-text {
    color: var(--color-secondary-text-active);
    font-weight: var(--font-weight-semi-bold);
}

.solo-card-price {
    font-size: var(--text-size-3xl);
}

.team-modify-plan {
    border: 1px solid var(--team-plan-modify-card-color);
    color: var(--team-plan-modify-card-color);
}

.team-modify-plan-title {
    color: var(--team-plan-modify-card-title-color);
}

.team-modify-plan-box {
    box-shadow: 0 0 7px var(--team-plan-modify-card-color);
    border: 1px solid var(--team-plan-modify-card-color);
}

.team-modify-plan-footer {
    background-color: var(--team-plan-modify-card-color);
}

.team-current-plan {
    border: 1px solid var(--team-current-plan-card-color);
    color: var(--team-current-plan-card-color);
}

.team-current-plan-hover:hover {
    border: 1px solid var(--team-current-plan-card-hover-color);
}

.team-current-plan-title {
    color: var(--team-current-plan-card-title-color);
}

.team-current-plan-box {
    box-shadow: 0 0 7px var(--team-current-plan-card-color);
    border: 1px solid var(--team-current-plan-card-color);
}

.team-current-plan-footer {
    background-color: var(--team-current-plan-card-color);
}

.team-upgrade-plan {
    border: 1px solid var(--team-upgrade-plan-card-color);
}

.team-upgrade-plan-title {
    color: var(--team-upgrade-plan-card-title-color);
}

.team-upgrade-plan-hover:hover {
    border: 1px solid var(--team-upgrade-plan-card-hover-color);
}

.team-upgrade-plan-box {
    box-shadow: 0 0 7px var(--team-upgrade-plan-card-color);
    border: 1px solid var(--team-upgrade-plan-card-color);
}

.team-upgrade-plan-footer {
    background-color: var(--team-upgrade-plan-card-color);
}

.tram-card-footer-text, .plan-team-card-bottom {
    color: var(--color-secondary-text-active);
    font-weight: var(--font-weight-semi-bold);
}

.team-card-price {
    font-size: var(--text-size-3xl);
}

.label-toggle label {
    background-color: var(--color-primary);
}

.label-toggle label .toggle {
    background-color: var(--color-primary-hover);
    border: 1px solid var(--color-primary-border);
}

.label-toggle [type="checkbox"] + label .labels .option-off {
    color: var(--base-text-color);
}

.label-toggle [type="checkbox"] + label .labels .option-on {
    color: var(--color-secondary-text-hover);
}

.label-toggle [type="checkbox"]:checked + label .labels .option-off {
    color: var(--base-text-color);
}

.label-toggle [type="checkbox"]:checked + label .labels .option-on {
    color: var(--color-secondary-text-hover);
}

#player-transcoding-spinner {
    background-color: var(--player-spinner-background-color);
}

.list-group-item {
    background-color: var(--list-group-item-background-color);
    border-color: var(--list-group-item-border-color);
}

.transcoding-message {
    color: var(--color-transcoding-message-text);
}
.transcoding-message-title {
    color: var(--color-transcoding-message-title-text);
}

.users-form .shared .resultitem.removed {
    background-color: var(--color-users-form-item-removed-background);
    border-left-color: var(--color-users-form-item-removed-border);
    color: var(--color-users-form-item-removed-text);
}
.users-form .shared .resultitem.new {
    background-color: var(--color-users-form-item-added-background);
    border-left-color: var(--color-users-form-item-added-border);
    color: var(--color-users-form-item-added-text);
}
.users-form .resultitem + .resultitem:hover {
    background-color: var(--table-row-bakground-color-hover);
}
.users-form .resultitem + .resultitem.removed:hover {
    color: var(--color-users-form-item-removed-text-hover);
    background-color: var(--color-users-form-item-removed-background-hover);
}
.users-form .resultitem + .resultitem.added:hover {
    color: var(--color-users-form-item-added-text-hover);
    background-color: var(--color-users-form-item-added-background-hover);
}

.tooltip-highlighted {
    color: var(--tooltip-text-color);
}
.tooltip-highlighted .tooltipster-box {
    background: var(--tooltip-background-color);
    border: 2px solid var(--tooltip-arrow-color);
    font-weight: lighter;
}
.tooltip-highlighted .tooltipster-arrow .tooltipster-arrow-background {
    border-top-color: var(--tooltip-arrow-color);
}

.tooltip-included-channels {
    color: var(--tooltip-text-color);
}

.tooltip-inner {
    font-weight: var(--font-weight-light);
    background-color: var(--tooltip-background-color);
    color: var(--tooltip-text-color);
}
.tooltip-inner a {
    font-weight: var(--font-weight-regular);
    color: var(--tooltip-link-color) !important;
}

.tooltip-title {
    font-size: var(--text-size-base);
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,
.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: var(--tooltip-arrow-color);
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before,
.tooltip.bs-tooltip-right .arrow::before {
    border-top-color: var(--tooltip-arrow-color);
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.tooltip.bs-tooltip-bottom .arrow::before {
    border-top-color: var(--tooltip-arrow-color);
}

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before,
.tooltip.bs-tooltip-left .arrow::before {
    border-top-color: var(--tooltip-arrow-color);
}

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before,
.tooltip.bs-tooltip-right .arrow::before {
    border-top-color: var(--tooltip-arrow-color);
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,
.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: var(--tooltip-arrow-color);
}

.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--tooltip-arrow-color);
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-box {
    background: var(--tooltip-background-color);
}
.tooltipster-sidetip.tooltipster-shadow .tooltipster-content {
    color: var(--tooltip-text-color);
    font-size: var(--text-size-sm);
}
.tooltipster-sidetip.tooltipster-shadow.tooltipster-bottom .tooltipster-arrow-border {
    border-bottom-color: var(--tooltip-arrow-color);
}
.tooltipster-sidetip.tooltipster-shadow.tooltipster-left .tooltipster-arrow-border {
    border-left-color: var(--tooltip-arrow-color);
}
.tooltipster-sidetip.tooltipster-shadow.tooltipster-right .tooltipster-arrow-border {
    border-right-color: var(--tooltip-arrow-color);
}
.tooltipster-sidetip.tooltipster-shadow.tooltipster-top .tooltipster-arrow-border {
    border-top-color: var(--tooltip-arrow-color);
}

.upload-field {
    background-color: var(--upload-field-background-color);
    border-color: var(--upload-field-border-color);
    color: var(--upload-field-text-color);
}

.upload-item {
    background-color: var(--upload-item-background-color);
    color: var(--upload-item-text-color);
}

ul.ui-widget-content {
    background-color: var(--ui-autocomplete-background-color);
    border: transparent;
    color: var(--ui-autocomplete-color);
}

ul.ui-widget-content a {
    color: var(--ui-autocomplete-color);
}

.ui-autocomplete .ui-menu-item .ui-state-active {
    background-color: var(--ui-autocomplete-hover-background-color);
}

.losing-features-list {
    background-color: var(--losing-features-list-background-color);
}

.form-check-input {
    background-color: var(--radio-button-background-color);
    border-color: var(--radio-button-background-color);
}
.form-check-input:checked {
    background-color: var(--radio-button-background-color-checked);
    border-color: var(--radio-button-background-color-checked);
}
.form-check-input:checked[type=radio] {
    background-image: var(--radio-button-background-image-checked);
}

.trends-thumbnail {
    border-color: var(--analytics-trends-thumbnail-border-color);
}

.trends-table button, .heatmap-table button {
    color: var(--analytics-tables-button-color);
}

.trends-table label.checkbox-legend {
    background-color: var(--analytics-trends-table-label-checkbox-legend-background-color);
}

#video-trends-chart-wrapper {
    background-color: var(--analytics-trends-chart-background-color);
}

#lastViewed .metric-result {
    font-size: var(--text-size-4xl);
}

.trends-table-border-left {
    border-left: var(--analytics-trends-table-border-left-color) !important;
}

.heatmap-chart-wrapper {
    background-color: var(--heatmap-chart-wrapper-background-color);
}

.heatmap-chart {
    border-bottom-color: var(--heatmap-chart-border-bottom-color);
}

.heatmap-percentage {
    background-color: var(--heatmap-percentage-background-color);
    color: var(--heatmap-percentage-color);
}

.metric {
    font-weight: var(--font-weight-light);
}

.metric-card, .metric-card-sm {
    background-color: var(--analytics-metric-card-background-color);
}

.metric-result {
    font-size: var(--text-size-4xl);
}

.metric-title {
    color: var(--analytics-metric-title-color);
}

.select-all-checkbox > i {
    font-size: var(--text-size-lg);
}
.select-all-checkbox > label {
    font-weight: var(--font-weight-bold);
    color: var(--select-all-checkbox-label-color);
}

.selectOverlay {
    background-color: var(--select-overlay-background-color);
    color: var(--select-overlay-color);
    font-size: var(--text-size-lg);
}

.bs-popover-auto[x-placement^=right]>.arrow::after,
.bs-popover-right>.arrow::after {
    border-right-color: var(--popover-arrow-border-color);
}

.bs-popover-auto[x-placement^=left]>.arrow::after,
.bs-popover-left>.arrow::after {
    border-left-color: var(--popover-arrow-border-color);
}

.popover.screencast-popover,
.popover.channel-popover,
.popover.quiz-popover {
    background-color: var(--popover-background-color);
    color: var(--popover-text-color);
}

.position-picker[disabled="disabled"],
.position-picker.disabled {
    background-color: var(--position-picker-disabled-background-color);
}
.position-picker-position {
    color: var(--position-picker-position-color);
}
.position-picker-position:after {
    color: var(--position-picker-position-after-color);
    font-size: var(--text-size-3xl);
}
.position-picker .position-picker-position[checked="checked"]:after {
    color: var(--position-picker-position-checked-after-color);
    background-color: var(--position-picker-position-checked-after-background-color);
    font-weight: var(--font-weight-black);
}

.sort-button,
.sort-button:active,
.sort-button:focus,
.sort-button:focus-visible {
    color: var(--analytics-sort-button-color);
    font-weight: var(--font-weight-regular);
}

.som-checkbox:not(disabled), .som-checkbox:not(:disabled),
.som-checkbox + label {
    cursor: pointer;
}
.som-checkbox:after {
    background-color: var(--checkbox-background-color);
    color: var(--checkbox-background-color);
    font-weight: var(--font-weight-black);
    font-size: var(--text-size-xl);
    font-family: "Font Awesome 5 Free";
    line-height: .75em;
    vertical-align: 1em;
    display: block;
    width: 16px;
    height: 15px;
    outline: none;
    content: "\f0c8";
}
.som-checkbox:checked:after {
    background-color: var(--checkbox-background-color);
    color: var(--checkbox-color-checked);
    content: "\f14a";
}
.som-checkbox:disabled:after:not(:checked), .som-checkbox.disabled:after:not(:checked) {
    color: var(--checkbox-color-disabled) !important;
    background-color: var(--checkbox-background-color-disabled) !important;
}

.user-circle {
    background-color: var(--user-circle-background-color);
    border-color: var(--user-circle-border-color);
    color: var(--user-circle-text-color);
}
.user-circle.small.bg-ligthgray {
    background-color: var(--sp-gray-300) !important;
}

.btn:focus, .btn.focus,
button:focus, button:focus-visible, button:focus-within,
input:focus, input:focus-visible, input:focus-within {
/* a:focus, a:focus-visible, a:focus-within { */
    outline: none;
    box-shadow: 0 0 0 3px var(--sp-element-focus-ring-color);
    z-index: 1000;
}

#status.error {
    color: var(--sp-red-400);
}

#sidebar .sidebar-box .brand-section {
    background-color: var(--sidebar-brand-section-background-color);
}
.sidebar-content {
    background-color: var(--sidebar-background-color);
}
.sidebar-action-link, .sidebar-action-link button.nav-link {
    color: var(--link-text-color);
}
.sidebar-action-link .nav-link.current {
    background-color: var(--sidebar-nav-link-background-color-selected);
}

@media (min-width: 992px) {
    .border-channel-consumption {
        border-color: var(--channel-consumption-border-color) !important;
        border-width: 1px !important;
        border-right: 1px solid;
    }

    .box-screencast-entry {
        padding: 10px;
        border-top: 1px solid var(--channel-consumption-box-screencast-border-color);
    }

    .box-screencasts {
        border-bottom: 1px solid var(--channel-consumption-box-screencast-border-color);
    }
}

@media (max-width: 991px) {
    #lastViewed .metric-result {
        font-size: var(--text-size-2xl);
    }
}