﻿/* Styles shared by Login & Logout pages only. */
.container-fluid {
    background-color: #ffffff; /* bg-white */
    display: flex; /* flex */
    flex-direction: column; /* flex-col */
    font-family: 'SemplicitaPro';
}

.error {
    color: #d9534f;
}

.warning {
    color: #f0ad4e;
}


/* 2025 Rebranding */
.accent-blue {
    border-bottom: 5px solid var(--bright-blue);
    width: 80%;
}

.content-shift {
    padding-left: 5rem; /* or 8rem, 10rem — whatever you need */
}

.new-login-header {
    color: #001391;
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.75rem; /* mb-3 */
    line-height: 1.25; /* leading-tight */
}

.new-reset-header h1 {
    color: #001391; /* text-[#001391] */
    font-size: 2.25rem; /* text-4xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 1.5rem; /* mb-6 */
    line-height: 1.25; /* leading-tight */
}

.new-login-desc {
    color: #4C5564;
    font-size: 0.875rem; /* text-sm */
    margin-bottom: 2rem; /* mb-8 */
    line-height: 1.625; /* leading-relaxed */
}

.new-login-text {
    color: #4C5564;
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    margin-bottom: 0.375rem; /* mb-1.5 */
}

.new-login-info {
    color: #6B7280;
    font-size: 0.75rem; /* text-xs */
    line-height: 1.625; /* leading-relaxed */
    margin-top: 1.5rem; /* mt-6 */
}

.new-login-link {
    font-size: 0.875rem; /* text-sm */
    color: #2965F6;
    font-weight: 500; /* font-medium */
    transition: color 150ms ease-in-out;
}

    .new-login-link:hover {
        color: #1A1F71;
        text-decoration: none; /* ensures no underline on hover */
    }

.new-help-links {
    display: flex; /* flex */
    align-items: center; /* items-center */
    gap: 0.75rem; /* gap-3 */
    color: #9CA3AF;
    margin-bottom: 20px;
    margin-top: 0px;
}

.dx-texteditor {
    width: 100%;
    padding-left: 0.5rem; /* px-3 */
    padding-right: 0.75rem;
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem;
    border: 1px solid #E6E8ED;
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 0.875rem; /* text-sm */
    color: #262728;
    height: 2.5rem !important; /* match your design */
}

    .dx-texteditor.dx-editor-outlined.dx-state-focused {
        border-color: #2965F6;
        box-shadow: 0 0 0 2px #2965F6;
    }

#UserName .dx-texteditor-input,
#emailAddress .dx-texteditor-input,
#Password .dx-texteditor-input {
    font-family: 'SemplicitaPro', sans-serif;
    font-size: 0.875rem; /* text-sm */
}

#Password .dx-icon-eyeopen,
#Password .dx-icon-eyeclose {
    color: #8A919B; /* your desired color */
}

#Password .dx-button:hover .dx-icon-eyeopen,
#Password .dx-button:hover .dx-icon-eyeclose {
    color: #4C5564;
}

#Password .dx-button {
    cursor: default !important;
    outline: none !important;
    box-shadow: none !important;
    margin-right: .5rem !important; /* adjust this value */
}

.dx-placeholder {
    font-family: 'SemplicitaPro', sans-serif;
    color: #8A919B;
}

[label=Password] .dx-button[aria-label=eyeopen] {
    margin-right: 10px;
}

.hero-image > img {
    width: 100%; /* w-full */
    max-width: 500px; /* max-w-[500px] */
}

.footer-bottom {
    padding-top: 0px;
    background-color: var(--cogency-blue);
}

#MfaCode .dx-placeholder {
    width: 100%;
}

    #MfaCode .dx-placeholder:before {
        text-align: center;
        width: 100%;
    }

.navbar {
    background-color: #ffffff;
}

.navbar-nav .nav-link.show,
.dropdown-toggle::after,
.icon-menubar .icon-link,
.icon-menubar .nav-link:hover,
.nav-link,
.nav-link:hover {
    color: var(--cogency-blue);
}

.navbar-toggler-icon > .line {
    background: var(--cogency-blue);
}

.navbar-nav > .nav-item > a.nav-link:hover {
    color: var(--cogency-blue);
    text-decoration: underline;
    text-decoration-color: var(--cogency-blue);
}

.page-header {
    border: none;
}

.new-login-button {
    width: 100%;
    padding: 0.5rem 1.5rem; /* py-2 px-6 */
    background: #0066FF;
    color: #ffffff;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    border-radius: 0.5rem; /* rounded-lg */
    margin-top: 1rem; /* mt-4 */
    transition: background-color 150ms ease-in-out; /* transition-colors */
    border: none;
}

    .new-login-button:hover {
        background-color: #001391;
    }

    .new-login-button:focus {
        background-color: #001391;
        outline: none;
    }

.loginButtonHolder {
    width: 100%;
}

.login-field {
    margin-bottom: 20px;
    margin-top: 0px;
}

.new-reset-button {
    padding-left: 2rem; /* px-8 */
    padding-right: 2rem;
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem;
    background-color: #0066FF;
    color: #ffffff;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 150ms ease-in-out; /* transition-colors */
    border: none;
}

    .new-reset-button:hover {
        background-color: #001391;
    }

.new-cancel-button {
    padding-left: 2rem; /* px-8 */
    padding-right: 2rem;
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem;
    background-color: white; /* bg-white */
    border: 1px solid #D2D5DB; /* border + border-[#D2D5DB] */

    color: #262728; /* text-[#262728] */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */

    border-radius: 0.5rem; /* rounded-lg */

    transition: background-color 150ms ease-in-out; /* transition-colors */
}

    .new-cancel-button:hover {
        background-color: #F9FAFB; /* hover:bg-[#F9FAFB] */
    }

.container.header-container {
    border-bottom: 1px solid var(--cogency-blue);
}

@media (max-width: 768px) {

    .navbar-collapse.collapsing,
    .navbar-collapse.collapse.show {
        background-color: #ffffff;
    }
}

@media (min-width: 1200px) {
    .header-advanced-utility-navigation-item-label {
        color: var(--cogency-blue);
        font-weight: 500;
    }
}
