@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700&display=swap');
@font-face {font-family: 'Material Symbols Rounded';font-style: normal;font-weight: 400;font-display: block;src: url('../fonts/MaterialSymbolsRounded.woff2') format('woff2');}
body{background-color:#1796E3;padding:0;margin:0}
img{border:none !important}
.photo-original,.photo-mhp,.photo-small,.photo-dg-big,.photo-dg-small,.photo-dg-xsmall,.loading{border:none;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23AFBDC9'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") center/46% no-repeat,#EDF1F5;border-radius:5px}
.photo-mhp{width:147px;height:177px}
.photo-small{width:98px;height:118px}
.userphoto{float:left;width:135px}
.userdata{float:right;width:340px;padding-left:10px}
h1{color:#fff;font-size:24px;line-height:32px;text-align:center;font-weight:300}
h2{color:#fff;font-size:16px;line-height:20px;font-weight:300}
.small{color:#fff;font-size:12px;line-height:32px;text-align:center;font-weight:300}
.input-medium{width:272px !important}
.btn,.btn:active,.btn:hover{border:none;height:34px;background-color:#1796E3 !important}
.page-login{top:50%;left:50%;position:absolute;margin-top:-140px;margin-left:-260px}
.page-login .page-logo{margin-bottom:15px;font-weight:300;color:#fff;font-size:36px;line-height:40px}
.page-login .page-body{width:500px;padding:10px;background:url(../../imgs/1448/bg-white-lock.png) repeat;border-radius:4px !important}
.page-login .page-body:after,.page-login .page-body:before{display:table;content:"";line-height:0}
.page-login .page-body:after{clear:both}
.page-login .page-footer-custom{margin-top:5px;text-align:center !important;font-size:14px;color:#eaeaea}
.page-login .page-footer-custom a{color:#eaeaea !important}
.page-login img.page-login-img{float:left;width:200px;height:auto;border-radius:4px !important;margin-top:5px}
.page-login .page-login-info{padding-left:10px;float:right;width:280px}
.page-login-recaptcha{padding-left:100px;float:left;margin:5px}
.page-login .page-login-info h1{margin-top:-5px;font-weight:300;color:#fff;font-size:28px;line-height:32px;margin-bottom:5px;text-align:center}
.page-login .page-login-info h2{margin-top:-5px;font-weight:300;color:#fff;font-size:14px;line-height:30px;margin-bottom:5px}
.h1,.page-login .page-login-info .email{color:#eee;display:block;font-size:14px;line-height:14px;margin-bottom:10px}
.page-login .page-login-info .locked{color:#333;font-size:14px;line-height:14px;font-style:normal}
.page-login .page-login-info form{margin:10px 0}
.page-login .page-login-info input{background:#fff}
.page-login .relogin{margin-top:10px;color:#e1e1e1}
.page-login .relogin a{color:#e1e1e1}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;margin:0}
@media (max-width:768px){
    .page-login .page-logo{font-size:21px}
    .page-login{top:0px;width:342px;margin-top:20px;margin-left:-172px}
    .page-login .page-body{padding:10px;text-align:center;width:100%}
    .page-login img.page-login-img{float:none !important;display:block;margin:0 auto;text-align:center;margin-bottom:15px}
    .page-login .page-login-info{float:none !important;width:300px;margin:0 auto}
    .userphoto{float:none;margin-left:auto;margin-right:auto}
    .userdata{width:100%}
    .page-login-recaptcha{padding-left:5px}
}
.checkbox{display:inline-block;white-space:pre-line;margin:0px !important;padding:0px !important;vertical-align:middle;min-width:100px}
.its-checkbox{position:relative;display:inline-block;white-space:pre-wrap;vertical-align:middle;padding:5px}
.its-checkbox:after{content:"\e835";font-family:'Material Symbols Rounded';font-size:26px;color:#62A8D1;vertical-align:middle}
.its-checkbox.selected:after{content:"\f14a";color:#2b7dbc}
.its-checkbox:hover:after{color:#62A8D1}
.its-checkbox input[type="checkbox"]{margin-left:5px;margin-top:12px;position:absolute;cursor:pointer;outline:none;opacity:0;z-index:2}
#purr-container{position:fixed;top:20%;right:0px;z-index:1072}
.notice{position:relative;width:453px;min-height:100px;background-color:#444343;border-radius:5px;transition:all 1s;margin:10px}
.notice:hover{background:#000}
.notice .icon{float:left;font-size:75px;padding:1px 10px 1px 5px}
.notice .close{position:absolute;top:2px;right:2px;display:inline-block;color:#fff}
.notice .close:after{content:"\e5cd";font-family:'Material Symbols Rounded';font-size:18px;vertical-align:middle;cursor:pointer}
.notice .close:hover{color:#e90f14;padding:0px;border-radius:10px;text-shadow:none}
.notice-body{min-height:50px;padding:10px 10px 20px 10px;color:#f9f9f9}
.notice h3{margin:0;font-size:24px;color:#fff;text-align:left;border:none;font-family:'Source Sans Pro',sansita;font-style:normal}
.notice p{margin:0px}
.notice .info{color:#FFFF00}
.notice .done{color:#0fe91e}
.notice .error{color:#e90f14}
@media (max-width:320px){.notice{width:300px}}
@media (min-width:321px) and (max-width:480px){.notice{width:350px}}
:root {
    --its-ink: #16232F;
    --its-ink-3: #8496A5;
    --its-surface: #FFFFFF;
    --its-line: #E3E9EF;
    --its-line-soft: #EDF1F5;
    --its-brand: #1C6E8C;
    --its-ok: #1E7A63;
    --its-danger: #B42318;
    --its-radius: 8px;
    --its-radius-sm: 6px;
    --its-toast-info: #E0A800;
}

html { -webkit-text-size-adjust: 100%; }
:focus-visible { outline: 2px solid #7EC6E0; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body { background-color: #123B4D !important; background-image: linear-gradient(160deg, #1B5C77 0%, #123B4D 46%, #0E2E3E 100%); background-attachment: fixed; }
.page-login .page-logo {
    color: #fff;
    font-family: 'Marcellus', 'Alice', Georgia, serif;
    font-weight: 400;
    letter-spacing: .02em;
    text-align: center;
    width: 100%;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.page-login .page-body {
    background: rgba(10, 30, 40, .55) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 20px 50px rgba(4,16,24,.45);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.page-login img.page-login-img { border-radius: 12px !important; box-shadow: 0 6px 18px rgba(4,16,24,.35); }
.page-login .page-login-info h1 {
    font-family: 'Marcellus', 'Alice', Georgia, serif;
    font-weight: 400;
    letter-spacing: .03em;
}
.page-login .page-login-info h2 { color: rgba(255,255,255,.78); font-weight: 300; letter-spacing: .01em; }
.page-login .hr-dotted { border-color: rgba(255,255,255,.16); }
.page-login .form-control, .page-login input {
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: var(--its-radius-sm) !important;
    color: var(--its-ink) !important;
    transition: box-shadow .14s ease, border-color .14s ease;
}
.page-login .form-control:focus, .page-login input:focus { box-shadow: 0 0 0 3px rgba(120,200,230,.35) !important; border-color: #7EC6E0 !important; }
.page-login .btn, .page-login .btn:active { background-color: var(--its-brand) !important; border-radius: var(--its-radius-sm) !important; font-weight: 400; letter-spacing: .04em; transition: background-color .14s ease; }
.page-login .btn:hover { background-color: #2589AC !important; }
.page-login .btn, .page-login .btn.blue, .page-login button.btn { font-weight: 400 !important; letter-spacing: .04em; }
.page-login .page-footer-custom, .page-login .page-footer-custom a { color: rgba(255,255,255,.72) !important; }
.notice { border-radius: 8px !important; box-shadow: 0 8px 28px rgba(4,16,24,.35); }

@media (max-width: 991px) {
    input[type="text"], input[type="password"], input[type="number"],
    input[type="email"], input[type="tel"], input:not([type]),
    textarea, select, .form-control {
        font-size: 16px !important;
    }
}

/* toast (same engine as the app shell) */
.its-toast-wrap { position: fixed; top: 92px; right: 18px; z-index: 99999; display: flex; flex-direction: column; gap: 12px; pointer-events: none; max-width: min(410px, calc(100vw - 36px)); }
.its-toast { --tc: var(--its-toast-info); --tt: #FFF6E0;
    pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: 12px; overflow: hidden;
    background: var(--its-surface); color: var(--its-ink); border: 1px solid var(--its-line); border-left: 5px solid var(--tc);
    border-radius: var(--its-radius); padding: 14px 36px 15px 14px;
    box-shadow: 0 14px 34px rgba(16,32,48,.22), 0 3px 8px rgba(16,32,48,.12);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 16%, transparent), 0 14px 34px rgba(16,32,48,.22), 0 3px 8px rgba(16,32,48,.12);
    animation: itsToastIn .28s cubic-bezier(.18,.89,.32,1.28) both, itsToastGlow 1.6s ease-out .28s 2; }
.its-toast-out { animation: itsToastOut .2s ease-in forwards; }
@keyframes itsToastIn { from { opacity: 0; transform: translateX(26px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes itsToastOut { to { opacity: 0; transform: translateX(20px) scale(.97); } }
@keyframes itsToastGlow {
    0% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 16%, transparent), 0 14px 34px rgba(16,32,48,.22), 0 3px 8px rgba(16,32,48,.12); }
    45% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--tc) 8%, transparent), 0 14px 34px rgba(16,32,48,.22), 0 3px 8px rgba(16,32,48,.12); }
    100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 16%, transparent), 0 14px 34px rgba(16,32,48,.22), 0 3px 8px rgba(16,32,48,.12); }
}
.its-toast-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 26px; line-height: 1; color: var(--tc); background: var(--tt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 22%, transparent); }
.its-toast-body { min-width: 0; flex: 1 1 auto; padding-top: 3px; }
.its-toast-head { font-weight: 700; font-size: 15px; line-height: 21px; color: var(--tc); letter-spacing: .01em; }
.its-toast-head:empty { display: none; }
.its-toast-msg { font-size: 13.5px; line-height: 20px; color: var(--its-ink); word-wrap: break-word; }
.its-toast-msg:empty { display: none; }
.its-toast-x { position: absolute; top: 7px; right: 9px; background: none; border: 0; padding: 0 4px; line-height: 1;
    font-size: 20px; color: var(--its-ink-3); cursor: pointer; border-radius: 4px; }
.its-toast-x:hover { color: var(--its-ink); background: var(--its-line-soft); }
.its-toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left center;
    background: var(--tc); opacity: .65; animation-name: itsToastBar; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes itsToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.its-toast-info { --tc: var(--its-toast-info); --tt: #FFF6E0; }
.its-toast-done { --tc: var(--its-ok); --tt: #E7F4F0; }
.its-toast-error { --tc: var(--its-danger); --tt: #FDECEA; }
@media (max-width: 600px) { .its-toast-wrap { top: 76px; left: 12px; right: 12px; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .its-toast, .its-toast-out { animation: none; } .its-toast-bar { animation: none; opacity: .25; } }

/* --- Material Symbols is the project icon set; .material-icons stays as an alias so existing markup keeps working --- */
.material-icons, .material-symbols-rounded, .its-icon {
    font-family: 'Material Symbols Rounded', 'Material Icons';
    font-weight: normal; font-style: normal; line-height: 1;
    letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
    word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}
/* icons that replaced a Font Awesome glyph inside menus, boxes and toolbars */
.menu-icon.its-icon { font-size: 18px; width: 18px; text-align: center; }
.widget-title > .its-icon { font-size: 19px; margin-right: 4px; vertical-align: -4px; }
:where(.material-icons, .material-symbols-rounded, .its-icon) { font-size: 20px; }