.lightblue {
    background: #02b4ef;
    color: #fff;
}

a.lightblue:hover, button.lightblue:hover {
    color: #fff;
}

@media (max-width: 1500px) {
    .container {
        width: 100% !important;
        max-width: 100%;
    }
    .re-signup .container {
        max-width: 1140px;
        width: 100% !important;
    }
}

@media (max-width: 1275px) {
    .sales-user-id {
        display: none !important;
    }

    .attached-file-type {
        bottom: 20px;
        margin-left: 54px;
    }
}

@media (max-width: 1300px) {
    #header, body {
        min-width: initial !important;
    }

    .header-col-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .header-col-right .time {
        font-size: 22px;
    }

    #calendar .userview table td {
        border-right: 1px solid #e5e5e5;
    }

    .dashboard .title-text {
        margin-bottom: 0;
        margin-top: -15px;
    }

    .dashboard .title-text h1 {
        font-size: 26px;
        margin-bottom: 0;
        line-height: 35px;
    }

    .dashboard .title-text h3 {
        margin-bottom: 0;
        line-height: 24px;
        font-size: 16px;
    }

    .fixed-subnav {
        z-index: 999;
    }

    .health-description {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .health-inputs {
        min-width: 730px;
    }

    .quickAdd {
        background: transparent;;
        border: none;
    }
    .intake-page {
        width: 100%;
        max-width: 100%;
    }

    .calendar-wrapper .sub-nav .btn-wrap .btn {
        margin-left: 5px !important;
    } 
}

@media only screen and (min-width: 768px) and (max-width: 1170px) {
    #cal-next, #cal-prev {
        margin-top: 0px !important;
    }

    .invoiceFilterWrap .select2 {
        width: 125px !important;
    }

    .invoiceFilterWrap {
        display: flex !important;
    }

    .trial-header {
        padding: 0px 15px;
        min-width: 100%;
    }

    .trail-p {
        font-size: 16px;
        padding-right: 15px;
    }

    .free_setup_consult {
        font-size: 14px;
        margin: 0;
        border-radius: 6px;
        padding: 0.36rem 1rem;

    }

    .speak-with-us {
        font-size: 14px;
        line-height: normal;
        padding-right: 15px;
    }

    .trial-pay-now {
        padding: 6px 15px;
        font-size: 14px;
        margin: 0;
        border-radius: 6px;
    }

    .header-trial-right .profile-set {
        height: 40px;
        width: 40px;
    }

    .trial-body #header.hideLg {
        top: 64px;
    }
    .checklist-item {
        width: calc(57% - 20px) !important;
    }
    .checklist-wrapper .content-text-list h2 {
        margin-bottom: 10px !important;
        line-height: 24px;
    }
    .content-text-list h2 {
        font-size: 16px;
    }
    .content-text-list p {
        font-size: 12px;
        line-height: 16px;
    }
    .checklist-box {
        padding: 0;
    }
    .checkbox-value h6 {
        font-size: 12px;
    }
    .checkbox-value p {
        font-size: 10px;
        line-height: 1;
    }
    .checkbox_2.bg_bckhk {
        width: 16px;
    }
    .filters_content {
        margin-bottom: 5px;
        align-items: self-start;
    }
    /*.checklist-cal-image {*/
        /*padding-left: 0;*/
    /*}*/
    .checkbox-value {
        padding-left: 8px;
    }

    .got-text a {
        font-size: 12px;
    }
    .checklist-wrapper .content-text-list {
        padding: 28px 0px;
    }
    .checklist-wrapper .checklist-item .white-box {
        padding: 0px 15px;
    }
    #creditPopup {
        margin-top: 100px;
    }
    .selected-plan {
        width: 178px;
    }
}

@media only screen and (min-width: 1171px) and (max-width: 1233px) {
    .invoicePageFilter {
        width: 288px !important;
        padding: 0px !important;
    }
    .selected-plan {
        width: 178px;
    }
}

@media only screen and (min-width: 1170px) and (max-width: 1450px) {
    .roster-booking-left {
        width: 200px;
    }
    .roster-booking-left h3 {
        font-size: 10px;
    }
    .roster-td {
        font-size: 10px;
    }

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
}

@media only screen and (min-width: 768px) and (max-width: 1170px) {
    .trial-header {
        padding: 0px 15px;
        min-width: 100%;
    }

    .trail-p {
        font-size: 16px;
        padding-right: 15px;
    }

    .free_setup_consult {
        font-size: 14px;
        margin: 0;
        border-radius: 6px;
        padding: 0.36rem 1rem;

    }

    .speak-with-us {
        font-size: 14px;
        line-height: normal;
        padding-right: 15px;
    }

    .trial-pay-now {
        padding: 6px 15px;
        font-size: 14px;
        margin: 0;
        border-radius: 6px;
    }

    .header-trial-right .profile-set {
        height: 40px;
        width: 40px;
    }

    .trial-body #header.hideLg {
        top: 64px;
    }
    .sub-childnav.client-dtls
    {
        display:none;
    }

    .team-search-wrap {
        top: 2px;
        width: 25% !important;
        margin-left: 10px;
    }

    .teamMemebersList {
        float: right !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {


}
@media only screen and (device-width: 768px) {
    /* For portrait layouts only */
    .custom-payment #add-payment-content .select2-container{
        width: 140px !important;
    }
    #add-payment-content .currency-field .form-control{
        width: 100%;
        margin-right: 0px;
    }
    .record-payment-new .footer-top {
        padding: 8px 0px;
    }
}
/*ipad landscape view*/
@media (min-width: 991px) and (max-width: 1199px) {
    .search-wrap {
        width: 240px;
        padding-top: 0px;
    }

    .sub-nav .btn-wrap .btn {
        margin-left: 10px !important;
    }

    .search-wrap input {
        font-size: 13px;
        font-weight: 500;
    }
    .checklist-wrapper .content-text-list {
        padding: 30px 0px;
    }
    .checklist-item {
        width: calc(67% - 20px) !important;
    }
    .filters_content {
        margin-bottom: 10px;
    }
    .content-text-list p {
        font-size: 16px;
        line-height: 20px;
    }
    .got-height {
        min-height: 242px;
    }
    .formIndividualField .formFieldData {
        min-width: 75%;
        margin-right: 10px;
    }

}

@media (min-width: 1501px) {
    .containera {
        width: 1400px;
        max-width: 1400px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1171px) {
    .fixed-header-bar .option-wrap.blue-bg.action-client-form {
        min-height: 46px;
        line-height: 32px;
        max-height: 100%;
    }
    .sub-nav {
        min-height: 35px;
        display: flex;
        align-items: center;
      }
    .fixed-header-bar .general-invoice-main-list  {
        padding-top: 40px;
    }
    .time-bar {
        padding-right: 0px;
    }
    .hideIt nav ul#menu li.retail-pos-header {
        margin-right: 0;
        margin-left: 25px;
    }
    header.hideLg {
        display: none;
    }

    .product-setting-boxes .status-wrap {
        margin-right: 14px !important;
    }
    /*Actionbar style*/
    .fixed-header-bar .domain-list {
        padding-top: 44px;
    }
    .fixed-header-bar .notes-wrapper.edit-note-wrapper {
        padding-top: 105px;
    }

    .fixed-header-bar .option-wrap.blue-bg.merge-clients-bluebg {
        position: fixed;
        z-index: 100;
        right: 0;
        left: 0;
    }
    .fixed-header-bar #filter-container {
        position: fixed;
        z-index: 100;
        right: 0;
        left: 0;
        margin-top: 84px;
        min-height: 40px;
        /* max-height: 40px; */
    }

    .fixed-header-bar .main.client-list.contact #filter-container{
        margin-top: 40px;
    }
    .fixed-header-bar.filter-opened .client-table.table-list.general-list.action-nav-blling-contacts {
        padding-top: 84px;
    }
    .fixed-header-bar.filter-opened .main.selected .option-wrap.blue-bg.action-nav-contacts{
        margin-top: 82px;
    }

    .fixed-header-bar.filter-opened .client-table.table-list.general-list.action-nav-blling-contacts.selected {
        padding-top: 125px;
    }

    .fixed-header-bar .main {
        padding: 46px 0;
    }
    .fixed-header-bar .main.new-message-lists {
        padding-top: 86px;
    }

    .fixed-header-bar .main.formBox {
        padding: 86px 0;
    }

    .fixed-header-bar .padding-top-0  {
        padding-top: 0px;
    }

    .fixed-header-bar .main.setting.product-setting-boxes {
        padding-top: 0px;
    }

    .fixed-header-bar .teamMembersDetails {
        padding-top: 92px;
    }
    .fixed-header-bar .row.teamMembersDetailsNew {
        padding-top: 50px;
    }
    .fixed-header-bar .secondary-nav{
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .fixed-header-bar .main.client.ClientDetailsBox {
        padding-top: 50px;
    }

    .fixed-header-bar .action-nav{
        position: fixed;
        width: 100%;
        z-index: 889;
        margin-top: 46px;
    }

    .fixed-header-bar .onlineProductSettings {
        z-index: 3;
    }
    .fixed-header-bar .messageMenuBar {
        z-index: 3;
    }
    .fixed-header-bar .main.setting {
        padding: 115px 0;
    }
    .fixed-header-bar .main.setting.make-payment.credit-card-page {
        padding: 88px 0;
    }
    .fixed-header-bar .main.setting.manageCreditCards {
        padding: 95px 0;
    }
    .fixed-header-bar .main.squareSetting {
        padding: 80px 0;
    }

    .fixed-header-bar .actionbar-top {
        padding-top: 90px;
    }

    .fixed-header-bar .actionbar-top-50 {
        padding-top: 45px;
    }

    .fixed-header-bar  .main.setting.actionbar-top-85 {
        padding-top: 85px;
    }

    .fixed-header-bar .blue-action-nav {
        position: fixed;
        width: 100%;
        z-index: 3;
        margin-top: 46px;
    }
    .fixed-header-bar .blue-action-nav-products {
        position: fixed;
        width: 100%;
        z-index: 3;
        margin-top: 46px;
    }
    .fixed-header-bar .business-action-nav {
        position: fixed;
        width: 100%;
        z-index: 3;
        margin-top: 46px;
    }
    .fixed-header-bar .action-nav-no-margin{
        position: fixed;
        width: 100%;
        z-index: 889;
    }

    .fixed-header-bar .main.client.ClientDetailsBox.message-wrap {
        padding-top: 115px;
    }

    .fixed-header-bar .selected-action-nav {
        position: fixed;
        width: 100%;
        z-index: 3;
        margin-top: 86px;
        line-height: 32px;
        min-height: 46px;
        max-height: 100%;
    }

    .fixed-header-bar .main.client-list.selected .client-table {
        padding-top: 131px;
    }

    .fixed-header-bar .main.client-list.selected .client-table.sales-list.selected-sales-list{
        padding-top: 85px;
    }


    .fixed-header-bar .main.client-list.selected .client-table.action-nav-sales-expense{
        padding-top: 40px;
    }

    .fixed-header-bar .main.client-list.selected .client-table.client-message-nav {
        padding-top: 40px;
    }
    .fixed-header-bar .main.client-list.selected .client-table.action-nav-my-products {
        padding-top: 40px;
    }
    .fixed-header-bar .main.client-list.selected .client-table.message-template {
        padding-top: 44px;
    }

    .fixed-header-bar .selected-client-details-new{
        padding-top:120px;
    }

    .fixed-header-bar .tyro-blue-bg {
        position: fixed;
        width: 100%;
        z-index: 3;
    }

    .fixed-header-bar #success-message.tyro-message {
        padding-top: 45px;
    }
    .fixed-header-bar #tyro-settings-page.paddingTop {
        padding-top: 45px;
    }

    .fixed-header-bar .action-nav-client-details-new{
        position: fixed;
        width: 100%;
        z-index: 889;
        margin-top: 64px;
    }

    .fixed-header-bar .action-nav-client-notes{
        position: fixed;
        width: 100%;
        z-index: 889;
        margin-top: 55px;    
    }

    .fixed-header-bar .main.client-list.selected .action-nav-sales {
        margin-top: 40px;
        position: fixed;
        width: 100%;
        z-index: 3;
        line-height: 32px;
        min-height: 46px;
       max-height: 100%;
    }

    .fixed-header-bar .selected-sales-list{
        padding-top: 40px;
    }

    .fixed-header-bar .main.client-list.new-message-lists.selected {
        padding-top: 46px
    }

    .fixed-header-bar .main.client-list.new-message-lists.selected .action-nav-new-message{
        position: fixed;
        width: 100%;
        z-index: 3;
        margin-top: 40px;
    }
    .fixed-header-bar .main.client-list.new-message-lists.selected .table-responsive {
        margin-top: 40px;
    }

    .fixed-header-bar .new-message-main {
        padding-top: 119px;
    }

    .fixed-header-bar .client-sales-list{
        padding-top: 40px;
    }

    .fixed-header-bar .action-nav-my-sales-client{
        margin-top: 45px;
        position: fixed;
        width: 100%;
        z-index: 3;
    }

    .fixed-header-bar .client-table.table-list.action-appointment {
        padding-top: 40px;
    }

    .fixed-header-bar .client-table.table-list.action-nav-client-message-list-table {
        padding-top: 0px;
    }
    .fixed-header-bar .client-table.table-list.general-list.new-message-list.action-client-messages {
        padding-top: 40px;
    }

    .fixed-header-bar .sub-nav-waitlist-filter {
        position: fixed;
        z-index: 5;
        margin-top: 42px;
    }

    .fixed-header-bar .sub-nav-waitlist-filter .waitlistDateRange {
        margin-top: 0;
    }

    .fixed-header-bar .action-nav-client-notes{
        position: fixed;
        width: 100%;
        z-index: 889;
        margin-top: 46px;
    }

    .fixed-header-bar .nav.nav-tabs.nav-clients {
        padding-top: 90px;
    }

    .fixed-header-bar .client-table.table-list.action-business-list {
        padding-top: 40px;
    }

    .fixed-header-bar .client-table.table-list.general-list.action-nav-package-sales {
        padding-top: 40px;
    }
    .fixed-header-bar .client-table.table-list.general-list.action-nav-blling-contacts {
        padding-top: 40px;
    }

    .fixed-header-bar .client-table.table-list.client-sales-list.selected {
        padding-top: 82px;
    }

    .fixed-header-bar .client-table.table-list.general-list.selected.new-message-list {
        padding-top: 47px;
    }

    .fixed-header-bar .client-table.table-list.action-nav-my-products {
        margin-top: 40px;
    }

    .fixed-header-bar .ClientAppointmentsBox .client-table.table-list.general-list.padding-top-0.client-message-nav.selected{
        padding-top: 83px; 
    }

    .fixed-header-bar .ClientAppointmentsBox .client-table.table-list.general-list.padding-top-0.client-message-nav{
        padding-top: 40px;
    }

    .fixed-header-bar .client-table.table-list.general-list.action-nav-invoices {
        padding-top: 40px;
    }

    .fixed-header-bar .client-table.table-list.client-list-nav{
        padding-top: 84px;
    }

    .fixed-header-bar .client-table.table-list.action-nav-sales-expense {
        padding-top: 40px;
    }

    .fixed-header-bar .option-wrap.blue-bg.action-nav-my-sales-expense {
        position: fixed;
        width: 100%;
        z-index: 3;
        margin-top: 40px;
    }
    
    .fixed-header-bar .client-table.table-list.action-nav-sales-expense.selected {
        margin-top: 43px;
    }
    .fixed-header-bar .client-table.table-list.general-list.action-nav-pending-appointments {
        padding-top: 40px;
    }

    .fixed-header-bar .client-table.table-list.general-list.action-nav-waitlist {
        padding-top: 40px;
    }

    .fixed-header-bar .option-wrap.blue-bg.action-bar-waitlist-appointment {
        margin-top: 40px;
        position: fixed;
        width: 100%;
        z-index: 3;
        min-height: 46px;
        line-height: 32px;
        max-height: 100%;
    }

    .fixed-header-bar .client-table.table-list.general-list.action-nav-waitlist.selected {
        padding-top: 84px;
    }

    .fixed-header-bar .blue-bg.action-nav-add-waitlist.overflow-hidden {
        position: fixed;
        width: 100%;
        z-index: 3;
        padding-top: 50px;
    }
    .fixed-header-bar .add-waitlist-filter#filter-container{
        margin-top: 46px;
    }

    .fixed-header-bar .add-waitlist {
        padding-top: 63px;
    }

    .fixed-header-bar .action-my-business {
        margin-top: 60px;
    }

    .fixed-header-bar .client-table.table-list.action-product-settings {
        padding-top: 89px;
    }

    .fixed-header-bar .add-product-settings {
        padding-top: 35px;
    }

    .fixed-header-bar .blue-bg.action-nav-new-message.ui-droppable {
        margin-top: 46px;
        position: fixed;
        width: 100%;
        z-index: 3;
    }
    .fixed-header-bar .container.add-waitlist-container {
        padding-top: 36px;
    }
    .fixed-header-bar .sub-childnav.blue-action-nav-contacts {
        position: fixed;
        z-index: 3;
        width: 100%;
    }
    .fixed-header-bar .option-wrap.blue-bg.action-nav-contacts {
        position: fixed;
        width: 100%;
        z-index: 3;
        margin-top: 40px;
    }
    .fixed-header-bar .client-table.table-list.general-list.action-nav-blling-contacts.selected {
        padding-top: 84px;
    }
    .fixed-header-bar .option-wrap.blue-bg.action-nav-client-message {
        position: fixed;
        z-index: 3;
        width: 100%;
        margin-top: 32px;
    }
    .fixed-header-bar .option-wrap.blue-bg.action-nav-product-list.ui-droppable {
        position: fixed;
        width: 100%;
        margin-top: 40px;
        z-index: 3;
    }
    .fixed-header-bar .blue-bg.overflow-hidden.action-nav-teammember-edit.ui-droppable {
        position: fixed;
        margin-top: 46px;
        width: 100%;
        z-index: 889;
    }
    .fixed-header-bar .sub-nav.hideIt.action-nav-reports-menu {
        position: fixed;
        width: 100%;
        z-index: 999;
    }
    .fixed-header-bar h2.lightgreen.reportTitle.action-nav-reports-tile {
        margin-top: 100px;
    }

    .fixed-header-bar .col-md-12.action-nav-finance-report {
        margin-top: 92px;
    }
    .fixed-header-bar .appointment-row.action-nav-client-report {
        margin-top: 102px;
    }
    .fixed-header-bar .appointment-row.action-nav-teammember-report {
        margin-top: 100px;
    }
    .fixed-header-bar .col-md-12.action-nav-calender-report {
        margin-top: 88px;
    }
    .fixed-header-bar .sub-childnav.action-nav-teammember-details {
        position: fixed;
        width: 100%;
        z-index: 3;
        padding-top: 4px;
    }
    .fixed-header-bar .client-table.table-list.general-list.action-nav-team-members {
        padding-top: 40px;
    }
    .fixed-header-bar .client-table.table-list.action-appointment.action-nav-appointment-reports {
        margin-top: 40px;
    }
    .fixed-header-bar .main.client-list.action-nav-finance-payment {
        padding-top: 79px;
    }
    .fixed-header-bar .main.client-list.action-nav-finance-debtors {
        padding-top: 78px;
    }
    .fixed-header-bar .main.client-list.action-nav-profit-and-lose {
        padding-top: 82px;
    }
    .fixed-header-bar .tooltip-content.toltip-top-page.action-nav-forms-management {
        margin-top: 55px;
    }
    .fixed-header-bar .client-table.table-list.form-table.action-nav-setup-forms {
        padding-top: 44px;
    }
    .fixed-header-bar .client-table.table-list.form-table.action-nav-setup-forms.blueBgOpen {
        padding-top: 0px;
    }
    .fixed-header-bar .client-table.table-list.form-table.action-nav-clients-forms {
        padding-top: 0px;
    }
    .fixed-header-bar .blue-bg.action-nav-import-clients {
        padding-top: 52px;
        position: fixed;
        z-index: 3;
    }
    .fixed-header-bar .blue-bg.action-nav-client-upload-files {
        padding-top: 51px;
        position: fixed;
        z-index: 3;
    }
    .fixed-header-bar .blue-bg.action-nav-import-products {
        position: fixed;
        z-index: 3;
    }
    .fixed-header-bar .main.client.actionBar.productImport {
        padding-top: 0px;
    }
    .fixed-header-bar .container.action-menu-client-import-table {
        padding-top: 87px;
    }
    .fixed-header-bar #associateClientsModal .mobile-popup {
        padding-top: 50px;
    }
    .fixed-header-bar .blue-bg.modal-blue-bg.selected-action-nav {
        margin-top: 0px;
    }
    .fixed-header-bar .edit-xero.action-nav-no-margin {
        z-index: 889;
    }
}

@media (max-width: 1213px) {
    .sub-nav li a {
        padding: 7px 5px;
        font-size: 14px;
    }
}

@media (max-width: 1200px) {
    .view-merge-fields .popover-wrap.right .custom-popover {
        left: initial !important;
        right: 0px !important;
        top: 60px !important;
    }
    .view-merge-fields .popover-wrap.right .custom-popover:before {
        left: initial !important;
        right: 9px !important;
    top: -20px !important;
    transform: rotate(0deg);
    }
    .category-switch-btn .btn-equal {
        display: flex;
        flex-direction: row;
    }
    .category-switch-btn .btn-equal .btn {
        min-height: 34px;
        width: 100%;
        margin-bottom: 1rem;
    }
    .domain-uploader-wrap .right-allow {
        padding-left: 15px;
    }
    .category-switch-btn a.validateCategory.col-form-label {
        position: absolute;
        right: 15px;
        font-size: 10px;
        color: #a9a7a7;
        top: -30px;
    }
    .product-setting-boxes .online_booking_text .box-tooltip-s {
        margin-top: 5px;
        position: absolute;
        top: 32px;
        right: 0;
    }
    .product-setting-boxes .expenses_category-tooltip .box-tooltip-s{
        position: absolute;
        right: 15px;
        top: -30px;
        left: inherit;
    }
    .product-setting-boxes .box-tooltip-s {
        margin-top: 5px;
        position: absolute;
        left: -30px;
        top: -30px;
    }
    .learn-left {
        position: relative;
    }
    .learn-left .learnLink {
        position: absolute;
        right: 0px;
        width: 100%;
        left: inherit;
        text-align: right;
    }
}

@media (max-width: 1170px) {
    .time-bar {
        padding-right: 15px;
    }
    #calendar.dayviewCal {
        margin-top: 0px;
        margin-left: 0;
    }

    .calendarLocationsList {
        display: none;
    }

    .invoiceFilterWrap {
        width: 237px;
    }
    
    /** custom location popup vertical align center**/
    .modal#customLocation {
        text-align: center;
        padding: 0 !important;
    }

    .modal#customLocation:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px;
    }

    .modal#customLocation .modal-dialog {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
    }

    /** custom location popup vertical align center**/

    /** confirm email popup vertical align center**/
    .modal#confirmEmail {
        text-align: center;
        padding: 0!important;
    }

    .modal#confirmEmail:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px;
    }

    .modal#confirmEmail .modal-dialog {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
    }
    /** confirm email popup vertical align center**/

    /** event popup vertical align center**/
    .modal#eventPopup {
        text-align: center;
        padding: 0!important;
    }

    .modal#eventPopup:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px;
    }

    .modal#eventPopup .modal-dialog {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
    }
    .modal#eventPopup .modal-dialog.appointmentEditCalender {
        height: inherit;
    }

    /** event popup vertical align center**/

    /** cancellationReasons popup vertical align center**/

    .modal#cancellationReasons {
        text-align: center;
        padding: 0!important;
    }

    .modal#cancellationReasons:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px;
    }

    .modal#cancellationReasons .modal-dialog {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
    }

    .cancellationReasonsPopup {
        width: 100%;
    }
    /** cancellationReasons popup vertical align center**/

    /** client relation popup vertical align center**/
    .modal#clientRelationViewModel {
        text-align: center;
        padding: 0!important;
    }

    .modal#clientRelationViewModel:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px;
    }

    .modal#clientRelationViewModel .modal-dialog {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
    }

    .clientRelationPopup {
        width: 100%;
    }
    /** client relation popup vertical align center**/


    .container > .row {
        min-width: 100% !important;
    }

    .hideIt {
        display: none !important;
    }

    header.hideIt {
        display: none;
    }

    #header {
        z-index: 9999;
        overflow: visible !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .sidebar-nav {
        position: fixed !important;
        left: 0;
        top: 0;
        z-index: 9999999;
        height: 100vh;
        width: 250px;
        background: #fff;
        padding-top: 0;
        overflow-y: scroll;
        transform: translateX(0);
        transition: all 0.3s ease;
        box-shadow: 5px 0 20px 0 rgba(128, 165, 255, 0.25);
    }

    .sidebar-nav ul#menu li a i {
        float: left;
        font-size: 17px;
        /*margin: 5px -5px 0 0;*/
        margin: 0px;
        height: 20px;
        width: 54px;
        text-align: center;
    }

    .sidebar-nav .custom-icon-clients {
        margin-top: -10px !important;
    }

    .sidebar-nav .fa-comments {
        /* margin-top: -10px !important; */
    }

    .sidebar-nav ul#menu li a span {
        /*height: 24px; */
        height: initial;
    }

    .sidebar-nav ul#menu li.intercomMessaging {
        padding: 0;
    }

    .sidebar-nav ul#menu li .logout i {
        /*font-size: 23px;*/
        font-size: 17px;
    }

    .sidebar-nav.closeNav {
        transform: translateX(-300px);
        transition: all 0.3s ease;
    }

    .sidebar-nav ul#menu li {
        line-height: 30px;
        list-style: none;
        font-weight: 700;
        width: 100%
    }

    .sidebar-nav ul#menu {
        padding-bottom: 30px;
        display: inline-table;
    }

    .sidebar-nav ul#menu li a {
        display: block;
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
    }

    .sidebar-nav ul#menu li a .ion {
        position: absolute;
        top: 38%;
        right: 30px;
    }

    .menuTrigger {
        height: 40px;
        font-size: 32px;
        margin-top: 10px;
        color: #18c0ab;
        width: 100% !important;
        max-width: 40px;
        transition: all 0.3s ease;
    }

    .closeTrigger {
        margin: 0px;
        display: block;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 9;
        padding: 10px;
    }

    .closeTrigger i {
        font-size: 42px;
        height: 45px;
        width: 45px;
        text-align: center;
        display: block;
        line-height: 45px;
        color: #28bdab;
    }

    .dropdown-submenu {
        display: none;
    }

    .dropdown-submenu > ul {
        padding: 0 30px;
        display: inline-block;
        background: #cadae7;
        width: 100%;
    }

    .dropdown-submenu > ul a {
        color: #0b0b0b !important;
    }

    nav ul#menu li.active a.submenu-link {
        background: #44d7c5;
        color: #fff;
    }

    .fixed-div {
        display: none;
    }

    .subnav-wrapper .btn-wrap {
        display: flex;
    }

    .snapshot-wrap .snap-list {
        display: block;
    }

    .snapshot-wrap .snap-list .item {
        width: 48%;
        margin-bottom: 30px;
        min-height: 380px;
    }

    .snapshot-wrap .snap-list .item.col2 {
        width: calc(100% - 20px);
    }

    .sub-childnav {
        overflow: visible;
    }

    .calendar-nav li.last-item {
        display: none;
    }

    .main-menu .main-title h3 {
        font-size: 22px;
        text-transform: capitalize;
        font-weight: 700;
        padding-left: 90px;
        padding-top: 10px;
    }

    .calendar-title {
        position: relative;
    }

    .calendar-title .cal-on {
        position: absolute;
        left: 20px;
        top: calc(50% - 10px);
        height: 30px;
    }

    .calendar-title .cal-on .fal {
        font-size: 24px;
        position: relative;
    }

    .calendar-title .fal {
        font-size: 44px;
        position: absolute;
        color: #fff;
        top: calc(50% - 22px);
    }

    .calendar-title .fa-angle-left {
        left: 30%;
    }

    .calendar-title .fa-angle-right {
        right: 30%;
    }

    .mobileNav .main-menu {
        display: flex;
        align-items: center;
    }

    .mobileNav .main-menu .main-title {
        text-align: center;
        width: 100%;
    }

    .fixed-subnav .sub-nav .row .col-md-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .fixed-subnav .sub-nav .row .col-md-6:first-child {
        display: none;
    }

    .fixed-subnav .sub-nav .btn-wrap {
        padding: 15px 0 5px;
        margin: 0;
        width: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .fixed-subnav .sub-nav .btn-wrap .btn {
        margin-left: 0;
    }

    #sub-chlidnav select {
        border: none;
    }

    #sub-chlidnav .dropdown-wrap {
        display: inline-block;
        float: right;
        width: 100%;
        text-align: center;
    }

    #sub-chlidnav .user-menu-dropdown .select2-container {
        width: 100% !important;
    }

    #sub-chlidnav .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 15px;
        min-width: inherit;
    }
    .cstm-drop {
        display: flex;
    }

    #sub-chlidnav .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-width: 0 6px 6px 6px;
    }

    .monthViewCal #calendar, .userView #calendar, .weekViewCal {
        margin-top: 175px !important;
    }

    #calendar .icContent .icViewMonth table th {
        padding: 5px 0px 15px 14px;
    }

    #filter-container .select2-container {
        margin: 0 4px;
    }

    #filter-container.business-page .container > .row {
        width: 100%;
    }

    #filter-container.business-page .container > .row .col-md-12 {
        display: flex;
    }

    #filter-container .container > .row .col-md-12 .float-right {
        float: left !important;
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
    }

    #clientSearchForm #filter-container .container > .row .col-md-12 .float-right {
        margin-top: 5px;
    }

    #filter-container .container > .row .col-md-12 .float-right .dropdown-wrap {
        width: 50%;
        min-width: initial;
        margin-bottom: 5px;
    }

    .sub-childnav.business-subnav .filter-wrap {
        display: block;
        margin-top: 1px;
    }

    #filter-container .container > .row .col-md-12 > div {
        width: 100%;
    }

    .sub-nav .btn-wrap .btn {
        border: 1px solid #6e6e6e;
        margin-left: 0;
    }

    .sub-nav .btn-wrap .fancybox {
        border: 1px solid #fb6362 !important;
    }

    .onlineBookingSetting .container > .row {
        width: auto !important;
    }

    .fancybox-wrap.fancybox-opened {
        z-index: 9999999999;
        width: 100% !important;
        margin: 0;
        margin-top: 0px;
        margin-left: 0px;
        margin-top: 0px;
        margin-left: 0px;
        margin-left: 0;
        left: 0 !important;
        right: 0 !important;
        height: 100vh !important;
        margin-top: -20px !important;
    }

    .fancybox-type-iframe .fancybox-inner {
        width: 100% !important;
    }

    .modal-dialog.modal-lg {
        max-width: 100%;
    }

    .fancybox-type-iframe .modal-body .modal-box .modal-innerbox .select-wrap {
        width: 100% !important;
    }

    .Appointment-list .item {
        width: 300px;
        margin-top: 20px;
    }

    #addAppointmentForm .custom-toggle .btn {
        height: 25px;
        line-height: normal;
        padding: 4px 3px;
    }

    .booking-confirmation .modal-header .modal-title span.fa-close,
    .modal-header.white-bg .close {
        color: #DEE3E9;
        position: absolute;
        right: 20px;
        font-size: 25px;
        top: 4px !important;
        line-height: 26px;
        background: transparent;
    }

    .modal-header.white-bg .close.close-payment {
        color: #1d4e76;
        cursor: pointer;
    }

    .mobInvoice i {
        margin-right: 3px;
    }

    .modal-header.white-bg .close-payment {
        top: 10px !important;
    }

    .subnav-wrapper {
        display: none;
    }

    .message-wrap {
        display: block;
    }

    .mobileNav .logout {
        display: none;
    }

    #datepickerMobile {
        display: none;
    }

    .char-style {
        position: relative;
        right: 5px;
    }

    .appointment-card-icon {
        margin-top: 4px;
    }

    .teamMemberProducts {
        margin-right: 24px;
    }

    /** confirm online booking url popup vertical align center**/
    .modal#onlineBookingUrlViewModal {
        text-align: center;
        padding: 0!important;
    }

    .modal#onlineBookingUrlViewModal:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px;
    }

    .modal#onlineBookingUrlViewModal .modal-dialog {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
    }
    /** confirm online booking url popup vertical align center**/

    .makePrimaryCreditCard {
        white-space: normal;
    }

    .busines-status-mobile .select2-container--default .select2-selection__rendered{
        width:100% !important;
        font-size: 15px !important;
    }
    .busines-status-mobile .select2-container--default {
       margin-top:5px;
    }

}

@media (max-width: 992px) {
    .main.client.ClientDetailsBox.actionBar .clientContact .tile-edit-mode {
        margin-bottom: 0px; 
    }
    .clientContact .tile-edit-mode {
        margin-top: 0px;
    }
    .sub-childnav .btn-wrap {
        padding-top: 5px;
    }
    .sub-childnav .filter-wrap.invoiceFilterWrap {
        max-height: 40px;
        min-height: 40px;
    }
    .account-outer-box {
        padding: 30px 0px;
    }
    .close-feedback {
        width: 100%;
        margin: auto;
    }
    .return-texts .close-field-full {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        column-gap: 1.5rem;
    }
    .client-detail-boxes {
        flex-direction: column;
    }
    .client-dtls .clientMessageSettings .btn {
        color: #292b2c;
        background-color: #fff;
        border-color: #ccc;
    }
    .got-height {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: inherit;
        flex-direction: row;
        padding-bottom: 10px;
    }
    .text-center-data .loader {
        justify-content: center;
        left: 38px;
    }
    .got-text {
        margin-top: 0px;
        display: flex;
        justify-content: flex-end;
        padding-bottom: 0;
    }
    .help-link {
        padding-top: 0;
    }
    .checklist-item {
        width: calc(100% - 20px) !important;
    }
    .checklist-cal-image {
        padding-left: 0px;
        margin: auto;
        width: 100%;
        text-align: center;
    }
    .main.dashboard .container > .row .col-md-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .main.dashboard .container > .row .col-md-7 .float-right {
        float: none !important;
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
    }

    .sub-childnav .filter-wrap {
        float: right;
        display: flex;
        width: 100%;
        justify-content: flex-end;
    }

    .sub-childnav .filter-wrap .search-wrap {
        padding:4px 0;
    }

    .sub-childnav .filter-wrap > div {
        float: left;
        width: 100%;

    }

    .subnav-wrapper.message-wrap .container > .row > .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .subnav-wrapper.message-wrap .container > .row > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .subnav-wrapper.message-wrap .container > .row > .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .subnav-wrapper .btn-wrap {
        display: flex;
        width: 100%;
        width: auto;
        padding: 5px 0;
        margin: 0;
    }

    .main.client.ClientDetailsBox .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .sub-childnav .filter-wrap .filter {
        position: relative;
        z-index: inherit;
    }


    .main.setting .container > .row > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .main.billing .container > .row > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #filter-container .row {
        width: 100%;
    }

    #filter-container .container > .row .col-md-12 > div {
        width: 100%;
    }

    #slider {
        position: relative;
        overflow: hidden;
        margin: 0 auto;
        width: 100% !important;
    }

    #slider ul {
        position: relative;
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center !important;
    }

    #slider ul li {
        position: relative;
        display: block;
        float: left;
        margin: 0;
        padding: 0;
        width: 100%;
        text-align: center;
        background: transparent !important;
    }

    a.control_prev, a.control_next {
        position: absolute;
        top: 40%;
        z-index: 999;
        display: block;
        padding: 4% 3%;
        width: auto;
        height: auto;
        background: #2a2a2a;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        font-size: 18px;
        opacity: 0.8;
        cursor: pointer;
    }

    a.control_prev:hover, a.control_next:hover {
        opacity: 1;
        -webkit-transition: all 0.2s ease;
    }

    a.control_prev {
        border-radius: 0 2px 2px 0;
    }

    a.control_next {
        right: 0;
        border-radius: 2px 0 0 2px;
    }

    .slider_option {
        position: relative;
        margin: 10px auto;
        width: 160px;
        font-size: 18px;
    }

    .userHeader {
        z-index: 9;
    }

    .user-popup {
        margin: 0 auto;
    }

    .Appointment-list .name h2 {
        width: 100%;
        display: inline-block;
        margin: 0;
        text-align: left;
        font-size: 16px;
        font-weight: 700;
    }

    .Appointment-list .lightgreen-box .name h2 {
        width: 70%;
    }

    .Appointment-list .name h3 {
        text-align: left;
        font-size: 15px;
        margin: 0;
        font-weight: 600;
    }

    .health-inputs {
        min-width: 100%;
    }

    .appointment-row .appointment-card {
        width: 31.3%;
        margin-right: 2%;
        margin-bottom: 2%;
    }

    .apptooltipss .apptooltiptext {
        width: 90%;
        left: 5%;
    }

    .apptooltiptext:after, .apptooltiptext:before {
        left: 50%;
    }

    .sub-childnav .btn-wrap {
        display: table;
    }

    .contact .details-wrap .sub-childnav {
        background-color: #44d7c5;
    }

    .contact .details-wrap .sub-childnav .search-wrap {
        width: 300px;
        float: left;
        position: absolute;
        left: 0;
    }

    #bodyChartModal{
        margin-top: 70px;
    }
    .bodychart-library-container p {
        width: 100%;
    }

    .tui-image-editor-controls {
        display: inline-block !important;
        height: auto !important;
    }
    .tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls ul {
        width: 100%;
    }

    .tui-image-editor-container.top .tui-image-editor-controls-buttons {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    .pendingAppointmentPage .invoiceFilterWrapSearch {
        width: 90% !important;
    }

    .pendingAppointmentPage {
        display: block !important;
    }

    .pendingBookingsTitle {
        color: #000;
        line-height: 20px;
    }

    .teamMemberProducts {
        margin-right: 15px;
    }
    .category-switch-btn a.validateCategory.col-form-label {
        position: absolute;
        top: -25px;
        right: 15px;
        left: inherit;
        margin-right: 30px;
    }

    .widget-body {
        margin-top: 91px;
    }

}

/*ipad potrait view*/

@media (min-width: 992px) {
    .re-calender .sub-nav .btn-wrap .btn {
        border: none;
        color: #235074;
        font-weight: 600;
        font-size: 14px;
    }
    .re-calender .sub-nav .btn-wrap .btn i {
        margin-right: 4px;
        font-weight: 600;
    }
    .sub-childnav ul {
        display: flex;
        align-items: center;
    }
    .table-list table.product-location-setting-table tr:first-child td {
        border-top: none !important;
        border-bottom: none !important;
    }

    .table-list table.newProductRow tr:first-child td {
        border-top: none !important;
        border-bottom: none !important;
    }
    .show-lg {
        display: block;
    }

    .show-sm {
        display: none;
    }

    .expenses-table tbody tr:nth-child(2n-1) {
        display: none;
    }

    .responsive-table tbody tr:nth-child(2n-1) {
        display: none;
    }
    .responsive-table.squareDeviceTable tbody tr:nth-child(2n-1) {
        display: table-row;
    }

    .responsive-table.billingHistoryTable tbody tr:nth-child(2n-1) {
        display: table-row;
    }

    .responsive-table tbody .even-class {
        background: #fff;
    }

    .table-striped.show-lg {
        display: table;
    }
    .reportWrap ul.cstm-drop{
        padding-top: 0 !important;
        line-height: 20px;
    }
    .reportWrap .subnav-container#filter-container{
        background: transparent;
    }

}

@media (min-width: 992px) {
    .completeBillingHistoryTable {
        padding: 2px;
    }
    .mobile-show-desktop-hide {
        display: none;
    }

    .sub-childnav {
        min-height: 40px;
        max-height: 100%;
        background-image: linear-gradient(to bottom, #47d7c5 0%, #38c5b3 100%);
        padding: 5px 0;
        line-height: 13px;
    }

    .re-calender .sub-childnav {
        display: flex;
        align-items: center;
    }


    .subnav-container#filter-container {
        background: #38c5b3;
    }

    .sub-childnav .select2-container--default .select2-selection--single {
        background-color: transparent;
        border: none;
    }

    .sub-childnav .client-dtls
    {
        padding: 0px 0 !important;
    }

    .sub-childnav .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #292929;
        line-height: 28px;
        font-size: 16px;
        font-weight: 400;
        /* min-width: 135px; */
        padding: 0px 30px 0px 0px;
    }

    .sub-childnav .clientFormsWrap .select2-selection span{
        color: white !important;
    }

    .sub-childnav ul.cstm-drop {
        float: left;
        margin-right: 0px;
        padding-top: 0px;
    }
    
    .sub-childnav .select2-container--default .select2-selection--single:focus {
        outline: none;
    }

    .sub-childnav .cstm-drop .select-wrap {
        float: left;
    }

    .sub-nav .btn-wrap .btn {
        border: none;
    }

    .subnav-wrapper #dropdownMenuLink {
        background: transparent;
        border: 1px solid #fff;
    }

    .sub-childnav .filter-wrap .filter a {
        color: #fff;
        font-weight: 600;
    }
    .sub-childnav .filter-wrap .filter a.active, .sub-childnav .filter-wrap .filter a:hover {
        background-color: transparent;
    }
    .sub-childnav .filter-wrap .filter a:hover {    
        color: #2d2929;
    }
    .inactive-wrap, .filter-alpha {
        margin-left: 0;
    }

    .filter-alpha li:first-child a {
        padding: 0 12px;
    }

    .filter-alpha li a {
        padding: 0 5px;
    }

    .inactive-wrap li a {
        padding: 0 2px;
    }

    .search-wrap {
        width: 250px;
    }
    .payment .search-wrap {
        width: 160px;
    }
    .debtors-search-wrap {
        width: 260px !important;
    }
    #filter-container {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .daterange-wrap {
        margin-bottom: 0;
        font-weight: 400;
        display: flex;
        align-items: center;
        line-height: 24px;
    }

    .table-list .table tr td h2 {
        display: flex;
        align-items: center;
    }

    .listAssignPopup .table-list .table tr td h2 {
        padding-left: 10px;
    }
    
    .table-list .table tr td h2 i {
        font-size: 14px;
        color: #a9a7a7;
        padding-left: 6px;
    }

    .labeled {
        display: inline-block !important;
        font-size: 13px;
        text-transform: uppercase;
        color: #fff;
        padding: 0px 10px;
        border-radius: 3px;
    }

    .client-table h5 {
        margin: 0;
        font-size: 15px;
        color: #6C6C6C;
        font-weight: 600;
    }

    .labeled.green {
        background: #47D7C5;
    }

    .labeled.yellow {
        background: #F2D654;
    }

    .labeled.grey {
        background: #ccefff;
    }

    .tags i {
        font-size: 18px;
        padding: 0 4px;
        color: #a9a7a7;
    }

    .table-list {
        padding-top: 0;
    }

    .table-list table tr:first-child td {
        border-top: 0 !important;
    }

    .table-list .table {
        border-top: 0;
    }
    .tags span{
        display: flex !important;
    }
    .main.client-list{
        border: none;
    }

}

@media (max-width: 991px) {
    .re-calender #calendar .icViewWeek .scrollTable {
        padding-top: 26px ;
    }
    .re-calender .icViewWeekDay {
        font-size: 10px ;
    }    
    .re-calender .allLocationDropdown {
        width: auto;
    }
    .re-calender .calendar-switch {
        max-width: max-content;
    }
    .view-dropdown .calender-view, .re-calender .sub-childnav li a {
        font-size: 12px;
    }
    #calendar .icViewWeek table th div {
        padding: 5px 0 5px 0px !important;
    }
    .re-calender .fixed-subnav {
        top: 50px;
    }
    .re-calender .fixed-subnav .sub-nav .btn-wrap {
        padding: 15px 0 5px;
    }
    .re-calender .calendar-subnav .sub-childnav ul {
        grid-template-columns: repeat(3, minmax(70px, 1fr) );
    }
    .re-calender .menu-filter a {
        line-height: 11px;
    }
    .re-calender .calendar-switch .menu-filter .maximize-icon {
        font-size: 12px;
        padding: 3px;
        color: #235074;
        line-height: 14px;
    }
    .re-calender #cal-prev i, .re-calender #cal-next i {
        font-size: 20px;
        margin-left: 0px;
    }
    .re-calender .menu-filter {
        display: block;
    }
    .re-calender #cal-next, .re-calender #cal-prev {
        width: 20px;
        height: 20px;
        margin: 5px;
    }
    .re-calender .cal-current-date {
        margin-left: 0px;
        font-size: 14px;
    }
    .re-calender  .calendar-subnav .container {
        flex-wrap: nowrap;
    }
    .helpBtn {
        text-align: center; 
        position: inherit;   
    }
    .close-account-wrapper .return-texts .close-field-full {
        column-gap: 2.5rem;
    }
    .onlineBookingProducts {
        width: 100%;
        justify-content: flex-end;
        padding-right: 0px;
    }
    .invoice-div {
        width: auto;
    }

    .active-collection-btn {
        justify-content: flex-start;
        margin-top: 15px;
    }

    .mobile-hide-desktop-show {
        display: none !important;
    }

    .export.dropdown i.fal::before {
        top: 5px;
    }
    .export.export-form.dropdown i.fal::before {
        top: 8px;
    }

    .sub-childnav .filter-wrap .filter a {
        display: inline-block;
        float: right;
    }

    .show-lg {
        display: none;
    }

    .show-sm {
        display: block;
    }

    .expenses-table tbody tr:nth-child(2n-1) {
        display: block;
    }

    .expenses-table tbody .even-class {
        background: #fff;
    }

    .expenses-table tbody .even-class {
        display: none;
    }

    .responsive-table tbody tr:nth-child(2n-1) {
        display: inherit;
    }
    .responsive-table.popupWaitlistTable tbody tr:nth-child(2n-1) {
        display: none;
    }
    .responsive-table.squareDeviceTable tbody tr:nth-child(2n-1) {
        display: table-row;
    }
    .responsive-table.popupWaitlistTable tbody tr td a i {
        color: #a9a7a7;
    }
    .responsive-table.billingHistoryTable tbody tr:nth-child(2n-1) {
        display: table-row;
    }

    .responsive-table.salesTable tbody tr:nth-child(2n-1) {
        display: table-row;
    }

    .responsive-table.sent-msg-table tbody tr:nth-child(2n-1) {
        display: table-row;
    }

    .responsive-table tbody .even-class {
        background: #fff;
    }

    .responsive-table tbody .even-class {
        display: none;
    }
    .responsive-table.popupWaitlistTable tbody .even-class, .responsive-table.popupWaitlistTable tbody tr:nth-child(4n) {
        display: inherit;
    }

    .responsive-table tbody tr:nth-child(4n) {
        display: none;
    }

    .sub-childnav > .container > .row > div.col-md-7 {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .sub-childnav > .container > .row > div.col-md-5 {
        flex: 0 0 60%;
        max-width: 60%;
    }

    .subnav-container.title h2 {
        font-size: 18px;
    }

    .fixed-pagination .row .col-md-12 {
        display: flex;
    }

    .fixed-pagination .row .col-md-12 nav {
        width: 50%;
    }

    .fixed-pagination .row .col-md-12 .per-page {
        display: flex;
        width: 50%;
    }

    .per-page .select2-container,
    .per-page .select-wrap select {
        width: 150px !important;
        min-width: inherit;
    }

    h3.lightgreen {
        padding-bottom: 20px;
    }

    .hidden-text-sm {
        display: none;
    }

    .booking-confirmation .tabs a {
        text-transform: capitalize;
    }

    .booking-confirmation .flex-btnwrap .btn {
        padding: 7px 5px;
        width: auto;
    }

    .booking-confirmation .onlineBookingButtons .btn {
        padding: 7px 5px;
        width: auto;
    }

    .booking-widget-wrap {
        width: 100%;
    }

    .booking-widget-wrap .inner-wrapper {
        width: 100%;
    }

    .select-btn-wrap.sharp-btn .btn {
        margin-bottom: 10px;
    }

    .booking-steps .row > div[class*="col-"] {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .booking-steps .is-aligned-flex {
        display: block;
    }

    .booking-steps .is-aligned-flex h6 {
        font-size: 16px;
        margin: 10px 0;
    }

    .booking-widget-wrap .booking-detail {
        width: 100%;
        margin-top: 30px;
    }

    .finish {
        width: 100%;
        min-height: 100%;
    }

    .widget-head,
    .booking-widget-foot {
        width: 100%;
        position: static;
        height: auto;
    }

    .booking-widget-wrap {
        min-height: 100%;
    }

    .booking-steps .is-aligned-flex.consultant-info {
        display: flex;
    }

    .widget-body .inner-wrapper {
        min-height: 100%;
    }

    .consultant-info .client-noimg {
        float: none;
    }

    .booking-widget-wrap .inner-wrapper {
        margin: 0;

    }

    .booking-widget-wrap {
        padding: 0;
    }

    .biz-info {
        width: 200px;
    }

    .char-style {
        position: relative;
        right: 5px;
    }

    .subnav-container .inactive-wrap ul {
        float: left !important;
    }
    .sub-nav .btn-wrap .btn.addBusiness{
        border: 1px solid #fb6362;
    }

    .emailConfirmPopup, #creditPopup {
        margin-top: 100px;
    }

    .onlineBookingManage {
        border: 1px solid #6e6e6e;
        margin-bottom: 6px;
    }
    .formIndividualField .formFieldData {
        min-width: 75%;
        margin-right: 10px;
    }
    .formIndividualField .select2-container {
        margin-right: 5px;
    }
    .formFieldData .labelField, .formFieldData .placeholderField, .formFieldData .optionField, .formFieldData .htmlField, .formFieldData .submitField, .formFieldData .dividerField, .formFieldData .activeField {
        width: 141px;
    }
    .formIndividualField .select2-container {
        margin-right: 5px;
        width: 120px !important;
    }
    .add-product-settings .active-collection-btn {
        justify-content: flex-end;
        margin-top: 15px;
    }
    .add-product-settings .product_details-wrapper {
        display: block;
    }
    .add-product-settings .status-wrap .status {
        margin-right: -6px;
    }
    .pendingFilterWrap .select2-container--default span.select2-selection.select2-selection--single {
        background: transparent;
        border: none;
    }
    .sub-childnav .pendingBookingFilter .select2-container--default .select2-selection--single .select2-selection__rendered, .pendingBookingFilter .select2-selection__arrow {
        color: #000;
    }
    .pendingFilterWrapSearch {
        width: 60% !important;
    }
    .pendingFilterWrap .select2{
        width: 105px !important;
    }
    .pendingBookingFilter .select2{
        min-width: 140px !important;
    }

}
@media  (max-width: 850px) {
    .formFieldData .labelField, .formFieldData .placeholderField, .formFieldData .optionField, .formFieldData .htmlField, .formFieldData .submitField, .formFieldData .dividerField, .formFieldData .activeField {
        width: 120px;
    }
    .formIndividualField .select2-container {
        margin-right: 5px;
        width: 100px !important;
    }
.formType{
    margin-right: 0.3rem;
}

}

@media (max-width: 767px) {
    .user-notes-mobile {
        display: none;
    }
    #sub-chlidnav .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding: 0;
    }
    .re-calender .sub-nav .btn-wrap .btn {
        border: 1px solid #6e6e6e;
    }
    .re-calender .calendarLocationsList {
        display: none;
    }
    .re-calender .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding: 0;
    }
    .re-calender .re-row {
        flex-wrap: nowrap;
    }
    .re-calender .calendar-switch {
        max-width: 100%;
        width: auto;
    }
    .re-calender .fixed-subnav {
        top: 40px;
    }
    .new-search-wrapper .input-group {
        width: 180px;
    }
    .select2-dropdown.reminderHourMinSelect {
        border: none;
        width: 60px !important;
    }
    .addAppointmentBody .select2-container--open .newGenDropDown {
        width: 140px !important;
    }
    .appointmentNewDropDown .select2-container--open .newGenDropDown {
        width: 230px !important;
    }
    .addAppointmentBody .week-check {
        padding-left: 10px;
        margin-left: 10px;
    }
    .addAppointmentBody .search-wrap input[type=text] {
        padding-left: 5px;
        font-size: 13px;
    }
    #listClient .table td, #listClient .table td p, .new-search-wrapper .add-cl-btn, .addAppointmentBody .guidelines-bold {
        font-size: 13px;
    }
    .addAppointmentBody .remainder_tooltip {
        margin-left: 0;
    }
    .customSelect.box-select.appnt-products {
        width: 170px;
    }
    .addAppointmentBody span.select2-dropdown.appointmentSelectDropdown {
        width: 220px !important;
    }
    .appnt-repeat-mobile, .color-box-mobile {
        padding: 0;
    }
    .appnt-repeat-mobile .appnt-repeat {
        margin-right: auto;
        width: 40px;
        justify-content: space-between;
        margin-left: inherit;
        max-width: 100%;
    }
    .addAppointmentBody .re-wrap .btn-equal {
        grid-template-columns: 60px 60px;
    }
    .type-toogle .btn-equal .btn {
        min-width: 60px;
    }
    .addAppointmentBody .re-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-right: 5px;
    }
    span.remainder_tooltip i.fa-info-circle {
        font-size: 14px;
    }
    .color-box {
        width: 25px;
    }
    .addAppointmentBody .re-wrap .custom-toggle .btn {
        font-size: 13px;
    }
    .addAppointmentBody .repeat-checkbox .checkbox span {
        font-size: 13px;
    }
    .addAppointmentBody .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 13px;
    }
    .addAppointmentBody .repeat-checkbox {
        margin: 5px 0px;
    }
    /* ==== */
    .addAppointmentBody .recurring-drop .select2-container {
        margin-right: 0;
    }
    .addAppointmentBody .re-wrap .custom-toggle .btn {
        padding: 4px 4px !important;
    }
    .addAppointmentBody .re-notes-label .notes-box {
        min-height: 195px;
        margin-bottom: 0;
    }

    .addAppointmentBody .re-notes-label .notes-box .text-area textarea {
        min-height: 135px;
        padding: 10px;
    }
    .user-detail.times.nextAppointment {
        background: #d1d1d1;
        max-width: 100%;
    }
    .single-appointment.multiple-next-appoinment   {
        flex-direction: row;
    }
    .user-popup .multi-appts .scroll-div {
        display: inline-block;
    }
    .single-appointment.multi-appts {
        height: calc(100% - 20px);
    }
    .remainder_tooltip {
        margin-left: 0rem;
    }
    .re-wrap .custom-toggle .btn {
        padding: 4px 3px !important;
    }
    .single-appt-multi-clients .appt-icons{
        position: inherit;
    }
    .single-appt-multi-clients {
        max-height: 100% !important;
    }
    form#addAppointmentForm .modal-dialog .modal-body.add-booking {
        padding: 0;
    }
    .flex-btnwrap .btn {
        padding: 0.38rem 0.51rem;
        font-size: 0.8rem;
    }
    .single-appointment {
        flex-direction: column;
    }
    .apppoinment-feature {
        text-align: left;
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
    }
    .clinical-note-send {
        display: flex;
        margin-top: 5px;
    }
    div#appointment-area {
        padding: 10px;
    }
    .type-toogle-padding {
        padding-left: 0;
    }
    .box-card .modal-box {
        padding: 5px 10px;
    }
    .appt_calendar {
        padding-left: 0px !important;
    }
    .login-left-box .list-group {
        padding-top: 10px;
    }
    .login-left-box {
        max-width: 100%;
        width: 100%;
    }
    .signup-testimonial {
        background-color: #f5f5f5;
        padding: 40px 20px;
        margin-top: 40px;
        clip-path: none;
    }
    .testimonial-area {
        padding-top: 0;
    }
    .signup-testimonial P {
        font-size: 18px;
        color: #9a9a9a;
        font-style: italic;
        font-weight: 500;
        line-height: 26px;
    }
    .re-signup #loginbox {
        max-width: 100%;
        margin-top: 40px !important;
    }
    .re-signup #signupForm .select2-container {
        width: 100% !important;
    }
    .close-account-wrapper .account-outer-box {
        padding: 0;
    }
    .close-account-wrapper .return-texts .close-field-full {
        column-gap: normal;
    }
    .close-account-wrapper .close-feedback {
        max-width: 100%;
        margin: auto;
        width: 100%;
    }
    .return-texts .close-field-full {
        column-gap: 1rem;
    }
    .form-group-inner {
        flex-direction: column;
    }
    .popover-wrap .custom-popover::before {
        left: inherit !important;
        right: inherit !important;
        top: -20px !important;
        transform: rotate(0deg);

    }
    .view-merge-fields .popover-wrap .custom-popover {
        transform: translate(0px, 0px);
    }
    .calendarRow .box-tooltip {
        position: initial;
    }
    .export.dropdown.allowPOSSalesButton a.btn, .export.dropdown.posTileButton a.btn{
        margin-bottom: 5px;
    }
    .container.buttonList {
        margin-left: -13px;
    }
    .option-wrap.blue-bg.action-nav-product-list.ui-droppable {
        height: 80px;
    }   
    .main.setting.product-setting-boxes .assignTeamMembers .form-group input.dynamicPrice {
        width: 170px;
    }
    .noCostChekBox {
        width: 139px;
        margin-top: 10px;
        margin-bottom: 7px;
    }
    .noCostTooltip .box-tooltip-s {
        margin-top: 5px;
        position: absolute;
        left: 100px;
        top: 0px;
    }
    .teamMemberListNormal .hiddenLabel {
        width: 40%;
    }
    #load-schedule .fc .scheduleLoader, #load-schedule .fc.slider-open .scheduleLoader {
        width: 100%;
    }
    .slider-open .loaderDiv {
        margin-left: 0;
        justify-content: center;
        align-items: center;
        height: calc(100vh - 160px);
    }
    .monthViewCal {
        margin-left: 0;
    }
    .customFieldName {
        margin-top: 12px;
    }

    .productSelectAllTeam {
        margin-bottom: 8px;
    }

    .flex-nowrap-row {
        flex-wrap: wrap;
    }

    .booking-colorlist .color-list {
        margin-left: 90px;
        left: inherit !important;
    }

    .product-setting-boxes .color-list {
        left: inherit;
    }

    .box-tooltip{
        position: absolute;
        right: 40px;
        top: -25px;
    }
    .box-tooltip-s {
        margin-top: 5px;
        position: absolute;
        right: 0px;
        top: 31px;
    }
    .site-name {
        padding-right: 5px;
    }

    .domain-uploader-row{
        display: flex;
        flex-direction: column;
    }

    .reportTiles{
    width: inherit;
    }

    .time-bar {
        display: none;
    }

    .Subscription-wrap .plan {
        margin-top: 20px;
    }

    .main-menu .main-title h3 {
        padding-left: 0;
        padding-right: 8%;
    }

    .subnav-wrapper.message-wrap .container > .row > .col-md-8 {
        display: none;
    }

    .mobileNav, .quickAdd {
        background: #cadae7 !important;
        border: none;
    }

    .quick .dropdown-menu{
        right: 0px;
        left: inherit;
    }

    .quick .dropdown-menu {
        margin-top: 10px !important;
    }

    .mobile-popup {
        max-height: calc(100vh - 90px) !important;
        overflow-y: auto !important;
    }
    .booking-confirmation .mobile-popup {
        max-height: calc(100vh - 0px) !important;
    }

    .menuTrigger {
        font-size: 32px;
        text-align: center;
        color: #fff;
        background: #18c0ab;
        margin: 0 0 0 -15px;
        line-height: 40px;
    }

    .fixed-subnav {
        top: 40px;
    }

    body {
        padding-top: 40px;

    }

    .subnav-wrapper .sub-nav {
        background: #fff;
    }

    .main.dashboard .container > .row .col-md-7 .float-right .select-dropdown {
        width: 100%;
    }

    .main.dashboard .container > .row .col-md-7 .float-right .select-wrap {
        width: 50%;
        font-size: 13px;
    }

    .main.dashboard .container > .row .col-md-7 .float-right .select-wrap .select2-container {
        width: 100% !important;
    }

    .sub-nav {
        background: #fff;
    }

    .client-dtls.sub-childnav {
        display: block !important;
    }

    .sub-childnav {        
        border-top: 0;
        min-height: 40px;
        /* max-height: 40px; */
        /* padding: 5px 0px; */
    }

    .sub-nav li, .sub-childnav li {
        font-size: 14px;
    }

    .nav-tabs {
        display: block;
    }

    #addAppointmentForm .modal-body {
        padding: 0;
        background: #fff;
        margin-right: 0;
        overflow-x: hidden;
    }

    #addAppointmentForm .modal-body .container-fluid {
        padding: 10px 4px;
    }

    #addAppointmentForm .modal-body .modal-box h4 {
        font-size: 13px;
    }

    #addAppointmentForm .customSelect .select2-container .select2-selection--single {
        height: 30px;
        font-size: 13px;
    }

    #addAppointmentForm #add_clients {
        margin-right: 0px !important;
    }

    #addAppointmentForm .modal-filter .filter-alpha a {
        font-size: 11px;
        padding: 1px;
    }

    #addAppointmentForm .modal-body .modal-box .icon-text {
        line-height: 4px;
        display: flex;
        align-items: center;
        height: 100%;
    }

    .modal-body .modal-box .modal-innerbox.flex2 {
        display: flex;
        padding: 5px 8px 5px 8px;
        height: 100%;
        align-items: center;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        width: 15px;
    }

    #addAppointmentForm .modal-body .modal-box .icon-text .fal {
        font-size: 16px;
        margin-right: 5px;
        float: none;
        width: 100%;
        text-align: left;
        margin-left: -5px;
    }

    #addAppointmentForm .modal-body .modal-box .modal-innerbox .select-wrap {
        width: 100%;
        float: right;
        display: flex;

    }

    #addAppointmentForm .modal-body .modal-box .modal-innerbox .select-wrap .select2-container {
        min-width: 33%;
    }

    /*#addAppointmentForm .modal-body .col-md-6:last-child .modal-box:last-child {*/
    /*margin-bottom: 80px;*/
    /*}*/
    #addAppointmentForm .row {
        align-items: self-start;
    }

    #addAppointmentForm .row .col-md-4 {
        flex: 0 0 30%;
        max-width: 30%;
    }

    #addAppointmentForm .row .col-md-8 {
        flex: 0 0 70%;
        max-width: 70%;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-width: 5px 5px 0 5px;
        margin-left: -8px;
        border-color: #5f5e5e transparent transparent transparent;
    }

    #addAppointmentForm .modal-body .modal-box .text-area textarea {
        height: 30px;
    }

    .sent-msg-table .table td {
        width: 100% !important;
        text-align: left !important;
        border: none !important;
        float: left !important;
        padding: 0 12px !important;
        line-height: 24px !important;
    }

    .sent-msg-table .table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        height: auto;
        position: relative;
        padding: 10px 0 0;
    }

    .sent-msg-table .table .check-msg {
        position: absolute;
        top: calc(50% - 10px);
        right: 0;
    }

    .menuTrigger {
        margin: -6px 0 0 -15px;
    }

    .mobileNav {
        height: 40px;
    }

    table.historyTable.settingMakePay .normal_view.amt-title {
        display: none;

    }

    table.historyTable.settingMakePay .normal_view, .settingMakePay#payment_method .normal_view {
        display: none;

    }

    table.historyTable.settingMakePay .mob_view, .settingMakePay#payment_method .mob_view {
        display: block;

    }

    .setting .box-wrap .row {
        margin-bottom: 10px;
    }

    .existingPayment .second_half {
        text-align: left;
        border-top: 1px solid;
        margin-top: 15px;
        padding-top: 15px;
        width: 86%;
    }

    .existingPayment .first_half {
        text-align: left;
        width: 86%;
    }

    .makePayWrap {
        width: 96%;
    }

    .makePayWrap .setting .box-wrap .row.ex-date {
        flex-direction: row;
    }

    .makePayWrap .panel-body {
        width: 100%;
        margin: 0;
    }

    .makePayWrap .select2-container {
        margin-right: 0;
    }

    .makePayWrap .form-group.row .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .makePayWrap .radio {
        margin-top: 2px;
        position: relative;
        width: 86%;
    }

    .main-menu .main-title h3 {
        font-size: 22px;
        margin-top: -4px;
        line-height: 32px;
    }

    .booking-confirmation .mobile-popup .row > .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .widget-head .row {
        margin: 0;
    }

    .widget-head .row div[class*="col-"] {
        width: 50%;
        padding: 0;
    }

    .widget-head {
        padding: 8px 0;
    }

    .widget-head li {
        font-size: 14px;
    }

    .widget-head .biz-info {
        min-width: inherit;
        float: right;
    }

    .inner-wrapper {
        padding: 0 10px;
    }

    .booking-widget-wrap {
        width: 100%;
        margin-top: -40px;
        padding: 0;
    }

    .booking-widget-wrap .widget-body {
        padding: 0;
    }

    .booking-widget-foot {
        padding: 10px 0;
        border: none;
    }

    .booking-widget-wrap #calendar table tr td:first-child {
        font-size: 12px;
        padding: 0;
        width: auto;
    }

    .trial-body-mob .trial-header-mob {
        display: flex;
        justify-content: space-between;
        height: 74px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999;
        background-color: #3b5572;
        color: #fff;
        align-items: center;
    }

    .trial-body-mob #header.hideLg {
        top: 74px;
    }

    .trial-body-mob.modal-open #header.hideLg {
        top: 0;
    }

    .trial-body-mob .trial-header-mob .header-trial-left {
        display: flex;
        align-items: center;
        height: inherit;
        justify-content: center;
        margin: 0px 0 10px 0;
    }



    .trial-body-mob .free_setup_consult {
        font-size: 12px;
        margin: 0;
        border-radius: 7px;
        padding: 0.28rem 0.5rem;
        line-height: 1.2;
    }

    .trial-body-mob .header-trial-right {
        display: flex;
        align-items: center;
        height: inherit;
        justify-content: center;
    }

    .trial-body-mob .trail-p {
        font-size: 16px;
        margin: 0;
    }

    .trial-body-mob .trial-pay-now {
        font-size: 12px;
        margin: 0px;
        border-radius: 7px;
        padding: 0.28rem 0.5rem;
        line-height: 1.2;
    }

    .trial-body-mob .speak-with-us {
        font-size: 14px;
        line-height: normal;
        margin: 0px;
        padding: 0px 15px;
    }

    .trial-body-mob .speak-with-us span {
        color: #44d7c4;
    }

    body.trial-body-mob {
        padding-top: 115px;
    }

    .card-detail-box .table td{
        line-height: 35px;
    }
    .modal-app .modal-header {
        justify-content: center;
    }
    .appointment-profile {
        display: none;
    }
    .new-appointment-title {
        width: inherit;
    }
    .box-check label {
        margin-top: 0px;
        top: -10px;
    }
    .box-check input {
        display: none;
    }
    .color-default {
        width: 20px;
        height: 20px;
        margin-right: 12px;
    }
    .color-box {
        display: flex;
        width: 35px;
        justify-content: flex-end;
        margin-left: inherit;
        margin-right: auto;
    }    

    .color-box .select2-selection__arrow b {
        right: 33%;
    }
    .color-box {
        justify-content: flex-end;
    }
    .appointment-colorlist {
        width: 50px;
    }
    .mobile-header{
        display: flex;
        flex-direction: column;
        padding: 10px !important;
    }
    .new-appointment-title .modal-title {
        padding: 0px 40px !important;
    }
    .color-list {
        left: -80px;
    }

    #displayDate{
        word-break: normal;
        line-height: normal;
        white-space: nowrap;
        padding-left: 5px;
        font-size: 13px;
    }

    .currency-field input.form-control.text, .stripe-amount {
        width: 65px !important;
        font-size: 16px !important;
        padding-left: 0px !important;
        height: 28px !important;
        padding: 4px 12px 4px;
    }
    .stripe-amount.red-colour {
        width: 60px !important;
    }

    .currency-field input.form-control.text.payment_amount, .stripe-amount {
        padding-top:5px;
    }

    .currency-field .input-group-btn .btn.green {
        padding:3px;
    }

    .currency-field .form-control {
        font-size: 16px !important;
    }

    .modal-app .modal-content .popup-btn-wrapper-new.addAppointmentButtons.cancelExists {
        text-align: center;
    }

    .modal-app .modal-content .popup-btn-wrapper-new.addAppointmentButtons.cancelExists .paySaveBtn {
        float: none !important;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0px;
    }

    .modal-app .modal-content .popup-btn-wrapper-new.addAppointmentButtons.cancelExists .paySaveBtn button {
        margin-right:5px;
    }
    #calendar .new_pill {
        display: none;
    }
    .bodyChartTab,#bodychart-note {
        display: none;
    }

    .pendingBookingsTitle {
        color: #fff;
    }

    .appointmentIcons i {
        margin-left: -1px;
    }

    .deleteButton {
        margin-left: -1px !important;
    }

    .deleteButtonRecurrence {
        margin-left: -4px !important;
    }

    .cancellationButton {
        margin-right: 5px;
    }

    .appointmentSaveButton {
        display: flex;
    }

    .appointmentSaveButton .appointmentIcons {
        margin:10px;
    }

    .ClientDetailsBox .clientDetails {
        margin-bottom: 15px;
    }

    .teamMemberProducts {
        top: 32px;
    }

    .attached-file-type {
        bottom: 16px;
        margin-left: 0px;
    }

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

    .stripe-tag {
        padding: 5px 20px;
    }

    .stripe-by {
        margin-left: 25px;
    }

    .product-setting-boxes .stripe-tag {
        flex-direction: column;
    }
    .product-setting-boxes .stripe-tag a.online-stripe {
        margin-bottom: 10px;
        width: 100%;
        text-align: center;
    }
    .flex-nowrap-row {
        flex-wrap: wrap;
    }
    .manage-category-wrapper .catg-colour {
        position: absolute;
        right: 20px;
    }
    .manage-category-wrapper .category-check {
        margin-left: 0;
    }

    .branding-row .add-top {
        position: absolute;
        top: -10px;
        right: -4px;
        max-width: 100%;
        width: 100%;
    }

    .branding-row .box-tooltip {
        position: absolute;
        right: 55px;
        bottom: 40px;
        top: inherit;
    }

    .branding-row .btn-wrap.location {
        text-align: right;
        width: 100%;
        padding: 0px 10px;
        line-height: normal;
    }

    .onlineBookinglabelTooltip {
        right: 75px !important;
    }

    .payment-step .white-box {
        margin-top: 20px !important;
    }
    
    .modal-app .modal-content .popup-btn-wrapper-new.addAppointmentButtons.appointmentMobile {
        display: flex;
        justify-content: space-between;
        padding: 15px;
        padding-right: 50px;
    }
    #select_reminder_div .checkbox > label {
        position: inherit !important;
        top: 10px;
    }
    #select_reminder_div .reminder-toggle{
        justify-content: inherit !important;
        display: block;
    }
    .reminder-div {
        padding-left: 0;
    }
    .clientBusinessError label {
        padding-left: 105px;
    }
    .calendarRow .color-box {
        width: 75px;
    }
}

@media only screen and (min-width: 641px) and (max-width: 992px) {
    .scrollTable {
        padding-top: 44px;
    }
    .calendar-widget-wrap {
        margin-top: 90px !important;
    }
}
@media (min-width: 641px) {
    
    .waitlistClientRow {
        margin-bottom: -10px;
    }
    #listFutureAppointment tr td strong {
        display: none;
    }

    .calendar-wrapper #sub-chlidnav {
        display: none;
    }

    .signupTooltipClass {
        top: 0px !important;
        left: 330px !important;
        width: 140px;
    }
}

/*iphone 5 and android lanscape and nexus 7 potrait*/
@media (max-width: 640px) {

    .sidebar-nav .retail-pos-header {
        display: none;
    }

    .subnav-container.title .icon-calendar {
        font-size: 44px !important;
    }
    .re-calender .calendar-subnav.subnav-container.title {
        border-top: 1px solid #dcdcdc;
    }
    .scrollTable {
        padding-top: 45px;
    }
    .sub-childnav .select2-container--default .select2-selection--single .select2-selection__arrow:after {
        left: inherit;
        padding-left: 10px;
    }
    .re-calender #cal-prev i, .re-calender #cal-next i {
        font-size: 17px;
        margin-left: 6px;
    }
    .addAppointmentBody form#addAppointmentForm .modal-dialog .modal-body.add-booking {
        padding: 10px 0;
    }
    .re-calender .calendar-subnav .sub-childnav {
        display: none;
    }
    #div_cal_settings {
        float: right;
        padding-left: 13px;
        display: none;
    }
    .add-waitlist-filter .daterange-wrap #reportrange {
        padding-left: 15px;
    }
    .addExp {
        margin-bottom: 0;
    }
    #sub-chlidnav.reportWrap .daterange-wrap {
        margin-bottom: 0;
        padding: 10px 0px;
    }
    .client-list .container {
        padding: 0;
    }
    .assignTeamMemberDiv {
        max-width: 100%;
        flex: 100%;
    }
    .location-setting-form #location_setting .messaging_client_div {
        overflow: auto !important;
    }
    .location-setting-form #location_setting .messaging_client_div .slimScrollBar {
        background: transparent;
    }
    .multi-appts-multi-client .scroll-div, .user-popup .single-appt-multi-clients .scroll-div {
        max-height: 250px !important;
    }
    .multi-appts-multi-client .user-detail.times {
        max-height: 250px !important;
        min-height: 200px !important;
        display: block;
    }
    .addAppointmentBody .re-notes-label .notes-box {
        min-height: 195px;
    }
    .addAppointmentBody .re-notes-label .notes-box .text-area textarea {
        min-height: 135px;
    }
    /*.addAppointmentBody .appnt-div {
        min-height: 100%;
        height: 100vh;
    }*/
    /*.addAppointmentBody form#addAppointmentForm .modal-dialog .modal-body.add-booking {
        max-height: 100%;
    }*/
    .appt-icons {
        position: initial;
        padding: 15px;
    }
    .single-appointment.multiple-next-appoinment {
        flex-direction: column;
    }
    .multiple-next-appoinment .next-apps-arrow {
        position: initial;
    }
    .star1, .star2, .star3, .star4, .star5 {
        width: 30px;
        height: 30px;
    }
    .login-left-box h1 {
        font-size: 32px;
    }
    .login-left-box .list-group-item {
        padding: 0.5rem 0rem;
    }
    .re-signup #loginbox .btn-wrap {
        margin-top: 15px;
    }
    .re-signup #loginbox .btn {
        font-size: 16px;
    }
    .login-left-box .list-group {
        padding-top: 16px;
    }
    .close-account-wrapper .return-texts .close-field-full {
        column-gap: 1rem;
    }
    .close-wrap .row {
        flex-direction: column;
    }
    .client-alert-box .btn {
        white-space: normal;
    }
    .close-account-wrapper .box-wrap ul li {
        max-width: 100%;
        width: 100%;
    }
    .responsive-table.popupWaitlistTable tbody tr:nth-child(2n-1) {
        display: inherit;
    }
    .responsive-table.popupWaitlistTable tbody .even-class, .responsive-table.popupWaitlistTable tbody tr:nth-child(4n) {
        display: none;
    }
    .client-list .table-list .table tr .inv-row {
        width: 40% !important;
    }

    .client-list .report-title-table tbody .last td {
        vertical-align: middle;
    }

    .client-list .report-title-table tbody .last td h2 {
        margin-bottom: 0;
    }

    .table-header {
        float: right;
        padding-right: 20px;
    }

    .dropdown-mobile-invoice li a {
        font-size: 15px !important;
    }

    #show-invoice .blue-bg {
        margin-top: 2.4em !important;
        padding: 7px !important;
    }

    .close-btn-wrap {
        margin-top: -4px;
    }

    .notificationMailTooltip span{
        margin-top: 28px;
        margin-right: -18px;
    }
    .marketingClientName {
        padding-left: 10px;
    }

    .main.setting.product-setting-boxes .assignTeamMembers .form-group input {
        width: initial;
    }

    .noCost {
        justify-content: flex-end;
        padding-right: 10px !important;
    }

    .invoiceSettingLocations .select2 {
        min-width: 160px;
    }

    .listClientsPopup .mobile-popup {
        height: 100% !important;
    }

    .invoiceFilterWrapSearch {
        width: 60% !important;
    }

    .invoiceFilterWrap .select2{
        width: 105px !important;
    }

    #appointmentEditCalender {
        height: 100%;
    }

    #listSubSales .modal-dialog {
        margin-top:50px;
    }

    #appointmentEditCalender .user-content {
        height: calc(100vh - 70px);
        margin: 40px 0px;
    }

    #appointmentEditCalender .user-content .name .client-noimg {
        margin-top: 0px !important;
    }

    #appointmentEditCalender .flex-btnwrap {
        position: inherit;
    }

    .message-wrap .blue-bg .btn-wrap, .onlineBookingSetting .blue-bg .btn-wrap, .settingBox .blue-bg .btn-wrap {
        justify-content: flex-end;
        padding: 0px;
    }

    .snapshot-wrap .snap-list .item {
        width: 45.75%;
        margin-bottom: 30px;
        min-height: 380px;
    }

    .inline-select .select-wrap .select2-container {
        min-width: 29%;
    }

    table.mobile-margin-top {
        margin-top: 35px !important;
    }

    .mobile-margin {
        margin-bottom: 10px;
    }

    .modal-content.custom-payment.mobPayPopup {
        height: calc(100vh - 0px);
    }

    .modal-content {
        border: none !important;
        background-color: #fff;
    }

    .custom-payment .modal-footer {
        display: block;
        padding: 0;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 10vh;
    }

    #filter-container .container > .row .col-md-12 > div {
        width: 100%;
    }

    .nav-tabs {
        display: block;
    }

    #filter-container .container > .row .col-md-12 {
        display: flex;
        flex-wrap: wrap;
    }

    #sub-chlidnav .btn-secondary {
        display: none;
    }

    #filter-container .daterange-wrap .showing-text {
        display: none;
    }

    #filter-container .container {
        padding: 0;
        width: 100%;
    }

    #filter-container .container .row {
        margin: 0;
    }

    #filter-container .container .row .col-md-12 {
        padding: 0;
    }

    #filter-container .daterange-wrap {
        width: 100%;
    }

    .daterange-wrap #reportrange {
        padding: 0px;
        width: 100%;
        font-size: 14px;
    }

    .salesDaterange {
        padding: 0px;
    }

    .salesDaterange .showing-text {
        display: none;
    }

    .sub-nav li a, .sub-childnav li a{
        line-height: 10px;
        padding: 3px 10px;
    }

    .sub-childnav .filter-wrap > div {
        width: 70%;
        margin-left: -10px;
    }

    .subnav-container#filter-container {
        padding-bottom: 0;
        padding-top: 0;
    }

    .sub-childnav.business-subnav .btn-wrap {
        width: 20%;
        position: absolute;
        right: 54px;
        top: 83px;
        z-index: 9;
    }

    .main-menu .main-title h3 {
        font-size: 18px;
        padding-top: 0;
    }

    .ClientDetailsBox h1 {
        font-size: 24px;
        font-weight: 600;
    }

    .ClientDetailsBox .details-wrap .container > .row {
        width: 100%;
        margin: 0;
    }

    .ClientDetailsBox .details-wrap .container {
        padding: 0 8px;
    }

    .ClientDetailsBox .details-wrap h4 {
        min-height: initial;
        margin-top: -25px;
    }

    .subnav-container .contact-detail .btn-wrap {
        float: left;
        width: 100%;
        margin-top: 10px;
    }

    .subnav-container .profile-img, .subnav-container .client-noimg, .user-popup .name .client-noimg {
        margin-top: -80px;
        float: right !important;
    }

    .subnav-container .status {
        line-height: 22px;
        float: right;
        margin-top: 35px;
        margin-right: -90px;
    }

    .subnav-container .appointments {
        margin-top: 15px;
    }

    .subnav-container .appointments .btn {
        float: left;
        margin-bottom: 18px;
        font-size: 13px;
    }

    .sub-childnav #client-details-name {
        display: none;
    }

    .subnav-container.ClientDetailsBox {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding-top: 0;
    }

    .subnav-container .details-wrap {
        padding-bottom: 20px;
        padding-top: 15px;
    }

    .subnav-container .paid-detail {
        width: 100%;
        /*order: -1;*/
    }

    .subnav-container .message-wrap {
        width: 100%;
    }

    .sub-childnav .row {
        width: 100% !important;
    }

    .client-list .details-wrap .fancybox-imgupload,
    #sub-chlidnav.subnav-container .details-wrap .fancybox-imgupload {
        display: none;
    }

    .client-list .filter-wrap .filter,
    #sub-chlidnav.sub-childnav .filter-wrap .filter {
        display: none;
    }

    .client-list > .container,
    #sub-chlidnav.sub-childnav > .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    .client-list ul,
    #sub-chlidnav.sub-childnav ul {
        margin-right: 0;
        width: 100%;
        /*max-height: 40px;
        overflow: hidden;*/
    }

    .client-list .btn-wrap,
    #sub-chlidnav.sub-childnav .btn-wrap {
        order: 2;
        position: absolute;
        right: 0;
        top: 40px;
        right: 5px;
        margin-left: 8px;
        z-index: 9;
    }

    .btn-wrap.business {
        position: initial !important;
        order: initial !important;
        width: 100% !important;
        margin-bottom: 5px;
    }

    .business .addExp, .business .btn {
        float: right;
    }

    .client-list .btn-wrap .btn,
    #sub-chlidnav.sub-childnav .btn-wrap .btn {
        margin-left: 10px;
        font-size: 12px;
        padding: 7px 20px;
    }
    .export.dropdown i.fal::before{
        top: 2px;
        right: 8px;
    }

    .search-wrap {
        padding: 4px 7px;
    }

    .client-list .filter-wrap,
    #sub-chlidnav.sub-childnav .filter-wrap {
        float: right;
        display: flex;
        width: -webkit-fill-available;
        background: #44d7c5;
        margin: 0 -15px;
        justify-content: flex-start;
    }
    .invoiceFilterWrap .select2-container--default span.select2-selection.select2-selection--single {
        background: transparent;
        border: none;
    }

    .client-list .filter-wrap > div,
    #sub-chlidnav.sub-childnav .filter-wrap > div {
        width: 60%;
        margin-left: 0px !important;
    }

    .client-list .filter-wrap > div input,
    #sub-chlidnav.sub-childnav .filter-wrap > div input {
        padding-left: 5px;
        font-size: 12px;
    }

    .client-list .btn-secondary:not(.invoice-export) {
        display: none;
    }

    .client-list .invoice-export {
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .client-list .invoice-send {
        width: 115px;
    }

    .dashboard .search-wrap {
        float: left;
        padding: 0;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-top: 0;
        order: -1;
    }

    .table .opt {
        display: none;
    }

    .hide-xs {
        display: none !important;
    }

    .table h5 {
        margin-bottom: 0;
    }

    .main.client-list .client-table .table .click-action {
        display: flex;
        align-items: center;
        width: 60px !important;
        display: inline-flex;
        height: 69px;
        line-height: initial;
        border: 0;
    }

    .table-list .table tr:last-child {
        border-bottom: 1px solid #cecece;
    }

    .main.client-list .client-table .table .client-pic-td {
        width: 90px !important;
    }

    .table-list .table .icon {
        position: relative;
        order: -1;
        min-height: 18px;
        padding-left: 30px;
    }

    .table-list .table .icon i {
        top: 0px;
        font-size: 20px;
    }

    .table .client-noimg, .table .profile-img {
        height: 40px;
        width: 40px;
    }

    .table tr td:first-child {
        width: 100%;
    }

    #stripe-payment-div .table tr td:first-child {
        width: auto;
    }

    .invoice-table td:nth-child(1), .expenses-table td:nth-child(1) {
        width: 50% !important;
    }

    .fixed-pagination {
        padding: 0;
    }

    .fixed-pagination .row .col-md-12 .per-page {
        display: none;
    }

    .fixed-pagination .row .col-md-12 nav {
        padding-left: 10px;
        width: 100%;
    }

    .subnav-wrapper.message-wrap .container > .row > .col-md-4 {
        display: none;
    }

    .main.client-list {
        border: 0;
    }

    .main-menu .main-title h3 {
        margin-bottom: 0;
    }

    .main.contact .sub-childnav .btn-wrap .btn {
        height: 32px;
        padding: 8px 8px;
    }

    .option-wrap {
        height: 44px;
    }

    .client-select-nav {
        height: fit-content !important;
    }
    
    .option-wrap .btn-wrap {
        position: static;
    }

    div.bootstrap-datetimepicker-widget.dropdown-menu {
        margin-top: 0;
        z-index: 9999;
        left: 0 !important;
        right: auto !important;
    }

    .popover-wrap .custom-popover {
        max-height: 100vh;
        width: 360px;
        right: auto !important;
        left: 0 !important;
    }

    .hide-xs {
        display: none;
    }

    .client-table.table-list #deleteCheckedForm {
        margin: 0;
    }

    .table-list.client-table {
        margin: 0;
        padding: 0;
    }

    .table-list.client-table tr {
        background: #fff;
    }

    .client-list .sub-childnav .container {
        padding: 0 14px;
    }

    .client-list .container > .row {
        min-width: 100% !important;
        padding: 0;
        width: 100%;
        margin: 0;
    }

    .client-list .table-list .table {
        border: 0;
        margin-bottom: 35px;
    }

    .client-list .container > .row div[class*="col-"] {
        width: 100%;
        padding: 0;
    }

    .client-list .circle, .client-list .border-circle {
        width: 40px;
        height: 40px;
        border: 0;
    }

    .client-list .table-list tr td h2 {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }

    .client-list .sales-list tr td h3.lightgreen {
        margin-bottom: 10px !important;
        line-height: 20px;
        font-size: 18px;
        font-weight: 600;
        width: 120px;
    }

    .client-list .table-list .table tr td {
        text-align: left !important;
        width: 100% !important;
        border: 0;
        border-bottom: 1px solid #cecece;
    }

    .client-list .table-list .table tr td h3.lightgreen {
        width: 95px;
    }

    .client-list .table-list .table tr td .lightblue {
        background: #02b4ef;
        border: 0;
        color: #fff;
    }

    .client-list .table-list .table tr td .btn {
        padding: 5px 8px;
        font-size: 13px;
    }

    .client-list .table-list .table tr td .info {
        display: flex;
    }

    .client-list .table-list .table tr td .info span.lightgreen {
        font-weight: 700;
    }

    .client-list .table-list .table tr td .info span {
        font-size: 12px;
        padding-right: 3px;
        font-weight: 500;
    }

    .client-list .table-list .table tr td h5 {
        font-size: 11px;
        font-weight: 600;
    }

    .client-list.contact .table-list .table tr:first-child td {
        border-top: 1px solid transparent;
    }

    .main.contact .sub-childnav .btn-wrap {
        padding-top: 5px;
    }

    .main.contact .sub-childnav .btn-wrap .btn {
        height: 28px;
        padding: 5px 8px;
    }

    .modal-body .modal-box {
        position: relative;
    }

    .customSelect.col-half {
        margin-top: 0;
    }

    #listClient {
        max-height: initial !important;
    }

    .modal-body .modal-box .modal-innerbox .select-wrap .select2-container {
        min-width: 25%;
        margin-right: 0;
    }

    .iframe-body .modal-content .popup-btn-wrapper {
        z-index: 99999;
        background: #fff;
        bottom: 35px !important;
        position: absolute;
        width: 100%;
        display: flex;
        justify-items: stretch;
        flex-direction: column-reverse;
    }

    .iframe-body .modal-content .popup-btn-wrapper.appointment-edit .float-right {
        display: flex;
        justify-content: space-evenly;
    }

    .iframe-body .modal-content .popup-btn-wrapper.appointment-edit .float-right a {
        width: 100%;
    }

    .modal-body .col-md-6:last-child .modal-box:last-child {
        padding-bottom: 160px;
    }

    .modal-body {
        padding: 20px 0 10px 0;
    }


    .popup-btn-wrapper .float-right .btn {
        margin-left: 4px;
        font-size: 13px;
    }

    .dropdown-wrapper {
        width: 100%;
    }

    .dropdown-wrapper .ae-select {
        padding: 10px 0;
        position: relative;
        border: none;
        height: auto;
        font-size: 17px;
        font-weight: 600;
    }

    .dropdown-wrapper .ae-select.chosen {
        color: #333;
    }

    .dropdown-wrapper .ae-select .down-icon, .ae-select .up-icon {
        position: absolute;
        right: 8px;
        top: 7px;
    }

    .ae-dropdown .cstm-drop {
        max-height: initial !important;
    }

    .ae-dropdown i {
        color: #44d7c5;
        font-size: 22px;
        padding-left: 8px;
    }

    .dropdown-wrapper .ae-dropdown .cstm-drop {
        background: #fff;
        box-shadow: none;
        border-radius: 0px;
        border: none;
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.12);
    }

    .cstm-drop {
        display: none;
        position: absolute;
        z-index: 19;
    }

    .dropdown-wrapper .ae-dropdown .ae-select, .dropdown-wrapper .ae-dropdown .cstm-drop > li:not(.icon-goback) {
        cursor: pointer;
        display: flex !important;
    }

    .dropdown-wrapper .ae-disabled {
        pointer-events: none;
    }

    .cstm-drop.ae-hide {
        display: block !important;
    }

    ul.cstm-drop {
        list-style-type: none;
    }

    ul.cstm-drop {
        margin: 0px;
        padding: 5px;
        border: 1px solid #ccc;
    }

    ul.cstm-drop li {
        padding: 5px 0px;
    }

    .Appointment-list .lightgreen-box .scroll-div {
        height: 142px;
    }

    .calendar-title .fal {
        font-size: 30px;
        top: calc(50% - 15px);
    }

    .calendar-title .fa-angle-left {
        left: 15%;
    }

    .calendar-title .fa-angle-right {
        right: 15%;
    }

    .calendar-title h2 {
        font-size: 16px;
        font-weight: 700;
    }

    .calendar-title .cal-on .fal {
        font-size: 20px;
    }

    .fancybox-outer {
        height: 100vh !important;
        overflow: hidden;
    }

    .fancybox-type-iframe .fancybox-inner {
        height: 100vh !important;
    }

    .fancybox-wrap {
        margin-top: -35px !important;
    }

    .sub-childnav.no-navpills .dropdown-wrapper {
        display: none;
    }

    .sub-childnav.no-navpills .btn-wrap {
        top: 0px !important;
    }

    .hide-usermenu {
        display: none !important;
    }

    .minimumMargin {
        margin-top: 83px !important;
    }

    .dayviewCal.minimumMargin {
        margin-top: 0px !important;
    }

    .dayviewCal #usercal-head {
        margin-top: 0px !important;
    }

    .calendar-widget-wrap {
        margin-top: 130px !important;
    }
    .re-calender #calendar table:not(.day-userview) {
        margin-top: 0px;
        /* margin-top: 35px; */
    }
    #calendar .icViewDay table th div {
        margin: auto !important;
    }
    .calendar-widget-wrap.cal-role {
        margin-top: 52px !important;
    }
    .expire-header {
        padding-top: 0 !important;
        width: 100%;
        display: block;
    }

    .expire-header .btn {
        float: right;
    }

    .modal-dialog .modal-header {
        padding: 0;
    }

    .modal-dialog .modal-header .modal-title {
        text-align: center;
        width: 100%;
        color: #000;
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 0;
        padding: 4px 0;
    }

    .sub-childnav > .container > .row > div {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        margin-left: 0px;
        margin-left: 15px;
    }

    .user-popup .user-content {
        height: 100vh;
    }

    .user-popup .user-content .profile-img {
        width: 60px;
        height: 60px;
    }

    .user-popup .user-content .name {
        padding-bottom: 5px;
        margin-bottom: 5px;

    }

    .modal-dialog.popup-initial-wrap.modal-dialog {
        height: 100vh;

    }

    .flex-btnwrap {
        position: fixed;
        bottom: 0;
        background: #fff;
        width: 100%;
    }
    .onlineBookingButtons {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px 0px;
        text-align: center;
    }
    #loginbox {
        max-width: 85%;
    }
    .login-wrap form {
        height: 100%;
    }

    #loginbox .btn-wrap {
        margin-top: 30px;
    }

    #loginbox .input-group, #signupForm .select-inner {
        margin-bottom: 26px !important;
    }

    #loginbox #login-form {
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .login-content {
        min-height: 270px;
        width: 100%;
    }

    #loginbox h1 {
        font-size: 25px;
        line-height: 30px;
        margin: 0 0 15px;
    }

    #loginbox p {
        margin-top: 15px;
    }

    .calendar-title .fa-angle-left {
        left: 25%;
    }

    .calendar-title .fa-angle-right {
        right: 25%;
    }

    .setting .box-wrap h6 {
        margin: 0;
    }

    .setting .btn-wrap {
        margin: 5px 0;
    }

    .login-bg {
        padding: 0;
    }

    .login-wrap {
        position: relative;
    }

    .login-bg {
        background: #fff;
    }

    .calendar-title .cal-on {
        left: 0;
    }

    .calendar-title .icon-calendar {
        font-size: 50px !important;
        top: -13px !important;
    }

    .subnav-container .paid-detail h4 .hide-text {
        display: none;
    }

    /* .ClientDetailsBox .fancybox-imgupload{
        display: none;
    } */
    .ClientDetailsBox #deleteClient {
        background: #537190 !important;
    }

    .ClientDetailsBox .contact-detail {
        width: 70%;
    }

    .subnav-container .contact-detail .btn-wrap {
        margin-top: 10px;
        display: flex;
        justify-content: flex-start;
    }

    .subnav-container .contact-detail .btn-wrap .btn {
        margin: 0 2px !important;
        padding: 5px 12px;
        font-size: 13px;
    }

    #eventPopup .user-popup .user-content .profile-img {
        height: 60px;
        width: 60px;
    }

    .subnav-container .profile-img, .subnav-container .client-noimg {
        height: 80px;
        width: 80px;
        margin-top: -70px !important;
    }

    .subnav-container .status {
        line-height: 22px;
        float: right;
        margin-top: 10px !important;
        margin-right: -90px;
        width: 100%;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .subnav-container .status > span {
        text-align: right;
        margin-top: 0px;

    }

    .subnav-container .status .switch {
        margin-top: 15px;
    }

    #listFutureAppointment tr th {
        display: none;
    }

    #listFutureAppointment tr {
        border-bottom: 1px solid #94e2d9;
    }

    #listFutureAppointment tr td {
        padding: 8px 0 !important;
        font-weight: 500;
    }

    #listFutureAppointment tr td:first-child {
        width: 50% !important;
    }

    #listFutureAppointment tr td strong {
        display: block;
        color: #fff9;
        font-weight: 700;
    }

    .appointments .table {
        clear: both;
        border: none;
        padding-bottom: 20px;

    }

    #listFutureAppointment tr .team-memb-name {
        display: none;
    }

    .client.ClientDetailsBox #form1 button:hover,
    .client.ClientDetailsBox #form1 button:focus,
    .client.ClientDetailsBox #form1 button {
        background: #22db7c;
        color: #fff;
        border: #72eadb;
    }

    .client.ClientDetailsBox #form1 button.grey:hover,
    .client.ClientDetailsBox #form1 button.grey:focus,
    .client.ClientDetailsBox #form1 button.grey {
        background: #cecece;
    }

    #myBtformHostedField button#back {
        margin-bottom: 15px;
    }

    .credit-card-page #doublescroll .table th, .table td {
        padding: 0.2rem !important;
    }

    .table td.p-2 {
        padding: 0.5rem !important;
    }

    .business-loc .form-wrap .form-group > .col-3 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }

    .snapshot-wrap .snap-list .item.col2 .col-left {
        width: 100%;
    }

    .snapshot-wrap .snap-list .item.col2 .col-right {
        width: 100%;
    }

    .highcharts-container {
        width: 100%;
    }

    .business-form label {
        width: 100%;
    }

    .form-wrap .col-form-label {
        text-align: left;
        line-height: 18px;
    }

    #enterprise {
        margin-top: 15px;
        display: block;
    }

    .popup-payment .modal-body .table-striped tbody tr td {
        border: 0;
    }

    .popup-payment .modal-dialog .modal-header {
        border: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9;
    }

    .popup-payment.outstandingPopup .modal-dialog .modal-header {
        position: inherit;
    }

    .popup-payment .modal-dialog .modal-header .modal-title {
        padding: 10px 0;
        background: #cadae7;
    }

    .popup-payment .modal-body .table-striped tbody tr {
        background: #fff !important;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #cecece;
    }

    .popup-payment .modal-body {
        max-height: 100% !important;
        overflow-y: auto !important;
        height: 100vh !important;
        overflow-y: scroll !important;
        padding: 0 !important;
        padding-top: 44px !important;
        margin-bottom: 41px;
        width: 100% !important;
    }

    .popup-payment .modal-body h2 {
        margin: 0;
        color: #44d7c5;
        font-weight: 700;
        font-size: 20px;
    }

    .popup-payment .modal-body .container-fluid {
        padding: 0;
        width: 100%;
    }

    .custom-payment .modal-header {
        border: 0 !important;
    }

    .clickableTr.package-sales-table td.padd-left span {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        width: 120px;
        justify-content: flex-end;
    }

    .clickableTr.package-sales-table td.padd-left span input {
        margin-left: 5px;
    }

    .clickableTr.package-sales-table td.padd-left span .btn {
        margin-top: 8px;
    }

    .clickableTr.package-sales-table td.brd-rgt.padd-left span {
        display: block;
    }

    .subscription-popup .btn-wrap .btn {
        margin: 10px 0 !important;
    }

    .expire-header {
        padding-left: 18px;
    }

    #clientSearchForm #filter-container .container > .row .col-md-12 .float-right.grey-border {
        margin: 0;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    .main.setting .form-group input {
        width: 100%;
    }

    .main.setting .form-group .col-8.dropdown-wrap {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
    }

    .main.setting .form-group .col-8.dropdown-wrap .select-wrap {
        width: 50%;
    }

    .main.setting .box-content .select2.select2-container {
        width: 100% !important;
    }

    .welcome-msg-sub [class*='col-'] {
        flex: 0 0 1005;
        max-width: 100%;
    }

    .auto-reminder .form-group [class*='col-'] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .auto-reminder .form-group .col-3 .select-wrap {
        margin-bottom: 5px;
    }

    .location-setting-form.business-loc .form-wrap .form-group > .col-3 {
        flex: 0 0 25%;
        max-width: 25%;
        font-size: 12px;
        font-weight: 500;
    }

    .sub-childnav > .container > .row > div {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .calendar-nav li {
        display: none;
    }

    .main-wrapper .calendar-widget-wrap .sidebar-filter {
        display: none;
    }

    .calendar-subnav .user-desktop-dropdown {
        display: none;
    }

    .subnav-container.title h2 {
        width: 100%;
        display: block;
    }

    .sub-childnav > .container > .row > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    #datepickerMobile {
        display: block;
    }

    .menuTrigger {
        margin: 0px 0 0 -15px;
    }

    .sub-childnav .filter-wrap.cliens-search-wrap {
        justify-content: flex-start;
    }
    .filter-wrap.products-search-wrap{
        justify-content: flex-start;
    }

    .waitlistAppointmentLabel{
        word-break: break-word;
    }

    .booking-confirmation .modal-header .modal-title {
        position: fixed;
        top: 0;
        z-index: 999;
         background: #fff;
        border-bottom: 1px solid #ddd;
        height: 45px;
        line-height: 35px;
        left: 0;
        right: 0;
        text-align: center;
    }
    .booking-confirmation .modal-header
    {
        border-bottom: none;
        width: 100%;
        display: inline-block;
    }

    .booking-confirmation .modal-body {
        padding: 50px 0 0px;
    }

    .booking-confirmation .onlineBookingButtons {
        background: #fff;
        padding: 10px;
        border-top: 1px solid #ccc;
        margin-bottom: 78px;
        text-align: center;
    }

    .booking-confirmation .flex-btnwrap {
        position: fixed;
        background: #fff;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px;
        z-index: 99999;
        border-top: 1px solid #ccc;
    }

    .booking-confirmation .select-wrapper .row .col-md-6 {
        width: 50%;
    }

    .booking-confirmation .check-link {
        display: flex;
    }

    .booking-confirmation .tab-section table tr td .fa-link {
        margin-right: 20px;
    }

    .booking-confirmation .tab-section .tabs a {
        padding: 10px 12px;
    }

    .booking-confirmation .modal-body {
        background: #fff;
    }

    .booking-confirmation .booking-details .date {
        font-size: 18px;
    }

    .booking-confirmation .user-info {
        margin: 5px 0;
    }

    h3.lightgreen {
        padding-bottom: 0px;
    }

    .appointment-row .appointment-card {
        width: 48%;
        margin-right: 2%;
        margin-bottom: 2%;
        max-height: 225px;
        min-height: 195px;
        height: 100%;
    }

    .app-section .card-title {
        font-size: 18px;
    }

    .title-wrap {
        min-height: 46px;
    }

    .apptooltipss .apptooltiptext {
        width: 100%;
        left: 0;
    }

    .app-section .card-title {
        font-size: 18px;
        margin: 0;
    }

    p.sub-title {
        font-size: 13px;
    }

    .mobile-popup {
        max-height: calc(100vh - 0px) !important;
        overflow-y: auto !important;
    }

    .iframe-body .modal-content .appointment-edit {
        height: auto !important;
        position: initial;
        margin-bottom: 60px;
    }

    .appointment-edit .float-right .btn {
        width: 100% !important;
    }

    .subscription-popup {
        height: 100vh;
        overflow-y: auto;
    }

    .credit-card-page .editCard{
        margin-top: 10px;
    }
    .responsiveSubscriptionPopup .popup-btn-wrapper {
        position: initial !important;
    }

    .responsiveSubscriptionPopup .popup-btn-wrapper .float-right .btn {
        width: 100%;
    }
    .btn-wrap.emailConfirmResponsive {
        position: initial;
        padding: 0px 10px !important;
    }

    .emailConfirmPopup, #creditPopup, #onlineBookingUrlViewModal {
        margin-top: 40px;
    }

    .modal-app .modal-body .col-md-6:last-child .modal-box:last-child {
        padding-bottom: 0px;
    }
    .booking-widget-wrap .flex-btnwraps {
        margin-top: 50px;
        width: 100%;
        display: flex;
    }

    .popup-payment .message-wrap {
        margin-top: 46px;
    }
    .popup-payment.outstandingPopup .message-wrap {
        margin-top: 0px;
    }
    .mobPayPopup .unpaid-sales {
        padding: 0px;
        margin-bottom: 0;
    }
    .mobPayPopup .modal-footer {
        position: inherit;
    }

    .mobPayPopup .modal-footer .action-tabs {
        margin-bottom: 50px;
    }

    .mob--edit--invoice {
        width: 100%;
        margin-bottom: 15px;
        text-align: center;
    }
    .mob--edit--invoice .btn{
        margin-bottom: 5px;
    }
    .addAppointmentBody form#addAppointmentForm .modal-dialog .modal-body.add-booking {
        max-height: 435px;
    }
    .modal-app .modal-content .popup-btn-wrapper-new.addAppointmentButtons.cancelExists .paySaveBtn {
        display: block;
    }
    .modal-app .modal-content .popup-btn-wrapper-new.addAppointmentButtons.cancelExists .paySaveBtn .btn {
        margin-bottom: 5px;
    }
    .mob-btnwrap {
        flex-direction: column-reverse;

    }
    .mob-btnwrap .mob--close {
        display: flex;
        width: 100%;
    }

    #eventPopup .user-popup {
        max-width: 100%;
        width: 100%;
    }

    .addAppointmentButtons .btn {
        padding: 0.38rem 00.5rem;
    }
    .addAppointmentBody .re-wrap .btn {
        padding: 0.375rem 0.4rem !important;
        font-size: 0.85rem;
    }

    .client-notes-link {
        height: 26px;
    }
    .appointmentEditCalender .mob-btnwrap {
        flex-direction: row;
        align-items: center;
    }
    .appointmentEditCalender .mob-btnwrap .mob--close {
        display: flex;
        width: auto;
    }
    .appointmentEditCalender .mob--edit--invoice {
        width: auto;
        margin-bottom: 0;
    }
    .appointmentEditCalender.user-popup {
        background-color: transparent;
    }
    
    .apppoinment-feature .btn {
        margin-bottom: 0;
        margin-right: 0px;
    }
    .appointmentEditCalender .Appointment-list .times {
        border-radius: 0px !important;
    }

    .teamMemebersList {
        top: 2px !important;
    }
    .region-save-popup .modal-title {
        line-height: normal;
        font-size: 22px;
    }
    .region-save-popup .modal-content {
        padding: 10px 10px;
    }
    .modal-dialog.modal-note {
        max-width: 480px;
    }

    .phoneNumberTooltip i{
        margin-top: -16px;
        left: 20px;
        position: relative !important;
    }

    .phoneNumber .signupTooltipClass {
        top: 0px !important;
        margin-top: -6px;
    }

    .signupTooltipClass {
        top: 40px !important;
        right: -25px !important;
        left: inherit !important;
    }

    .signupTooltipClass .tooltip-arrow {
        top: -5px !important;
        right: 8px;
        margin-top: 0px !important;
        border-style: solid;
        border-width: 0 5px 5px 5px !important;
        border-color: transparent transparent #537190 transparent !important;
        left: initial !important;
    }

    .signupTooltipClass .tooltip-inner {
        text-align: left;
    }

    .signupTooltipClass .tooltip-arrow {
        top: -5px !important;
        right: 8px;
        margin-top: 0px !important;
        border-style: solid;
        border-width: 0 5px 5px 5px !important;
        border-color: transparent transparent #537190 transparent !important;
        left: initial !important;
    }

}

@media (max-width: 575px) {
    .calendar-title .fa-angle-left {
        left: 25%;
    }

    .calendar-title .fa-angle-right {
        right: 25%;
    }
    .booking-widget-wrap .flex-btnwraps {
        margin-top: 50px;
        width: 100%;
        display: flex;
    }
    .submitContainer {
        flex-direction: column;
        align-items: flex-start !important;
    }
    button.btn.submitField {
        margin-right: 0px;
        width: 100%;
        margin-bottom: 15px;
    }
    .submitContainer p {
        color: #c3c3c3 !important;
        padding-left: 0;
    }
    button.btn.btn-primary.toggleBtn {
        background-color: #cadae7;
        width: 140px;
        margin-right: 5px;
    }
    .form-group-toggle {
        display: flex;
    }
    .client-intake-form {
        padding: 25px 0px;
    }
    header .form-heading p {
        padding-bottom: 10px;
    }
    header .form-heading h1 {
        margin-bottom: 10px;
    }

    .report-setting-modal .user-name {
        width: 100%;
    }

    .report-user-info {
        display: flex;
        flex-direction: column;
        align-items: self-start;
    }

    .report-setting-modal .additional-email {
        padding-left: 0;
        margin-left: 0px;
    }

    .report-div-sub {
        margin-bottom: 10px !important;
    }
}

@media (max-width: 510px) {
    .fancybox-wrap.fancybox-opened {
        width: 100% !important;
        position: fixed !important;
        top: 20px !important;
        bottom: 0 !important;
        overflow: hidden !important;

    }

    .calendar-nav li.last-item a, .calendar-nav li.last-item a {
        width: 160px;
    }

    .calendar-nav li.last-item {
        left: 15px;
    }

    .iframe-body .modal-content .popup-btn-wrapper {
        padding: 8px !important;
        /*display: flex;*/
        justify-content: space-between;
    }

    .iframe-body .modal-content .popup-btn-wrapper {
        height: 70px;
        padding-top: 18px !important;
    }

    #addAppointmentForm .popup-btn-wrapper {
        display: block;
    }

    #addAppointmentForm .popup-btn-wrapper .btn.white {
        float: right;
        margin-left: 5px;
    }

    #addAppointmentForm .popup-btn-wrapper .btn.white.cancelAppointment{
        float: none !important;
    }

    .subnav-container .paid-detail h4 {
        display: flex;
        align-items: center;
        font-size: 13px;
        font-weight: 700;
        line-height: 40px;
        justify-content: center;
    }

    .subnav-container .paid-detail h4 .fal {
        font-size: 18px;
        margin-left: 5px;
    }

    .subnav-container .paid-detail .paid, .subnav-container .paid-detail .unpaid {
        padding: 0 5px;
        width: 50%;
    }

    .subnav-container .paid-detail h4 span.amount {
        font-size: 18px;
        margin-left: 8px;
    }

    .subnav-container .appointments h3 {
        font-size: 18px;
        font-weight: 600;
    }

    .iframe-body .modal-content .popup-btn-wrapper.appointment-edit .float-right {
        width: 100%;
        display: inline;
    }

    .iframe-body .modal-content .popup-btn-wrapper.appointment-edit .float-right a {
        width: 100%;
        margin-bottom: 15px;
        margin-top: 0px;

    }

    .modal-content .modal-body .calender-edit-inner-popup {
        /* height: 100vh !important; */
    }

    .iframe-body .modal-content .popup-btn-wrapper {
        height: 125px;
    }
}

/*iphone Xs landscape(optional)*/
@media only screen
and (min-device-width: 375px)
and (min-device-height: 812px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
    .modal-content .modal-body .calender-edit-inner-popup {
        /*height: 1242px !important;*/
    }

    .iframe-body .modal-content .popup-btn-wrapper {
        height: 200px;
    }
}

/*iphone 4 landscape(optional)*/
@media (max-width: 480px) {
    .calendar-widget-wrap {
        margin-top: 125px !important;
    }
    .sub-childnav .select2-container--default .select2-selection--single .select2-selection__arrow:after {
        left: inherit;
        padding-left: 10px;
    }
    .re-calender .fixed-subnav .sub-nav .btn-wrap {
        padding: 15px 0 5px;
    }
    .ClientDetailsBox .clientDetailsTitle  {
        width: 100%;
    }
    .intial-appoinment {
        width: 175px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .calendar-nav li.last-item a, .calendar-nav li.last-item a {
        padding: 0;
        width: 180px;
    }
    .templateContent .btn {
        width: 100%;
    }
    .inline-select .select-wrap .select2-container {
        min-width: 28% !important;
    }

    .sub-childnav #menuItems ul li {
        width: 100%;
        max-width: 100%;
    }

    .fixed-subnav .sub-nav .btn-wrap .btn {
        padding: 0.38rem 7px;
        font-size: 11px;
        margin: 0 3px;
    }

    .fixed-subnav .sub-nav .btn-wrap {
        justify-content: space-between;
        padding: 15px 0 5px;
    }

    .sub-nav li a:hover, .sub-childnav li a:hover,
    .sub-nav li.active > a, .sub-childnav li.active > a,
    .sub-nav li.active a, .sub-childnav li.active a:hover {
        background: transparent !important;
        color: #18c0ab;
    }

    .calendar-nav li.last-item {
        top: 6px;
    }

    .calendar-nav li.last-item a, .calendar-nav li.last-item a {
        width: 200px;
    }

    .calendar-nav li .fa-angle-left {
        padding-right: 15px;
    }

    .calendar-nav li .fa-angle-right {
        padding-left: 15px;
    }

    .client-list .filter-wrap > div,
    #sub-chlidnav.sub-childnav .filter-wrap > div {
        padding-right: 5px;
        margin-left: 10px;
    }

    .daterangepicker.dropdown-menu {
        width: 70%;
    }

    .daterangepicker .ranges {
        width: 100% !important;
        padding: 15px;
    }

    .snapshot-wrap .snap-list .item {
        width: 100%;
        margin: 4px 0;
    }

    .snapshot-wrap .snap-list .item {
        width: 100%;
        margin: 4px 0 !important;
        min-height: initial;
    }

    .snapshot-wrap .snap-list .item.col2 {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .snapshot-wrap .snap-list .item .col-left,
    .snapshot-wrap .snap-list .item .col-right {
        padding: 12px;
    }

    .snapshot-wrap .snap-list .item .col-right {
        border-top: 8px solid #cadae7;
    }

    .main.dashboard .container > .row .col-md-7 .float-right .select-dropdown {
        display: flex;
        margin-right: 0;
    }

    .calendar-nav li.last-item a, .calendar-nav li.last-item a {
        width: 150px;
    }

    .subnav-container .status {
        margin-right: 0px;
    }

    .dashboard .search-wrap {
        width: 100%;
    }

    .calendar-title .fa-angle-left {
        left: 13%;
    }

    .calendar-title .fa-angle-right {
        right: 13%;
    }

    .subnav-container .status .switch {
        margin-top: 0;
    }

    #listFutureAppointment tr td {
        font-size: 13px;
    }

    .select-btn-wrap .btn {
        height: 30px;
        line-height: 30px;
        margin-right: 2px;
        /* width: 49.2%; */
        margin-bottom: 7px;
        padding: 0 5px;
        font-size: 13px;

    }

    .select-btn-wrap .btn:nth-child(2n) {
        margin-right: 0;
    }

    .select-btn-wrap.sharp-btn .btn {
        margin-bottom: 10px;
        font-size: 15px;
        width: 49.5%;
    }

    .booking-widget-wrap #calendar table tr td {
        height: 36px;
    }

    .count-label-title {
        font-size: 16px;
    }

    .booking-widget-wrap #widget-wrap .next-prev-btn {
        margin-left: 12px;
    }

    .biz-info {
        width: 180px;
    }

    .appointment-row .appointment-card {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 2%;
        max-height: 225px;
        min-height: 195px;
        height: 100%;
    }

    .appointment-row .appointment-card {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 2%;
        max-height: 225px;
        min-height: 195px;
        height: 100%;
    }

    .contact .details-wrap .sub-childnav .search-wrap {
        width: 210px;

    }
    #addAppointmentForm .popup-btn-wrapper .paySaveBtn{
        margin-right: 20px;
    }
    .appointment-colorlist {
        justify-content: flex-start;
    }
    .booking-widget-wrap .flex-btnwraps {
        flex-direction: column;
    }
    .flex-btnwraps .btn.white {
        width: 100%;
    }
    .booking-widget-wrap .flex-btnwraps button {
        width: 100%;
        margin-top: 15px;
    }
    .domain-uploader-wrap .up-file-s {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .domain-uploader-wrap .right-allow {
        padding-left: 0;
        padding-top: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .teamMembersActive .active a{
        background: transparent !important;
        color: #18c0ab;
    }

    .add-template-btn {
        margin-left: 19px;
    }

    .paid-status-pill {
        margin-top: 18px;
        margin-right: 14px;
    }
    .reorder-product-btn {
        margin-left: 0;
        margin-right: 10px;
    }
    .client-dtls .clientMessageSettings {
        display: contents;
    }
    .working-hours-wrapper {padding: 0px 0px 20px 0px !important;}
    #days-header { width: 300px !important;}
    #working-hours-display .day-row { margin-right: 0px !important; margin-left: 0px !important;}
    #working-hours-display .day-shifts-container {padding-left: 0px !important; padding-right: 0px !important;}
    #working-hours-display .add-shift-btn {margin-left: 0px !important;}
}

/*iphone 5 and android potrait*/
@media (max-width: 380px) {
    .select2-container--open .newGenDropDown {
        width: auto !important;
    }
  
    .export.allowPOSSalesButton .dropdown-menu, .export.posTileButton .dropdown-menu  {
        min-width: 100%;
        margin-left: -12px;
    }
    form#addAppointmentForm .modal-dialog .modal-body.add-booking {
        max-height: 400px;
    }
    .monthViewCal {
        margin-left: 0px !important;
    }
    #calendar .icContent .icViewMonth table th {
        padding: 5px 0px 10px 0px !important;
    }
    body {
        padding-top: 40px;
    }

    .inline-select .select-wrap .select2-container {
        min-width: 23% !important;
    }

    #header {
        height: 40px;
        overflow: hidden;
    }

    .main-menu .main-title h3 {
        padding-top: 0;
    }

    .menuTrigger {
        font-size: 30px;
        line-height: 40px;
    }

    .sub-childnav .filter-wrap .filter {
        display: none;
    }

    .btn-wrap .btn {
        font-size: 12px;
        /*margin: 0 2px !important; */
        margin: 0 2px 5px 0 !important;
    }

    .search-wrap {
        width: 100%;
    }

    li.select2-results__option {
        font-size: 13px;
    }

    .fixed-subnav .sub-nav .btn-wrap .btn {
        margin: 0 3px !important;

    }

    .calendar-nav li.last-item {
        left: 15px;
    }

    .calendar-nav li.last-item a, .calendar-nav li.last-item a {
        width: 140px;
    }

    .sub-childnav .btn-wrap
    .fixed-subnav {
        top: 40px;
    }

    .Appointment-list .item {
        width: 93%;
    }

    .dashboard .search-wrap {
        width: 100%;
    }

    .btn-group > .btn, .btn-group-vertical > .btn {
        flex: 1;
    }

    .modal-filter .filter-view a {
        margin-right: 4px;
        font-size: 13px;
    }

    .modal-body .modal-box .modal-innerbox.flex2 {
        display: flex;
        align-items: center;
    }

    .popup-btn-wrapper .float-right .btn {
        font-size: 12px;
        padding: 5px 8px;
        margin-left: 2px;
        margin-top: -20px;
    }

    .popup-btn-wrapper .btn.white {
        font-size: 13px;
        margin-top: -2px;
        padding: 5px 10px;
        display: inline-table;
    }

    .fixed-subnav .sub-nav .btn-wrap .btn {
        padding: 0.38rem 5px;
        font-size: 10px;
        margin: 0 2px;
    }

    .popup-btn-wrapper .btn.red {
        font-size: 12px;
        margin-top: 0;
    }

    .popup-btn-wrapper .btn span.hide {
        display: none;
    }

    .popup-btn-wrapper .btn.red i {
        display: none;
    }

    .main.dashboard .container > .row .col-md-7 .float-right .select-wrap {
        width: 50%;
        font-size: 13px;
    }

    .custom-payment .modal-footer .action-tabs .btn {
        padding: 10px 10px;
        font-size: 13px;
    }

    .calendar-title .fa-angle-left {
        left: 14%;
    }

    .calendar-title .fa-angle-right {
        right: 14%;
    }

    .subnav-container .profile-img, .subnav-container .client-noimg, .user-popup .name .client-noimg {
        margin-top: -70px !important;
    }

    .subnav-container .appointments .btn {
        top: -25px;
    }

    .subnav-container .status > span {
        margin-top: 0;
    }

    .booking-widget-wrap #calendar table tr td:first-child {
        font-size: 11px;
    }

    .booking-widget-wrap .contact-info ul {
        justify-content: flex-end;
    }

    .booking-widget-wrap .contact-info ul li {
        padding: 6px 14px;
    }

    .booking-widget-wrap .contact-info ul li a {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .booking-widget-wrap .contact-info ul li i {
        font-size: 24px;
    }

    .booking-widget-wrap .finish .finish-btn {
        background: #fff;
        width: auto;
        margin: 0;
        padding: 0;
    }

    .biz-info {
        width: 140px;
    }

    .makePayWrap .table {
        width: 80%;
        max-width: 85%;
        margin-bottom: 1rem;
    }

    .second_half {
        width: 80%;
    }

    .makePayWrap .payment-btn-wrap {
        float: none;
    }

    .makePayWrap .box-wrap .box-content.addCardWrap {
        width: 80%;
        padding: 15px 10px;
    }

    .settingMakePay.table td {
        padding: 10px 0px !important;
    }

    .settingMakePay .cardLabel {
        max-width: 100% !important;
        flex: 0 0 100%;
    }

    .credit-card-page #doublescroll .table th, .table td {
        padding: 0.1rem !important;
    }
    .credit-card-page .box-wrap .box-content {
        padding: 10px 0px;
    }
    .view-merge-fields .popover-wrap .custom-popover {
        width: 247px;
    }
    .view-merge-fields .popover-wrap.right .custom-popover .scroll-div {
        padding: 10px 30px 10px 20px;
    }
    .view-merge-fields .popover-wrap.right .custom-popover .popover-close {
        right: 0;
        left: initial;
    }
    .view-merge-fields .popover-wrap .custom-popover .popover-close .fal {
        font-size: 16px;
        line-height: 30px;
    }
    .view-merge-fields .popover-wrap .custom-popover .popover-close {
        height: 30px;
        width: 30px;
    }

    .newProductItem .select2-container {
        max-width: 230px;
    }

    .location-setting-form .box-wrap .box-title {
        padding: 15px 10px;
    }
    .sortableProducts .table th, .table td {
        padding: 10px !important;
    }
    .sortableProducts .drag-icon {
        position: relative;
        right: 10px;
    }
}
@media (max-width: 360px) {
    .addAppointmentBody .re-notes-label .notes-box {
        min-height: 155px;
    }
    .addAppointmentBody .re-notes-label .notes-box .text-area textarea {
        min-height: 95px;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding: 0px 5px;
    }
    .signup-testimonial P {
             font-size: 16px;
    }
    form#addAppointmentForm .modal-dialog .modal-body.add-booking {
        max-height: 360px;
    }
}
/*iphone4 potrait(optional)*/
@media (max-width: 350px) {
    .login-left-box .list-group-item span, .re-signup #loginbox .custom-label {
               font-size: 14px;
            }
    .popup-btn-wrapper .float-right .btn {
        font-size: 12px;
    }

    .subnav-container .profile-img {
        padding: 3px;
        width: 70px;
        height: 70px;
        float: right;
        margin: 40px auto 40px;
    }

    .subnav-container .status {
        float: none;
        margin-top: 60px;
        margin-right: -90px;

    }

    .calendar-title .fa-angle-left {
        left: 10%;
    }

    .calendar-title .fa-angle-right {
        right: 10%;
    }

    .fixed-subnav .sub-nav .btn-wrap .btn {
        padding: 0.38rem 5px;
        font-size: 12px;
        margin: 0 -10px !important;
    }

    .calendar-title h2 {
        font-size: 15px;
        font-weight: 500;
    }

    .paid-detail .container {
        padding: 0;
    }

    .subnav-container .status .switch {
        margin-top: 0;
    }

    .subnav-container .contact-detail .btn-wrap {
        justify-content: flex-start;
    }

    .subnav-container .contact-detail .btn-wrap .btn {
        padding: 4px 8px;
        font-size: 13px;
    }

    .fixed-subnav .sub-nav .btn-wrap .btn {
        font-size: 10px;
    }

    .select-btn-wrap .btn {
        width: 100%;
        overflow: hidden;
    }

    .select-btn-wrap.sharp-btn .btn {
        width: 100%;
    }

    .booking-widget-wrap #calendar table tr td:first-child {
        font-size: 11px;
    }

    .settingMakePay.table td {
        border-top: none;
    }
}

@media (max-width: 320px) {
    .daterangepicker.dropdown-menu {
        width: 90%;
    }
    .buttonList .btn-wrap {
        padding: 0px 0px;
    }
    .calendar-title .fa-angle-right {
        right: 16%;
    }

    .calendar-title .fa-angle-left {
        left: 16%;
    }

    .trial-body-mob .speak-with-us {
        font-size: 12px;
        padding: 0px 10px;
    }

    .trial-body-mob .speak-with-us {
        font-size: 12px;
        padding: 0px 10px;
    }

}

/*nexus 7 potrait(optional)*/
@media (min-width: 768px) {

    #cal-next, #cal-prev {
        width: 30px;
        height: 30px;
        display: inline-block;
        margin: 0px;
    }

    #cal-next i, #cal-prev i {
        margin: 0px;
    }

    #cal-next:hover i, #cal-prev:hover i {
        color: #537190;
    }

    .calendar-subnav .container {
        height: 40px;
    }
    .reportTiles{
    width: 31%;
    }

    #signupForm label.error[for=timezone_id] {
        margin-top: 0px;
        left: 347px;
        top: -64px;
    }

    #loginbox label.error {
        background-color: #fc6160;
        height: auto;
        min-width: 210px;
        position: absolute;
        right: auto;
        color: #fff;
        padding: 8px 15px;
        font-size: 13px;
        top: 25px;
        display: flex !important;
        align-items: center;
        margin-bottom: -24px;
        left: 453px !important;
        text-align: left;
        -webkit-font-smoothing: antialiased;
        letter-spacing: .1px;
        transition: all 200ms;
    }
    #loginbox label.valid{
        display: none !important;
    }
    #loginbox label.error::after{
        content: '';
        display: block !important;
        position: absolute;
        top: 8px;
        left: -20px;
        width: 0;
        height: 0;
        border-color: transparent #ef6060 transparent transparent;
        border-style: solid;
        border-width: 10px;
        transition: all 200ms;
    }
    
    #loginbox label.notification {
        background-color: #537190;
        height: auto;
        min-width: 210px;
        position: absolute;
        right: auto;
        color: #fff;
        padding: 8px 15px;
        font-size: 13px;
        top: 0px;
        display: none;
        align-items: center;
        margin-bottom: -24px;
        left: 320px;
        text-align: left;
        -webkit-font-smoothing: antialiased;
        letter-spacing: .1px;
        transition: all 200ms;
    }
    #loginbox label.notification::after{
        content: '';
        display: block !important;
        position: absolute;
        top: 8px;
        left: -20px;
        width: 0;
        height: 0;
        border-color: transparent #537190 transparent transparent;
        border-style: solid;
        border-width: 10px;
        transition: all 200ms;
    }

    #loginbox .alert-danger {
        background-color: #fc6160;
        height: auto;
        min-width: 225px;
        position: absolute;
        right: auto;
        color: #fff;
        padding: 5px;
        font-size: 13px;
        top: 10px !important;
        display: flex;
        left: 453px !important;
        -webkit-font-smoothing: antialiased;
        letter-spacing: .1px;
        transition: all 200ms;
        line-height: 22px;
        border-color: transparent;
        min-height: 34px;
    }

    #loginbox .alert-danger::after{
        content: '';
        display: block;
        position: absolute;
        top: 8px;
        left: -17px;
        width: 0;
        height: 0;
        border-color: transparent #ef6060 transparent transparent;
        border-style: solid;
        border-width: 8px;
    }

    .signupLastPage .alert-danger {
        width: 372px !important;
        height: 72px !important;
        line-height: 26px;
        top: -18px !important;
    }

    .signupLastPage .alert-danger::after {
        top: 26px !important;
    }

    .forgot-wrap .alert-danger {
        right: -225px !important;
    }

    #loginbox .form-group {
        position: relative;
    }

    .forgot-wrap .login-btn{
        margin-top: 0px !important;
    }

    .forgot-wrap .alert-danger {
        top: 56px !important;
    }

    #loginbox .alert-danger .close {
        color: white;
        opacity: 1;
        margin-right: 5px;
        font-size: 20px;
        margin-left: 0px !important;
        text-shadow: none;
    }

    #loginbox .alert-danger .close:hover {
        color: white;
        opacity: .5;
        text-decoration: none;
    } 
}

@media only screen
and (min-width: 1024px) {
    .retailPosTablet {
        display: block;
    }

    .waitlistDropdowns {
        display: none !important;
    }

    .waitlistDateRange {
        margin-top: -51px;
    }
    .reportTiles{
    width: 194px;
    }

}
#more_filter table{
    border: none;
    margin: 0;
    padding: 0;
    margin-left: 20px;
}
#more_filter table td:first-child{
    padding-right: 5px;
}

@media (min-width: 500px) {
    .grid-item-masonry {
      width: 50%;
    }
  }
  
  @media (min-width: 1000px) {
    .grid-item-masonry {
      width: 33.333%;
    }
  }
  
  @media (min-width: 1600px) {
    .grid-item-masonry {
      width: 33.333%;
    }
  }
  .sub_menu.billing_contact {
    width: 120px;
  }
  .sub_menu.billing_contact span.select2-selection__arrow {
      font-weight: 700;
  }
.bootstrap-datetimepicker-widget li.collapse {
    display: block !important;
}
.bootstrap-datetimepicker-widget i.icon-chevron-up,
.bootstrap-datetimepicker-widget i.icon-chevron-down {
    font-size: 18px;
}
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    font-weight: normal !important;
    font-size: 15px !important;
    height: 0;
    width: 0;
}
.bootstrap-datetimepicker-widget .timepicker-picker td {
    height: 0;
    width: 0;
}
div.bootstrap-datetimepicker-widget td {
    line-height: 10px;
}
.bootstrap-datetimepicker-widget button[data-action] {
    padding: 2px !important;
}
.bootstrap-datetimepicker-widget td span {
    line-height: 10px !important;
}
.bootstrap-datetimepicker-widget a[data-action] {
    padding: 0 !important;
}
.bootstrap-datetimepicker-widget .timepicker-picker a.btn[data-action] > i {
    font-style: normal !important;
}
@media only screen and (min-width: 768px) and (max-width: 870px) {
    #select_reminder_div .reminder-toggle {
        margin-top: 30px;
    }
    #select_reminder_div .checkbox  {
       margin-left: 8px;
    }
}
.sub-nav .financeReport #dropdownMenuLink {
    border: 1px solid #fff;
}
.booking-steps .skipPaymentBtn { 
    margin-top: 20px;
} 
.booking-steps .payConfirmBtn { 
    margin-top: 0px;
}