* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(135deg, #e9f5f5 0%, #f8f9fa 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: #333;
}

a { color: #2b7a78; text-decoration: none; }
a:hover { color: #1a5856; text-decoration: underline; }

.account-wrapper {
    max-width: 440px;
    margin: 0 auto;
    padding: 40px 16px 30px;
}

.account-brand {
    text-align: center;
    margin-bottom: 24px;
}
.account-brand a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #2b7a78;
    text-decoration: none;
}
.account-brand a:hover { color: #1a5856; text-decoration: none; }
.account-logo {
    width: 120px;
    height: auto;
}

.account-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    border-top: 3px solid #2b7a78;
    padding: 28px 32px 24px;
}

.account-card .page-header {
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}
.account-card .page-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #2b7a78;
}

.account-card .form-group {
    margin-bottom: 14px;
}
.account-card .form-group label,
.account-card label {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    margin-bottom: 4px;
    display: block;
}

.account-card .form-control {
    border-radius: 6px;
    border: 1px solid #dee2e6;
    padding: 10px 14px;
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.account-card .form-control:focus {
    border-color: #2b7a78;
    box-shadow: 0 0 0 3px rgba(43,122,120,.12);
    outline: none;
}
.account-card .form-control.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220,53,69,.12);
}

.account-card .checkbox {
    margin: 10px 0 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.account-card .checkbox label {
    display: inline;
    margin-bottom: 0;
}

.account-card .btn-primary {
    background-color: #2b7a78;
    border-color: #2b7a78;
    border-radius: 6px;
    font-weight: 500;
    padding: 10px 20px;
    transition: background .15s;
}
.account-card .btn-primary:hover {
    background-color: #1a5856;
    border-color: #1a5856;
}

.account-card hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 16px 0;
}

.account-card .btn-wrapper {
    margin-top: 8px;
}

/* CreateUserWizard renders nested tables — make them full-width and borderless */
.account-card > table,
.account-card > table > tbody > tr > td {
    width: 100%;
    padding: 0;
    border: none;
}

.account-card .alert {
    border-radius: 6px;
    font-size: 13px;
}

#LoginRegister {
    margin-top: 16px;
    font-size: 13px;
    color: #777;
}

.account-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
}

.warning {
    padding: 12px 16px;
    margin: 14px 0;
    border: 1px solid #f1aeb5;
    border-radius: 6px;
    color: #842029;
    background-color: #f8d7da;
    font-size: 13px;
}
.warning a { color: #6a1a21; }

.success {
    padding: 12px 16px;
    margin: 14px 0;
    border: 1px solid #a3cfbb;
    border-radius: 6px;
    color: #0f5132;
    background-color: #d1e7dd;
    font-size: 13px;
}

.ltr-dir { direction: ltr; }

/*[ RTL ]*/
.rtl { font-family: Tahoma,arial,sans-serif; direction: rtl; }
.rtl .pull-right { float: left !important; }
.rtl .pull-left { float: right !important; }
.rtl .text-right { text-align: left !important; }
.rtl .text-left { text-align: left !important; }
.rtl .btn i, .rtl a i { margin-right: 0; margin-left: 4px; }
.rtl .radio input[type="radio"],
.rtl .radio-inline input[type="radio"],
.rtl .checkbox input[type="checkbox"],
.rtl .checkbox-inline input[type="checkbox"] { float: right; margin-left: 5px; }
.rtl table, .rtl .table .table-item-title { text-align: right; font-family: Tahoma; }

/*[header]*/
.rtl .page-header h2.page-title {
    font-family: 'B Mitra',arial;
}
/*[nav]*/
.rtl .nav {
    padding-right: 0;
}

.rtl .navbar-nav {
    float: right;
}

.rtl .navbar-nav > li,
.rtl .nav-pills > li {
    float: right;
}

.rtl .navbar-right {
    float: left !important;
}

.rtl .navbar-right .dropdown-menu {
    right: auto !important;
    left: 0 !important;
}

/*[.list-group]*/
.rtl .list-group {
    padding-right: 0;
}

.rtl .pagination {
    padding-right: 0;
}

.rtl .search-grid {
    margin-left: 0;
    margin-right: 5px;
}

.rtl .btn-group > .btn,
.rtl .btn-group-vertical > .btn {
    float: right;
}

.rtl .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.rtl .btn-group > .btn:last-child:not(:first-child),
.rtl .btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.rtl .btn-group .btn + .btn,
.rtl .btn-group .btn + .btn-group,
.rtl .btn-group .btn-group + .btn,
.rtl .btn-group .btn-group + .btn-group {
    margin-left: 0 !important;
    margin-right: -1px;
}

.rtl .page-header .btn-header {
    font-size: 13px;
    font-weight: bold;
}

.rtl .close {
    float: left !important;
}

.rtl .modal-footer {
    text-align: left;
}

/**/
.rtl .btn-toolbar .btn-group {
    float: right;
}

.rtl .btn-toolbar > .btn + .btn,
.rtl .btn-toolbar > .btn-group + .btn,
.rtl .btn-toolbar > .btn + .btn-group,
.rtl .btn-toolbar > .btn-group + .btn-group {
    margin-left: 0;
    margin-right: 4px !important;
}

@media screen and (max-width:360px) {
    body {
        background-color: #fff !important;
        padding-top: 20px;
    }

    .account.well {
        opacity: 1 !important;
        top: 0 !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none;
    }

    .account-header {
        opacity: 1 !important;
        top: 0;
        border-bottom: 1px solid #CCC;
        padding-bottom: 30px;
        width: 100% !important;
    }

    .logo {
        display: block;
        text-align: center;
    }

    .account-header a {
        float: none !important;
        text-align: center;
        display: block;
    }

    .page-header {
        border-bottom: none;
        background-color: #EEE;
        padding: 10px !important;
        border-radius: 4px;
    }
}