.mobile-view { display: none; }
.profile_temp { display: none; }
.d-inline-block { display: inline-block; }
.border-bottom-shadow-mobile {
    border-bottom: 1px solid #f0f0f5;
    -webkit-box-shadow: 0 8px 6px -6px #f0f0f5;
    -moz-box-shadow: 0 8px 6px -6px #f0f0f5;
    box-shadow: 0 8px 6px -6px #f0f0f5;
}

.border-bottom-mobile {
    border-bottom: 1px solid #f0f0f5;
}

.SeRchInput:foucs{
    border:1px solid #007bff;
}

.header-top-button.mobile-view div { text-decoration:underline; }
@media only screen and (max-width: 768px) {

    .w-1 { width: 10% !important; }
    .w-2 { width: 20% !important; }
    .w-3 { width: 30% !important; }
    .w-4 { width: 40% !important; }
    .w-5 { width: 50% !important; }
    .w-6 { width: 60% !important; }
    .w-7 { width: 70% !important; }
    .w-8 { width: 80% !important; }
    .w-9 { width: 90% !important; }
    .w-10 { width: 100% !important; }
    .w-25 { width: 25% !important; }
    .w-33 { width: 33.333333% !important; }

    .desktop-view { display: none; }
    .mobile-view { display: block; }

    .section-padding {
        padding: 20px 0;
    }

    .mobile-custom-menu {
        position: fixed;
        top: 94px;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 9999;
    }

    .profile_temp {
        display: flow-root;
        padding: 20px;

    }

    .profile_temp img {
        width: 60%;
        transform: translateX(-50%);
        margin: 0 50%;
    }

    .mob-desc-panel h1 {
        font-weight: 500;
        letter-spacing: 2px;
        font-size: 25px;
    }

    .mob-desc-panel h4 {
        font-weight: normal;
        color: #444444d9;
        font-size: 23px;
    }

    .mob-desc-panel h5 {
        font-weight: normal;
        color: #444;
        font-size: 21px;
    }

    .mobile-custom-menu {
        display: none;
    }

    .mob-active {
        background: #14bef0;
        color: #fff !important;
    }

    .user_appointments, .user_invoice, .user_payment, .user_docunments {
        width: 100%;
    }

    .top-nav button, .top-nav input {
        color: #14bef0;
        padding: 7px;
        display: inline-block;
        border: 1px solid #eaedef;
        border-radius: 4px;
        background-color: #fff;
        width: 100%;
        text-align: center;
    }

    .top-nav input {
        color: #000;
    }

    .top-nav button.active {
        color: #fff;
        background-color: #14bef0;
    }

    .date_background {
        background: #cccccc59;
        text-align: center;
        margin-bottom: 10px;
        padding-top:10px;
    }

    .date_background .date {
        font-size: 30px;
        font-weight: 700;
    }

    .date_background .month {
        font-size: 21px;
        font-weight: 600;
        color: #8e8b8b;
        line-height: 2;
    }

    .doc_details {
        padding: 10px 15px;
    }

    .doc_name {
        font-size: 18px;
        font-weight: 600;
    }

    .appointment_schedule {
        font-size: 16px;
    }

    .row.top-nav.border-bottom-shadow-mobile {
        padding-bottom: 5px;
    }

    .dataTables_wrapper .dataTables_paginate {
        float: unset !important;
        text-align: center !important;
    }

    .content_detils {
        font-size: 17px;
    }

    .content_detils span {
        font-size: 19px;
    }

    .content_btn a {
        background-color: transparent;
        border: none;
    }
    
    .content_btn a i {
        font-size: 20px;
        color: #04e8e4;
    }
    .cust_invoice, .payment_list {
        padding-top: 10px;
        height: calc(100vh - 320px);
        overflow:auto;
    }
    .row.top-nav.border-bottom-shadow-mobile {
        padding-bottom: 10px;
    }
    
    .mob-title {
        font-size: 22px;
        font-weight: 700;
        margin-top: 7px;
    }
    
    .user_documents .content_detils a {
        color:#000;
    }
    
    .mobileViewinner .btn.btn-warning.edit, .mobileViewinner .btn.btn-danger.delete, .mobileViewinner .btn-info {
        padding:0 !important;
        background: transparent;
        border: none;
        color: #ffc107;
    }
    
    .mobileViewinner .btn.btn-warning.edit i {
        color: #ffc107 !important;
        font-size: 21px;
    }
    
    .mobileViewinner .btn.btn-danger.delete i {
        color: #dc3545;
        font-size: 21px;
    }
    
    .user_documents .content_btn {
        display:flex;
    }
    
    .btn-divider {
        font-size: 20px;
        padding-left: 5px;
        padding-right: 5px;
    }
	
	.user_invoice .mob-title {
        margin-top:7px;
    }
	
	.user_appointments .livebtn {
        padding-top:30px;
    }
    
    .user_appointments .livebtn a, .user_appointments .livebtn a button {
        background:transparent !important;
        border:none !important;
    }
    
    .user_appointments .livebtn a button i {
        color: #14bef0 !important;
        font-size: 20px !important;
    }
}


@media only screen and (max-width: 600px) {}

@media only screen and (max-width: 414px) {
    .row.top-nav.border-bottom-shadow-mobile {
        padding-bottom: 0;
    }
    .mobile-custom-menu {
        top: 60px;
    }

    .profile_temp img {
        width: 100%;
    }

    .mob-desc-panel {
        padding-left: 15px;
    }
   .mob-desc-panel h1 {
        font-size: 20px;
    }

    .mob-desc-panel h4 {
        font-size: 18px;
    }

    .mob-desc-panel h5 {
        font-size: 16px;
    }

    .user_appointments, .user_invoice, .user_payment, .user_docunments {
        padding:15px;
    }

    .user_appointments, .user_invoice, .user_payment, .user_docunments {
        padding:0 15px;
    }

    .top-nav .col-4 {
        padding:5px;
    }

    .date_background {
        background: #cccccc59;
        text-align: center;
        margin-bottom: 10px;
        padding-top:10px;
    }

    .date_background .date {
        font-size: 25px;
        font-weight: 700;
    }

    .date_background .month {
        font-size: 25px;
        font-weight: 600;
        color: #8e8b8b;
        line-height: 2;
    }

    .doc_details {
        padding: 10px 15px;
    }

    .doc_name {
        font-size: 15px;
        font-weight: 600;
    }

    .appointment_schedule {
        font-size: 15px;
    }

    .cust_invoice, .payment_list .row.top-nav.border-bottom-shadow-mobile {
        padding-bottom: 5px;
    }

    .cust_invoice, .payment_list {
        padding: 5px 0 !important;
    }

    .content_btn a i {
        font-size: 20px;
    }

    .cust_invoice, .payment_list .content_detils {
        font-size: 15px;
        line-height: 2.3;
    }

    .content_detils span {
        font-size: 16px;
    }

    .content_detils h5 {
        font-size: 18px;
    }
    
    .mob-title {
        font-size: 17px;
        font-weight: 700;
        margin-top: 7px;
    }
    
    .cust_invoice .row.top-nav.border-bottom-shadow-mobile {
        padding-bottom: 7px;
    }
    
    .cust_invoice .top-nav button, .cust_invoice .top-nav input {
        height:34px;
    }
    
    .user_documents .mob-title {
        font-size: 13px;
        margin-top: 8px;
    }
    
    .user_appointments .mob-title {
        font-size: 15px;
        margin-top: 11px;
    }
	
	.user_documents #searchList1 button, .user_documents #searchList1 input, .user_documents #searchList1 select {
        font-size:11px;
        height:34px;
        padding: 0;
        padding-left: 7px;
    }
    
    .user_documents .content_detils {
        font-size: 14px;
    }
    
    .user_documents .content_btn {
        padding:0;
    }
    
    .user_documents .content_btn button i {
        font-size:15px;
    }
    
    .mobileViewinner .btn.btn-warning.edit i, .mobileViewinner .btn.btn-danger.delete i {
        font-size: 17px;
    }
	
	.user_invoice .SeRchInput {
        vertical-align:middle;
    }
    
    .user_invoice .mob-title {
        margin-top:-3px;
    }
}

@media only screen and (max-width: 411px) {
    .content_detils span {
        font-size: 16px;
    }
    
    .cust_invoice .mob-title {
        font-size: 15px;
        margin-top:0;
    }
	
	.user_invoice .mob-title {
        margin-top:4px;
    }
}


@media only screen and (max-width: 375px) and (max-height: 812px) {
    .top-nav .col-3 {
        font-size : 12px;
    }
    
    .content_detils h5 {
        font-size: 16px;
    }
    
    .user_documents .mob-title {
        font-size: 12px;
        margin-top: 8px;
    }
    
    .user_appointments .mob-title {
        font-size: 14px;
        margin-top: 13px;
    }
	
	.user_documents .content_detils {
        font-size: 13px;
    }
    
    .btn-divider {
        font-size: 20px;
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media only screen and (max-width: 375px) and (max-height: 667px) {
    .top-nav .col-3 {
        font-size : 12px;
    }
    
    .content_detils h5 {
        font-size: 14px;
    }
    
    .content_detils span {
        font-size: 16px;
    }
    
    .user_documents .mob-title {
        font-size: 12px;
    }
    
    .user_documents #searchList1 button, .user_documents #searchList1 input, .user_documents #searchList1 select {
        font-size: 10px;
        height: 34px;
    }
    
    .user_documents .content_detils {
        font-size: 13px;
    }
    
    .mobileViewinner .btn.btn-danger.delete i, .mobileViewinner .btn.btn-warning.edit i {
        color: #dc3545;
        font-size: 15px;
    }
    
    .mobPagination .dataTables_paginate.paging_simple_numbers {
        font-size:12px;
    }
    
    .cust_invoice .content_detils {
        font-size: 15px;
    }
}

@media only screen and (max-width: 360px) and (max-height: 640px) {
    .content_detils {
        font-size: 13px;
        margin-top:0;
    }
    
    .cust_invoice .mob-title {
        font-size: 14px;
    }
    
    .user_documents #searchList1 button, .user_documents #searchList1 input, .user_documents #searchList1 select {
        font-size: 9px;
        height: 34px;
    }
    
    .user_documents .mob-title {
        font-size: 11px;
        margin-top: 8px;
    }
    
    .user_appointments .mob-title {
        font-size: 15px;
        margin-top: 12px;
    }
	
	.user_documents .content_detils {
        font-size: 12px;
    }
    
    .mobileViewinner .btn.btn-warning.edit i, .mobileViewinner .btn.btn-danger.delete i {
        font-size: 15px;
    }
    
    .btn-divider {
        font-size: 20px;
        padding-left: 0;
        padding-right: 0;
    }
    
    .mobPagination .dataTables_paginate.paging_simple_numbers {
        font-size:10px;
    }
    
    .content_btn a i {
        font-size: 18px;
    }
    
    .date_background .month {
        font-size: 22px;
    }
    
    .date_background .date {
        font-size: 23px;
    }
}

@media only screen and (max-width: 320px) and (max-height: 568px) {
    .top-nav button, .top-nav input {
         font-size: 11px; 
    }

    .col-md-2.col-2.content_btn {
        padding-left: 0;
    }

    .cust_invoice, .payment_list .content_detils {
        font-size: 14px;
    }
    .cust_invoice .row.top-nav.border-bottom-shadow-mobile {
        padding-bottom: 7px;
    }
    
    .user_documents .mob-title {
        font-size: 10px;
    }
    
    .user_appointments .mob-title {
        font-size: 15px;
    }
	
	.user_documents #searchList1 button, .user_documents #searchList1 input, .user_documents #searchList1 select {
        font-size: 8px;
    }
    
    .user_documents .content_detils {
        font-size: 12px;
    }
    
    .cust_invoice .content_detils {
        font-size: 13px;
    }
    
    .date_background .month {
        font-size: 20px;
    }
    
    .date_background .date {
        font-size: 20px;
    }
	
	.btn-divider {
        font-size: 20px;
        padding-left: 0px;
        padding-right: 0px;
    }
}