* {
	box-sizing: border-box;
}

html {
	height: 100%;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	font-family: 'Play', sans-serif;
	font-size: 18px;
	line-height: 1.7;
	color: #666;
	background: #DCDCDC;
}
.full-body {
	min-height: 100vh;
}
h1,h2, h3, h4 {
	color: #000;
}
h1 {
	font-size: 36px;	
}
h2 {
	font-size: 32px;	
}
h3 {
	font-size: 28px;	
}
h4 {
	font-size: 24px;	
}

a:link, a:visited {
	color: #5c8dba;
	text-decoration: none;
}

a:hover, a:active {
	color: #2c6191;
	text-decoration: none;
}

.indent1 {
	text-indent: 1em;
	padding-top:1px;
}

.indent2 {
	text-indent: 2em;
	padding-top:1px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ccc;
  font-style: italic;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #515151;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #515151;
}

.clear {
	clear:both;
}


.main-header {
	background: #fff;
	color: #666;
	border-bottom: 2px solid #aaaaaa;
}
.header-container {
	width: 1080px;
	max-width: 100%;
	padding: 10px;
	margin: 0 auto;
}
.h-logo {
	padding-top: 5px;
}
	
/**** END Header ****/





/**** MAIN CONTENT Area ****/
.main-content-wrapper {
	background: #e5e5e5;
}
.student-main-content-wrapper {
	background: #EDF2DD;
	min-height: 40%;
}
.main-content {
	padding: 10px 10px 3em 10px ;
	margin: 0 auto;
}
.content-area-top {
	max-width: 100%;
}
.form-error-box, .form-success-box {
    border-left: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    background: #f5f5f5;
    padding: 10px;
    margin-left: -10px;
}
.form-error-box > img, .form-error-box > h2 {
    display: inline-block;
    margin: 0;
    color: #EC4629;
}
.form-error-text {
    line-height: 1.25;
    color: #EC4629;
}
.form-success-box > img, .form-success-box > h2 {
    display: inline-block;
    margin: 0;
    color: #75AE39;
}
.form-success-text {
    line-height: 1.25;
    color: #75AE39;
}
.login-fields {

}
.login-fields input[type=text], 
.login-fields input[type=password]{
	width: 95%;
	padding:16px;
	font-size: 20px;
	margin: 15px 0px 15px 0px;
	border: none;
	background-color: #fff;
	color: #000;
	flex:2;
}
.login-fields button {
	font-size: 25px;
	padding: 15px 14px 19px 14px;
	margin: 15px 30px 15px 0px;
	border:1px solid #3676aa;
	cursor: pointer;
	background: #3676aa;
	color: #E8EEFA;
}
.login-fields button:hover {	
	background: #E8EEFA;
	color: #3676aa;
	border:1px solid #3676aa;
}

.login-description-info {
	flex: 1;
	padding: 1em 3em 1em 2em;
}

.logged-in-wrapper {
	width: 49%;
	padding-top: 1em;
	padding-right: 2em;
}	
.welcome {
	font-weight: bold;
	text-decoration: underline;
	color: #444;
	padding-bottom: 0.6em;
	font-size: 20px;
}

.logged-in-apps-container1 {
	padding: 3px;
	margin: 10px 15px 15px 0px;
	background: #fff;
	border-radius: 5px;
	text-align: center;
}

.logged-in-apps-container2 {
	padding: 1px;
	margin: 10px 15px 15px 0px;
	background: #fff;
	border-radius: 5px;
	text-align: center;
}
.meet-app {
	padding-top: 3px;
}
.logged-in-apps-container1:hover, 
.logged-in-apps-container2:hover {
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.bp-green {
	list-style-image: url('/images/green_checkmark.png');
	color: #00b700;
}
.bp-red {
	list-style-image: url('/images/red_missing.png');
	color: #c40000;
}

.field-error {
    outline: 2px solid red;
}

.password-status-bar {
    width: 100%;
}
.password-status-bar > div {
    border: 1px solid #ddd;
    border-radius: 25px;
    height: 1em;
}

.content-container {
    border: 0px;
    border-radius: 6px;
    padding: 5px 12px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(87,87,87,0.1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(87,87,87,0.1);
    box-shadow: 0px 0px 15px 0px rgba(87,87,87,0.1);
}

.content-area-bottom {
	display:flex;
	max-width: 100%;
	margin: 0 auto;
}

.helpdesk-info-dlg {
    cursor: pointer;
}
    .helpdesk-info-dlg .helpdesk-info {
        display: none;
        position: absolute;
        top: 180px;
        cursor: default !important;
        background-color: #DCDCDC;
        border: 1px solid #666;
        border-radius: 5px;
    }
.helpdesk-info-dlg:hover .helpdesk-info {
    display: inline-block;
}
    /**** END MAIN CONTENT Area ****/
    footer {
        background: #DCDCDC;
        //background: linear-gradient(180deg, rgba(200,200,200,1) 0%, rgba(229,229,229,1) 58%, rgba(229,229,229,1) 100%);
        border-top: 1px solid #ccc;
        color: #fff;
        /*min-height: 100vh;*/
    }
.footer-container {
	display:flex;
	width: 1200px;
	max-width: 100%;
	padding: 40px;
	margin: 0 auto;	
}
.footer-links {
	flex:1;
	text-align:center;
}

.footer-preview-container {
	text-align: center;
	width: 1200px;
	max-width: 100%;
	padding: 15px;
	margin: 0 auto;	
}

.dv-suspended-msg-header {
    font-weight: bold;
    color: red;
    padding: 0em 2em;
    text-align: center;
    background-color: #FFE51E;
}

/** Media Querrie Styles ***/
@media only screen and (min-width: 890px) {
  /* For large screen laptops and desktops: */
	.main-content {
		max-width: 1080px;
	}	
	.content-area-top {
		display:flex;
	}
	.logged-in-wrapper {
		border-right: 1px solid #ccc;
	}	
	.login-fields {
		flex: 1;
		border-right: 0px solid #ccc;
		padding: 1em 1em 3em 1em;
	}
	.login-fields input[type=text], 
	.login-fields input[type=password]{
		padding:16px;
		font-size: 20px;
		margin: 15px 0px 15px 0px;
		border: none;
		background-color: #fff;
		color: #000;
		width: 95%;
		flex:2;
		
	}
	.login-description-info {
		flex: 1;
		padding: 1em 3em 1em 2em;
	}
	.logged-in-apps {
		display: flex;
		width:100%;
	}
	.logged-in-apps-container1 {
		flex: 1;
		padding: 3px;
		margin: 10px 15px 15px 0px;
		background: #fff;
		border-radius: 5px;
		text-align: center;
	}

	.logged-in-apps-container2 {
		flex:1;
		padding: 1px;
		margin: 10px 15px 15px 0px;
		background: #fff;
		border-radius: 5px;
		text-align: center;
	}
}

@media only screen and (max-width: 889px) and (min-width: 600px) {
  /* For tablets: */
	.main-content {
		width: 100%;
		min-width: 740px;
	}
	.content-area-top {
		display: flex;
	}
	.logged-in-wrapper {
		width: 50%;
		border-right: 1px solid #ccc;
	}
	.login-fields {
		flex: 1;
		border-right: 1px solid #ccc;
		padding: 1em 1em 3em 1em;
	}	
	.login-description-info {
		flex: 1;
		width: 100%;
		padding: 1em 1em 1em 1em;
	}	
	.logged-in-apps {
		display: flex;
		width:100%;
	}
	.logged-in-apps-container1 {
		flex: 1;
		padding: 3px;
		margin: 10px 15px 15px 0px;
	}
	.logged-in-apps-container2 {
		flex:1;
		padding: 1px;
		margin: 10px 15px 15px 0px;
	}	
}

@media only screen and (max-width: 599px) {
  /* For mobile phones: */
	body {
		min-width: 400px;
	}
	.main-content {
		width: 100%;
		padding-bottom: 1em;
	}
	.content-area-top {
		
	}
	.logged-in-wrapper {
		width: 100%;
		padding-right: 0em;
		padding-bottom: 2em;
		border-bottom: 1px solid #ccc;
	}	
	.login-fields {
		width: 100%;
		padding: 1em 1em 1em 1em;
		border-bottom: 1px solid #ccc;
	}
	.login-fields input[type=text], 
	.login-fields input[type=password]{
		width: 100%;
	}	
	.login-description-info {
		padding: 1em 0em 0em 2em;
	}
	.logged-in-apps {
		display: flex;
		width:100%;
	}
	.logged-in-apps-container1 {
		flex: 1;
		padding: 3px;
		margin: 10px 15px 15px 0px;
	}

	.logged-in-apps-container2 {
		flex:1;
		padding: 1px;
		margin: 10px 15px 15px 0px;
	}  
}