/* ==================================================
   PRN Self Service Password
   Microsoft 365 / SharePoint Online Theme
   ================================================== */

/* ---------- Base ---------- */

body {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    background: #f3f2f1 !important;
    color: #323130 !important;
    margin: 0;
    padding: 20px;
}

/* Hide background image and large centered logo */

#background_url,
.logo {
    display: none !important;
}

/* ---------- Layout ---------- */

.container {
    max-width: 900px !important;
}

.card {
    background: #ffffff !important;
    border: 1px solid #edebe9 !important;
    border-radius: 8px !important;
    box-shadow:
        0 1.6px 3.6px rgba(0,0,0,.13),
        0 0.3px 0.9px rgba(0,0,0,.11) !important;
}

.card-success {
    border: 1px solid #edebe9 !important;
}

.card-body {
    padding: 0 !important;
}


/* ---------- Header ---------- */

.navbar {
    background: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #edebe9 !important;
    box-shadow: none !important;
    min-height: 70px;
    padding: 10px 20px !important;
}

.navbar-brand {
    color: #323130 !important;
    font-size: 24px !important;
    font-weight: 600 !important;
}

.menu-logo {
    max-height: 28px !important;
    width: auto;
    vertical-align: middle;
}


/* ---------- Alerts ---------- */

.alert {
    border-radius: 8px !important;
    border: none !important;
    box-shadow: none !important;
    margin: 20px !important;
}

.alert-success {
    background: #dff6dd !important;
    color: #107c10 !important;
    border-left: 4px solid #107c10 !important;
}

.alert-warning {
    background: #fff4ce !important;
    color: #323130 !important;
    border-left: 4px solid #ffb900 !important;
}

.alert-info {
    background: #ffffff !important;
    color: #323130 !important;
    border-top: 1px solid #edebe9 !important;
    margin: 0 !important;
    padding: 30px !important;
}


/* ---------- Password Policy ---------- */

.ppolicy {
    background: #ffffff !important;
    border: 1px solid #edebe9 !important;
    border-radius: 8px !important;
    color: #323130 !important;
    margin: 20px !important;
    padding: 24px !important;
}

.ppolicy::before {
    content: "Password Requirements";
    display: block;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #323130;
}

.ppolicy ul {
    margin-top: 10px;
    margin-bottom: 0;
}

.ppolicy li {
    padding: 5px 0;
}


/* ---------- Form ---------- */

label,
.col-form-label {
    color: #323130 !important;
    font-weight: 600 !important;
}

.form-control {
    border: 1px solid #c8c6c4 !important;
    border-radius: 4px !important;
    height: 42px !important;
    box-shadow: none !important;
}

.form-control:focus {
    border-color: #0078d4 !important;
    box-shadow: 0 0 0 1px #0078d4 !important;
}

.input-group-text {
    background: #faf9f8 !important;
    border: 1px solid #c8c6c4 !important;
    color: #605e5c !important;
    min-width: 42px;
    justify-content: center;
}


/* ---------- Buttons ---------- */

.btn-success {
    background: #0078d4 !important;
    border-color: #0078d4 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 2px !important;
    min-width: 180px;
    padding: 8px 24px !important;
}

.btn-success:hover,
.btn-success:focus {
    background: #106ebe !important;
    border-color: #106ebe !important;
}


/* ---------- Icons ---------- */

.fa-check,
.fa-check-square,
.fa-check-square-o {
    color: #107c10;
}

.fa-exclamation-circle {
    color: #ffb900;
}


/* ---------- Spacing ---------- */

.row.mb-3 {
    margin-bottom: 18px !important;
}


/* ---------- Mobile ---------- */

@media (max-width: 768px) {

    body {
        padding: 10px;
    }

    .alert-info {
        padding: 20px !important;
    }

    .col-form-label {
        text-align: left !important;
    }

    .offset-sm-4 {
        margin-left: 0 !important;
    }

    .navbar-brand {
        font-size: 20px !important;
    }
}