<script>
// Hide navbar to match designs 

if (!AJS.params.remoteUserKey.length) {
	$("#rw_theme_header").addClass("anon-hidden");
}
</script>

<style>
#rw_theme_header.anon-hidden {
	display: none !important;
}
</style>


<script>

$('#rw_logo_container a').waitUntilExists(i=>{
 $('#rw_logo_container a')[i].href = '/display/MSSCA/Login/'
});
</script>
<style>
#rw_theme_header {
	background: white !important;
}
#main-content{
	position: relative;
}
.bannerImg{
	position: absolute;
	top: -100px;
	width: 100%;
	height: 400px;
	object-fit: cover;
	z-index: -1;
}


input#loginButton{
	font-size: 16px!important;
}
</style>
<link rel="stylesheet" href="https://gsvlabs-confluence-files.s3.us-west-2.amazonaws.com/stylesheets/MS+SBA/login.css">
<script>


window.addEventListener("load", function(){
	$('#main-content').append(`<img src='https://dwmysgmxkr93k.cloudfront.net/images/MS+Strategy+Challenge/strategy_challenge_banner_long.png' class='bannerImg' />`)


  $('#login-issue-btns').append(`<p class="login-issue-btn"><a href="/display/MSSCA/Sign+Up">Don't have an account?</a></p>`);
  $('#login-issue-btns').append(`<p class="login-issue-btn"><a href="/display/MSSCA/Forgot+Password">Forgot Password?</a></p>`);
  $('#os_username-label').replaceWith(`<label id="os_username-label" for="os_username" class="fullSite">E-mail address</label>`);
  $('#os_username').replaceWith(`<input type="text" name="os_username" id="os_username" class="text fullSite" placeholder="example@email.com" data-focus="0">`);
  $('#os_password-label').replaceWith(`<label id="os_password-label" for="os_password" class="fullSite">Password</label>`);
  $('#os_password').replaceWith(`<input type="password" name="os_password" id="os_password" class="password fullSite" placeholder="Password"> </input>`);

}); 


/*
.rw_content {
    background: url(https://cdn.zeplin.io/616854d38df552be46f2b7ad/assets/49b1e703-a8e6-4a1c-b7d0-9a1bc623002a.png)!important;
    background-repeat: no-repeat!important;
    background-position-y: 100px!important;
	background-size: 100%!important;
}

*/
</script> 

<style>


.custom-section-container .learn-more-section a.external-link{
	background: #fff!important;
	border: 2px solid var(--tertiary-color)!important;
 	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1)!important;
}

body div.signContainer{
	margin: 150px auto!important;
}

div.formContainer{
	z-index: 100!important;
}


#error-message *{
	color: red!important;
}

.signContainer{
	flex-direction: row-reverse!important;
}
body .custom-section-container .conf-macro div.bigImageContainer{
	background: none!important;
	box-shadow: none!important;
	background-size: cover!important;
}
.learn-more-section{
	top: 300px!important;
	bottom: 0!important;
	background: none!important;
}

.learn-more-section *{
	color: #101010!important;
}

.rw_content, #rw_wrapper {
	background-color: #0A6F7A !important;
}

.learn-more-section a{
	color: #101010!important;
	border-color: #101010!important;
}




#loginform .welcome-message,
#loginform label, 
.custom-section-container .learn-more-section {
  font-family: var(--main-font-family);
}

#loginform .welcome-message {
  font-size: 25px;
}

#loginform label,
#loginButton,
.custom-section-container .learn-more-section,
p.login-issue-btn {
  font-size: 13px !important;

 }

#loginButton{
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1)!important;
}
  .learn-more-section a.external-link {
  font-weight: normal !important;
}

#os_username,
#os_password {
  font-size: 12px;
}

#loginform p.welcome-message {
  color: #0A6F7A !important;
  font-weight: normal;
  line-height: 1.39;
}

#loginform label#os_username-label,
#loginform label#os_password-label {
  width: auto;
  font-weight: normal;
}

.form-buttons #loginButton {
  background-color: #dfc057!important;
color: #101010!important;
  font-weight: normal;
}

.login-issue-btn {
  font-size: 16px;
}

.bigImageContainer .learn=more-section {
  left: 0;
  right: 20%;
}

.custom-section-container .conf-macro div.bigImageContainer {
  background-image: url('https://gsvlabs-confluence-files.s3.us-west-2.amazonaws.com/images/MSIA/field.png') !important; 
}

.learn-more-section {
  top: 45%;
  right: 27%;
  left: 0;
  font-size: 16px;
}

.custom-section-container .learn-more-section a.external-link {
  text-transform: capitalize !important;
}  



@media only screen and (max-width: 580px){
  #loginform > fieldset > div {
    padding: 0;
  }
}


   #loginform > fieldset > div {
    padding: 0;
  } 

</style>


<style>

.form-buttons #loginButton, .custom-section-container .learn-more-section a.external-link {
	color: #187ABA !important;
    border: 1px solid #187ABA !important;
    background: #187ABA33 !important;
}
.custom-section-container .learn-more-section a.external-link {
	background: #FFFFFF !important; 
} 
#login-container #forgot-pass-container a, #login-container #login-form-bottom a {
    color: #187ABA !important;
} 
.learn-more-section p {
    color: white !important;
} 

#login-container #os_username, #login-container #os_password {
    border: 1px solid #767676;
    border-radius: 4px;
    box-shadow: none;
    padding: 0px 15px;
}

.signContainer #loginform label {
    color: #767676 !important;
}
.field-group {
    margin-bottom: 10px !important;
} 

</style>




<div id="login-issue-btns"> </div>




<div class="login-header">
	<h1>Welcome to the 2024
<br/>Morgan Stanley Strategy Challenge</h1>
</div>


<div class="learn-more-section">
    <p>Now in its fifteenth year, the Strategy Challenge is Morgan Stanley’s annual signature pro bono initiative. Selected nonprofits based in the New York Metro area are matched with a team of select Morgan Stanley employees to address an important strategic question over the course of the ten-week program.</p>
    <a href="https://www.morganstanley.com/about-us/giving-back/strategy-challenge-nonprofit-program" style="font-weight:bold;">Learn More</a>
</div>




<script>
$("input#loginButton").val("Log In");
</script>


<script>

// Add Forgot Pass Section to UI 
$("#loginform .form-buttons").append(`<div id='forgot-pass-container'><p>Forgot your password?</p><p>Reset it <a href='/display/MSSCA/Forgot+Password'>here</a>.</p></div>`);
$("#login-container").append(`<div id='login-form-bottom'><p>Don't have an account yet? <a href='/display/MSSCA/Sign+Up'>Sign Up</a></p></div>`)

</script>


<style>
#login-issue-btns {
	display: none !important;
}
#loginform {
	min-height: 400px;
}
#loginform .form-buttons {
    margin-top: 30px;
}
#loginform p.welcome-message {
	margin-bottom: 30px;
}
#loginform .form-buttons {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.form-buttons #loginButton {
	width: 130px;
	height: 50px;
} 
#forgot-pass-container {
	display: flex;
    flex-direction: column;
    margin-left: auto;
    align-items: flex-end;
    justify-content: center;
}
#forgot-pass-container a {
    color: var(--primary-color) !important;
    font-weight: bold;
}
#forgot-pass-container > * {
    margin: 2px 0px;
}
#login-form-bottom {
	padding-bottom: 40px;
    margin-top: 40px;
}
#login-form-bottom a {
    color: var(--primary-color) !important;
    font-weight: bold;
    margin-left: 5px;
}
#loginform p.welcome-message {
    margin-top: 50px !important;
    font-size: 30px;
}
body div.signContainer {
	margin: 100px auto !important;
}
#loginButton, .custom-section-container .learn-more-section, p.login-issue-btn {
    font-size: 14px !important;
}  
#loginform label {
	font-size: 15px !important;
}

.login-header h1 {
    color: white !important;
    font-size: 26px !important;
    text-shadow: 0px 1px 5px black;
	padding: 25px;
}


@media only screen and (max-width: 750px){  
 	.login-header {
		display: none !important;
	}
}



</style>