@charset "UTF-8";

.fa, .far, .fas, .fal {
    font-family: 'Font Awesome 5 Pro'!important;
}

.primary-color {
	color: #2563EB
}

.dark {color: #fff;}

/* CSS Variables for Blue Theme */
:root {
    --primary-color: #2563EB;        /* Blue-600 */
    --primary-hover: #1D4ED8;        /* Blue-700 */
    --primary-light: #3B82F6;        /* Blue-500 */
    --primary-dark: #1E40AF;         /* Blue-800 */
    --primary-alpha: rgba(37, 99, 235, 0.2);
}

/* Clean Icon Toggle Design */
.btn-dark-mode {
    position: relative;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 2px solid #e1e5e9;
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-dark-mode:hover {
    border-color: #2563EB;
    box-shadow: 0 4px 12px rgba(83, 40, 251, 0.2);
    transform: translateY(-1px);
}

.btn-dark-mode:focus {
    box-shadow: 0 0 0 3px rgba(83, 40, 251, 0.1);
}

/* Icons */
.btn-dark-mode .dark-icon,
.btn-dark-mode .light-icon {
    position: absolute;
    font-size: 20px;
    transition: all 0.3s ease;
}

.btn-dark-mode .dark-icon {
    color: #6c757d;
    opacity: 0;
    transform: scale(0.8) rotate(180deg);
}

.btn-dark-mode .light-icon {
    color: #ff8c00 !important;
    opacity: 1 !important;
    transform: scale(1) rotate(0deg);
    text-shadow: 0 0 8px rgba(255, 140, 0, 0.5) !important;
    display: block !important;
}

/* Dark mode styles */
.dark .btn-dark-mode {
    background: #2a2a2a;
    border-color: #404040;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark .btn-dark-mode:hover {
    border-color: #2563EB;
    box-shadow: 0 4px 12px rgba(83, 40, 251, 0.3);
}

.dark .btn-dark-mode .dark-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    color: #ffc107;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
}

.dark .btn-dark-mode .light-icon {
    opacity: 0;
    transform: scale(0.8) rotate(-180deg);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .btn-dark-mode {
        width: 45px;
        height: 45px;
        border-radius: 22.5px;
    }
    
    .btn-dark-mode .dark-icon,
    .btn-dark-mode .light-icon {
        font-size: 18px;
    }
    
    .mobile-dark-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: middle !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .mobile-dark-btn .dark-icon,
    .mobile-dark-btn .light-icon {
        font-size: 16px !important;
    }
}

/* MODERN CLEAN MOBILE MENU */
#mobileMenu {
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.simple-mobile-menu {
    background: #ffffff;
    margin: 12px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    overflow: hidden;
}

.mobile-nav {
    padding: 8px 0;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f9fafb;
}

.mobile-nav-item:last-child {
    border-bottom: none;
}

.mobile-nav-item:hover {
    background: #f8fafc;
    color: #2563EB;
    text-decoration: none;
}

.mobile-nav-item i {
    width: 20px;
    margin-right: 16px;
    font-size: 16px;
    color: #6b7280;
}

.mobile-nav-item:hover i {
    color: #2563EB;
}

.mobile-nav-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 0;
}

/* Button styles */
.signin-btn {
    color: #2563EB !important;
    background: rgba(83, 40, 251, 0.05);
}

.signin-btn:hover {
    background: rgba(83, 40, 251, 0.1) !important;
}

.signin-btn i {
    color: #2563EB !important;
}

.signup-btn {
    color: #ffffff !important;
    background: #2563EB;
}

.signup-btn:hover {
    background: #4c1d95 !important;
    color: #ffffff !important;
}

.signup-btn i {
    color: #ffffff !important;
}

/* CLEAN MOBILE MENU - NO EXCESSIVE BORDERS */
.simple-mobile-menu {
    background: #ffffff;
    margin: 12px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
    overflow: hidden;
}

.mobile-nav {
    padding: 4px 0;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    border-bottom: none; /* ลบเส้นล่าง */
}

.mobile-nav-item:hover {
    background: #f8fafc;
    color: #2563EB;
    text-decoration: none;
}

.mobile-nav-item i {
    width: 20px;
    margin-right: 16px;
    font-size: 16px;
    color: #6b7280;
}

.mobile-nav-item:hover i {
    color: #2563EB;
}

.mobile-nav-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 16px; /* เพิ่ม margin ซ้าย-ขวา */
}

/* Button styles - เข้ากับธีมเว็บ */
.signin-btn {
    color: #2563EB !important;
    background: rgba(83, 40, 251, 0.05);
}

.signin-btn:hover {
    background: rgba(83, 40, 251, 0.1) !important;
}

.signin-btn i {
    color: #2563EB !important;
}

.signup-btn {
    color: #ffffff !important;
    background: #2563EB;
    border-radius: 12px;
}

.signup-btn:hover {
    background: #4c1d95 !important;
    color: #ffffff !important;
}

.signup-btn i {
    color: #ffffff !important;
}

/* Dark Mode - ใช้สีของเว็บ */
.dark .simple-mobile-menu {
    background: #2d2d2d; /* ใช้สีเข้มแบบเว็บ */
    border-color: #404040;
}

.dark .mobile-nav-item {
    color: #e0e0e0; /* สีข้อความโทนเทา */
}

.dark .mobile-nav-item:hover {
    background: #404040;
    color: #2563EB; /* ใช้สีม่วงเดิมของเว็บ */
}

.dark .mobile-nav-item i {
    color: #999999;
}

.dark .mobile-nav-item:hover i {
    color: #2563EB;
}

.dark .mobile-nav-divider {
    background: #404040;
}

.dark .signin-btn {
    color: #2563EB !important;
    background: rgba(83, 40, 251, 0.15);
}

.dark .signin-btn:hover {
    background: rgba(83, 40, 251, 0.25) !important;
}

.dark .signin-btn i {
    color: #2563EB !important;
}

.mobile-menu-section {
    margin-bottom: 32px;
}

.mobile-menu-section:last-child {
    margin-bottom: 0;
}

.mobile-menu-title {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f3f4f6;
}

/* Menu Links */
.mobile-menu-link {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border-radius: 12px;
    text-decoration: none;
    color: #374151;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mobile-menu-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: #2563EB;
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.mobile-menu-link:hover::before {
    transform: scaleY(1);
}

.mobile-menu-link:hover {
    background: #e0e7ff;
    color: #2563EB;
    text-decoration: none;
    transform: translateX(8px);
}

.mobile-menu-link i {
    width: 20px;
    margin-right: 16px;
    font-size: 18px;
    color: #2563EB;
}

/* Buttons */
.mobile-menu-buttons {
    display: flex;
    gap: 12px;
}

.mobile-menu-buttons .btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.mobile-menu-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(83, 40, 251, 0.3);
}

/* Theme Toggle */
.mobile-menu-theme-toggle {
    display: flex;
    justify-content: center;
}

.btn-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: #f3f4f6;
    border: none;
    border-radius: 50px;
    color: #374151;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
}

.btn-theme-toggle:hover {
    background: #e5e7eb;
    transform: translateY(-1px);
}

.btn-theme-toggle i {
    font-size: 16px;
}

/* Theme Icons Control */
.theme-icon-dark,
.theme-text-dark {
    display: inline-block;
}

.theme-icon-light,
.theme-text-light {
    display: none;
}

.dark .theme-icon-dark,
.dark .theme-text-dark {
    display: none;
}

.dark .theme-icon-light,
.dark .theme-text-light {
    display: inline-block;
}

/* Dark Mode */
.dark .mobile-menu-container {
    background: #1f2937;
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .mobile-menu-title {
    color: #9ca3af;
    border-bottom-color: #374151;
}

.dark .mobile-menu-link {
    background: #374151;
    color: #e5e7eb;
}

.dark .mobile-menu-link:hover {
    background: #4b5563;
    color: #818cf8;
}

.dark .mobile-menu-link i {
    color: #818cf8;
}

.dark .btn-theme-toggle {
    background: #374151;
    color: #e5e7eb;
}

.dark .btn-theme-toggle:hover {
    background: #4b5563;
}

/* FORCE MENU ITEMS STYLES */
#mobileMenu .mobile-menu-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#mobileMenu .mobile-menu-item {
    width: 100% !important;
}

/* BEAUTIFUL MENU LINKS */
#mobileMenu .mobile-menu-item .mm-link {
    display: flex !important;
    align-items: center !important;
    padding: 18px 20px !important;
    background: rgba(103, 126, 234, 0.05) !important;
    border-radius: 15px !important;
    text-decoration: none !important;
    color: #4a5568 !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid rgba(103, 126, 234, 0.1) !important;
}

#mobileMenu .mobile-menu-item .mm-link:hover {
    background: rgba(103, 126, 234, 0.1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(103, 126, 234, 0.15) !important;
    color: #667eea !important;
}

#mobileMenu .mobile-menu-item .mm-link i {
    color: #667eea !important;
    margin-right: 15px !important;
    font-size: 18px !important;
    width: 25px !important;
    text-align: center !important;
}

.mobile-menu-item .mm-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: #2563EB;
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.mobile-menu-item .mm-link:hover::before {
    transform: scaleY(1);
}

.mobile-menu-item .mm-link:hover {
    background: #e0e7ff;
    color: #2563EB;
    text-decoration: none;
    transform: translateX(8px);
}

.mobile-menu-item .mm-link i {
    width: 20px;
    margin-right: 16px;
    font-size: 18px;
    color: #2563EB;
}

/* Buttons in mobile menu */
.mobile-menu-item .btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
    justify-content: center;
}

.mobile-menu-item .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(83, 40, 251, 0.3);
}

/* Dark mode - เก่า */
.dark .mobile-menu-container {
    background: #1f2937;
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .mobile-menu-item .mm-link {
    background: #374151;
    color: #e5e7eb;
}

.dark .mobile-menu-item .mm-link:hover {
    background: #4b5563;
    color: #818cf8;
}

.dark .mobile-menu-item .mm-link i {
    color: #818cf8;
}

.mobile-menu-item {
    margin-bottom: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.mobile-menu-item:last-child {
    border-bottom: none;
}

.mobile-dark-toggle {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mobile-dark-toggle .mm-text {
    font-weight: 500;
    color: #333;
}

.dark .mobile-dark-toggle .mm-text {
    color: #fff;
}

.dark .mobile-menu-item {
    border-color: #333;
}

.mm-link {
    display: block;
    padding: 10px 0;
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

.dark .mm-link {
    color: #fff;
}

.mm-link:hover {
    color: #2563EB;
    text-decoration: none;
}

a, a:hover {
	text-decoration: none!important
}

body {
	transition: .14s ease;
}

.hidden {
	display: none!important
}

.pagination {
  flex-wrap: wrap;
}

.container-xxl {
    width: 100%;
    padding-right: 60px;
    padding-left: 60px;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 768px) {
    .container-xxl {
        padding-right: 30px;
        padding-left: 30px;
    }
}

@media (max-width: 576px) {
    .container-xxl {
        padding-right: 25px;
        padding-left: 25px;
    }
}

.text-end, .text-md-end, .text-lg-end {
    text-align: right!important;
}

.text-start, ..text-md-start, .text-lg-start {
    text-align: left!important;
}

pre.code {
	color: #3E4954 !important;
    background: #F0F4F5 !important;
  	border-radius: 5px;
  	padding: 10px
}

.main-color {
	color: #2563EB
}

.main, .page-content {
 	overflow-x: hidden!important
}

.header {
  background: white;
  z-index: 1003;
  display: block;
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 104px;
}

.header-content {
  height: 104px;
}

.header-user {
	border-left: 1px solid #F3F3F3;
	padding-left: 25px
}

.header-user .hu-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  /*background: rgba(30, 170, 231, 0.25);*/
  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;
}

.header-user .hu-avatar .hu-avatar-img {
  border-radius: 50%;
  width: 60px;
}

.header-user .hu-username {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #3E4954;
  margin-bottom: 4px;
}

.header-user .hu-balance {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #3E4954;
  opacity: 0.4;
}

.header-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -24px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  list-style-type: none;
}

.header-menu .hm-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0 24px;
  position: relative
}

.header-menu .hm-item .hm-link {
  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: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  color: #3E4954;
  font-weight: 600;
  font-size: 14px;
  border: none;
  outline: none;
  background: transparent;
}

.header-menu .hm-item .hm-link::after {
  display: none;
}

.header-menu .hm-item .hm-link .hm-icon {
  font-size: 20px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  -webkit-transition: .14s ease;
  transition: .14s ease;
  margin-bottom: 2px;
}

.header-menu .hm-item .hm-link .hm-toggle-icon {
  margin-left: 4px;
  font-size: 11px
}

.header-menu .hm-item .hm-link:hover .hm-icon {
  background: #2563EB;
  -webkit-transform: translateY(-6px);
          transform: translateY(-6px);
  color: #fff;
}

.header-right-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -8px;
  list-style: none;
}

.header-right-menu .hrm-item {
  padding: 0 8px;
}

.header-right-menu .hrm-item .hrm-link {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: none;
  outline: none;
  background: transparent;
}

.header-right-menu .hrm-item .hrm-link::after {
  display: none;
}

.header-right-menu .hrm-item .hrm-link .hrm-icon {
  width: 42px;
  height: 42px;
  background: #F0F4F5;
  border-radius: 50%;
  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;
  font-size: 18px;
  line-height: 18px;
  color: #3E4954;
  -webkit-transition: .14s ease;
  transition: .14s ease;
  z-index: 2;
  position: relative;
}

.header-right-menu .hrm-item .hrm-link .hrm-icon::before {
  content: '';
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2563EB;
  position: absolute;
  z-index: 2;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: .14s ease;
  transition: .14s ease;
}

.header-right-menu .hrm-item .hrm-link .hrm-icon i, .header-right-menu .hrm-item .hrm-link .hrm-icon .hrm-flag-icon {
  position: relative;
  z-index: 3;
}

.header-right-menu .hrm-item .hrm-link .hrm-text {
  margin-top: 4px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  text-align: center;
  color: #3E4954;
}

.header-right-menu .hrm-item .hrm-link:hover .hrm-icon {
  color: #fff;
}

.header-right-menu .hrm-item .hrm-link:hover .hrm-icon .hrm-flag-icon {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

.header-right-menu .hrm-item .hrm-link:hover .hrm-icon::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.hrm-flag-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: .14s ease;
  transition: .14s ease;
}

.form-label, .control-label {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  margin-bottom: 8px;
  padding-left: 2px;
}

.form-control {
  min-height: 50px;
  background: #F6F6F6;
  border-radius: 5px;
  border: none;
  font-size: 14px;
  line-height: 18px;
  color: #3E4954;
  padding: 16px 24px;
}

.fc-white {
  background-color: #f6f6f5;
}

.form-select {
  min-height: 50px;
  background-color: #F6F6F6;
  border-radius: 5px;
  border: none;
  font-size: 14px;
  line-height: 18px;
  color: #3E4954;
  padding: 16px 24px;
}

.input-group-text {
  background-color: #F6F6F6;
  border: none;
}

.igt-box {
  font-size: 11px;
  line-height: 13px;
  color: #FFFFFF;
  background-color: #2563EB;
  border-radius: 5px;
  display: inline-block;
  padding: 12px 10px;
}

.igt-sq {
  font-size: 11px;
  line-height: 13px;
  color: #FFFFFF;
  background-color: #2563EB;
  border-radius: 5px;
  display: inline-block;
  padding: 12px 10px;
  height: 45px;
  width: 45px;
  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;
  font-weight: normal;
  font-size: 25px;
  line-height: 25px;
}

.btn {
  font-size: 13px;
  line-height: 17px;
  font-weight: 600;
  border: none;
  padding: 15px 25px;
}

.btn-lg {
  padding: 20px 30px;
  font-size: 14px;
  line-height: 17px;
}

.btn-home {
  padding: 22px 34px;
  font-size: 14px;
  line-height: 17px;
  border-radius: 15px;
}

/* เฉพาะปุ่ม signup ที่ไม่ใช่ primary */
.btn-home:not(.btn-primary) {
  border: 2px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
  transition: all 0.3s ease;
}

.btn-home:not(.btn-primary):hover {
  border-color: #2563EB;
  color: #2563EB;
  background: #f8fafc;
  text-decoration: none;
}

.btn-home.btn-primary {
  -webkit-box-shadow: 0px 24px 40px rgba(30, 170, 231, 0.33);
  box-shadow: 0px 2px 10px rgb(32 30 231 / 33%);
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-primary {
  background-color: #2563EB;
}

.btn-primary:hover {
  background-color: #14a3d6;
}

.btn-secondary {
  background-color: #3E4954;
}

.btn-secondary:hover {
  background-color: #4f5a65;
}

.btn-language {
  height: 56px;
  padding: auto 14px;
  background: #FFFFFF;
  -webkit-box-shadow: 0px 24px 100px rgba(88, 88, 88, 0.1);
          box-shadow: 0px 24px 100px rgba(88, 88, 88, 0.1);
  border-radius: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flag-icon {
  border: 2px solid #eee;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  -o-object-fit: cover;
     object-fit: cover;
}

.btn-outline-primary {
  border: 1px solid #2563EB;
  color: #2563EB;
  border-radius: 30px;
}

.btn-outline-primary:hover {
  border-color: #2563EB;
  background-color: #2563EB;
  color: #fff;
}

body, html {
  background: #0A2753;
  font-family: 'Noto Sans Thai', 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  min-height: 100vh;
}

.app-body {
  background-color: #F7F7F7;
}

.p-color {
  color: #2563EB;
}

.m-color {
  color: #3E4954;
}

.d-color {
  color: #E12020;
}

.alert {
  border: none;
  padding: 23px;
  font-size: 14px;
  line-height: 21px;
  border-radius: 10px
}

.alert.alert-danger {
  color: #ED1C1C;
  background: rgba(237, 28, 28, 0.12);
}

.alert.alert-success {
    color: #fffffe;
    background-color: #22c5fb;
    -webkit-box-shadow: 10px 5px 10px rgb(30 170 231 / 50%);
}

.alert.alert-secondary {
  background: rgba(135, 135, 135, 0.25);
  color: #9F9F9F;
}

.alert.alert-primary {
  background: rgba(34, 200, 254, 0.25);
  color: #2563EB;
}

.alert.alert-warning {
  background: rgba(237, 206, 28, 0.12);
  color: #edb51c;
}

.container-xxl {
  max-width: 1560px;
}

.main {
  padding-top: 104px;
  position: relative;
  background: #F7F7F7;
  padding-bottom: 30px;
  min-height: 100vh;
}

.page-content {
  padding-top: 34px;
}

/* card */
.card {
  border: none;
  background: #fff;
  border-radius: 14px;
}

.card-body-2 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: 1.75rem 1.75rem;
}

.nip-card {
  background-color: #2563EB;
  background-size: cover;
  background-position: center;
  -webkit-box-shadow: 0px 24px 40px rgba(30, 170, 231, 0.33);
          box-shadow: 0px 24px 40px rgba(30, 170, 231, 0.33);
  border-radius: 10px;
  border: none;
  position: relative;
}

.nip-card::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  width: 50%;
  height: 100%;
  background-image: url();
  background-size: auto 100%;
  z-index: 1;
}

.nip-card::after {
  content: '';
  position: absolute;
  right: 0px;
  top: 0px;
  width: 50%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: right;
  z-index: 1;
}

.nip-card .nip-body {
  z-index: 5;
  position: relative;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.nip-item {
  color: #fff;
}

.nip-item .nip-icon {
  font-size: 40px;
  line-height: 40px;
  margin-bottom: 10px;
}

.nip-item .nip-title {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 6px;
}

.nip-item .nip-text {
  font-size: 23px;
  line-height: 32px;
  font-weight: 700;
}

.nop-card .card-body {
  padding: 18px 18px 18px 40px;
}

.nop-card .nop-title {
  font-size: 20px;
  line-height: 32px;
  color: #3E4954;
}

.nop-card .nop-title span {
  font-weight: 600;
}

.nop-card .nop-icon {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(30, 170, 231, 0.15);
  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;
}

.nop-card .nop-icon i {
  font-size: 40px;
  line-height: 40px;
  color: #2563EB;
}

.nop-card .nop-progress {
  font-weight: 600;
  font-size: 25px;
  line-height: 32px;
  color: #3E4954;
}

.nop-card .progress {
  height: 8px;
  border-radius: 4px;
  background: #EDEDED;
  margin: 8px 0 20px;
}

.nop-card .progress .progress-bar {
  height: 8px;
  background: linear-gradient(269.67deg, #3B82F6 2.87%, #1D4ED8 98.83%);
  border-radius: 4px;
}

.nop-card .nop-text {
  font-size: 14px;
  line-height: 1.4;
  color: #3E4954;
}

.nop-card .nop-box {
  background-color: #2563EB;
  background-image: url();
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-box-shadow: 0px 24px 40px rgba(30, 170, 231, 0.33);
          box-shadow: 0px 24px 40px rgba(30, 170, 231, 0.33);
  border-radius: 10px;
}

.nop-card .nop-box .nop-box-content {
  padding: 34px 30px;
  color: #fff;
}

.nop-card .nop-box .npb-point {
  font-weight: 600;
}

.nop-card .nop-box .npb-point .point {
  font-size: 30px;
}

.nop-card .nop-box .npb-point .text {
  font-size: 20px;
}

.nop-card .nop-box a {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
}

.nav-custom {
  margin: 0 -7px;
}

.nav-custom .nav-item {
  padding: 4px 7px;
}

.nav-custom .nav-link {
  background: #F6F6F6;
  border-radius: 10px;
  padding-top: 18px;
  padding-bottom: 18px;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #3E4954;
  height: 55px;
  justify-content: center;
  border: none
}

.nav-custom .nav-link.active {
  background: #2563EB;
  color: #FFFFFF;
}

.noi-card {
  margin-top: 40px;
}

.noi-title {
  background: linear-gradient(269.67deg, #6c757d21 2.87%, #dcdfe07a 98.83%);
  border-radius: 10px;
  text-align: center;
  padding: 22px 14px;
  color: #fff;
  margin: 0 40px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.noi-title h2 {
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 0px;
}

.noi-item {
  position: relative;
  background: #F7F7F7;
  border-radius: 10px;
  display: block;
  padding: 12px;
}

.noi-icon {
  background: #2563EB;
  border-radius: 6px;
  width: 44px;
  height: 44px;
  color: #fff;
  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;
  font-size: 25px;
}

.noii-content {
  color: #3E4954;
  font-size: 14px;
}

.noii-content .noii-title {
  font-weight: 600;
}

.noii-content .noii-text .fas {
  color: #FFA800;
}

.page-head {
  margin-top: 30px;
  padding: 50px 0
}

.page-head .ph-active-page {
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
}

.page-head .ph-title {
  font-weight: 600;
  font-size: 25px;
  line-height: 31px;
  text-align: center;
}

.page-head .ph-title .ph-tis {
  color: #2563EB;
  position: relative;
  z-index: 2;
}

.page-head .ph-title .ph-tis::after {
  content: '';
  position: absolute;
  bottom: 0px;
  height: 10px;
  width: 100%;
  left: 0px;
  background: rgba(32, 188, 244, 0.25);
}

.ph-iib {
  background: #FFFFFF;
  -webkit-box-shadow: 0px 24px 40px rgba(148, 148, 148, 0.14);
          box-shadow: 0px 24px 40px rgba(148, 148, 148, 0.14);
  border-radius: 10px;
  padding: 8px 17px 8px 8px;
  display: inline-block;
  text-decoration: none;
  outline: none;
  border: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #3E4954;
  -webkit-transition: .14s ease;
  transition: .14s ease;
}

.ph-iib:hover {
  -webkit-box-shadow: 0px 28px 50px rgba(148, 148, 148, 0.24);
          box-shadow: 0px 28px 50px rgba(148, 148, 148, 0.24);
  color: #3E4954;
}

.ph-iib .ph-iib-icon {
  background: #2563EB;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  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;
  color: #fff;
  font-size: 20px;
}


.services-search {
  background: #FFFFFF;
  border-radius: 10px;
  height: 67px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: .14s ease;
  transition: .14s ease;
}

.services-search-new {
  background: #FFFFFF;
  border-radius: 10px;
  height: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: .14s ease;
  transition: .14s ease;
}

.services-search:focus-within {
  -webkit-box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
          box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.services-search-new:focus-within {
  -webkit-box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
          box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.services-search .icon {
  width: 67px;
  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;
  color: #acacac;
}

.services-search-new .icon {
  width: 67px;
  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;
  color: #acacac;
}


.services-search .input {
  outline: none;
  border: none;
  height: 67px;
  background-color: transparent;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #3E4954;
}

.services-search-new .input {
  outline: none;
  border: none;
  height: 35px;
  background-color: transparent;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #3E4954;
}

.services-search .input::-webkit-input-placeholder {
  color: #acacac;
  font-weight: 600;
}

.services-search-new .input::-webkit-input-placeholder {
  color: #acacac;
  font-weight: 600;
}

.services-search .input:-ms-input-placeholder {
  color: #acacac;
  font-weight: 600;
}

.services-search-new .input:-ms-input-placeholder {
  color: #acacac;
  font-weight: 600;
}


.services-search .input::-ms-input-placeholder {
  color: #acacac;
  font-weight: 600;
}

.services-search-new .input::-ms-input-placeholder {
  color: #acacac;
  font-weight: 600;
}

.services-search .input::placeholder {
  color: #acacac;
  font-weight: 600;
}

.services-search-new .input::placeholder {
  color: #acacac;
  font-weight: 600;
}

.btn-filter {
  background: #2563EB;
  -webkit-box-shadow: 0px 24px 40px rgba(30, 170, 231, 0.2);
          box-shadow: 0px 24px 40px rgba(30, 170, 231, 0.2);
  border-radius: 10px;
  padding: 25px 30px;
}

.dd-menu {
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
}

.nav-custom-2 {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.nav-custom-2 .nav-link {
  color: #3E4954;
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #FFFFFF;
  border: 1px solid #EFEFEF;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 15px;
  padding: 24px 20px;
  font-size: 14px;
  line-height: 24px;
}

.nav-custom-2 .nav-link .icon {
  margin-bottom: 8px;
  font-size: 25px;
}

.nav-custom-2 .nav-link.active {
  background-color: #2563EB;
  border: 1px solid #72DCFF;
  -webkit-filter: drop-shadow(0px 24px 40px rgba(30, 170, 231, 0.33));
          filter: drop-shadow(0px 24px 40px rgba(30, 170, 231, 0.33));
}

.nav-custom-2 .nav-link:focus {
  -webkit-box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
          box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.orders-container {
  margin-top: 14px;
  padding: 30px 0;
}

.order-item {
  background: #FFFFFF;
  border-radius: 5px;
  padding: 20px 30px;
}

.order-item.active .oi-bottom {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #EAEAEA;
  max-height: 550px;
}

.order-item .oi-bottom {
  -webkit-transition: .14s ease;
  transition: .14s ease;
  max-height: 0px;
  overflow: hidden;
}

.order-item .oi-first {
  max-width: 100px;
}

.order-item > .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.order-item .oi-title {
  font-weight: 600;
  font-size: 19px;
  line-height: 23px;
  margin-bottom: 0px;
}

.order-item .oi-id {
  background: rgba(37, 99, 235, 0.2);
  border: 1px solid #2563EB;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #2563EB;
  padding: 22px 40px;
}

.oio-text {
  font-weight: 400;
  font-size: 15px;
  line-height: 28px;
  margin-bottom: 5px;
}

.oio-title {
  font-size: 16px;
  line-height: 19px;
  color: #ACACAC;
}

.oi-status {
  padding: 15px 10px;
  background-color: #acacac;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: #3E4954;
  border-radius: 9px;
}

.oi-status.oi-success {
  color: #01B780;
  background: rgba(1, 183, 128, 0.25);
}

.oi-status.oi-secondary {
  background: rgba(135, 135, 135, 0.25);
  color: #9F9F9F;
}

.oi-status.oi-primary {
  background: rgba(34, 200, 254, 0.25);
  color: #2563EB;
}

.oi-status.oi-danger {
  background: rgba(237, 28, 28, 0.12);
  color: #ED1C1C;
}

.oi-status.oi-warning {
  background: rgba(237, 206, 28, 0.12);
  color: #edb51c;
}

.oi-status.oi-process {
  color: #FF5C00;
  background: rgba(255, 92, 0, 0.24);
}

.order-input {
  height: 55px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: rgba(234, 234, 234, 0.4);
  border-radius: 10px;
}

.order-input .btn {
  color: #747886;
  font-size: 12px;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  padding: 15px 5px 15px;
}

.order-input:focus-within {
  outline: none;
  -webkit-box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
          box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.order-input .oi-control {
  text-decoration: none;
  padding: 10px 0px 10px 4px;
  outline: none;
  border: none;
  background: transparent;
  color: #626D77;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  direction: ltr;
}

.oib-item > .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.oib-item .oib-item--icon {
  font-size: 30px;
  line-height: 30px;
  color: #fff;
  height: 64px;
  width: 64px;
  background: #2563EB;
  border-radius: 13px;
  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;
}

.oib-item .oib-item--title {
  font-weight: 600;
  font-size: 17px;
  line-height: 25px;
  color: #acacac;
  margin-bottom: 3px;
}

.oib-item .oib-item--text {
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
}

.btn-oi {
  padding: 0px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 30px;
  line-height: 30px;
  width: 60px;
  height: 60px;
  border-radius: 9px;
}

.nt-item {
  position: relative;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 22px;
  margin: 15px 0;
}

.nt-item > .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.nt-item .nt-item--icon {
  background: rgba(11, 175, 255, 0.1);
  border-radius: 15px;
  font-size: 29.3678px;
  line-height: 29px;
  color: #0BAFFF;
  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;
  height: 62px;
  width: 62px;
}

.nt-item .nt-item--title {
  font-weight: 600;
  font-size: 19px;
  line-height: 23px;
}

.nt-item .nt-item--text {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #ACACAC;
  margin-bottom: 0px;
}

.nt-title > .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.nt-title .nt-title-icon {
  height: 32px;
  width: 32px;
  border-radius: 8px;
  background: rgba(11, 175, 255, 0.1);
  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;
  color: #0BAFFF;
  font-size: 16px;
}

.nt-title .nt-title-text {
  font-weight: 600;
  font-size: 19px;
  line-height: 23px;
  margin-bottom: 0px;
}

.nt-select-cats {
  margin: 0px -10px;
  padding: 0px;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
  overflow-x: auto;
}

.nt-select-cats .nt-select-cat {
  padding: 0 5px;
  margin: 15px 0;
}

.nt-select-cats .nt-select-cat input {
  display: none;
}

.nt-select-cats .nt-select-cat input:checked + .nt-sc-box {
  background-color: #2563EB;
  color: #fff;
  -webkit-box-shadow: 0px 4px 20px rgba(30, 170, 231, 0.33);
          box-shadow: 0px 4px 20px rgba(30, 170, 231, 0.33);
}

.nt-select-cats .nt-select-cat .nt-sc-box {
  background: #FFFFFF;
  border-radius: 14px;
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 16px 24px 20px 24px;
  -webkit-transition: .14s ease;
  transition: .14s ease;
  cursor: pointer;
  text-align: center;
}

.nt-select-cats .nt-select-cat .nt-sc-box-icon {
  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;
  font-size: 35px;
  line-height: 35px;
  color: #fff;
  height: 70px;
  width: 70px;
  border-radius: 10px;
  background-color: #2563EB;
}

.nt-select-cats .nt-select-cat .nt-sc-box-text {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  margin-top: 12px;
}

.nt-sc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  list-style: none;
  margin: 0 -15px;
  padding: 0px;
  overflow-x: auto;
}

.nt-sc .nt-sc-li {
  padding: 0 5px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.nt-sc .nt-sc-li input {
  display: none;
}

.nt-sc .nt-sc-li input:checked + label {
  -webkit-filter: drop-shadow(0px 24px 40px rgba(30, 170, 231, 0.33));
          filter: drop-shadow(0px 24px 40px rgba(30, 170, 231, 0.33));
  background: #2563EB!important;
  color: #fff;
}

.nt-sc .nt-sc-li input:checked + label .text {
  color: #fff;
}

.nt-sc .nt-sc-li input:checked + label .check {
  border-color: #fff;
  color: #fff;
}

.nt-sc .nt-sc-li label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 10px;
  border: 1px solid #F6F6F6;
  padding: 18px 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: .14s ease;
  transition: .14s ease;
  justify-content: center;
  background: #F6F6F6
}

.nt-sc .nt-sc-li label .text {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #000000;
}

.nt-sc .nt-sc-li label .check {
  border: 3px solid #EAEAEA;
  color: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 5px;
  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;
  height: 28px;
  width: 28px;
  font-size: 16px;
  line-height: 16px;
  justify-self: flex-end;
}

.tc-tdet-title {
  font-weight: 600;
  font-size: 25px;
  line-height: 31px;
  margin-bottom: 0px;
}

.tc-tick-id {
  background-color: #2563EB;
  color: #fff;
  border-radius: 10px;
  font-size: 16px;
  line-height: 20px;
  padding: 10px 28px;
}

.tc-ti-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #acacac;
  margin-bottom: 0px;
}

.tc-ti-text {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #3E4954;
}

.tc-ti-box {
  background-color: #2563EB;
  background-image: url(https://storage.perfectcdn.com/4ab0d0/k0swf70m8sb93042.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  color: #fff;
}

.tc-ti-box .tctb-img {
  max-width: 140px;
  margin-bottom: 20px;
}

.tc-ti-box .tctb-title {
  font-weight: 600;
  font-size: 19px;
  line-height: 28px;
}

.tc-ti-box .tctb-text {
  font-weight: 600;
  font-size: 14px;
  line-height: 25px;
}

.ticket-message-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ticket-message-block.ticket-message-left + .ticket-message-left {
    margin-top: 0px;
}

.ticket-message-block.ticket-message-right + .ticket-message-right {
  margin-top: 0;
}

.ticket-message-block.ticket-message-right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.ticket-message-block.ticket-message-right .ticket-msg-container {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}

.ticket-message-block.ticket-message-right .ticket-msg-container .ticket-msg {
  background: #3E4954;
}

.ticket-message-block .ticket-msg-container {
  width: 100%;
}

.ticket-message-block .ticket-msg-container .ticket-msg {
  background: #2563EB;
  border-radius: 30px;
  padding: 14px 26px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  font-weight: 500;
  font-size: 13px;
  line-height: 22px;
  letter-spacing: .3px;
  color: #fff;
  margin-bottom: 12px;  
}

.ticket-message-block .ticket-msg-container .date-time {
  font-size: 12px;
  line-height: 13px;
  color: #A5A5A5;
  margin-bottom: 30px;
  padding: 0 10px;
  display: block;
}

.schat-body .schat-chat-body {
  max-height: 553px;
  min-height: 553px;
  overflow-y: auto;
  padding: 0 15px
}

.schat-body .schat-input {
  padding-top: 10px;
}

.schat-msg-input {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: rgba(234, 234, 234, 0.5);
  border-radius: 10px;
  height: 70px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.schat-msg-input textarea {
  border: none;
  outline: none;
  background: transparent;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 9px 26px;
  color: #fff;
  font-size: 14px;
  line-height: 17px;
  color: #ACACAC;
}

.schat-msg-input .send-btn {
  height: 54px;
  padding: 0 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #2563EB;
  outline: none;
  border: none;
  color: #fff;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  margin-right: 10px
}

a {
  color: #2563EB;
  -webkit-transition: .14s ease;
  transition: .14s ease;
  text-decoration: none;
}

a:hover {
  color: #19b7e7;
  -webkit-text-decoration: underlin;
          text-decoration: underlin;
}

.payments-table {
  width: 100%;
}

.payments-table tr {
  background: #F9F9F9;
  border-radius: 10px;
  padding: 12px 14px;
  display: block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 14px;
}

.payments-table tr > td {
  padding: 0 5px;
}

.payments-table .pyt-id {
  background: #2563EB;
  border-radius: 7px;
  color: #fff;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
}

.payments-table .pyt-title {
  font-weight: bold;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 2px;
}

.payments-table .pyt-text {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #2563EB;
  margin-bottom: 0px;
}

.nav-addfunds {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.nav-addfunds .nav-item {
  padding: 10px 0;
}

.nav-addfunds .nav-link {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 20px 10px;
  color: #3E4954;
  background-color: #fff;
  border-radius: 10px;
  min-width: 100px;
  -webkit-transition: .14s ease;
  transition: .14s ease;
  border: none;
  width: 100%
}

.nav-addfunds .nav-link.active {
  background: #2563EB;
  -webkit-box-shadow: 0px 24px 40px rgba(30, 170, 231, 0.33);
          box-shadow: 0px 24px 40px rgba(30, 170, 231, 0.33);
}

.nav-addfunds .nav-link.active .icon {
  color: #fff;
}

.nav-addfunds .nav-link.active .icon img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

.nav-addfunds .nav-link .icon {
  font-size: 35px;
  line-height: 35px;
  color: #ACACAC;
  margin-bottom: 10px;
}

.nav-addfunds .nav-link .text {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
}

.pay-title {
  font-weight: 600;
  font-size: 25px;
  line-height: 31px;
  color: #000;
  margin-bottom: 20px;
}

.pay-bot-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #ACACAC;
  padding-bottom: 20px;
}

.pay-pg {
  font-weight: 600;
  font-size: 16px;
  line-height: 30px;
  color: #3E4954;
  margin-bottom: 30px;
}

.aff-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
  margin-bottom: 22px;
}

.aff-text {
  font-weight: 600;
  font-size: 14px;
  line-height: 25px;
  color: #ACACAC;
  margin-bottom: 0px;
}

.aff-title-2 {
  font-weight: bold;
  font-size: 24px;
  line-height: 30px;
  color: #FFFFFF;
  margin-bottom: 16px;
}

.aff-text-2 {
  font-weight: normal;
  font-size: 14px;
  line-height: 25px;
  color: #FFFFFF;
  margin-bottom: 0px;
}

.af-item {
  background: #FFFFFF;
  border-radius: 8px;
  margin-bottom: 20px;
}

.af-item .af-item--body {
  padding: 10px 10px 10px 24px;
}

.af-item .af-item--body > .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.af-item .af-item--body-2 {
  padding: 10px 24px 10px 10px;
}

.af-item .af-item--body-2 > .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.af-item .af-item--icon {
  background-color: #2563EB;
  border: none;
  outline: none;
  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: 64px;
  height: 64px;
  border-radius: 10px;
  color: #fff;
  font-size: 28px;
  line-height: 28px;
}

.af-item .af-item--title {
  font-weight: 600;
  font-size: 14px;
  line-height: 26px;
  color: #acacac;
  margin-bottom: 0px;
}

.af-item .af-item--text {
  font-weight: 600;
  font-size: 19px;
  line-height: 26px;
  word-wrap: break-word;
}

.af-item .af-item--icon-2 {
  background-color: #2563EB;
  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: 54px;
  height: 54px;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  line-height: 23px;
}

.af-item .af-item--title-2 {
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  margin-bottom: 0px;
}

.af-item .af-item--text-2 {
  font-weight: 600;
  font-size: 19px;
  line-height: 19px;
  color: #acacac;
}

.chp-title {
  font-weight: 600;
  font-size: 19px;
  line-height: 23px;
}

.card-ns {
  background: rgba(33, 197, 251, 0.15);
  border-radius: 10px;
  padding: 12px;
}

.card-ns .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.card-ns .card-ns-icon {
  background: #2563EB;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  color: #fff;
  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;
  font-size: 24px;
  line-height: 24px;
}

.card-ns .card-ns-text {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #2563EB;
}

.card-ns-toggle {
  background: #2563EB;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  padding: 26px 30px;
  color: #fff;
}

.chp-video {
  display: block;
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.chp-video .video-thumb {
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.chp-video:hover .video-overlay {
  background: transparent;
}

.chp-video .video-overlay {
  position: absolute;
  z-index: 3;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: rgba(34, 202, 255, 0.8);
  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;
  -webkit-transition: .14s ease;
  transition: .14s ease;
}

.chp-video .video-overlay .video-play {
  height: 77px;
  width: 77px;
  border-radius: 50%;
  border: 3px solid #FFFFFF;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  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;
  font-size: 25px;
  line-height: 25px;
  color: #fff;
}

.chp-text {
  font-weight: 600;
  font-size: 14px;
  line-height: 25px;
  color: #acacac;
}

.custom-accordion .accordion-item {
  margin-bottom: 14px;
  border: none;
  border-radius: 10px;
  overflow: hidden;
}

.custom-accordion .accordion-item .accordion-button {
  border-bottom: none;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  padding: 20px 20px;
}

.custom-accordion .accordion-item .accordion-button:not(.collapsed) {
  color: #0c63e4;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.custom-accordion .accordion-item .accordion-body {
  padding: 20px 24px 24px 24px;
  font-size: 13px;
  line-height: 25px;
  color: #ACACAC;
}

.acp-abox {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 30px;
}

.acp-abox .icon {
  height: 60px;
  width: 60px;
  background: #2563EB;
  -webkit-box-shadow: 0px 16px 28px rgba(30, 170, 231, 0.33);
          box-shadow: 0px 16px 28px rgba(30, 170, 231, 0.33);
  border-radius: 7px;
  font-size: 30px;
  line-height: 30px;
  color: #fff;
  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;
}

.acp-item {
  margin: 10px 0;
}

.acp-item > .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.acp-item .acp-item--icon {
  font-size: 35px;
  line-height: 35px;
  color: #2563EB;
}

.acp-item .acp-item--username {
  font-size: 14px;
  line-height: 17px;
  color: #acacac;
}

.acp-item .acp-item--user {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #3E4954;
  margin-bottom: 0px;
}

.divider {
  margin: 10px 0;
  border-bottom: 1px solid #EAEAEA;
}

.acpa-container {
  text-align: center;
}

.acpa-container .acpa-avatar {
  position: relative;
  margin-bottom: 14px;
}

.acpa-container .acpa-fullname {
  font-size: 16px;
  line-height: 20px;
  color: #000;
  margin-bottom: 8px;
}

.acpa-container .acpa-email {
  font-size: 14px;
  line-height: 17px;
  color: #acacac;
}

.acpa-switch {
  min-width: 280px;
  border-radius: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 0.5px solid #EAEAEA;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 5px;
  position: relative;
  background: transparent;
  -webkit-transition: .14s ease;
  transition: .14s ease;
}

.acpa-switch:focus {
  -webkit-box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
          box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.acpa-switch.gender-male .switch-male {
  color: #fff;
}

.acpa-switch.gender-female .switch-female {
  color: #fff;
}

.acpa-switch.gender-female .switch-bg {
  left: calc(50% - 5px);
}

.acpa-switch .switch-bg {
  background: #2563EB;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: 50%;
  border-radius: 10px;
  position: absolute;
  -webkit-transition: .23s ease;
  transition: .23s ease;
}

.acpa-switch .switch-btn {
  -webkit-transition: .14s ease;
  transition: .14s ease;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  z-index: 2;
  height: 44px;
  background: transparent;
  border: none;
  outline: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  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;
}

.acpa-switch.gender-female .acpa-avatar.gender-male {
	display: none!important
}

.user-card {
  background: #F7F9FD;
  border-radius: 10px;
  padding: 12px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  min-width: 200px;
}

.user-card > .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.user-card .user-card--icon {
  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;
  color: #2563EB;
  background: rgba(33, 197, 251, 0.15);
  height: 50px;
  width: 50px;
  border-radius: 10px;
  font-size: 25px;
  line-height: 25px;
}

.user-card .user-card--title {
  font-size: 12px;
  line-height: 15px;
  margin-bottom: 4px;
  color: #ACACAC;
}

.user-card .user-card--status {
  font-weight: 600;
  font-size: 19px;
  line-height: 23px;
  color: #3E4954;
}

.fc-blue {
  background: rgba(33, 197, 251, 0.15) !important;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #2563EB;
}

.fc-blue:focus {
  background: rgba(33, 197, 251, 0.15) !important;
}

.btn-fb {
  padding: 0px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  font-size: 24px;
}

.nav-custom-4 {
  margin: 0 -10px;
}

.nav-custom-4 .nav-item {
  padding: 0 10px;
}

.nav-custom-4 .nav-link {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 20px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-weight: 600;
  font-size: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 20px;
  color: #3E4954;
  -webkit-transition: .14s ease;
  transition: .14s ease;
}

.nav-custom-4 .nav-link i {
  font-size: 45px;
  line-height: 45px;
  margin-bottom: 14px;
}

.nav-custom-4 .nav-link.active {
  color: #fff;
  -webkit-box-shadow: 0px 24px 40px rgba(30, 170, 231, 0.33);
          box-shadow: 0px 24px 40px rgba(30, 170, 231, 0.33);
  border-radius: 10px;
  background-color: #2563EB;
}

.clearfix {
  display: block;
  clear: both;
}

.smmspot-updates-item {
  background: #FFFFFF;
  border-radius: 50px;
  padding: 18px 38px;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  margin-bottom: 14px;
}

.smmspot-updates-item > .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.smmspot-updates-item .update-type {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  border-radius: 25px;
  padding: 15px 24px;
  color: #fff;
  background-color: #666;
}

.smmspot-updates-item[data-type="add"] .update-type {
  background: #48DDB0;
}

.smmspot-updates-item[data-type="remove"] .update-type {
  background: #EB4E56;
}

.smmspot-updates-item[data-type="price-increase"] .update-type {
  background: #2563EB;
}

.smmspot-updates-item[data-type="price-decrease"] .update-type {
  background: #374BFF;
}

.smmspot-updates-item[data-type="max-increase"] .update-type {
  background: #B648DD;
}

.smmspot-updates-item[data-type="max-decrease"] .update-type {
  background: #FFA337;
}

.smmspot-updates-item[data-type="min-increase"] .update-type {
  background: #4EEBD8;
}

.smmspot-updates-item[data-type="min-decrease"] .update-type {
  background: #EB4EA3;
}

.pagination .page-item {
  padding: 0 4px;
}

.pagination .page-item.active .page-link {
  background-color: #2563EB;
  color: #fff;
}

.pagination .page-item.pi-pn .page-link {
  background-color: #2563EB;
  color: #fff;
}

.pagination .page-item .page-link {
  border: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  padding: 12px 12px;
  min-width: 45px;
  height: 45px;
  border-radius: 23px;
  color: #2563EB;
  background-color: transparent;
}

.home-header {
  height: 100px;
  position: fixed;
  width: 100%;
  left: 0px;
  top: 30px;
  z-index: 1000;
  -webkit-transition: .14s ease;
  transition: .14s ease;
}

.home-header.active {
  top: 0px;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}

.home-header.active .btn {
  padding: 14px 30px;
}

.home-header.active .btn-primary {
  padding: 14px 50px;
}

.home-header .row-100 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100px;
}

.home-header .btn {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  padding: 24px 30px;
  -webkit-transition: .14s ease;
  transition: .14s ease;
}

.home-header .btn-primary {
  -webkit-box-shadow: 0px 24px 40px rgba(30, 170, 231, 0.33);
           box-shadow: 0px 2px 10px rgb(32 30 231 / 33%);

  border-radius: 15px;
  padding: 24px 50px;
}

.login-menu {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -30px;
}

.login-menu .menu-item {
  padding: 0 30px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.login-menu .menu-link {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #0A2753;
  position: relative;
  padding: 20px 0;
}

.login-menu .menu-link::before {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 4px;
  border-radius: 2px;
  width: 0px;
  background-color: #16C4FC;
  -webkit-transition: .4s ease;
  transition: .4s ease;
}

.login-menu .menu-link.active {
  color: #16C4FC;
}

.login-menu .menu-link.active::before {
  width: 40px;
}

.home-main {
  padding-top: 160px;
}

.home-head {
  padding: 80px 0;
  position: relative;
}

.home-head .container-xxl {
  position: relative;
}

.hh-bg {
  position: absolute;
  left: 50%;
  width: 50%;
  top: 0px;
  bottom: 0px;
  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;
}

.hh-bg .shape1, .hh-bg .shape2, .hh-bg .shape3, .hh-bg .shape4, .hh-bg .shape5 {
	position: absolute
}

.hh-bg .shape1 {
	top: 0;
	left: 50px
}

.hh-bg .shape2 {
	top: 15px;
	right: 0
}

.hh-bg .shape3 {
    top: 350px;
    left: 60px;
}

.hh-bg .shape4 {
	top: 275px;
	right: 50px
}

.hh-bg .shape5 {
	top: 150px;
	left: 50px
}

.hh-bg .hh-bg-img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    margin-top: 54px;
}

.hh-top-title {
  background: rgba(10, 39, 83, 0.05);
  border-radius: 10px;
  padding: 13px 20px;
  font-weight: 600;
  font-size: 14px;
  line-height: 25px;
  color: #0A2753;
  display: inline-block;
}

.hh-title {
  margin-bottom: 20px;
}

.hh-title h1 {
  font-weight: 600;
  font-size: 45px;
  line-height: 80px;
  color: #0A2753;
  margin-bottom: 0px;
}

.hh-title h1 span {
  color: #2563EB;
  font-weight: 700;
  position: relative;
}

.hh-title h1 span::before {
  content: '';
  background-image: url(https://storage.perfectcdn.com/nb2br9/k5scnmsrcff5exm8.png);
  position: absolute;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  left: -5px;
  bottom: -18px;
  width: calc(100% + 10px);
  height: 20px;
}

.hh-p {
  font-size: 16px;
  line-height: 35px;
  color: #0A2753;
  margin-bottom: 50px;
}

.login-form {
  margin-top: 30px;
  z-index: 10;
  position: relative;
}

.login-form .input-group-text {
  background-color: #fff;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.login-form .form-control {
  background-color: #fff;
  height: 72px;
  font-size: 16px;
  font-weight: 700;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.login-form .igt-sq {
  font-size: 20px;
}

.login-form .btn-login {
  height: 72px;
  width: 72px;
  background-color: #fff;
  border: 2px solid #EAEAEA;
  border-radius: 12px;
  font-size: 20px;
  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;
}

.login-form .login-btn {
  height: 72px !important;
  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: 100%;
}

.knd-checkbox input {
  display: none;
}

.knd-checkbox input:checked ~ button {
  background-color: #2563EB;
  border-color: #2563EB;
  color: #fff;
}

.login-top {
  position: relative;
  z-index: 10;
  margin-top: 80px;
}

.login-top .lt-icon {
  color: #2563EB;
  font-size: 40px;
}

.login-top .lt-title {
  font-weight: 600;
  font-size: 19px;
  line-height: 30px;
  color: #000;
  margin-bottom: 8px;
}

.login-top .lt-text {
  font-size: 14px;
  line-height: 20px;
  color: #ACACAC;
}

.home-section {
  position: relative;
  padding: 80px 0;
}

.home-topbar {
  max-width: 100%;
}

.home-title {
  font-weight: 600;
  font-size: 35px;
  line-height: 64px;
  letter-spacing: -1px;
  color: #0A2753;
  margin-bottom: 30px;
}

.home-image {
  max-width: 100%;
}

.home-p {
  font-size: 14px;
  line-height: 30px;
  color: #0A2753;
  margin-bottom: 4s0px;
}

.nav-home-social .nav-link {
  background: #f8f9fa;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #6b7280;
  outline: none;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 4px;
  position: relative;
  transition: all 0.3s ease;
}

.nav-home-social .nav-link::after {
  display: none;
}

.nav-home-social .nav-link:hover {
  background: #e0e7ff;
  border-color: #2563EB;
  color: #2563EB;
  transform: translateY(-2px);
}

.nav-home-social .nav-link.active {
  background: #2563EB;
  border-color: #2563EB;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(83, 40, 251, 0.3);
}

.hpri-title {
  font-weight: 600;
  font-size: 19px;
  line-height: 23px;
  color: #0A2753;
  margin-bottom: 18px;
}

.hpri-text {
  font-weight: 600;
  font-size: 14px;
  line-height: 25px;
  color: #ACACAC;
  margin-bottom: 0px;
}

.comments-container {
  position: relative;
}

.hcc-item {
  position: relative;
}

.hcc-item .hcc-head {
  position: relative;
}

.hcc-item .hcc-head > .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.hcc-item .hcc-name {
  font-weight: 600;
  font-size: 19px;
  color: #0A2753;
}

.hcc-item .hcc-about {
  font-weight: 600;
  font-size: 14px;
  color: #acacac;
}

.hcc-item .hcc-body {
  padding: 20px 0;
}

.hcc-item .hcc-text {
  font-size: 14px;
  line-height: 30px;
  color: #0A2753;
}

.hcc-item .hcc-footer {
  background: rgba(227, 227, 227, 0.2);
  border-radius: 15px;
  padding: 36px 28px;
  line-height: 20px;
  font-size: 16px;
  color: #0A2753;
  font-weight: 600;
}

.hcc-item .fa-star {
  color: #FFAC0A;
  font-size: 16px;
  line-height: 20px;
}

.hcc-item .star-point {
  line-height: 20px;
}

.hcc-nav-container {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: absolute;
  right: 0px;
  top: 0px;
  margin: 0px -6px;
  padding: 0px;
  list-style: none;
  z-index: 3;
}

.hcc-nav-container .n-item {
  padding: 0 6px;
}

.hcc-nav-container .n-link {
  border: 1px solid #EAEAEA !important;
  padding: 0;
  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: 50px;
  height: 50px;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 20px;
  color: #0A2753;
}

.card-hcc {
  height: 100%;
  background-color: #2563EB;
  background-image: url(https://seoclever.com/public/cdn/hcc.svg);
  background-size: cover;
  background-position: center;
}

.card-hcc .c-body {
  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;
  text-align: center;
  color: #fff;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.card-hcc .chcc-title {
  font-weight: 600;
  font-size: 25px;
  line-height: 35px;
}

.card-hcc .chcc-p {
  font-size: 16px;
  line-height: 25px;
  color: #FFFFFF;
}

.card-hcc .hcc-icons {
  max-width: 300px;
  width: 100%;
}

.home-bottom-section {
  position: relative;
}

.home-bottom-section > div {
  position: relative;
}

.home-bottom-section > div > .row {
  position: relative;
  z-index: 4;
}

.home-bottom-section > div::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 50%;
  height: 440px;
  background-image: url(https://storage.perfectcdn.com/4ab0d0/6jjznsqh5z95702h.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.home-bottom-section > div::after {
  content: '';
  position: absolute;
  right: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 50%;
  height: 440px;
  background-image: url(https://storage.perfectcdn.com/4ab0d0/7ij94f8zgod0ix7x.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: right center;
}

.footer {
  background: -webkit-gradient(linear, left bottom, left top, color-stop(15.91%, #EBF2FA), color-stop(75.28%, rgba(247, 247, 247, 0)));
  background: linear-gradient(to top, #EBF2FA 15.91%, rgba(247, 247, 247, 0) 75.28%);
}

.footer-top {
  padding: 40px 0;
}

.footer-menu {
  list-style: none;
  margin: 0px -30px;
  padding: 0px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.footer-menu .fm-item {
  padding: 10px 30px;
}

.footer-menu.fm-soc {
  margin: 0 -5px;
}

.footer-menu.fm-soc .fm-item {
  padding: 10px 5px;
}

.footer-menu .fm-link {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #0A2753;
}

.footer-menu .fm-social {
  height: 38px;
  width: 38px;
  border-radius: 50%;
  border: 2px solid #0A2753;
  color: #0A2753;
  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;
  -webkit-transition: .14s ease;
  transition: .14s ease;
}

.footer-menu .fm-social:hover {
  background: #0A2753;
  color: #fff;
}

.footer-bottom {
  padding: 10px 0 40px 0;
}

.fb-text {
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
  color: #0A2753;
}

.menu-formobile {
  display: none;
}

.hm-right-menubar {
  display: none;
}

.dd-menu {
  border: none;
  -webkit-box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.2);
}

.page-info .pi-content {
  padding: 70px 0 40px;
  text-align: center;
}

.page-info .pi-title  {
  font-weight: 600;
  font-size: 35px;
  line-height: 135%;
  color: #0A2753;
}

.page-info .pi-p {
  font-size: 16px;
  line-height: 35px;
  color: #0A2753;
  margin-top: 18px;
}

.blog-card {
  margin-bottom: 30px;
}

.blog-card .bc-image-container {
  position: relative;
  width: 100%;
  padding-top: 65%;
  border-radius: 10px;
  overflow: hidden;
}

.blog-card .bc-image-container .bc-image {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.blog-card .bc-title {
  font-weight: 600;
  font-size: 19px;
  line-height: 26px;
  color: #0A2753;
  margin: 20px 0 14px 0;
}

.blog-card .bc-p {
  font-size: 14px;
  line-height: 23px;
  color: #ACACAC;
}

.bi-head {
  position: relative;
}

.bi-head .bih-box {
  -webkit-filter: drop-shadow(0px 30px 25px rgba(107, 103, 103, 0.2));
          filter: drop-shadow(0px 30px 25px rgba(107, 103, 103, 0.2));
  border-radius: 36px;
  position: relative;
  overflow: hidden;
}

.bi-head .bih-image {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

.bi-head .bih-image::after {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  background: -webkit-gradient(linear, left bottom, left top, from(#000000), color-stop(117.23%, rgba(0, 0, 0, 0)));
  background: linear-gradient(360deg, #000000 0%, rgba(0, 0, 0, 0) 117.23%);
}

.bi-head .bih-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  -o-object-fit: cover;
     object-fit: cover;
}

.bi-head .bih-body {
  padding: 180px 20px 0px 20px;
  position: relative;
  z-index: 10;
}

.bi-head .bih-info {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: #FFFFFF;
}

.bi-head .bih-info a {
  color: #fff;
}

.bi-head .bih-info a:hover {
  text-decoration: underline;
}

.bi-head .bih-title h2 {
  font-weight: bold;
  font-size: 35px;
  line-height: 135%;
  color: #FFFFFF;
}

.main-fixed {
  position: fixed;
  overflow: auto;
  top: 104px;
  z-index: 5;
  left: 0px;
  bottom: 0px;
  right: 0px;
  padding-top: 0px;
  min-height: inherit !important;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: .24s ease;
  transition: .24s ease;
}

.main-fixed.active {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

.db-title {
  font-weight: bold;
  font-size: 22px;
  line-height: 26px;
  color: #3E4954;
}

.db-p {
  font-size: 14px;
  line-height: 26px;
  color: #ACACAC;
}

.db-box {
  background-color: #2563EB;
  color: #fff;
  font-size: 16px;
  line-height: 26px;
  border-radius: 10px;
}

.blog-content {
  font-weight: normal;
  font-size: 16px;
  line-height: 29px;
  color: #3E4954;
}

.blog-content p {
  font-size: 16px;
  line-height: 29px;
  color: #3E4954;
  margin-bottom: 30px;
}

.blog-content img {
  max-width: 100%;
  margin: auto;
  display: block;
  border-radius: 20px;
  -webkit-transition: .14s ease;
  transition: .14s ease;
  margin-bottom: 34px;
}

.blog-content img:hover {
  border-radius: 0;
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5, .blog-content h6 {
  font-weight: 600;
  color: #0A2753;
  line-height: 140%;
  margin-bottom: 34px;
}

.blog-content h1 {
  font-size: 32px;
}

.blog-content h2 {
  font-size: 26px;
}

.blog-content h3 {
  font-size: 22px;
}

.blog-content h4 {
  font-size: 18px;
}

.blog-content h5 {
  font-size: 16px;
}

.blog-content h6 {
  font-size: 14px;
}

.r-ticket .r-ticket-title {
  font-weight: 600;
  font-size: 19px;
  line-height: 23px;
  color: #3E4954;
  margin-bottom: 0px;
}

.r-ticket .r-ticket-id {
  font-size: 16px;
  line-height: 20px;
  color: #2563EB;
  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;
  background: rgba(37, 99, 235, 0.2);
  border: 1px solid #2563EB;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 50px;
  padding: 20px 30px;
}

.r-ticket .rt-title {
  font-weight: bold;
  font-size: 19px;
  line-height: 24px;
  color: #3E4954;
  margin-top: 6px;
}

.r-ticket .rt-info {
  font-weight: normal;
  font-size: 16px;
  line-height: 19px;
  color: #ACACAC;
  margin-bottom: 6px;
}

.close {
	background: none;
	border: none
}

.bs-toast {
  background: #2563EB;
  color: #fff;
  padding: 13px 24px;
  border-radius: 6px;
  position: fixed;
  bottom: 30px;
  left: 40px;
  width: 100%;
  max-width: 300px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: none;
  z-index: 3000;
}

.bs-toast .bs-toast-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.bs-toast .toast-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.bs-toast .toast-times {
  cursor: pointer;
  border: none;
  outline: none;
  color: #fff;
  background: transparent;
}

.modal-title {
	font-size: 14px!important
}

.modal-header {
	background: #2563EB;
	color: #fff
}

#fields .form-group {
	margin-bottom: 1.5rem!important
}

.blog-txt {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-header.astatus {
	margin: 0 15px;
	padding: 30px;
	border-radius: 15px;
}
.modal-header.astatus h4 {
	font-size: 24px!important
}
.status-box {
	background: rgb(33,198,246);
	background: linear-gradient(180deg, rgba(33,198,246,1) 0%, rgba(73,202,247,1) 100%);
	border-radius: 15px;
	padding: 30px 30px 15px 30px
}
.status-box.special {
	background: rgb(35,182,251);
	background: linear-gradient(180deg, rgba(35,182,251,1) 0%, rgba(62,36,247,1) 100%);
}
.status-box.vip {
	background: rgb(88,38,249);
	background: linear-gradient(180deg, rgba(88,38,249,1) 0%, rgba(37,245,231,1) 100%);
}
.status-box.royal {
	background: rgb(144,33,250);
	background: linear-gradient(180deg, rgba(144,33,250,1) 0%, rgba(250,35,217,1) 100%);
}
.status-box h3, .status-box p {
	text-align: center;
	color: #fff
}
.status-box ul {
	padding-left: 0
}
.status-box ul li {
	list-style-type: none;
	background: rgb(0, 0, 0, 0.4);;
	border-radius: 5px;
	padding: 5px 0;
	text-align: center;
	margin-bottom: 5px;
	color: #fff
}
.status-box ul li.unlisted {
	color: #3195ce;
	text-decoration: line-through
}
.modal-footer.sfooter {
	background: #d6f4f6;
	margin: 0 15px;
	padding: 5px 15px;
	border-radius: 15px;
	justify-content: flex-start;
	color: #21c4fb
}
.modal-footer.sfooter .sf-inn {
	display: flex;
	align-items: center;
	justify-content: space-around
}


@media (max-width: 576px) {
  .hh-title h1 {
    font-size: 27px;
    line-height: 51px;
  }
  .hh-p {
    font-size: 14px;
    line-height: 30px;
  }
  .hh-bg {
    display: none;
  }
}

@media (max-width: 768px) {
.acp-item .acp-item--icon {
    width: 50px;
    text-align: center;
}
  .nav-home-social {
	display: flex!important;
    padding: 0px;
    list-style: none;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow-x: auto;	
	flex-wrap: nowrap
  }
  .nav-home-social li {
	  padding: 0 15px
  }
  .home-bottom-section > div::before {
	  display: none
  }
  .oi-status {
	  margin: 15px 0
  }
  .order-input, .oio-text, .ord-btns {
	  margin-top: 15px
  }
  .order-item .oi-bottom {
	  margin-top: 15px!important;
	  padding-top: 15px!important
  }
  .nav-custom-2 {
	  width: 100%
  }
  .nav-custom-2 .nav-item {
	  width: 48%;
	  padding: 0 %1;
	  margin-bottom: 15px
  }
	.order-item .oi-id {
		padding: 10px 40px
	}
  .src-txt {
	  display: none
  }
  .order-item .oi-first {
	  max-width: 100%;
	  padding-bottom: 15px;
	  text-align: center
  }
  .order-item .oi-id {
	  text-align: center
  }
  .oib-item--icon {
	  display: none!important
  }
  .nav-custom-2 .nav-link {
		-ms-flex-direction: row;
    flex-direction: row;
	padding: 15px 20px
  }
  .nav-custom-2 .nav-link i {
	padding-right: 10px
  }
  .nav-custom-4 .nav-link {
    font-size: 14px;
    font-weight: 600;
    margin: 4px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding: 10px;
    line-height: 16px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .nav-custom-4 .nav-link i {
    font-size: 15px;
    line-height: 15px;
    margin: 0px 6px;
  }
  .home-bottom-section > div::before {
    width: 100%;
  }
  .home-bottom-section > div::after {
    width: 0px;
  }
  .hcc-item .hcc-footer {
    text-align: center;
    padding: 24px 19px;
  }
  .hh-top-title {
    padding: 10px 17px;
    font-size: 13px;
  }
  .page-head .col-md-3:nth-child(1) {
    display: none !important;
  }
  .page-head .col-md-3:nth-child(3) {
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
  .services-all .service-item {
    -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 98% !important;
            flex: 0 0 98% !important;
    margin: 10px 1%;
  }
}

@media (max-width: 992px) {
  .home-menu {
    position: fixed;
    left: 0px;
    display: none;
  }
  .menu-formobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    padding: 30px;
    margin: 30px 0;
    z-index: 1;
    width: calc(100% - 100px);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%;
    left: 0px;
  }
  .menu-formobile .mm-logo {
    max-width: 200px;
    width: 100%;
    margin-bottom: 30px;
  }
  .menu-formobile .row-100 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .menu-formobile .btn {
    color: #fff;
  }
  .menu-formobile .btn-login {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .menu-formobile .dropdown .btn {
    color: #3E4954;
  }
  .menu-formobile .dropdown {
    margin-bottom: 30px;
  }
  .menu-formobile .login-menu {
    margin: 0px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .menu-formobile .login-menu .menu-item {
    padding: 20px 0;
    display: block;
  }
  .menu-formobile .login-menu .menu-link {
    color: #fff;
    font-size: 20px;
    padding: 20px 0;
  }
  .menu-formobile .login-menu .menu-link::before {
    display: none;
  }
  .app-body {
    -webkit-transition: .25s ease;
    transition: .25s ease;
    z-index: 1200;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    overflow: scroll;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  .app-body .home-header {
    top: 0px;
    position: -webkit-sticky;
    position: sticky;
  }
  .app-body.menu-active {
    position: fixed;
    height: 100%;
    border-radius: 20px;
    -webkit-transform: scale(0.8) translateX(calc(100% - 100px));
            transform: scale(0.8) translateX(calc(100% - 100px));
    overflow: hidden;
    -webkit-box-shadow: 8px 0px 34px rgba(0, 0, 0, 0.6);
            box-shadow: 8px 0px 34px rgba(0, 0, 0, 0.6);
    opacity: .9;
  }
  .home-main {
    padding-top: 0px;
  }
  .home-head {
    padding: 40px 0px;
  }
  .nop-card .card-body {
    padding: 30px;
  }
  .services-all {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 0 -1%;
  }
  .services-all .service-title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 98%;
            flex: 0 0 98%;
    margin: 1%;
  }
  .services-all .service-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
            flex: 0 0 48%;
    margin: 1%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .tservice-head {
    display: none;
  }
  .tservices-row {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: -10px 0px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .tservices-row > * {
    padding: 10px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
  }
  .tservices-row > .tservice-avt {
  	padding: 10px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
  }
  .tservices-row > *::before {
    font-size: 13px;
    color: #acacac;
    display: block;
  }
  .tservices-row .tservice-per::before {
    content: 'Per 1000';
  }
  .tservices-row .tservice-avt::before {
    content: 'Avg. Time';
  }
  .tservices-row .tservice-min::before {
    content: 'Minimum';
  }
  .tservices-row .tservice-max::before {
    content: 'Maximum';
  }
  .tservices-row .tservice-name {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    text-align: center;
	justify-content: center;
  }
  .tservices-row .tservice-des {
    -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 100% !important;
            flex: 0 0 100% !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .tservices-row .tservice-des .btn {
    display: block;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 49%;
            flex: 0 0 49%;
  }
  .tservices-row .tservice-des .btn + .btn {
    margin-left: 2%;
  }

.p-100 {
	padding: 0 15px!important
}  
}

.d-menu-header {
  display: none;
}

@media (max-width: 1200px) {
  .d-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    background-color: #fff;
    -webkit-box-shadow: 0px -5px 30px rgba(0, 0, 0, 0.2);
            box-shadow: 0px -5px 30px rgba(0, 0, 0, 0.2);
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 0px;
    z-index: 1050;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-transition: .2s ease;
    transition: .2s ease;
    -webkit-transform: translateY(calc(100% + 30px));
            transform: translateY(calc(100% + 30px));
  }
  .d-menu.active {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  .d-menu .d-menu-header {
    display: block;
    padding: 14px 30px;
  }
  .d-menu .d-menu-header h2 {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 0px;
  }
  .d-menu .d-menu-content {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 5px 20px 100px 20px;
    overflow-y: scroll;
  }
  .d-menu .btn-close {
    height: 40px;
    width: 40px;
    padding: 0px;
    border-radius: 50%;
    background-color: #ddd;
  }
  .header-right-menu {
    position: fixed;
    bottom: 20px !important;
    left: 20px;
    background-color: #f6f6f6 !important;
    max-width: inherit !important;
    width: calc(100% - 40px) !important;
    top: inherit !important;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .header-right-menu::after {
    display: none !important;
  }
  .header-right-menu .hm-right-menubar {
    display: none !important;
  }
  .header-user {
    padding: 10px;
    border-radius: 50px;
    background-color: #eee;
    display: block;
    width: calc(100% - 0);
  }
  .header-menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .header-menu .hm-item {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: block;
    width: 100%;
  }
  .header-menu .dd-menu {
    position: relative !important;
    margin-top: -60px !important;
    margin-bottom: 60px !important;
  }
  .header-menu .hm-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
    -webkit-box-pack: start !important;f
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
    padding: 10px;
  }
  body.dark .d-menu {background: #242424!important}
  body.dark .header-user, body.dark .header-right-menu {background: #1e1e1e!important}

}

@media (max-width: 1200px) {
  .header-right-menu {
    margin: 0 0px;
  }
  .header-right-menu .hrm-item {
    padding: 0 0px;
  }
  .header-right-menu .hrm-text {
    display: none!important;
  }
  .hm-right-menubar {
    display: block;
  }
  .header-right-menu {
    padding: 10px;
    position: fixed;
    z-index: 1010;
    top: 20px;
    right: 0px;
    max-width: 80px;
    width: 100%;
    background-color: #fff;
    border-radius: 40px;
    -webkit-transition: .14s ease;
    transition: .14s ease;
  }
  .dark .header-right-menu {
	background: #22bcf4 !important;
  }
  .dark .header-right-menu::after {
	background: linear-gradient(-90deg, #242424, rgb(36 36 36 / 20%)) !important;
  }
  .header-right-menu:hover {
    max-width: 290px;
    -webkit-box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 2px 14px rgba(0, f0, 0, 0.1);
  }
  .header-right-menu:hover::after {
    width: 0px;
  }
  
  .header-right-menu::after {
    content: '';
    -webkit-transition: .14s ease;
    transition: .14s ease;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 100px;
    background-image: -webkit-gradient(linear, right top, left top, from(white), to(rgba(255, 255, 255, 0.2)));
    background-image: linear-gradient(-90deg, white, rgba(255, 255, 255, 0.2));
    z-index: 1011;
  }
}

@media (max-width: 1500px) {
  .header-menu {
    margin: 0px -14px;
    padding: 10px;
  }
  .header-menu .hm-item {
    padding: 0 14px;
  }
}

.fas.fa-sun, .d-light, .logo-dark {
	display: none
}



/* Dark mode for logged-in pages */
body.dark .main {background: #1e1e1e}

/* Dark mode for non-logged-in pages */
body.dark .app-body {background: #1e1e1e}
body.dark .home-main {background: #1e1e1e}
body.dark .home-head {background: #242424}
body.dark .home-header {background: #242424}
body.dark .home-section {background: #1e1e1e}
body.dark .footer {background: #181818}
body.dark .hh-title h1, body.dark .hh-p, body.dark .lt-title, body.dark .lt-text {color: #fff}
body.dark .hh-top-title span {color: #fff}
body.dark .login-menu .menu-link {color: #fff}
body.dark .btn-login {background: transparent; border-color: #2563EB; color: #fff}
body.dark .btn-login:hover {background: #2563EB; color: #fff}
body.dark .footer .fm-link {color: #fff}
body.dark .footer .fb-text {color: #aaa}
body.dark .home-title, body.dark .home-p {color: #fff}
body.dark .card {background: #242424; color: #fff}
body.dark .hpst-title, body.dark .hpst-text {color: #fff}
body.dark .hpri-title, body.dark .hpri-text {color: #fff}
body.dark .hcc-name, body.dark .hcc-about, body.dark .hcc-text {color: #fff}
body.dark .chcc-title, body.dark .chcc-p {color: #fff}
body.dark .login-form .form-control {background: #242424 !important; border-color: #444 !important; color: #fff !important}
body.dark .login-form .input-group-text {background: #242424 !important; border-color: #444 !important}
body.dark .igt-sq {background: #2563EB !important; color: #fff !important; padding: 12px; border-radius: 8px}
body.dark .igt-sq i {color: #fff !important}

/* Additional dark mode styles for complete coverage */
body.dark .hh-title span {color: #2563EB}
body.dark .btn-home {background: #2a2a2a; border-color: #444; color: #fff}
body.dark .btn-home:hover {background: #333; border-color: #2563EB}
body.dark .btn-primary.btn-home {background: #2563EB; border-color: #2563EB}
body.dark .btn-primary.btn-home:hover {background: #7c4dff; border-color: #7c4dff}
body.dark .login-top {background: transparent; border: none}
body.dark .lt-icon {color: #2563EB}
body.dark .login-top a {color: #7c4dff}
body.dark .login-top a:hover {color: #9575cd}
body.dark .login-top .row {background: transparent; border: none}
body.dark .login-top .col-lg-5, body.dark .login-top .col-md-5, body.dark .login-top .col-12 {background: transparent}
body.dark .login-top .col-md-auto {background: transparent}
body.dark .login-form {background: transparent}
body.dark .login-btn {background: #2563EB; border-color: #2563EB; color: #fff}
body.dark .login-btn:hover {background: #7c4dff; border-color: #7c4dff}
body.dark .alert-danger {background: rgba(211, 47, 47, 0.1); border-color: #d32f2f; color: #ff6b6b}
body.dark .alert-success {background: rgba(76, 175, 80, 0.1); border-color: #4caf50; color: #81c784}
body.dark .hpst-icon {background: #2a2a2a; color: #2563EB}
body.dark .counter {color: #fff}
body.dark .divider {border-color: #333}
body.dark .nav-home-social .nav-link {
  background: #374151;
  color: #e5e7eb;
  border-color: #4b5563;
}

body.dark .nav-home-social .nav-link:hover {
  background: #4b5563;
  border-color: #2563EB;
  color: #2563EB;
}

body.dark .nav-home-social .nav-link.active {
  background: #2563EB;
  border-color: #2563EB;
  color: #ffffff;
}
body.dark .card-pm {background: #2a2a2a; border-color: #444}
body.dark .card-pm:hover {border-color: #2563EB; transform: translateY(-5px)}
body.dark .star-point {color: #ffd700}
body.dark .hcc-footer {border-top: 1px solid #333}
body.dark .home-bottom-section::before {background: linear-gradient(180deg, #1e1e1e 0%, #2a2a2a 100%)}
body.dark .home-bottom-section::after {background: linear-gradient(180deg, #2a2a2a 0%, #181818 100%)}
body.dark .form-control::placeholder {color: #999}
body.dark .close, body.dark .btn-close {color: #fff; opacity: 0.8}
body.dark .close:hover, body.dark .btn-close:hover {opacity: 1}
body.dark .header {background: #242424}
body.dark .header-menu .hm-item .hm-link {color: #fff}
body.dark .header-user {border-color: #333}
body.dark .header-user .hu-username {color: #2563EB}
body.dark .header-user .hu-balance {color: #e7e7e7}
body.dark .header-right-menu .hrm-item .hrm-link .hrm-text {color: #e7e7e7}
body.dark .header-right-menu .hrm-item .hrm-link .hrm-icon {background:#1e1e1e; color:#e7e7e7}
body.dark .header-right-menu .hrm-item .hrm-link .hrm-icon::before {background:#242424!important}
body.dark .header-right-menu .hrm-item .hrm-link .hrm-icon .fas.fa-sun {color: #ffa000!important}
body.dark .header-right-menu .hrm-item .hrm-link .hrm-icon .fas.fa-moon, body.dark .header-right-menu .hrm-item .hrm-link .d-dark {display: none; transition: 300ms all}
body.dark .header-right-menu .hrm-item .hrm-link .hrm-icon .fas.fa-sun, body.dark .header-right-menu .hrm-item .hrm-link .d-light {display: block; transition: 300ms all}
body.dark .dropdown-menu.dd-menu {background: #1e1e1e!important}
body.dark .dropdown-menu.dd-menu .dropdown-item {color:#fff!important}
body.dark .dropdown-menu.dd-menu .dropdown-item:hover {background:#242424!important}
body.dark .btn.btn-open {color:#fff}
body.dark .d-menu .d-menu-header h2, body.dark .noii-content {color:#fff}
body.dark .card {background:#242424}
body.dark .card.nip-card {background: #2563EB}
body.dark .nop-card .nop-title, body.dark .nop-card .nop-progress, body.dark .nop-card .nop-text {color:#fff}
body.dark .noi-item, body.dark .form-control, body.dark .form-select, body.dark .nav-custom .nav-link {background: #1e1e1e; color: #fff}
body.dark .nav-custom .nav-link.active, body.dark .nav-custom-2 .nav-link.active, body.dark .nav-addfunds .nav-link.active, body.dark .nav-custom-4 .nav-link.active {background: #2563EB;color: #FFFFFF;}
body.dark .page-head .ph-title, body.dark .page-head .ph-active-page {color: #fff}
body.dark .nav-custom-2 .nav-link, body.dark .nav-addfunds .nav-link {background: #242424; color: #fff; border-color: #393939}
body.dark .services-search .input, body.dark .services-search .icon {background: #242424; color: #fff}
body.dark .services-search-new .input, body.dark .services-search-new .icon {background: #242424; color: #fff}
body.dark .src-txt {color: #fff}
body.dark .order-item {background: #242424}
body.dark .oio-text, body.dark .oib-item--text {color: #fff}
body.dark .order-input .oi-control, body.dark .order-input .btn, body.dark .order-input {background: #1e1e1e; color: #fff}
body.dark .order-item.active .oi-bottom {border-color: #1e1e1e}
body.dark .modal-body, body.dark .modal-content {background: #242424}
body.dark .services-info, body.dark .modal-header { border-color: #383838 }
body.dark .services-info .si-item small, body.dark .services-info .si-item p {
    color: #fff !important;
}
body.dark .modal-header .btn {color: #fff}
body.dark .ph-iib {background:#242424; color:#fff}
body.dark .pay-title, body.dark .pay-pg {color: #fff}
body.dark .nt-item {background: #242424}
body.dark .nt-item .nt-item--text {color:#fff}
body.dark .payments-table tr {background: #1e1e1e}
body.dark .payments-table .pyt-title {color:#fff}
body.dark .nt-item .nt-item--title {color:#fff}
body.dark .nt-select-cats .nt-select-cat .nt-sc-box {background: #242424}
body.dark .nt-select-cats .nt-select-cat .nt-sc-box-text {color: #fff}
body.dark .nt-select-cats .nt-select-cat input:checked + .nt-sc-box {background-color: #2563EB; color: #fff;}
body.dark .nt-sc .nt-sc-li label {border-color: #1e1e1e; background-color: #313131;}
body.dark .nt-sc .nt-sc-li label .text, body.dark .nt-title .nt-title-text {color: #fff}
body.dark .r-ticket .rt-title, body.dark .db-title, body.dark .r-ticket .r-ticket-title {color:#fff}
body.dark .ordernumbers .form-control, body.dark .form-control.fc-white {background:#242424;color:#fff}
body.dark .nt-sc .nt-sc-li label .check {border-color: #1e1e1e}
body.dark .tc-ti-text, body.dark .tc-tdet-title {color:#fff!important}
body.dark .schat-msg-input {background: #1e1e1e}
body.dark .tservices-row {color:#fff}
body.dark .service-item {background: #242424}
body.dark .tservice-fav .far.fa-star {color:#fff}
body.dark .modal-footer {background: #242424;border-color: #1e1e1e;}
body.dark .aff-title {color: #fff}
body.dark .af-item {background: #242424}
body.dark .af-item .af-item--text {color:#fff}
body.dark .form-label, body.dark .control-label, body.dark .chp-title {color: #fff}
body.dark .smmspot-updates-item {background:#242424}
body.dark .smmspot-updates-item .service-name, body.dark .smmspot-updates-item .update-date {color:#fff}
body.dark .accordion-header, body.dark .custom-accordion .accordion-item .accordion-body {background: #242424}
body.dark .custom-accordion .accordion-item .accordion-button {background:#242424;color:#fff}
body.dark .accordion-button::after {-webkit-filter: brightness(0) invert(1);filter: brightness(0) invert(1);}
body.dark .nav-custom-4 .nav-link {background:#242424;color:#fff}
body.dark .acp-item .acp-item--user, body.dark .order-item .oi-title {color:#fff}
body.dark .acp-abox {background:#242424}
body.dark .divider, body.dark .acpa-switch {border-color: #1e1e1e}
body.dark .user-card {background: #1e1e1e}
body.dark .user-card .user-card--status, body.dark .acpa-container .acpa-fullname {color:#fff}
body.dark .acpa-switch .switch-btn {color:#fff}
body.dark .logo-light {display: none; transition:300ms all}
body.dark .logo-dark {display:block!important; transition:300ms all}
body.dark pre.code {color: #fff !important;background: #1e1e1e !important;}
body.dark .table.api tbody, body.dark .table.api td, body.dark .table.api tfoot, body.dark .table.api th, body.dark .table.api thead, body.dark .table.api tr {color:#fff}
body.dark .modal-dialog.modal-xl .modal-content {background: #242424}

.reg-left {
	background: #2563EB url(https://storage.perfectcdn.com/4ab0d0/g73ebwxhzm3dl168.png);
	background-repeat: no-repeat;
  	min-height: 500px;
  	border-radius: 15px;
  	color: #fff
}

.p-100 {
	padding: 0 100px
}

.reg-left h3 {
	padding-top: 50px;
  	font-size: 32px;
  	line-height: 42px
}

.badge {
	background: #2563EB!important;
    border-radius: 5px!important;	
}

#statusModal .btn-close {
	-webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
    border: 2px dotted #fff;
    border-radius: 100%;
    opacity: 1;
}

#servisDetay .modal-dialog .modal-body h3 {
  font-size: 18px;
  font-weight: 600;
  padding: 15px 0;
}

#servisDetay .modal-dialog .modal-body p {
  color: #525560;
  font-size: 13px;
  padding: 0;
  max-height: 200px;
  overflow-x: scroll;
}

.services-info {
	position: relative;
    border: 1px solid #efefef;
    border-radius: 15px;
    padding: 15px 25px;
    background: rgb(26 27 30 / 10%);
}

.si-overlay {
  background: url(https://storage.perfectcdn.com/4ab0d0/mt7n76gh91irutfr.png);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 125px;
  border-radius: 20px;
  margin-top: -100px;
}

.services-info h2 {
  font-size: 16px;
}

.services-info .si-item {
  text-align: center;
}

.services-info .si-item small,
.services-info .si-item p {
  color: #0a2753 !important;
  font-weight: 400;
}

.services-info .si-circle {
	background: #2563EB;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    text-align: center;
    line-height: 32px;
    font-size: 16px;
    margin: auto auto 5px auto;
}

.services-info .si-circle i {
  color: #fff
}

.service-id-box {
  width: max-content;
  height: 50px;
  border-radius: 8px;
  background: #2563EB;
  color: #fff;
  padding: 0 15px!important;
  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;
}

#servisDetay .modal-dialog .modal-body .service-id-box {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: 35px;
  padding: 0 15px;
  border-radius: 8px;
  background: #c31331;
  color: #fff;
  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;
}

#servisDetay .modal-dialog .modal-body h3 {
  font-size: 18px;
  font-weight: 600;
  padding: 15px 0;
}

#servisDetay .modal-dialog .modal-body p {
  color: #525560;
  font-size: 13px;
  padding: 0;
  max-height: 200px;
  overflow-x: scroll;
}

@media (max-width: 991.98px) { 
  .services-info {
  	padding: 20px;
    margin: 0
  }
}

.hpst {
  margin: 10px 0;
}

.hpst .hpst-icon {
  font-size: 50px;
  line-height: 57px;
  color: #2563EB;
}

.hpst .hpst-title {
  font-weight: 600;
  font-size: 19px;
  line-height: 35px;
  color: #acacac;
}

.hpst .hpst-text {
  font-weight: bold;
  font-size: 35px;
  line-height: 35px;
  color: #0a2753;
}

.hsp-icon {
  height: 72px;
  width: 72px;
  border-radius: 50%;
  background: rgba(33, 197, 251, 0.15);
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 30px;
  font-weight: 900;
  font-size: 35px !important;
  line-height: 35px;
  color: #2563EB;
}

.hpri-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: #0A2753;
}

.privPrevbtn {
  border: 1px solid #0A2753;
  background-color: transparent;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #0A2753;
  padding: 0px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: .14s;
  transition: .14s;
  font-size: 20px;
}

.privPrevbtn:hover {
  background-color: #0A2753;
  color: #fff;
}

.card-pm {
  cursor: pointer;
  -webkit-transition: .14s ease;
  transition: .14s ease;
}

.card-pm:hover {
  background-color: #fafafa;
}

.card-pm .card-body {
  height: 100px;
  width: 100px
}

.card-pm .card-body img {
  max-width: 100%;
  max-height: 100%;
}

.card-pm .card-body i {
  font-size: 46px
}

.card-pm .card-body .fa-bitcoin {
	color: #ff7b00
}

.card-pm .card-body .fa-cc-paypal {
	color: #003087
}

.card-pm .card-body .fa-ethereum {
	color: #62688f
}

.card-pm .card-body .fa-apple-pay {
	color: #000
}

.card-pm .card-body .fa-cc-stripe {
	color: #00afe1
}

.card-pm .card-body .fa-cc-visa {
	color: #f7b600
}

@media (max-width: 991.98px) {
	.col-mob {
        flex-direction: inherit;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        align-items: center;
    }
  
	.col-mob > * {
		flex: 1;
      	text-align: center;
      	padding: 6px 14px;
	}

    .col-mob + .col-mob {
    	border-top: 1px solid rgba(0,0,0,.2)
    }
  
	.order-item {
		padding: 5px 0px !important;
	}
  
  .order-input { margin: 0px !important; }
}

.order-head {
	background: #2563EB;
  	color: #fff;
	border-radius: 5px;
  	padding-top: 30px;
  	padding-bottom: 30px
}


body.dark #ticketsend .fc-white {
    background: #313131;
}

.sticky31 {
    position: sticky;
    top: 120px;
}

.rtickets {
	max-height: 500px;
  	overflow: scroll
}

.rtickets::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

body.dark .rtickets::-webkit-scrollbar-thumb {
	background: rgba(34, 200, 254, 0.2);
}

.rtickets::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 5px;
}

.rtickets::-webkit-scrollbar-track {
	background: transparent;
}

.pagination {
  margin: 0;
  padding: 0;
  text-align: center
}

.pagination li {
  display: inline
}

.pagination li a {
  display: inline-block;
  text-decoration: none;
  padding: 5px 10px;
  color: #202020;
  background: #fff;
  margin-right: 5px;
}

.pagination li a {
  border-radius: 5px;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s
    
}
.pagination li.active a {
  background-color: #2563EB;
  color: #fff
}
.pagination li a:hover:not(.active) {
  background-color: #2563EB;
} 
.col-xl-auto {
    flex: 0 0 auto;
    width: 120px;
}  

.select2.select2-container.select2-container--default {
    width: 100%!important;
}

.currency-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	z-index: 2000;
	display: none;
}

.currency-drawer {
	display: none;
	transform: translateX(100%);
	position: fixed;
	right: 0;
	top: 0;
	height: 100vh;
	z-index: 2003;
	background: #fff;
	border-left: 1px solid #ccc;
	width: 280px;
	display: flex;
	flex-direction: column;
	transition: 0.14s ease;
}

.rtl-enable .currency-drawer {
	transform: translateX(0);
}

.currency-drawer .drawer-header {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 80px;
	padding: 0 20px;
	background-color: #2563EB;
}

.currency-drawer .drawer-header-title {
	font-weight: 600;
	font-size: 19px;
	line-height: 22px;
	color: #fff;
	margin-bottom: 0;
}

.currency-drawer .drawer-header-close {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	font-size: 20px;
	cursor: pointer;
  	color: #fff
}

.currency-drawer .drawer-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 10px 20px 40px;
	overflow-y: auto;
}

.currency-item {
	background: #F6F6F6;
    border: 1px solid #eee5e5;
    border-radius: 7px;
    padding: 7px 10px;
    display: block;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #3E4954;
    transition: 0.14s ease;
    cursor: pointer;
    margin-bottom: 5px;
}

.currency-item span {
	background: #2563EB;
    float: right;
    width: 35px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
}

.currency-item:hover,
.currency-item:focus {
	color: #2563EB;
	border: 1px solid #2563EB
}

.currency-item.active {
	background: #2563EB;
	border: 1px solid #2563EB;
}

.btn.search {
	border-radius: 0 10px 10px 0;
  	height: 50px
}


.rtl-enable .btn.search {
    border-radius: 10px 0 0 10px;
}

.sUpd.priceDown {
	color: rgba(133, 131, 251, 1)
}

.sUpd.newServ {
	color: rgb(12, 224, 21, 1)
}

.sUpd.priceUp {
	color: rgba(255, 38, 38, 1)
}

.sUpd.priceActive {
	color: rgba(255, 193, 7, 1)
}

.sUpd.priceCare {
	color: rgba(214, 97, 238, 1)
}

.mobile-navbar {
    position: fixed;
    z-index: 1031;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 70px;
    border-top: 1px solid;
    background-color: #fff;
    border-color: #f6f6f6;
    padding: 10px;
    -webkit-box-shadow: 0px 24px 40px rgba(30, 170, 231, 1);
    box-shadow: 0px 24px 40px rgba(30, 170, 231, 1);
}

.mobile-navbar-content {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-around;
}

.mnc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #3E4954;
}

.mnc-item.active {
  color: #fff;
}

.mnc-item-icon {
  font-size: 20px;
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}

.mnc-item-text {
  font-size: 12px;
  font-weight: 500;
}

@media (min-width: 768px) {
  .mobile-navbar {
    display: none;
    opacity: 0;
    transform: translateY(100%);
  }
}

.nPlatform, .slistOne .nPlatform {
   display: none
}

.slistTwo .nPlatform  {
   display: block
}

body .devServices, .slistOne .devServices {
   background: #2563EB;
   color: #fff
}

body .norServices, .slistOne .norServices {
   color: #3E4954
}

.slistTwo .norServices {
   background: #2563EB;
   color: #fff
}

.slistTwo .devServices {
   background: transparent;
   color: #3E4954
}

.norServices, .devServices {
    padding: 0;
    width: 24px;
    height: 24px;
    border-radius: 100%!important;
  	font-size: 10px
}

.nbtn {
	background: #dfdfdf;
    padding: 5px 0;
    border-radius: 50px;
    width: 66px;
}

.top-card {
	display: flex;
  	align-items: center;
}

.top-card .top-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgb(14 0 255 / 15%);
    margin-right: 15px;
    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;
}

.rtl-enable .top-card .top-icon {
    margin-left: 15px;
  	margin-right: auto
}

.top-card .top-icon i {
    font-size: 24px;
    line-height: 24px;
    color: #2563EB;
}

.top-card h3.top-title {
	font-size: 22px;
    margin-bottom: 0.2rem;
  	color: #3E4954
}

.top-card .top-text {
	font-size: 13px;
    color: #878787
}

.progress-bar {
    border-radius: 10px;
    background-color: #2563EB
}

.progress {
    height: 0.5rem;
    background-color: #F6F6F6;
    border-radius: 10px;
}

.progress-btn .btn {
    background-color: #2563EB;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  
    border-radius: 10px;
}

.w-text {
    font-size: 18px;
    color: #3E4954;
    text-align: center;
    border-bottom: 1px solid #f6f6f6;
    padding: 0 0 10px 0;
}

body.dark .w-text {
    border-color: #1e1e1e;
}

@media (max-width: 991.98px) {
  .top-card {
  		margin-bottom: 25px;
        text-align: center;
    	justify-content: center
  }
  .top-text .d-flex {
  		justify-content: center
  }
  .progress-btn .btn {
  		justify-content: center
  }
  body.dark .w-text {
        text-align: center;
        padding: 7px;
        font-size: 18px;
        background: #3E4954;
        border-radius: 10px;
    	border: none;
  }
  .w-text {
        text-align: center;
        padding: 7px;
        font-size: 18px;
        background: #f6f6f6;
        border-radius: 10px;
    	border: none;
  }  
  .top-card h3.top-title {
  		font-size: 18px
  }
  .top-card .top-text {
     	font-size: 12px;
  }

}

body.dark .w-text, body.dark .top-card h3.top-title {
  		color: #fff!important
  }
body.dark .top-card h3.top-title .counter {
  		color: #fff!important
  }
body.dark .top-card .top-text {
      color: #ded6d6!important
  }  

body.dark .currency-item {
    background: #3e4954;
    border: 1px solid #242424;
}

body.dark .nbtn {
    background: #3e4954;
}

body.dark .norServices, body.dark .devServices {
    color: #fff!important
}


.select2-results__option a {
	color: #3E4954 !important;
	font-size: 14px !important;
  	border-bottom: 1px solid #e9ecef
}

body.dark .select2-results__option a {
	color: #fff !important;
	font-size: 14px !important;
  	border-bottom: 1px solid #242424
}

.select2-results__option a:hover {
	background: #e9ecef;
	color: #3E4954 !important
}

body.dark .select2-results__option a:hover {
	background: #242424;
	color: #fff !important
}

.select2-container--default .select2-results>.select2-results__options,
.select2-container--open .select2-dropdown--below,
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option:hover {
	background-color: #F6F6F6 !important;
}

body.dark .select2-container--default .select2-results>.select2-results__options,
body.dark .select2-container--open .select2-dropdown--below,
body.dark .select2-container--default .select2-results__option[aria-selected=true],
body.dark .select2-container--default .select2-results__option:hover {
	background-color: #1e1e1e !important;
}


.select2-container--default .select2-selection--single {
	height: 45px;
	line-height: 24px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
	white-space: normal !important;
}

.select2-container .select2-selection--single {
    height: 50px;
    background: #f6f6f6;
    border: none;
}

body.dark .select2-container .select2-selection--single {
    background: #1e1e1e;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 18px;
}

body.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #fff
}

.select2-results__option {
	padding: 0!important
}

.select2-container .select2-selection__icon {
    width: 25px;
}

.select2-dropdown {
	border: none
}

ul.platforms {
	display: flex;
	align-content: center;
	list-style: none;
	gap: 6px;
	margin: 0;
	padding: 0;
}

ul.platforms li {
	flex-grow: 1;
}

ul.platforms li button {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid #222f56;
	background: #192446;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

ul.platforms li button.all {
	background: #4a5cf6;
	border: 1px solid #222f56;
}

ul.platforms li button.instagram {
	background: #ff0099;
	border: 1px solid #ff0099;
}

ul.platforms li button.twitter {
	background: #1da1f2;
	border: 1px solid #1da1f2;
}

ul.platforms li button.facebook {
	background: #3b5998;
	border: 1px solid #3b5998;
}

ul.platforms li button.youtube {
	background: #ff0000;
	border: 1px solid #ff0000;
}

ul.platforms li button.tiktok {
	background: #000000;
	border: 1px solid #000000;
}

ul.platforms li button.telegram {
	background: #0088cc;
	border: 1px solid #0088cc;
}

ul.platforms li button.steam {
	background: #000000;
	border: 1px solid #000000;
}

ul.platforms li button.discord {
	background: #7289da;
	border: 1px solid #7289da;
}

ul.platforms li button.reddit {
	background: #ff4500;
	border: 1px solid #ff4500;
}

ul.platforms li button.twitch {
	background: #6441a5;
	border: 1px solid #6441a5;
}

ul.platforms li button.snapchat {
	background: #fffc00;
	border: 1px solid #fffc00;
}

ul.platforms li button.snapchat i {
	color: #000;
}

ul.platforms li button.linkedin {
	background: #0077b5;
	border: 1px solid #0077b5;
}

ul.platforms li button.pinterest {
	background: #bd081c;
	border: 1px solid #bd081c;
}

ul.platforms li button.tumblr {
	background: #35465c;
	border: 1px solid #35465c;
}

ul.platforms li button.soundcloud {
	background: #ff5500;
	border: 1px solid #ff5500;
}

ul.platforms li button.likee {
	background: #964bff;
	border: 1px solid #964bff;
}

ul.platforms li button.website {
	background: #ff0000;
	border: 1px solid #ff0000;
}

ul.platforms li button.trendyol {
	background: #f27a1a;
	border: 1px solid #f27a1a;
}

ul.platforms li button i {
	font-size: 18px;
	color: #fff;
}

ul.platforms li button.active {
	transform: scale(1.1);
}

@media (max-width: 768px) {
	.scrollt {
		display: flex;
		overflow-x: scroll;
		overflow-y: auto;
		max-width: 100%;
	}

	.scrollt > * {
		display: flex;
		overflow-x: scroll;
		overflow-y: hidden;
		max-width: 100%;
		width: 100%;
		flex-wrap: nowrap;
		white-space: nowrap;
		justify-content: flex-start !important;
	}

	.scrollt ul.platforms {
		padding-bottom: 20px;
	}

	.scrollt .app-ord-nav {
		padding-top: 10px;
		padding-bottom: 20px;
	}
}

.s-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.s-row.s-title {
	font-weight: 600;
	display: none;
}


.services-wrapper {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.si-wrapper {
	flex: 0 0 auto;
	width: 100%;
	position: relative;
}

.s-col {
	flex: 0 0 auto;
}

.service-item {
	padding: 12px 30px;
	border-radius: 15px;
	margin-bottom: 14px;
	background: #fff;
	border: 1px solid #fff;
	box-sizing: border-box;
	border-radius: 15px;
}


.service-item .s-col-id i {
	cursor: pointer
}

.services-head-row .service-item {
	background-color: transparent;
	border: none;
}

.sp-serv-title {
	font-weight: 600;
	font-size: 14px;
	line-height: 17px;
}

.sp-services .card {
	margin-bottom: 30px;
}


.si-header {
	padding: 15px 30px;
	background: #2563EB;
	border-radius: 15px;
	border: 1px solid #2563EB;
	margin-bottom: 14px;
}

.si-header .si-title {
	font-weight: 600;
	font-size: 16px;
	line-height: 23px;
	color: #fff;
	margin-bottom: 0;
}

@media only screen and (min-width: 992px) {
	.si-wrapper {
		flex: 0 0 auto;
		width: 50%;
	}

	.s-row.s-title {
		display: flex;
	}

	.s-col {
		flex: 0 0 50px;
		width: 50px;
	}

	.s-col.s-col-sm {
		flex: 0 0 70px;
		width: 70px;
	}

	.s-col.s-col-md {
		flex: 0 0 135px;
		width: 135px;
	}

	.s-col.s-col-lg {
		flex: 0 0 180px;
		width: 180px;
	}

	.s-col.s-title {
		flex: 1 0 0;
		width: auto;
	}

	.services-wrapper {
		flex-direction: column;
	}

	.si-wrapper {
		width: 100%;
	}

	.sp-services .card {
		background-color: #fff;
		border: 1px solid #eee;
		overflow: hidden;
	}
}

@media only screen and (max-width: 991.98px) {

	.service-item .s-row {
		flex-wrap: wrap;
		align-items: center;
	}

	.service-item .s-col-avtime {
		width: 100%;
		text-align: center;
	}

	.service-item .s-col-btn {
		flex: 1;
	}

	.service-item .s-col {
		padding: 0px 0;
	}

	.service-item .s-col::before {
		content: attr(data-title);
		display: block;
		padding-bottom: 6px;
		font-weight: 600;
		color: var(--color-3);
		font-size: 13px;
	}

	.service-item .s-col-fav {
		order: 100;
	}

	.service-item .s-col-id {
		width: 100%;
		text-align: center;
	}

	.service-item .s-title {
		width: 100%;
		text-align: center;
	}

	.service-item .s-col-c {
		width: 30%;
		text-align: center;
	}

	.service-item .s-col-d {
		width: 100%;
		text-align: center;
	}

}

body.dark .service-item {
    border-color: #242424;
}

.fav-btn, .fav-btn:hover, .fav-btn:focus {
	background: #f7f7f7;
    border: none!important;
    border-radius: 5px!important
}

body.dark .fav-btn, body.dark .fav-btn:hover, body.dark .fav-btn:focus {
	background: #1e1e1e;
    border: none!important;
    border-radius: 5px!important;
  	color: #a0a0a0
}

.fav-btn.smmspot-fb-faved, .fav-btn.smmspot-fb-faved:hover, .fav-btn.smmspot-fb-faved:focus {
	background: #2563EB;
    border: none!important;
    border-radius: 5px!important;
    color: #fff;
}

body.dark .fav-btn.smmspot-fb-faved, body.dark .fav-btn.smmspot-fb-faved:hover, body.dark .fav-btn.smmspot-fb-faved:focus {
	background: #2563EB;
    border: none!important;
    border-radius: 5px!important;
    color: #fff;
}

.back-to-top {
  background-color: #2563EB;
  text-decoration: none;
  cursor: pointer;
  width: 56px;
  height: 56px;
  z-index: 999;
  position: fixed;
  right: 32px;
  bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 100%;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.4);
}

.back-to-top:hover {
  background-color: #2563EB;
}

.back-to-top:active {
  box-shadow: none;
  background-color: #2563EB;
}

.back-to-top svg.icon__arrow-up {
  fill: white;
  width: 32px;
  height: 32px;
}

 #error-search {
     visibility: hidden;
     min-width: 250px;
     background-color: #de3f3f;
     color: #fff;
     text-align: center;
     border-radius: 20px;
     padding: 16px;
     position: fixed;
     bottom: 30px;
     left: 50%;
     z-index: 5;
     transform: translate(-50%, -50%);
}
 #error-search.show i {
     background: #fff;
     border-radius: 50px;
     line-height: 1;
     display: flex;
     width: 40px;
     height: 40px;
     align-items: center;
     justify-content: center;
}
 #error-search.show i {
     color: #de3f3f !important 
}
 #error-search.show {
     visibility: visible;
     -webkit-animation: .5s fadein, .5s 2.5s fadeout;
     animation: .5s fadein, .5s 2.5s fadeout;
     display: flex;
     gap: 10px;
     justify-content: center;
     align-items: center 
}
 #error-search {
     background: #de3f3f;
     border: 0;
     color: #fff 
}

 @-webkit-keyframes fadein {
     from {
         bottom: 0;
         opacity: 0 
    }
     to {
         bottom: 30px;
         opacity: 1 
    }
}
 @keyframes fadein {
     from {
         bottom: 0;
         opacity: 0 
    }
     to {
         bottom: 30px;
         opacity: 1 
    }
}
 @-webkit-keyframes fadeout {
     from {
         bottom: 30px;
         opacity: 1 
    }
     to {
         bottom: 0;
         opacity: 0 
    }
}
 @keyframes fadeout {
     from {
         bottom: 30px;
         opacity: 1 
    }
     to {
         bottom: 0;
         opacity: 0 
    }
}

.input-group input {
	padding-left: 35px
}

.input-group-btn {
	position: absolute;
    top: 15px;
    left: 15px;
}

.input-group-btn i {
	color: #2563EB
}

.top-box {
	display: flex
}

.top-box button {
	margin-left: 10px;
  	padding: 10px 15px
}

.hm-item .badge {
    height: 18px;
    position: absolute!important;
    border-radius: 100%!important;
}

@media (max-width: 991.98px) {
  .hm-item .badge {
      position: absolute;
      top: 10px
  }
  .page-content {
      padding-bottom: 65px;
  }  
}

body.dark .table {
	color: #fff
}

body.dark .table tr, body.dark .table tr th {
	border-color: #1e1e1e
}

@media (max-width: 991.98px) {
  .back-to-top {
  	bottom: 100px!important
  }
}

.btn-dark, .btn-dark:hover, .btn-dark:focus {
    background: #f7f7f7;
    padding: 10px 15px;
    color: #3e5275;
}

.btn-dark.active, .btn-dark.active:hover, .btn-dark.active:focus {
  background: #2563EB!important
}

.flag-icon {
	width: 42px!important;
  	height: 42px!important
}

.flag-icon.flag-icon-squared {
    width: 42px!important
}

/* BRUTAL FIX: Force hamburger to top right corner */
@media (max-width: 991.98px) {
    .btn-open, .menu-toggle {
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 9999 !important;
        background: #2563EB !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 12px 15px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
        display: block !important;
    }
    
    /* Position dark mode button to the left of hamburger */
    .mobile-dark-btn {
        position: fixed !important;
        top: 20px !important;
        right: 80px !important; /* 60px from hamburger + 20px gap */
        z-index: 9999 !important;
    }
    
    /* Dark mode hamburger button */
    .dark .btn-open, .dark .menu-toggle {
        background: #444 !important;
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(255,255,255,0.1) !important;
    }
    
    /* Hide the original hamburger in header structure */
    .header-content .col-auto.d-lg-none {
        display: none !important;
    }
    
    /* Mobile menu should be hidden by default, controlled by Bootstrap collapse */
    #mobileMenu.collapse:not(.show) {
        display: none !important;
    }
    
    #mobileMenu.collapse.show {
        display: block !important;
    }
}

/* Hide mobile menu in desktop view */
@media (min-width: 992px) {
    #mobileMenu,
    #mobileMenu.show,
    #mobileMenu.collapse.show {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    .menu-toggle,
    .btn-open {
        display: none !important;
    }
}