@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500&display=swap');

:root:root {
	--col-gray1: #EEF2F2;
	--col-gray2: #E0E7E7;
	--col-gray3: #C7D1D1;
	--col-gray4: #9BA8A8;
	--col-gray5: #818D8D;
	--col-gray6: #636969;
	--col-black: #313535;
}

body {
	font-family: 'Figtree', Helvetica, Arial, Lucida, sans-serif;
	background: var(--col-gray1);
	padding: 80px 0;
	font-size:14px;
	height:auto;
}
#login {
	width:80%;
	max-width:360px;
}
.login h1 {
	text-align: left;
}

.login h1 a {
	background-image: url(https://divistylistacademy.com/wp-content/uploads/2023/01/dsa-logo.svg);
	height: 50px;
	width: 200px;
	background-size: auto 100%;
	background-position-x: left;
	margin: 0 0 20px;
}

.login form {
	border-color: var(--col-black);
	position: relative;
	overflow: visible;
	padding: 40px 40px 100px;
	margin-top:50px;
}

.login form::after,
.login form::before {
	content: '';
	display: block;
	position: absolute;
	background: #fff;
	border: 1px var(--col-black) solid;
	transition: all .3s ease-in-out;
	opacity: 1;
	visibility: visible;
	background-image: linear-gradient(90deg, var(--col-black) 5%, transparent 5%, transparent 50%, var(--col-black) 50%, var(--col-black) 55%, transparent 55%, transparent 100%);
	background-size: 20.00px 20.00px;
	background-position-x: 7px;
}

.login form::after {
	width: 100%;
	height: 10px;
	border-bottom: 0;
	border-left: 0;
	left: 0;
	top: -12px;
	transform: skewX(45deg);
	transform-origin: bottom right;
}

.login form::before {
	width: 10px;
	height: 100%;
	transform-origin: top right;
	top: -1px;
	left: -12px;
	transform: skewY(45deg);
	border-right: 0;
	background-image: linear-gradient(0deg, var(--col-black) 5%, transparent 5%, transparent 50%, var(--col-black) 50%, var(--col-black) 55%, transparent 55%, transparent 100%);
	background-size: 20.00px 20.00px;
}


.login #backtoblog a,
.login #nav a, a {
	color:var(--col-black);
	text-underline-offset: 0.2em;
	text-decoration: underline;
	text-decoration-thickness: 0.05em;
	text-decoration-color: var(--col-gray3);
	transition: color .2s, text-underline-offset .2s, text-decoration-color .2s;
	font-size:16px;
}
a:active, a:focus {
	box-shadow:none;
}
.login #backtoblog a:hover,
.login #nav a:hover, a:hover {
	color:var(--col-black);
	text-underline-offset: 0.4em;
	text-decoration: underline;
	text-decoration-color: lightsalmon;
	text-decoration-thickness: 0.05em;
}



.login form .input, .login input[type=password], .login input[type=text] {
	
}
.login form .input, .login input[type="password"], .login input[type="text"] {
	color:var(--col-black);
	border-width: 2px;
	border-color: var(--col-gray2);
	font-size:16px;
	padding:.75em 1em;
}

.login form .input:focus, .login input[type="password"]:focus, .login input[type="text"]:focus {
	box-shadow:none;
	border-color:var(--col-black);
}
input[type="checkbox"]:focus {
	border-color:var(--col-black);
}
input[type="checkbox"]:checked::before { 
	filter:grayscale(1);
}
.wp-core-ui .button, .wp-core-ui .button-secondary {
	color:var(--col-gray3);
}
.login .button.wp-hide-pw:focus {
	border-color:var(--col-gray2);
	box-shadow:none;
	outline:none;
}
.wp-core-ui .button-secondary:hover, .wp-core-ui .button.hover, .wp-core-ui .button:hover {
	color:var(--col-black);
}
.login .button.wp-hide-pw {
	border:none;
	height:3rem;
}
.login input.password-input {
	font-family: 'Figtree', Helvetica, Arial, Lucida, sans-serif;
}
.wp-core-ui .button-primary {
	background:lightsalmon;
	color:#fff;
	border-color:lightsalmon;
	font-weight:500;
	z-index:5;
}
.wp-core-ui .button-group.button-large .button, .wp-core-ui .button.button-large {
	padding:0 16px;
	font-size:16px;
	line-height:2.5;
}
.wp-core-ui .button-primary.focus, .wp-core-ui .button-primary.hover, .wp-core-ui .button-primary:focus, .wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary.active, .wp-core-ui .button-primary.active:focus, .wp-core-ui .button-primary.active:hover, .wp-core-ui .button-primary:active {
	background-color:salmon;
	border-color:salmon;
	color:#fff;
	box-shadow:none;
}

.login #login_error, .login .message, .login .success {
	border:none;
	border-radius:5px;
	box-shadow: 0px 2.8px 2.2px rgba(0, 0, 0, 0.02), 0px 6.7px 5.3px rgba(0, 0, 0, 0.028), 0px 12.5px 10px rgba(0, 0, 0, 0.035), 0px 22.3px 17.9px rgba(0, 0, 0, 0.042), 0px 41.8px 33.4px rgba(0, 0, 0, 0.05), 0px 100px 80px rgba(0, 0, 0, 0.07);
}
button.button.wp-generate-pw {
	color: var(--col-black);
	border-width: 2px;
	box-shadow: none;
	border-color: lightsalmon;
	background: #fff;
	padding:0 16px;
	font-size:16px;
	line-height:2.5;
}
button.button.wp-generate-pw:hover {
	border-color: salmon;
	background: #fff;
}

body.login-action-rp #login {
	max-width:420px;
}

/* Browser styles reset */
input:-internal-autofill-selected {
	box-shadow: inset 0 100px #fff;
}