/* reset from index.css */
html {
    scrollbar-color: unset;
    scrollbar-width: thin;
}

/*ajax spinner*/
#spinner:not([hidden]) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#spinner::after {
    content: "";
    width: 80px;
    height: 80px;
    border: 2px solid #f3f3f3;
    border-top: 4px solid #5555ff;
    border-radius: 100%;
    will-change: transform;
    animation: spin 1s infinite linear
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* stars animation */
#background-sjstar {
    position: fixed;
    left: 0;
    z-index: -1;
}
    #background-sjstar use {
        animation: fade var(--animdur) var(--animdel) linear infinite;
        fill: hsl(41, 63%, 75%);
        opacity: 0.125;
        will-change: opacity;
    }

@keyframes fade {
    0%, 100% {
        opacity: 0.125
    }

    50% {
        opacity: 1
    }
}

.playlist-home-page-banner .cms-clip{
    font-size: 1.5em;
    font-weight: 600;
    color: red;
    margin-bottom: 0;
}

#select-weather {
    border-radius: 10px;
    background-color: rgb(1, 17, 35);
}

.ly-main .weather-container {
    height:332px; /*hold space for dynamic load*/
    padding: .5em;
}

/*fix last card errors*/
.card-horiz-nowrap {
    overflow: auto;
    white-space: nowrap;
}

    .card-horiz-nowrap > .card {
        display: inline-block;
        vertical-align: top;
        text-align: center;
        font-weight: 400;
        border: 1px solid hsl(38, 58%, 52%);
        padding: 10px 4px;
        margin: 0 2px 8px 4px;
        inline-size: 170px;
        white-space: normal;
        border-radius: 1em;
        aspect-ratio: 1 / .5;
    }

        .card-horiz-nowrap > .card:hover {
            border-color: white;
        }

    .card-horiz-nowrap::-webkit-scrollbar {
        height: 10px;
        /*display:none;*/
    }

    .card-horiz-nowrap::-webkit-scrollbar-track {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 10px hsl(38, 58%, 52%, 0.4);
        outline: 1px solid hsl(38, 58%, 52%, 0.6);
    }

    .card-horiz-nowrap::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: hsl(38, 58%, 52%, 0.6);
        outline: 1px solid hsl(38, 58%, 52%);
    }

    .card-horiz-nowrap::-webkit-scrollbar:vertical {
        display: none;
    }

.card {
    position: relative;
    cursor: pointer;
}

    .card .card-basestep {
        font-size: 25pt;
        top: 160px;
        position: absolute;
        right: 10px;
    }

    .card .media video, .card .media img {
        width: 200px;
        position: absolute;
        left: -15px;
        top: 30px;
        max-width: 200px;
        border: none;
    }

    .card .media.overlay video, .card .media.overlay img {
        width: 100px;
        top: 140px;
        border: none;
    }

    .card .card-status {
        font-size: unset;
        /*font-size: var(--size-24);*/
    }

.card-weather {
    margin-bottom: 10px;
}

.card-step {
    color: var(--primary-300);
    font-size: var(--size-14);
}

.card-zodiac[data-card-index="0"] .card-basestep {
    border: 2px solid var(--primary-300);
    border-radius: 1em;
    padding: 3px;
}

.timeline-header {
    /*justify-content: center;*/
}

.daily-download {
    padding-bottom: 15px;
}

/*flicker loading...*/
@keyframes fadeIn {
    from {
        opacity: 0;
    }
}

.animate-flicker {
    border:1px solid;
    border-radius: 1em;
    background-color:--blue-100;
    width:300px;
    margin: auto;
    animation: fadeIn .5s infinite alternate;
}
/*flicker loading...*/

.timeline-header-title {
    margin-bottom: 10px;
}

.timeline-item-header {
    font-size: 1.2em;
}

.timeline-header-menu .button {
    font-size: var(--size-14);
    text-shadow: 0 0.2em 0.2em #010024;
}

.timeline time {
    white-space: nowrap;
    text-align: center;
    padding: var(--size-4) var(--size-86);
    width: 90px;
}

.timeline .expand-details [data-icon] i
{
    font-size: .8rem;
    margin-inline-end: 5px;
}

.timeline .cb-title, .timeline .si-title
{
    font-size: 1.2em;
    font-weight:bold;
}

dialog {
    background-color: #ddd;
    color: blue;
    font-weight: bold;
}

.small {
    font-size: small;
}

.input input[type="checkbox"] {
    width: 1.4em;
}



.cms-playlist {
    display: grid;
}

    .cms-playlist.vertical-card .cms-clip {
        padding: 10px;
        border: 1px solid var(--golden-200);
        border-radius: 10px;
        margin: 5px 0;
    }

.cms-clip {
    margin-bottom:1em;
}

.cms-clip:last-child {
    margin-bottom: 0px;
}

.cms-clip p{
    padding: 5px 0;
}


/*horiz scroll*/
.cms-clip-horiz-nowrap {
    overflow: auto;
    white-space: nowrap;
    display: block;
}

    .cms-clip-horiz-nowrap > span {
        display: inline-block;
        vertical-align: top;
        text-align: center;
        font-weight: 400;
        border: 1px solid hsl(38, 58%, 52%);
        padding: 10px 4px;
        margin: 0 2px 8px 0;
        inline-size: 150px;
        white-space: normal;
        border-radius: 1em;
        aspect-ratio: 1 / .5;
    }

        .cms-clip-horiz-nowrap > span > a {
        }

        .cms-clip-horiz-nowrap > span:has(img) {
            aspect-ratio: 1 / 1.22;
            align-items: baseline;
            padding: 2px;
        }

    .cms-clip-horiz-nowrap::-webkit-scrollbar {
        height: 10px;
        /*display:none;*/
    }

    .cms-clip-horiz-nowrap::-webkit-scrollbar-track {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 10px hsl(38, 58%, 52%, 0.4);
        outline: 1px solid hsl(38, 58%, 52%, 0.6);
    }

    .cms-clip-horiz-nowrap::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: hsl(38, 58%, 52%, 0.6);
        outline: 1px solid hsl(38, 58%, 52%);
    }

    .cms-clip-horiz-nowrap::-webkit-scrollbar:vertical {
        display: none;
    }

/* vertical menu */
.cms-playlist.vertical-card .cms-clip img {
    max-width: 200px;
    width: 30%;
}

.float-left{
    float:left;
    margin-right:10px;
}

.float-right{
    float:right;
    margin-left:10px;
}

.panel {
    border: 1px solid #2e4a7f;
    padding: 1em;
}

/*.panel:has(.media-wrapper) {
    padding: .2rem;
}*/

/*center img in div*/
.flexcenter {
    display: flex;
    justify-content: center;
}

li.list img {
    border-radius: 8px;
    width: 8em;
}

.expand-details .panel {
    border-top: unset;
}

.video-js {
    border-radius: 1.5em; /*var(--size-20);*/
    border: 1px solid #2e4a7f;
    padding: 1px;
}

    .video-js.video-js-sj .vjs-big-play-button {
        background-color: #000915;
        opacity: 0.9;
        font-size: 0;
        height: 5rem;
        width: 5rem;
        border: 2px solid #CC983D;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        margin-left: -2.5rem;
        margin-top: -2.5rem;
    }

    .video-js video {
        border-radius: inherit;
    }

.vjs-control-bar {
    -moz-border-radius-bottomleft: inherit;
    border-radius: unset;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

    .vjs-control-bar .vjs-menu-button-popup .vjs-menu {
        margin-bottom: 1.2em;
    }

.vjs-clip-nav-next, .vjs-clip-nav-prev {
    cursor: pointer;
}

.vjs-volume-panel {
    z-index: 100; /*above time countdown*/
}
.media-wrapper {
    margin: auto;
}

@media (min-width: 768px) {
    .media-wrapper-audio {
        width: 80%;
    }
}

/*.media-wrapper picture.vjs-poster {
    padding: 9em;
}*/

.media-wrapper.media-wrapper-audio picture.vjs-poster {
    padding: 1em;
}

.vjs-poster {
    top: 0;
    background-size: auto;
    background-position: 50% 10%;
    left: 20%;
    right: 20%;
}

.media-wrapper .video-js.vjs-custom-skin .vjs-remaining-time.vjs-control {
     display: block; 
}


.vjs-has-started .vjs-poster {
    display: inline-block;
}

picture.vjs-poster {
    padding: 2px;
}

.footer {
    height: 66px;
}

/* float nav */
.floatnav {
    bottom: 0;
    z-index: 10;
}

    .floatnav .panel {
        backdrop-filter: blur(1px);
        border-radius: var(--size-32);
        padding: 12px;
    }

        .floatnav .panel .navlist a:hover {
            color: aliceblue;
            border-color: aliceblue;
        }


.media img {
    border: 1px solid #2e4a7f;
    border-radius: var(--size-20);
}

/* cms clip*/
.cms-clip img {
    border-radius: var(--size-10);
}

.cms-clip-heading {
    display: flex;
    align-items: center;
}

.cms-clip iframe[src^="https://www.you"] {
    border-radius: 1em;
}

.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

    .responsive-video iframe {
        border-radius: 1em;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }


.no-padding{
    padding:0;
}

/*.cms-clip div>iframe[src^="https://www.you"]]
{
    padding:0;
}*/

/*iframe for the calendar*/
div[tkf-wrap-guid] iframe {
    position: relative;
}

/* button */
.button {
    margin: 0 0.2em 0.3em 0.2em;
    border: 0.12em solid rgba(255,255,255,0);
    border-radius: 2em;
    box-sizing: border-box;
    padding: 0.5ch 1.5ch;
    text-decoration: none;
    font-family: 'Roboto',sans-serif;
    font-size: var(--size-18);
    font-weight: 400;
    text-shadow: 0 0.1em 0.1em #010024;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
    transition: all 0.2s;
    cursor: pointer;
}

    .button:hover {
        border-color: rgba(255,255,255,1);
    }

/*my-tribe*/
.action-wrapper .button {
    padding: 0px;
    height: 30px;
    min-width: 100px;
}

.action-wrapper span {
    text-align: left;
}

    .action-wrapper span:last-child {
        white-space: nowrap;
    }


input[type="submit"]:hover {
    border-color: rgba(255,255,255,1);
}

@media all and (max-width:30em) {
    a.button {
        display: block;
        margin: 0.2em auto;
    }
}

/*@Html.ValidationSummary hide when valid*/
.validation-summary-valid {
    display: none;
}

.validation-summary-errors {
    font-weight: 700;
    color: #ff0404;
}

/*mads mod*/
header.header {
    padding-right: 1em;
}

.mnh4 {
    text-align:center;
}

/* fix empty menu at exactly 768*/
@media (min-width: 769px) {
    nav#menu {
        --menu-panel-dir: var(--menu-panel-dir-large);
        align-items: center;
        display: flex;
        gap: var(--menu-item-gap);
    }
}

nav details summary span, .nav-link {
    border-radius: 1em;
    border: 1px solid #4a6fa2;
    padding: 0.3em .8em;
}

    nav details summary span:hover, .nav-link:hover {
        border-color: #ddd;
        background-color: #2e4a7f;
    }

nav summary.button {
    font-size: 1em;
    padding: 0.2ch;
}

nav details:hover {
    cursor: pointer;
}

nav .menu-action {
    margin: 10px;
    text-align: center;
}

nav .userButton {
    background-color: #1c269085;
}

nav a {
    text-decoration: none;
}

.menu-sub-heading {
    display: block;
    margin: 5px 0;
    text-align: center;
    font-weight: 500;
    text-decoration: underline;
}


details div a, .linkbutton, .menu-form-button input {
    display: block;
    background-color:transparent;
    text-align: center;
    border: 1px solid #2e4a7f;
    border-radius: 1em;
    padding: 5px;
    margin-bottom: 5px;
    text-decoration: none;
    transition: all 0.4s;
}

    details div a:hover, .linkbutton:hover {
        border-color: rgba(200,200,200,1);
    }

    .menu-form-button input{
        width:100%;
    }

    .input input, .input select, .input textarea {
        background-color: #010024;
        border: 1px solid #aaa;
    }

.input textarea {
    border-radius: 20px;
    height: 100px;
}

.login-panel {
    border: 2px solid #cc983e;
    padding: .5em;
    border-radius: 1em;
    right: 0;
}

    .login-panel .button {
        font-size: 1em;
        padding: 0.2ch;
    }

.ly-flex {
   /* align-items: center;*/ /*vertical*/
}

.success-message {
    padding: 5px;
    border: 2px solid #39ff00;
    border-radius: 15px;
    color: lawngreen;
}

.error-message {
    padding: 5px;
    border: 2px solid #39ff00;
    border-radius: 15px;
    color: crimson;
}

.gg-chevron-down {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid transparent;
    border-radius: 100px
}

    .gg-chevron-down::after {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
        width: 10px;
        height: 10px;
        border-bottom: 2px solid;
        border-right: 2px solid;
        transform: rotate(45deg);
        left: 4px;
        top: 2px
    }

@media (max-width: 768px) {
    .input input, .input select, .input textarea {
        font-size: 1.1em;
    }
}

/* mytribe */
.mytribe-detail{
    margin-top:.5em;
}

/* profile */
#pushDifferenceWarning {
    color: var(--golden-200);
    font-weight: 500;
}

/* image uploader */
#drop-region {
    background-color: #bbb;
    border-radius: 20px;
    box-shadow: 0 0 35px rgba(0,0,0,0.05);
    /*width: 400px;*/
    padding: 100px 0;
    text-align: center;
    cursor: pointer;
    transition: .3s;
    color: black;
}

    #drop-region:hover {
        box-shadow: 0 0 45px rgba(0,0,0,0.1);
        background-color: #bbf;
    }

.img-drag-highlighted {
    background-color: grey;
}


#image-preview .image-view {
    display: inline-block;
    position: relative;
    margin-right: 13px;
    margin-bottom: 13px;
}

    #image-preview .image-view img {
        /*max-width: 100px;
            max-height: 100px;*/
        width: 100%;
    }

#image-preview .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 2;
    background: rgba(255,255,255,0.5);
}


/* image uploader 1*/

.image-preview-container {
    width: 70%;
    margin: 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 1rem;
    border-radius: 20px;
}

    .image-preview-container #drop-region {
        margin-bottom: 1rem;
    }

    .image-preview-container img {
        width: 100%;
        display: none;
    }

    .image-preview-container input {
        display: none;
    }

    .image-preview-container label {
        display: block;
        width: 45%;
        height: 45px;
        margin-left: 25%;
        text-align: center;
        background: #8338ec;
        color: #fff;
        font-size: 15px;
        text-transform: Uppercase;
        font-weight: 400;
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.browserOptions
{
    font-size:2em;
    padding: 1em;
}

/* chrome overlays its own cast icon on <video>*/
google-cast-launcher {
    display: none;
}

/* hyvortalk resets*/
hyvor-talk-comments .comments-list.parent {
    margin: 0 -6px;
}

/* minnit chat resets */
.chat-fixed {
    position: fixed !important;
}

.cc-window{opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{-webkit-transition:transform 1s ease;-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease}.cc-animate.cc-revoke.cc-top{-webkit-transform:translateY(-2em);transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{-webkit-transform:translateY(2em);transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-top{-webkit-transform:translateY(0);transform:translateY(0)}.cc-animate.cc-revoke.cc-active.cc-bottom{-webkit-transform:translateY(0);transform:translateY(0)}.cc-revoke:hover{-webkit-transform:translateY(0);transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;-webkit-transition:max-height 1s;transition:max-height 1s}
.cc-revoke,.cc-window{position:fixed;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-revoke:hover{text-decoration:underline}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em;text-decoration:underline}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}
.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.cc-window.cc-banner{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{display:block;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;margin-right:1em}.cc-compliance{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-floating .cc-compliance>.cc-btn{-webkit-box-flex:1;-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}
@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-floating,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-webkit-box-align:unset;-ms-flex-align:unset;align-items:unset}.cc-window.cc-banner .cc-message{margin-right:0}}
.cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-webkit-box-flex:0;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}
.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em;margin-bottom:1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}