@import url("https://rbb2cstorage.blob.core.windows.net/root/branding/lato.css");

		/* recordbase styling */
		html {
		    font-family: Lato, Helvetica, sans-serif;
		    --sand-color: #D4CFB8;
		    --recordbase-blue: #003845;
		    --recordbase-green: #6A8F3F;
		    --link-color: #428bca;
		    --link-hover-color: #2a6496;
		    --recordbase-blue-hover: #246d7d;
			--login-panel-link-color: #c6e6a1;
			--login-panel-link-hover-color: white;
		}

		.panel {
		    background-color: #6A8F3F !important;
		    border-radius: 1em;
		    color: white !important;
		}

		button {
		    box-shadow: 0 0 0px 0 #dae1f7 !important;
		    background-color: var(--recordbase-blue) !important;
		    color: white !important;
		    border-radius: 2.5em !important;
			min-height: 45px;
			font-size: inherit !important;
		}

		button:hover {
		    background-color: var(--recordbase-blue-hover) !important;
		}

		.wild-bamboo .logo {
		    width: 13rem;
		    filter: brightness(1);
		    transition: filter 120ms ease-in, -webkit-filter 120ms ease-in;
		}

		.footer {
		    display: flex;
		    justify-content: space-between;
		}

		.boilerplate {
		    align-self: end;
		    margin: 1em;
		}

		#show-terms {
		    display: none;
		}

		label[for='show-terms'] {
		    color: var(--link-color);
		    cursor: pointer;
		    text-decoration: underline;
		}

		label[for='show-terms']:hover {
		    color: var(--link-hover-color);
		}

		section.terms {
		    display: none;
		}

		#show-terms:checked+section.terms {
		    display: block;
		    position: fixed;
		    z-index: 10;
		    --margin: 2rem;
		    top: var(--margin);
		    right: var(--margin);
		    left: var(--margin);
		    bottom: var(--margin);
		    background: white;
		    border-radius: 1rem;
		    box-shadow: 0px 7px 13px 1px rgba(60, 58, 51, 0.32);
		    padding: 2rem;
		    overflow: auto;
		    line-height: 1.5;
		}

		@media screen and (min-width: 700px) {
		    #show-terms:checked+section.terms {
		        --max-width: 40rem;
		        --sides: calc((100vw - 600px) / 2);
		        right: var(--sides);
		        left: var(--sides);
		    }
		}

		#show-terms:checked+section.terms>.close {
		    position: absolute;
		    top: 1rem;
		    right: 2rem;
		}

		.logo {
			margin: 0 auto;
			max-height: 7rem;
			display: block;
		}
		main {                
    		display: grid;
			grid-template-areas: 
					"login" 
					" wildbamboo"
					"boilerplate"
				;                  
			grid-template-rows: auto max-content;
			grid-template-columns: auto max-content max-content;
			width: 100vw;
			min-height: 100vh;
		}
		@media screen and (min-width: 460px) {
			main { 
				height: 100vh;
				min-height: unset;                     
				
				grid-template-areas: 
					"login login" 
					"boilerplate wildbamboo"
					;   
				grid-template-rows: auto max-content;
			}
		}

		main > .login {
			grid-area: login;
			align-self: center;
			justify-self: center;
			width: 100%;
			z-index: 1;
			position: relative;
		}        

		@media screen and (min-width: 460px) {
			main > .login {
				width:unset;
				min-width: 30rem;
			}
		}


		main > .login > header > img {
			margin: 0 auto;
			max-height: 7rem;
			display: block;
		}

		main > .login > form {
			display: grid;
			grid-template-columns: max-content auto;
			align-items: baseline;
			justify-content: space-between;    

			padding: 2rem 4rem;
			background: var(--recordbase-green);
			border: 1px solid #648F3391;
			box-shadow: 0px 7px 13px 1px rgba(60, 58, 51, 0.25);
			color: white;
			font-weight: bold;
		}

		@media screen and (min-width: 460px) {
			main > .login  > form {
				border-radius: 1rem;
			}
		}

		main > .login > form > h1 {
			padding-left: 0.5rem;
			margin: 1rem 0 1rem 0;
		}


		main > .login > form > label {
			margin-top:1.5rem;
			margin-bottom: 0.5rem;
			padding: 0 0.5rem;
			grid-column-start: 1;
			grid-column-end: 3;
		}
		main > .login > form > button {
    grid-column-start: 1;
    grid-column-end: 3;

    margin-top: 2rem;
    border: none;
    border-radius: 2.5rem;
    padding: 0.5rem;
    justify-self: end;
    width: 50%;
    background-color: var(--recordbase-blue);
    color: white;
    font-weight: bold;
    transition: background-color 80ms linear;
}

main > .login > form > button:hover {
    background-color: var(--recordbase-blue-hover);
    cursor: pointer;
}

main > .boilerplate {
    grid-area: boilerplate;   
    margin: 1rem;       

    font-size: 0.9rem;
    justify-self: center;
}

main > .boilerplate > :first-child {
    margin-top: 0;
}

main > .boilerplate > :first-child {
    margin-bottom: 0;
}

main > .wild-bamboo {
    grid-area: wildbamboo;
    justify-self: center;
}

@media screen and (min-width: 460px) {
    main > .boilerplate {
        justify-self: start;
        align-self: end;
    }

    main > .wild-bamboo {
        justify-self: end;
    }
}

main > .wild-bamboo .logo {
    width: 13rem;
    filter: brightness(1);
    transition: filter 120ms ease-in, -webkit-filter 120ms ease-in;
}

main > .wild-bamboo .logo:hover {
    filter: brightness(0.5);
}

/* punch in overrides to B2C styles 
 * use of 'html > body' is to add additional specificity to allow this stylesheet to overrule the one 
 * jammed in by B2C, and without sprinkling 'important' everywhere 
 */

html > body .unified_container .row .panel-default #api .localAccount .error {
    color: #ff0 ;
}

html > body a {
	color: var(--login-panel-link-color) !important;
	text-decoration: underline;
}

html > body a:hover {
	color: var(--login-panel-link-hover-color) !important;
}

#forgotPassword {
	color: var(--login-panel-link-color) !important;
	text-decoration: underline;
}

#forgotPassword:hover {
	color: var(--login-panel-link-hover-color) !important;
}

html > body .buttons #cancel {
	position: unset;
	width: 60%;
	text-align: center;
}

html > body .buttons #cancel:before {
	display: none;
}

input {
	color: black;;
}