/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                    CSS BASICS DO NOT UPDATE OR CHANGE THIS                          +
+     IF YOU WANT TO OVER RIDE THESE STYLES PLEASE USE THE OVERRIDE FILE TO MAKE IT   +
+     UPDATES TO THESE STYLES WILL BE COPIED OVER THE ENTIRE SECTION                  +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*---- VIDEO -----*/
.iframe-video .overlay-content, p.iframe-video,
.dark-mode .iframe-video .overlay-content, .dark-mode p.iframe-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}

    .iframe-video .overlay-content iframe,
    p.iframe-video > iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

    .iframe-video[class*='tab-content'] .overlay-content
    {
        padding-bottom:10px;
    }

    /*-- info block video*/
.app-data.active > *.iframe-video:not(.app-title):not([class*='notice-']):not(ul) {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0 !important;
}

.app-data.active > *.iframe-video iframe {
    position: absolute;
    top: 2%;
    left: 2%;
    width: 96%;
    height: 96%;
}

/*----- border sizes ---*/

iframe {
    border: solid 1px var(--border-gray);
    background-color: inherit;
    color: inherit;
}

[class*='iframe-border-zero'] iframe {
    border: 0;
}

[class*='iframe-border-thin'] iframe {
    border-width:var(--border-width-thin);
}

[class*='iframe-border-medium'] iframe {
    border-width: var(--border-width-medium);
}

[class*='iframe-border-thick'] iframe {
    border-width: var(--border-width-thick);
}

[class*='iframe-border-heavy'] iframe {
    border-width: var(--border-width-heavy);
}

[class*='iframe-border-ultra'] iframe {
    border-width: var(--border-width-ultra);
}

/*-- height / width, but mostly height*/

main .iframe-full .overlay-content :not(.app-data) iframe,
main .iframe-full .overlay-content > iframe {
    width: 100%;
    width: -webkit-fill-available;
    height: 100vh;
}

main .iframe-three-quarters .overlay-content :not(.app-data) iframe,
main .iframe-three-quarters .overlay-content > iframe {
    width: 100%;
    width: -webkit-fill-available;
    height: 75vh;
}

main .iframe-two-thirds .overlay-content :not(.app-data) iframe,
main .iframe-two-thirds .overlay-content > iframe {
    width: 100%;
    width: -webkit-fill-available;
    height: 66vh;
}

main .iframe-half .overlay-content :not(.app-data) iframe,
main .iframe-half .overlay-content > iframe {
    width: 100%;
    width: -webkit-fill-available;
    height: 50vh;
}

main .iframe-third .overlay-content :not(.app-data) iframe,
main .iframe-third .overlay-content > iframe {
    width: 100%;
    width: -webkit-fill-available;
    height: 33vh;
}

main .iframe-quarter .overlay-content :not(.app-data) iframe,
main .iframe-quarter .overlay-content > iframe {
    width: 100%;
    width: -webkit-fill-available;
    height: 25vh;
}

main .iframe-eighth .overlay-content :not(.app-data) iframe,
main .iframe-eighth .overlay-content > iframe {
    width: 100%;
    width: -webkit-fill-available;
    height: 12.5vh;
}

main .iframe-auto .overlay-content :not(.app-data) iframe,
main .iframe-auto .overlay-content > iframe {
    width: 100%;
    width: -webkit-fill-available;
    height: auto;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                               END OF CSS FILE                                       +
+     IF YOU WANT TO OVER RIDE THESE STYLES PLEASE DO IT IN THE CSS OVERRIDE FILES    +
+     CHANGES TO THIS FILE WILL BE DELETED UPON NEXT TEMPLATE UPDATE                  +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/