@media screen and (min-width: 1281px){
    .live-updates {
        margin-left: 25px;
    }
}

@media screen and (max-width: 1280px) and (min-width: 1101px) {
    .live-updates {
        margin-left: 0;
    }

    .not-found{
        max-width: 400px;
    }
}

@media screen and (max-width: 1100px){
    body.off-canvas a.onoffcanvas-toggler {
        display: inline-block;
    }
    body.off-canvas a.mini-nav-btn {
        display: none;
    }

    .live-updates {
        display: none;
    }

    .app-main {
        margin-left: 0;
    }

    .side-nav .unifyMenu>li.selected:after {
        background: transparent;
    }

    a.mini-nav-btn {
        display: none;
    }

    a.onoffcanvas-toggler {
        display: inline-block;
    }

    .app-header {
        left: 0;
    }

    .app-side {
        left: 0;
        box-shadow: none;
    }
    .app-side.is-open {
        left: -230px;
    }

    .not-found{
        max-width: 350px;
    }
}

@media screen and (min-width: 992px) {
    .app-side.is-mini {
        width: 80px;
        left: 0;
    }
    .app-side.is-mini~.app-main {
        margin-left: 80px;
    }
    .app-side.is-mini .unifyMenu>li.selected:after {
        background: transparent;
    }
    .app-side.is-mini .unifyMenu>li>ul {
        position: absolute;
        top: 100%;
        left: 100%;
        display: none;
    }
    .app-side.is-mini .unifyMenu>li>ul>li>a {
        padding: 0.5em 0.5em 0.5em 1.5em;
    }
    .app-side.is-mini .unifyMenu>li:hover>ul {
        display: block;
        min-width: 192px;
        height: auto !important;
        box-shadow: 2px 2px 0 2px #d5dfeb;
    }
    .app-side.is-mini .unifyMenu>li:hover>a {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        min-width: 257px;
        color: #ffffff;
        background: #118cf1;
    }
    .app-side.is-mini .unifyMenu>li:hover>a:active,
    .app-side.is-mini .unifyMenu>li:hover>a:focus,
    .app-side.is-mini .unifyMenu>li:hover>a:hover {
        color: #ffffff;
        background: #118cf1;
    }
    .app-side.is-mini .unifyMenu>li:hover .nav-title {
        display: inline-block;
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    }
    .app-side.is-mini .unifyMenu>li:hover>.has-arrow::after {
        border-width: 1px 0 0 1px;
    }
    .app-side.is-mini .unifyMenu>li>a.has-arrow::after {
        border-width: 0;
    }
    .app-side.is-mini .unifyMenu li:last-child {
        padding-bottom: 0;
    }
    .app-side.is-mini .unifyMenu ul ul a {
        padding-left: 2.5rem;
    }
    .app-side.is-mini .unifyMenu a span.lbl {
        display: none;
    }
    .app-side.is-mini .unifyMenu a span.badge {
        display: none;
    }
    .app-side.is-mini .nav-title {
        display: none;
    }
    .app-side.is-mini a.logo {
        padding: 20px 10px 20px 10px;
    }
    .app-side.is-mini a.logo img {
        max-width: 50px;
    }
    .app-side.is-mini .has-icon {
        width: 80px;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 80px;
        -ms-flex: 0 0 80px;
        flex: 0 0 80px;
    }

    .app-side.is-mini .sidebar-widget ul.contributions li p span {
        float: none;
        display: block;
    }
}

@media screen and (max-width: 992px){
    .header-actions>li>a.user-settings span.user-name {
        display: none;
    }

    body.full-screen .app-side {
        left: -230px;
    }

    body.full-screen .app-side.is-open {
        left: 0;
    }

    .app-side {
        left: -230px;
    }

    .app-side.is-open {
        left: 0;
    }

    .img-logo{
        margin-top: 20px;
    }

    .login-screen {
        margin-top: 20px;
    }

    .not-found{
        max-width: 300px;
    }

    /*.app-side.fixed{
        padding-top: 100px;
    }*/
}

@media screen and (max-width: 768px){
    .d-flex{
        flex-wrap: wrap;
    }

    .sign-screen .sign-tabs{
        padding: 0 1rem;
    }

    .logo-block {
        min-width: 215px;
        max-width: 215px;
    }

    a.logo {
        min-width: 140px;

        img {
            max-width: 120px;
            max-height: 30px;
        }
    }

    .btn-group{
        width: 100%;
    }

    .btn-group .btn{
        display: block;
        width: 100%;
        margin-bottom: 15px;
    }

    .btn-group > .btn:last-child{
        margin-bottom: 0;
    }

    .btn-group-sm .btn {
        margin-bottom: 0;
    }

    .dataTables_length,.dataTables_filter {
        text-align: left!important;
    }

    div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{
        padding-left: 0;
    }

    .search-results .search-section {
        width: 100%;
        max-width: 100%;
    }

    .plan-one .pricing-header {
        text-align: center;
    }
    .plan-one .pricing-header i {
        display: block;
        float: none;
        margin-bottom: 20px;
    }

    .task-container.high-priority {
        margin-bottom: 1rem;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
    .task-container.low-priority {
        margin-bottom: 1rem;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }

    .timeline {
        padding: 15px 10px;
    }
    .timeline:after {
        left: 28px;
    }
    .timeline .timeline-row {
        padding-left: 0;
        margin-bottom: 16px;
    }
    .timeline .timeline-row .timeline-time {
        position: relative;
        right: auto;
        top: 0;
        text-align: left;
        margin: 0 0 6px 56px;
    }
    .timeline .timeline-row .timeline-time strong {
        display: inline-block;
        margin-right: 10px;
    }
    .timeline .timeline-row .timeline-icon {
        top: 52px;
        left: -2px;
        margin-left: 0;
    }
    .timeline .timeline-row .timeline-content {
        padding: 15px;
        margin-left: 56px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        position: relative;
    }
    .timeline .timeline-row .timeline-content:after {
        right: auto;
        left: -39px;
        top: 32px;
    }
    .timeline .timeline-row:nth-child(odd) {
        padding-right: 0;
    }
    .timeline .timeline-row:nth-child(odd) .timeline-time {
        position: relative;
        right: auto;
        left: auto;
        top: 0;
        text-align: left;
        margin: 0 0 6px 56px;
    }
    .timeline .timeline-row:nth-child(odd) .timeline-content {
        margin-right: 0;
        margin-left: 55px;
    }
    .timeline .timeline-row:nth-child(odd) .timeline-content:after {
        right: auto;
        left: -39px;
        top: 32px;
        border-right: 18px solid #118cf1;
        border-left: inherit;
    }
    .timeline.animated .timeline-row:nth-child(odd) .timeline-content {
        left: 20px;
    }
    .timeline.animated .timeline-row.active:nth-child(odd) .timeline-content {
        left: 0;
    }

    .media.comments {
        overflow: auto;
    }

    .main-heading .page-icon {
        display: none;
    }

    .profile-header .welcome-msg .btn {
        display: none;
    }
    .profile-header .welcome-msg .welcome-title {
        margin-bottom: 0;
    }
    .profile-header .welcome-msg .welcome-designation {
        margin-bottom: 0;
    }

    .welcome-msg .btn {
        display: none;
    }
    .welcome-msg .welcome-title {
        margin-bottom: 0;
        font-size: 1.5rem;
    }
    .welcome-msg .welcome-designation {
        margin-bottom: 0;
    }
    .welcome-msg .welcome-user-thumb img {
        width: 32px;
        height: 32px;
    }

    .user-plans {
        margin: 1rem 0 0 0;
    }
    .user-plans.sm {
        margin: 1rem 0 0 0;
    }

    .header-actions>li {
        display: block;
    }

    .header-actions>li:last-child {
        display: block;
        border-left: 0;
    }

    .not-found{
        max-width: 250px;
    }

    .btn-group>.btn-group:not(:last-child)>.btn,
    .btn-group>.btn:not(:last-child):not(.dropdown-toggle){
        border-top-right-radius: 0.35rem;
        border-bottom-right-radius: 0.35rem;
    }

    .btn-group>.btn-group:not(:first-child)>.btn,
    .btn-group>.btn:not(:first-child){
        border-top-left-radius: 0.35rem;
        border-bottom-left-radius: 0.35rem;
    }

    .btn-group.btn-group-sm>.btn:not(:last-child):not(.dropdown-toggle){
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .btn-group.btn-group-sm>.btn:not(:first-child){
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    /* Drip Campaign Messages - Stack input-groups vertically (link_builder_drip.tpl) */
    #frmLinkBuilder .input-group {
        flex-wrap: wrap;
    }

    #frmLinkBuilder .input-group > .input-group-prepend,
    #frmLinkBuilder .input-group > .input-group-append {
        flex: 0 0 100%;
        width: 100%;
    }

    #frmLinkBuilder .input-group > .input-group-prepend > .input-group-text {
        flex: 1;
        border-radius: 0 !important;
        border-bottom: 0;
    }

    #frmLinkBuilder .input-group > .input-group-prepend > .input-group-text:first-child {
        border-top-left-radius: 0.35rem !important;
    }

    #frmLinkBuilder .input-group > .input-group-prepend > .input-group-text:last-child {
        border-top-right-radius: 0.35rem !important;
    }

    #frmLinkBuilder .input-group > .input-group-append > .input-group-text {
        flex: 1;
        border-radius: 0 !important;
        border-top: 0;
    }

    #frmLinkBuilder .input-group > .input-group-append > .input-group-text:first-child {
        border-bottom-left-radius: 0.35rem !important;
    }

    #frmLinkBuilder .input-group > .input-group-append > .input-group-text:last-child {
        border-bottom-right-radius: 0.35rem !important;
    }

    #frmLinkBuilder .input-group > .form-control,
    #frmLinkBuilder .input-group > .custom-select {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100% !important;
        border-radius: 0 !important;
    }

    #frmLinkBuilder .input-group > .form-control:last-child,
    #frmLinkBuilder .input-group > .custom-select:last-child {
        border-bottom-left-radius: 0.35rem !important;
        border-bottom-right-radius: 0.35rem !important;
    }

    #frmLinkBuilder input[name="meg_day[]"] {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        border-bottom-left-radius: 0.35rem !important;
        border-bottom-right-radius: 0.35rem !important;
    }

    #frmLinkBuilder .show_message_option .input-group > span.pt-2 {
        flex: 0 0 100%;
        padding: 0.5rem 0 0 0;
    }

    #frmLinkBuilder select[name="follow_up_minutes[]"] {
        max-width: 100% !important;
    }

    /* Full-width block button on mobile */
    .btn-block-mobile {
        display: block;
        width: 100%;
    }

    /* Drip Campaign - AI Messages Modal: fix iOS Safari 100vh bug */
    #modalGenerateAIMessages .modal-dialog.modal-dialog-centered {
        display: block;
        min-height: auto;
    }

    #modalGenerateAIMessages .modal-dialog.modal-dialog-centered::before {
        display: none;
    }

    #modalGenerateAIMessages .input-group {
        flex-wrap: wrap;
    }

    #modalGenerateAIMessages .input-group > .input-group-prepend {
        flex: 0 0 100%;
        width: 100%;
    }

    #modalGenerateAIMessages .input-group > .input-group-prepend > .input-group-text {
        border-radius: 0.35rem 0.35rem 0 0 !important;
        border-bottom: 0;
    }

    #modalGenerateAIMessages .input-group > .form-control,
    #modalGenerateAIMessages .input-group > .custom-select {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100% !important;
        border-radius: 0 0 0.35rem 0.35rem !important;
    }
}

@media screen and (max-width: 576px){
    .app-header {
        position: inherit;
    }

    .app-container {
        top: inherit;
    }

    .not-found{
        max-width: 200px;
    }

    .showcounter {
        border-radius: 50%;
        width: 36px;
        height: 36px;
        padding: 7px;
        text-align: center;
        background-color: #000000;
        color: #FFFFFF;
        border: 2px solid #666;
        font-weight: bold;
        margin-bottom: 13px;
        margin-left: 118px;
    }

    #otpAppend{
        display: block;
        margin-top: 1rem;
        width: 100%;
    }

    #otpAppend #get_otp{
        display:block;
        width:100%;
    }

    #otpAppend #next-tab-3{
        display:block;
        width:100%;
    }

    .order-tab .order-tab-style .order-tab-text {
        color: #9B9B9B;
        font-size: 14px;
    }

}

/* Generic Responsive Display Classes */
/* Show only on mobile (< 768px) */
.show-mobile {
    display: inline;
}

/* Show only on tablet (768px - 1199px) */
.show-tablet {
    display: none;
}

/* Show only on desktop (>= 1200px) */
.show-desktop {
    display: none;
}

@media screen and (min-width: 768px) {
    .show-mobile {
        display: none;
    }

    .show-tablet {
        display: inline;
    }

    .show-desktop {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    .show-mobile {
        display: none;
    }

    .show-tablet {
        display: none;
    }

    .show-desktop {
        display: inline;
    }
}
/* ============================================
   SENDER VERIFICATION WIZARD - RESPONSIVE
   ============================================ */

/* Tablets (768px - 991px) */
@media (max-width: 991px) {
   .wizard-progress {
      padding: 15px 0;
   }

   .step-circle {
      width: 45px;
      height: 45px;
      font-size: 16px;
   }

   .step-label {
      font-size: 13px;
      margin-top: 8px;
   }

   .wizard-connector {
      margin: 22px -5px 0 -5px;
   }

   .wizard-panel-title {
      font-size: 16px;
   }
}

/* Mobile Landscape (576px - 767px) */
@media (max-width: 767px) {
   .wizard-progress {
      padding: 10px 0;
   }

   .step-circle {
      width: 40px;
      height: 40px;
      font-size: 14px;
      border-width: 2px;
   }

   .step-label {
      font-size: 11px;
      margin-top: 6px;
   }

   .wizard-connector {
      height: 2px;
      margin: 20px -3px 0 -3px;
   }

   .wizard-panel-title {
      font-size: 15px;
      padding-bottom: 12px;
      margin-bottom: 15px;
   }

   .wizard-buttons .btn {
      padding: 10px 16px;
      font-size: 14px;
   }

   .nav-billing {
      flex-direction: column;
      border-bottom: 0;
   }
   .nav-billing .nav-item {
      margin-right: 0 !important;
      margin-bottom: 0.25rem;
   }
   .nav-billing .nav-link {
      border-radius: 0.25rem;
   }
}

/* Mobile Portrait (up to 575px) */
@media (max-width: 575px) {
   .wizard-progress {
      padding: 8px 0;
   }

   .step-circle {
      width: 36px;
      height: 36px;
      font-size: 13px;
   }

   .step-label {
      font-size: 10px;
      margin-top: 5px;
      max-width: 60px;
      word-wrap: break-word;
   }

   .wizard-connector {
      margin: 18px -2px 0 -2px;
   }

   .wizard-panel-title {
      font-size: 14px;
   }

   .wizard-buttons .btn {
      padding: 10px 12px;
      font-size: 13px;
   }

   /* reCAPTCHA responsive */
   .g-recaptcha {
      transform: scale(0.85);
      transform-origin: center;
   }
}

/* Extra Small Devices (up to 400px) */
@media (max-width: 400px) {
   .step-circle {
      width: 32px;
      height: 32px;
      font-size: 12px;
   }

   .step-label {
      font-size: 9px;
      max-width: 50px;
   }

   .wizard-connector {
      margin: 16px -1px 0 -1px;
   }

   .wizard-panel-title {
      font-size: 13px;
   }

   .g-recaptcha {
      transform: scale(0.77);
   }
}

/* Dual Listbox Responsive */
@media (max-width: 767.98px) {
   .dual-listbox-wrapper .dual-available-list,
   .dual-listbox-wrapper .dual-selected-list {
      height: 150px !important;
   }

   .dual-listbox-wrapper .dual-item {
      font-size: 0.9rem;
      padding: 0.4rem !important;
   }
}

@media (max-width: 575.98px) {
   .dual-listbox-wrapper .btn-sm {
      padding: 0.25rem 0.5rem;
      font-size: 0.8rem;
   }
}
