/* style.css */

/* Global font style */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
html *
{
    font-family: 'Montserrat', sans-serif;
}

/* Form Control Override */
.form-control
{
    width: 270px !important;
}

/* Company logo pinned top-left */
.logo {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 300px;
    height: 84px;
    object-fit: contain;
    z-index: 1000;
}

/* Navbar Gradient Background */
.grad 
{
    background-color: #343C5A; /* Just in case browser doesn't support gradients */
    background-image: linear-gradient(135deg, #343C5A, #2AB8C3);
}

/* Primary button styling overwrite */
.btn-pPrimary {
    background-color: #2AB8C3 !important;
    border-color: #2AB8C3 !important;
    color: #ffffff !important;
}

/* Centered container for main content */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

/* Simple Loading Animation */
#loading-screen 
{
    text-align: center;
    padding: 40px;
}

/* Spinner styles  TODO: Change to 'Propensio' Loading animation when made.*/
.spinner
{
    width: 40px;
    height: 40px;
    border: 4px solid #2AB8C3;
    border-radius: 50%;
    border-top: 4px solid #ffffff;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px auto;
}

@keyframes spin 
{
    to { transform: rotate(360deg); }
}

/* Error and Success Message Styles */
#error-message 
{
    display: none;
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    color: red;
    font-weight: bold;
    margin-bottom: 10px;
    background-color: #F8D7DA;
    border-color: #F5C2C7;
}

#success-message 
{
    color: limegreen;
    font-weight: bold;
    margin-bottom: 10px;
}