/*----------------------
      MEDIA CARDS 
    ----------------------*/

    .scy-media-card {
        -webkit-transition: var(--scy-transition-duration) ease-in-out;
        transition: var(--scy-transition-duration) ease-in-out;
        -webkit-transform: scale(1);
        transform: scale(1); 
        width: fit-content;
    }
    .scy-media-card:hover {
        -webkit-transform: scale(1.05);
        transform: scale(1.05); 
        -webkit-transition: var(--scy-transition-duration) ease-in-out;
        transition: var(--scy-transition-duration) ease-in-out;      
    }

    .scy-media-card .card {
        /*max-width: 25rem;*/
        /*min-height: 17rem;*/
        width: 90vw;
    } 
    .scy-media-card .card-body {
        height: 6rem;
    } 

    @media (min-width: 576px) {
    }

    @media (min-width: 768px) {
        .scy-media-card .card {
            width: calc((100vw / 2) - 4rem);
        } 
    }

    @media (min-width: 992px) { 
        .scy-media-card .card {
            width: calc((94vw / 3) - 4rem);
        } 
    }

    @media (min-width: 1200px) {
        .scy-media-card .card {
            width: calc((94vw / 4) - 3rem);
        } 
    }

    @media (min-width: 1400px) {
        .scy-media-card .card {
            width: calc((94vw / 5) - 3rem);
        } 
    }

    @media (min-width: 2000px) {
        .scy-media-card .card {
            width: calc((94vw / 6) - 3rem);
        } 
    }

    @media (min-width: 3000px) {
        .scy-media-card .card {
            width: calc((94vw / 8) - 3rem);
        } 
    }
/*    .scy-media-card:not(.scy-card-transparent) .card {
        overflow: hidden;
    } 
    .scy-media-card.scy-card-transparent .card {
        overflow: visible;
    } */


    video.scy-view-video {
        background: var(--scy-element-gradient1-background); 
        border: var(--scy-border-size) solid var(--scy-element-gradient1-border);
        border-radius: calc(var(--scy-border-radius-m) + var(--scy-border-size));
        width: auto; 
        max-width:100%; 
        height: 100%; 
        object-fit: contain;
    }

    img.scy-view-image {
        background: var(--scy-element-gradient1-background); 
        border: var(--scy-border-size) solid var(--scy-element-gradient1-border);
        border-radius: calc(var(--scy-border-radius-m) + var(--scy-border-size));
        width: auto; 
        max-width:100%; 
        height: 100%; 
        object-fit: contain;
    }

    /* MEDIA CARD THUMBNAIL */

    .scy-media-card .card .thumbnail-wrapper{
        background: var(--scy-backdrop-gradient1-background); 
        position: relative;
        top:0;
        height: 0;
        width: 100%;
        display: block;
        overflow: hidden;
        /*border-radius: var(--scy-border-radius-m) var(--scy-border-radius-m) 0 0;*/
    }
    .scy-media-card.scy-card-transparent .card .thumbnail-wrapper  {
        -webkit-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
        border: var(--scy-border-size) solid transparent;
    }
    .scy-media-card.scy-card-transparent:hover .card .thumbnail-wrapper  {
        box-shadow: 0 .0 3rem rgba(0, 0, 0, .3); 
        border: var(--scy-border-size) solid var(--scy-primary-background);
    }

    .scy-media-card .card .thumbnail-wrapper .thumbnail{
        display: flex; /*block;*/
        justify-content: center;
        align-items: center;

        position: absolute;
        min-width: 100%;
        min-height: 100%;
        width: 100%;
        height: auto;
        backface-visibility: hidden;
        -webkit-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
        object-fit: cover;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        background: var(--scy-backdrop-gradient1-background); 
        border-radius: var(--scy-border-radius-m) var(--scy-border-radius-m) 0 0;

        /*opacity: 0;*/
    }
    .scy-media-card .card .thumbnail-wrapper .thumbnail.scy-image-fade-in {
        opacity: 1;
        -webkit-transition: opacity var(--scy-transition-duration) ease-in-out;
        transition: opacity var(--scy-transition-duration) ease-in-out;   
    }

    /*.card .card-loader {
        display: flex;
        flex-flow: row wrap;
        align-items: start;
        justify-content: center;
        width: 100%;
        height:100%;
        background: #ff0000;
    }

    .card .card-loader .spinner-grow {
        width: 20rem;
        height: 20rem;
    }*/




    /* MEDIA // CARD THUMBNAIL RATIO */

    .scy-media-card .thumbnail-wrapper.ratio2x3, 
    .scy-media-card.thumbnail-wrapper.ratio2x3 {
        padding-bottom: 150%; /* 2x3 */
    }
    .scy-media-card .thumbnail-wrapper.ratio4x3, 
    .scy-media-card.thumbnail-wrapper.ratio4x3 {
        padding-bottom: 75%; /* 4x3 */
    }
    .scy-media-card .thumbnail-wrapper.ratio3x4, 
    .scy-media-card.thumbnail-wrapper.ratio3x4 {
        padding-bottom: 133.34%; /* 3x4 */
    }
    .scy-media-card .thumbnail-wrapper.ratio16x9, 
    .scy-media-card.thumbnail-wrapper.ratio16x9 {
        padding-bottom: 56.25%; /* 16x9 */
    }
    .scy-media-card .thumbnail-wrapper.ratio9x16, 
    .scy-media-card.thumbnail-wrapper.ratio9x16 {
        padding-bottom: 177%; /* 9x16 */
    }
    .scy-media-card .thumbnail-wrapper.ratio21x9, 
    .scy-media-card.thumbnail-wrapper.ratio21x9 {
        padding-bottom: 42.85%; /* 21x9 */
    }




    /* MEDIA CARD // CARD TRANSPARENT */

    .scy-media-card.scy-card-transparent .thumbnail-wrapper{
        border-radius: var(--scy-border-radius-m) var(--scy-border-radius-m) var(--scy-border-radius-m) var(--scy-border-radius-m);
    }


    

    /* MEDIA CARD // CARD CHECKED */

    .scy-media-card.scy-card-checked:not(.scy-card-transparent) {
        border: var(--scy-border-size) solid var(--scy-primary-background);
    }
    .scy-media-card.scy-card-checked.scy-card-transparent .thumbnail-wrapper{
        border: var(--scy-border-size) solid var(--scy-primary-background);
    }
/*    .scy-media-card .scy-card-checked-icon {
        position: absolute;
        z-index: 5;
        top:-1rem; 
        left: -1rem;
        width:2rem;
        height:2rem;
    }
    .scy-media-card .scy-card-checked-icon .bi {
        width:100%;
        height:100%;
        color: var(--scy-primary-background); 
    }*/


    /* MEDIA CARD // BUTTON MENU */
/*
    .scy-media-card .scy-media-card-btn {
        position: absolute;
        z-index: 5;
        top:.75rem; 
        right: 1rem;
    }
*/

    /* MEDIA CARD // CARD DISABLED */
/*
    .scy-media-card.scy-card-disabled {
        opacity : .5;
        filter : grayscale(1);
        -webkit-filter : grayscale(1);
    }
    .scy-media-card.scy-card-disabled:hover {
        opacity: 1;
        filter : grayscale(0);
        -webkit-filter : grayscale(0);
    }
*/

    /* MEDIA CARD // CARD OVERLAY */

    .scy-media-card:not(.scy-card-transparent) .scy-media-card-overlay { 
        width:100%;
        height:100%;
        /*top: 100%;*/
        opacity:0;
        z-index:5;
        background:transparent;
        position: absolute;
        -webkit-transition: 0.2s ease-in-out;
        transition: 0.2s ease-in-out; 
        border-radius: var(--scy-border-radius-m);
        overflow: hidden;
    }
    .scy-media-card:not(.scy-card-transparent):hover .scy-media-card-overlay {
        /*top:0%;*/
        opacity:1;
        -webkit-transition: 0.2s ease-in-out;
        transition: 0.2s ease-in-out;
    }    
    .scy-media-card:not(.scy-card-transparent) .scy-media-card-overlay .scy-media-card-overlay-background {
        width:100%;
        height:100%;
        /*background:var(--scy-primary-background);*/
        background-color: var(--scy-backdrop-gradient1-background); 
        opacity:.8;
        position: absolute;
        /*-webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);*/
        border: var(--scy-border-size) solid;
        border-radius: calc(var(--scy-border-radius-m) + var(--scy-border-size));
    }
    .scy-media-card:not(.scy-card-transparent) .scy-media-card-overlay .scy-media-card-overlay-wrapper {
        position: absolute;
        top:0;
        left:0;
        z-index:10;
        width:100%;
        height:100%;
        display:flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
    }
    .scy-media-card:not(.scy-card-transparent) .scy-media-card-overlay .scy-media-card-overlay-wrapper .bi {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: .5rem;
        margin-top: -.2rem;
    }


    /* MEDIA CARD // TUMBNAIL OVERLAY */

    .scy-media-card.scy-card-transparent .scy-media-card-thumbnail-overlay { 
        width:100%;
        height:100%;
        /*top: 100%;*/
        opacity:0;
        z-index:5;
        background:transparent;
        position: absolute;
        -webkit-transition: 0.2s ease-in-out;
        transition: 0.2s ease-in-out; 
        border-radius: var(--scy-border-radius-m);
        overflow: hidden;
    }
    .scy-media-card.scy-card-transparent:hover .scy-media-card-thumbnail-overlay {
        /*top:0%;*/
        opacity:1;
        -webkit-transition: 0.2s ease-in-out;
        transition: 0.2s ease-in-out;
    }    
    .scy-media-card.scy-card-transparent .scy-media-card-thumbnail-overlay .scy-media-card-thumbnail-overlay-background {
        width:100%;
        height:100%;
        /*background:var(--scy-primary-background);*/
        background-color: var(--scy-backdrop-gradient1-background); 
        opacity:.8;
        position: absolute;
        /*-webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);*/
    }
    .scy-media-card.scy-card-transparent .scy-media-card-thumbnail-overlay .scy-media-card-thumbnail-overlay-wrapper {
        position: absolute;
        top:0;
        left:0;
        z-index:10;
        width:100%;
        height:100%;
        display:flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
    }
    .scy-media-card.scy-card-transparent .scy-media-card-thumbnail-overlay .scy-media-card-thumbnail-overlay-wrapper .bi {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: .5rem;
        margin-top: -.2rem;
    }


    /* MEDIA CARD // BADGES */

    /* Type */
    .scy-media-card .card .scy-type-badge {
        position: absolute;
        top: 1rem;
        left: 1rem;
        height:2rem;
        width:2rem;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    .scy-media-card .card .scy-type-badge .bi{
        height:100%;
        width:100%;
    }
    /* Status */
    .scy-media-card .card .scy-status-badge {
        position: absolute;
        top: 1rem;
        left: 3.25rem;
    }
    /* Version */
    .scy-media-card .card .scy-version-badge {
        position: absolute;
        top: 3.5rem;
        left: 3.25rem;
        margin-top: .5rem;
    }
    /* Size */
    .scy-media-card .card .scy-size-badge {
        position: absolute;
        top: 2.5rem;
        left: 3.25rem;
    }
    /* Duration */
    .scy-media-card .card .scy-duration-badge {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
    } 
    /* Views */
    .scy-media-card .card .scy-views-badge { 
        position: absolute;
        bottom: 2.5rem;
        left: 1rem;
    } 
    .scy-media-card .card .scy-views-badge .bi {
        margin-right: .4rem;
        margin-top: -.2rem;
    } 
    /* Comments */
    .scy-media-card .card .scy-comments-badge { 
        position: absolute;
        bottom: 2.5rem;
        right: 1rem;
    } 
    .scy-media-card .card .scy-comments-badge .bi {
        margin-right: .4rem;
        margin-top: -.2rem;
    } 
    /* Availability */
    .scy-media-card .card .scy-availability-badge {
        position: absolute;
        bottom: 1rem;
        left: 1rem;
    }  

    /* Accessibility */
    .scy-media-card .card .scy-accessibility-badge {
        position: absolute;
        top: 3.25rem;
        left: 1rem;
        height:2rem;
        width:2rem;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    .scy-media-card .card .scy-accessibility-badge .bi{
        height:100%;
        width:100%;
    }
    /* Digital signage */
    .scy-media-card .card .scy-digital-signage-badge {
        position: absolute;
        top: 3.5rem;
        left: 1rem;
        height:2rem;
        width:2rem;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    .scy-media-card .card .scy-digital-signage-badge .bi{
        height:100%;
        width:100%;
    }
    /* Progress */
    .scy-media-card .card .progress{
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        height: .3rem;
        border-radius: 0;
    }