/* Toolbar: four visual color swatches. */
.marx-mark-toolbar .marx-toolbar-colors{display:flex;align-items:center;gap:6px;padding:0 8px 0 2px}
.marx-mark-toolbar .marx-color-btn{display:grid!important;place-items:center!important;width:34px!important;min-width:34px!important;height:34px!important;padding:4px!important;border-radius:9px!important}
.marx-mark-toolbar .marx-color-btn i{display:block!important;width:24px!important;height:24px!important;border:2px solid #ffffffd9!important;border-radius:7px!important;box-shadow:0 2px 7px #081a2b55!important}
.marx-mark-toolbar .marx-color-btn:hover i{transform:scale(1.12)!important}

/* Avatar is shown once, in the profile hero. */
.marx-profile-avatar-control{position:relative;display:block;flex:0 0 120px;width:120px;height:120px;margin:0!important;border-radius:50%;overflow:hidden;cursor:pointer}
.marx-profile-avatar-control img{display:block;width:120px!important;height:120px!important;object-fit:cover;border-radius:50%!important;border:4px solid #ffffff45!important}
.marx-profile-avatar-control span{position:absolute;inset:auto 4px 4px;display:grid;place-items:center;height:34px;border-radius:0 0 56px 56px;background:#10283dcc;color:#fff;font-size:12px;font-weight:800;opacity:0;transform:translateY(8px);transition:.2s}
.marx-profile-avatar-control:hover span,.marx-profile-avatar-control:focus-within span{opacity:1;transform:none}.marx-profile-avatar-control input{position:absolute;width:1px;height:1px;opacity:0}

/* Animated authentication panels and moving tab indicator. */
.marx-auth-tabs{position:relative;isolation:isolate;overflow:hidden}.marx-auth-tabs:before{content:"";position:absolute;z-index:-1;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:9px;background:#fff;box-shadow:0 3px 12px #16334b18;transition:transform .32s cubic-bezier(.22,.8,.25,1)}
.marx-auth-panel[data-tab="register"] .marx-auth-tabs:before{transform:translateX(100%)}
.marx-auth-panel[data-tab] .marx-auth-tabs button{background:transparent!important;box-shadow:none!important;transition:color .25s}
.marx-auth-stage .marx-auth-gateway{min-height:0!important;height:auto!important;transition:height .36s cubic-bezier(.22,.8,.25,1)!important}.marx-auth-stage .marx-auth-brand{min-height:620px!important}.marx-auth-panels{position:relative;display:grid;grid-template-areas:"panel";height:auto;min-height:0;transition:height .38s cubic-bezier(.22,.8,.25,1);overflow:hidden}.marx-auth-panels>[data-auth-panel]{grid-area:panel;display:block!important;width:100%!important;min-width:0!important;margin:0!important;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(28px);transition:opacity .24s ease,transform .34s cubic-bezier(.22,.8,.25,1),visibility 0s linear .34s}.marx-auth-panels>[data-auth-panel="login"]{transform:translateX(-28px)}
.marx-auth-panel[data-tab="login"] .marx-auth-panels>[data-auth-panel="login"],.marx-auth-panel[data-tab="register"] .marx-auth-panels>[data-auth-panel="register"]{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}.marx-auth-form{width:100%;margin:0!important}.marx-auth-form label{width:100%}.marx-auth-form .marx-auth-submit{display:flex!important;width:100%!important;max-width:none!important;margin:16px 0 0!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important}

/* Sidebar edge control. */
.marx-sidebar-toggle{top:96px!important;left:252px!important;width:36px!important;height:44px!important;border:1px solid #ffffff24!important;border-left:0!important;border-radius:0 14px 14px 0!important;background:linear-gradient(145deg,#2d5c79,#193c56)!important;color:#fff!important;box-shadow:6px 4px 18px #081d2d38!important}
.marx-sidebar-toggle .marx-toggle-icon{width:18px;height:18px;transition:transform .25s}.marx-sidebar-toggle:hover{background:linear-gradient(145deg,#397391,#24516c)!important}.marx-sidebar-toggle:active{transform:scale(.94)!important}
body.marx-sidebar-collapsed .marx-sidebar-toggle{top:96px!important;left:78px!important;transform:none!important}body.marx-sidebar-collapsed .marx-sidebar-toggle .marx-toggle-icon{transform:rotate(180deg)}body.marx-sidebar-collapsed .marx-sidebar-toggle:active{transform:scale(.94)!important}
@media(max-width:1000px) and (min-width:721px){.marx-sidebar-toggle{left:202px!important}body.marx-sidebar-collapsed .marx-sidebar-toggle{left:78px!important}}
@media(max-width:820px){.marx-auth-stage .marx-auth-brand{min-height:0!important}.marx-auth-panels{transition-duration:.32s}}@media(max-width:720px){.marx-sidebar-toggle{display:none!important}}