/* Custom Branding - gridlogic */

:root {
/* Updated Brand Color: #05df72 */
--ct-color-host-accent: #05df72 !important;
--brand-green: #05df72;
--brand-green-hover: #04c966;
--brand-green-active: #03b35b;
--brand-white: #ffffff;
}

@keyframes flow {
0% { background-position: 0px 0px, 0px 0px, 40% 40%; }
50% { background-position: 0px 0px, 0px 0px, 60% 60%; }
100% { background-position: 0px 0px, 0px 0px, 40% 40%; }
}

body.login-pf {
background-color: #000 !important;
min-height: 100vh;
width: 100%;
margin: 0;
/* Brighter animated radial gradient centered on screen */
background-image:
linear-gradient(rgba(5, 223, 114, 0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(5, 223, 114, 0.15) 1px, transparent 1px),
radial-gradient(circle at center, rgba(5, 223, 114, 0.6) 0%, rgba(5, 223, 114, 0.2) 40%, #000 90%) !important;
background-size: 40px 40px, 40px 40px, 150% 150% !important;
background-repeat: repeat, repeat, no-repeat !important;
animation: flow 15s ease infinite;
}

#badge {
display: none;
width: 225px;
height: 80px;
position: absolute;
top: 20%;
left: 50%;
}

#brand {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24pt;
font-weight: bold;
text-transform: lowercase;
margin-bottom: 48px !important;
display: flex;
align-items: baseline;
}

#brand:before {
content: "gridlogic";
color: var(--brand-white);
}

#brand:after {
content: "_";
color: var(--brand-green);
}

#index-brand {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
display: flex;
align-items: baseline;
}

#index-brand:before {
content: "gridlogic";
color: var(--brand-white);
}

#index-brand:after {
content: ".";
color: var(--brand-green);
}

.login-pf .container {
position: absolute;
top: 0;
bottom: 0;
width: 25%;
min-width: 480px;
background: rgba(20, 20, 20, 0.95);
backdrop-filter: blur(15px);
color: #f4f4f4;
padding: 64px 32px 32px;
border-right: 1px solid rgba(5, 223, 114, 0.4);
box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
}

.login-pf .details {
position: absolute;
bottom: 0;
left: 0;
width: 25%;
color: #c6c6c6;
background-color: transparent;
}

.login-pf input[type="text"],
.login-pf input[type="password"] {
height: 40px;
padding: 0 16px;
line-height: 18px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
color: #f4f4f4;
border: 0;
border-bottom: solid 1px #525252;
background-color: #2a2a2a;
border-radius: 0;
}

.login-pf input[type="text"]:active,
.login-pf input[type="text"]:focus,
.login-pf input[type="password"]:active,
.login-pf input[type="password"]:focus {
outline: 2px solid var(--brand-green);
outline-offset: -2px;
padding-bottom: inherit;
border-bottom-width: inherit;
border: inherit;
}

.login-pf input[type="text"]:hover,
.login-pf input[type="password"]:hover {
border-color: var(--brand-green);
}

#login-password-toggle {
background-color: #2a2a2a;
color: #c6c6c6;
border: 0;
border-bottom: solid 1px #525252;
}

#option-group:not([data-state="true"]) {
margin-bottom: 40px !important;
}

#server-group {
margin-bottom: 40px !important;
}

#show-other-login-options,
#option-caret polygon {
color: #c6c6c6;
fill: #c6c6c6;
}

#show-other-login-options:hover,
#option-caret:hover polygon{
color: var(--brand-green);
fill: var(--brand-green);
}

.login-button {
border-radius: 0;
height: 48px;
padding: 11px 63px 11px 15px;
background-color: var(--brand-green) !important;
color: #000 !important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
border: none;
transition: all 0.2s ease;
text-transform: uppercase;
letter-spacing: 1px;
}

.login-button:hover {
background-color: var(--brand-green-hover) !important;
box-shadow: 0 0 15px rgba(5, 223, 114, 0.4);
}

.login-button:active {
background-color: var(--brand-green-active) !important;
}

.login-button:focus {
box-shadow: inset 0 0 0 2px #fff;
}

#login-button-text {
width: 100%;
text-align: left;
}

#error-group {
height: 48px;
border-top: 0;
border-left: 3px solid #da1e28;
background-color: #f4f4f4;
}

#error-group svg {
margin: 15px 16px 0;
color: #da1e28;
}

#login-error-message {
height: 48px;
line-height: 48px;
margin: 0;
color: #161616;
}