@CHARSET "UTF-8";

body {
	background-position: center center;
	background-repeat: no-repeat;
}

/* M TOOLBAR */
.x-mtoolbar {
	z-index: 11;
	display: flex;
	align-items: center;
	gap: .75rem;
	border-radius: 24px;
	width: fit-content;
	height: 48px;
	padding: 4px;
	background-color: #e6e6e6;
}
.x-mtoolbar_item {
    position: relative;
    display: flex;
    align-items: center;
}
.x-mtoolbar_link {
    display: flex;
    align-items: center;
    min-width: fit-content;
    border-radius: 20px;
	padding: 8px 8px;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}
.x-mtoolbar_link:hover,
.x-mtoolbar_link:active,
.x-mtoolbar_item:hover .x-mtoolbar_link {
	background-color: white;
}
.x-mtoolbar_link_inner {
	display: flex;
    align-items: center;
}
.x-mtoolbar_item-icon {
	flex-shrink: 0;
    display: inline-flex;
    position: relative;
    margin-inline-end: 4px;
    pointer-events: none;
    vertical-align: middle;
}
.x-mtoolbar_item-text {
	white-space: nowrap;
	font-size: .875rem;
	color: #333;
}
.x-mtoolbar_item.circle {
	flex-shrink: 0;
    border-radius: 50%;
}
.x-mtoolbar_item.circle .x-mtoolbar_link {
    padding: 0;
}
.x-mtoolbar_dropdown {
	z-index: 10;
	position: absolute;
	top: 40px;
	display: none;
	min-width: fit-content;
}
.x-mtoolbar_dropdown.x-mtoolbar_dropdown--right {
	right: 0;
}
.x-mtoolbar_item:hover .x-mtoolbar_dropdown {
	display: block;
}
.x-mtoolbar_dropdown_inner {
	margin-top: 12px;
	border-radius: 12px;
	padding: 12px;
	background-color: white;
	box-shadow: 0px 0px 5px var(--c-grey-alpha-10);
}
.x-mtoolbar_menu {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.x-mtoolbar_menu_item {
	margin: 0;
	width: 100%;
	min-width: 120px;
}
.x-mtoolbar_menu_link {
    position: relative;
    display: flex;
    align-items: center;
    min-width: fit-content;
    min-height: 44px;
	border-radius: 8px;
	padding: 8px 4px;
    text-decoration: none;
    overflow: hidden;
    color: #333;
    cursor: pointer;
}
.x-mtoolbar_menu_link:hover,
.x-mtoolbar_menu_link:active {
	background-color: #f6f6f6;
}
.x-mtoolbar_menu_icon {
	flex-shrink: 0;
    display: inline-flex;
    position: relative;
    margin-inline-end: 8px;
    pointer-events: none;
    vertical-align: middle;
}
.x-mtoolbar_menu_text {
	font-size: .875rem;
	white-space: nowrap;
	color: #333;
}
.x-mtoolbar_separator {
    margin-bottom: 8px;
    margin-top: 8px;
    border-bottom: 1px solid rgba(0,0,0,.08);
}


/* NAVIGATION BAR */
.x-navigation-bar {
	max-width: 268px;
	height: 100%;
}


/* MENU */
.x-menu {
	margin: 0;
	list-style: none;
}
.x-menu_item {
	margin: 0;
	display: flex;
    flex-direction: column;
}
.x-menu-submenu {
	margin: 0;
	display: flex;
    flex-direction: column;
    min-width: fit-content;
    list-style: none;
}
.x-menu-submenu_item {
	margin: 0;
}
.x-menu_link {
	position: relative;
	display: flex;
	align-items: center;
    min-width: fit-content;
	border-radius: 4px;
	min-height: 44px;
	line-height: 18px;
    padding-block-end: 10px;
    padding-block-start: 10px;
    padding-inline-start: 24px;
	text-decoration: none;
	overflow: hidden;
	color: #5f6368 !important;
	cursor: pointer;
}
.x-menu_link:hover,
.x-menu_link:active {
	background-color: #e8eaed;
}
.x-menu_link.arrow-down + .x-menu-submenu {
	display: none;
}
.x-menu_link.arrow-up + .x-menu-submenu {
	display: flex;
}
.x-menu_link.arrow-down:after {
	position: absolute;
	right: 12px;
	display: inline-block;
	width: 16px;
	height: 16px;
	content: "";
	vertical-align: middle;
	background-size: cover;
	background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Crect%20fill%3D%22none%22%20height%3D%22256%22%20width%3D%22256%22%2F%3E%3Cpolyline%20fill%3D%22none%22%20points%3D%22208%2096%20128%20176%2048%2096%22%20stroke%3D%22%23999%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2212%22%2F%3E%3C%2Fsvg%3E);
}
.x-menu_link.arrow-up:after {
	position: absolute;
	right: 12px;
	display: inline-block;
	width: 16px;
	height: 16px;
	content: "";
	vertical-align: middle;
	background-size: cover;
	background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Crect%20fill%3D%22none%22%20height%3D%22256%22%20width%3D%22256%22%2F%3E%3Cpolyline%20fill%3D%22none%22%20points%3D%2248%20160%20128%2080%20208%20160%22%20stroke%3D%22%23999%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2212%22%2F%3E%3C%2Fsvg%3E);
}
.x-menu_link.arrow-down:hover,
.x-menu_link.arrow-down:active,
.x-menu_link.arrow-up:hover,
.x-menu_link.arrow-up:active {
	background-color: transparent;;
}
.x-menu-submenu .x-menu_link {
	padding-inline-start: 60px;
	color: #333;
}
.x-menu_link--current,
.x-menu_link--current:hover,
.x-menu_link--current:active {
	background-color: #e8eaed; /* #e8f0fe */
	color: #1967d2 !important;
}
.x-menu_link_inner {
	display: flex;
	align-items: center;
}
.x-menu_text {
	white-space: nowrap;
	font-size: 1rem;
	font-weight: bold;
	color: #333;
}
.x-menu-submenu_text {
	white-space: nowrap;
	font-size: 1rem;
	color: #333;
}
.x-menu_icon {
    display: inline-flex;
    position: relative;
    margin-inline-end: 12px;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    vertical-align: middle;
}
.x-menu-separator {
    margin-bottom: 8px;
    margin-top: 8px;
    border-bottom: 1px solid rgba(0,0,0,.08);
}


/* HEADER */
.x-header {
	z-index: 99;
	position: sticky;
	top: 0;
	display: flex;
    align-items: center;
    width: 100%;
	height: 64px;
    border-bottom: 1px solid rgb(218,220,224);
    transition: box-shadow .2s ease-in-out;
    background-color: #fff;
}
@media (min-width: 768px) {
	.x-header {
		height: 88px;
	}
}
.x-header.x-header--shadow {
	box-shadow: 0 1px 7px rgba(0,0,0,.19);
}
.x-header_logo {
	display: flex;
	align-items: center;
}
.x-header_logo-icon {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
}
.x-header_logo-name {
	margin-left: 8px;
	font-size: 1.375rem;
	font-weight: bold;
	color: black;
}
.x-header_logo-subtext {
	display: none;
}
@media (min-width: 768px) {
	.x-header_logo-subtext {
		margin-left: 12px;
		display: block;
		padding-left: 12px;
		border-left: 1px solid #c6c6c6;
		font-size: 1.375rem;
	}
}


/* MAIN */
.main-view {}
.main-view_leftside,
.main-content {
	padding-top: 40px;
	padding-bottom: 40px;
	min-height: calc(100vh - 300px)
}

.main-content_header {}
.main-content_header-title {}
.main-content_header-subtitle {
	font-size: 1rem;
	color: #666;
}


/* FOOTER */
.x-footer {
	padding-top: 20px;
	padding-bottom: 20px;
}
.x-footer ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem
}
.x-footer li {
	white-space: nowrap
}
.x-footer_link,
.x-footer_copyright {
	color: #666 !important;
}
.x-footer_link:hover,
.x-footer_link:active {
	color: #333 !important;
}


/* ITEM TILE */
.x-item-tile {}
.x-item-tile.x-item-tile--highlight {
	border-radius: 4px;
	padding: 12px 12px;
	background-color: #f6f6f6;
}
.x-item-tile_container {
    display: flex;
    width: 100%;
    gap: 1rem
}
.x-item-tile_image {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.x-item-tile_content {
	display: flex;
	flex-direction: column;
    justify-content: center;
    min-width: 120px
}


/* MOD STYLE */
.mod-bg-red {
    background-color: #a93c24;
}

.mod-bg-white {
    background-color: #fff;
}

.mod-bg-black {
    background-color: #111;
}

.mod-bg-grey {
    background-color: #f6f6f6;
}

.mod-wrapper {
    padding-left: 12px;
    padding-right: 12px;
}

@media(min-width: 576px) {
    .mod-wrapper {
        padding-left: auto;
        padding-right: auto;
    }
}

.mod-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.mod-content_heading {
    margin-bottom: 1.2rem;
    font-size: 2rem;
}

.mod-bg-red .mod-content_heading,.mod-bg-black .mod-content_heading {
    color: #fff;
}

.mod-content_description {
    font-size: 1.2rem;
    line-height: 1.6rem;
    color: #999;
}

.mod-bg-red .mod-content_description,.mod-bg-black .mod-content_description {
    color: var(--c-white-alpha-80);
}

@media(min-width: 576px) {
    .mod-content_heading {
        font-size:2.4rem;
    }

    .mod-content_description {
        font-size: 1.4rem;
        line-height: 2rem;
    }
}

.mod-content_image {
    margin-top: 24px;
}

@media(min-width: 576px) {
    .mod-content_image {
        margin-top:0
    }
    .mod-spacer-sm-m1 {
        margin-top:12px;
        margin-bottom: 12px
    }

    .mod-spacer-sm-m2 {
        margin-top: 24px;
        margin-bottom: 24px
    }

    .mod-spacer-sm-m3 {
        margin-top: 48px;
        margin-bottom: 48px
    }

    .mod-spacer-sm-m4 {
        margin-top: 64px;
        margin-bottom: 64px
    }

    .mod-spacer-sm-m5 {
        margin-top: 80px;
        margin-bottom: 80px
    }

    .mod-spacer-sm-m6 {
        margin-top: 92px;
        margin-bottom: 92px
    }

    .mod-spacer-sm-m7 {
        margin-top: 120px;
        margin-bottom: 120px
    }

    .mod-spacer-sm-p1 {
        padding-top: 12px;
        padding-bottom: 12px
    }

    .mod-spacer-sm-p2 {
        padding-top: 24px;
        padding-bottom: 24px
    }

    .mod-spacer-sm-p3 {
        padding-top: 48px;
        padding-bottom: 48px
    }

    .mod-spacer-sm-p4 {
        padding-top: 64px;
        padding-bottom: 64px
    }

    .mod-spacer-sm-p5 {
        padding-top: 80px;
        padding-bottom: 80px
    }

    .mod-spacer-sm-p6 {
        padding-top: 92px;
        padding-bottom: 92px
    }

    .mod-spacer-sm-p7 {
        padding-top: 120px;
        padding-bottom: 120px
    }
}

@media(min-width: 768px) {
    .mod-spacer-md-m1 {
        margin-top:12px;
        margin-bottom: 12px
    }

    .mod-spacer-md-m2 {
        margin-top: 24px;
        margin-bottom: 24px
    }

    .mod-spacer-md-m3 {
        margin-top: 48px;
        margin-bottom: 48px
    }

    .mod-spacer-md-m4 {
        margin-top: 64px;
        margin-bottom: 64px
    }

    .mod-spacer-md-m5 {
        margin-top: 80px;
        margin-bottom: 80px
    }

    .mod-spacer-md-m6 {
        margin-top: 92px;
        margin-bottom: 92px
    }

    .mod-spacer-md-m7 {
        margin-top: 120px;
        margin-bottom: 120px
    }

    .mod-spacer-md-p1 {
        padding-top: 12px;
        padding-bottom: 12px
    }

    .mod-spacer-md-p2 {
        padding-top: 24px;
        padding-bottom: 24px
    }

    .mod-spacer-md-p3 {
        padding-top: 48px;
        padding-bottom: 48px
    }

    .mod-spacer-md-p4 {
        padding-top: 64px;
        padding-bottom: 64px
    }

    .mod-spacer-md-p5 {
        padding-top: 80px;
        padding-bottom: 80px
    }

    .mod-spacer-md-p6 {
        padding-top: 92px;
        padding-bottom: 92px
    }

    .mod-spacer-md-p7 {
        padding-top: 120px;
        padding-bottom: 120px
    }
}

@media(min-width: 1224px) {
    .mod-spacer-lg-m1 {
        margin-top:12px;
        margin-bottom: 12px
    }

    .mod-spacer-lg-m2 {
        margin-top: 24px;
        margin-bottom: 24px
    }

    .mod-spacer-lg-m3 {
        margin-top: 48px;
        margin-bottom: 48px
    }

    .mod-spacer-lg-m4 {
        margin-top: 64px;
        margin-bottom: 64px
    }

    .mod-spacer-lg-m5 {
        margin-top: 80px;
        margin-bottom: 80px
    }

    .mod-spacer-lg-m6 {
        margin-top: 92px;
        margin-bottom: 92px
    }

    .mod-spacer-lg-m7 {
        margin-top: 120px;
        margin-bottom: 120px
    }

    .mod-spacer-lg-p1 {
        padding-top: 12px;
        padding-bottom: 12px
    }

    .mod-spacer-lg-p2 {
        padding-top: 24px;
        padding-bottom: 24px
    }

    .mod-spacer-lg-p3 {
        padding-top: 48px;
        padding-bottom: 48px
    }

    .mod-spacer-lg-p4 {
        padding-top: 64px;
        padding-bottom: 64px
    }

    .mod-spacer-lg-p5 {
        padding-top: 80px;
        padding-bottom: 80px
    }

    .mod-spacer-lg-p6 {
        padding-top: 92px;
        padding-bottom: 92px
    }

    .mod-spacer-lg-p7 {
        padding-top: 120px;
        padding-bottom: 120px
    }
}

@media(min-width: 1824px) {
    .mod-spacer-xl-m1 {
        margin-top:12px;
        margin-bottom: 12px
    }

    .mod-spacer-xl-m2 {
        margin-top: 24px;
        margin-bottom: 24px
    }

    .mod-spacer-xl-m3 {
        margin-top: 48px;
        margin-bottom: 48px
    }

    .mod-spacer-xl-m4 {
        margin-top: 64px;
        margin-bottom: 64px
    }

    .mod-spacer-xl-m5 {
        margin-top: 80px;
        margin-bottom: 80px
    }

    .mod-spacer-xl-m6 {
        margin-top: 92px;
        margin-bottom: 92px
    }

    .mod-spacer-xl-m7 {
        margin-top: 120px;
        margin-bottom: 120px
    }

    .mod-spacer-xl-p1 {
        padding-top: 12px;
        padding-bottom: 12px
    }

    .mod-spacer-xl-p2 {
        padding-top: 24px;
        padding-bottom: 24px
    }

    .mod-spacer-xl-p3 {
        padding-top: 48px;
        padding-bottom: 48px
    }

    .mod-spacer-xl-p4 {
        padding-top: 64px;
        padding-bottom: 64px
    }

    .mod-spacer-xl-p5 {
        padding-top: 80px;
        padding-bottom: 80px
    }

    .mod-spacer-xl-p6 {
        padding-top: 92px;
        padding-bottom: 92px
    }

    .mod-spacer-xl-p7 {
        padding-top: 120px;
        padding-bottom: 120px
    }
}


/*  */
.x-gridnav {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px - 1rem, 100%), 1fr));
	gap: 2rem;
	width: 100%
}

.x-gridnav_item {
	border-radius: 16px;
	background-color: white;
	text-align: center
}

.x-gridnav_item:hover,
.x-gridnav_item:active {
	box-shadow: 0px 0px 20px var(--c-grey-alpha-10)
}

.x-gridnav_content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px
}

.x-gridnav_icon {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	overflow: hidden;
	background-color: #f6f6f6
}

.x-gridnav_name {
	margin-top: 12px;
	font-size: 1.25rem;
	font-weight: bold;
	color: #222
}


/* LOGIN */
.x-login {
	margin: auto;
	max-width: 960px;
    border-radius: 12px;
    padding: 40px;
    background-color: white
}

.x-login_header {
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.x-login_header-title {
	font-size: 1.5rem;
	font-weight: bold
}

.x-login .xui-form_legend {
	text-align: center;
	font-size: 1.375rem;
	font-weight: bold;
	color: #222
}

.x-login .xui-form_legend:after {
	display: none
}

.x-login_wechat {}

.x-login_content {
	display: flex;
	justify-content: center;
	text-align: center
}

.x-login-box {
	width: 100%;
	text-align: center
}

.x-login_qrcode {
	margin: auto;
	position: relative;
	width: 200px;
	height: 200px;
	padding: 12px;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	overflow: hidden
}

.x-login_qrcode-reload {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, .9);
	content: ""
}

.x-auth-box {}

.x-auth-box_qrcode {
	margin: auto;
	position: relative;
	border: 1px solid #e6e6e6;
	width: 240px;
	padding: 12px
}