/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    .calender-legend-color {
        margin-top: 4px;
    }
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    body {
        font-size: 11px;
    }

    .form-control {
        font-size: 11px;
    }

    .dropdown-menu {
        font-size: 11px;
    }

    h3, .h3 {
        font-size: 17px;
    }

    h5, .h5 {
        font-size: 12px;
    }

    h6, .h6 {
        font-size: 13px;
    }

    .btn {
        font-size: 13px;
    }

    .fc-today-button, #dropdownMenuButton i, .fc-timeGridDay-button, .fc-listWeek-button {
        display: none;
    }

    #shareMySchedule, #shareMySchedule i {
        font-size: 10px;
    }

    #dropdownMenuAllButton, #dropdownMenuAllButton i {
        font-size: 10px;
    }

    .common-share {
        right: 72px;
    }

    .credit-card {
        width: 266px;
        height: 188px;
    }

    .card__part {
        width: 266px;
        height: 188px;
    }

    .black-card-edit-screen {
        width: 266px;
        height: 188px;
    }

    .overlay-card-edit-screen {
        width: 266px;
        height: 188px;
    }

    .cc_name {
        width: 191px;
        margin: 0px 0px 11px 37px;
    }

    .fc-today-button, #dropdownMenuButton i, .fc-timeGridDay-button, .fc-listWeek-button {
        display: none;
    }

    .common-search {
        position: absolute;
        right: 132px;
        width: 136px;
        height: 28px;
    }

        .common-search input.form-control {
            width: 100px;
        }

    .search-box {
        height: 28px;
    }

    .search-btn {
        height: 28px;
    }

    .common-search .input-group-text {
        font-size: 10px;
    }

    ol.account-setup-progress li {
        font-size: 7px;
    }

    .calender-legend-color {
        margin-top: 4px;
    }
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    body {
        font-size: 13px;
    }
    .mobileView {
        display: none;
    }
    .AttendanceMobileView {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }
    .PercentMobileView {
        font-size: 10px;
    }
    .form-control {
        font-size: 13px;
    }

    .dropdown-menu {
        font-size: 13px;
    }

    h3, .h3 {
        font-size: 17px;
    }

    .btn {
        font-size: 13px;
    }

    .fc-today-button, #dropdownMenuButton i, .fc-timeGridDay-button, .fc-listWeek-button {
        display: none;
    }

    #shareMySchedule, #shareMySchedule i {
        font-size: 10px;
    }

    #dropdownMenuAllButton, #dropdownMenuAllButton i {
        font-size: 10px;
    }

    .common-share {
        right: 72px;
    }

    .common-chat {
        position: absolute;
        right: 273px;
    }

    #chat, #chat i {
        font-size: 10px;
    }

    .common-search {
        position: absolute;
        right: 132px;
        width: 136px;
        height: 28px;
    }

    .common-search input.form-control {
        width: 100px;
    }

    .search-box {
        height: 28px;
    }

    .search-btn {
        height: 28px;
    }

    .common-search .input-group-text {
        font-size: 10px;
    }

    ol.account-setup-progress li {
        font-size: 8px;
    }

    .calender-legend-color {
        margin-top: 4px;
    }
}

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
    body {
        font-size: 13px;
    }

    .form-control {
        font-size: 13px;
    }

    .dropdown-menu {
        font-size: 13px;
    }

    h3, .h3 {
        font-size: 17px;
    }

    .btn {
        font-size: 13px;
    }

    .fc-today-button, #dropdownMenuButton i, .fc-timeGridDay-button, .fc-listWeek-button {
        display: none;
    }

    .common-search {
        position: absolute;
        right: 132px;
        width: 166px;
        height: 28px;
    }

    .common-search input.form-control {
        width: 130px;
    }

    .search-box {
        height: 28px;
    }

    .search-btn {
        height: 28px;
    }

    .common-search .input-group-text {
        font-size: 10px;
    }

    ol.account-setup-progress li {
        font-size: 8px;
    }

    .calender-legend-color {
        margin-top: 4px;
    }
}

/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
}

/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    body {
        font-size: 13px;
    }

    .form-control {
        font-size: 13px;
    }

    .dropdown-menu {
        font-size: 13px;
    }

    h3, .h3 {
        font-size: 17px;
    }

    .btn {
        font-size: 13px;
    }

    .fc-today-button, #dropdownMenuButton i, .fc-timeGridDay-button, .fc-listWeek-button {
        display: none;
    }

    #shareMySchedule, #shareMySchedule i {
        font-size: 10px;
    }

    #dropdownMenuAllButton, #dropdownMenuAllButton i {
        font-size: 10px;
    }

    .common-share {
        right: 72px;
    }

    .main-header h3.m-0 {
        line-height: 2.2;
    }

    .common-chat {
        position: absolute;
        right: 273px;
    }

    #chat, #chat i {
        font-size: 10px;
    }

    .common-search {
        position: absolute;
        right: 132px;
        width: 136px;
        height: 28px;
    }

    .common-search input.form-control {
        width: 100px;
    }

    .search-box {
        height: 28px;
    }

    .search-btn {
        height: 28px;
    }

    .common-search .input-group-text {
        font-size: 10px;
    }

    ol.account-setup-progress li {
        font-size: 8px;
    }

    .calender-legend-color {
        margin-top: 4px;
    }
}

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
}

/* ===== Standard viewport-width responsive fix for the top navbar =====
   The device-width queries above may not fire in Chrome DevTools emulation
   or some modern browsers. These max-width rules cover all cases.

   Root cause: .common-search uses position:absolute with right:283px (desktop).
   On a 375px viewport that places the box at left=-165px (off-screen).
   Fix: keep position:absolute but use a smaller right value so the box stays
   within the viewport. Because the box remains out-of-flow, the Chat button
   (which IS in the normal flex flow) stays on the left — naturally appearing
   before the search box without any DOM reordering.
*/
@media screen and (max-width: 768px) {
    /*
     * Mobile navbar layout — all elements are position:absolute relative to
     * the fixed nav (375px wide). Positions from right edge, left to right:
     *   sign-out   right:5px   (40px) → x 330–370
     *   New+       right:50px  (40px) → x 285–325   gap 5px
     *   bell       right:95px  (35px) → x 245–280   gap 5px
     *   search     right:135px (110px)→ x 130–240   gap 5px
     *   Chat (flex-flow)        (~85px)→ x  30–115   gap 15px
     */

    /* ── Search box ─────────────────────────────────────────── */
    .common-search {
        position: absolute !important;
        right: 167px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-top: 0 !important;
        width: 90px !important;
        height: 30px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    #main-search .dxbs-textbox {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .common-search input.form-control {
        width: 100% !important;
        height: 30px !important;
        padding: 2px 6px !important;
        font-size: 12px !important;
    }

    .common-search .btn-primary.search-btn {
        flex: 0 0 30px !important;
        width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        padding: 4px !important;
        align-self: stretch !important;
    }

    #main-search .btn-success {
        display: none !important;
    }

    /* ── Notification bell ──────────────────────────────────── */
    /* Desktop puts this at right:785px (off-screen on mobile).  */
    /* right:127 puts right-edge at 248px, clearing OOO at 251.  */
    .notificationsBtn {
        right: 127px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .notificationsBtn #dropdownMenuNotificationButton {
        margin-top: 0 !important;   /* override inline margin-top:10px */
        padding: 3px 5px !important;
    }

    /* ── New+ / OOO ─────────────────────────────────────────── */
    .common-add {
        right: 49px !important;
    }

    /* ── Sign-out ────────────────────────────────────────────── */
    .signOutBtn {
        right: 3px !important;
    }
}