@media screen and (min-width: 1820px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1720px;
    }
}

@media screen and (max-width: 991px) {

    /* .custom-dropdown .dropdown-toggle,
    .select2-container .select2-selection--single .select2-selection__rendered {
        padding: 5px 15px;
        font-size: 14px;
    } */
    /* .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 5px;
    } */

    .select2-container {
        min-width: 94px;
    }

    .text {
        font-size: 14px;
    }

    .grid-box,
    .grid-circle-box {
        width: 36px;
        height: 36px;
    }

    .grid-box img,
    .grid-circle-box img {
        width: 20px;
    }
    .grid-circle-box.actionButton img {
        width: 14px;
    }

    .header-right-list>li:not(:last-child) {
        margin-right: 15px;
        padding-right: 15px;
    }

    .maximize_modal .expend_badge {
        width: 35px;
        height: 35px;
        margin-right: 0;
    }
}

@media screen and (max-width: 768px) {
    .header .header-left .navbar-brand {
        padding-right: 0;
        border-right: none;
        display: flex;
    }

    .video_main {
        padding: 10px;
        border-radius: 15px;
    }

    .fullscreenCls {
        align-items: center;
        height: 100%;
        display: flex;
    }
    .row.g-2.video-grid .col {
        height: unset !important;
    }
     /* .row.g-2.video-grid .col {
        height: unset !important;
    } */
    .header-right, .header-left {
       width: 100%;
        justify-content: space-between;
    }
    .header-right-list > li:not(:last-child)::before {
        display: none;
    }
    .header-right-list > li:not(:last-child) {
        margin-right: 10px;
        padding-right: 0;
    }
    .timeDisplay{
        top: 20px;
        bottom: unset;
    }
}

@media screen and (max-width: 575px) {
    .userStoreSelectDropdown .select2-container .select2-selection--single .select2-selection__rendered {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 90px !important;
        max-width: 90px !important;
        display: block;
        height: auto;
    }
    .headerHideButton .cw-text {
        display: none !important;
    }
    .store-date-time .date-no-year {
        display: block !important;
    }
    .store-date-time .date {
        display: none !important;
    }
    .audio-dropdown .dropdown-item {
        font-size: 12px;
        line-height: 13px;
    }
    .audio-dropdown .list-unstyled {       
        max-height: 95px;
    }

    .playback_section .modal_video_camera_badge {
        flex-direction: column;
        align-items: self-start;
        gap: 10px;
    }

    .login_main {
        padding: 30px;
    }

    .video_box {
        min-height: 150px;
        max-height: 200px;
    }

    .video_camera_badge {
        font-size: 0;
        gap: 0 !important;
    }

    .row.video-grid.row-cols-3 .video_box {
        min-height: 100px !important;
    }

    .playback_section .expend_badge img {
        width: 16px;
    }

    .playback_section .modal_video_camera_badge .video_datetime span {
        font-size: 10px;
    }

    .playback_section .modal_video_camera_badge .video_datetime img {
        width: 16px;
    }

    .playback_section .expend_badge {
        width: 30px;
        height: 30px;
    }

    .playback_section .modal_video_camera_badge:hover {
        opacity: 1;
    }

    .playback_section .modal_video_camera_badge {
        opacity: 0;
    }

    .modal_video_camera_badge {
        height: 100%;
    }

    .playback_section .modal_actions {
        bottom: 16px;
    }

    /* .fullscreenCls #videoContainer{
        transform: rotate(90deg);
        width: 100%;
        height: 100%;
    }
    .fullscreenCls video{
        transform: rotate(90deg);
        width: 100%;
        height: 100%;
    } */
    .speed-menu {
        top: unset;
        bottom: 25px;
        overflow: auto;
        height: 100px;
        scrollbar-width: thin;
    }
    .header .header-left .navbar-brand img {
        width: 120px;
    }
    .header .header-left {
        width: 100%;
        justify-content: space-between;
    }
    .create-wall.custom-wall-button a {
        padding: 4px 7px;
        min-width: 35px;
        height: 35px;
        width: 35px;
    }
    .grid-circle-box.actionButton {
        padding: 4px 5px;
        min-width: 36px;
        width: 36px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow b, .custom-dropdown .dropdown-toggle::after {
        font-size: 10px;
    }
    .select2-container .select2-selection--single .select2-selection__rendered {
        padding: 3px 17px 3px 10px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        /* height: 30px; */
        width: 14px;
    }
    .user-img {
        width: 25px;
        height: 25px;
    }
    .dropdown.custom-dropdown.user-dropdown .dropdown-toggle {
        height: 35px;
        padding: 4px 3px 3px 3px;
    }
    .header .header-right {
        width: 100%;
    }
    section.playback_section .volume-slider-wrapper {
        bottom: 26px;
        top: unset;
    }
    .speed-option {
        font-size: 10px;
        padding: 3px;
    }
    .volume-slider-wrapper {
        left: 50%;
        transform: translateX(-25%);
    }
    .expend_badge{
        top: 12px;
        right: unset;
        left: 12px;
        padding: 4px;
        width: 25px;
        height: 25px;
    }

    .live_cam_box{
        width: 134px;
        height: 75px;
    }
    .video-live-focus#videoContainerBox{
        width: 134px;
        height: 75px;
    }
    .playbackLiveStreamRecBtn{
        width: 25px;
        height: 25px;
    }
    .playbackLiveStreamRecBtn img{
        width: 15px;
        height: 15px;
    }
    .playbackRecBtnSection {
        right: 29px;
        width: 40px;
        text-align: center;
    }
    .live-maximize-btn{
        width: 25px;
        height: 25px;
    }
    .live-maximize-btn svg{
        width: 12px;
        height: 12px;
    }
    .maximized .playbackRecBtnSection .rec-timer{
        min-width: 45px;
    }
}

@media screen and (max-width: 500px) {
    .playback_section .modal_video_camera_badge {
        flex-direction: column;
        align-items: self-start;
        gap: 10px;
    }
      /* .header-right-list > li:not(:last-child) {
    margin-right: 10px;
    padding-right: 10px;
  } */
}

@media screen and (max-width: 380px) {

    .video_audio_badge a,
    .playback_section .expend_badge {
        width: 25px;
        height: 25px;
    }

    .video_audio_badge a img {
        width: 15px;
        height: 15px;
    }

    .video_audio_badge a svg,
    .playback_section .expend_badge svg {
        font-size: 12px !important;
    }

    .time-labels {
        font-size: 10px;
    }

    

    .timelineFullScreen {
        margin-top: 10px !important;
    }
}

@media screen and (max-width: 900px) and (orientation: landscape) and (hover: none) {
    .fullscreen_video {
        max-height: 70% !important;
    }

    .timelineFullScreen {
        margin-top: 10px !important;
    }
}

@media screen and (max-height: 450px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .fullscreen_video {
        max-height: 70% !important;
    }

    .timelineFullScreen {
        margin-top: 10px !important;
    }
}

@media screen and (max-width: 930px) and (max-height: 400px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {

    .fullscreen_video {
        max-height: 72% !important;
    }

    .timelineFullScreen {
        margin-top: 10px !important;
    }
}

@media screen and (max-width: 1100px) and (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {

    .fullscreen_video {
        max-height: 70% !important;
    }

    .timelineFullScreen {
        margin-top: 10px !important;
    }
}

@media screen and (max-width: 1150px) and (max-height: 380px) and (orientation: landscape) and (pointer: coarse) {

    .fullscreen_video {
        max-height: 65% !important;
    }

    .timelineFullScreen {
        margin-top: 15px !important;
    }
}