@import url("https://fonts.googleapis.com/css?family=Work+Sans");
@import url("https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css");


::-webkit-scrollbar {
    display: none;
}


/* Variables */
:root {
    --size-tiny: 4px;
    --size-smallest: 8px;
    --size-smaller: 16px;
    --size-small: 30px;
    --size-medium: 60px;
    --size-big: 120px;
    --size-bigger: 180px;
    --size-biggest: 240px;

    --color-button-primary: #152340;
    --color-button-primary-hover: #fd4976;
    --color-button-secondary: #d0d0d0;
    --color-button-secondary-hover: #c0c0c0;

    --color-text-on-dark: #fff;
    --color-text-on-bright: #000;
    --color-text-secondary-on-dark: #c4c6c8;
    --color-text-secondary-on-bright: #787b7c;
    --color-text-positive-on-dark: #2cc662;
    --color-text-positive-on-bright: #10963f;
    --color-text-negative-on-dark: #ff4d4d;
    --color-text-negative-on-bright: #9f1212;
    --color-text-informational-on-dark: #4dd0ff;
    --color-text-informational-on-bright: #04aeb6;

    --color-background-brightest: white;
    --color-background-brighter: rgb(247, 244, 244);
    --color-background-bright: rgb(235, 235, 243);
    --color-background-bright-accent: #edb1bd;
    --color-background-dark: #384660;
    --color-background-darker: #1a2533;
    --color-background-darkest: #131b25;

    --color-element-enabled: #1db954;
    --color-element-disabled : slategray;

    --color-youtube-light: #cf4162;
    --color-youtube: #dc2852;
    --color-youtube-dark: #ab1c3d;

    --color-instagram-light: #9d53cd;
    --color-instagram: #833AB4;
    --color-instagram-dark: #50246f;

    --color-spotify-light: #2cc662;
    --color-spotify: #1db954;
    --color-spotify-dark: #10963f;

    --min-width-large-layout: 992px;
    --max-width-small-layout: calc(var(--min-width-large-layout) - 1px);
}


/* Padding Helpers */
.pad-smallest { padding: var(--size-smallest); }
.pad-smaller { padding: var(--size-smaller); }
.pad-small { padding: var(--size-small); }
.pad-medium { padding: var(--size-medium); }
.pad-big { padding: var(--size-big); }
.pad-bigger { padding: var(--size-bigger); }
.pad-biggest { padding: var(--size-biggest); }


/* Vertical Padding Helpers */
.pad-ver-smallest { padding: var(--size-smallest) 0; }
.pad-ver-smaller { padding: var(--size-smaller) 0; }
.pad-ver-small { padding: var(--size-small) 0; }
.pad-ver-medium { padding: var(--size-medium) 0; }
.pad-ver-big { padding: var(--size-big) 0; }
.pad-ver-bigger { padding: var(--size-bigger) 0; }
.pad-ver-biggest { padding: var(--size-biggest) 0; }


/* Margin Helpers */
.mar-smallest { margin: var(--size-smallest); }
.mar-smaller { margin: var(--size-smaller); }
.mar-small { margin: var(--size-small); }
.mar-medium { margin: var(--size-medium); }
.mar-big { margin: var(--size-big); }
.mar-bigger { margin: var(--size-bigger); }
.mar-biggest { margin: var(--size-biggest); }


/* Vertical Margin Helpers */
.mar-ver-smallest { margin: var(--size-smallest) 0; }
.mar-ver-smaller { margin: var(--size-smaller) 0; }
.mar-ver-small { margin: var(--size-small) 0; }
.mar-ver-medium { margin: var(--size-medium) 0; }
.mar-ver-big { margin: var(--size-big) 0; }
.mar-ver-bigger { margin: var(--size-bigger) 0; }
.mar-ver-biggest { margin: var(--size-biggest) 0; }


/* Margin Right Helpers */
.mar-right-smallest { margin-right: var(--size-smallest); }
.mar-right-smaller { margin-right: var(--size-smaller); }
.mar-right-small { margin-right: var(--size-small); }
.mar-right-medium { margin-right: var(--size-medium); }
.mar-right-big { margin-right: var(--size-big); }
.mar-right-bigger { margin-right: var(--size-bigger); }
.mar-right-biggest { margin-right: var(--size-biggest); }


/* Margin Top Helpers */
.mar-top-smallest { margin-top: var(--size-smallest); }
.mar-top-smaller { margin-top: var(--size-smaller); }
.mar-top-small { margin-top: var(--size-small); }
.mar-top-medium { margin-top: var(--size-medium); }
.mar-top-big { margin-top: var(--size-big); }
.mar-top-bigger { margin-top: var(--size-bigger); }
.mar-top-biggest { margin-top: var(--size-biggest); }


/* Width Helpers */
.w-25 { width: 25%; }
.w-33 { width: calc(100% / 3); }
.w-50 { width: 50%; }
.w-66 { width: calc(100% / 1.5); }
.w-75 { width: 75%; }
.w-100 { width: 100%; }


/* Inline Links */
.card a.btn-inline-link {
    color: var(--color-text-on-dark);
    text-decoration: none;
    background-color: var(--color-button-primary);
    padding: 2px 2px 3px 6px;
    border-radius: 4px;

    &:hover {
        background-color: var(--color-button-primary-hover);
    }

    &:after {
        content: "\23f5";
    }

    &[target="_blank"]:after {
        content: "\2197" !important;
    }
}

/* Default Button */
.btn-primary {
    background-color: var(--color-button-primary);
    border-color: var(--color-button-primary);

    &:hover {
        color: #fff;
        background-color: var(--color-youtube);
        border-color: var(--color-youtube);
    }
}


/* Card */
.card {
    border-radius: 10px;
    border: 1px solid #ddd;
    box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.1);

    .card-header {
        font-weight: bold;
    }
}

.card-body {
    padding: calc(var(--size-smallest) + 5px);

    @media (min-width: 992px) {
        padding: calc(var(--size-smaller) + 5px);
    }

    &:has(.card-form-element-wrapper) {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


/* All Columns */
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-right: var(--size-smallest);
    padding-left: var(--size-smallest);
}


/* Rows */
.row {
    margin-right: calc(-1 * var(--size-smallest));
    margin-left: calc(-1 * var(--size-smallest));
}


/* Bootstrap Badges */
.badge-pill {
    border-radius: 6px;
    border: 2px solid #fff;
    padding: 2px 2px 2px 2px;
}


/* Headlines */
h1 {
    font-size: 26px;
    font-weight: bold;
}
h2 {
    font-size: 20px;
    font-weight: bold;
}
h3 {
    font-size: 16px;
    font-weight: bold;
}
h4 {
    font-size: 14px;
    font-weight: bold;
}


/* Tables */
table {
    cursor: default;
    thead {
        background-color: var(--color-background-bright);

        th {
            border: none !important;
        }
    }
    tr:first-of-type > td {
        border-top: none;
    }
}


/* Overwrite Bootstrap table-hover background color */
.table-hover tbody tr:hover {
    background-color: var(--color-background-brighter);
}


span.form-error {
    color: var(--color-text-negative-on-bright);
    font-weight: bold;
    font-style: italic;
}


/* Toggle Switch */
.toggle-switch-wrapper {
    width: 60px;
    height: 32px;
    position: relative;
    cursor: pointer;

    input[type="checkbox"] {
        width: 56px;
        height: 30px;
        cursor: pointer;
        appearance: none;
        background: var(--color-element-disabled);
        position: relative;
        outline: 0;
        transition: all .2s;
    }

    input[type="checkbox"]:after {
        position: absolute;
        content: "";
        top: 3px;
        left: 3px;
        width: 24px;
        height: 24px;
        background: var(--color-background-bright);
        z-index: 2;
        transition: all .35s;
    }

    input[type="checkbox"]:checked{
        background: var(--color-element-enabled);
    }

    input[type="checkbox"]:checked:after{
        left: calc(100% - 27px);
    }
}

/* Styles for textarea containing code */
textarea.code {
    font-family: monospace;
    font-size: 14px;
    padding: 10px;
    width: 100%;
    border: 1px solid #d0d0d0;
    border-radius: 0.25rem;
    background-color: var(--color-background-dark);
    color: var(--color-text-on-dark);

    /* if disabled make background color darker */
    &:disabled {
        background-color: var(--color-background-dark);
        color: var(--color-text-on-dark);
        cursor: not-allowed;
    }

    &.click-to-copy {
        cursor: pointer;
    }

    /* Light gray placeholder */
    &::placeholder {
        color: var(--color-text-secondary-on-dark);
        opacity: 1;
    }
}

p.code, span.code {
    font-family: monospace;
    font-size: 14px;
    padding: 10px;
    width: 100%;
    border: 1px solid #d0d0d0;
    border-radius: 0.25rem;
    background-color: var(--color-background-brighter);

    /* if disabled make background color darker */
    &.disabled {
        background-color: var(--color-background-bright);
    }

    &.click-to-copy {
        cursor: pointer;
    }

    &:hover {
        background-color: var(--color-button-secondary);
    }

    &:active {
        background-color: var(--color-button-primary-hover);
        color: var(--color-text-on-dark);
    }
}


/* Image Radio Group */
.image-radio-group {
    padding-left: 0;

    ::before,
    ::after {
        display: none;
    }

    .image-radio-label-youtube {
        background-image: url("https://socialfront.noni.io/images/sm-logos/youtube_logo_256.jpg");
    }
    .image-radio-label-instagram {
        background-image: url("https://socialfront.noni.io/images/sm-logos/instagram_logo_256.jpg");
    }
    .image-radio-label-twitter {
        background-image: url("https://socialfront.noni.io/images/sm-logos/twitter_logo_256.jpg");
    }
    .image-radio-label-spotify {
        background-image: url("https://socialfront.noni.io/images/sm-logos/spotify_logo_256.jpg");
    }

    input:checked + .custom-control-label {
        filter: none;
    }

    .custom-control-label {
        cursor: pointer;
        background-size: contain;
        margin-right: 2px;
        background-repeat: no-repeat;
        border-radius: 0.25rem;
        display: inline-block;
        width: 64px;
        height: 64px;
        transition: all 100ms ease-in;
        filter: brightness(0.6) contrast(5) grayscale(1) opacity(0.3);

        &:hover {
            filter: brightness(1.2) grayscale(0.4) opacity(0.8);
        }
    }
}

.public-header-wrapper {
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    z-index: 1000;
    background-color: #152340;
}

#socialfront-logo {
    min-width: 100%;
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
    height: 32px;
    text-align: center;

    @media (min-width: 992px) {
        min-width: 206px;
        width: 206px;
        max-width: 206px;
    }
}

#socialfront-logo img {
    width: 206px;

    @media (min-width: 992px) {
        width: 100%;
    }
}

.auth-card-wrapper {
    padding-top: 15px;
    padding-bottom: 15px;
    background: #1d456a url("../images/socialfront-background-woman-next-to-couch.jpg") top center/cover no-repeat fixed;

    @media (min-width: 992px) {
        min-height: 72vh;
        padding: 60px 0;
    }
}

.fe-section-wrapper-1 {
    padding: 15px 0;
    background: #1d456a url("../images/socialfront-background-woman-next-to-couch.jpg") top center/cover no-repeat fixed;

    @media (min-width: 992px) {
        padding: 60px 0;
    }
}

.fe-section-wrapper-white {
    box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.1);
}

.price-card {
    padding: 30px 0;

    i {
        font-size: 72px;
        margin-bottom: 30px;
    }
    .btn {
        margin-top: 30px;
    }

    @media (min-width: 992px) {
            margin-bottom: 30px;
    }
}

.public-footer-wrapper {
    padding: 30px;
    color: #fff;
    background: #152340;
}

.footer-col {
    margin-bottom: 30px;
}

.private-header-wrapper {
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    position: fixed;
    z-index: 1000;
    background-color: #fff;
    border-bottom: 1px solid #d0d0d0;
    box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.06);
    user-select: none;
}
@media (min-width: 992px) {
    .private-header-wrapper {
        height: 60px;
    }
}

.private-header-wrapper header {
    color: #1b1e21;
}

.private-nav-block {
    height: 60px;
    float: left;
    line-height: 60px;
    text-align: center;
    vertical-align: middle;
}
.private-nav-block .badge-pill {
    transform: translate(14px, -81px);
    font-size: 10px;
}
.private-nav-block:hover {
    background-color: rgba(0, 0, 0, 0.05);
    cursor: pointer;
}
.private-nav-block a {
    color: #000;
}

.private-nav-icon {
    font-size: 24px;
}
.private-nav-icon.private-nav-icon-left {
    border-right: 1px solid #d0d0d0;
}
.private-nav-icon.private-nav-icon-right {
    border-left: 1px solid #d0d0d0;
}
.private-nav-icon i {
    line-height: 60px;
    padding: 0 12px;
}

#private-socialfront-logo {
    top: 0;
    left: 0;
    display: none;
}
@media (min-width: 992px) {
    #private-socialfront-logo {
        min-width: 206px;
        width: 206px;
        max-width: 206px;
        padding: 0 15px;
        display: block;
    }
    #private-socialfront-logo img {
        width: 100%;
        padding-bottom: 4px;
    }
}

#private-socialfront-logo-mobile {
    top: 0;
    left: 0;
    min-width: 60px;
    width: 60px;
    max-width: 60px;
    display: block;
}
#private-socialfront-logo-mobile img {
    width: 61%;
}
@media (min-width: 992px) {
    #private-socialfront-logo-mobile {
        display: none;
    }
}

#private-channel-select {
    width: calc(100% - 180px);
    padding: 0 15px;
    border-left: 1px solid #d0d0d0;
    border-right: 1px solid #d0d0d0;
}
@media (min-width: 992px) {
    #private-channel-select {
        width: auto;
    }
}

.channel-table-wrapper {
    max-height: 160px !important;
    overflow: auto !important;
}
@media (min-width: 992px) {
    .channel-table-wrapper {
        max-height: calc(61vh - 190px) !important;
    }
}

#private-notifications {
    width: 60px;
    display: block;
}
#private-credits {
    width: 60px;
    display: none;
}
@media (min-width: 992px) {
    #private-credits {
        display: block;
    }
}

#private-add-channel {
    width: 60px;
    display: none;
}
@media (min-width: 992px) {
    #private-add-channel {
        display: block;
    }
}

#private-organization {
    width: 60px;
    display: none;
}
@media (min-width: 992px) {
    #private-organization {
        display: block;
    }
}

#private-settings {
    width: 60px;
    display: none;
}
@media (min-width: 992px) {
    #private-settings {
        display: block;
    }
}

#private-logout {
    width: 60px;
    display: none;
}
@media (min-width: 992px) {
    #private-logout {
        display: block;
    }
}

#private-burger-menu {
    width: 60px;
    display: block;
}
@media (min-width: 992px) {
    #private-burger-menu {
        display: none;
    }
}

#private-nav-right {
    float: right;
}


/*
    Metro Menu
*/
.private-metro-menu-wrapper {
    top: 60px;
    height: 120px;
    width: 100%;
    z-index: 800;
    position: fixed;
    background-color: rgb(247, 244, 244);
    border-bottom: 1px solid #a3a3a3;
}

.metro-menu {
    overflow-y: scroll;

    ::-webkit-scrollbar {
        width: 0;
    }

    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 15px;
        display: inline-flex;
    }

    li {
        width: 88px;
        float: left;
        margin: 20px 0 20px 0;
        text-align: center;
    }

    a {
        text-decoration: none;
        color: #1b1e21;
    }

    p {
        margin: 8px;
    }

    i {
        height: 54px;
        width: 54px;
        line-height: 54px;
        vertical-align: middle;
        font-size: 28px;
        color: #fff;
        cursor: pointer;
        transition: background-color 300ms ease;
    }

    .container {
        margin-left: 0;

        @media (min-width: 992px) {
            margin-left: auto;
            width: 1200px;
        }
    }
}

/* Styles for YouTube Metro Menu */
.youtube-metro-menu .metro-menu i {
    background-color: var(--color-youtube);

    &:hover {
        background-color: var(--color-youtube-dark);
    }
}

/* Styles for Instagram Metro Menu */
.instagram-metro-menu .metro-menu i {
    background-color: var(--color-instagram);

    &:hover {
        background-color: var(--color-instagram-dark);
    }
}

.metro-menu li.active a {
    font-weight: bold;
}

.private-third-level-nav-wrapper {
    height: auto;
    margin-top: 15px;
    margin-bottom: 8px;
    display: block;
    user-select: none;
}

.private-third-level-nav-item {
    width: calc(100% / 3 - 13px / 3);
    padding: 8px 14px;
    margin-bottom: 2px;
    border: none;
    border-radius: 0;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    background-color: #0f223b;
    color: #d8dce2;
    cursor: pointer;
    transition: background-color 300ms ease;
}
.private-third-level-nav-item:not(:nth-of-type(3n)) {
    margin-right: 2px;
}
@media (min-width: 768px) {
    .private-third-level-nav-item {
        width: auto;
    }
    .private-third-level-nav-item:nth-of-type(3n) {
        margin-right: 2px;
    }
}
.private-third-level-nav-item:hover {
    padding: 8px 14px 6px 14px;
    color: #fff;
    border-bottom: 2px solid #fff;
}
.private-third-level-nav-item.active {
    background-color: #fff;
    color: #1b1e21;
}

div[class^=collection-], div[class*=" collection-"] {
    display: none;
}

.private-main-wrapper {
    padding-top: 60px;
    padding-bottom: 15px;
    background: #1d456a url("../images/socialfront-space-background-dark-simplified.png") top center/cover no-repeat fixed;

    @media (min-width: 992px) {
        min-height: 76vh;
        padding: 60px 0;
    }
}

.private-main-wrapper h1 {
    color: #fff;
    margin-top: 25px;
    margin-bottom: 15px;
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.private-main-wrapper a:not([href]):not([tabindex]) {
    color: #fff;
}

.aside-h1 {
    text-align: right;
    line-height: 0;
    height: 0;
}
.aside-h1 * {
    transform: translate(0px, -54px);
}
.aside-h1 i {
    transform: none;
}
.aside-h1 .btn {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.16);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.16);
    transition: text-shadow 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.aside-h1 .btn:hover {
    text-shadow: none;
    box-shadow: none;
}
.aside-h1 .btn-outline-light:hover {
    color: #000 !important;
}
.aside-h1 .btn-primary {
    color: #fff;
}

.aside-card-title {
    text-align: right;
    line-height: 0;
    height: 0;
}
.aside-card-title * {
    transform: translate(6px, -44px);
}
.aside-card-title i {
    transform: none;
}

.private-main-wrapper .card.card_center {
    text-align: center;
}
.private-main-wrapper .card.card_right {
    text-align: right;
}
.private-main-wrapper .card.card_left {
    text-align: left;
}

.card-img-top-round {
    text-align: center;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 50%;
    margin-top: 15px;
}

.card-img-top-square.card-img-organization {
    height: 100px;
}
.card-img-top-square.card-img-organization img {
    width: 100%;
    height: 100%;
}

.card-img-text-overlay {
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 28px;
    line-height: 0px;
    transform: translate(0px, -50px);
}

.card-organization .card-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.card-organization .card-text {
    line-height: 24px;
    height: 48px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-organization img {
    border-radius: 10px;
}

.card {
    margin-bottom: 15px;
}

.prv-section {
    margin-top: 30px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #d0d0d0;
}

.private-footer-wrapper {
    padding: 30px;
}

#private-channel-select-popup {
    width: 100%;
    padding: 15px;
}
@media (min-width: 992px) {
    #private-channel-select-popup {
        margin-left: 206px;
        width: 720px;
        height: auto;
        max-height: calc(100% - 60px);
    }
}

#private-notifications-popup {
    width: 100%;
    padding: 15px;
}
@media (min-width: 992px) {
    #private-notifications-popup {
        margin-left: 232px;
        width: 320px;
        height: auto;
        max-height: calc(100% - 60px);
    }
}

.private-notifications-list-wrapper {
    width: 100%;
    height: auto;
}

.private-notifications-list-none {
    text-align: center;
    color: #767676;
}
.private-notifications-list-none i.fa, .private-notifications-list-none i.fa {
    font-size: 36px;
}
.private-notifications-list-none svg {
    width: 100px;
    margin: 20px auto;
}
.private-notifications-list-none span {
    display: block;
    margin-bottom: 10px;
}

#private-credits-popup {
    width: 100%;
    padding: 15px;
}
@media (min-width: 992px) {
    #private-credits-popup {
        margin-left: 258px;
        width: 520px;
        height: auto;
        max-height: calc(100% - 60px);
    }
}
#private-credits-popup strong:not(:first-of-type) {
    display: block;
    margin-top: 20px;
}

.private-tool-list-wrapper {
    width: 100%;
    display: flex;
}

.private-tool-list-item {
    background-color: #ececec;
    padding: 10px;
    margin-top: 10px;
    transition: background-color 300ms ease;
    flex: 1;
}
.private-tool-list-item img {
    margin-right: 10px;
    width: 48px;
    height: 48px;
    background-color: #fff;
}
.private-tool-list-item:hover {
    background-color: #e2e2e2;
    cursor: pointer;
}
.private-tool-list-item:nth-child(2n) {
    margin-left: 10px;
}

#private-burger-menu-popup {
    left: calc(70vw - 140px);
    width: calc(30vw + 140px);
    height: auto;
    padding: 0 20px;
}
#private-burger-menu-popup .col-10 {
    top: -2px;
}
#private-burger-menu-popup .row {
    height: 60px;
    line-height: 60px;
    vertical-align: middle;
}
#private-burger-menu-popup i {
    font-size: 24px;
}
#private-burger-menu-popup a {
    color: #000;
}

.private-popup {
    top: 60px;
    left: 0;
    max-height: calc(50vh - 60px);
    display: none;
    position: fixed;
    z-index: 1100;
    background-color: #fff;
    border-left: 1px solid #d0d0d0;
    border-right: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    box-shadow: 10px 10px 8px -8px rgba(0, 0, 0, 0.05), -10px 10px 8px -8px rgba(0, 0, 0, 0.05);
}
.private-alert {
    top: 120px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    padding: 15px;
    display: none;
    position: fixed;
    z-index: 950;
    background-color: #fff;
    border-left: 1px solid #d0d0d0;
    border-right: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.08);
}
.session-flash-wrapper {
    left: 0;
    top: 60px;
    height: auto;
    z-index: 820;
    position: fixed;
    width: 100vw;

    @media (min-width: 1900px) {
        left: auto;
        right: 0;
        width: 375px;
        margin: var(--size-smaller);
    }

    .session-flash-position-inner {
        top: 180px;
    }

    .session-flash-element {
        width: 100%;
        height: 60px;
        color: #fff;
        white-space: nowrap;
        display: none;

        &.session-flash-info {
            background-color: rgba(56, 159, 212, 0.9);
        }

        &.session-flash-success {
            background-color: rgba(39, 187, 70, 0.9);
        }

        &.session-flash-warning {
            background-color: rgba(243, 152, 31, 0.9);
        }

        &.session-flash-error {
            background-color: rgba(212, 54, 67, 0.9);
        }
    }
}
.session-flash-wrapper .session-flash-element.session-flash-success .session-flash-part.session-flash-content {
    width: calc(100% - 65px);
}
@media (min-width: 576px) {
    .session-flash-wrapper .session-flash-element.session-flash-success .session-flash-part.session-flash-content {
        width: calc(100% - 140px);
    }
}
.session-flash-wrapper .session-flash-element .session-flash-part {
    padding-left: 15px;
    float: left;
    line-height: 60px;
    vertical-align: middle;
}
.session-flash-wrapper .session-flash-element .session-flash-part.session-flash-icon {
    text-align: center;
    width: 31px;
}
.session-flash-wrapper .session-flash-element .session-flash-part.session-flash-type {
    width: 75px;
    display: none;
}
@media (min-width: 576px) {
    .session-flash-wrapper .session-flash-element .session-flash-part.session-flash-type {
        display: block;
    }
}
.session-flash-wrapper .session-flash-element .session-flash-part.session-flash-content {
    text-overflow: ellipsis;
    overflow: hidden;
    width: calc(100% - 145px);
}
@media (min-width: 576px) {
    .session-flash-wrapper .session-flash-element .session-flash-part.session-flash-content {
        width: calc(100% - 145px);
    }
}
.session-flash-wrapper .session-flash-element .session-flash-part.session-flash-button {
    right: 0;
    text-align: right;
}

.clickable-row {
    cursor: pointer;
}
.clickable-row:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.clickable {
    cursor: pointer;
}
.clickable * {
    cursor: pointer;
}

#update-channel-form-handle {
    padding-left: 21px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30"><text x="5" y="24" style="font: regular 1rem Work Sans;">@</text></svg>') no-repeat;
}

dialog {
    position: fixed;
    margin: 0 auto;
    padding: 10px;
    max-width: 640px;
    width: 100%;
    top: 20%;
    background-color: #fff;
    border: none;
    border-radius: 0.3rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    z-index: 1050;
}

dialog::backdrop {
    top: 60px;
    height: calc(100vh - 60px);
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-title {
    font-weight: bold;
    font-size: 16px;
}

.modal-content {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.1);
}

button > .modal-confirmation-action-string {
    text-transform: capitalize;
}

header {
    color: #fff;
}

.header-wrapper a {
    color: #ddd;
    text-decoration: none;
}
.header-wrapper a:hover {
    color: #fff;
    text-decoration: none;
}

.nav-container {
    text-align: center;
    @media (min-width: 992px) {
        text-align: left;
    }
}

.nav-container nav {
    display: inline-block !important;
    margin-bottom: -7px;
}
.nav-container li a {
    padding: 0 16px;
    display: list-item;
    float: left;
    text-decoration: none;
    line-height: 66px;
    vertical-align: middle;
    cursor: pointer;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.nav-container li a:hover {
    border-bottom: 6px solid #dc2852;
}
.nav-container li.active > a {
    border-bottom: 6px solid #dc2852;
}
.nav-container #nav-right {
    min-width: 320px;
    width: 320px;
    max-width: 320px;
}
.nav-container .navlike-button {
    margin: 16px 0 16px 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    color: #fff !important;
    background-color: #dc2852;
}
.nav-container .navlike-button:hover {
    background-color: #cd244a;
}
.nav-container .mobile-navlike-button-wrapper a {
    padding: 0;
    line-height: 32px;
}
.nav-container .mobile-navlike-button-wrapper a .navlike-button {
    margin: 8px 0 6px 8px;
}
.nav-container .mobile-navlike-button-wrapper a:hover {
    background-color: transparent;
    border-bottom: 6px solid transparent;
}

/* Wrapper for main content area */
.main-wrapper {
    margin-top: 132px;

    @media (min-width: 992px) {
        margin-top: 77px;
    }
}

.home-wallpaper-wrapper {
    background: #ecf0f7;
}

#home-wallpaper {
    height: 31vh;
    padding: 50px 20px;

    @media (min-width: 768px) {
        height: calc(100px + 36vh);
    }

    > [class^="col-"] {
        padding: 40px !important;
        color: white;
        background-color: rgba(15, 34, 59, 0.6);
    }
}