/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */

    .legal-clinic-calendar tr, .legal-clinic-calendar td, .legal-clinic-calendar table { 
		 display:block;
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	
    .legal-clinic-calendar-table thead th {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
	
	.view-clone-of-recurring .view-display-id-page_2 .table-striped tbody tr, .legal-clinic-calendar-table tbody tr { 
        
            padding: 10px !important;
            border: 1px solid !important;
            border-radius: 10px !important;
            margin : 10px !important;
            display: block;
            
        
    }
/*row mobile disaply*/
    .legal-clinic-calendar-table tbody tr {
 
}
.legal-clinic-calendar-table .table-responsive {
    padding: 15px;
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* border: 1px solid #ddd; */
    background: #efefef;
}
.legal-clinic-calendar-table .table-striped > tbody > tr {
    background-color: #f9f9f9;
}

.legal-clinic-calendar-table .table-responsive > .table > thead > tr > th, 
.legal-clinic-calendar-table .table-responsive > .table > tbody > tr > th,
.legal-clinic-calendar-table .table-responsive > .table > tfoot > tr > th, 
.legal-clinic-calendar-table .table-responsive > .table > thead > tr > td, 
.legal-clinic-calendar-table .table-responsive > .table > tbody > tr > td, 
.legal-clinic-calendar-table .table-responsive > .table > tfoot > tr > td {

    white-space: normal;
}
.legal-clinic-calendar-table td.views-field.views-field-date__value.is-active.views-align-left {
    white-space: normal;
}

    .view-clone-of-recurring .view-display-id-page_2 .table-striped > tbody > tr {
        background-color: #f9f9f9;
        padding: 10px;
        border: 1px solid;
        border-radius: 10px;
        margin: 10px;
    }
	
	.view-clone-of-recurring .view-display-id-page_2 td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.view-clone-of-recurring .view-display-id-page_2 td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	.legal-clinic-calendar td:nth-of-type(1):before { 
        content: "Clinic Name"; 
        display: inherit;
        font-weight: 500;
        }
	.legal-clinic-calendar td:nth-of-type(2):before { 
        content: "Date and Time";
        display: inherit;
        font-weight: 500; 
        }
	.legal-clinic-calendar td:nth-of-type(3):before { 
        content: "County";
        display: inherit;
        font-weight: 500; 
        }
	.legal-clinic-calendar td:nth-of-type(4):before { 
        content: "Venue";
        display: inherit;
        font-weight: 500; 
        }

    
	
}

/****
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.

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

	/* Force table to not be like tables anymore 

    .view-clone-of-recurring .view-display-id-page_2 table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) 
	
    .legal-clinic-calendar-table thead th {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
	
	.view-clone-of-recurring .view-display-id-page_2 .table-striped tbody tr, .legal-clinic-calendar-table tbody tr { 
        
            padding: 10px !important;
            border: 1px solid !important;
            border-radius: 10px !important;
            margin : 10px !important;
        
    }
/*row mobile disaply
    .legal-clinic-calendar-table tbody tr {
 
}
.legal-clinic-calendar-table .table-responsive {
    padding: 15px;
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* border: 1px solid #ddd; 
    background: #efefef;
}
.legal-clinic-calendar-table .table-striped > tbody > tr {
    background-color: #f9f9f9;
}

.legal-clinic-calendar-table .table-responsive > .table > thead > tr > th, 
.legal-clinic-calendar-table .table-responsive > .table > tbody > tr > th,
.legal-clinic-calendar-table .table-responsive > .table > tfoot > tr > th, 
.legal-clinic-calendar-table .table-responsive > .table > thead > tr > td, 
.legal-clinic-calendar-table .table-responsive > .table > tbody > tr > td, 
.legal-clinic-calendar-table .table-responsive > .table > tfoot > tr > td {

    white-space: normal;
}
.legal-clinic-calendar-table td.views-field.views-field-date__value.is-active.views-align-left {
    white-space: normal;
}

    .view-clone-of-recurring .view-display-id-page_2 .table-striped > tbody > tr {
        background-color: #f9f9f9;
        padding: 10px;
        border: 1px solid;
        border-radius: 10px;
        margin: 10px;
    }
	
	.view-clone-of-recurring .view-display-id-page_2 td { 
		/* Behave  like a "row" 
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.view-clone-of-recurring .view-display-id-page_2 td:before { 
		/* Now like a table header 
		position: absolute;
		/* Top/left values mimic padding 
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	
	Label the data
	
	td:nth-of-type(1):before { 
        content: "Clinic Name"; 
        display: inherit;
        font-weight: 500;
        }
	td:nth-of-type(2):before { 
        content: "Date and Time";
        display: inherit;
        font-weight: 500; 
        }
	td:nth-of-type(3):before { 
        content: "County";
        display: inherit;
        font-weight: 500; 
        }
	td:nth-of-type(4):before { 
        content: "Venue";
        display: inherit;
        font-weight: 500; 
        }

    
	
}
*/