/* Burger Menu Icon */
.menu-button {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1000;
}

/* Bottom Navbar for mobile and tablet */
.bottom-navbar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--white);
  border-top: 1px solid var(--gray);
  height: 60px;
  z-index: 997;
  padding: 0 1rem;
}

.darkmode .bottom-navbar {
  background-color: var(--popup);
  border-top: 1px solid var(--light-brown);
}

.bottom-navbar-icons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.bottom-navbar-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--black);
  text-decoration: none;
  font-size: var(--font-size-15);
}

.darkmode .bottom-navbar-icon {
  color: var(--white);
}

.bottom-navbar-icon span {
  font-size: var(--font-size-23);
}

/* your css rules for ipad portrait */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .middle-section{
        min-width: 50% !important;
    }

    .selected-member-list {
        min-width: 35rem;
    }
    .temaSearchOption {
        margin-top: 0px !important;
        padding-top:0px !important;
    }
    .TeamSerchOption {
        margin-top: 0px !important;
    }
    .scrol-listing .allListCommonWrapUserContact {
        max-width: 50%;
    }

    /* global search */
    .global-file-section-data{
        max-width: 95.5% !important;
    }
    .fileTypeHeading{
        width: 7% !important;
    }
    /* tray panel */
    .sidebar-scroll-common{
        height: calc(81vh - 13.6rem) !important;
    }
    .right-sidebar,.right-search-sidebar{
        width: 36rem !important;
    }
    .common-trancate-sidebar{
        width: 24.5rem !important;
    }
    .trancate-text-pinned{
        width: 75% !important;
    }
    /* global search input */
    #headersearchbar{
        max-width: 23rem;
    }
    .listshow-search{
        width: 28.7rem;
    }
    .global-search-trancate{
        width: 12.5rem;
    }
    .common-activebtn{
        padding: 0.7rem;
    }
    #globalSearchList .date-common{
        top: 27% !important;
    }
    /* file manager */
    .FileTabpageScroll{
        height: calc(71vh - 13.6rem) !important;
    }
    .document-name span, .document-name a{
        width: 73%;
    }
    .calendar-size span{
        width: 5rem !important;
    }
    .fleMediaPreview{
        width: 52rem !important;
        top:40%;
    }
    .fleMediaPreview .msg-read-show-data ul{
        height: 23.6rem;
    }
    .fileMangerRight .form-group{
        width: 25rem;
    }
    #filesearchbox{
        width: 100%;
    }
    /* calendar */
    .viewAll{
        width: 15% !important;
    }
    .calendarTopStrip {
        padding: 1rem !important;
    }
    .calendarLeftBar {
        display: inline-flex !important;
        padding: 0rem 0.5rem 0rem 0 !important;
    }
    .nextPrev {
        width: 1.5rem !important;
        display: inherit !important;
    }
    .month-name{
        text-align: center;
    }
    .Box {
        padding: 0.5rem 0.5rem !important;
    }
    .Box .New-Event, .Check-Availability, .dropdown-btn span{
        font-size: var(--font-size-15) !important;
    }
    .Box2 {
        margin-left: 0.5rem !important;
        padding: 0.5rem 0.5rem !important;
    }
    .calendarRightBar .dropdown-btn {
        min-width: 9rem !important;
        padding: 0.5rem 1rem !important;
        font-size: var(--font-size-15) !important;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }
    .changeMyViewMain{
        max-width: 13.77rem !important;
    }
    .bodyPadddingTop{
        padding: 0 1rem 1.5rem 1rem !important;
    }
    #monthviewAllMeetings{
        padding: 0rem 0 1.5rem 1.5rem !important;
    }
    #dayviewAllMeetings .tp .row-body .day-time-main,#scheduleviewAllMeetings .body-bg{
        max-height: calc(100vh - 22rem) !important;
    }
     #weekviewAllMeetings .body-bg{
        max-height: calc(100vh - 22rem) !important;
        height: auto !important;
     }
    .event-listing-span{
        margin-bottom: 0.5rem !important;
    }
    #monthviewAllMeetings .days-bg .base, #monthviewAllMeetings .days-bg .base2{
        min-height: 13.5rem !important;
    }
    #monthviewAllMeetings .bg .base, #monthviewAllMeetings .days-bg .base{
        padding: 0.5rem 0.7rem 0.5rem 0.7rem !important;
    }
    .threedots{
        left: 3.2rem !important;
    }
    #monthviewAllMeetings .days-bg .base .days.oval, #monthviewAllMeetings .days-bg .base2 .days.oval{
        top: -0.3rem !important;
    }
    #monthviewAllMeetings .bg .weekdays{
        line-height: 4.6rem !important;
    }
    #monthviewAllMeetings .days-bg .days{
        margin-right: 0.5rem;
    }
    #yearviewAllMeetings .tp .base .week-row .week-date, #yearviewAllMeetings .tp .base2 .week-row .week-date,
    #yearviewAllMeetings .tp .base .week-row .week-day, #yearviewAllMeetings .tp .base2 .week-row .week-day,
    #yearviewAllMeetings .month-name{
        font-size: var(--font-size-11) !important;
    }
    #yearviewAllMeetings .tp .base .week-row, #yearviewAllMeetings .tp .base2 .week-row,
    #yearviewAllMeetings .tp .base .week-row .week-day, #yearviewAllMeetings .tp .base2 .week-row .week-day{
        padding-top: 1rem !important;
    }
    .calendarbody{
        max-width: 98.5% !important;
    }
    #dayviewAllMeetings .tp .row-body .day-time-main .meeting-day-box-main-red .meeting-day-box,
    #dayviewAllMeetings .tp .row-body .day-time-main .meeting-day-box-main-gray .meeting-day-box,
    #dayviewAllMeetings .tp .row-body .day-time-main .meeting-day-box-main-blue .meeting-day-box,
    #dayviewAllMeetings .tp .row-body .day-time-main .selfmeeting-day-box-main-red .selfmeeting-day-box{
        margin-left: 1rem !important;
    }
    #dayviewAllMeetings .tp .row-body .day-time-main{
        padding-right: 1rem !important;
    }
    .day-time-left{
        max-width: 15% !important;
    }
    .day-time-right{
        max-width: 85% !important;
    }
    .week-meeting-time{
        max-width: 5rem;
    }
    .reddot-meeting-name{
        max-width: 5rem;
    }
    .week-time-left{
        max-width: 14% !important;
    }
    .week-time-right{
        max-width: 86% !important;
    }
    #scheduleviewAllMeetings .col-sm-1.base.float-left{
        padding: 2rem 8.9rem 2rem 2rem;
    }
    #scheduleviewAllMeetings .week-time-right{
        max-width: 83% !important;
    }
    .yearpopup-modal{
        top: 20% !important;
        left: 20% !important;
    }
    .meetingpopup-modal{
        top: 42% !important;
        left: 53% !important;
    }
    .notifyModalBody{
        top: 44% !important;
        left: 53% !important;
    }
    #meeting-details-popup{
        top: 46% !important;
        left: 54% !important;
    }
    .main-meetin-inner-section{
        padding: 0rem 0rem 0rem 0.5rem !important;
    }
    .meeting-common-margin{
        margin-right: 0.5rem !important;
    }
    .availble-section{
        margin-left: 0.5rem !important;
    }
    .date-left{
        padding-right: inherit !important;
    }
    .conflictingpopup-modal{
        top: 37% !important;
        left: 43% !important;
        max-width: 57% !important;
    }
    .conflictingpopup-modal-content .conflictingpopup-listall .conflictingpopup-single-user .conflictingpopup-user-image{
        width: 15% !important;
    }
    .conflictingpopup-booking-modal{
        left: 7% !important;
        top: 18% !important;
        max-width: 70% !important;
    }
    .conflictingpopup-booking-modal-content .conflictingpopup-booking-main .conflictingpopup-booking-single-user{
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }
    .meeting-popup-header{
        border-top: inherit !important;
        border-left: inherit !important;
    }
    .pleaseWait{
        top: 40% !important;
    }
    .scheduleEmptyMain{
        left: 17% !important;
        top: 23% !important;
    }
    /* dashboard */
    /* menu */
    .count-new-notification{
        right: 0.8rem !important;
    }
    /* body empty state */
    .tabSize{
        transform: translate(-50%, -14%) !important;
    }
}


/* your css rules for ipad landscape */
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {

    /* global search*/

    .globalBody ul{
       display: flex !important;
       flex-wrap: wrap;
    }
    .global-msg-list-section{
        max-width: 89.5% !important;
    }
    .global-msg-contact-name{
        max-width: 91% !important;
    }
    .global-file-section-data{
        max-width: 96.5% !important;
    }
    .fileTypeHeading{
        width: 7% !important;
    }
    .message-scroll {
        height: calc(102vh - 20rem) !important;
    }
    .inner-file-main-section ul{
        height: calc(102vh - 30rem) !important;
    }
    /* file manager */
    .FileTabpageScroll{
        height: calc(108vh - 30rem) !important;
    }
    #linkTab .document-name a{
        width: 80%;
    }
    /* calendar */
    .calendarTopStrip{
        max-width: 97% !important;
    }
    #monthviewAllMeetings{
        height: calc(99vh - 16.3rem) !important;
    }
    #dayviewAllMeetings .tp .row-body .day-time-main, #weekviewAllMeetings .body-bg, #scheduleviewAllMeetings .body-bg{
        max-height: inherit !important;
        height: calc(88vh - 15.9rem) !important;
    }
    #dayviewAllMeetings .tp .row-body .day-time-main .meeting-day-box-main-red .meeting-day-box,
    #dayviewAllMeetings .tp .row-body .day-time-main .meeting-day-box-main-gray .meeting-day-box,
    #dayviewAllMeetings .tp .row-body .day-time-main .meeting-day-box-main-blue .meeting-day-box,
    #dayviewAllMeetings .tp .row-body .day-time-main .selfmeeting-day-box-main-red .selfmeeting-day-box{
        max-width: 89% !important;
    }
    .threedots{
        left: 5rem !important;
    }
    #monthviewAllMeetings .bg .base, #monthviewAllMeetings .days-bg .base{
        padding: 1rem !important;
    }
    .event-listing-span{
        margin-bottom: 0.5rem !important;
    }
    .weekdays{
        line-height: 3.5rem !important;
    }
    #yearviewAllMeetings .tp .base .week-row .week-date, #yearviewAllMeetings .tp .base2 .week-row .week-date,
    #yearviewAllMeetings .tp .base .week-row .week-day, #yearviewAllMeetings .tp .base2 .week-row .week-day,
    #yearviewAllMeetings .month-name{
        font-size: var(--font-size-11) !important;
    }
    #yearviewAllMeetings .tp .base .week-row, #yearviewAllMeetings .tp .base2 .week-row,
    #yearviewAllMeetings .tp .base .week-row .week-day, #yearviewAllMeetings .tp .base2 .week-row .week-day{
        padding-top: 1rem !important;
    }
    .calendarbody{
        max-width: 98.5% !important;
    }
    .reddot-meeting-name{
        max-width: 8rem;
    }
    .week-meeting-time{
        max-width: 8rem;
    }
    .week-time-right{
        max-width: 88.67% !important;
    }
    #scheduleviewAllMeetings .left-duration{
        padding: 0rem 2.2rem 0rem 0.5rem !important;
        font-size: var(--font-size-11) !important;
    }
    #scheduleviewAllMeetings .left-time{
        font-size: var(--font-size-11) !important;
    }
    .yearpopup-modal{
        top: 17% !important;
        left: 26% !important;
    }
    .meetingpopup-modal{
        top: 50% !important;
        left: 53% !important;
    }
    .notifyModalBody{
        left: 53% !important;
    }
    .main-meetin-inner-section{
        padding: 0rem 0rem 0rem 5rem !important;
    }
    .meeting-common-margin{
        margin-right: 0.5rem !important;
    }
    .availble-section{
        margin-left: 0.5rem !important;
    }
    .availble-inner-part{
        height: calc(100vh - 21.6rem) !important;
    }
    .meeting-left-part{
        height: calc(100vh - 17.3rem) !important;
    }
    .meeting-right-part{
        max-width: 42% !important;
    }
    .date-left{
        padding-right: inherit !important;
    }
    .conflictingpopup-modal{
        top: 37% !important;
        left: 43% !important;
        max-width: 45% !important;
    }
    .conflictingpopup-modal-content .conflictingpopup-listall{
        padding-left: 1rem !important;
        padding-right: 0rem !important;
    }
    .conflictingpopup-modal-content .conflictingpopup-listall .conflictingpopup-single-user .conflictingpopup-user-image{
        width: 19% !important;
    }
    .conflictingpopup-modal-content .conflictingpopup-listall .conflictingpopup-single-user .conflictingpopup-user-detail{
        width: 78% !important;
        margin-left: inherit !important;
    }
    .conflictingpopup-booking-modal{
        left: 21% !important;
        top: 18% !important;
        max-width: 48% !important;
    }
    .conflictingpopup-booking-modal-content .conflictingpopup-booking-main .conflictingpopup-booking-single-user{
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }
    .meeting-popup-header{
        border-top: inherit !important;
        border-left: inherit !important;
    }
    .scheduleEmptyMain{
        left: 27% !important;
        top: 29% !important;
    }
    /* dashboard */
    section#dashboard-template{
        margin-left: inherit !important;
    }
    /* menu */
    .count-new-notification{
        right: 0.8rem !important;
    }
    /* body empty state */
    .tabSize{
        transform: translate(-50%, -16%) !important;
    }
}

@media only screen
  and (device-width: 1024px)
  and (device-height: 1366px)
  and (orientation: portrait) {
    #monthviewAllMeetings .days-bg .base, #monthviewAllMeetings .days-bg .base2{
        max-height: 100% !important;
        height: calc(100% - 81%) !important;
    }
  }
/* your css rules for ipad pro portrait */
@media only screen
  and (device-width: 1024px)
  and (device-height: 1366px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1.5) {
    /* global search*/
    .global-msg-list-section{
        min-width: 96.5% !important;
    }
    .global-msg-contact-name{
        max-width: 91% !important;
    }
    .global-file-section-data{
        max-width: 96.5% !important;
    }
    /* header icon */
    /* globalseacrh empty state */
    /* file manager */
    .FileTabpageScroll {
        height: calc(62vh - 25.6rem) !important;
    }
    .document-name span, .document-name a{
        width: 80%;
    }
    /* calendar */
    .calendarTopStrip{
        max-width: 97% !important;
    }
    #yearviewAllMeetings .tp .base .week-row .week-date,
    #yearviewAllMeetings .tp .base2 .week-row .week-date,
    #yearviewAllMeetings .tp .base .week-row .week-day,
    #yearviewAllMeetings .tp .base2 .week-row .week-day{
        font-size: var(--font-size-11) !important;
    }
    .threedots{
        left: 5rem !important;
    }
    #monthviewAllMeetings .bg .base, #monthviewAllMeetings .days-bg .base{
        padding: 1rem !important;
    }
    .event-listing-span{
        margin-bottom: 0.5rem !important;
    }
    #monthviewAllMeetings .days-bg .base, #monthviewAllMeetings .days-bg .base2{
        max-height: 100%;
        height: calc(100% - 81%);
    }
    .weekdays{
        line-height: 3.5rem !important;
    }
    .calendarbody{
        max-width: 98.5% !important;
    }
     .reddot-meeting-name{
        max-width: 8rem;
    }
    .week-meeting-time{
        max-width: 8rem;
    }
    .week-time-right{
        max-width: 88.67% !important;
    }
    .week-time-left{
        max-width: 11.1% !important;
    }
    #weekviewAllMeetings .bg .base{
        padding: 2rem 8rem 2rem 2rem !important;
    }
     #scheduleviewAllMeetings .col-sm-1.base.float-left{
        padding: 2rem 4rem 2rem 2rem;
    }
    #scheduleviewAllMeetings .week-time-right{
        max-width: 83% !important;
    }
    #scheduleviewAllMeetings .left-duration{
        padding: 0rem 2.2rem 0rem 0.5rem !important;
        font-size: var(--font-size-11) !important;
    }
    #scheduleviewAllMeetings .left-time{
        font-size: var(--font-size-11) !important;
    }
    .meetingpopup-modal{
        top: 32% !important;
        left: 53% !important;
    }
    .notifyModalBody{
        top:35% !important;
        left: 53% !important;
    }
    .successfullySection{
        top: 34% !important;
    }
    .yearpopup-modal{
        top: 14% !important;
        left: 26% !important;
    }
    #meeting-details-popup{
        top: 33% !important;
        left: 53% !important;
    }
    .main-meetin-inner-section{
        padding: 0rem 0rem 0rem 0.5rem !important;
    }
    .meeting-common-margin{
        margin-right: 0.5rem !important;
    }
    .availble-section{
        margin-left: 0.5rem !important;
    }
    .meeting-right-part{
        max-width: 42% !important;
    }
    .date-left{
        padding-right: inherit !important;
    }
    .conflictingpopup-modal{
        top: 27% !important;
        left: 44% !important;
        max-width: 45% !important;
    }
    .conflictingpopup-modal-content .conflictingpopup-listall{
        padding-left: 1rem !important;
        padding-right: 0rem !important;
    }
    .conflictingpopup-modal-content .conflictingpopup-listall .conflictingpopup-single-user .conflictingpopup-user-image{
        width: 19% !important;
    }
    .conflictingpopup-modal-content .conflictingpopup-listall .conflictingpopup-single-user .conflictingpopup-user-detail{
        width: 78% !important;
        margin-left: inherit !important;
    }
    .conflictingpopup-booking-modal{
        left: 21% !important;
        top: 14% !important;
        max-width: 50% !important;
    }
    .conflictingpopup-booking-modal-content .conflictingpopup-booking-main .conflictingpopup-booking-single-user{
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }
    .meeting-popup-header{
        border-top: inherit !important;
        border-left: inherit !important;
    }
    .pleaseWait{
        top: 30% !important;
    }
    .scheduleEmptyMain{
        left: 26% !important;
    }
    /* dashboard */
    section#dashboard-template{
        margin-left: 0.8rem !important;
    }
    /* menu */
    .count-new-notification{
        right: 0.8rem !important;
    }
    /* body empty state */
    .tabSize{
        transform: translate(-50%, -14%) !important;
    }
}

/* your css rules for ipad pro landscape */
@media only screen
  and (device-width: 1366px)
  and (device-height: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1.5) {
    /* global search*/
    .global-msg-list-section{
        max-width: 96.5% !important;
    }
    .global-msg-contact-name{
        max-width: 91% !important;
    }
    .global-file-section-data{
        max-width: 97.5% !important;
    }
    /* header icon */
    /* file manager */
    .FileTabpageScroll {
        height: calc(83vh - 25.6rem) !important;
    }
     /* calendar */
    .event-listing-span{
        margin-bottom: 0.5rem !important;
    }
    .threedots{
        left: 7.5rem !important;
    }
    .weekdays{
        line-height: 3.5rem !important;
    }
    .meetingpopup-modal{
        top: 41% !important;
        left: 51% !important;
    }
    .notifyModalBody{
        top: 43% !important;
        left: 51% !important;
    }
    .successfullySection{
        top: 43% !important;
        left: 51% !important;
    }
    .yearpopup-modal{
        top: 18% !important;
        left: 31% !important;
    }
    .meeting-common-margin{
        margin-right: 0.5rem !important;
    }
    .availble-section{
        margin-left: 0.5rem !important;
    }
    .conflictingpopup-modal{
        top: 33% !important;
        left: 44% !important;
        max-width: 35% !important;
    }
    .conflictingpopup-modal-content .conflictingpopup-listall{
        padding-left: 1rem !important;
        padding-right: 0rem !important;
    }
    .conflictingpopup-modal-content .conflictingpopup-listall .conflictingpopup-single-user .conflictingpopup-user-image{
        width: 19% !important;
    }
    .conflictingpopup-modal-content .conflictingpopup-listall .conflictingpopup-single-user .conflictingpopup-user-detail{
        width: 78% !important;
        margin-left: inherit !important;
    }
    .conflictingpopup-booking-modal{
        left: 25% !important;
        top: 14% !important;
        max-width: 40% !important;
    }
    .conflictingpopup-booking-modal-content .conflictingpopup-booking-main .conflictingpopup-booking-single-user{
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }
    .meeting-popup-header{
        border-top: inherit !important;
        border-left: inherit !important;
    }

    .pleaseWait{
        top: 40% !important;
    }
    .scheduleEmptyMain{
        left: 32% !important;
        top: 26% !important;
    }
    /* dashboard */
    section#dashboard-template{
        margin-left: 0.5rem !important;
    }
    /* menu */
    .count-new-notification{
        right: 0.8rem !important;
    }
    /* body empty state */
}

@media (max-width: 1024px) {
  .menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }

  .darkmode .menu-button {
    color: var(--white);
  }

  .sidebar.mobile-open {
    left: 0;
  }

  .sidebar-overlay {
    display: none;
  }

  .page-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

}

  .sidebar-overlay {
    display: none;
  }


@media (min-width: 1025px) {
  .sidebar-overlay {
    display: none !important;
  }

  .menu-button {
    display: none !important;
  }
}

/* Ensure sidebar transitions smoothly */
.sidebar {
  transition: all 0.3s ease;
}

.menu-button svg {
  width: 24px;
  height: 24px;
}

.darkmode .menu-button svg path {
    stroke: var(--white);
}