/* Custom login styles */
:root {
	--darkpurple: #4d40b2;
    --lightpurple: #6c59ff;
    --lightpurple50: rgba(108,89,255,0.5);
    --hotpink: #ff5dff;
    --coral: #ff5e5e;
    --lightcoral: #FF9E9E;
    --lightblue: #00d8ff;
    --yellow: #fcba24;
    --green: #00deab;
    --lightgray: rgb(240,240,240);
    --offwhite: #f9f9f9;
    --white: #ffffff;
    --white75: rgba(255,255,255,0.75);
}
/* Change the background color */
body.login {
    background-color: var(--offwhite);
}
.login .message, .login .notice, .login .success {
	border-left: 4px solid var(--green);
}
#login {
	width: calc(100% - 3rem);
	max-width: 40rem;
}

input[type=checkbox]:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus {
	box-shadow: 0 0 0 1px var(--green);
}
.login-notice {
	font-size: 1.5rem;
	text-align: center;
}
/* Custom logo */
body.login h1 a {
    background-image: url('/assets/kidwind-logo.svg'); 
    background-size: contain;
    width: 100%;
    height: 80px;
}

/* Change the font and colors */
body.login form {
    font-family: 'Montserrat', montserrat, helvetica, arial, sans-serif;
    background-color: #fff;
    border: 1.5px solid var(--lightgray);
    padding: 2.25rem 1.5rem 1.5rem;
	    box-shadow: unset;
    border-radius: .667rem;
}

body.login form .input, 
body.login form input[type="text"], 
body.login form input[type="password"], 
body.login form input[type="checkbox"] {
    font-size: 1rem;
}

body.login form .button-primary {
    background-color: var(--darkpurple); 
    border-color: var(--darkpurple); 
    color: var(--offwhite);
    text-shadow: none;
}

body.login form .button-primary:hover {
    background-color: var(--darkpurple); 
    border-color: var(--white); 
}

.login #backtoblog a, .login #nav a {
    color: var(--darkpurple); 
}

.login #backtoblog a:hover, .login #nav a:hover {
    color: var(--darkpurple); 
}

p, body, html {
	font-family: 'Montserrat', montserrat, helvetica, arial, sans-serif;
	color: var(--darkpurple);
}
a {
	color: var(--darkpurple);
}