.card .card-header .videoActionBtnWrapper{
    float: right;
}

.card .card-header .videoActionBtnWrapper .pause-button,
.card .card-header .videoActionBtnWrapper .stop-button{
    display: none;
}

.table-cell {
    display: flex;
    flex: 1;
    border: 1px solid #000;
    padding: 10px;
    text-align: center;
    max-width: 200px; /* Adjust the maximum width as needed */
    background-color: #f2f2f2;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

div#videoCard  button#expandVideoBtn{
    opacity:1;
    display: inline-block;
    position: absolute;
    bottom: 15px;
    right: 5px; 
    opacity:0.7;
}

div#videoCard button#expandVideoBtn:hover{
    opacity:1;
}

/* Change style of class2 when class1 is hovered */
div.mask:hover + .expandVideoBtn {
    opacity:1 !important;
    z-index: 999999 !important;
}

/* Additional styles for better visualization */
.expandVideoBtn {
    transition: opacity 0.3s; /* Smooth transition for better user experience */
}

#sidenav-4 i.fa-arrows-alt{
    position: absolute;
    left: 0;
    top: 13px;
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.3s;
}

i.fa-arrows-alt:hover{
    opacity:1;
    color: #000;
}

#content main{
    margin-top: 3rem;
}

#content main #mainContainer{
    padding-top: 3rem;
}

#footerWrapper{
    padding:1.5rem;
}

.select-dropdown-container, .cameraTabIconSettingsSelect .select-wrapper, #select-wrapper-createCameraTabIconSelect{
    font-family: 'Font Awesome 5 Pro';
}

#sidenav-4 .sidenav-item .sidenav-link:hover,
#sidenav-4 .sidenav-link.active{
    background-color: rgb(53 127 255 / 20%) !important;
}

#sidenav-4 .sidenav-item .sidenav-link:hover{
    background-color: rgb(53 127 255 / 10%) !important;
}

#sidenav-4 .sidenav-item .tabIcon{
    margin-left: 1rem;
}

#syncModuleContent .table{
    margin-right: auto !important;
    margin-left: auto !important;
    width: 75% !important;
}

#tabsAccessContent .table{
    width: 75% !important;
}

/* .sidenav-link.active {
    background-color: rgba(158, 195, 255, 0.4) !important;
} */

/* Optional: Keep visible on tablets */
@media (min-width: 768px) and (max-width: 991px) {
    .fs-5 {
        font-size: 1rem !important;
    }
}

/* Covers foldable phones and small devices */
@media (max-width: 767px) {
    #sidenav-4 #main-ul .sidenav-item .main-handler {
        display: none !important;
    }
    #sidenav-4 .sidenav-item .tabIcon{
        margin-left: 0 !important;
    }
    .fs-5 {
        font-size: 1.075rem !important;
    }

    #syncModuleContent .table{
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    #syncmoduleRowTemplate td {
        padding: 1rem 0.275rem;
    }

    #tabsAccessContent td {
        padding: 1rem 0.7rem;
    }

    #tableRowSettingsTemplate td, #tableCameraRowSettingsTemplate td {
        padding: 1rem 0.275rem;
    }

    #tabsAccessContent .table{
        width: 100% !important;
    }

}

@media (max-width: 714px) {
    #videoCardsWrapper .card-header, #videoCardsWrapper .card-body, #videoCardsWrapper .card-footer {
        padding: 0.5rem !important;
    }

    #videoCardsWrapper .card-body .badge.badge-light, #videoCardsWrapper .card-footer {
        font-size: 0.75rem !important;
    }

    #videoCardsWrapper .fw-bold.fs-4 {
        font-size: calc(1rem + .3vw)!important;
    }
    #videoCardsWrapper .videoActionBtnWrapper .card-thumbnail-badge {
        padding: 0 !important;
    }

    #videoCardsWrapper .videoActionBtnWrapper .fa-image {
        font-size: 1.2em !important;
    }

    #videoCardsWrapper .card-body .btn, #videoCardsWrapper .card-header .btn{
        width: 1.8125rem !important;
        height: 1.8125rem !important;
    }

    #videoCardsWrapper .card-body .fas, #videoCardsWrapper .card-header .fas{
        font-size: 1em !important;
        width: 1.8125rem !important;
        line-height: 1.8125rem !important;
    }

    #videoCardsWrapper .card-body .fa-2xl{
        font-size: 1em !important;
    }
    #video-card-setting-tabs{
        display: none !important;
    }


}

/* Styles for screens up to 576px wide (extra small screens) */
@media (max-width: 576px) {
    /* Your styles for extra small screens go here */
    #content main{
        margin-top: 0.5rem;
    }

    #content main #mainContainer{
        padding-top: 0.5rem;
    }

    #sidenav-4 .sidenav-item .tabIcon{
        margin-left: 0.3rem;
    }

    #filterCameraNameWrapper, #filterStartDateWrapper, #filterEndDateWrapper{
        margin: 15px 0;
        width: 100%;
    }

    #filterEndDateWrapper .flatpickr-input , #filterStartDateWrapper .flatpickr-input{
        float:inline-end;
    }

    .select-option{
        font-size: 0.6rem !important;
    }
    
}

/* Styles for screens up to 576px wide (extra small screens) */
@media (max-width: 320px) {
    /* Your styles for extra small screens go here */
    #content main{
        margin-top: 0.5rem;
    }

    #content main #mainContainer{
        padding-top: 0.5rem;
    }
    #footerWrapper{
        padding:0.5rem;
        font-size: 0.7rem;
    }
    h4.loginFormTitle.lead{
        font-size: 1rem;
    }
}