#dmit {
    font-family: 'Noto Sans TC', sans-serif !important;
}
body {
    background-color: #f5f7fb;
}
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 300;
    background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);
    width: 130px;
    transition: left .3s ease-out;
}
.sidebar.mobile-show {
    left: 0;
}
.sidebar-logo {
    padding: 30px 20px 0px;
    cursor: pointer;
    height: 60px;
    transition: padding .2s ease;
    -moz-transition: padding .2s ease;
    -ms-translation: padding .2s ease;
    -o-transition: padding .2s ease;
    -webkit-transition: padding .2s ease;
}
.sidebar-logo:hover {
    padding: 27px 16px 0px;
}
.sidebar-menu {
    position: relative;
    overflow: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #c7c7c7;
    transition: color .2s ease;
    -ms-translation: color .2s ease;
    -moz-transition: color .2s ease;
    -o-transition: color  .2s ease;
    -webkit-transition: color  .2s ease;
}
.menu-item:first-child {
    margin-top: 0px;
}
.menu-item:hover,.menu-item:focus {
    text-decoration: none;
    color: #ffffff;
}
.menu-item:hover img,.menu-item:focus img {
    padding-top: 0px;
}
.menu-item img {
    width: 40px;
    height: auto;
    margin-bottom: 5px;
    height: 80px;
    padding-top: 10px;
    transition: padding-top  .2s ease-in;
    -moz-transition: padding-top .2s ease-in;
    -o-transition: padding-top  .2s ease-in;
    -webkit-transition: padding-top  .2s ease-in;
}
.menu-item .menu-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    min-width: 40px;
}
.page-content {
    margin: 0px 0px 0px 130px;
}
.toolsbar {
    background-color: #ffffff;
    padding: 15px 25px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid rgba(0, 40, 100, 0.12);
}
.rightbar {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.tools-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0px 15px;
}
.tools-item:last-child {
    margin-right: 0px;
}
.tools-item .tools-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #9aa0ac;
    cursor: pointer;
}
.tools-item a:hover,.tools-item a:focus {
    text-decoration: none;
}
.tools-item .tools-link i {
    padding-right: 5px;
}
.tools-item .avatar {
    background-color: #ffffff;
}
.tools-item .dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 8px;
}
.tools-item .dropdown-menu a {
    display: block;
}
.tools-item .dropdown-menu a i {
    width: 30px;
    padding-right: 5px;
}
.notice-dropdown {
    min-width: 400px;
    max-width: 600px;
}
.tools-item .dropdown-menu a.notice {
    white-space: normal;
}
.tools-item .dropdown-menu a.notice i {
    font-size: 15px;
    padding-right: 5px;
    display: inline-block
}
.tools-item .dropdown-menu a.notice i.fa-info-circle,.tools-item .dropdown-menu a.notice i.fa-exclamation-triangle {
    color: #df9800;
}
.tools-item .dropdown-menu a.notice i.exclamation-circle {
    color: #b61613;
}
.tools-item .dropdown-menu a.notice i.fa-check-circle {
    color: #11a061;
}
.bell-new {
    background-color: #45aaf2;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    position: relative;
    right: 10px;
    bottom: 4px;
}
.user-textinfo {
    display: flex;
    flex-direction: column;
    padding-left: 8px;
    line-height: 1;
    font-size: 12px;
}
.user-textinfo .text-muted {
    margin-top: 2px;
}
.email-verification {
    background-color: unset;
    color: unset;
    font-weight: unset;
    padding: 20px;
}
.email-verification .alert {
    margin-bottom: 0px;
}
.email-verification i {
    font-size: 15px !important;
}
.email-verification i.fa-envelope-open-text {
    color: #24587e;
}
.email-verification i.fa-exclamation-circle {
    color: #6b1110;
}
.email-verification i.fa-check-circle {
    color: #316100;
}
.email-verification .btn-blue {
    color: #fff;
    background-color: #467fcf;
    border-color: #467fcf;
}
.email-verification .btn-danger {
    color: #ffffff;
    background-color: #cd201f;
    border-color: #cd201f;
}
.email-verification .email-verification-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 0px;
}
.main-bg {
    background-color: #ffffff;
}
.main-body {
    
}
.main-content {
    padding: 20px;
    margin-bottom: 0px;
}
.page-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 30px 20px 10px 20px;
    line-height: 1.5;
    border-bottom: none;
    margin: 0;
}
.page-header-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.page-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 1;
}
.page-header-right .btn-create i {
    width: 40px;
}
.page-header-right .create-new a {
    margin: 5px;
}
.page-header-right .page-header-invoices {
    display: flex;
    flex-direction: column;
    text-align: center;
}
.page-header-right .page-header-invoices .unpaid-all {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 6px;
}
.page-header-right .page-header-invoices .unpaid-amount {
    font-size: 25px;
    color: #ffae00;
}
.page-header .page-title {
    font-size: 35px;
    line-height: 1.5;
    font-weight: 500;
}
.page-header .page-desc {
    font-size: 15px;
}
.page-header .ticket-desc {
    display: flex;
    flex-direction: row;
    color: #999999;
    overflow-x: hidden;
    flex-wrap: wrap;
}
.page-header .ticket-desc .ticket-desc-item {
    margin-right: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
}
.page-header .ticket-desc .ticket-desc-item:last-child {
    margin-right: 5px;
}
.page-header .ticket-desc .ticket-desc-item div {
    padding-right: 5px;
}
.page-header .page-header-balance {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.page-header .page-header-balance .balance-amount {
    font-size: 28px;
    color: #0088ff;
    font-weight: 600;
    text-align: center;
}
.page-header .page-header-balance .balance-title {
    color: #999999;
    font-size: 12px;
    text-align: center;
}
.clienthome-userinfo {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.clienthome-userinfo img {
    width: 80px;
    height: 80px;
    margin-right: 10px;
}
.clienthome-userinfo .user-textinfo {
    font-size: 16px;
}
.phone-number {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    margin-top: 7px;
    align-items: center;
}
.phone-number .phone-number-title {
    font-size: 15px;
    color: #999999;
    margin-right: 5px;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
}
.phone-number .phone-number-title i {
    margin-right: 5px;
}
.phone-number .phone-number-text {
    font-size: 15px;
    color: #999999;
}
.phone-number .phone-number-status {
    margin-left: 5px;
    font-size: 9px;
    padding: 2px 8px;
    line-height: 1.1;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #ddf5e0;
    color: #11a061;
    white-space: nowrap;
    cursor: pointer;
    margin: 5px;
}
.phone-number .phone-number-status.error {
    background: #f7d7d7;
    color: #cd201f;
}
.phone-number .phone-number-status i {
    margin-left: 5px;
}
.new-ann {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}
.ann-desc {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.new-ann .ann-img {
    height: 20px;
    width: auto;
    margin-right: 5px;
}
.new-ann .ann-texts {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.new-ann .ann-title {
    color: #666666;
    margin-right: 5px;
    overflow: auto;
}
.new-ann .ann-date {
    color: #999999;
}
.card-header i {
    font-size: 16px;
    padding-right: 5px;
    color: #777777;
}
.card-header.custom-header {
    justify-content: space-between;
}
.ann-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    cursor: pointer;
}
.ann-item:last-child {
    margin-bottom: 0px;
}
.ann-item .ann-item-title {
    color: #555555;
    font-size: 15px;
    transition: all .3s;
}
.ann-item .ann-item-date {
    color: #999999;
    font-size: 12px;
}
.ann-item:hover .ann-item-title,.ann-item:focus .ann-item-title {
    color: #467fcf;
}
.none-ann {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-size: 15px;
}
.none-ann i {
    padding-right: 5px;
}
.table>thead>tr>th {
    border-bottom: 1px solid #dee2e6 !important;
}
.invoice-table>td {
    vertical-align: middle !important;
}
.user-balance {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-top: 15px;
    border-top: 1px solid #dee2e6;
    padding-top: 15px;
}
.balance-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    cursor: pointer;
}
.balance-info:hover .balance-text,.balance-info:focus .balance-text {
    color: #467fcf;
}
.balance-info .balance-text {
    font-size: 15px;
    margin-bottom: 3px;
    color: #444444;
    transition: all .3s;
    text-align: center;
}
.balance-info .balance-title {
    color: #999999;
    font-size: 11px;
    text-align: center;
}
.widget-ticket {
    display: flex;
    flex-direction: column;
}
.ticket-item {
    border-bottom: 1px solid #dee2e6;
    padding: 17px 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}
.ticket-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
}
.ticket-item .ticket-info {
    display: flex;
    flex-direction: column;
    max-width: 60%;
    flex: 1;
}
.ticket-item .ticket-info .ticket-title {
    color: #444444;
    font-size: 15px;
}
.ticket-item .ticket-info .ticket-date {
    margin-top: 3px;
    color: #999999;
    font-size: 12px;
}
.ticket-item .tag {
    margin-left: 10px;
}
.status-active {
    background-color: #0088ff;
    color: #ffffff;
}
.status-pending {
    background-color: #ffae00;
    color: #ffffff;
}
.status-suspended {
    background-color: #ff1135;
    color: #ffffff;
}
.status-unpaid {
    background-color: #ffae00;
    color: #ffffff;
}
.status-paid,.status-running {
    background-color: #1cb81c;
    color: #ffffff;
}
.status-terminated {
    background-color: #ff1135;
    color: #ffffff;
}
.status-cancelled {
    background-color: #ffae00;
    color: #ffffff;
}
.status-refunded {
    background-color: #ff1135;
    color: #ffffff;
}
.status-closed {
    background-color: #ff1135;
    color: #ffffff;
}
.status-open {
    background-color: #0088ff;
    color: #ffffff;
}
.status-answered {
    background-color: #ffae00;
    color: #ffffff;
}
.status-customer-reply {
    background-color: #5646e2;
    color: #ffffff;
}
.status-custom {
    background-color: #687fab;
    color: #ffffff;
}
.widget-products {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px 0px;
}
.buy-products {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.buy-products .products-img {
    width: 200px;
    height: auto;
    margin-bottom: 30px;
}
.products-area-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0px 0px 20px;
}
.products-area-title {
    font-size: 17px;
    color: #222222;
}
.products-area-title i {
    color: #555555;
    padding-right: 5px;
}
ul.products-list {
    list-style: none;
    padding-inline-start: 0px;
    -webkit-padding-start: 0px;
    margin-bottom: 0px;
}
.products-widget-pager {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.products-widget-pager .previous,.products-widget-pager .next {
    border: 1px solid rgba(0, 40, 100, 0.12);
    padding: 7px 18px;
    transition: all .3s;
    cursor: pointer;
}
.products-widget-pager .previous:hover,.products-widget-pager .next:hover {
    border: 1px solid rgba(0, 40, 100, 0.3);
}
.products-widget-pager .previous:hover a i,.products-widget-pager .next:hover a i {
    color: rgba(0, 40, 100, 0.4);
}
.products-widget-pager a i {
    color: rgba(0, 40, 100, 0.2);
    transition: all .3s;
}
.products-box.suspend {
    height: auto;
    cursor: default;
}
.products-box.suspend:hover {
    background-color: #ffffff;
}
.products-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    margin-bottom: 1.5rem;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid rgba(0, 40, 100, 0.12);
    padding: 17px 24px;
    transition: all .3s;
    cursor: pointer;
    height: 160px;
}
.products-box:hover,.products-box:focus {
    background-color: #f8f8f8;
}
.products-box:hover .products-title .products-title-text,.products-box:focus .products-title .products-title-text {
    color: #467fcf;
}
.products-title {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.products-title .products-title-text {
    font-size: 16px;
    color: #555555;
    font-weight: 600;
    transition: all .3s;
}
.products-title .products-domain {
    font-size: 12px;
    color: #999999;
    height: 18px;
}
.products-box-top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.products-box .tag {
    text-transform: uppercase;
}
.products-box .suspendreason {
    margin-top:5px;
    border-top: 1px solid rgba(0, 40, 100, 0.12);
    padding-top: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #ff1135;
}
.products-box .mainip {
    font-size: 14px;
    font-weight: 600;
    margin: 5px 0px;
    color: #0088ff;
}
.left-traffic {
    font-size: 14px;
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    align-items: baseline;
}
.left-traffic .left-traffic-used {
    font-size: 14px;
    color: #0088ff;
    font-weight: 600;
}
.left-traffic .left-traffic-total {
    font-size: 10px;
    color: #666666;
}
.due-date {
    font-size: 14px;
    margin: 7px 0px 5px;
}
.due-date.warning {
    color: #df9800;
}
.due-date.warning i {
    padding-right: 5px;
}
.due-date:last-child {
    margin-bottom: 0px;
}
.buy-box {
    border: 1px solid rgba(0, 40, 100, 0.12);
    height: 160px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s;
    margin-bottom: 1.5rem;
}
.buy-box:hover,.buy-box:focus {
    background-color: rgba(233, 233, 233, 0.301);
}
.buy-box img {
    width: 60px;
    height: auto;
}
.sale-box {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    margin-bottom: 1.5rem;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid rgba(0, 40, 100, 0.12);
    display: flex;
    flex-direction: row;
}
.sale-box .sale-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
}
.sale-info {
    display: flex;
    flex-direction: column;
}
.sale-box .sale-left .sale-title {
    font-size: 15px;
    color: #222222;
    margin-bottom: 8px;
}
.sale-box .sale-left .sale-text {
    font-size: 9px;
    color: #999999;
    margin-bottom: 7px;
}
.sale-box img {
    height: 200px;
    width: auto;
}
.show-accounts {
    display: none;
}
.mobile-menu {
    cursor: pointer;
    display: none;
}
.mobile-menu i {
    transition: all .3s;
}
.mobile-menu:hover i,.mobile-menu:focus i {
    color: #467fcf;
}
.hidden-accounts {
    display: block;
}
.listtable {
    width: 100%;
}
.listtable table {
    width: 100% !important;
    border: 1px solid #dee2e6;
}
.listtable table thead tr th{
    white-space: nowrap;
}
.listtable .Custom_dateTables_info {
    background-color: #ffffff;
    color: #495057;
    padding: 20px 0px;
}
.dataTables_filter input {
    border: 1px solid rgba(0, 40, 100, 0.12) !important;
}
.listtable .dataTables_filter label {
    padding-right: 0px;
}
.listtable td {
    vertical-align: middle !important;
}
.custom-service-table {
    border: 1px solid #dee2e6;
}
.custom-service-tr {
    height: 70px;
    cursor: pointer;
}
.custom-service-tr td .products-name {
    color: #999999;
}
.custom-service-tr td strong {
    color: #222222;
    scrollbar-width: none;
    -ms-overflow-style:none;
    overflow:-moz-scrollbars-none;
    scrollbar-width: none;
}
.custom-service-tr td strong::-webkit-scrollbar{
    display: none;
}
.custom-service-tr:focus,.custom-service-tr td:focus {
    outline: none;
}
.hidden-th {
    border-bottom: 1px solid #dee2e6;
}
.hidden-th:after {
    display: none !important;
}
.products-list-action {
    text-align: right;
}
.products-list-action i {
    cursor: pointer;
}
.products-list-action .dropdown-item i {
    width: 40px;
    text-align: center;
}
table.dataTable thead .sorting_asc:after {
    padding-right: 10px;
}
.products-location {
    width: 170px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.products-location img {
    height: 40px;
    width: auto;
    padding-right: 10px;
}
.products-location .products-location-text {
    font-size: 16px;
}
.products-location .products-location-text.know {
    text-transform: uppercase;
}
.dataTables_wrapper .dataTables_paginate {
    padding: 10px 0px;
    float: unset !important;
}
.dataTables_wrapper .dataTables_length {
    display: flex;
    flex-direction: row;
    width: auto;
    flex: 1;
    background-color: #ffffff;
}
div.dataTables_wrapper div.dataTables_length label {
    flex: 1;
    text-align: right;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 10px 0px;
    background-color: #ffffff;
    align-items: center;
    margin-bottom: 0px;
}
.dataTables_wrapper .dataTables_length .form-control.input-sm{
    border: 1px solid #dee2e6;
    margin: 0px 10px;
    font-size: 10px;
    height: 30px;
}
.not-wrap {
    white-space: nowrap;
}
.hide-mobile {
    display: block;
}
.highlight {
    margin: 0;
    border: none;
}
.unpaid-group {
    display: none;
}
#tableTicketsList .ticket-title {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #333333;
}
#tableTicketsList .ticket-title .ticket-subject {
    font-size: 15px;
    font-weight: 600;
}
#tableTicketsList .ticket-number {
    font-style: normal;
    font-size: 12px;
    color: #999999;
    margin-top: 2px;
}
#tableTicketsList .ticket-department {
    white-space: nowrap;
}
.ticket-subject.unread {
    color: #df9800;
}
.custom-nav {
    overflow: auto;
    -ms-overflow-style:none;
    overflow:-moz-scrollbars-none;
    scrollbar-width: none;
}
.custom-nav::-webkit-scrollbar {
    display: none;
}
.custom-nav-tabs {
    margin: 0;
    padding: 0px 10px;
    white-space: nowrap;
    flex-wrap: unset;
    width: 100%;
}
.custom-nav-tabs .nav-item {
    min-width: auto;
    padding: 0 0.75rem;
    border-bottom: 1px solid #dee2e6;
    margin: 0px 0px -1px;
    cursor: pointer;
}
.nav-tabs {
    margin: 0;
}
.nav-tabs .nav-link {
    margin: 0px 0px -1px;
    border-bottom: 1px solid #dee2e6;
}
.custom-nav-tabs .nav-item:hover,.custom-nav-tabs:focus,.custom-nav-tabs.active {
    color: #0088ff;
    background-color: #ffffff !important;
}
.custom-nav-tabs.nav-tabs .nav-link:hover:not(.disabled),.custom-nav-tabs.nav-tabs .nav-link:focus:not(.disabled) {
    border-color: #0088ff !important;
    color: #0088ff !important;
    background-color: #ffffff !important;
}
.custom-nav-tabs.nav-tabs>li.active>a, .custom-nav-tabs.nav-tabs>li.active>a:focus, .custom-nav-tabs.nav-tabs>li.active>a:hover {
    border: none;
    border-bottom: 1px solid #0088ff;
    color: #0088ff;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background-color: #0088ff;
    border-color: #0088ff;
}
.department-box {
    margin: 10px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #dee2e6;
    padding-top: 50px;
    min-height: 360px;
    cursor: pointer;
    transition: all .3s;
}
.department-box:hover,.department-box:focus {
    border: 1px solid #0088ff;
}
.department-box:hover .department-title,.department-box:focus .department-title {
    color: #0088ff;
}
.department-box .department-title {
    font-size: 18px;
    font-weight: 600;
    color: #222222;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 15px;
    transition: all .3s;
}
.department-box .department-title img {
    width: auto;
    height: 80px;
    margin-bottom: 20px;
}
.department-box .department-desc {
    padding: 20px 40px;
    text-align: center;
}
.ticket-success {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ticket-success img {
    height: 150px;
    width: auto;
    margin-bottom: 20px;
}
.ticket-success .ticket-success-title {
    font-size: 22px;
    margin-bottom: 15px;
}
.ticket-success .ticket-success-desc {
    max-width: 500px;
    font-size: 15px;
    text-align: center;
}
.next-btn-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 40px;
}
.next-btn-area i {
    margin-left: 5px;
}
.ticket-message-box {
    display: flex;
    flex-direction: column-reverse;
    border: 1px solid #e8f2fd;
    margin-bottom: 20px;
    background-color: #fafcff;
}
.ticket-message-box .ticket-reply {
    background-color: #f5f7fb;
    display: flex;
    flex-direction: row-reverse;
    margin: 0px;
    border: none;
    padding: 20px;
    align-items: flex-start;
}
.ticket-message-box .ticket-reply.staff {
    flex-direction: row;
}
.ticket-message-box .ticket-reply:last-child {
    border: none;
}
.ticket-message-box .ticket-sender {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    margin-left: 20px;
}
.ticket-message-box .ticket-reply.staff .ticket-sender {
    margin-left: 0px;
    margin-right: 20px;
}
.ticket-message-box .ticket-sender .sender-headimg {
    margin-bottom: 12px;
}
.ticket-message-box .ticket-sender .sender-headimg img {
    width: 40px;
    height: 40px;
}
.ticket-message-box .ticket-sender .sender-name {
    color: #888888;
    font-size: 15px;
    margin-bottom: 10px;
}
.ticket-message-box .ticket-sender .sener-type {
    padding: 4px 12px;
    background-color: #0088ff;
    color: #ffffff;
    font-size: 13px;
    white-space: nowrap;
    border-radius: 4px;
}
.ticket-message-box .ticket-reply.staff .sener-type {
    background-color: #cd201f;
}
.ticket-message-box .ticket-message {
    flex: 1;
    text-align: right;
}
.ticket-message-box .ticket-message .ticket-message-text {
    background-color: #0088ff;
    border: 1px solid rgba(0, 136, 255, 0.719);
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
    color: #ffffff;
}
.ticket-message-box .ticket-message .ticket-message-text hr {
    border: none;
}
.ticket-message-box .ticket-reply.staff .ticket-message .ticket-message-text {
    background-color: rgba(96, 185, 255, 0.19);
    color: #444444;
    border: 1px solid rgba(178, 208, 231, 0.19);
}
.ticket-message-box .ticket-reply.staff .ticket-message {
    text-align: left;
}
.ticket-message-box .ticket-message .ticket-date {
    color: #999999;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    white-space: nowrap;
    font-weight: 600;
}
.ticket-message-box .ticket-reply.staff .ticket-date {
    flex-direction: row;
}
.ticket-message-box .ticket-message .new-message {
    display: none;
    white-space: nowrap;
}
.ticket-message-box .ticket-reply:first-child .new-message:first-child {
    display: flex;
    margin: 0px 7px;
}
.ticket-reply .rating span.star:before, .ticket-reply .rating-done span.star:before {
    color: #565656;
    font-size: 17px;
}
.ticket-reply .rating span.star:hover:before, .ticket-reply .rating span.star:hover~span.star:before, .ticket-reply .rating-done span.star.active:before {
    color: #0088ff;
}
.ticket-reply .rating-done .rated {
    color: #555555;
    font-weight: 600;
}
.kb-top-box {
    border: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    margin-bottom: 20px;
    transition: all .3s;
    cursor: pointer;
}
.kb-top-box:hover,.kb-top-box:focus {
    border: 1px solid #0088ff;
    text-decoration: none;
}
.kb-top-box .kb-top-img {
    margin-bottom: 20px;
}
.kb-top-box .kb-top-img img {
    height: 80px;
    width: auto;
}
.kb-top-box .kb-top-title {
    font-size: 16px;
    color: #222222;
    font-weight: 600;
    text-align: center;
    transition: all .3s;
    min-width: 100px;
}
.kb-top-box:hover .kb-top-title,.kb-top-box:focus .kb-top-title {
    color: #0088ff;
}
.kb-bottom-box {
    border: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    padding: 30px;
    transition: all .3s;
    height: 400px;
}
.kb-bottom-box .kb-bottom-title {
    font-size: 18px;
    font-weight: 600;
    align-self: flex-start;
    margin-bottom: 25px;
    white-space: nowrap;
}
.kb-bottom-box .kb-bottom-body {
    display: flex;
    flex-direction: row;
}
.kb-bottom-box .hot-article {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    width: 100%;
}
.kb-bottom-box .hot-article .hot-article-item {
    margin-bottom: 20px;
    color: #555555;
    transition: all .3s;
}
.kb-bottom-box .hot-article .hot-article-item:hover,.kb-bottom-box .hot-article .hot-article-item:focus {
    color: #0088ff;
    text-decoration: none;
}
.kb-bottom-box .hot-article .hot-article-item i {
    color: #0088ff;
    padding-right: 5px;
}
.kb-bottom-box .kb-categories {
    width: 100%;
    padding: 0px 5px;
}
.kb-bottom-box .kb-categories .col-xs-12,.kb-bottom-box .kb-categories .col-sm-6,.kb-bottom-box .kb-categories .col-12 {
    padding-right: 5px;
    padding-left: 5px;
}
.kb-bottom-box .kb-categories .categorie-item {
    display: flex;
    flex-direction: row;
    border: 1px solid #dee2e6;
    padding: 20px;
    align-items: center;
    margin-bottom: 10px;
    transition: all .3s;
}
.kb-bottom-box .kb-categories .categorie-item:hover,.kb-bottom-box .kb-categories .categorie-item:focus {
    border: 1px solid #0088ff;
    text-decoration: none;
}
.kb-bottom-box .kb-categories .categorie-item img {
    width: 30px;
    height: 30px;
    margin-right: 20px;
}
.kb-bottom-box .kb-categories .categorie-item .categorie-title {
    color: #555555;
    transition: all .3s;
}
.kb-bottom-box .kb-categories .categorie-item:hover .categorie-title,.kb-bottom-box .kb-categories .categorie-item:focus .categorie-title {
    color: #0088ff;
    text-decoration: none;
}
.article-list {
    height: auto;
}
.article-list a {
    margin-bottom: 3px !important;
}
.article-list .article-desc {
    font-size: 10px;
    color: #888888;
    margin-bottom: 15px;
}
.none-article {
    margin: 60px 30px;
}
.none-article .error-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.none-article .error-area img {
    height: 100px;
    width: auto;
    margin-bottom: 20px; 
}
.none-article .error-area .error-text {
    color: #777777;
    margin-bottom: 20px;
    font-weight: 600;
    text-align: center;
    min-width: 120px;
}
.none-article .error-area a {
    min-width: 100px;
}
.custom-announcement {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
}
.custom-announcement .ann-title {
    color: #444444;
    font-size: 25px;
    margin-bottom: 15px;
    transition: all .3s;
}
.custom-announcement .ann-title:hover,.custom-announcement .ann-title:focus {
    text-decoration: none;
    color: #0088ff;
}
.custom-announcement .ann-desc {
    color: #999999;
    margin-bottom: 10px;
}
.custom-announcement .ann-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.custom-announcement .ann-bottom .ann-date {
    color: #777777;
}
.custom-announcement .ann-bottom .ann-date i {
    color: #0088ff;
    padding-right: 5px;
}
.custom-announcement .ann-bottom .read-more {
    color: #0088ff;
    padding: 3px 7px;
    font-size: 15px;
    border: 1px solid #0088ff;
    font-weight: 600;
    white-space: nowrap;
}
.custom-announcement .ann-bottom .read-more:hover,.custom-announcement .ann-bottom .read-more:focus {
    text-decoration: none;
}
.custom-announcement .fb-like {
    margin-top: 7px;
}
.ann-pager {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
.ann-pager input {
    height: 38px;
}
.ann-pager .ann-pager-item {
    flex: 1;
}
.none-data {
    margin: 60px 30px;
}
.none-data.addons {
    margin: 40px 30px;
}
.none-data.register {
    margin: 10px 0 0;
}
.none-data .error-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.none-data .error-area img {
    height: 100px;
    width: auto;
    margin-bottom: 20px; 
    display: flex;
    flex-direction: column;
    align-items: center;
}
.none-data .error-area .error-text {
    color: #777777;
    margin-bottom: 20px;
    font-weight: 600;
    text-align: center;
    min-width: 120px;
}
.none-data .error-area a {
    min-width: 100px;
}
.down-top-box {
    border: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    margin-bottom: 20px;
    transition: all .3s;
    cursor: pointer;
}
.down-top-box:hover,.down-top-box:focus {
    border: 1px solid #0088ff;
    text-decoration: none;
}
.down-top-box .down-top-img {
    margin-bottom: 20px;
}
.down-top-box .down-top-img img {
    height: 80px;
    width: auto;
}
.down-top-box .down-top-title {
    font-size: 16px;
    color: #222222;
    font-weight: 600;
    text-align: center;
    transition: all .3s;
    min-width: 100px;
}
.down-bottom-box {
    border: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    padding: 30px;
    transition: all .3s;
}
.down-bottom-box .down-bottom-title {
    font-size: 18px;
    font-weight: 600;
    align-self: flex-start;
    margin-bottom: 25px;
    white-space: nowrap;
}
.down-bottom-box .down-bottom-body {
    
}
.down-bottom-box .download-item {
    display: flex;
    flex-direction: row;
    border: 1px solid #dee2e6;
    padding: 20px;
    align-items: center;
    margin-bottom: 10px;
    transition: all .3s;
}
.down-bottom-box .download-item:hover,.down-bottom-box .download-item:focus {
    text-decoration: none;
    border: 1px solid #0088ff;
}
.down-bottom-box .download-item:hover .download-item-title,.down-bottom-box .download-item:focus .download-item-title {
    color: #0088ff;
}
.down-bottom-box .download-item img {
    width: 30px;
    height: 30px;
    margin-right: 20px;
}
.down-bottom-box .download-item .download-item-title {
    color: #555555;
    transition: all .3s;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.down-bottom-box .download-item .download-item-title .text-muted {
    padding-left: 4px;
}
.addfunds {
    display: flex;
    flex-direction: row;
    margin: 10px 0px;
}
.addfunds .addfunds-left {
    display: flex;
    flex-direction: column;
    width: 140px;
}
.addfunds .addfunds-right {
    display: flex;
    flex-direction: column;
    width: 500px;
}
.addfunds .addfunds-left .gateway-group {

}
.addfunds .addfunds-left .gateway-group .gateway-item {
    margin-bottom: 7px;
    display: flex;
    width: auto;
}
.addfunds .addfunds-left .gateway-group .gateway-item a {
    padding: 5px 0px;
    border-bottom: 2px solid rgba(255, 255, 255, 0);
    transition: all .3s;
    cursor: pointer;
}
.addfunds .addfunds-left .gateway-group .gateway-item a:hover,.addfunds .addfunds-left .gateway-group .gateway-item a:focus {
    border-color: #0088ff;
    border-bottom: 2px solid #0088ff;
}
.addfunds .addfunds-left .gateway-group .gateway-item a.active {
    border-bottom: 2px solid #0088ff;
}
.addfunds .addfunds-right .addfunds-title {
    font-size: 25px;
    color: #222222;
    margin-bottom: 20px;
}
.addfunds .addfunds-right .addfunds-amount {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}
.addfunds-amount-item {
    height: 55px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #222222;
    font-weight: 600;
    border: 1px solid #dee2e6;
    margin-right: 10px;
    transition: all .3s;
    cursor: pointer;
    border-radius: 4px;
    flex: 1;
}
.addfunds-amount-item:hover,.addfunds-amount-item:focus {
    border: 1px solid #4687e2;
    color: #4687e2;
}
.addfunds-amount-item.active {
    border: 1px solid #4687e2;
    background-color: #4687e2;
    color: #ffffff;
}
.addfunds-amount-item:last-child {
    margin-right: 0px;
}
.addfunds .addfunds-right .addfunds-btn {
    margin-top: 30px;
    margin-bottom: 10px;
}
.addfunds .addfunds-right .addfunds-tips {
    color: #222222;
    font-weight: 600;
    font-size: 10px;
}
.addfunds-input {
    margin: 10px 0px;
    display: none;
}
.addfunds-input .input-group-prepend .input-group-text {
    padding: 20px 8px 20px 25px;
    background-color: #ffffff;
    color: #0088ff;
    border: 1px solid #0088ff;
    border-right: none !important;
}
.addfunds-input input {
    padding-left: 4px;
    box-shadow: none;
    border: 1px solid #0088ff;
    border-left: none !important;
}
.addfunds-input input:hover,.addfunds-input input:focus {
    border: 1px solid #0088ff;
    border-left: none;
    box-shadow: none;
}
.form-control {
    height: auto;
}
.addfunds-error {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.addfunds-error i {
    color: #fd9644;
    padding-right: 5px;
}
.addfunds-error .addfunds-error-text {
    color: #fd9644;
    font-weight: 600;
}
.addfunds-error.align-top {
    align-items: baseline;
}
.ccard-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.ccard-group .ccard-item {
    height: 216px;
    width: 340px;
    background-image: url(https://www.dmit.io/templates/dmit_theme_2020/dmit/assets/images/dashboard/cc-bg.png);
    background-size: contain;
    border-radius: 8px;
    margin-right: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    position: relative;
}
.ccard-group .ccard-item:last-child {
    margin-right: 0px;
    margin-bottom: 0px;
}
.ccard-group .ccard-item .ccard-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
.ccard-group .ccard-item .ccard-top .ccard-status {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}
.ccard-group .ccard-item .ccard-top .ccard-type i {
    font-size: 25px;
    color: #ffffff;
}
.ccard-group .ccard-item .ccard-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}
.ccard-group .ccard-item .ccard-center .ccard-desc {
    padding-left: 5px;
    max-width: 155px;
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style:none;
    overflow:-moz-scrollbars-none;
    scrollbar-width: none;
}
.ccard-group .ccard-item .ccard-center .ccard-desc::-webkit-scrollbar{
    display: none;
}
.ccard-group .ccard-item .ccard-center .edit-ccard {
    padding-left: 10px;
    color: #ffffff;
}
.ccard-group .ccard-item .ccard-bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.ccard-group .ccard-item .ccard-bottom .ccard-name {
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
}
.ccard-group .ccard-item .ccard-bottom .btn-set-default {
    color: #ffffff;
    border: 1px solid #ffffff;
    background-color: rgba(88, 88, 88, 0.2)
}
.ccard-group .ccard-item .btn-delete {
    position: absolute;
    right: -10px;
    top: -10px;
    background-color: #ffffff;
    border-radius: 50%;
    width: 23px;
    height: 23px;
    align-items: center;
    display: flex;
    justify-content: center;
}
.ccard-group .ccard-item .btn-delete:hover,.ccard-group .ccard-item .btn-delete:focus {
    text-decoration: none;
}
.ccard-group .ccard-item .btn-delete i {
    font-size: 26px;
    color: #ff1135;
}
.ccard-group .ccard-item .ccard-bottom .ccard-expired {
    color: #ffcd63;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.ccard-group .ccard-item .ccard-bottom .ccard-expired i {
    padding-right: 5px;
}
.close:before {
    display: none;
};
.affpage {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.affpage .affpage-sign-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40px 0px;
}
.affpage .affpage-sign-top .affpage-sign-title {
    font-size: 28px;
    color: #222222;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
}
.affpage .affpage-sign-top .affpage-sign-text {
    color: #999999;
    font-size: 14px;
    text-align: center;
}
.affpage .affpage-sign-body {
    padding: 20px;
}
.affpage .affpage-sign-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    align-items: center;
    justify-content: center;
}
.affpage .affpage-sign-item img {
    height: 80px;
    width: auto;
    margin-bottom: 25px;
}
.affpage .affpage-sign-item .sign-item-title {
    font-size: 22px;
    color: #222222;
    margin-bottom: 5px;
    text-align: center;
    max-width: 300px;
}
.affpage .affpage-sign-item .sign-item-desc {
    color: #999999;
    font-size: 15px;
    text-align: center;
    max-width: 350px;
}
.affpage .affpage-sign-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.affpage .affpage-sign-bottom input {
    width: 200px;
    margin-top: 30px;
}
.affpage .affpage-tips {
    margin: 30px 40px; 
    display: flex;
    flex-direction: column;
}
.affpage .affpage-tips a {
    font-size: 10px;
    color: #d3d3d3;
    margin-bottom: 7px;
    cursor: unset;
}
.affpage .affpage-tips a:hover,.affpage .affpage-tips a:focus {
    color: #d3d3d3;
    text-decoration: none;
}
.aff-box {
    display: flex;
    flex-direction: column;
    border: 1px solid #dee2e6;
    margin-bottom: 25px;
    height: 230px;
}
.aff-box .aff-box-top {
    display: flex;
    flex-direction: row;
    margin: 20px;
    border-bottom: 1px solid #dee2e6;
    align-items: center;
    padding-bottom: 20px;
}
.aff-box .aff-box-top img {
    height: 80px;
    width: auto;
    padding-right: 30px;
}
.aff-box .aff-box-top .aff-top-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.aff-box .aff-box-top .aff-top-right .top-right-num {
    font-size: 25px;
    margin-bottom: 5px;
    color: #0088ff;
    white-space: nowrap;
}
.aff-box .aff-box-top .aff-top-right .top-right-title {
    font-size: 13px;
    color: #999999;
    font-weight: 600;
}
.aff-box .aff-box-bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0px 20px 20px;
}
.aff-box .aff-box-bottom .aff-bottom-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
}
.aff-box .aff-box-bottom .aff-bottom-item.left-item {
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid #dee2e6;
}
.aff-box .aff-box-bottom .aff-bottom-item img {
    height: 60px;
    width: auto;
    padding-right: 20px;
}
.aff-box .aff-box-bottom .aff-bottom-item .aff-bottom-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.aff-box .aff-box-bottom .aff-bottom-item .aff-bottom-right .bottom-right-num {
    font-size: 20px;
    color: #0088ff;
    white-space: nowrap;
}
.aff-box .aff-box-bottom .aff-bottom-item .aff-bottom-right .bottom-right-title {
    font-size: 11px;
    color: #999999;
    font-weight: 600;
}
.aff-link-box {
    padding: 20px;
    border: 1px solid #dee2e6;
    margin-bottom: 30px;
}
.aff-link-box .form-group {
    margin-bottom: 0px;
}
.withdraw-btn {
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.withdraw-msg {
    margin-bottom: 30px;
}
.copy-afflink {
    white-space: nowrap;
    width: 80px;
}
.copy-afflink i {
    display: none;
    transition: all 1s;
}
.user-profile-bg {
    padding: 20px;
    background-color: #ffffff;
}
.card-profile .user-bg {
    background-image: url(https://www.dmit.io/templates/dmit_theme_2020/dmit/assets/images/dashboard/user-bg.png);
    background-size: cover;
    opacity: 0.9;
}
.profile-group {
    display: flex;
    flex-direction: column;
    padding: 20px;
}
.profile-group .profile-item {
    margin: 5px 0px;
    padding: 6px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #868e96;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    transition: all .3s;
}
.profile-group .profile-item.active {
    background-color: #e9ecef;
    color: #6e7687;
} 
.profile-group .profile-item:hover,.profile-group .profile-item:focus {
    background-color: #e9ecef;
    color: #6e7687;
    text-decoration: none;
}
.profile-group .profile-item i {
    padding-right: 10px;
    width: 40px;
}
.using-password-strength {
    margin: 30px 0px;
}
#tableEmailsList_filter .dataTables_wrapper .dataTables_info {
    background-color: #ffffff !important;
}
.mobile-payments {
    display: none;
}
.masspay-table {
    border: 1px solid #dee2e6;
}
.masspay-title {
    color: #464646;
}
.masspay-bg {
    background-color: #efefef;
}
.masspay-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0px 20px;
}
.masspay-payments {
    display: flex;
    flex-direction: row;
}
.masspay-payments .masspay-payment-item {
    padding: 12px;
    border-radius: 4px;
    font-size: 14px;
    color: #95999e;
    border: 1px solid #dee2e6;
    margin-right: 10px;
    cursor: pointer;
    transition: all .3s;
}
.masspay-payments .masspay-payment-item:hover,.masspay-payments .masspay-payment-item:focus {
    border: 1px solid #babfc4;
    color: #6f7579;
}
.masspay-payments .masspay-payment-item.active {
    color: #0088ff;
    border: 1px solid #0088ff;
}
.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    font-family: 'Noto Sans TC', sans-serif !important;
}
.login-page.register {
    padding-top: 80px;
}
.logincontainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 375px;
    margin: 30px auto 10px auto;
}
.login-page .login-logo {
    display: flex;
    justify-content: center;
}
.login-page .login-logo img {
    height: 40px;
    width: 200px;
}
.login-page .small-title {
    color: #444444;
    font-size: 14px;
    margin-bottom: 15px;
    font-weight: 600;
}
.login-page .custom-switch {
    display: flex;
    justify-content: space-between;
}
.login-page .custom-switch .custom-switch-description {
    margin-left: 0px;
}
.login-page .login-btn {
    margin-top: 30px;
}
.login-page .pass-label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
}
.login-page .pass-label a{
    font-size: 9px;
}
.login-page .login-bottom {
    margin-bottom: 15px;
}
.login-page .social-signin-btns {
    display: flex;
    flex-direction: column;
}
.login-page .social-signin-btns button {
    flex: 1;
}
.login-page .using-password-strength {
    margin: 0px;
}
.login-page .sub-heading {
    border-top: none !important;
    margin: 10px 0px !important;
    text-align: left !important;
    height: auto !important;
}
.login-page .sub-heading span {
    color: #333333 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 0px !important;
}
.captcha {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.captcha-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
#default-captcha-domainchecker {
    margin-bottom: 0px !important;
}
#registration {
    padding-bottom: 0px;
}
.read-tos {
    margin: 25px 0px;
}
#sign-tos {
    display: none;
}
.sign-tos-skin {
	background-color: #ffffff;
	border-radius: 8px !important;
	height: 600px;
    width: 550px !important;
}
#sign-tos .sign-tos {
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#sign-tos .sign-tos .sign-tos-title {
    font-size: 22px;
    color: #222222;
    font-weight: 600;
    margin-bottom: 6px;
    text-align: center;
}
#sign-tos .sign-tos .sign-tos-text {
    color: #999999;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
}
#sign-tos .sign-tos .sign-tos-body {
    height: 400px;
    overflow-y: auto;
    white-space: normal;
    overflow-x: hidden;
    background-color: #f7f7f7;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #eeeeee;
}
#sign-tos .last-update {
    color: #646464;
    font-size: 15px;
    font-weight: 600;
    padding-bottom: 10px;
    margin-bottom: 10px;
    line-height: 1;
}
.invoice-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}
.invoice-header .invoice-col {
    display: flex;
    flex-direction: column;
}
.invoice-header .invoice-col .invoice-num {
    font-size: 36px;
    color: #444444;
    font-weight: 600;
}
.invoice-header .invoice-col .invoice-create {
    font-size: 15px;
    color: #888888;
}
.invoice-header .invoice-status {
    font-size: 20px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.invoice-header .invoice-status span {
    padding: 8px 28px;
    text-transform: uppercase;
    color: #ffffff;
}
.invoice-status .draft {
    background-color: #888;
}
.invoice-status .unpaid {
    background-color: #cc0000;
}
.invoice-status .paid {
    background-color: #779500;
}
.invoice-status .refunded {
    background-color: #224488;
}
.invoice-status .cancelled {
    background-color: #888;
}
.invoice-status .collections {
    background-color: #ffcc00;
}
.invoice-header .small-text {
    color: #888888;
    margin-top: 8px;
}
.invoice-payer {
    display: flex;
    flex-direction: row;
    margin: 30px 0px;
}
.invoice-payer .invoice-desc {
    flex: 1;
}
.invoice-payer .invoice-desc strong {
    font-size: 20px;
}
.invoice-payer .invoice-desc .small-text {
    color: #888888;
    font-weight: 600;
    font-size: 14px;
    margin-top: 15px;
}
.payment-btn-container {
    margin-top: 25px;
    width: 100%;
}
.invoice-bg {
    background-color: #f5f7fb;
}
.payment-msg {
    margin: 10px 0px;
    font-size: 14px;
    color: #888888;
    font-weight: 600;
    display: none;
}
.payment-msg i {
    padding-right: 5px;
}
.invoice-bg .input-group {
    width: auto;
}
.credit-apply {
    margin-bottom: 10px;
    font-size: 14px;
    color: #888888;
    font-weight: 600;
}
.credit-apply div {
    color: #0088ff;
    display: inline-block;
}
.credit-apply i {
    padding-right: 5px;
}
.products-billing-box {
    padding: 20px;
    border: 1px solid #e8f2fd;
    margin-bottom: 20px;
    background-color: #fafcff;
}
.products-billing-box.addons {
    height: 323px;
    display: flex;
    flex-direction: column;
}
.products-billing-title {
    color: #999999;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.products-billing {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.products-billing .products-billing-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 15px 0px;
    padding: 10px 20px 10px 0px;
    font-size: 15px;
    font-weight: 600;
    min-width: 250px;
    white-space: nowrap;
    flex-wrap: wrap;
    flex: 1;
}
.products-billing .products-billing-item .billing-item-title {
    color: #666666;
    flex: 1;
    min-width: 150px;
    text-transform: capitalize;
}
.products-billing .products-billing-item .billing-item-desc {
    color: #333333;
    flex: 1;
}
.products-billing-box .addons-status {
    padding: 3px 10px;
}
.form-control {
    box-shadow: none;
}
table.card-table>tbody>tr {
    transition: all .3s;
}
table.card-table>tbody>tr:hover {
    background-color: #f9fbff;
}
.ssh-key-btns button {
    margin: 10px;
}
.assignedip-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.assignedip-box {
    padding: 10px;
    border: 1px solid #e8f2fd;
    margin-bottom: 20px;
    background-color: #fafcff;
    margin-right: 20px;
    width: 260px;
}
.assignedip-box .assignedip-title {
    color: #999999;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.assignedip-box .assignedip-ip {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: #777777;
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
}
.layui-layer-btn .layui-layer-btn0 {
    color: #fff !important;
}
.norenew {
    color: #cc0000;
    padding-left: 6px;
}
.autorenew {
    color: #0088ff;
    padding-left: 6px;
}
.card-profile-img {
    background-color: #ffffff;
}
.flag-container ul.country-list {
    z-index: 999;
}
.email-verification .alert .row {
    width: 100%;
}
.payment-form .form-row {
    flex-direction: column;
}
@media screen and (max-width: 992px) {
    .show-accounts {
        display: block;
    }
    .hidden-accounts {
        display: none;
    }
    .products-location {
        width: 120px;
    }
    .mobile-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .kb-bottom-box:first-child {
        margin-bottom: 20px;
    }
    .products-widget-pager {
        margin-bottom: 1.5rem;
    }
    .form-horizontal .control-label {
        text-align: left;
        margin-bottom: 7px;
    }
}
@media screen and (max-width: 777px) {
    .hide-mobile {
        display: none;
    }
}
@media screen and (max-width: 767px) {
    .table-responsive {
        border: none;
    }
    .sidebar {
        left: -130px;
    }
    .page-content {
        margin: 0;
    }
    .notice-dropdown {
        min-width: 270px;
        max-width: 400px !important;
    }
    .mobile-menu {
        display: block;
    }
    .new-ann .ann-img {
        height: 30px;
    }
    .new-ann .ann-texts {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .widget-ticket .ticket-action {
        display: none;
    }
    .ticket-item .ticket-info {
        max-width: unset;
    }
    .listtable table thead {
        display: none;
    }
    .dataTables_wrapper .dataTables_filter label {
        margin: 0px 0px 8px 0px;
    }
    .listtable .tag {
        white-space: nowrap;
    }
    .card-table tr td:first-child, .card-table tr th:first-child {
        padding-left: 8px;
    }
    .card-table tr td:last-child, .card-table tr th:last-child {
        padding-right: 8px;
    }
    .ccard-group {
        justify-content: center;
    }
    .ccard-group .ccard-item {
        margin-bottom: 20px;
        margin-right: 0px;
    }
    .ccard-group .ccard-item:last-child {
        margin-bottom: 0px;
        margin-right: 0px;
    }
    .mobile-payments {
        display: block;
    }
    .addfunds-left {
        display: none !important;
    }
    .sign-tos-skin {
        width: 95% !important;
    }
}
@media screen and (max-width: 565px) {
    .kb-bottom-box {
        height: auto;
    }
    .aff-box {
        height: auto;
    }
    .aff-box .aff-box-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    .aff-box .aff-bottom-item.left-item {
        padding-right: 0px !important;
        margin-right: 0px !important;
        border-right: none !important;
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 20px;
        padding-bottom: 20px;
        width: 100%;
    }
    .aff-box .aff-bottom-item img {
        height: 80px !important;
        width: auto !important;
        padding-right: 30px !important;
    }
    .aff-box .aff-bottom-right .bottom-right-num{
        font-size: 25px !important;
        margin-bottom: 5px !important;
    }
    .aff-box .aff-bottom-right .bottom-right-title {
        font-size: 13px !important;
    }
}
@media screen and (max-width: 500px) {
    .tools-link .user-textinfo {
        display: none;
    }
    .invoice-card tr td {
        text-align: center !important;
        padding-right: 0px !important;
    }
    .invoice-card .table-responsive {
        margin-bottom: 0px;
    }
    .phone-number {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .phone-number .phone-number-status {
        margin-top: 5px;
        margin-left: 0px;
    }
    .ticket-message-box .ticket-date {
        flex-wrap: wrap;
    }
    .ticket-message-box .ticket-date .new-message {
        margin: 0px 2px !important;
    }
    .login-page {
        padding-top: 50px;
    }
}
@media screen and (max-width: 380px) {
    .ccard-group .ccard-item {
        height: 162px;
        width: 255px;
    }
}