/*
 *
 *  Custom CSS for Login Page for Project Passport
 *  Created by Patrick Mifsud on 17/9/18  
 *  Ver: 2.7
 *
 *  Design with Social Login  
 *  
 */
 

/* === CSS CONFIG OPTIONS === */

/* Color config, uses CSS variables */
:root {
	/* Login Button Background color */
	--signin-button-bg: #E60028 !important;
	--signin-button-text: #f0f0f0 !important;
	
	/* Tabs status banner Background color */
	--status-banner-bg: #fdf1af !important;
	--status-banner-text: #333333 !important;
}


/* 
 * Uncomment 'display: none !important;' to hide a UI element
 */
		/* To hide the Social Login Secion completely */
		#socialLogins {
		     display: none; !important 
		}
		
		/* To hide the password reset link completely */
		#passwordReset {
		    /* display: none; !important */
		}

/* === END OF CSS CONFIG OPTIONS === */


/* === CUSTOM FONTS === */
@font-face {
	font-family: "Museo300";
	src: url('../fonts/Museo300-Regular.otf');
	font-weight: normal;
}

@font-face {
	font-family: "Museo500";
	src: url('../fonts/Museo500-Regular.otf');
	font-weight: normal;
}

@font-face {
	font-family: "Museo700";
	src: url('../fonts/Museo700-Regular.otf');
	font-weight: normal;
}

/* === GLOBAL === */
html, body { 
    overflow-x: hidden 
}

html {
    font-family: Museo300, Museo500, Museo700, "Helvetica Nue" !important;
    background-color: #F5F4F5 !important;
}

body {
    font-family: Museo300, Museo500, Museo700, "Helvetica Nue" !important;
    max-width: 600px;
    min-width: 250px;  
	margin: 0 auto; 
}

a {
	color: #000053;
}

a:hover, .item-hover {
	color: #000053;
}

#contentArea {
    background: white;
    border-radius: 15px 15px 0px 0px;
    text-align: center;
    border: #E1E1E1 1px solid;
    margin-top: 3px;
    padding: 15px 0px;
}


/* === HEADER === */
/* Masthead CSS - Access Manager Header */
#masthead-namclient {
    margin-top: 5% !important;
    background: none !important; /* Hacky Hack Hack Alert: Background color override */
    margin-bottom: 10px;
}
    
#mastheadTitle {
    font-family: Museo500 !important;
    font-size: 30px;
}

#mastheadImage {
    padding-right: 15px;
    border-right: 1px solid #C5C5C5;
}

#multi-login-div {
    border-bottom: none !important;
}


/* Tab Bar - Diusplays success and error messags */
.tabs {
	font-family: Museo500;
	color: #333333;
	background: #fdf1af;
	border: #CDCDCD 1px solid !important;
	border-radius: 15px;
	margin: 0px;
	height: auto;
	width: auto;
}

/* Social login drop down menu */
.ham-menu {
    position: relative !important;
    top: unset !important;
    left: unset !important;
}

.ham-menu img {
	width: 232px;
}

#nam-ham-menu {
    top: unset !important;
    left: unset !important;
    position: relative !important;
    border-radius: 0px !important; 
}

#nam-login-tabs-div {
    position: relative;
    margin-left: 0px !important;
    border-left: none !important;
}

#nam-ham-menu .menu-option-mark a {
       	font-weight: 500 !important;
	font-size: 16px !important;
}

#nam-ham-menu .menu-option-mark a:hover {
	color: #ffffff !important;
}


/* === LOGIN FORM CARD === */
/* Card Display header - Name/Password - Form */
#currentCardDisplay {
    font-family: Museo700 !important;
    margin: 0 !important;
    background-color: #00014A !important;
    color: white;
    margin-top: 5px !important;
    padding: 1px 0px 10px 0px;
    font-size: 25px;
    border-radius: 15px 15px 0px 0px;
}

theNidpContent {
    margin: 5px auto;
    min-width: 200px;
    padding-top: 10px;
}

#theContentContent {
    padding: 0;
}

#globalMessage {
    text-align: center;
}

/* === INFO BANNER === */
#infoBanner {
    color: black;
    /*  background: #00AAFF; /* RMIT Azure */
    /*  background: #7AE1AA; /* RMIT Teal */
    background: #FC9147; /* RMIT Orange
    /*  background: #E60028; /* RMIT Red */
    /*  background: #FAC800; /* RMIT Yellow */
    text-align: center;
    line-height: 18px;
    padding: 2px 0px;
    border-radius: 15px;
    position: relative;
    clear: both;   
    margin-bottom: 5px;
    border: #BFE187 1px solid !important;
}

/* === LOGIN FORM === */
#IDPLogin {
    margin: 0 auto;
    width: 420px;
} 

#IDPLogin table {
    margin: 0 !important;
} 


#IDPLogin td {
    display: block;
    text-align: center;
}

.screen-reader-text { 
   border:0;   
   clip: rect(1px, 1px, 1px, 1px); 
   clip-path: inset(50%);
   height: 1px; 
   margin: -1px;
   width: 1px; 
   overflow: hidden; 
   position: absolute !important;
   word-wrap:normal !important;
}

label {
    display: block;
    text-align: left;
    color: #4c545d;
    font-size: 15px !important;
    padding-bottom: 5px;
}

.signin-div {
    margin-left: 0 !important;
}

#namepassword {
    margin: 0 !important;
}

input, .action-but {
    width: 400px !important;
    max-width: 500px !important;
    border-radius: 10px !important;
}

input {
    background: #F5F5F5 !important;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #747474 !important;
    opacity: 1; /* Firefox */
}

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

::-ms-input-placeholder { /* Microsoft Edge */
    color: #747474 !important;
}

.nam-signin-but {
	font-family: Museo700;
	background-color: #E60028 !important;
	color: #f0f0f0 !important;
	padding: 8px;
	border: none;
	margin: 0 !important;
}

.nam-signin-but:hover {
	color: var(--signin-button-text);
	background-color: #d80026 !important;
	border: none;
}

#passwordReset {
	background: #EBEBEB !important;
	margin: 5px 0px;
	text-align: center;
	border: #E1E1E1 1px solid !important;
	padding: 10px;
	font-size: 16px;
}

/* === SOCIAL LOGIN TEXT=== */
#socialloginmesg {
    position: relative;
    color: #5a5a5a; 
    text-align: center;
    font-size: 14px;
    padding-top: 5px;
    margin: 0;
}

/* === LOGIN TERMS AND CONDITIONS === */
#termsConditions{
	text-align: center;
}

/* === PASSWORD HELP AND SECURITY NOTICE === */
#infoNoticeBar {
    background: #EBEBEB !important;
    border: #E1E1E1 1px solid !important;
}

.col-container {
    display: table;
}

.col {
    display: table-cell;
    padding-left: 16px;
}

#accountHelp{
    border-right: 1px dotted lightgrey;
}

#infoNoticeBar li {
    padding: 2px 0px;
}

#infoNoticeBar a {
    display: inline !important;
}

/* ==== FEDERATION CONSENT FORM === */
#consentdeniedbutton, #consentobtainedbutton {
    width: 200px !important;
}

.fed-consent-container {
    margin-left: 0 !important;
    padding: 20px 0;
}

/* === FOOTER === */
#footer {
    background: #E1E1E1 !important;
    position: relative;
    color: #000054;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    margin: 5px 0px 15px 0px;
    clear: both;   
    padding: 1px; 
    border-radius: 0px 0px 15px 15px;
    border: #E1E1E1 1px solid !important;

}

/* === MOBILE === */
@media only screen and (max-width: 600px) {   
    body {
        max-width: 330px;
        min-width: 315px;  
    	margin: 0 auto; 
    }
    
    #banner {
        margin-top: 40px;
    }
    
    #mastheadImage {
        padding-left: 10px !important;
        width: 80px;
    }
    
    #mastheadTitle {
        font-size: 22px;
    }
    
    #theNipdContent {
        width: 300px !important;
    }
    
    #IDPLogin {
        width: 260px !important;
    } 
    
    input, .nam-signin-but {
        width: 240px !important
    }
    
    .col { 
        display: block;
        padding-left: unset !important;
    }
    
    #infoNoticeBar {
        width: inherit  !important;
    }
    
    #accountHelp{
        border-right: none;
        border-bottom: 1px dotted lightgrey;
    }
    
    #accountHelp h3 {
        text-align: center;
    }
    
    #securityNotice {
        text-align: center;
    }
   
    #passwordReset {
        min-width: 295px !important;
        max-width: 300px !important;
    }
}

@media only screen and (max-width: 400px) {
    body {
        max-width: 300px;
        min-width: 260px;  
    	margin: 0 auto; 
    }
    
    #theNipdContent {
        width: 300px !important;
    }
    
    #mastheadImage {
        width: 60px;
    }
    
    #passwordReset {
        min-width: 280px !important;
        max-width: 285px !important;
    }
}