.pic-logo {
    margin-right: 10px;
}

.login-logo {
    max-width: 445px;
}

.login.login-v1 .login-container .login-header {
    max-width: 445px;
}

.login.login-v1 .login-container .login-body .login-content {
    max-width: 445px;
}


/* light background for data value */
.form-control-plaintext {
    padding: 0.5rem; /* Add padding for consistency */
    background-color: #f9f9f9; /* Subtle gray background */
    border-radius: 4px; /* Slight rounding for softer UI */
    font-size: 1rem; /* Keep font size readable */
    color: #333; /* Text remains clear and readable */
}

/* typography */
label {
    /*font-size: 0.9rem;          !* Slightly smaller text size for labels *!*/
    color: #888; /* Lighter gray for less prominence */
    text-transform: uppercase; /* Turn labels into uppercase for clarity */
    /*letter-spacing: 1px;        !* Slight spacing for modern style *!*/
}


.badge {
    font-size: 0.8rem;
}

h3.page-header2 {
    margin: 0 0 15px;
}

.alert {
    height: 20px;
    display: flex;
    align-items: center;     /* vertically center content */
    justify-content: center; /* horizontally center */
}

.panel.panel-inverse>.panel-heading {
    background: var(--bs-gray-900);
    color: var(--bs-white);
    height: 35px;
}

td.default-block {
    padding: 5px 20px 5px 5px !important;
    font-weight: bold;
}

.activeheroarea {
    border-bottom: 1px solid #ccc;
    background: #eee;
    margin-bottom: 15px;
}

a.right {
    float:right
}



.hero-content-area {
    /* For the row */
}

.hero-content-area.row {
    align-items: center;
}

.hero-content-area h1 {
    margin-bottom: 0;
}

.hero-content-area h2 {
    margin-bottom: 0;
}

.hero-content-left {
    display: flex;
    align-items: center;
}

.hero-content-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hero-content-right .btn {
    margin: 0;
}

.hero-content-right .btn + .btn {
    margin-left: 0.5rem;
}