/* ================ TABLE OF CONTENTS ================ */
/*
	Description: overrides of the base.css stylesheet to display a two column layout on medium and up screens. 
/*
/*
01. User Login From
02. Instructions
03. Shibboleth Button
04. Divider
05. Username and Password
06. Columns
00. Media Quires
*/

/* ==================== 01. User Login Form ==================== */
/* === 659px === */
@media screen and (min-width: 659px) {
	form.user-login-form {
		display: flex;
		flex-direction: row;
		gap: 1rem;
		max-width: 100%;
	}
}


/* ==================== 02. Instructions ==================== */

/* ==================== 03. Shibboleth Button ==================== */

/* ==================== 04. Divider ==================== */
/* === 659px === */
@media screen and (min-width: 659px) {
	.login__divider {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: stretch;
		margin-top: 0;
		margin-right: 1rem;
		margin-bottom: 0;
		margin-left: 1rem;
		width: 0.0625rem;
		height: auto;
		text-transform: uppercase;
		white-space: nowrap;
	}
}


/* ==================== 05. Username and Password ==================== */



/* ==================== 06. Columns ==================== */
.login__column {
	display: flex;
	flex-direction: column;
}

/* === 659px === */
@media screen and (min-width: 659px) {
	.login__column {
		max-width: calc((100% - 0.0625rem) / 2);
		width: 100%;
	}
}

/* ==================== 00. MEDIA QUERIES ==================== */
/* UO Cosmic is build using the mobile first design principle. 
    - styling not wrapped in a media query should be styled for
      mobile.
    - styling for larger screens should be wrapped in the appropriate
      media query.
/* === 480px === */
@media screen and (min-width: 480px) {
}

/* === 659px === */
@media screen and (min-width: 659px) {
}

/* === 900px === */
@media screen and (min-width: 900px) {
}

/* === 960px === */
@media screen and (min-width: 960px) {
}

/* === 1550px === */
@media screen and (min-width: 1550px) {
}