/**
* user-registration-smallscreen.css
* Optimises the default User Registration frontend layout when viewed on smaller screens.
*/

/**
* Imports
*/

/**
 * Variables
 */

/**
 * Grid breakpoints
 *
 * Define the minimum dimensions at which your layout will change,
 * adapting to different screen sizes, for use in media queries.
 **/

/**
 * Grid containers
 *
 * Define the maximum width of `.ur-container` for different screen sizes.
 * scss-docs-start container-max-widths
 **/

/** Minimum breakpoint width. Null for the smallest (first) breakpoint.
 *
 *	>> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 *	576px
 **/

/**
 * Variables
 */

/**
 * Grid breakpoints
 *
 * Define the minimum dimensions at which your layout will change,
 * adapting to different screen sizes, for use in media queries.
 **/

/**
 * Grid containers
 *
 * Define the maximum width of `.ur-container` for different screen sizes.
 * scss-docs-start container-max-widths
 **/

/**
 * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 * Makes the @content apply to the given breakpoint and wider.
 **/

/**
 * Grid system
 *
 * Generate semantic grid columns with these mixins.
 **/

/**
 * _mixins.scss
 * User Registration Mixins
 */

/**
* Style begins
**/
@media screen and (max-width: 768px) {
	.ur-frontend-form .ur-form-row {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	
	.ur-frontend-form .ur-form-row .ur-form-grid {
		width: 100% !important;
		margin-bottom: 20px;
	}
	
	.ur-frontend-form .ur-form-row .ur-form-grid:last-child {
		margin-bottom: 0;
		border-left: 0 none;
	}
}

@media screen and (max-width: 600px) {
	#user-registration .user-registration-MyAccount-navigation ul {
		display: block;
	}
	
	#user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link {
		display: block;
	}
}