/* 
    Created on : 26 окт. 2023 г., 11:29:45
    Author     : Svyatolsav Belimov
*/
body{
    --magic-h: 88vh;
    --magic-w: 88vw;
}

dialog {
    height: min(var(--magic-h), var(--magic-w) * 16/9);
    padding: 0;
    border: 0;
    aspect-ratio: 9/16;
    background: transparent;
    overflow: visible;
    max-height: var(--magic-h);
    max-width: var(--magic-w);
    background: rgba(0,0,0,0.5);
    border-radius: 20px;
    outline: none;
}
dialog button {
    border: 0;
    background: 0;
    appearance: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    outline: none;

}
dialog button:focus {outline:0;}
dialog::backdrop {
    background: rgba(0, 0, 0, 0.6); 
}
dialog:-internal-dialog-in-top-layer::backdrop {
    position: fixed;
    inset: 0px;
    background: rgba(0, 0, 0, 0.9);
}
.ncn_stories_bars {
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    position: absolute;
    display: flex;
    gap: 3px;
    z-index: 2;
    width: 100%;
    padding:  10px !important;
}
.ncn_stories_bars:hover .ncn_stories_bar {
    height: 4px;
    transform: translateY(-1px);
    background: rgba(200, 200, 200, .5);
}
.ncn_stories_bars:hover {
    gap: 2px;
}
.ncn_stories_bar {
    border-radius: 3px;
    overflow: hidden;
    height: 100%;
    background: rgba(200, 200, 200, .2);
    z-index: 1;
    flex: auto;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    transition: all 200ms;
    height: 2px;
    
}
.ncn_stories_bar:hover {
    transform: translateY(-1px);
    flex-shrink: 0;
    transform-origin: center;
    min-width: 20px;
    height: 4px;
}
.ncn_stories_progress {
    height: 100%;
    animation: none;
    background-color: #fff;
}
.progressing ~ .ncn_stories_bar .ncn_stories_progress {
    background-color: transparent;
    width: auto;
}
.is-loading .progressing .ncn_stories_progress,
.is-paused .progressing .ncn_stories_progress {
    animation-play-state: paused;
}

.progressing .ncn_stories_progress {
    width: 0%;
    animation: linear 2s;
}

@keyframes progress
{
    0% { width: 0%; }
    100% { width: 100%; }
}

.is-loading button:not(.ncn_stories_bars),
.is-loading #bottom-controls,
.is-loading #open-heart {
    display: none;
}
.is-loading .ncn_stories_wrapper_items img {
    opacity: 0;
}
.is-loading .ncn_stories_wrapper_items video {
    opacity: 0;
}
.is-loading .ncn_stories_wrapper_items .shown {
    opacity: 0;
}
.is-loading .loading-visual {
    display: block;
    position: absolute;
    top: 45%;
    left: 45%;
    width: 2vh;
    aspect-ratio: 1;
    text-align: center;
    background: transparent;
    z-index: 1;
   
    background: none;
    font-size: 14px;
    border-radius: 50%;
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loading-visual {
    display: none;
}
.loading-visual svg{
    height: 50px;
    width: 50px;
}


.ncn_stories_wrapper_controls {
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 2vw;
    aspect-ratio: 9 / 16;
    height: min(var(--magic-h), var(--magic-w) * 16/9);
    position: absolute;
    top: 50%;
    z-index: 1;
    pointer-events: none;
    box-sizing: border-box;
    display: block;
}
.ncn_stories_wrapper_controls_back, .ncn_stories_wrapper_controls_forward {
    pointer-events: all;
    position: absolute;
    z-index: 1;
    min-width: 40px;
    height: calc(100% - 100px);
    bottom: 50px;
    padding: 0;
    font-size: 3vh;
    width: 25vh;
    font-family: system-ui, sans-serif;
    color: #fff;
}
.ncn_stories_wrapper_controls_back {
    left: -1.5em;
    text-align: left;
}
.ncn_stories_wrapper_controls_forward {
    right: -1.5em;
    text-align: right;
}
.ncn_stories_wrapper_items {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: absolute;

    border-radius: 20px;
}
.ncn_stories_wrapper_items img {
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 9/16;
    object-fit: contain;
    top: 0;
    opacity: 0;
}
.ncn_stories_wrapper_items img.shown {
    opacity: 1;
}
.ncn_stories_wrapper_items video {
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 9/16;
    object-fit: contain;
    top: 0;
    opacity: 0;
    border-radius: 20px;
}
.ncn_stories_wrapper_items video.shown {
    opacity: 1;
}
.ncn_stories_wrapper_items video::-webkit-media-controls {
  display: none;
  display: none!important;
  -webkit-appearance: none;
}
/* Could Use thise as well for Individual Controls */
.ncn_stories_wrapper_items video::-webkit-media-controls-play-button {
    display: none!important;
  -webkit-appearance: none;
}
.ncn_stories_wrapper_items video::-webkit-media-controls-volume-slider {
    display: none!important;
  -webkit-appearance: none;
}
.ncn_stories_wrapper_items video::-webkit-media-controls-mute-button {
    display: none!important;
  -webkit-appearance: none;
}
.ncn_stories_wrapper_items video::-webkit-media-controls-timeline {
    display: none!important;
  -webkit-appearance: none;
}
.ncn_stories_wrapper_items video::-webkit-media-controls-current-time-display {
    display: none!important;
  -webkit-appearance: none;
}



.ncn_stories_wrapper_items video::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

dialog video {
  pointer-events: none !important;
}

dialog *::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}
dialog video::-webkit-media-controls-fullscreen-button {
    display: none!important;
}



/* New shadow dom for play button */

/* This one works! */

.ncn_stories_wrapper_items video::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}


.ncn_web_poll{
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    background: rgba(255,255,255,.98);
    padding: 20px;
    color : #020202;
    font-weight: normal;
    word-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all; /* более приоритетно */
    white-space: normal;
    font-size: 12px !important;
    z-index: 10;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.ncn_web_poll h3{
    font-size: 12px !important;
    margin-bottom: 10px;
    color: #020202 !important;
}
.ncn_web_poll_button{
    display: block;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    width: 100%;
    overflow: hidden;
    transition: all 0.2s;
    font-weight: normal;
    justify-content: space-between;
    cursor: pointer !important;
    
}
.ncn_web_poll_button:hover{
    cursor: pointer;
}
.ncn_stories_metadata {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    display: flex;
    align-items: end;
    overflow: hidden;
    pointer-events: all;
    gap: 1vh;
}


.loading_video_ncn{
    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1;
    text-align: center;
    z-index: 2;
    height: 100%;
    background: rgba(0,0,0, .5);
    padding-top: 80%;
    color: #fff;
    display: none;
    border-radius: 20px;
}

.loading_video_ncn.ncn_dnone{
    display: block !important;
}


.ncn_story_share_link{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1;
    text-align: center;
    z-index: 2;
    height: 100%;
    background: rgba(0,0,0, .4);
    padding-top: 80%;
    color: #fff;
    display: none;
}
.ncn_story_share_link.ncn_story_share_link_show{
    display: block !important;
}

.ncn_story_share_link_body_close{
    margin-top: 30px;
    display: block;
    cursor: pointer;
}


.ncn_story_share_link_body{
    background: #fff !important;
    width: 90%;
    margin: 0px auto;
    padding: 10px;
    border-radius: 5px;
    color: #020202 !important;
}


#side-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7vh;
}

#side-controls #close,
#play,
#pause {
    display: none;
}

dialog.is-paused #play {
    display: block;
}

dialog:not(.is-paused) #pause {
    display: block;
}

#side-controls button,
#side-controls a {
    display: inline-flex;
}


#ncn_stories_wrapper svg {
    width: auto;
    height: 3.5vh;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, .5));
    line-height: 0;
}





.action {
    cursor: pointer;
    transition: transform .3s;
}

.action:not([disabled]):hover,
.action:not([disabled]):focus { 
    transform: scale(1.2);
}

#open-heart {
    left: auto;
    right: 0;
    display: inline-flex;
}

#open-heart .off {
    transition: opacity .3s;
}

#open-heart .on {
    position: absolute;
    z-index: 1;
    opacity: 0;
    transform: scale(0);
    transition: transform .3s;
}

#open-heart[aria-pressed="true"] .on { 
    transform: scale(1);
    opacity: 1;
}

#open-heart[aria-pressed="true"] .off { opacity: 0; }

#open-heart[aria-pressed="true"] path { fill: #f00; }

#open-heart[aria-busy="true"] { animation: pulsate .4s infinite; }

@keyframes pulsate {
    0% { transform: scale(1) }
    100% { transform: scale(1.2) }
}

#open-heart[errored] {
    opacity: .5;
}

#metadata-details {
    display: flex;
    flex: 1 1 auto;
    align-items: end;
    overflow: hidden;
    padding: 0.7vh 0;
    gap: 0.7vh; 
}


#metadata {
    flex: 1 1 auto;
    white-space: nowrap;
}

@media (max-width: 420px), screen and (orientation: portrait) {
    :host {
        --magic-h: calc(var(--mobileVh) * 97);
        --magic-w: 100vw;
    }
    ::backdrop {
        background-color: #000;
    }
    #side-controls #close {
        display: inline-flex;
    }
    [hidden] {
        display: none !important;
    }
    .ncn_stories_wrapper_controls_back, .ncn_stories_wrapper_controls_forward {
        font-size: 1vh;
        width: 20vh;

    }
}

.ncn_album_descr{
    color: #fff;
    font-size: 1.7vh;
    font-weight: 600;
    text-shadow: 0 0 2px black;
    position: absolute;
    margin: 10px;
    top: 10px;
    left: 0;
    z-index: 1;
}

.ncn_story_poll_bar{
    height: 3px;
    background: #34ace0;
    display: inherit;
}


.ncn_is_own{
    background: #32ff7e !important;
}

.ncn_story_share_link_body_ya_link{
    padding-top: 30px;
}






.ncn_webstory_wrapper {
    height: min(calc(var(--magic-h) - 400px), calc(var(--magic-w) - 400px) * 16/9);
    padding: 0;
    border: 0;
    aspect-ratio: 9/16;
    background: transparent;
    overflow: visible;
    max-height: calc(var(--magic-h) - 400px);
    max-width: calc(var(--magic-w) - 400px);
    background: rgba(0,0,0,0.5);
    border-radius: 10px;
    outline: none;
}
.ncn_webstory_wrapper button {
    border: 0;
    background: 0;
    appearance: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    outline: none;

}
.ncn_webstory_wrapper button:focus {outline:0;}
.ncn_webstory_wrapper::backdrop {
    background: rgba(0, 0, 0, 0.6); 
}
.ncn_webstory_wrapper:-internal-dialog-in-top-layer::backdrop {
    position: fixed;
    inset: 0px;
    background: rgba(0, 0, 0, 0.9);
}


.ncn_webstory_wrapper_items {
    overflow: hidden;
    height: 90%;
    width: 90%;
    position: absolute;
    background: #000;
    border-radius: 10px;
}
.ncn_webstory_wrapper_items img {
    position: absolute;
    max-height: 900%;
    max-width: 90%;
    width: 90%;
    aspect-ratio: 9/16;
    object-fit: contain;
    top: 0;
    opacity: 1;
}

img.ncn_story_view {
    width: 100%;
    border-radius: 10px;
}




.ncn_web_story_shary_body{
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    max-height: 100vh;
    align-items: center;
    text-align: center;
    justify-content: space-around
}
.ncn_web_story_shary_body img {
    max-height: 96vh;
    max-width: 98vw;
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
.ncn_web_story_shary_body video {
    max-height: 96vh;
    max-width: 98vw;
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}




.ncn_web_story_share_company{
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 20px;
    padding: 0px 20px;
}

.ncn_web_story_share_company_descr{
    color: #fff;
    font-size: 1.7vh;
    font-weight: 600;
    text-shadow: 0 0 2px black;
    z-index: 1;
}

.ncn_inline_wrapper_play_button_square {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    max-width: 300px;
    z-index: 300;
    color: white;
    box-shadow: 0px 10px 50px rgba(40,40,40,0.5);
    box-sizing: border-box;
    -webkit-animation: 0.5s ease-out;
    animation: 0.5s lbWRkT ease-out;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 11px;
    padding: 10px;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    -webkit-transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    text-align: center;
    border-radius: 25px;
    font-weight: bold;
    background: #a000eb;;
    color: #fff;
    left: 30px;
    right: 30px;
    bottom: 50px;
    height: 50px;
    line-height: 50px;
    -webkit-font-smoothing: subpixel-antialiased;

}


/*
===============================================================================
===============================================================================
гребанные айфоны бля!
===============================================================================
===============================================================================
*/



body dialog:-webkit-full-page-media {
    background-color: transparent !important;
}

dialog::-webkit-media-controls {
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-panel {
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video:-webkit-full-page-media {
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video:-webkit-full-page-media::-webkit-media-controls-panel {
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-mute-button {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-overlay-play-button {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-play-button {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-timeline-container {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-current-time-display {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-time-remaining-display {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-timeline {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-volume-slider {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-seek-back-button {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-seek-forward-button {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-fullscreen-button {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-rewind-button {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-return-to-realtime-button {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-toggle-closed-captions-button {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-closed-captions-container {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-closed-captions-track-list {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-volume-slider-mute-button {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-fullscreen-volume-slider {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-fullscreen-volume-min-button {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-controls-fullscreen-volume-max-button {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-text-track-container {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::cue {
    background-color: transparent;
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-text-track-region {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-text-track-region-container {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-text-track-region-container.scrolling {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video::-webkit-media-text-track-display {
    -webkit-appearance: none !important;
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

video{
    pointer-events: none !important;
    -webkit-appearance: none;
}





#ncn_review_tab_voice::-webkit-media-controls {
    width: 95% !important;
    height: 30px !important;
    display: block;
}





.ncn_show_story { animation: bounceAndRotate 0.8s infinite; }

@keyframes pulsate {
    0% { transform: scale(1) }
    100% { transform: scale(1.05) }
}


@keyframes bounceAndRotate {
  0% {
    transform:rotate(0deg);
  }
  25% {
     transform:rotate(5deg);
  }
  50% {
     transform:rotate(0deg);
  }
  75% {
     transform:rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}