/* full hide on mobile */
@media only screen and (pointer: coarse) {
    .notinmobile {
        display: none;
    }
}

/* hide all elements on mobile*/
@media only screen and (orientation: landscape) and (pointer: coarse) {
    .mobileswatch {
        display: block; // Update from none
    }
    .sub_calendar {
        display: none;
    }
    .uielements {
        display: block;
    }
}

/* show all elements on mobile*/
@media screen and (orientation: portrait) and (pointer: coarse) {
    .mobileswatch {
        display: block;
    }
    .sub_calendar {
        display: block;
    }
    .uielements {
        display: none;
    }
}

/* show all elements but subcalendar on 'not mobile', portrait orientation */
@media screen and (orientation: portrait) and (pointer: fine) {
    .mobileswatch {
        display: block;
    }
    .sub_calendar {
        display: none;
    }
    .video-blocker {
        display: none;
    }
    .mobile-land {
        display: none;
    }
}

/* show all elements but subcalendar on 'not mobile', landscape orientation */
@media screen and (orientation: landscape) and (pointer: fine) {
    .mobileswatch {
        display: block;
        z-index: 900 !important;
    }
    .sub_calendar {
        display: none;
    }
    .video-blocker {
        display: none;
    }
    .mobile-land {
        display: none;
    }
}

/* show only when mobile and portrait */
@media screen and (orientation: portrait) and (pointer: coarse) {
    .video-container {
        position: relative;
        z-index: 9000 !important;
    }
    .vid-set {
        z-index: 10000 !important;
    }
    .video-blocker {
        height: 100vh !important;
        height: 100svh !important;
        width: 100vw !important;
        width: 100svw !important;
        display: block;
        position: absolute !important;
        top:0;
        left:0;
        z-index: 10001 !important;
    }
    .mobile-land {
        display: none;
    }
}

/* show only on mobile and landscape */
@media screen and (orientation: landscape) and (pointer: coarse) {
    .vid-card .video-controls {
        display: block;
        top: calc(100vh - 7em) !important;
        top: calc(100svh - 7em) !important;
        min-width: 450px !important;
    }
    .mobile-land {
        display: none;
    }
    .vid-set {
        height: 100vh !important;
        height: 100svh !important;
    }
}