.lotusFrame, body .lotusFrame {
    min-width: 0px;
}

.responsiveTable {
	background-color: #F4F5F6;
	margin-bottom: 15px;
	border: 2px solid #E5E5E5;
}
.responsiveTableRow {
    display: grid;
    
    /* For distributing columns equally across rows, but then the responsiveness does not work
    grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	*/
	
	/* For equal size columns (25%) */
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.responsiveTableCol {
    padding: 5px;
    text-align: left;
}
.responsiveTableCol .xspTextLabel {
	padding-bottom: 5px;
	display: inline-block;
	width: 50%; /* To force smaller input fields to start on a new line */
}

@media only screen and (max-width: 1024px) {
	.responsiveTableRow {
        grid-template-columns: auto auto;
    }
	.lotusColRight {
    	display: none;
	}
	.lotusTitleBar .lotusTabs {
    	margin-left: 0px;
    	height: auto;
    	padding-top: 10px;
	}
	.lotusTitleBar .lotusSearch {
    	top: -35px;
	}
	.lotusFrame {
	}
	.lotusui .lotusContent {
		padding: 10px 10px 10px;
		min-height: 0px;
	}
	.lotusui .lotusColLeft {
		padding: 10px 10px 10px;
	}
	.lotusui .lotusMenu {
		margin-left: 0px;
	}
	.lotusTitleBar {
	}
	.lotusTitleBar .lotusInner {
		height: 100%;
	}
	.lotusTitleBar .lotusTabs li a, .lotusTitleBar .lotusTabs a:visited {
		height: 100%;
		padding-top: 10px;
	}
}

@media only screen and (max-width: 667px) {
	.responsiveTableRow {
        grid-template-columns: auto;
    }
	.sherlockLogo {
		display: none;
	}
	.lotusActionBar > .lotusLeft {
		width: 100%;
	}
	.lotusui .lotusColLeft, .lotusui .lotusMenu {
   	    width: unset;
   	    float: none;
   	    margin-bottom: 10px;
	}
	.lotusui .lotusContent {
		clear: both;
	}
	.lotusui .lotusMenu ul {
    	padding-top: 15px;
    	padding-bottom: 15px;
	}
	.lotusUser {
		display: none !important;
	}
	.lotusTitleBar .lotusSearch {
    	display: none;
	}
}