/* Video Style can be applied to all media sizes */
video {
	max-width:100%;
}
	
/* Handle Tables on Tablets*/
@media only screen and (max-width: 980px) {
	table.default.rsp_table th:not(.rsp_tblt),
	table.default.rsp_table td:not(.rsp_tblt) {
		display:none;
	}

	input.dateselect[type=date] {
		width: calc(11ch + 4rem) !important;
	}

	div.type_xui_form_date .focus_container,
	div.type_xui_form_datetime .focus_container {
		padding-right: 0;
	}
}

/* Handle Tables on Small Screens*/
@media only screen and (max-width: 640px) {
  table.default.rsp_details:not(.rsp_table) > thead {
    display: none;
  }

  table.default.rsp_details:not(.rsp_table), 
  table.default.rsp_details:not(.rsp_table) > tbody, table.default.rsp_details:not(.rsp_table) > tbody > tr, table.default.rsp_details:not(.rsp_table) > tbody > tr > td,
  table.default.rsp_details:not(.rsp_table) > tfoot, table.default.rsp_details:not(.rsp_table) > tfoot > tr, table.default.rsp_details:not(.rsp_table) > tfoot > tr > td {
    display: block;
    border: none;
  }

	table.default.rsp_details:not(.rsp_table) .rsp_hide {
		display:none!important;
	}
  
  table.default.rsp_details:not(.rsp_table) > tbody > tr {
    margin-bottom: 10px;
    position: relative;
  }
  
  table.default.rsp_details:not(.rsp_table) > tbody > tr:not(:last-child):after {
    content: '';
    display: block;
    position: absolute;
    bottom: -6px;
    left: 0px;
    height: 0px;
    width: 100%;
    border-top: 1px solid #eee;
  }
  
  table.default.rsp_details:not(.rsp_table) > tbody > tr > td {
    position: relative;
    padding-left: 40%;
  }
  
  table.default.rsp_details:not(.rsp_table) > tbody > tr.even:not(:hover) > td {
    background: #fff;
  }
  
  table.default.rsp_details:not(.rsp_table) > tbody > tr.odd:not(:hover) > td {
    background: #f4fbfe;
  }
  
  table.default.rsp_details:not(.rsp_table) > tbody > tr > td:before {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(40% - 20px);
    content: attr(data-label);
    padding: 5px;
    text-align: right;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  table.default.rsp_details:not(.rsp_table) > tfoot > tr > td.page_control {
    padding-bottom: 10px;
  }

	table.default:not(.rsp_table):not(.rsp_details) { table-layout:fixed; margin-bottom:50px;}
	table.default:not(.rsp_table):not(.rsp_details) .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
	table.default:not(.rsp_table):not(.rsp_details) * html .cf { zoom: 1; }
	table.default:not(.rsp_table):not(.rsp_details) *:first-child+html .cf { zoom: 1; }
	table.default:not(.rsp_table):not(.rsp_details) table { width: 100%; border-collapse: collapse; border-spacing: 0; }
	 
	table.default:not(.rsp_table):not(.rsp_details) th,
	table.default:not(.rsp_table):not(.rsp_details) td { margin: 0; vertical-align: top; }
	table.default:not(.rsp_table):not(.rsp_details) th { text-align: left; }
	table.default:not(.rsp_table):not(.rsp_details) table { display: block; position: relative; width: 100%; }
	table.default:not(.rsp_table):not(.rsp_details) thead { display: block; float: left; }
	table.default:not(.rsp_table):not(.rsp_details) tfoot { position:absolute;bottom:-50px;right:0px;left:0px;text-align:center;font-size:0.8em }
	table.default:not(.rsp_table):not(.rsp_details) tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
	table.default:not(.rsp_table):not(.rsp_details) thead tr { display: block; }
	table.default:not(.rsp_table):not(.rsp_details) th { display: block; text-align: right; }
	table.default:not(.rsp_table):not(.rsp_details) tbody tr { display: inline-block; vertical-align: top; }
	table.default:not(.rsp_table):not(.rsp_details) tbody tr.separator { display: none; }
	table.default:not(.rsp_table):not(.rsp_details) td { display: block; min-height: 1.25em; text-align: left; }
	 
	/* sort out borders */
	table.default:not(.rsp_table) th { border-bottom: 0; border-left: 0; }
	table.default:not(.rsp_table) td { border-left: 0; border-right: 0; border-bottom: 0; }
	table.default:not(.rsp_table) tbody tr { border-left: 1px solid #babcbf; }
	table.default:not(.rsp_table) th:last-child,
	table.default:not(.rsp_table) td:last-child { border-bottom: 1px solid #babcbf; }
	
	/* Responsive Tables */
	div.table_wrap.rsp_wrap {
		max-width:100%;
		overflow:hidden;
	}
	table.default.rsp_table th:not(.rsp_phn),
	table.default.rsp_table td:not(.rsp_phn) {
		display:none;
	}
	
	/* Generic Classes */
	.hide_mobile {
		display:none;
	}
	.show_mobile, .hide_desktop {
		display:inherit;
	}
	
	/* Navbar */
	div.xf_navbar dl:after {
		content: ' ';
		display: block;
		clear: both;
	}
	
	/* Tabs */
	ul.smartTabs {
		white-space: normal;
	}
	
	/* Paging */
	.xui_paging span.pages { display:none; }
	
	/* Images */
	img {
		max-width:100%;
	}
	
	/* Form Elements */
	div.form_row label.label {
		float:none;
		width:auto!important;
		text-align:left;
		margin-bottom:3px;
		margin-top:3px;
	}
	div.form_el {
		margin-left:0px!important;
	}
	textarea.form_element {
		margin-right:0px!important;
	}
	div.form_required_info {
		margin-left:0;
	}
	table.form_element, 
	input.form_element, 
	select.form_element, 
	textarea.form_element {
		max-width:100%!important;
	}

	/* Disable Form Zoom on iOS Mobiles */
	body.device_ios input[type="text"],
	body.device_ios input[type="textbox"],
	body.device_ios input[type="password"],
	body.device_ios textarea,
	body.device_ios select {
	    font-size:16px!important;
	}

	/* Disable Form Zoom on iOS Mobiles */
	body.device_ios input[type="text"]:focus,
	body.device_ios input[type="textbox"]:focus,
	body.device_ios input[type="password"]:focus,
	body.device_ios textarea:focus,
	body.device_ios select:focus {
	    font-size:16px!important;
	}

	/* Disable Form Zoom on Android Mobiles */
	body.device_android input[type="text"],
	body.device_android input[type="textbox"],
	body.device_android input[type="password"],
	body.device_android textarea,
	body.device_android select {
	    font-size:16px!important;
	}

	/* Disable Form Zoom on Android Mobiles */
	body.device_android input[type="text"]:focus,
	body.device_android input[type="textbox"]:focus,
	body.device_android input[type="password"]:focus,
	body.device_android textarea:focus,
	body.device_android select:focus {
	    font-size:20px!important;
	}

	/* ShortProfile PopUp*/
	div.xf_menu.useroptions {
		max-width: 90%;
	}

	#loading {
		width:270px!important;
		left:50%!important;
		top:5%!important;
		margin-left:-150px!important;
		padding:10px 15px!important;
		border:none!important;
	}

	.xf_layout_column .column {
		float:none;
		width:auto!important;
	}
}

@media only screen and (max-height: 500px) {

}