/**
 * Office Login Page Styles
 * Fresh PHP/HTML implementation - dark theme
 */

:root {
    --bs-primary-rgb: 0, 80, 116;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-gutter-x: 20px;
}

*,
::before,
::after {
    box-sizing: border-box;
}

html, body {
    color: #333;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    margin: 0;
    position: relative;
}

body {
    font-weight: 400;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

body ::-webkit-scrollbar-thumb {
    background: silver;
    border-radius: 5px;
}

body :hover::-webkit-scrollbar-thumb {
    background: #b4b4b4;
}

@media (width >= 1920px) {
    body {
        background-color: #f4f4f4;
    }
}

h3, h5 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

h3 {
    font-size: calc(1.3rem + 0.6vw);
}

@media (width >= 1200px) {
    h3 {
        font-size: 1.75rem;
    }
}

h5 {
    font-size: 1.25rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.small, small {
    font-size: 0.875em;
}

a {
    color: #00628e;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    color: #00405d;
}

img {
    vertical-align: middle;
}

label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

button {
    border-radius: 0;
}

button:focus:not(:focus-visible) {
    outline: 0;
}

input, textarea, button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    outline: none;
}

button {
    text-transform: none;
}

button:not(:disabled),
[type="button"]:not(:disabled) {
    cursor: pointer;
}

/* Layout */
.theam_wrapper {
    flex-direction: column;
    height: 100vh;
    margin: 0;
    display: flex;
    position: relative;
    overflow: hidden;
}

@media (width >= 1920px) {
    .theam_wrapper {
        max-width: 1920px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        margin: 0 auto;
        position: relative;
    }
}

.mtpo-main-wrap {
    z-index: 1;
    background-size: cover;
    height: 100vh;
    position: relative;
}

.mtpo-main-wrap::before {
    content: "";
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100vh;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.login-box-wraper {
    z-index: 1;
    height: 100vh;
    overflow: auto;
}

.mtpo-main-wrap .login-box-wraper .mtpo-wrap {
    z-index: 1;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 75px);
    padding: 15px;
    display: flex;
    position: relative;
}

.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

@media (width <= 699.98px) {
    .container {
        max-width: 100%;
    }
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

@media (width <= 699.98px) {
    .mtpo-main-wrap .login-box-wraper .mtpo-wrap .flex-wrap {
        justify-content: center;
    }
}

/* Login Box */
.login-box-wrapper {
    background-color: #fff;
    border: 1px solid transparent;
    width: 360px;
    min-height: 445px;
    margin: 8px;
    padding: 15px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

@media (width >= 700px) and (width <= 1023.98px) {
    .login-box-wrapper {
        width: 320px;
    }
}

@media (width <= 699.98px) {
    .login-box-wrapper {
        width: 100%;
        max-width: 360px;
    }
}

/* Info Wrap */
.info-wrap {
    flex-direction: column;
    display: flex;
}

.info-box-wrap {
    width: 360px;
    height: auto;
    min-height: 50%;
    margin: 8px;
    padding: 15px;
}

@media (width >= 700px) and (width <= 1023.98px) {
    .info-box-wrap {
        width: 320px;
    }
}

@media (width <= 699.98px) {
    .info-box-wrap {
        width: 100%;
        max-width: 360px;
    }
}

.box-news {
    color: #fff;
    background-color: rgba(255, 140, 0, 0.6);
    width: 360px !important;
    min-width: 360px;
    max-width: 360px;
    height: 214.56px !important;
    min-height: 214.56px;
    max-height: 214.56px;
    overflow: auto;
}

.box-tips {
    background-color: rgba(255, 255, 255, 0.7);
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* News Scroll */
.login-news-scroll.mr-scroll-y {
    max-height: 150px;
}

.mr-scroll-y {
    overflow-x: hidden;
    overflow-y: auto;
}

.mr-scroll-y.mr-scroll::-webkit-scrollbar {
    background-color: transparent;
    width: 5px;
}

.mr-scroll-y.mr-scroll:hover::-webkit-scrollbar-thumb {
    background-color: #b4b4b4;
    border-radius: 10px;
}

/* Grid */
.row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 0;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    flex-wrap: wrap;
    display: flex;
}

.row > * {
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
    flex-shrink: 0;
}

.col {
    flex: 1 0;
    min-width: 0;
    max-width: 100%;
}

.col-20 {
    flex: none;
    width: 83.3333%;
    position: relative;
}

@media (width >= 1024px) {
    .col-md-22 {
        flex: none;
        width: 91.6667%;
        position: relative;
    }
}

/* Navbar */
.navbar {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    position: relative;
}

.navbar-collapse {
    flex-grow: 1;
    flex-basis: 100%;
    align-items: center;
    display: flex;
}

.navbar-brand {
    white-space: nowrap;
    margin-right: 1rem;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    font-size: 1.25rem;
    width: 120px;
    height: auto;
    position: absolute;
    top: 20px;
    left: 20px;
}

.navbar-nav {
    flex-direction: row;
    margin-bottom: 0;
    padding-left: 0;
    padding-top: 0.5rem;
    list-style: none;
    display: flex;
    margin-left: auto;
}

.nav-link {
    color: rgba(var(--bs-primary-rgb), 1);
    padding: 0.5rem 1rem;
    text-decoration: none;
    display: block;
}

.nav-link:hover,
.nav-link:focus {
    color: #00405d;
}

.navbar-light .navbar-nav .nav-link {
    color: #fff;
}

.nav-link.active {
    color: #fff;
}

.link-hover {
    position: relative;
}

.link-hover::before {
    content: "";
    visibility: hidden;
    background-color: #fff;
    width: 100%;
    height: 1px;
    transition: all 0.3s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
}

.link-hover:hover::before {
    visibility: visible;
    transform: scaleX(1);
}

@media (width <= 699.98px) {
    .navbar {
        padding-right: 1rem;
    }

    .navbar-collapse {
        flex-direction: column;
        justify-content: center;
        display: flex;
    }

    .navbar-brand {
        position: relative;
        top: 0;
        left: 0;
    }

    .navbar-nav {
        text-align: center;
        width: 100%;
        display: inline-block;
    }

    .nav-link {
        padding-right: 0.5rem;
        font-size: 12px;
        display: inline-block;
    }
}

@media (width >= 700px) and (width <= 1023.98px) {
    .navbar {
        padding-right: 1rem;
    }

    .navbar-brand {
        position: relative;
        top: 0;
        left: 0;
    }

    .navbar-nav {
        flex-direction: row;
        justify-content: center;
        width: 100%;
    }
}

.sr-only {
    clip: rect(0, 0, 0, 0);
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
}

/* Form */
.form-group {
    margin-bottom: 14px;
}

.form-group label {
    font-weight: 600;
}

.form-control {
    color: #333;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    width: 100%;
    height: 45px;
    min-height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    display: block;
    box-shadow: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    color: #333;
    background-color: #fff;
    border-color: #80a8ba;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(0, 80, 116, 0.25);
}

.form-control::placeholder {
    color: #6c757d;
    opacity: 1;
}

.form-control-lg {
    border-radius: 0.3rem;
}

.position-relative {
    position: relative;
}

.show-password {
    text-align: center;
    width: 30px;
    height: 45px;
    line-height: 45px;
    position: absolute;
    top: 0;
    right: 5px;
    cursor: pointer;
}

.show-password i {
    color: rgba(0, 0, 0, 0.5);
}

/* Custom Checkbox */
.mtpo-custom-checkbox {
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.mtpo-custom-checkbox .mtpo-checkbox {
    float: left;
    background: transparent;
    border: 1px solid #afe4fb;
    border-radius: 0;
    width: 18px;
    height: 18px;
    margin-top: 0.1rem;
    padding: 8px;
    display: block;
    position: relative;
    left: 0;
    box-shadow: inset 0 -1px 50px #f3fbff;
}

.mtpo-custom-checkbox .mtpo-checkbox:focus {
    outline: none;
}

.mtpo-custom-checkbox label {
    margin: 0;
    padding-left: 10px;
    display: inline-block;
}

/* Buttons */
.btn {
    color: #000;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    display: inline-block;
}

.btn:hover {
    color: #000;
}

.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(0, 80, 116, 0.25);
}

.btn:disabled {
    pointer-events: none;
    opacity: 0.65;
}

.btn-primary {
    color: #fff;
    background-color: #005074;
    border-color: #005074;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background-color: #004463;
    border-color: #00405d;
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(38, 106, 137, 0.5);
}

/* Greyed submit button – disabled while waiting for redirect from panel */
.btn-waiting,
.btn-waiting:hover,
.btn-waiting:focus {
    background-color: #999 !important;
    border-color: #999 !important;
    color: #fff !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.9;
}

.btn-orange {
    color: #fff;
    background-color: #f8981d;
    border-color: #f8981d;
}

.btn-orange:hover,
.btn-orange:focus,
.btn-orange:active {
    background-color: #f48c08;
}

.btn-link {
    color: #005074;
    font-weight: 400;
    text-decoration: none;
}

.btn-link:hover {
    color: #00405d;
}

.btn-lg {
    border-radius: 0.3rem;
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
}

/* Utilities */
.text-primary {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity));
}

.text-black {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-black-rgb), var(--bs-text-opacity));
}

.text-white {
    color: #fff;
}

.text-danger {
    color: #dc3545;
}

.text-success {
    color: #198754;
}

.text-center {
    text-align: center;
}

.text-start {
    text-align: left;
}

.fw-bold {
    font-weight: 700;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

.d-block {
    display: block;
}

.float-start {
    float: left;
}

.float-end {
    float: right;
}

.w-100 {
    width: 100%;
}

.p-0 {
    padding: 0;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pe-5 {
    padding-right: 3rem;
}

.ps-2 {
    padding-left: 0.5rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

.me-2 {
    margin-right: 0.5rem;
}

.ms-auto {
    margin-left: auto;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.small-text {
    color: #8d9096;
    font-size: 10px;
}

.pointer {
    cursor: pointer;
}

.card-link {
    color: #005074;
}

.card-link:hover {
    color: #00405d;
}

/* MFA / term page */
.mfa-title .d-block {
    line-height: 1.2;
}

.mfa-title .d-block:first-child {
    margin-bottom: 0.15em;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.col-xs-24,
.col-sm-24,
.col-md-24 {
    flex: none;
    width: 100%;
    position: relative;
}

.login-box-wrapper .mfa-code-input,
.login-box-wrapper .mfa-code-input:focus,
.login-box-wrapper .mfa-code-input:hover {
    border: 1px solid #ef9a9a !important;
    box-shadow: inset 0 -1px 70px -31px rgba(239, 154, 154, 0.4) !important;
}

.login-box-wrapper .mfa-code-input:focus {
    border-color: #ef9a9a !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.15), inset 0 -1px 70px -31px rgba(239, 154, 154, 0.4) !important;
}

/* Minimal inline SVG icons (no webfonts) */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: -0.1em;
}
.icon-eye {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 4.5C7 4.5 2.7 7.6 1 12c1.7 4.4 6 7.5 11 7.5s9.3-3.1 11-7.5c-1.7-4.4-6-7.5-11-7.5zm0 12c-2.5 0-4.5-2-4.5-4.5S9.5 7.5 12 7.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5z'/%3E%3C/svg%3E");
}
.icon-eye-slash {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3.3 2.3L21.7 21.7l-1.4 1.4-3.5-3.5C14.5 21.3 13.3 21.5 12 21.5c-5 0-9.3-3.1-11-7.5.9-2.3 2.4-4.4 4.2-6L2.3 3.7 3.3 2.3zM12 7.5c2.5 0 4.5 2 4.5 4.5 0 .6-.1 1.2-.3 1.7L15.4 12c.1-.5.1-1 .1-1.5C15.5 9 13.5 7 12 7c-.5 0-1 .1-1.5.3L9.8 7.2c.5-.2 1.1-.3 1.7-.3h.5zM1 12c1.7 4.4 6 7.5 11 7.5 1.2 0 2.4-.2 3.5-.5l-1.6-1.6c-.5.1-1 .2-1.5.2-2.5 0-4.5-2-4.5-4.5 0-.5.1-1 .2-1.5L4.2 6.2C2.4 8.1 1.2 10 1 12z'/%3E%3C/svg%3E");
}
.icon-caret-right {
    width: 0.5em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512' fill='%23005074'%3E%3Cpath d='M0 384.7V127.3c0-17.8 21.5-26.7 34.1-14.1l128.7 128.7c9.4 9.4 9.4 24.6 0 33.9L34.1 398.9C21.5 411.5 0 402.5 0 384.7z'/%3E%3C/svg%3E");
}
.icon-arrow-right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23005074'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E");
}