/** page styles */
body.index { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 100vh; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.index .brand-logo { height: 100%; font-size: 3rem; }
.index .brand-logo img { font-size: 0; }

.index nav { background-image: url("../images/bg-header.jpg"); background-size: cover; background-repeat: no-repeat; }
.index nav .navbar-fixed { width: 100%; }
.index nav .navbar-fixed > .container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.index nav .logo-header { padding-left: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; }
.index nav .logo-header img { display: block; margin: auto; }
.index nav ul.action .btn, .index nav ul.action .btn-large, .index nav ul.action .btn-small { margin: 0.2rem; }
.index nav .link-list { padding-left: 230px; padding-right: 190px; position: absolute; top: 0; left: 0; height: 100%; width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; -ms-flex-line-pack: center; align-content: center; }
.index nav .link-list .link-item { display: block; height: initial; line-height: initial; margin: auto; }
.index nav .link-list a { display: inline-block; white-space: nowrap; padding: 0.5rem 0.3rem; margin: 0.2rem; }
.index nav .link-list a:hover { background-color: rgba(0, 11, 46, 0.5); }

.index main { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; background-image: url("../images/bg-main.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center right; }
.index main form.search-form { max-width: 800px; }
.index main .main-logo { margin-top: 48px; width:420px; }
.index main .input-field input { border: 1px solid #9e9e9e; border-right-width: 0; height: 54px; line-height: 54px; width: 100%; padding: 8px; font-size: 1.5rem; }
.index main .input-field input:focus { outline: none; }
.index main .input-field label { background: rgba(255, 255, 255, 0); }
.index main .input-field label.active { -webkit-transform: translateY(0px) scale(0.8) !important; -ms-transform: translateY(0px) scale(0.8) !important; transform: translateY(0px) scale(0.8) !important; }
.index main .input-field button { border: 1px solid #9e9e9e; border-left-width: 0; border-radius: 0; }
.index main .search-field { padding: 0 !important; }

.index footer { background-image: url("../images/bg-footer.jpg"); background-size: cover; background-repeat: no-repeat; }
.index footer .footer-link-list { display: none; }
.index footer .chip { margin-bottom: 10px; }

.index .modal { max-height: 90%; width: 380px; border-radius: 8px; }
.index .modal .modal-header :not(.active) { color: rgba(0, 0, 0, 0.87); }
.index .modal form { max-height: calc(90vh - 68px); overflow: auto; }
.index .modal .input-field { margin: 0.5rem 0 1.5rem 0; }
.index .modal .input-field.col label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; left: 0; }
.index .modal .welcome { position: relative; bottom: 1em; }
.index .modal .modal-content { padding: 25px; }
.index .modal .input-field .verifycode { position: absolute; margin-left: -112px; margin-top: -18px; }

@media (max-width: 600px) {
    .index nav .brand-logo img { width: 150px; }
    .index main .main-logo { width: 280px; }
    .index main .input-field input { border-right-width: 1px; }
    .index main .input-field button { border-left-width: 1px; }
    .index .modal { top: 0 !important; border-radius: 0; width: 100%; height: 100%; max-height: 100%; margin: 0; }
    .index .modal form { max-height: calc(100vh - 68px); overflow: auto; }
}

@media only screen and (min-width: 601px) {
    .index .container { width: calc(100% - 6rem); }
}

@media only screen and (min-width: 993px) {
    .index .container { width: 80%; }
}

@media only screen and (max-width: 1279px) {
    .index nav .link-list { display: none; }
    .index footer .footer-link-list { display: block; }
}

@media (max-width: 720px) {
    .index nav .container { width: 100%; }
    .index nav .logo-header { padding-left: 0; height: 60px; width: 130px; }
    .index nav .logo-header ul.action { zoom: 0.9; }
    .index nav .logo-header ul.action .btn, .index nav .logo-header ul.action .btn-large, .index nav .logo-header ul.action .btn-small { font-size: 0.5rem; }
    .index nav .logo-header img { width: 125px; }
    .index nav .logo-header .navbar-fixed > .container { margin: 0; width: 100%; }
}

.result main { color: #666; background: #fafafa; }
.result main h5 { margin: 2rem 0; }
.result main .annoucement { margin-bottom: 2rem; }
.result main .annoucement h5 { margin: 0 0 0.6rem 0; }
.result main .table-wrapper { width: 100%; padding: 0.5rem 1rem; border-radius: 0.6rem; background-color: #fafafa; border: 1px solid #dadada; }
.result main .table-wrapper table { width: 100%; }
.result main .table-wrapper table tbody td { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
.result main .table-wrapper table tbody tr:last-child { border: none; }

@media (min-width: 721px) {
    .result .container main table tbody td { max-width: 200px; }
    .result .container main table tbody td:nth-child(1) { width: 20%; max-width: 20%; }
    .result .container main table tbody td:nth-child(3) { width: 20%; max-width: 20%; }
}

@media (max-width: 720px) {
    .result .container { width: 100%; }
    .result main h5 { font-size: 1.2rem; margin: 1rem; }
    .result main .table-wrapper { border: 0; padding: 0; }
    .result main table { font-size: 0.9rem; }
    .result main table .desktop { display: none; }
    .result main table thead { display: none; }
    .result main table tbody td { width: 100%; max-width: 100%; padding: 0.5rem; display: block; padding-left: 5.5rem; }
    .result main table tbody td:before { display: block; position: absolute; width: 4rem; left: 1rem; text-align: right; }
    .result main table tbody td:nth-child(1):before { content: "登录端口："; }
    .result main table tbody td:nth-child(2):before { content: "测速网址："; }
    .result main table tbody td:nth-child(3):before { content: "速度："; }
}

.user { height: 100vh; min-height: 100vh; }
.user nav { background: #00b7ea; background-image: url("../images/bg-header.jpg"); background-size: cover; background-repeat: no-repeat; -webkit-transition: -webkit-transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1); transition: -webkit-transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1); -o-transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1); transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1); transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1); display: block; }
.user nav .navbar-fixed { height: 100%; }
.user nav .navbar-fixed .container { height: inherit; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.user nav .navbar-fixed .container .main-logo { height: 100%; line-height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 20px; position: relative; }
.user nav .navbar-fixed .container .user-info { margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: bold; height: inherit; position: relative; }
.user nav .navbar-fixed .container .user-info .username { margin-right: 10px; }
.user nav .navbar-fixed .container .user-info .profile-icon { cursor: pointer; }
.user nav .navbar-fixed .container .user-info .profile-icon i { width: 32px; height: 32px; line-height: 32px; border-radius: 50%; font-size: 32px; color: #9e9e9e; background-color: #9e9e9e; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #fff; }
.user nav .navbar-fixed .container .user-info .profile-icon:hover .user-info-dropdown { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); visibility: visible; opacity: 1; }
.user nav .navbar-fixed .container .user-info .user-info-dropdown { position: absolute; top: 55px; right: 0; background-color: #fff; -webkit-box-shadow: 0 1px 10px rgba(55, 55, 55, 0.2); box-shadow: 0 1px 10px rgba(55, 55, 55, 0.2); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); visibility: hidden; opacity: 0; -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms; -webkit-transform-origin: 80% top; -ms-transform-origin: 80% top; transform-origin: 80% top; pointer-events: none; border-radius: 6px; }
.user nav .navbar-fixed .container .user-info .user-info-dropdown:before { content: ""; position: absolute; width: 10px; height: 10px; top: 0; right: 15px; -webkit-transform: rotate(45deg) translateY(-50%); -ms-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); background-color: #fff; z-index: -1; }
.user nav .navbar-fixed .container .user-info .user-info-dropdown ul { width: 5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.user nav .navbar-fixed .container .user-info .user-info-dropdown ul li { display: block; line-height: 50px; height: 50px; }
.user nav .navbar-fixed .container .user-info .user-info-dropdown ul a { padding: 0 20px; color: #767676; pointer-events: auto; border-radius: 6px; }
.user main { background: #f2f2f2; min-height: calc(100% - 64px); }
.user main .container { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 24px 0; }
.user .sidebar-menu { width: 180px; margin-right: 16px; }
.user .sidebar-menu ul { margin: 0; padding: 0; }
.user .sidebar-menu ul li { margin: 0 0 24px 0; }
.user .sidebar-menu ul li.active a { background: #dbdbdb; }
.user .sidebar-menu ul li a { color: #767676; display: block; padding-top: 5px; padding-bottom: 5px; margin-bottom: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 6px; }
.user .sidebar-menu ul li a:hover { background-color: #ebebeb; }
.user .sidebar-menu ul li a h3 { font-size: 14px; font-weight: bold; padding-left: 20px; color: #767676; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 8px 0 8px 0; }
.user .sidebar-menu ul li > a { display: block; text-decoration: none; color: #767676; text-indent: 14px; padding-top: 5px; padding-bottom: 5px; margin-bottom: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 6px; }
.user .sidebar-menu ul li > a:hover { background-color: #ebebeb; }
.user .main-content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
.user .main-content .page-title { font-weight: bold; font-size: 20px; color: #767676; margin: 0 0 20px 0; }
.user .main-content .search-area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 0 1rem 0; padding-left: 0.7rem; -webkit-transition: -webkit-transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1); transition: -webkit-transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1); -o-transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1); transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1); transition: transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 300ms cubic-bezier(0.075, 0.82, 0.165, 1); }
.user .main-content .search-area .search-area-list { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; color: #767676; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.user .main-content .search-area .search-area-list .list-item { font-weight: bold; font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.user .main-content .search-area .search-area-list .list-item:first-child { margin-right: 20px; }
.user .main-content .search-area .search-area-list .list-item.extra-action a { -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.user .main-content .search-area .search-area-list .list-item.extra-action.active a { opacity: 1; visibility: visible; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
.user .main-content .search-area .search-area-list .list-item.extra-action.active a:nth-child(1) { -webkit-transition-delay: 0ms; -o-transition-delay: 0ms; transition-delay: 0ms; }
.user .main-content .search-area .search-area-list .list-item.extra-action.active a:nth-child(2) { -webkit-transition-delay: 100ms; -o-transition-delay: 100ms; transition-delay: 100ms; }
.user .main-content .search-area .search-area-list .list-item span { color: #767676; height: 20px; line-height: 20px; padding-left: 25px; }
.user .main-content .search-area .search-area-list .list-item a { color: #767676; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; }
.user .main-content .search-area .search-area-list .list-item label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.user .main-content .search-area .search-area-action { margin-left: auto; }
.user .main-content .search-area .search-area-action .search-input { background-color: #fff; border-radius: 100px; position: relative; height: 32px; padding: 0 8px 0 16px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ccc; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 225px; }
.user .main-content .search-area .search-area-action .search-input input { height: 100%; border-bottom: 0; margin-bottom: 0; -webkit-box-shadow: none; box-shadow: none; font-size: 14px; }
.user .main-content .search-area .search-area-action .search-input a { height: 24px; }
.user .main-content .search-area .search-area-action .search-input a i { color: #767676; }
.user .main-content .button-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.user .main-content .button-wrapper a { color: #00b7ea; }
.user .main-content .select-wrapper.small-select { width: 60px; }
.user .main-content .select-wrapper.small-select input { color: #767676; border-bottom: 0; margin-bottom: 0; }
.user .cards-wrapper { color: #767676; }
.user .card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0.9rem 0.7rem; -webkit-box-shadow: none; box-shadow: none; margin: 0; background: #fafafa; }
.user .card:not(:last-child) { border-bottom: 1px solid #ddd; }
.user .card .fragment { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.user .card .checkbox { -ms-flex-preferred-size: 4rem; flex-basis: 4rem; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0.5; flex-shrink: 0.5; }
.user .card .name { -ms-flex-preferred-size: 100%; flex-basis: 100%; -webkit-box-flex: 20rem; -ms-flex-positive: 20rem; flex-grow: 20rem; }
.user .card .name a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.user .card .name i { -ms-flex-preferred-size: 2.5rem; flex-basis: 2.5rem; color: gray; }
.user .card .name p { display: block; -ms-flex-preferred-size: calc(100% - 2.5rem); flex-basis: calc(100% - 2.5rem); -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; margin: 0; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; word-break: break-all; max-height: 3em; }
.user .card .status { -ms-flex-preferred-size: 6.5rem; flex-basis: 6.5rem; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; }
.user .card .status .light { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: gray; }
.user .card .status .light.good { background: #27c989; }
.user .card .status .light.bad { background: #ff3c3c; }
.user .card .status .light.block { background: #222; }
.user .card .date { -ms-flex-preferred-size: 13rem; flex-basis: 13rem; -ms-flex-negative: 0; flex-shrink: 0; }
.user .card .token { -ms-flex-preferred-size: 15rem; flex-basis: 15rem; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0.2rem; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.user .card .token .code { position: relative; padding: 0.2rem 0.5rem; -ms-flex-preferred-size: 8rem; flex-basis: 8rem; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; background: #ebebeb; }
.user .card .token .code:after { content: ""; display: block; width: 0; height: 90%; position: absolute; top: 5%; right: -2px; border-right: 4px dotted white; }
.user .card .token .code span { font-size: 2rem; line-height: 2rem; font-family: Menlo, Courier, monospace; }
.user .card .token .action { position: relative; border: 1px solid #e0e0e0; padding: 0.2rem 0.5rem; -ms-flex-preferred-size: 6rem; flex-basis: 6rem; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-align: center; }
.user .card .token .action .enter { background-color: #27c989; width: 100%; border: none; color: white; font-size: 0.8rem; padding: 0.3rem; -webkit-box-sizing: border-box; box-sizing: border-box; }
.user .card [data-clipboard-text] { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.user .card [data-clipboard-text] .tooltip { position: absolute; right: 0; width: 100%; text-align: center; top: 0; opacity: 0; -webkit-animation: upslide 500ms cubic-bezier(0.165, 0.84, 0.44, 1); animation: upslide 500ms cubic-bezier(0.165, 0.84, 0.44, 1); }
.user .card .label { display: block; width: 100%; font-size: 0.8rem; color: #9e9e9e; }
.user .modal { height: 100%; overflow: hidden; border-radius: 0.6rem; }
.user .modal i { vertical-align: middle; }
.user .modal .modal-content { overflow: auto; padding-bottom: 1rem; padding-top: 1rem; }
.user .modal .modal-header { background: #e5e6e5; }
.user .modal .modal-footer { position: fixed; bottom: 0; }
.user .modal form { max-height: calc(100% - 120px); overflow-y: auto; overflow-x: hidden; }
.user .modal .row { margin-bottom: 0; }
.user .modal .generate { color: #9e9e9e; border: 1px solid #9e9e9e; border-radius: 5rem; text-align: center; height: 32px; line-height: 30px; margin: 0.6rem 0; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
.user .modal .input-field { margin: 0.5rem 0; }
.user .modal .btn-full { width: 100%; }
.user .modal .radio-selection span { margin-right: 1rem; }
.user .modal .row { position: relative; }
.user .modal .row:only-child .remove { opacity: 0.3; cursor: not-allowed; }
.user .modal .remove { position: absolute; right: 0; height: 100%; padding: 1rem 0; color: #666; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.user .modal .remove i { font-size: 1.4rem; pointer-events: none; }
.user .modal .remove:hover { color: black; }
.user form.compact .input-field { margin-bottom: 0; }
.user form.compact .input-field input { margin-bottom: 5px; }

@media (max-width: 600px) {
    .user .modal { top: 0 !important; border-radius: 0; width: 100%; height: 100%; max-height: 100%; margin: 0; }
    .user .modal form { max-height: calc(100vh - 68px); overflow: auto; }
}

.user input[type] { margin-bottom: 0; }
.user .profile-area { background-color: #fafafa; width: 100%; max-width: 450px; padding: 1rem; border-radius: 0.5rem; }
.user .profile-area .sub-title { margin-top: 0; margin-bottom: 0; }
.user .profile-area .sub-title h5 { font-size: 1.2rem; margin-top: 0; margin-bottom: 0; color: #00b7ea; }
.user .mobile { display: none; }

@-webkit-keyframes upslide {
    0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 0; }
    70% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); opacity: 1; }
    100% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); opacity: 0; }
}

@keyframes upslide {
    0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 0; }
    70% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); opacity: 1; }
    100% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); opacity: 0; }
}

@media only screen and (min-width: 601px) {
    .container { width: calc(100% - 6rem); }
}

@media only screen and (min-width: 993px) {
    .container { width: 80%; }
}

@media (max-width: 1100px) {
    .user .mobile { display: block; }
    .user nav { padding-top: 0.5rem; position: relative; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; -webkit-box-shadow: 0 0 0.2rem 0.2rem rgba(0, 0, 0, 0.3); box-shadow: 0 0 0.2rem 0.2rem rgba(0, 0, 0, 0.3); }
    .user nav .container { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; line-height: 3rem; }
    .user nav .mobile .container { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; }
    .user nav .mobile .container a { width: 16rem; text-align: center; }
    .user nav .mobile .container a.active { border-bottom: 4px solid #fafafa; }
    .user main .container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; }
    .user main .container .sidebar-menu { width: 100%; display: none; }
    .user main .container .main-content .page-title { display: none; }
    .user main .container .main-content .search-area { padding-top: 1rem; }
    .user .profile-area { margin-top: 2rem; margin-left: auto; margin-right: auto; }
}

@media (min-width: 721px) {
    .user .card .fragment { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
    .user .card .checkbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: auto; }
    .user .card .checkbox span { height: 20px; }
    .user .card .name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; }
    .user .card .name a { width: 100%; }
    .user .card .name i { margin: auto; }
    .user .card .name p { display: inline-block; }
}

@media (max-width: 720px) {
    .user nav { height: initial; position: fixed; top: 0; z-index: 30; }
    .user nav .mobile .container { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; }
    .user nav .mobile .container a { width: 40%; }
    .user main { padding-top: 90px; }
    .user .container { width: 100%; }
    .user .main-content { background: #fafafa; }
    .user .mobile { display: block; }
    .user .user-info { padding-right: 1rem; }
    .user .user-info .username { display: none; }
    .user .search-area { position: -webkit-sticky; position: sticky; top: 90px; z-index: 10; background: #fafafa; border-bottom: 1px solid #ddd; }
    .user .cards-wrapper .card { font-size: 0.8rem; }
    .user .cards-wrapper .card .fragment { -ms-flex-wrap: wrap; flex-wrap: wrap; }
    .user .cards-wrapper .card .checkbox { -ms-flex-preferred-size: 2rem; flex-basis: 2rem; }
    .user .cards-wrapper .card .name { -ms-flex-preferred-size: calc(100% - 5rem); flex-basis: calc(100% - 5rem); -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; vertical-align: top; }
    .user .cards-wrapper .card .status { -ms-flex-preferred-size: 5rem; flex-basis: 5rem; }
    .user .cards-wrapper .card .date { -ms-flex-preferred-size: calc(100% - 5rem); flex-basis: calc(100% - 5rem); }
    .user .cards-wrapper .card .token { -ms-flex-preferred-size: 11rem; flex-basis: 11rem; }
    .user .cards-wrapper .card .token .code { -ms-flex-preferred-size: 6rem; flex-basis: 6rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
    .user .cards-wrapper .card .token .code span { font-size: 1.4rem; }
    .user .cards-wrapper .card .token .action { -ms-flex-preferred-size: 4rem; flex-basis: 4rem; }
    .user .cards-wrapper .card .token .action .copy-safe-code { padding: 0 0.5rem; }
    .user .cards-wrapper .card .token .action .desktop { display: none; }
    .user .modal .generate { font-size: 0.8rem; }
    .user .profile-area { margin-top: 0; padding-top: 2rem; }
}

.backend { min-width: 1300px; height: 100vh; min-height: 100vh; }
.backend nav { background: #00b7ea; height: 64px; }
.backend nav .navbar-fixed { height: 100%; }
.backend nav .navbar-fixed .container { height: inherit; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.backend nav .navbar-fixed .container .main-logo { height: 100%; line-height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 20px; position: relative; }
.backend nav .navbar-fixed .container .user-info { margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: bold; height: inherit; position: relative; }
.backend nav .navbar-fixed .container .user-info .username { margin-right: 10px; }
.backend nav .navbar-fixed .container .user-info .profile-icon { cursor: pointer; }
.backend nav .navbar-fixed .container .user-info .profile-icon i { width: 32px; height: 32px; line-height: 32px; border-radius: 50%; font-size: 32px; color: #9e9e9e; background-color: #9e9e9e; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #fff; }
.backend nav .navbar-fixed .container .user-info .profile-icon:hover .user-info-dropdown { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); visibility: visible; opacity: 1; }
.backend nav .navbar-fixed .container .user-info .user-info-dropdown { position: absolute; top: 55px; right: 0; background-color: #fff; -webkit-box-shadow: 0 1px 10px rgba(55, 55, 55, 0.2); box-shadow: 0 1px 10px rgba(55, 55, 55, 0.2); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); visibility: hidden; opacity: 0; -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms; -webkit-transform-origin: 80% top; -ms-transform-origin: 80% top; transform-origin: 80% top; pointer-events: none; border-radius: 6px; }
.backend nav .navbar-fixed .container .user-info .user-info-dropdown:before { content: ""; position: absolute; width: 10px; height: 10px; top: 0; right: 15px; -webkit-transform: rotate(45deg) translateY(-50%); -ms-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); background-color: #fff; z-index: -1; }
.backend nav .navbar-fixed .container .user-info .user-info-dropdown ul { display: block; }
.backend nav .navbar-fixed .container .user-info .user-info-dropdown ul li { line-height: 50px; height: 50px; }
.backend nav .navbar-fixed .container .user-info .user-info-dropdown ul a { padding: 0 20px; color: #767676; pointer-events: auto; border-radius: 6px; }
.backend main { background: #f2f2f2; min-height: calc(100% - 64px); }
.backend main .container { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 24px 0; }
.backend .container { width: 1280px; }
.backend .sidebar-menu { width: 180px; margin-right: 16px; }
.backend .sidebar-menu ul { margin: 0; padding: 0; }
.backend .sidebar-menu ul li { margin: 0 0 24px 0; }
.backend .sidebar-menu ul li h3 { font-size: 14px; font-weight: bold; padding-left: 20px; color: #767676; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 0 16px 0; }
.backend .sidebar-menu ul li > a { display: block; text-decoration: none; color: #767676; text-indent: 14px; padding-left: 20px; padding-top: 5px; padding-bottom: 5px; margin-bottom: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 6px; }
.backend .sidebar-menu ul li > a:hover { background-color: #ebebeb; }
.backend .sidebar-menu ul li > a.active { background-color: #e7e7e7; }
.backend .main-content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
.backend .main-content .page-title { font-weight: bold; font-size: 20px; color: #767676; margin: 0 0 20px 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.backend .main-content .page-title > a { margin-right: 10px; margin-left: -16px; }
.backend .main-content .page-title > i { margin: 0 20px; }
.backend .main-content .search-area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 0 16px 16px; }
.backend .main-content .search-area .search-area-list { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; color: #767676; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; }
.backend .main-content .search-area .search-area-list li { font-weight: bold; font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.backend .main-content .search-area .search-area-list li:first-child { margin-right: 20px; }
.backend .main-content .search-area .search-area-list li.divider { border-right: 1px solid #707070; font-size: 20px; height: 22px; -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.backend .main-content .search-area .search-area-list li.divider.active { opacity: 1; visibility: visible; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
.backend .main-content .search-area .search-area-list li.extra-action a { -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.backend .main-content .search-area .search-area-list li.extra-action.active a { opacity: 1; visibility: visible; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
.backend .main-content .search-area .search-area-list li.extra-action.active a:nth-child(1) { -webkit-transition-delay: 0ms; -o-transition-delay: 0ms; transition-delay: 0ms; }
.backend .main-content .search-area .search-area-list li.extra-action.active a:nth-child(2) { -webkit-transition-delay: 100ms; -o-transition-delay: 100ms; transition-delay: 100ms; }
.backend .main-content .search-area .search-area-list li span { color: #767676; height: 20px; line-height: 20px; padding-left: 25px; }
.backend .main-content .search-area .search-area-list li a { color: #767676; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; }
.backend .main-content .search-area .search-area-list li label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.backend .main-content .search-area .search-area-action { margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; }
.backend .main-content .search-area .search-area-action .search-input { background-color: #fff; border-radius: 100px; position: relative; height: 32px; padding: 0 8px 0 16px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ccc; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 225px; -webkit-transition: -webkit-box-shadow 200ms ease-in-out; transition: -webkit-box-shadow 200ms ease-in-out; -o-transition: box-shadow 200ms ease-in-out; transition: box-shadow 200ms ease-in-out; transition: box-shadow 200ms ease-in-out, -webkit-box-shadow 200ms ease-in-out; }
.backend .main-content .search-area .search-area-action .search-input:not(:last-child) { margin-right: 16px; }
.backend .main-content .search-area .search-area-action .search-input:focus-within { -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15); box-shadow: 0 0 12px rgba(0, 0, 0, 0.15); }
.backend .main-content .search-area .search-area-action .search-input.date { width: auto; }
.backend .main-content .search-area .search-area-action .search-input input { height: 100%; border-bottom: 0; margin-bottom: 0; -webkit-box-shadow: none; box-shadow: none; font-size: 14px; }
.backend .main-content .search-area .search-area-action .search-input input.datepicker { width: 80px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
.backend .main-content .search-area .search-area-action .search-input a { height: 24px; }
.backend .main-content .search-area .search-area-action .search-input i { color: #767676; }
.backend .main-content .table-wrapper { background-color: #fff; border-radius: 6px; padding: 0 16px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.backend .main-content .table-wrapper table { width: 100%; }
.backend .main-content .table-wrapper table thead { color: #9e9e9e; }
.backend .main-content .table-wrapper table thead th { padding: 20px 0; font-size: 14px; outline: none; }
.backend .main-content .table-wrapper table thead th.text-center { text-align: center; }
.backend .main-content .table-wrapper table thead th .sort-icon { width: 10px; height: 10px; background-size: contain; display: inline-block; margin-left: 4px; }
.backend .main-content .table-wrapper table thead th.sorting_asc .sort-icon { background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMjg2LjkzNSw2OS4zNzdjLTMuNjE0LTMuNjE3LTcuODk4LTUuNDI0LTEyLjg0OC01LjQyNEgxOC4yNzRjLTQuOTUyLDAtOS4yMzMsMS44MDctMTIuODUsNS40MjQgICBDMS44MDcsNzIuOTk4LDAsNzcuMjc5LDAsODIuMjI4YzAsNC45NDgsMS44MDcsOS4yMjksNS40MjQsMTIuODQ3bDEyNy45MDcsMTI3LjkwN2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOCAgIHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhMMjg2LjkzNSw5NS4wNzRjMy42MTMtMy42MTcsNS40MjctNy44OTgsNS40MjctMTIuODQ3QzI5Mi4zNjIsNzcuMjc5LDI5MC41NDgsNzIuOTk4LDI4Ni45MzUsNjkuMzc3eiIgZmlsbD0iI2NjY2NjYyIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=); }
.backend .main-content .table-wrapper table thead th.sorting_desc .sort-icon { background-image: url(../fonts/8f85231fb7d54297b763b729af0022a8.woff); }
.backend .main-content .table-wrapper table thead th.sorting { cursor: pointer; }
.backend .main-content .table-wrapper table thead th.sorting .sort-icon { background-image: url(../fonts/1e25a5034c1549339e4411ca8381eaa7.woff); }
.backend .main-content .table-wrapper table tbody tr { -webkit-transition: background-color 200ms ease-in-out; -o-transition: background-color 200ms ease-in-out; transition: background-color 200ms ease-in-out; }
.backend .main-content .table-wrapper table tbody tr td { height: 42px; padding: 0; font-size: 14px; color: #767676; }
.backend .main-content .table-wrapper table tbody tr:last-child { border-bottom: 0; }
.backend .main-content .table-wrapper table tbody tr:hover { background-color: rgba(0, 183, 234, 0.1); }
.backend .main-content .table-wrapper input[type="checkbox"] + span { margin-bottom: -8px; }
.backend .main-content .table-footer-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.backend .main-content .table-footer-wrapper .page-total { font-weight: bold; margin-top: 1em; margin-right: 40px; margin-bottom: 1em; color: rgba(0, 0, 0, 0.54); font-size: 14px; }
.backend .main-content .table-footer-wrapper .page-show-item { margin-right: auto; position: relative; }
.backend .main-content .table-footer-wrapper .page-show-item:before { content: ""; position: absolute; top: 0; left: -20px; border-left: 1px solid #ccc; height: 100%; }
.backend .main-content .table-footer-wrapper .page-show-item label { display: -webkit-box; display: -ms-flexbox; display: flex; height: 30px; line-height: 30px; color: rgba(0, 0, 0, 0.54); font-size: 14px; font-weight: bold; }
.backend .main-content .table-footer-wrapper .page-show-item label select { display: inline; height: 30px; line-height: 30px; width: auto; margin: 0 4px; }
.backend .main-content .table-footer-wrapper .pagination { margin-left: auto; width: auto; background: #fff; border: 1px solid #ccc; border-radius: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; }
.backend .main-content .table-footer-wrapper .pagination li { border-radius: 0; }
.backend .main-content .table-footer-wrapper .pagination li:first-child, .backend .main-content .table-footer-wrapper .pagination li:last-child { padding: 0 10px; }
.backend .main-content .table-footer-wrapper .pagination li:not(:last-child) { border-right: 1px solid #ccc; }
.backend .main-content .table-footer-wrapper .pagination li a { font-size: 14px; }
.backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > a { display: inline-block; border-radius: 0; text-align: center; vertical-align: top; height: 30px; color: #444; font-size: 14px; padding: 0 10px; line-height: 30px; }
.backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > a:first-of-type, .backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > a:last-of-type { padding: 0 10px; }
.backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > a:not(:last-of-type) { border-right: 1px solid #ccc; }
.backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > a:last-of-type { border-left: 1px solid #ccc; }
.backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > a a { font-size: 14px; }
.backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > a.disabled { cursor: default; color: #999; pointer-events: none; }
.backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > span a { display: inline-block; border-radius: 0; text-align: center; vertical-align: top; height: 30px; color: #444; font-size: 14px; padding: 0 10px; line-height: 30px; }
.backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > span a:not(:last-of-type) { border-right: 1px solid #ccc; }
.backend .main-content .table-footer-wrapper .pagination.dataTables_paginate > span a.current { color: #fff; background-color: #00b7ea; }
.backend .main-content .button-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.backend .main-content .button-wrapper a { color: #00b7ea; }
.backend .main-content .domain-status { position: relative; }
.backend .main-content .domain-status:before { content: ""; position: absolute; left: -20px; width: 15px; height: 15px; border-radius: 50%; background-color: #000; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: background-color 200ms ease-in-out; -o-transition: background-color 200ms ease-in-out; transition: background-color 200ms ease-in-out; }
.backend .main-content .domain-status.blacklist:before { background-color: #000; }
.backend .main-content .domain-status.dangerous:before { background-color: #ff0000; }
.backend .main-content .domain-status.normal:before { background-color: #27c989; }
.backend .main-content .select-wrapper.small-select { width: 60px; }
.backend .main-content .select-wrapper.small-select input { color: #767676; border-bottom: 0; margin-bottom: 0; }
.backend .main-content .select-wrapper.small-select:before { content: ""; position: absolute; left: -20px; width: 15px; height: 15px; border-radius: 50%; background-color: #000; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: background-color 200ms ease-in-out; -o-transition: background-color 200ms ease-in-out; transition: background-color 200ms ease-in-out; }
.backend .main-content .select-wrapper.small-select.disable:before { background-color: #ff0000; }
.backend .main-content .select-wrapper.small-select.enable:before { background-color: #27c989; }
.backend .password-modal { width: 360px; border-radius: 8px; top: 30% !important; color: #767676; }
.backend .password-modal .modal-content h4 { font-size: 20px; font-weight: bold; }
.backend .password-modal .modal-content p { font-size: 14px; }
.backend .password-modal .modal-footer { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; padding: 0 24px; }
.backend .password-modal .modal-footer a { height: 32px; line-height: 32px; }
.backend .password-modal .modal-footer a.new-password { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 8px; color: #767676; padding: 0 8px 0 16px; border: 1px solid #767676; }
.backend .password-modal .modal-footer a.new-password .password-text { display: inline; height: initial; line-height: initial; width: 80px; border: 0; margin: 0 8px 0 0; }
.backend .password-modal .modal-footer a.modal-close { padding: 0 32px; margin: 0 0 0 auto; border-radius: 8px; }
.backend .domain-list-modal { width: 850px; height: 70%; }
.backend .domain-list-modal .table-wrapper { overflow: auto; }
.backend .domain-list-modal .modal-close { position: absolute; top: 24px; right: 24px; border-radius: 50%; width: 36px; height: 36px; text-align: center; padding: 0; }
.backend .domain-list-modal .small-select { width: 90px !important; }
.backend .domain-list-modal .small-select.dangerous:before { background-color: #ff0000; }
.backend .domain-list-modal .small-select.normal:before { background-color: #27c989; }
.backend .domain-list-modal .small-select.blacklist:before { background-color: #000; }
.backend .blacklist-modal { width: 460px; border-radius: 8px; top: 30% !important; color: #767676; }
.backend .blacklist-modal .modal-content h4 { font-size: 20px; font-weight: bold; }
.backend .blacklist-modal .modal-content p { font-size: 14px; }
.backend .blacklist-modal .modal-content .input-field { margin-top: 30px; margin-bottom: 0; }
.backend .blacklist-modal .modal-content .form-desc { display: block; margin-bottom: 6px; }
.backend .blacklist-modal .modal-content .form-desc strong { padding-left: 10px; }
.backend .blacklist-modal .modal-footer { padding: 0 24px; }
.backend .blacklist-modal .modal-close { padding: 0 32px; margin: 0 0 0 auto; border-radius: 8px; }
.backend .login-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin-top: 88px; }
.backend .login-wrapper .big-logo { width: 50%; height: 100%; }
.backend .login-wrapper .login-form-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 50%; }
.backend .form { background-color: #fff; padding: 12px 24px 24px; width: 460px; border-radius: 8px; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08); }
.backend .form.login { width: 360px; }
.backend .form.login .button-wrapper { margin-top: 125px; }
.backend .form.compact .input-field { margin-bottom: 0; }
.backend .form.compact .input-field input { margin-bottom: 5px; }
.backend .form .input-field input { border-bottom-color: #ebebeb; }
.backend .form .form-title { font-size: 30px; font-weight: bold; color: #767676; margin-top: 8px; margin-bottom: 8px; }
.backend .form .form-sub-title { font-size: 14px; margin-top: 22px; margin-bottom: 34px; }
.backend .form .form-desc { display: block; margin-top: 0; margin-bottom: 24px; font-size: 14px; }
.backend .form .button-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; }
.backend .form .button-wrapper button { padding: 0 38px; border-radius: 8px; -webkit-box-shadow: none; box-shadow: none; }
.backend .form .button-wrapper button:first-child { margin-left: auto; margin-right: 4px; }

.announcement-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; opacity: 1; visibility: visible; -webkit-transition: opacity 300ms ease-in-out, visibility 300ms; -o-transition: opacity 300ms ease-in-out, visibility 300ms; transition: opacity 300ms ease-in-out, visibility 300ms; }
.announcement-wrapper p { margin: 0.5rem 0; }
.announcement-wrapper.fade-out { opacity: 0; visibility: hidden; }
.announcement-wrapper .announcement { position: relative; background-image: -webkit-gradient(linear, left bottom, left top, from(#066dcd), to(#94cff6)); background-image: -webkit-linear-gradient(bottom, #066dcd, #94cff6); background-image: -o-linear-gradient(bottom, #066dcd, #94cff6); background-image: linear-gradient(to top, #066dcd, #94cff6); padding: 2.5rem 1rem 1rem 1rem; border-radius: 0.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; width: 50rem; max-height: 80%; color: white; }
.announcement-wrapper .announcement .close { position: absolute; right: 0; top: 0; padding: 0.5rem; cursor: pointer; }
.announcement-wrapper .announcement-icon { margin-right: 1rem; }
.announcement-wrapper .announcement-content { overflow: auto; }
.announcement-wrapper .announcement-item:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.5); }

@media (max-width: 600px) {
    .announcement-wrapper .announcement-icon { width: 100px; }
    .announcement-wrapper .announcement-icon img { width: 100%; height: auto; }
    .announcement-wrapper .announcement { max-height: calc(100% - 2rem); width: calc(100% - 2rem); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
}