@charset "UTF-8";

@import url("./sp-theme.css");

html, body {
    margin: 0;
    height: 100%;
}

body {
    padding-top: 7rem;
}

input[type=radio], input[type=checkbox] {
    cursor: pointer;
}

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

.nav-item:not(.current) a.text-dark {
    color: var(--base-text-color)!important;
}
.nav-item.current a.text-dark {
    color: var(--sp-white)!important;
    font-weight: var(--font-weight-medium)!important;
}

/*.btn-filter-dropdown {*/
/*    background-color: var(--form-control-background-color);*/
/*    border-color: var(--form-control-border-color);*/
/*    color: var(--form-control-color);*/
/*}*/


div.darken {
    display: inline-block;
    padding: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
div.darken.loading-throbber {
    background: linear-gradient(to right, var(--sp-pink-500-op-20), var(--sp-blue-500-op-20));
}
div.darken div.overlay-header div div div i.fa-square {
    color: var(--sp-white) !important;
}
div.darken .card-img-top {
    width: 100%;
    height: 160px;
    max-height: 180px;
    overflow: hidden;
    position: relative;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
div.darken .card-img-top.loading-throbber {
    width: 80px;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}
div.darken .card-img-top img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
div.darken:hover div.overlay-center,
div.darken:hover div.overlay-header {
    opacity: 1;
}
div.darken:hover img.card-img-top {
    opacity: 0.1;
}
div.darken:hover img.card-img-top.darken.placeholder-img {
    opacity: 0.3;
}
div.darken div.tile-double-first img {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
div.darken div.tile-double-second img {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
div.darken div.tile-double-second img.tile-third {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
div.flatpickr-calendar.static.open {
    outline-width: 1px;
    outline-style: solid;
}
img.visibility-icon-md {
    height: 30px;
}

img.visibility-icon-sm {
    height: 22px;
}

label.show-error {
    font-size: 14px;
    line-height: 16px;
}

legend {
    border-bottom: 1px solid var(--separator-color);
    color: var(--base-text-color);
    font-size: var(--text-size-2xl);
    font-weight: var(--font-weight-light);
    line-height: 37px;
    text-shadow: 0 0 8px 0 var(--sp-white), 0 0 55px 0 var(--sp-white);
}

select.is-invalid {
    background-image: none !important;
}

table .cropped-text {
    display: block;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

textarea.description {
    min-height: 36px;
    line-height: 1.5;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

.hide-default-resizer::-webkit-resizer {
    display: none;
}

.custom-resizer-wrapper {
    display: inline-block;
    position: relative;
}

.pull-tab {
    position: absolute;
    right: 0.5px;
    bottom: 7.5px;
    width: 12px;
    border-radius: 25%;
    border-top: 2px solid #fff;
    transform: rotate(-45deg);
    z-index: 2;
}

.pull-tab::after {
    content: '';
    position: absolute;
    right: 3px;
    bottom: -4px;
    width: 6px;
    border-radius: 25%;
    border-top: 2px solid #fff;
}

textarea.notes {
    border: 0;
    resize: none;
}

th[type-sort="visibility"] {
    text-align: right;
}

ul.pagination li + li {
    margin-left: 10px;
}

.action-navbar-wrapper {
    background-color: var(--action-nav-background-color);
    color: var(--action-nav-link-text-color);
    line-height: 3rem;
    padding-left: 15px;
}
.action-navbar-wrapper  a {
    line-height: 3rem;
}
.action-navbar-wrapper ul {
    float: left;
}

.add-caption {
  height: 1rem;
}

#add-caption-button {
  cursor: pointer;
}

.add-caption-button {
  color: #549fd7;
  cursor: pointer;
  height: 38px;
}

.alert.alert-success,
.alert.alert-warning,
.alert.alert-danger,
.alert.alert-error,
.alert.alert-info {
    border-width: 2px;
    border-style: solid;
}

.alert-action-button {
    margin-top: .5rem;
}

.flatpickr-input {
    border-right-width: 1px;
    cursor: pointer;
}

.analytics-line-item {
  display: flex;
  flex-wrap: nowrap;
  background-color: #FFF;
  margin-bottom: 10px;
  min-height: 100px;
}

.analytics-line-item > div {
  background-color: #FFF;
  width: 300px;
  margin: 10px;
}

.analytics-title {
  color: #9B9B9B;
}

.animated-placeholder {
    background: linear-gradient(270deg, var(--sp-gray-500), var(--sp-blue-200), var(--sp-gray-700));
    background-size: 600% 600%;
    animation: animated-placeholder-gradient 2s ease infinite;
    height: 24px;
    margin: 1px 0;
    display: inline-block;
    opacity: 0.5;
    border-radius: 4px;
}
@keyframes animated-placeholder-gradient {
    0% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0 50%
    }
}
.app-badge {
    width: 160px;
}

.auth_buttons .login,
.auth-buttons .login {
    padding: 15px 10px;
    margin: 0;
    display: block;
    font-size: 16px;
    line-height: 22px;
    color: var(--top-nav-color);
    font-weight: var(--font-weight-bold);
    font-style: normal;
    position: relative;
}
.auth_buttons .login:hover,
.auth-buttons .login:hover {
    color: var(--top-nav-hover-highlight);
}
.auth_buttons .login:after,
.auth-buttons .login:after {
    content: "";
    display: block;
    height: 5px;
    background-color: var(--top-nav-hover-highlight);
    position: absolute;
    top: -16px;
    left: 0;
    width: 0;
    transition: width .5s cubic-bezier(.77, 0, .175, 1);
}
.auth_buttons .login:hover:after,
.auth-buttons .login:hover:after {
    width: 100%;
}

.auth_buttons .register,
.auth-buttons .register {
    font-weight: var(--font-weight-bold);
    padding: 12px 20px;
    margin-left: 10px;
    background-color: var(--sp-cta-button-background);
    border-radius: 25px;
    color: var(--top-nav-color) !important;
}
.auth_buttons .register:hover,
.auth-buttons .register:hover {
    background-color: var(--sp-cta-button-background-hover);
}

.background-main, .background-main > .row  {
    background-color: var(--body-background-color);
}

.background-on-hover {
    cursor: pointer;
    display: inline-block;
    background-size: 0;
}

.background-on-hover:hover {
    background-size: 44px 44px;
}

.background-on-hover:hover img {
    opacity: 0!important;
}

.background-on-hover-list {
    cursor: pointer;
    display: inline-block;
    background-size: 0;
}

.background-on-hover-list img {
    width: 29px;
    height: 29px;
}

.background-on-hover-list:hover {
    background-size: 29px 29px;
}

.background-on-hover-list:hover img {
    visibility: hidden;
}

.bar {
    position: absolute;
    top: -10px;
    right: -35px;
    font-size: 55px;
    color: #FFF;
    text-shadow: 2px 2px 4px #000000;
    cursor: pointer;
}

.beta-feature {
    display: none;
}

.block-current-video {
    margin-bottom: 1rem;
}

.block-folder-path {
    background-color: transparent;
    padding: 1rem;
    margin-bottom: 1rem;
}

.border-transparent {
    border-color: transparent !important;
}

.border-2 {
    border-width: 2px !important;
}

.bulkIcons {
    margin-bottom: 1rem;
}

.button-checkbox button {
    padding: 1px 0 2px 3px;
}

.calendarBtn {
    cursor: pointer;
    background-color: #fff;
    border-left: 0;
}

.captions-divider {
  border-top: solid;
  color: #eaeaea;
}

.caption-icon {
  color: #549fd7;
}

.caption-spinner {
  height: 30px;
}

.caption-section-title {
  font-size: 14px;
}

body:not(.passport-authorize) .card:not(.modify-plan-box) {
    margin-bottom: 25px;
    max-height: 270px;
    border: 1px solid var(--media-card-border-color);
    border-radius: 10px;
    background-color: transparent!important;
    box-shadow: none;
}
body:not(.passport-authorize) .card:not(.modify-plan-box) .card-body:not(.modify-plan-box) {
    border-radius: 10px;
}
.card.no-hover:hover {
    box-shadow: none!important;
}
body:not(.passport-authorize) .card:has(.dragbox-container):hover {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
body:not(.passport-authorize) .card:has(.dragbox-container):hover .card-body {
    border-bottom-left-radius: 0;
}
body:not(.passport-authorize) .card:has(.dragbox-container):hover div.darken img {
    border-top-left-radius: 0;
}
body:not(.passport-authorize) .card:has(.dragbox-container):hover div.darken {
    border-top-left-radius: 0;
    border-top-right-radius: 10px;
}
.card.awaiting-approval {
    border-radius: 14px;
    flex: 0 1 auto;
    margin-bottom: 1.5rem;
}
.card.awaiting-approval .card-body {
    padding: .5rem 1.5rem;
}
.card.awaiting-approval .card-title {
    margin-bottom: .1rem;
    text-align: center;
    line-height: 2rem;
    font-weight: var(--font-weight-thin);
}
.card.awaiting-approval .user-count {
    font-size: 2.25rem;
}
.card .card-text.with-owner-icon {
    margin-top: -1.25rem;
}
.card .card-title,
.card .card-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card .card-text img.icon {
    height: 13px;
}
.card .plan-card-text {
    overflow: visible;
}
.card .card-title .card-title-text {
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.2px;
    overflow: hidden;
    padding-left: .5rem;
    text-overflow: ellipsis;
    padding-right: .5rem;
}
.card .card-title .user-circle {
    margin-top: 12px;
}
.card .card-title > img {
    display: block;
    position: relative;
    top: 2px;
}
.card-body-custom {
    flex: 1 1 auto;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}
.card-drag-placeholder {
    background-color: #000;
    opacity: 0.3;
    margin: 0 15px 25px;
}
.card-grid-checkbox {
    position: absolute;
    top: 9px;
    left: 12px;
}
.card-grid-checkbox .icon-checkbox .fa-square.text-muted {
    color: var(--media-card-overlay-color) !important;
}
.card-grid-ellips-menu {
    position: absolute;
    top: 3px;
    right: 12px;
}
.card-link,
.card-link:hover {
    color: var(--media-card-link-color);
    text-decoration: none;
}
.card-part-bottom {
    align-items: flex-end;
    margin-top: -0.75rem;
    min-height: 36px;
}

.changeNoteForm {
    margin-bottom: 1rem;
}

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

.channel-icon-shared {
    color: silver;
}

.channel-item-overflow {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 1px;
}

.channel-list-scrollable {
    max-height: 360px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.channel-popover-count,
.quiz-popover-count {
    margin-left: 30px;
}

.channels .card-body {
    padding: .75rem;
}

.channels .card-title {
    margin-bottom: 0;
}

.channel-visibility-sidebar {
    width: 25px;
    height: 25px;
}

.class_checkbox:active,
.select-item:active,
.icon-checkbox > i,
.input-group-prepend > .colorpicker-input-addon {
    outline: none;
}


.cloud-image {
    width: 220px;
}

.cloud-image-container {
    height: 140px;
}

#content-image {
    color: #0F62FE;
}

.code-preview-block {
    height: 82%;
}

.content.channel-details {
    min-height: calc(100vh - 150px);
    bottom: 0;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 30px;
    right: 15px;
    left: 40px;
}

.content-video-details {
    overflow: auto;
    background-color: var(--content-details-form-background-color);
    padding-bottom: 1rem;
}
.content-video-details hr {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}
.content-video-details-option.no-selected {
    display: none;
}
.content-video-details-option #channelsForm .table thead th {
    color: var(--base-text-color);
}
.content-video-details-option #channelsForm .table tbody th {
    font-weight: var(--font-weight-light);
    text-transform: none;
    font-size: var(--text-size-base);
}

.count-box {
    width: 240px;
    background-color: var(--color-primary);
    color: #FFF;
    display: none;
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-weight: bold;
    font-size: 16px;
    z-index: 29999;
    position: absolute;
    box-shadow: 3px 3px 5px #939393;
    left: 30px !important;
    visibility: visible;
}

.count-box .thumbnail-frame,
.count-box .branding-frame {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 34px;
}

.cursor-default {
    cursor: default!important;
}
.cursor-pointer {
    cursor: pointer!important;
}

.custom-url,
#add-custom {
    font-weight: normal;
    text-decoration: none;
}

.customize-player {
    font-weight: lighter;
    text-align: left;
}

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

.dark-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1030;
}

.darken:hover .dragbox-container .dragbox .drag-handle .img-responsive,
#table-items.table tr:hover .dragbox-container .dragbox .drag-handle .img-responsive {
    display: inherit;
}

.details .action-icon {
    cursor: pointer;
    background-size: 40px 40px;
    display: inline-block;
    background-repeat: no-repeat;
    width: 40px;
}

.disabled-gray {
    background-color: #e0e0e0;
}

.disable-link {
    pointer-events: none;
}

.div-notes {
    border: 1px solid #C6C6C6;
    border-radius: 10px;
    padding-top: 1em;
    padding-bottom: 1em;
    padding: 0.5em;
}

.dragbox {
    height: 100% !important;
    width: 100%!important;
    position: absolute !important;
    border: 0 !important;
    left: 0px;
    top: 0px;
    touch-action: none;
    z-index: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dragbox-container {
    background: var(--dragbox-container-background-color);
    height: 100% !important;
    width: 27px;
    position: absolute !important;
    left: -27px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.draggable {
    cursor: grab;
}
.draggable-table-row td:first-child {
    position: relative;
}
.draggable-table-row td:first-child .dragbox-container {
    background-color: var(--dragbox-container-background-color);
    height: 100% !important;
    width: 27px;
    position: absolute !important;
    top: 0;
    left: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    display: none;
    margin-left: -27px;
    z-index: 500;
}

.draggable-table-row td:first-child .dragbox-container .dragbox {
    height: 100% !important;
    width: 100%!important;
    position: absolute !important;
    border: 0 !important;
    left: 0px;
    top: 0px;
    touch-action: none;
    z-index: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.draggable-wrapper {
    display: none;
}
.drag-handle {
    cursor: grab;
}
.drag-handle-component {
    top: 20%;
}
.drag-handle-spacer {
    display: none;
    height: 1px!important;
    width: 11px;
}

.dropdown-item > .upgrade-badge {
    margin-bottom: 0;
}
.dropdown-item-upgrade-title {
    color: var(--dropdown-item-upgrade-title-color);
}
.dropdown-menu .dropdown-item.disabled {
    cursor: not-allowed;
    pointer-events: none;
    filter: opacity(.35);
}
.dropdown-menu .dropdown-item img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    margin-bottom: 3px;
}
.dropdown-menu.user {
    border-radius: 4px;
    box-shadow: 0.1rem 0 0.2rem rgba(0, 0, 0, .15);
    padding-bottom: 0px;
    width: 300px;
}
.dropdown-menu.user img.screenpal-dropdown-img {
  width: 174px;
  height: 28px;
  margin-top: 10px;
}
.dropdown-menu.user a.screenpal-dropdown-link {
  display: inline;
}
.dropdown-menu.user img.screenpal-dropdown-img {
  width: 174px;
  height: 28px;
  margin-top: 10px;
}
.dropdown-menu.user .screenpal-section a.screenpal-dropdown-link img {
    position: absolute;
    left: calc(100% - 32px);
    width: 22px;
}
.dropdown-menu.user a {
    display: block;
    float: none;
}
.dropdown-menu img.mobile-logo {
    height: auto;
    width: 170px;
}

.dropdown-menu img.mobile-close-btn {
    height: 32px;
    width: 32px;
}
.dropdown-main-section {
    padding: 1em 5px;
}
.dropdown.ellipsis .dropdown-menu {
    text-transform: initial;
    line-height: 32px;
    z-index: 10000;
}
.dropdown-divider {
    border-top: 1px solid var(--separator-color);
}
.dropdown-menu .qr-icons-section img.icon {
    width: 22px;
}

#profile-dropdown .dropdown-item img {
    margin-right: 14px;
}

#profile-dropdown .dropdown-item-text {
    display: block;
    padding: 0.25rem 1.5rem;
    color: var(--base-text-color);
}
#profile-dropdown .dropdown-item,
#profile-dropdown .dropdown-item-text small {
    font-weight: var(--font-weight-light);
}

.edit-title-waiting {
    pointer-events: none;
    cursor: wait;
}

.ellipsis {
    cursor: pointer;
}

.ellipsisMenu {
    min-height: 27px;
    min-width: 26px;
}

.ellipsis-disabled {
    opacity:0.4;
    pointer-events: none;
}
.ellipsis .dropdown-menu img {
    width: 15px;
    height: 15px;
    margin-right: 7px;
    margin-top: 3px;
    vertical-align: text-top;
}

.embed-channel-image-shadow {
    box-shadow: 0 0 5px grey;
}

.embed-preview-code {
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.extra-bandwidth-section {
    max-height: 100%;
}

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

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

.flex-grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    list-style: none;
}

.folder-icon {
    height: 24px;
}

#folder-path {
    color: var(--breadcrumb-color);
    font-weight: var(--font-weight-thin);
}
#folder-path .folder-path-link, .sp-breadcrumb {
    color: var(--breadcrumb-color);
    font-weight: var(--font-weight-thin);
    max-width: 10%;
    margin-right: .25rem;
    white-space: break-spaces;
}
#folder-path .folder-path-link:hover, .sp-breadcrumb:hover {
    color: var(--breadcrumb-color-hover);
}

.folders .card {
    border-radius: .25rem;
}

.folders-drop-menu {
    position: absolute;
    top: .25rem;
    right: 2rem;
}

.folders-table-background {
    background-color: var(--sp-white);
}

.folders-table-background .icon-checkbox {
    position: absolute;
    padding-top: 5px;
}

.folder-title {
    margin-left: 5px;
    width: 80%;
    font-weight: var(--font-weight-bold);
}

.form-check-label {
    line-height: inherit;
    padding-top: .25rem;
    padding-bottom: .25rem;
}
.form-check-label.disabled {
    color: #cbcbcb;
}
.form-check-input {
    margin-top: .25rem;
}


.inline-icon {
    height: 1rem;
}
.inline-icon-xs {
    height: 0.5rem;
}
.inline-icon-sm {
    height: 0.75rem;
}
.inline-icon-md {
    height: 1.25rem;
}
.inline-icon-lg {
    height: 1.5rem;
}
.inline-icon-xl {
    height: 2rem;
}


.form-group > label,
.col label {
    margin-top: .5rem;
    margin-bottom: 0;
}

.form-input {
    border: 1px solid var(--form-control-border-color);
    color: var(--form-control-color);
    font-size: 16px;
    line-height: 37px;
    border-radius: .25rem;
}

.frame {
    width: 95%;
    height: 95%;
}

.general-alert {
    left: 50%;
    position: fixed;
    top: 1%;
    transform: translateX(-50%);
    width: 80%;
    z-index: 2000 !important;
}

.git-branch-overlay {
    display: flex;
    align-items: center;
    padding: .25em .5em;
    color: #333333;
    font-size: .75em;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(175, 175, 175, 0.85);
    z-index: 10000;
}

.group-with-user-link {
    margin-right: 22.25rem !important;
}

.h-30 {
    max-height: 30%;
}

.has-search .form-control {
    padding-right: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 999;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    cursor: pointer;
    color: #aaa;
    right: 15px;
}

.header-content label {
    margin-bottom: 0;
}

.help-card {
    border-radius: 20px;
}

.hidden-link {
    left: -9999px;
    position: fixed;
}

.holder {
    width: 100%;
    height: 100%;
    position: relative;
}

.icon-blue {
    color: #0F62FE;
}

.img-responsive {
    display: none;
}

.image-popover {
    min-width: 130px;
    max-width: 200px;
    color: #16181b !important;
    text-decoration: none;
}

.image-popover a {
    color: #16181b !important;
    text-decoration: none;
}

.image-popover .row:hover {
    background-color: #f8f9fa;
}

.info-table-row {
    align-items: center;
    font-weight: var(--font-weight-regular);
    padding-bottom: .5rem;
    padding-top: .5rem;
    background: var(--sp-white);
    border-bottom: 1px solid lightgray;
    border-top: 1px solid lightgray;
}
.info-table-row a:hover {
    text-decoration: none;
}

.inline-alert {
    color: #333333;
    border-radius: .25rem;
    display: inline-block;
    font-size: 75%;
    font-weight: var(--font-weight-regular);
    line-height: 1;
    padding: .5rem;
    text-align: center;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    vertical-align: baseline;
    white-space: nowrap;
}
.inline-alert.inline-alert-success {
    background-color: var(--alert-success-background-color);
    border: 1px solid var(--alert-success-border-color);
}
.inline-alert.inline-alert-warning {
    background-color: #fdf8ee;
    border: 1px solid var(--sp-yellow);
}
.inline-alert i.fas {
    margin-right: .25rem;
}
.inline-alert.inline-alert-success i.fas {
    color: var(--sp-green);
}
.inline-alert.inline-alert-warning i.fas {
    color: var(--sp-yellow);
}

.inline-editable {
    cursor: pointer;
    border-bottom: 2px dashed var(--form-control-border-color);
}
.inline-editable:hover {
    border-bottom: 2px dotted var(--form-control-border-color);
}

input[type="checkbox"].input_class_checkbox  {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
.input_class_checkbox:before {
    content: "";
    width: 56px;
    height: 24px;
    background-image: url("../images/toggle_off.svg");
    background-color: transparent;
    cursor: pointer;
    display: block;
}
.input_class_checkbox:checked:before {
    content: "";
    width: 56px;
    height: 24px;
    background-image: url("../images/toggle_on.svg");
    background-color: transparent;
    cursor: pointer;
    display: block;
}
.form-check-input[type=radio] {
    border-radius: 50%;
}

.label-large {
    font-size: 16px;
}

.launch-editor {
    background-image:url("../images/screenpal/nav/launcher_icons/video_editor_hover.svg");
}

.launch-stories {
    background-image:url("../images/screenpal/nav/launcher_icons/stories_hover.svg");
}

.launch-manager {

}

.legend-overview {
    margin: 0;
}

.launch-recorder {
    background-image:url("../images/screenpal/nav/launcher_icons/recorder_hover.svg");
}

.lh-0 {
    line-height: 0;
}
.lh-15 {
    line-height: 1.5;
}

.list-view td .icon-checkbox {
    max-height: 20px;
}

.logo {
    width: 190px;
}

.logo-sp {
    height: 40px;
}

.main-content {
    background-color: var(--body-background-color);
}
.main-content .page-header {
    border-bottom: 1px solid var(--page-header-bottom-border-color);
    padding-bottom: 1.5rem;
}
.main-content .tab-container .page-header {
    border-bottom: none;
    padding-bottom: 0;
}

.menu-delete:hover{
    background-color:#F85359 !important;
    color:#FFF !important;
    /*border: 1px solid #F85359 !important;*/
}

.menu-delete:hover .deleteIcon{
    display:none;
}

.menu-delete-icon-hover{
    display:none;
}

.menu-delete:hover .menu-delete-icon-hover{
    display:inline-block;
}

.max-w-1 {
    max-width: 1px;
}

.m-20 {
    margin: 2rem;
}

.modal-dialog.modal-dialog-slideout {
    background: transparent;
}

.navbar-collapse.collapse {
    position: fixed;
    left: 0;
    padding-left: 15px;
    padding-right: 15px;
    width: 80%;
}

.navbar-collapse.collapsing {
    left: -75%;
    transition: height 0s ease;
}

.navbar-collapse.show {
    left: 0;
    transition: left 300ms ease-in-out;
    top: 0;
}

.navbar-light .navbar-nav > li.active{
    position: relative;
}


.navbar-light .navbar-nav > li.active:before{
    border-bottom: 10px solid white;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    content: "";
    height: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 38px;
    width: 0;
}
.navbar-light .navbar-toggler {
    border-color: transparent;
    font-size: 1.5em;
    padding: 0;
    background-color: var(--sp-pink-500);
    border-radius: 3px;
}
.navbar-light .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='hsl(232 23% 85%)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-right a {
    display: inline-block;
    float: left;
}
.navbar-right a:hover {
    text-decoration: none;
}
.navbar-separator{
    width: 1px;
}
.navbar-white {
    background-color: #FFF !important;
    z-index: 800;
}

.nav-item-title {
  line-height: 28px !important;
}
.nav-item-help-link {
    color: var(--sp-white) !important;
}
.nav-item-upgrade-link > span {
    color: var(--sp-white);
}
.nav-item-upgrade-link:hover {
    color: var(--sp-white);
}

.nav-link a > img:not(.sidebar-settings-icon),
.nav-link li.jstree-node a.jstree-anchor i.jstree-icon {
    width: 27px;
    height: 26px;
}

.nav-link-arrow-icon {
    font-weight: var(--font-weight-black);
    font-size: var(--text-size-xl);
    left: 22px;
    color: var(--base-text-color);
}

.nav-link-tree {
    padding: 0 .5rem .5rem 0;
}

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

.no-decoration:hover {
    text-decoration: none;
}

.no-description {
    font-style: italic;
    color: #C6C6C6;
}

.no-max-height {
    max-height: unset!important;
}

.not-droppable, .not-droppable * {
    cursor: no-drop;
}

.not-droppable:hover, .not-droppable:hover * {
    background-color: initial!important;
    cursor: no-drop;
}

.noscroll {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

.notes-error, .notes-deleted, .notes-added, .notes-copied, .notes-changed {
    position: absolute;
    right: 30px;
}

.numbered-bullet {
    background: var(--numbered-bullet-background-color); /* #0843cf; */
    color: var(--numbered-bullet-text-color); /* #FFFFFF; */
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    line-height: 40px;
    text-align: center;
    vertical-align: text-bottom;
    margin: 0.5em;
    border-radius: 50%;
    font-size: 21px;
}

.number-items {
    color: #9c9c9c;
}

.overlay-button {
    border: 1px solid #FFF !important;
    border-radius: 18px;
    font-weight: bold;
    font-size: 14px;
    padding: 7px;
    height: 37px;
    display: inline-block;
    color: #FFF;
    vertical-align: middle;
    text-decoration: none;
}

.overlay-button:hover {
    background-color: #FFF;
    color: #000;
    text-decoration: none;
}

.overlay-center {
    width: 100%;
    height: 50px;
    opacity: 0;
    position: absolute;
    top: 39%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.overlay-center button,
button.ellipsisMenu {
    background: transparent;
    border: transparent;
}

.overlay-center button:active,
button.ellipsisMenu:active {
    outline-width: 0;
}

.overlay-header {
    width: 100%;
    height: 50px;
    opacity: 0;
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFF;
    z-index: 1;
}

.overlay-header-checkbox {
    padding: 11px 12px;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.overflow-hidden {
    overflow: hidden;
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-light);
    margin-bottom: 0;
}
.page-header h1 span {
    color: #C6C6C6;
    font-size: 19px!important;
}
.page-header h1, .page-header h1 {
    font-size: 2rem;
}
.page-header-title {
    box-shadow: none;
    /*box-shadow: 0 .5rem 1rem -0.5rem rgba(0, 0, 0, .15);*/
    margin-bottom: .5rem;
}
.page-header-title hr {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.page-item {
    text-align: center;
    margin-bottom: .5rem;
}

.page-item.active .page-link {
    border: 1px solid transparent;
}

.page-loading {
    position: fixed;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    z-index: 9999999999;
    background-color: var(--loading-page-background-color);
    background-image: url("../images/loading_throbber.png");
    background-position: center center;
    background-repeat: no-repeat !important;
}
.page-loading.modal-loader {
    position: absolute;
    opacity: .7;
}

.page-subtitle {
    color: #CECECE;
    font-weight: var(--font-weight-bold);
}

.password-field {
  border-right-color: var(--sp-white);
}

.password-eye > span {
  background-color: var(--sp-white);
  border: 1px solid #BEBEBE;
}

.password-eye > .password-eye-hidden > img {
  height: 18px;
  width: 30px;
}

.password-eye > .password-eye-showed > img {
  height: 24px;
  width: 30px;
}

#player-branding img.img-fluid {
    max-height: 100%;
}

.popover :not(colorpicker-bs-popover) {
    z-index: 801;
}

.popover.screencast-popover,
.popover.channel-popover,
.popover.quiz-popover {
    min-width: 300px;
    max-width: 400px;
}
.popover.quiz-popover {
    min-width: 300px;
    max-width: 400px;
}

.popover-body {
    color: var(--base-text-color);
    font-size: 15px;
    font-weight: var(--font-weight-light);
    letter-spacing: 0;
    line-height: 23px;
}

.popover hr {
    margin: 2px .75rem;
}

.popover-content {
    padding: 6px;
}

.popover {
    max-width:100%;
}
.popover .btn.close {
    color: var(--base-text-color);
    cursor: pointer;
}

.popover-header {
    background-color: var(--dropdown-background-color);
    border-radius: 0;
    border-bottom: 0;
    color: var(--base-text-color);
    font-size: var(--text-size-xl);
    font-weight: var(--font-weight-light);
    line-height: var(--text-line-height-lg);
}

.popover .description {
    margin-top: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.popover .popover-link {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.popover strong {
    color: var(--sp-white);
    font-weight: var(--font-weight-regular);
}

.popup-form {
    border-width: 2px;
    border-style: solid;
    padding: 1.5rem;
    border-radius: .25rem;
}

.preLoadHide {
    display: none !important;
}

.profile-image-group {
    height: 65px;
    width: 65px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
}

.profile-image-md {
    height: 44px;
    width: 44px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
}

.profile-image-lg {
    height: 90px;
    width: 90px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
}

.profile-image-list {
    object-fit: cover;
    height: 2em !important;
    width: 2em !important;
    border-radius: 1em;
    font-size: 18px;
    overflow: hidden;
    margin-right: unset !important;
}

.profile-image-sm {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.progress {
    background-color: rgba(232, 75, 55, 0.2);
    height: 8px;
}
.progress-bar {
    background-color: var(--sp-red-500);
}

.qr-code-dropdown {
    padding: 1rem;
    background-color: var(--dropdown-qr-code-background-color);
}
.qr-code {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    border-radius: 20px;
    width: 240px;
    box-shadow: 0px 0px 10px grey;
}
.qr-modal-bottom {
    margin-top: 100px
}
.qr-bottom-text {
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.reorder-text {
    margin-bottom: .5rem;
}

.replace-video-list {
    overflow-y: auto;
    height: 320px;
    padding-left: 4px;
}

.replace-video-list-selected {
    background-color: #f6faf1;
    border-left: 4px solid #a0d16a;
}

.replace-video-list-selected img {
    border: 2px solid #a0d16a;
}

.reset-views-button {
    height: 20px;
    position: relative;
    /* top: -3px; */
    border: none;
    font-size: 14px;
}

.screencasts .card-title {
    margin-bottom: 0;
}

.screencast-popover a:hover,
.screencast-popover button:hover {
    text-decoration: none;
}
.screencast-popover button {
    color: #0F62FE;
}
.screencast-popover .popover-body .folder-title {
    display: inline-block;
    width: fit-content;
    padding-top: 0;
    font-weight: var(--font-weight-light);
}

.screencast-replace-block {
    padding-top: 15px;
}

.screencast-replace-confirmation {
    font-size: 18px;
    padding-top: 25px;
}

.screencast-replace-preview {
    max-width: 85px;
    max-height: 50px;
}

.screencast-replace-preview {
    max-width: 85px;
    max-height: 50px;
}

.screencast-replace-text-element {
    font-weight: bold;
}

.screencast-replace-th {
    max-width: 1%;
    white-space: nowrap;
}

.screencast-replace-th, .screencast-replace-tr {
    cursor: pointer;
}

.screencast-replace-warning {
    height: 50px;
}

.channels .card-body,
.screencasts .card-body,
.quizzes .card-body {
    padding: .75rem;
    border-top-left-radius: 0!important;
    border-top-right-radius: 0!important;
}

.content-column-container {
  text-align: center;
  margin-left: -15px;
  margin-right: -15px;
  padding-right: 0px;
}

.screencast-preview-container {
    margin-bottom: 1.5rem;
    padding-right: 0;
}

.screencast-sections-row {
    padding-right: 0;
}
.screencast-sections {
    width: 100%;
    padding: 0;
}

.screencast-table-checkbox {
    text-align: left;
}

.screenpal-dropdown {
  padding: 0.5rem;
  display: flex;
  height: 56px;
}
.screenpal-dropdown-text {
  margin-top: 10px;
}
.screenpal-section {
  margin-left: 9px;
}

.scroll-list {
    max-height: 540px;
    overflow-y: auto;
}

.scroll-show {
    visibility: visible !important;
}

.search-bar-buttons {
    margin-top: .5rem;
}

.search-bar-sticky {
    z-index: 797;
    position: fixed;
    width: 100%;
    background-color: var(--search-bar-sticky-background-color);
    top: 78px;
    right: 1em;
    box-shadow: 0 .5rem 1rem hsl(0 0% 0% / 15%) !important;
    animation: smoothScroll 1s forwards;
}

.search-bar-sticky .filtersDisplayed,
.search-bar-sticky #filterResults {
    display: none;
}

.search-bar-sticky #filters {
    padding-left: 1rem !important;
}

/**********************************
EMPTY CHANNELS/GROUPS/DATA
***********************************/
.sectionNoDataAvailable{
    padding-top:30px;
    width:100%;
    text-align:center;
}
.sectionNoDataAvailableTitle{
    font-size:2.5rem;
}

/*********************************************/
/*     Sidebar Content & Settings Styles     */
/*********************************************/

.container-fluid .sidebar .nav {
    display: block;
}

.sidebar,
.sidebar-settings {
    font-size: var(--base-text-size);
    color: var(--base-text-color);
    bottom: 0;
    border: 0;
    box-shadow: 0.1rem 0 0.2rem rgba(0, 0, 0, .15);
    background-color: var(--sidebar-background-color);
    overflow: hidden;
}

.sidebar.navbar-collapse.collapse {
    width: 100%;
    padding: 0;
}

.sidebar-collapsed ~ .main-content #main-content-banner {
    width: 110% !important;
    margin-left: -8rem;
}

/*** Sidebar Branding (Header) and Content Styles ***/

.sidebar .sidebar-branding {
    width: 100%;
    height: 78px;
    padding-left: 44px;
}

.sidebar .sidebar-branding .sidebar-logo {
    width: 200px;
}

.sidebar .sidebar-branding .sidebar-collapsed-logo {
    width: 32px;
}

.sidebar #sidebar-content {
    width: 100%;
    overflow: hidden;
}

.sidebar #sidebar-content:hover {
    overflow-y: auto;
}

.sidebar .sidebar-content-list {
    margin: 0;
    padding: 0;
}

.sidebar-close-button {
    border: none;
    background: transparent;
}

.sidebar:not(.sidebar-settings) .sidebar-item:not(#sidebar-folders):not(#sidebar-channels):not(#sidebar-groups) {
    padding-left: 2.3rem;
}

.sidebar-settings-divider {
    height: 3px;
    margin-bottom: 16px;
    background-color: var(--settings-sidebar-divider-background-color);
}

.sidebar-settings .sidebar-settings-header {
    font-size: var(--text-size-sm);
    font-weight: var(--font-weight-semi-bold);
    color: var(--settings-sidebar-header-text-color);
    padding-left: 1.5rem;
}

.sidebar-settings .sidebar-item {
    padding-left: 1.5rem;
}

.sidebar-settings span.sidebar-title,
.sidebar-settings .sidebar-item .sidebar-settings-link {
    color: var(--sidebar-nav-link-text-color);
    font-weight: var(--font-weight-regular);
}

.sidebar-settings .disabled-sidebar-item span {
    color: var(--settings-disabled-sidebar-item-text-color);
}

.sidebar ul li {
    padding-top: 0;
    padding-bottom: 0;
}

.sidebar ul li.current {
    border-left: 5px solid var(--sidebar-nav-link-left-border-color-selected);
    background-color: var(--sidebar-nav-link-background-color-selected);
}

.sidebar ul li a:not(.upgrade-badge),
.sidebar ul li span.sidebar-settings-link {
    font-size: var(--font-weight-regular);
    font-weight: var(--font-weight-light);
    color: var(--sidebar-nav-link-text-color);
    line-height: 47px;
}

.sidebar-settings ul li a,
.sidebar-settings ul li span.sidebar-settings-link {
    line-height: 41px;
}

.sidebar ul li a:hover {
    text-decoration: none;
}

.sidebar ul li.current a {
    margin-left: -5px;
}

.sidebar ul li p {
    color: var(--sidebar-nav-section-title-text-color);
    font-size: var(--text-size-sm);
    font-weight: var(--font-weight-medium)!important;
}

.sidebar ul li a span.sidebar-title {
    color: var(--sidebar-nav-link-text-color);
    font-size: var(--text-size-base);
    position: relative;
    z-index: 1000;
}

.sidebar ul li.current a,
.sidebar ul li.current a .sidebar-title,
.sidebar a.jstree-anchor > .sidebar-title {
    color: var(--sidebar-nav-link-text-color-current);
    font-weight: var(--font-weight-semi-bold);
}

.sidebar a.jstree-anchor>.sidebar-title,
.sidebar a.jstree-anchor>span.jstree-item-text {
    line-height: 35px;
}

.sidebar ul li.nav-item:not(.disabled-sidebar-item):hover {
    background-color: var(--sidebar-nav-link-background-color-hover);
}

.sidebar-settings .upgrade-badge {
    font-size: var(--text-size-xs);
    padding: 0 12px;
    line-height: 24px;
}

/*** Sidebar Icon Styles ***/

.sidebar-icon {
    height: 32px;
    padding-bottom: 4px;
    padding-left: 4px;
}

.sidebar-settings .sidebar-item img {
    width: 16px;
    margin-bottom: 4px;
}

.sidebar-collapse-icons {
    display: none;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1032;
}

/*** Sidebar JS Tree Overwriting Styles ***/

.sidebar #jsTree-folders ul:not(.jstree-container-ul) {
    padding-left: 1rem;
}

.sidebar #jsTree-folders ul:not(.jstree-container-ul) i.jstree-icon.jstree-ocl {
    margin-top: 13px;
}

.sidebar #jsTree-channels ul:not(.jstree-container-ul) {
    padding-left: 0.8rem;
}

.sidebar #jsTree-channels i.channel-icon-shared {
    margin: 3px 0 0 0;
}

.sidebar #jsTree-groups ul:not(.jstree-container-ul) {
    padding-left: 0.8rem;
}

.sidebar a#folders-root_anchor,
.sidebar a#channels-root_anchor,
.sidebar a#groups-root_anchor {
    display: inline-flex;
    padding: 8px 0 0 2.3rem;
}

.sidebar li#groups-root {
    padding-left: 0;
}

.sidebar #groups-root_anchor > i {
    padding: 0;
}

.sidebar div.jstree-wholerow {
    height: 44px;
    margin-top: 0;
}

.sidebar li.jstree-node {
    padding: 0;
}

.sidebar i.jstree-icon.jstree-ocl {
    margin: 10px 0 0 8px;
}

.sidebar a.jstree-anchor {
    height: 45px;
}

.sidebar a:not(#folders-root_anchor):not(#channels-root_anchor):not(#groups-root_anchor).jstree-anchor {
    padding: 10px 0 0 2rem;
}

.sidebar a.jstree-anchor > i.jstree-icon {
    margin: 0 8px 0 0;
}

.sidebar a.jstree-anchor > span.jstree-item-text {
    color: var(--sidebar-nav-link-text-color);
    font-size: var(--text-size-base);
}

.sidebar #jsTree-groups a:not(#groups-root_anchor).jstree-anchor > i.jstree-icon {
    margin: 3px 2px 0 4px;
}

/*** Banner and Mobile App section ***/

#sidebar-bottom-banner {
    bottom: 0;
    border: 0;
    margin-top: 25px;
    min-height: 250px;
    max-height: 250px;
    position: relative;
}

.sidebar-app-text {
    font-size: .9rem;
    font-weight: var(--font-weight-light);
}

/****************************************************/
/*     End of Sidebar Content & Settings Styles     */
/****************************************************/

.guides-card-wrapper .card h6 {
    color: hsla(0, 0%, 61%, 0.76);
    font-size: 14px;
    opacity: 0.67;
}

.side-section {
    background: var(--tabs-tab-gradient);
    border-right: 1px solid var(--tabs-tab-border-right-color);
    color: var(--tabs-tab-color);
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.side-section:first-child {
    border-left-style: solid;
    border-left-width: 1px;
}

.side-section:hover {
    background-color: var(--tabs-tab-background-color-hover);
    color: var(--tabs-tab-color-hover);
}
.side-section.selected {
    border-bottom: 3px solid var(--tabs-tab-selected-border-bottom-color);
    background: var(--tabs-tab-selected-background-color);
    color: var(--tabs-tab-selected-color);
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.form-check label {
    cursor: pointer;
}

.som-nav-tabs {
    border-bottom: 1px var(--nav-tabs-border-color) solid;
}
.som-nav-tabs a.nav-link {
    color: var(--nav-tab-link-text-color);
    padding: .25rem 0;
    margin: 0 1rem;
}
.som-nav-tabs a.nav-link:hover {
    color: var(--nav-tab-link-text-color-hover);
}
.som-nav-tabs a.nav-link.active {
    border-bottom: 5px solid var(--nav-tab-border-color-current);
    color: var(--nav-tab-link-text-color-current);
}

.subheader-action-icon {
    cursor: pointer;
    height: 40px;
    width: 40px;
}

.table tbody+tbody {
    border: none;
}
.table th, .table td {
    border: 0;
}
.table tr {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
.table th {
    border-top: 0;
}
.table thead th {
    border-bottom: unset;
}

.table.table-compact td,
.table.table-compact th {
    align-items: center;
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
}
.table.table-compact tr {
    border-bottom: 1px solid var(--separator-color);
}
.table.table-compact tr:first-child {
    border-top: 1px solid var(--separator-color);
}
.table.table-compact thead tr:first-child {
    border-top: none!important;
}

.table-sticky-header th {
    position: sticky;
    top: 0;
}

.table-drag-placeholder {
    height: 70px;
    width: 100%;
    background-color: var(--sp-black);
    opacity: 0.3;
}

.table-usage-history tbody {
    background-color: #fdfdfe;
}
.table-usage-history td,
.table-usage-history th {
    border-bottom: 1px solid var(--separator-color);
}

table.table-user-info td,
table.table-user-info th {
    align-items: center;
    font-weight: var(--font-weight-regular);
    padding: .5rem;
    vertical-align: middle;
}
table.table-user-info tr {
    border-bottom: 1px solid var(--separator-color);
}
table.table-user-info tr:first-child {
    border-top: 1px solid var(--separator-color);
}
table.table-user-info tr.pending td {
    color: gray;
    font-style: italic;
}
table.table-user-info tr.revoked,
table.table-user-info tr.removing {
    background-color: lightgray;
}
table.table-user-info tr.revoked td,
table.table-user-info tr.removing td {
    color: gray;
    font-style: italic;
    text-decoration: line-through;
}

.table-replace {
    text-align: center;
}

.table tr.invited .user-circle {
    background-color: var(--color-primary);
    color: var(--sp-gray-400);
}
.table tr.invited td {
    color: var(--sp-gray-400);
}

.text-gray,
th.text-gray a {
    color: #9B9B9B !important;
}

.text-green {
    color: #3DAA9D !important;
}

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

.media-thumbnail-component img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.thumbnail-frame {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

.thumbnail-frame img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.thumbnail-frame .thumbnail-preview-button {
    display: none;
}

.thumbnail-frame:hover .thumbnail-preview-button {
    display: block;
}

td.thumbnail img {
    max-height: 50px;
    /*max-width: 85px;*/
}
#thumbnail-spinner {
    width: 100px;
}


.th-width-fit-content,
.td-width-fit-content {
    width: 1%;
    white-space: nowrap;
}

.th-width-fit-content-extended {
    width: 6%;
    white-space: nowrap;
}

.text-light {
    font-weight: var(--font-weight-light);
    font-size: 16px;
}
.text-orange {
    color: #f27c59!important;
}

.time-input-wrapper {
    width: 135px;
}

.title-dashed-underline {
    font-size: 20px;
    border-color: #AEAEAE;
}

.title-dashed-underline:not(.disabled) {
    border-bottom: 1px dashed;
}

.tile-double-first {
    padding-right:0;
}

.tile-double-second {
    padding-left:0;
}

.tile-first {
    padding-right:0;
}

.tile-second {
    padding-left:0;
    height: 80px !important;
}

.tile-third {
    padding-left:0;
    height: 80px !important;
}

/*Tooltips styling*/
.tooltip-inner, .tippy-content {
    border-radius: .25rem;
    box-shadow: 0 0 8px 6px rgba(0, 0, 0, .1);
    max-width: 200px;
    padding: 10px;
    text-align: left;
}
.tooltip-inner a {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}

.tooltip-title {
    font-weight: bold;
    text-align: center;
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,
.tooltip.bs-tooltip-top .arrow::before {
    margin-left: -3px;
    content: "";
    border-width: 5px 5px 0;
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before,
.tooltip.bs-tooltip-right .arrow::before {
    margin-top: -3px;
    content: "";
    border-width: 5px 5px 5px 0;
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.tooltip.bs-tooltip-bottom .arrow::before {
    margin-left: 0px;
    content: "";
    border-width: 0 5px 5px;
}

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before,
.tooltip.bs-tooltip-left .arrow::before {
    right: 0;
    margin-top: -3px;
    content: "";
    border-width: 5px 0 5px 5px;
}

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before,
.tooltip.bs-tooltip-right .arrow::before {
    margin-top: -3px;
    content: "";
    border-width: 5px 5px 5px 0;
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,
.tooltip.bs-tooltip-top .arrow::before {
    margin-left: 0px;
    content: "";
    border-width: 5px 5px 0;
}

.tooltip-included-channels,
.tooltip-included-quizzes {
    text-align: left;
    padding-top: 5px;
    padding-bottom: 5px;
}

.trash-table thead {
    text-align: left;
}

.trash-header-title {
    color:#878787;
    font-weight: var(--font-weight-light);
}

.trial-badge{
    position: absolute;
    border-radius: 25px;
    background-color: #023A77;
    color: #FFF;
    right: 95px;
    top: 50px;
    display:block;
    visibility: hidden;
}

.trialbadge:hover{
    display:none;
}

.upgrade-badge {
    font-size: 0.8rem;
    display: block;
    margin-bottom: .5rem;
    text-align: center;
    padding: 3px 10px;
    background-color: var(--upgrade-button-background-color);
    border-radius: 20px;
    color: var(--upgrade-button-text-color);
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
}
.upgrade-badge:hover {
    background-color: var(--upgrade-button-background-color-hover);
    color: var(--upgrade-button-text-color-hover);
    text-decoration: none;
}
.upgrade-badge.enhance-button {
    text-transform: unset;
}

.upgrade-plan-button {
    background-color: #D64081;
    border-color: #D64081;
    color: #FFF;
}

.upload-field {
    border-style: dashed;
    border-width: 3px;
}

.upload-title-edit {
    font-size: 20px;
    border: none;
    border-bottom: 1px solid;
    border-color: #AEAEAE;
    width: 20rem;
    border-radius: 0;
}

.upload-title-edit:focus {
    border-color: unset;
}

.upload-thumbnail {
    object-fit: cover;
    width: 100px;
    height: 70px;
}

.upload-thumbnail-background {
    background-image: url("../images/design_2018/external_upload/item_upload_mask.jpg");
    background-size: cover;
}

.upload-detail-thumbnail {
    height: 240px;
    background-image: url("../images/design_2018/external_upload/item_upload_mask.jpg");
    background-size: cover;
}

.upload-thumbnail-spinner {
    width: 55px;
    height: 55px;
}

.upload-detail-thumbnail-spiner {
    width: 120px;
    height: 120px;
}

.upload-close {
    color: #9b9b9b;
}

.upload-success {
    color: #00c200;
}

.upload-progress-bar-processing {
    background-color: #1074cb;
    width: 0%;
}

.upload-progress-bar-failed {
    background-color: #fddfe2;
    width: 100% !important;
}

.upload-progress-bar-finished {
    background-color: #00c200;
    width: 100% !important;
}

.upload-save {
    position: absolute;
    bottom: 0;
}

.ui-autocomplete {
    width: 246px;
    max-height: 246px;
    overflow-y: auto;
    z-index: 999;
    list-style: none;
    padding-left: 0;
}

.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    word-break: break-all;
    border-radius: 0;
}

.ul-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0;
}

.user-circle {
    border-width: 1px;
    border-style: solid;
    border-radius: 1em;
    font-size: 22px;
    height: 2em;
    line-height: 2em;
    text-align: center;
    vertical-align: text-bottom;
    min-width: 2em;
    max-width: 2em;
    width: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-circle.large {
    font-size: 44px;
}
.user-circle.small {
    font-size: 15px;
}

.video-detail-footer-space {
    height: 70px;
}
.video-detail-footer {
    position: sticky;
    bottom: 0;
    background-color: var(--content-details-option-title-background-color);
    width: available;
    width: -moz-available;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 2%;
    z-index: 25;
}
#edit-footer,
#users-footer,
#original-language-selection-footer,
#text-to-speech-footer {
    width: 100%;
    margin-top: -6.2rem;
}

.video-details-option-title {
    background-color: var(--content-details-option-title-background-color);
    box-shadow: 0px 2px 2px -2px var(--sp-black);
    position: sticky;
    top: 0;
    z-index: 100;
}

.video-details-page .action-navbar-wrapper,
.channel-details-page .action-navbar-wrapper {
    display: none;
}

.video-details-page .draggable {
    display: none;
}

.video-details-page .main-content {
    margin-bottom: 0 !important;
}

.video-details-page .navbar,
.channel-details-page .navbar {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, .25);
}

.visibility {
    padding-top: 15px;
    font-size: 14px;
    line-height: 1.3em;
}
.visibility-text {
    text-transform: capitalize;
}

.w-20 {
    width: 20%;
}
.w-30 {
    width: 30%;
}

.w-35 {
    width: 35%;
}

.white-link-wrapper {
    display: flex;
    justify-content: center;
}

.white-link-button {
    display: flex;
    cursor: pointer;
}

.white-link-button > div > img {
    margin-top: -4px;
}

.white-link-wrapper {
    display: flex;
    justify-content: center;
}

/** Alpine.js helpers */
[x-cloak] { display: none !important; }
/** End of Alpine.js helpers */

#actionNavbar > ul > li > a {
  color: var(--action-nav-link-text-color);
  display: inline-block;
  font-size: 16px;
  padding: 0;
  position: relative;
}
#actionNavbar > ul > li > a:hover {
  color: var(--action-nav-link-text-color-hover);
}
#actionNavbar > ul > li > a > i {
    margin-right: 5px;
}
#actionNavbar > ul > li > a.current {
    color: var(--action-nav-link-text-color-current);
}
#actionNavbar > ul > li > a.current span {
    bottom: 0px;
    display: block;
    left: 50%;
    margin-top: -48px;
    position: relative;
    top: 4px;
}
#actionNavbar > ul > li div.badge {
    background-color: var(--sp-white);
    color: var(--sp-red);
    border-radius: 50%;
    font-weight: var(--font-weight-semi-bold);
    line-height: 13px;
    min-height: 21px;
    min-width: 21px;
    padding: 4px;
}

#btn-save-order {
    margin-top: .5rem;
    width: 100%;
    max-width: 235px;
}

#download-screencast {
    margin-bottom: .5rem;
}

#embed-code {
    height: 7.4em;
    font-size: 16px;
    font-weight: lighter;
    line-height: 1.5;
}

#groups-root_anchor > i {
    background-size: 80%;
    border-radius: 50%;
    padding: 15px;
}

#image-change-overlay {
    background-color: #0a0302;
    opacity: 0.8;
    position: relative;
    top: -24px;
    font-size: 11px;
    height: 24px;
}

#image-change-overlay-bubble {
    background-color: #0a0302;
    opacity: 0.8;
    position: absolute;
    bottom: 0;
    font-size: 11px;
    height: 24px;
    color: var(--sp-white);
    width: inherit;
    line-height: normal;
}

#items-per-page {
    width: 70px
}

#main-content-banner, #quiz-banner {
    margin-top: -4rem;
}

#noteForm {
    margin-bottom: 1rem;
}

#note-time, .note-time-edit {
    width: 90px;
}

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

#nav-primary .top-nav-content {
    height: 78px;
    background-color: var(--top-primary-navbar-v2-background-color);
}

#nav-primary .top-nav-logo-container {
    background-color: var(--top-primary-navbar-v2-background-color);
}

#nav-primary .top-nav-content .navbar-toggler {
    background: none;
}

#nav-primary .upgrade-button-wrapper button {
    padding: 10px 13px;
    border-radius: 25px;
}

#nav-primary .mobile-upgrade-button-wrapper {
    display: none;
}

#replace-modal .modal-content {
    min-height: auto !important;
}


#screencastFormReplace {
    width: 100%;
}

#content-index-icon {
    height: 35px;
    margin-bottom: 0.25rem;
}

#search-bar {
    -webkit-transition: position 10s;
    -moz-transition: position 10s;
    -ms-transition: position 10s;
    -o-transition: position 10s;
    transition: position 10s;
}

#search-field {
    padding-right: 0;
}

#share-footer {
    position: sticky;
    bottom: 0;
}

#table-items tbody {
    color: var(--table-cell-color);
    font-weight: var(--font-weight-light);
}

#table-items td, #table-items th {
    vertical-align: middle;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

#table-items tbody th.screencast-title a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 325px;
}

#table-items .selectAllCheckbox {
    width: 20px;
}

#table-items.table th a:hover,
#table-items.table td a:hover,
#channels-table.table th a:hover,
#channels-table.table td a:hover,
table.list-view td a:hover,
table.table td a:hover {
    text-decoration: none;
}

#table-items .thumbnail-frame {
    overflow: hidden;
    width: 50px;
    height: 30px;
}

#table-trash td {
    vertical-align: middle;
}

#table-trash .trash-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#top-banner {
    overflow: hidden;
}

#userErrorMessage {
    color: var(--sp-red);
}

#user-dropdown-banner {
    display: block !important;
}

.user-classification-card {
    border: 1px solid var(--form-control-border-color);
    border-radius: 14px;
    cursor: pointer;
    flex: 0 0 25%;
}

.user-classification-card:hover {
    border: 1.5px solid #7CC1E6;
    box-shadow: 0px 0px 4px 4px rgba(124,193,230,1);
}

.user-classification-card.selected {
    border: 1.5px solid var(--sp-green);
    box-shadow: 0px 0px 4px 4px var(--sp-green);
}

#userDropdownMenuLink::after {
    display: none;
}

#videodetailplayer {
    border: none;
}

#visibility-note {
    font-weight: var(--font-weight-regular);
}

.white-space-nowrap {
    white-space: nowrap;
}

.user-circle.search {
    font-size: 12px;
    line-height: 23px;
    height: 23px;
    border-radius: 50%;
    width: 23px;
    font-weight: bold;
    display: inline-block;
}

.note-block {
    font-weight: normal;
}

.note-text {
    word-break: break-word;
}

#channelModalForm hr {
    margin: 1.5rem 0 1rem 0;
    color: #979797;
}

#usersVideoForm small {
    font-weight: var(--font-weight-light);
}
.folder-user-initials .user-circle {
    position: relative;
    top: -4px;
    right: 3px;
}

.unlock-feature-cta {
    color: var(--sp-white) !important;
    background: linear-gradient(to right, var(--unlock-feature-cta-left-color), var(--unlock-feature-cta-right-color));
}

.unlock-feature-cta:not(.unlock-feature-cta-modal):hover {
    background: linear-gradient(to right, var(--unlock-feature-cta-left-hover-color), var(--unlock-feature-cta-right-hover-color));
}

.unlock-feature-cta-modal {
    position: absolute;
    top: 72px;
    width: 100%;
    min-width: 180px;
    padding: 20px 12px 20px 24px;
    z-index: 3;
}

.unlock-feature-cta-modal a {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    font-weight: var(--font-weight-semi-bold);
}

.positioned-modal {
    background-color: var(--positioned-modal-background-color);
    border-color: var(--positioned-modal-border-color);
    border-style: solid;
    border-width: 1px;
    border-radius: 0.25rem;
    margin: 0;
    z-index: 100;
}

.ai-unlock-container {
    background:
        linear-gradient(to right, var(--content-details-option-title-background-color), var(--content-details-option-title-background-color)),
        linear-gradient(to right, var(--ai-generate-button-default-left), var(--ai-generate-button-default-right));
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    border: 1px solid transparent;
    border-radius: 19px;
    padding: 1.5rem;
}

.ai-sparkles-gradient-title,
.ai-unlock-container-title {
    background: linear-gradient(to right, var(--ai-generate-button-default-left), var(--ai-generate-button-default-right));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: var(--font-weight-bold);
}

.ai-unlock-link.default-button-state {
    background: linear-gradient(to right, var(--ai-generate-button-default-left), var(--ai-generate-button-default-right));
    font-weight: var(--font-weight-medium);
}
.ai-unlock-link.default-button-state:hover {
    background: linear-gradient(to right, var(--ai-generate-button-hover-left), var(--ai-generate-button-hover-right));
}

.content-dashboard .main-content.body-content {
    padding-left: 0px!important;
    margin-bottom: 0px!important;
}

@media (max-width: 1199px) {
    .side-section.selected {
        border-top-style: solid;
        border-top-width: 1px;
    }
}

@media (max-width: 473px) {
    body {
        padding-top: 10rem;
    }

    .main-content.body-content.can-upgrade-account {
        padding-top: 4rem;
    }

    .main-content.body-content.can-upgrade-account .search-bar-sticky {
        top: 204px;
    }

    #nav-primary .upgrade-button-wrapper {
        display: none;
    }

    #nav-primary .mobile-upgrade-button-wrapper {
        display: block;
        margin: 0 -15px;
        padding: 14px 24px;
        background-color: var(--top-primary-navbar-v2-mobile-upgrade-button-wrapper-background-color);
    }
}

@media (max-width: 575px) {
    .ui-autocomplete {
        left: 10px !important;
    }
    .customize-player {
        font-size: 20px;
    }
    #customize-link {
        font-weight: var(--font-weight-semi-bold);
    }

    #actionNavbar > ul {
        margin: 0 auto !important;
    }
 }

@media (max-width: 600px) {
    .modal-content {
        width: 100% !important;
        height: 100% !important;
        margin: 0;
        padding: 0;
    }
    .modal-content .modal-footer {
        display: flex;
        flex-direction: column !important;
        align-items: stretch;
    }
    .modal-content .modal-footer .custom-submit {
        display: block;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
    }
    .modal-content .modal-footer .custom-submit .btn-cta {
        width: 100%;
        font-weight: var(--font-weight-semi-bold);
    }
    .modal-content .modal-footer .btn.close-modal {
        order: 2;
        text-align: center;
        margin-right: 0 !important;
    }
    .modal-content .modal-footer>:not(:first-child) {
        margin-left: 0;
    }
}

@media (min-width: 1200px) {
    .custom-offset-xl-1 {
        margin-left: 5.5%;
    }
}

@media (max-width: 575px) and (max-height: 514px) {
    body {
        padding-top: unset;
    }

    .fixed-top:not(#nav-primary):not(.sidebar) {
        position: relative;
    }
}

@media (min-width: 576px) {
    th[type-sort="visibility"] {
        text-align: left;
        white-space: nowrap;
    }

    .alert-action-button {
        margin-top: 0;
    }

    .block-folder-path {
        border-bottom: 4px solid #F6F6F6;
    }

    .search-bar-buttons {
        margin-top: 0;
    }

    .select-picker .select-item {
        width: 22%;
    }

    .select-picker .channel-layout-select {
        width: 48%;
    }

    .select-picker .select-thumbnail {
        height: 5rem;
    }

    .select-picker .select-item:nth-child(-n + 2) {
        margin-bottom: 0;
    }

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

    #top-banner {
        height: 100px;
    }
}

@media (max-width: 260px) {
    #primary_nav > .navbar-right > a.ml-1,
    #primary_nav > .navbar-right > .navbar-separator {
        display: none;
    }
}

@media (min-width: 474px) and (max-width: 767px) {
    .main-content.body-content {
        padding-top: 3rem;
    }
}

@media (max-width: 767px) {
    .qr-modal-bottom {
        margin-top: 130px;
    }
    .qr-bottom-text {
        right: 23%;
    }

    .quiz-tr-overlay .unlock-feature-cta {
        display: block;
    }

    #actionNavbarWrapper {
        padding: 8px 12px 4px;
    }

    #actionNavbar > ul {
        display: flex;
        flex-wrap: wrap;
        margin-left: 12px;
        width: 100%;
    }

    #actionNavbar > ul > li {
        margin: 0 !important;
        padding-left: 12px;
        width: 50% !important;
    }

    #actionNavbar > ul > li,
    #actionNavbar > ul > li > a {
        line-height: 36px;
    }

    #helpChatNavBar > ul > li {
        padding: 6px 12px;
        margin-left: 0 !important;
        padding-right: 0 !important;
    }

    #actionNavbar,
    #helpChatNavBar,
    #helpChatNavBar > ul,
    #helpChatNavBar > ul > li,
    #helpChatNavBar > ul > li button {
        width: 100%;
    }

    .search-bar-sticky {
        top: 138px;
    }
}

@media (min-width: 768px) {
    .channel-dates {
        flex-direction: row;
    }

    .channel-dates div:first-child::after {
        content: "|";
        display: inline-block;
        margin-right: .25rem;
    }

    .content-video-details form {
        max-width: 90%;
        margin: 0 auto;
        overflow: unset;
    }

    .content-video-details hr {
        margin-left: -15%;
        margin-right: -15%;
    }

    .filterRow .input-group-append .btn,
    .filterRow .input-group-prepend .btn.filterDropdownBtn {
        width: 125px;
    }

    .logo {
        width: 250px;
    }

    .page-header-title {
        display: flex;
        justify-content: space-between;
    }

    .reorder-text {
        margin-bottom: 0;
    }

    .select-picker .select-thumbnail,
    .select-picker .select-branding {
        height: 6rem;
    }

    #sortBy {
        max-width: 180px;
    }

    #top-banner {
        height: 50px;
    }
}

@media (max-width: 992px) {
    .app-v2.main-content.top-banner-shift {
        margin-top: 3rem;
    }

    .sidebar:not(.sidebar-settings).navbar-collapse.collapse {
        width: 100%;
        padding: 0;
        border: 0;
        overflow: hidden;
    }

    .sidebar #sidebar-content {
        overflow: auto;
        height: calc(100vh - 94px);
    }

    .sidebar .sidebar-branding {
        padding: 24px;
        background-color: var(--top-primary-navbar-v2-background-color);
    }

    .sidebar .sidebar-branding .sidebar-branding-expanded {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .sidebar .sidebar-branding .sidebar-branding-collapsed {
        display: none;
    }

    .sidebar.sidebar-collapsed #sidebar-folders.sidebar-item,
    .sidebar.sidebar-collapsed #sidebar-channels.sidebar-item,
    .sidebar.sidebar-collapsed #sidebar-groups.sidebar-item {
        display: block;
    }

    .sidebar #sidebar-folders-list-item.current,
    .sidebar #sidebar-channels-list-item.current,
    .sidebar #sidebar-groups-list-item.current {
        display: none;
    }

    .search-bar-sticky.top-banner-shift {
        top: 8rem;
    }

    #quiz-banner {
        margin-top: -3rem;
    }
}

@media (min-width: 992px) {
    .sidebar {
        width: 100%;
        max-width: 310px;
    }

    .sidebar:not(.sidebar-collapsed) ~ .main-content {
        margin-left: 19.375rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .sidebar.sidebar-collapsed ~ .main-content {
        margin-left: 6.25rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .sidebar:not(.sidebar-collapsed) ~ .main-content .selectOverlay {
        margin-left: 19.375rem;
    }

    .sidebar:not(.sidebar-collapsed) ~ .main-content .search-bar-sticky {
        padding-left: 19.375rem;
    }

    .sidebar.sidebar-collapsed ~ .main-content .selectOverlay {
        margin-left: 6.25rem;
    }

    .sidebar.sidebar-collapsed:not(.sidebar-settings) {
        max-width: 100px;
    }

    .sidebar.sidebar-collapsed .sidebar-branding {
        justify-content: center;
        padding: 0;
        max-width: 100px;
    }

    .sidebar .sidebar-branding-expanded {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .sidebar.top-banner-shift {
        margin-top: 0;
        padding-top: 0;
        top: 50px;
    }

    .sidebar + .sidebar-collapse-icons .btn-sidebar-collapse,
    .sidebar.sidebar-collapsed .sidebar-branding .sidebar-branding-collapsed,
    .sidebar.sidebar-collapsed + .sidebar-collapse-icons .btn-sidebar-expand {
        display: block;
    }

    .sidebar + .sidebar-collapse-icons .btn-sidebar-expand,
    .sidebar .sidebar-branding .sidebar-branding-collapsed,
    .sidebar.sidebar-collapsed .sidebar-branding .sidebar-branding-expanded,
    .sidebar.sidebar-collapsed + .sidebar-collapse-icons .btn-sidebar-collapse {
        display: none;
    }

    .sidebar.sidebar-collapsed .sidebar-content-list {
        max-width: 100px;
    }

    .sidebar.sidebar-collapsed .sidebar-item {
        display: flex;
        justify-self: center;
        align-items: center;
        padding: 8px 2.3rem;
    }

    .sidebar.sidebar-collapsed #sidebar-folders.sidebar-item,
    .sidebar.sidebar-collapsed #sidebar-channels.sidebar-item,
    .sidebar.sidebar-collapsed #sidebar-groups.sidebar-item {
        display: none;
    }

    .sidebar:not(.sidebar-collapsed) #sidebar-folders-list-item.current,
    .sidebar:not(.sidebar-collapsed) #sidebar-channels-list-item.current,
    .sidebar:not(.sidebar-collapsed) #sidebar-groups-list-item.current {
        display: none;
    }

    .sidebar-collapsed ~ .main-content .search-bar-sticky {
        width: calc(100% - 64px);
    }

    .sidebar-collapsed ~ .main-content .search-bar-sticky #filters {
        padding-left: 3rem !important;
    }

    .sidebar-collapsed ~ .sidebar-shadow {
        transform: translateX(calc(-100% + 64px));
    }

    .sidebar-collapsed .jstree-ocl,
    .sidebar-collapsed .jstree-anchor *:not(i),
    .sidebar-collapsed .sidebar-subtitle,
    .sidebar-collapsed .sidebar-title {
        display: none;
    }

    .sidebar-collapsed .sidebar-videos,
    .sidebar-collapsed .sidebar-screenshots,
    .sidebar-collapsed .sidebar-trash,
    .sidebar-collapsed .sidebar-users,
    .sidebar-collapsed .jstree-node .jstree-anchor {
        padding-left: 0;
    }

    table .cropped-text {
        white-space: nowrap;
    }

    .trial-badge {
        visibility: visible;
    }

    .video-details-page .action-navbar-wrapper,
    .channel-details-page .action-navbar-wrapper {
        display: flex;
    }

    .block-folder-path {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: .5rem;
    }

    .branding-frame {
        overflow: hidden;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .branding-frame img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .branding-success-message {
        display: none;
        font-size: 14px;
        font-family: Roboto;
        color: #328F4D;
    }

    .branding-wrapper .upgrade-badge {
        margin-bottom: 1rem;
    }

    .dark-overlay,
    .sidebar-app-download {
        display: none !important;
    }

    .bulkIcons {
        margin-bottom: 0;
    }

    .channel-details-page {
        padding-top: 7rem;
    }

    .video-details-page .navbar, .channel-details-page .navbar {
        box-shadow: none;
    }

    .content-video-details form {
        max-width: 100%;
        padding: 1.5rem 10% !important;
        overflow: auto;
    }

    .filterSearchText {
        max-width: 250px;
    }

    .general-alert {
        width: 50%;
    }

    .search-bar-sticky {
        width: 100%;
        padding-left: 21px;
        padding-bottom: 1rem;
    }

    .search-bar-sticky #filters {
        padding-left: 3rem !important;
    }

    .sidebar:hover + .sidebar-collapse-icons {
        display: block;
    }
    .sidebar:hover + .sidebar-shadow {
        box-shadow: none;
    }

    .sidebar-collapse-icons:hover {
        display: block;
    }

    .sidebar-shadow {
        width: 25%;
        height: 100vh;
        box-shadow: 0.1rem 0 0.2rem rgba(0, 0, 0, .15);
        position: fixed;
        left: 0;
        top: 0;
        z-index: 798;
        background-color: var(--sidebar-background-color);
    }

    .video-details-page {
        overflow-y: hidden;
        padding-top: 6rem;
    }

    .video-details-page .draggable {
        display: block;
        margin-right: .5rem;
    }

    .video-details-page .page-header {
        padding: 0 3rem 1.5rem 3rem;
    }

    .video-detail-footer .btn-primary {
        max-width: 300px;
    }

    .video-details-page .main-content {
        padding-left: 1rem !important;
    }

    .sidebar-videos,
    .sidebar-screenshots,
    .sidebar-trash {
        padding-right: 17px;
    }

    .sidebar-videos,
    .sidebar-screenshots,
    .sidebar-trash {
        padding-right: 17px;
    }

    #actionNavbar > ul > li > a.current span::after {
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 10px solid var(--sp-pink-500);
        content: "";
        height: 0;
        left: -50%;
        top: 1.1rem;
        width: 0;
    }

    #table-items thead th,
    #table-folders thead th,
    #channels-table thead th,
    #table-users thead th,
    #subgroups thead th {
        position: sticky;
        position: -webkit-sticky;
        top: 148px;
        z-index: 700;
    }

    #table-users thead th,
    #subgroups thead th {
        top: 78px;
    }
    .main-content.top-banner-shift {
        margin-top: 2rem;
    }
    .search-bar-sticky.top-banner-shift {
        top: 7rem;
    }
    .top-banner-shift {
        margin-top: 1rem;
    }
    .main-content-shift {
        margin-top: 3rem;
    }

    .quiz-tr-overlay:hover {
        border: 1px solid var(--disabled-quiz-row-border-hover-color) !important;
    }
}

@media (min-width: 1200px) {
    .btn-direct-copy {
        margin-right: 0.5rem;
    }

    .card .card-text.with-owner-icon {
        width: 70%;
        margin-top: -1.25rem;
    }

    .card-part-bottom {
        margin-top: -0.25rem;
    }

    .channels .card .card-text.with-owner-icon {
        margin-top: -1.5rem;
    }

    .content-video-details form {
        padding: 1.5rem !important;
    }

    .content-video-details hr {
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
    }

    .nav-pagination {
        flex-direction: row;
    }

    .text-pagination {
        margin-bottom: 0;
    }

    .content-column-container {
        margin-left: 15px;
        margin-right: 0;
        padding-right: 15px;
    }

    .search-bar-sticky {
        width: 100%;
        padding-left: 21px;
        padding-bottom: 1rem;
    }

    .sidebar-shadow {
        width: 17.444444%;
    }

    #btn-save-order {
        margin-top: 0;
    }

    #top-banner {
        border: 0;
    }

    .main-content.top-banner-shift {
        margin-top: 3rem;
    }

    .top-banner-shift {
        margin-top: 3rem;
    }

    #search-bar:not(.search-bar-sticky).top-banner-shift {
        margin-top: 0;
    }

    .search-bar-sticky.top-banner-shift {
        top: 5rem;
    }
}

@media (min-width: 1200px) and (max-width: 1446px) {
  .sidebar-content-breakpoints ul li {
    padding-left: 2rem !important;
  }
}

@media (min-width: 1500px) {
    .card .card-text {
        width: 100%;
    }

    .card .card-text.with-owner-icon {
        margin-top: -1.5rem;
    }
}

@media (min-width: 88.125rem) {
    #videodetailplayer {
        min-height: initial;
        margin-bottom: 0;
    }
}

@keyframes smoothScroll {
    0% {
        transform: translateY(-60px);
    }
    100% {
        transform: translateY(0px);
    }
}

@media not all and (min-resolution:.001dpcm) {
    @media {
        thead {
            text-align: left;
        }
    }
}

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
    @media {
        thead {
            text-align: left;
        }
    }
}

@supports (-moz-appearance:none) {
}
@media screen and (max-width: 1400px){
    #roles-box {
        flex-direction: column;
    }
    .user-classification-card {
        display: flex;
        flex-direction: row;
        padding-bottom: 0.5rem !important;
        padding-top: 0.5rem !important;
        text-align: left !important;
    }
    .user-classification-card > div > h4 {
        padding-left: 0.5rem !important;
    }
}

@media screen and (max-width: 767px) {
    .log_sig {
        display: none;
    }

    .header_rgt .navbar-default .navbar-toggle, .header_rgt .navbar-default .navbar-toggle:hover {
        background-color: #FFF;
    }

    .navbar-default .navbar-toggle .icon-bar {
        background-color: #676767;
    }

    #example-navbar-collapse {
        width: 100vw;
        height: 100vh;
        position: fixed;
    }

    .mobile-nav-header {
        min-height: 65px;
        background-color: var(--user-profile-dropdown-mobile-header-background-color);
        padding-top: 10px;
    }

    .mobile-logo {
        float: left;
        margin-left: 15px;
        margin-top: 5px;
    }

    .mobile-close-btn {
        float: right;
        margin-right: 15px;
        margin-top: 5px;
    }

    .header_rgt .navbar-default .navbar-nav>li.mobilemenu {
        border-bottom: 1px solid #F4F4F7;
        text-align: left;
    }

    .mobile-sub-menu {
        float: right;
        color: #AEAEAE;
    }

    .navbar-collapse-product.in,
    .navbar-collapse-resources.in,
    .navbar-collapse-solutions.in {
        width: 100vw;
        height: 100vh;
        position: fixed;
        display: block;
        z-index: 9999999999999;
        top: 0;
        left: 0;
        background-color: #FFF;
    }

    .header_rgt .navbar-default .navbar-nav>li.mobile-sub-menu-header {
        color: #AEAEAE;
        text-align: left;
        font-size: 14px;
        margin-left: 20px;
    }

    .mobilemenu a {
        font-weight: 400;
    }

    .mobilemenu p {
        font-weight: 100;
        font-size: 14px;
        margin-top: 10px;
    }

    .header_rgt .navbar-default .childMenu .navbar-nav>li.mobilemenu {
        border-bottom: none;
    }

    .header_rgt .navbar-default .childMenu .navbar-nav>li.mobilemenu.top-border {
        border-top: 1px solid #F4F4F7;
    }

    .mobile-menu-login {
        background-color: #03103E;
        width: 100%;
        padding-right: 10px;
        position: absolute;
        height: 75px;
        bottom: 0;
        padding-top: 5px;
    }

    .mobile-menu-login .log_sig {
        display: initial;
    }

    .mobile-menu-login .log_sig .last a {
        color: #9B9FB2;
        border: 1px solid #9B9FB2;
        border-radius: 50px;
        width: 150px;
        padding: 14px 18px;
        margin-top: 8px;
    }

    .mobilemenu .badge {
        color: #FFF;
        background-color: #F0BE41;
        border-radius: 50px;
        padding: 2px 3px;
        font-size: 12px;
    }

    .mobilemenu .badge.new-blue {
        background-color: #8DBFE2;
    }

    .nav.navbar-nav {
        overflow-y: scroll;
    }

    .mobile-nav-header .back-arrow {
        width: 15px;
        height: auto;
    }

    #profile-dropdown {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        padding-top: 0;
    }

    .header .dropdown-menu img.mobile-logo {
        width: 200px;
        height: auto;
    }

    .profile-menu-bottom {
        position: absolute;
        width: 100%;
        bottom: 0;
    }

    .mobile-view-content {
        background-color: var(--sp-brand-blue-800);
        padding: 10px 20px;
    }

    #sortBy {
        flex: 1 1 auto;
    }

    #quiz-banner {
        margin-top: -3rem;
    }

    .search-bar-sticky.top-banner-shift {
        top: 14.8rem;
    }

    /*.mobile-view-content a {*/
    /*    color: #FFF;*/
    /*}*/

    /*.mobile-view-content i {*/
    /*    position: absolute;*/
    /*    right: 10px;*/
    /*    top: 20px;*/
    /*}*/
}

@media screen and (min-width: 768px) {
    .mobile-nav-header {
        display: none;
    }

    .mobile-menu-login {
        display: none;
    }

    .mobile-view-content {
        display: none;
    }
}

@media (max-width: 768px) {
    .app-v2.main-content.top-banner-shift {
        margin-top: 6.5rem;
    }
}

@media (max-width: 567px) {
    .app-v2.main-content.top-banner-shift {
        margin-top: 0rem;
    }
    .search-bar-sticky.top-banner-shift {
        top: 8.6rem;
    }
}

@media (max-width: 473px) {
    #quiz-banner {
        margin-top: -6rem;
    }
}

@media screen and (max-width: 1199px) {
    #edit-footer,
    #users-footer,
    #original-language-selection-footer,
    #text-to-speech-footer {
        margin-top: unset;
    }
}