@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/* ==========================================================================
   ConvertFlux admin theme overlay

   Visual layer only. Loaded after custom_v47.css and before responsive.css,
   so colour/appearance rules use !important while layout rules are avoided,
   which keeps responsive.css breakpoints authoritative.

   Palette taken from convertflux.io design tokens.
   ========================================================================== */

:root {
  --cf-pink: #fbd7f9;
  --cf-pink-dark: #f9cdf7;
  --cf-pink-light: #fde1fb;
  --cf-pink-tint: #fdf1fc;
  --cf-pink-wash: #fff7fe;
  --cf-pink-deep: #f8bbed;

  --cf-sage: #a6b5ae;
  --cf-cream: #f5f0e8;

  --cf-ink: #111827;
  --cf-text-dark: #1a202c;
  --cf-text-medium: #2d3748;
  --cf-text-light: #4a5568;
  --cf-text-muted: #718096;

  --cf-bg: #f8fafc;
  --cf-surface: #ffffff;
  --cf-border: #e5e7eb;
  --cf-border-soft: #eef0f3;

  --cf-danger: #cc0000;
  --cf-danger-bg: #fef2f2;
  --cf-success: #15803d;
  --cf-success-bg: #dcfce7;
  --cf-warning: #b45309;
  --cf-warning-bg: #fef3c7;
  --cf-info: #0f64cf;
  --cf-info-bg: #eff6ff;

  --cf-radius-sm: 8px;
  --cf-radius: 12px;
  --cf-radius-lg: 16px;
  --cf-radius-xl: 24px;

  --cf-shadow-sm: 0 1px 2px rgba(17, 24, 39, .06);
  --cf-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  --cf-shadow-md: 0 16px 48px rgba(0, 0, 0, .10);
  --cf-shadow-btn: 0 8px 25px rgba(0, 0, 0, .12);
  --cf-shadow-btn-hover: 0 12px 35px rgba(0, 0, 0, .18);

  --cf-sidebar: #ffffff;
  --cf-sidebar-raised: #fdf1fc;
  --cf-sidebar-line: #e9ebef;
}

/* --------------------------------------------------------------------------
   1. Typography
   Icon fonts are re-asserted afterwards so glyphs are never replaced.
   -------------------------------------------------------------------------- */
body,
p, span, div, a, li, td, th, label, legend, small, strong, em, blockquote,
h1, h2, h3, h4, h5, h6,
input, select, textarea, button,
.btn, .form-control, .alert, .nav ul li a, .dropdown-menu > li > a {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

.fa,
.fa:before,
[class^="fa-"]:before,
[class*=" fa-"]:before {
  font-family: 'FontAwesome' !important;
}

.glyphicon,
.glyphicon:before,
[class^="glyphicon-"]:before,
[class*=" glyphicon-"]:before {
  font-family: 'Glyphicons Halflings' !important;
}

body {
  background: var(--cf-bg) !important;
  color: var(--cf-text-dark);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--cf-text-dark);
  letter-spacing: -.01em;
}

a {
  color: var(--cf-text-dark);
  transition: color .18s ease;
}

a:hover,
a:focus {
  color: var(--cf-ink);
}

/* Brand wash behind the page content */
.choose-game-wrapper,
.dashboard-wrappaer,
.choose-league-wrapper {
  background-image: radial-gradient(1100px 460px at 86% -8%, rgba(251, 215, 249, .32), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   2. Sidebar
   -------------------------------------------------------------------------- */
.header-left-bar.scrollbar {
  background: var(--cf-sidebar) !important;
  border-right: 1px solid var(--cf-border);
}

.logo {
  background: var(--cf-sidebar) !important;
  border-right: none !important;
  border-bottom: 1px solid var(--cf-sidebar-line) !important;
}

.logo .logo-text {
  color: var(--cf-ink) !important;
  letter-spacing: -.01em;
}

.nav ul {
  border-bottom-color: var(--cf-sidebar-line) !important;
}

.nav ul li {
  border-top-color: var(--cf-sidebar-line) !important;
}

.nav ul li a {
  color: var(--cf-text-light) !important;
  font-size: 15px !important;
  font-weight: 500;
  letter-spacing: .01em;
  transition: background .18s ease, color .18s ease;
}

.nav-icon {
  border-right-color: var(--cf-sidebar-line) !important;
  color: var(--cf-text-muted);
  transition: color .18s ease;
}

.nav ul li a.active,
.nav li:hover > a,
.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover {
  background: var(--cf-pink-tint) !important;
  color: var(--cf-ink) !important;
  box-shadow: inset 3px 0 0 var(--cf-pink-deep);
}

.nav ul li a.active .nav-icon,
.nav li:hover .nav-icon {
  background: transparent !important;
  color: var(--cf-ink);
}

.nav .dropdown.open {
  background: var(--cf-sidebar) !important;
}

.nav .dropdown.open .dropdown-menu li {
  border-color: var(--cf-sidebar-line) !important;
}

.nav .dropdown.open .dropdown-menu li a {
  background: var(--cf-pink-wash) !important;
  color: var(--cf-text-medium) !important;
  font-size: 13.5px !important;
  font-weight: 400;
  box-shadow: none;
}

.nav .dropdown.open .dropdown-menu li a.active,
.nav .dropdown.open .dropdown-menu li:hover > a,
.nav .dropdown-menu li a:hover,
.dropdown.open li.dropdown-submenu a.active,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
  background: var(--cf-pink-light) !important;
  color: var(--cf-ink) !important;
}

.nav-badge,
.nav .dropdown.open .dropdown-menu li a span.nav-badge {
  background: var(--cf-pink-deep) !important;
  color: var(--cf-ink) !important;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   3. Top header
   -------------------------------------------------------------------------- */
.head-right-bar {
  background: var(--cf-surface) !important;
  border-bottom: 1px solid var(--cf-border) !important;
  box-shadow: var(--cf-shadow-sm);
}

.head-right-bar .navicon-icon {
  color: var(--cf-text-light) !important;
}

.head-right-bar .navicon-icon:after {
  background: var(--cf-border) !important;
}

.head-right-bar a:hover i {
  color: var(--cf-ink) !important;
}

.user-login li {
  border-right-color: var(--cf-border) !important;
}

.user-login li span,
.user-login li a {
  color: var(--cf-text-medium) !important;
  font-weight: 500;
}

.user-login li i {
  color: var(--cf-text-light) !important;
}

.user-login li figure {
  background: var(--cf-pink) !important;
  border: none !important;
  color: var(--cf-ink);
  line-height: 30px;
}

.user-login li figure i {
  color: var(--cf-ink) !important;
}

.user-login .logout figure {
  background: var(--cf-pink-deep) !important;
}

.user-login li:hover figure i,
.user-login li:hover a,
.user-login li:focus figure i,
.user-login li:focus a {
  color: var(--cf-ink) !important;
}

/* --------------------------------------------------------------------------
   4. Page title bar
   -------------------------------------------------------------------------- */
.content-title-warp {
  background: var(--cf-surface) !important;
  border-bottom: 1px solid var(--cf-border);
  box-shadow: var(--cf-shadow-sm) !important;
}

.content-title-section h2 {
  color: var(--cf-text-dark) !important;
  font-weight: 700;
  text-transform: none !important;
  letter-spacing: -.02em;
}

.content-title-section h2 i {
  color: var(--cf-pink-deep) !important;
}

/* --------------------------------------------------------------------------
   5. Buttons
   ConvertFlux button: soft pink fill, black text, black outline,
   inverting to solid black on hover.
   -------------------------------------------------------------------------- */
.btn {
  border-radius: 9999px !important;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.btn.green-btn,
.btn-col.green-btn,
.submit-button .submit-btn,
.content-title-section .title-btn .btn-col,
.content-title-section .title-btn .dashboard-btn,
.content-title-section .title-btn .hub-btn,
.content-title-section .title-btn .leagues-btn,
.btn.light-blue-btn,
.fliter-row .schedule,
.card-block .form-group .btn-block,
.edit-details-title .game-btn,
.btn-primary.green-btn {
  background: var(--cf-pink) !important;
  color: var(--cf-ink) !important;
  border: 1px solid var(--cf-ink) !important;
  border-radius: 9999px !important;
  box-shadow: var(--cf-shadow-btn);
  text-transform: none !important;
}

.btn.green-btn:hover,
.btn-col.green-btn:hover,
.submit-button .submit-btn:hover,
.content-title-section .title-btn .btn-col:hover,
.content-title-section .title-btn .dashboard-btn:hover,
.content-title-section .title-btn .hub-btn:hover,
.content-title-section .title-btn .leagues-btn:hover,
.btn.light-blue-btn:hover,
.fliter-row .schedule:hover,
.card-block .form-group .btn-block:hover,
.edit-details-title .game-btn:hover,
.btn-primary.green-btn:hover {
  background: var(--cf-ink) !important;
  color: #fff !important;
  border-color: var(--cf-ink) !important;
  box-shadow: var(--cf-shadow-btn-hover);
}

/* Secondary / cancel */
.submit-button .cancel-btn,
.cancel-btn,
.edit-details-title .player-btn {
  background: var(--cf-surface) !important;
  color: var(--cf-text-medium) !important;
  border: 1px solid var(--cf-border) !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.submit-button .cancel-btn:hover,
.cancel-btn:hover,
.edit-details-title .player-btn:hover {
  background: var(--cf-bg) !important;
  color: var(--cf-ink) !important;
  border-color: var(--cf-text-muted) !important;
}

/* Keep destructive + draft affordances semantically obvious */
.red,
.red:hover,
.fliter-row .schedule.red,
.fliter-row .schedule.red:hover {
  background: var(--cf-danger) !important;
  color: #fff !important;
  border-color: var(--cf-danger) !important;
}

.btn-warning {
  background: var(--cf-warning-bg) !important;
  color: var(--cf-warning) !important;
  border: 1px solid #fcd34d !important;
  text-transform: none !important;
}

.btn-warning:hover {
  background: #fde68a !important;
  color: #92400e !important;
}

.blue,
.blue:hover,
.blue-btn,
.blue-btn:hover {
  background: var(--cf-text-dark) !important;
  color: #fff !important;
}

.green,
.green:hover {
  background: var(--cf-success) !important;
  color: #fff !important;
}

.gray,
.gray:hover {
  background: var(--cf-sage) !important;
  color: var(--cf-ink) !important;
}

.submit-button .btn {
  text-transform: none !important;
  border-radius: 9999px !important;
  padding: 9px 20px !important;
}

/* --------------------------------------------------------------------------
   6. Cards / surfaces
   -------------------------------------------------------------------------- */
.table-row,
.card-block,
.play-note,
.edit-details-content {
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border) !important;
  border-radius: var(--cf-radius-lg) !important;
  box-shadow: var(--cf-shadow) !important;
}

.form-warp {
  border: 1px solid var(--cf-border-soft) !important;
  border-radius: var(--cf-radius) !important;
  background: var(--cf-surface);
}

.mid-content h2 {
  color: var(--cf-text-dark) !important;
  font-weight: 700;
  letter-spacing: -.01em;
}

.edit-details-title {
  border-bottom-color: var(--cf-border) !important;
}

.edit-details-title h3 {
  color: var(--cf-text-dark) !important;
  font-weight: 700;
}

/* Dashboard tiles */
.game-box {
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border) !important;
  border-radius: var(--cf-radius-lg) !important;
  box-shadow: var(--cf-shadow-sm) !important;
  text-transform: none !important;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.game-box:hover {
  border-color: var(--cf-pink-deep) !important;
  box-shadow: var(--cf-shadow-md) !important;
  transform: translateY(-2px);
}

.game-box .info h4 {
  color: var(--cf-text-dark) !important;
  font-size: 15px !important;
  font-weight: 600;
}

.game-box .info i {
  color: var(--cf-pink-deep) !important;
}

.game-box:hover .info h4,
.game-box:hover .info i {
  color: var(--cf-ink) !important;
}

.game-box .info figure i {
  color: var(--cf-pink-deep) !important;
}

.game-box-row h1,
.game-box-row .title h1 {
  color: var(--cf-text-dark) !important;
  font-weight: 700;
}

.game-box-row .title h1:after {
  background: var(--cf-pink-deep) !important;
}

/* --------------------------------------------------------------------------
   7. Tables
   -------------------------------------------------------------------------- */
.dashboard-table .table {
  border: 1px solid var(--cf-border) !important;
  border-radius: var(--cf-radius) !important;
  overflow: hidden;
  background: var(--cf-surface);
}

.dashboard-table .table thead {
  background: var(--cf-pink-tint) !important;
  color: var(--cf-text-dark) !important;
  font-weight: 600 !important;
}

.dashboard-table .table > thead > tr > th {
  border-left-color: rgba(17, 24, 39, .06) !important;
  border-bottom: 1px solid var(--cf-border) !important;
  color: var(--cf-text-dark) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
}

.dashboard-table .table > tbody > tr > td {
  border-left-color: var(--cf-border-soft) !important;
  border-top-color: var(--cf-border-soft) !important;
  color: var(--cf-text-light) !important;
}

.dashboard-table .table tbody tr:nth-of-type(2n) {
  background: #fcfdfe !important;
}

.dashboard-table .table tbody tr:hover {
  background: var(--cf-pink-wash) !important;
}

.dashboard-table .table > tbody > tr > td a {
  border-left-color: var(--cf-border) !important;
  color: var(--cf-text-medium) !important;
}

/* Row action buttons */
.dashboard-table .table .btn {
  background: var(--cf-bg) !important;
  border: 1px solid var(--cf-border) !important;
  border-radius: 9999px !important;
  color: var(--cf-text-medium) !important;
  font-weight: 500;
}

.dashboard-table .table .btn-edit:hover {
  background: var(--cf-pink) !important;
  border-color: var(--cf-ink) !important;
  color: var(--cf-ink) !important;
}

.dashboard-table .table .btn-tresh:hover {
  background: var(--cf-danger) !important;
  border-color: var(--cf-danger) !important;
  color: #fff !important;
}

.dashboard-table .table .btn-view:hover {
  background: var(--cf-text-dark) !important;
  border-color: var(--cf-text-dark) !important;
  color: #fff !important;
}

.dashboard-table .table .btn.active {
  background: var(--cf-success-bg) !important;
  border-color: #86efac !important;
  color: var(--cf-success) !important;
}

.table .active {
  color: var(--cf-success);
}

.table .unactive {
  color: var(--cf-danger);
}

.dashboard-table .table img,
.dashboard-table .table figure img {
  border-radius: var(--cf-radius-sm);
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.form-control,
.login input,
textarea {
  border-radius: var(--cf-radius-sm) !important;
  border-color: var(--cf-border) !important;
  color: var(--cf-text-medium);
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.form-warp .form-group .form-control,
.card-block .form-group .form-control {
  border-color: var(--cf-border) !important;
  border-radius: var(--cf-radius-sm) !important;
}

.form-control:focus,
.form-warp .form-group .form-control:focus,
.card-block .form-control:focus,
textarea:focus {
  border-color: var(--cf-pink-deep) !important;
  box-shadow: 0 0 0 3px rgba(251, 215, 249, .55) !important;
  outline: none !important;
}

.form-warp .form-group .control-label,
.card-block .form-group .control-label,
.fliter-row label,
.select-state label,
.play-note label {
  color: var(--cf-text-medium) !important;
  font-weight: 600 !important;
}

::-webkit-input-placeholder { color: var(--cf-text-muted); }
::-moz-placeholder { color: var(--cf-text-muted); }
:-ms-input-placeholder { color: var(--cf-text-muted); }
::placeholder { color: var(--cf-text-muted); }

/* File upload "Choose Image" trigger */
.inputfile-1 + label strong {
  background-color: var(--cf-pink) !important;
  color: var(--cf-ink) !important;
  border: 1px solid var(--cf-ink) !important;
  border-radius: 9999px !important;
  box-shadow: var(--cf-shadow-btn);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.inputfile-1 + label:hover strong {
  background-color: var(--cf-ink) !important;
  color: #fff !important;
  box-shadow: var(--cf-shadow-btn-hover);
}

.inputfile-1 + label span {
  background: var(--cf-surface) !important;
  border-color: var(--cf-border) !important;
  border-radius: var(--cf-radius-sm) !important;
  color: var(--cf-text-medium) !important;
}

/* Custom checkbox */
.checkbox .helper {
  border-color: var(--cf-border) !important;
  border-radius: 4px !important;
}

.checkbox label:hover .helper {
  border-color: var(--cf-pink-deep) !important;
}

.checkbox input:checked ~ .helper {
  border-color: var(--cf-text-dark) !important;
  color: var(--cf-text-dark) !important;
}

.checkbox .helper::before,
.checkbox .helper::after {
  background-color: var(--cf-text-dark) !important;
}

/* bootstrap-select + select2 shells */
.form-warp .drop_input .btn-default,
.bootstrap-select > .dropdown-toggle,
.btn-default {
  background: var(--cf-surface) !important;
  border-color: var(--cf-border) !important;
  border-radius: var(--cf-radius-sm) !important;
  color: var(--cf-text-medium) !important;
  box-shadow: none !important;
}

.bootstrap-select .dropdown-menu {
  border-color: var(--cf-border);
  border-radius: var(--cf-radius) !important;
  box-shadow: var(--cf-shadow) !important;
  overflow: hidden;
}

.form-warp .drop_input .dropdown-menu.inner li.selected a,
.bootstrap-select .dropdown-menu li.selected > a,
.bootstrap-select .dropdown-menu li.active > a {
  background: var(--cf-pink-tint) !important;
  color: var(--cf-ink) !important;
}

.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
  border-color: var(--cf-border) !important;
  border-radius: var(--cf-radius-sm) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--cf-pink-tint) !important;
  border: 1px solid var(--cf-pink-deep) !important;
  border-radius: 9999px !important;
  color: var(--cf-ink) !important;
  padding: 1px 8px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--cf-pink) !important;
  color: var(--cf-ink) !important;
}

.select2-dropdown {
  border-color: var(--cf-border) !important;
  border-radius: var(--cf-radius) !important;
}

/* --------------------------------------------------------------------------
   9. Alerts
   -------------------------------------------------------------------------- */
.alert {
  border-radius: var(--cf-radius) !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-size: 13.5px !important;
}

.alert-success {
  background: var(--cf-success-bg) !important;
  color: var(--cf-success) !important;
  border-color: #86efac !important;
}

.alert-danger {
  background: var(--cf-danger-bg) !important;
  color: var(--cf-danger) !important;
  border-color: #fecaca !important;
}

.alert-info {
  background: var(--cf-info-bg) !important;
  color: var(--cf-info) !important;
  border-color: #bfdbfe !important;
}

.alert-warning {
  background: var(--cf-warning-bg) !important;
  color: var(--cf-warning) !important;
  border-color: #fcd34d !important;
}

.note-block p {
  color: var(--cf-danger);
}

.validation {
  color: var(--cf-danger);
}

/* --------------------------------------------------------------------------
   10. Pagination
   -------------------------------------------------------------------------- */
.pagination > li > a,
.pagination > li > span {
  border-color: var(--cf-border) !important;
  color: var(--cf-text-medium) !important;
  margin: 0 2px;
  border-radius: var(--cf-radius-sm) !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
  background: var(--cf-pink-tint) !important;
  border-color: var(--cf-pink-deep) !important;
  color: var(--cf-ink) !important;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover,
.pagination > li > .active,
.pagination > li > .active:hover {
  background: var(--cf-pink) !important;
  border-color: var(--cf-ink) !important;
  color: var(--cf-ink) !important;
  font-weight: 700;
}

.fliter-row-bottm h5,
.pagination-top h5 {
  color: var(--cf-text-light) !important;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   11. Modals
   -------------------------------------------------------------------------- */
.modal-content {
  border: none !important;
  border-radius: var(--cf-radius-xl) !important;
  box-shadow: var(--cf-shadow-md) !important;
  overflow: hidden;
}

.modal-header {
  background: var(--cf-pink-tint) !important;
  border-bottom: 1px solid var(--cf-border) !important;
}

.modal-header h3 {
  color: var(--cf-text-dark) !important;
  font-weight: 700;
}

.modal-header .close {
  color: var(--cf-text-medium) !important;
  opacity: .8;
  text-shadow: none;
}

.modal-header .close:hover {
  color: var(--cf-ink) !important;
  opacity: 1;
}

.panel-custom.panel-default {
  border-color: var(--cf-border) !important;
  border-radius: var(--cf-radius) !important;
  box-shadow: none !important;
}

.label-txt {
  color: var(--cf-text-light);
}

/* Preview modal + edit Published/Draft tabs */
.article-tabs.nav-tabs > li > a,
.blog-tabs.nav-tabs > li > a {
  background: var(--cf-bg) !important;
  border: 1px solid var(--cf-border) !important;
  color: var(--cf-text-medium) !important;
  font-weight: 600;
}

.article-tabs.nav-tabs > li > a.active,
.blog-tabs.nav-tabs > li > a.active,
.article-tabs.nav > li > .dropdown .dropdown-toggle.active,
.article-tabs.nav-tabs.nav .dropdown-menu a.active,
.tabs-bar .nav-pills li.active a,
.tabs-bar .nav-pills li a:hover {
  background: var(--cf-pink) !important;
  border-color: var(--cf-ink) !important;
  color: var(--cf-ink) !important;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   12. Login
   -------------------------------------------------------------------------- */
.login-bg {
  background: linear-gradient(135deg, #fff 0%, var(--cf-bg) 50%, #fff 100%) !important;
  background-image:
    radial-gradient(900px 420px at 85% -10%, rgba(251, 215, 249, .55), transparent 70%),
    linear-gradient(135deg, #fff 0%, var(--cf-bg) 50%, #fff 100%) !important;
  background-attachment: fixed !important;
}

.login-logo h2,
.login-logo h3 {
  color: var(--cf-text-dark) !important;
}

.login-form {
  background: transparent !important;
}

.login-form h1 {
  background: transparent !important;
  border-bottom-color: var(--cf-border) !important;
  color: var(--cf-text-dark) !important;
  font-weight: 700;
  text-transform: none !important;
}

.login {
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border) !important;
  border-radius: var(--cf-radius-xl) !important;
  box-shadow: var(--cf-shadow-md) !important;
  overflow: hidden;
}

.login input {
  background: var(--cf-surface) !important;
}

.login input:focus {
  border-color: var(--cf-pink-deep) !important;
}

.login input + i.fa {
  color: var(--cf-ink) !important;
}

.login .login-btn {
  background: var(--cf-pink) !important;
  color: var(--cf-ink) !important;
  font-weight: 700;
  font-size: 20px;
  border-radius: 0 !important;
}

.login .login-btn:hover {
  background: var(--cf-ink) !important;
  color: #fff !important;
}

.login.ok button,
.login.ok .login-btn:hover {
  background: var(--cf-success) !important;
  color: #fff !important;
}

.login.error button,
.login.error .login-btn:hover {
  background: var(--cf-danger) !important;
  color: #fff !important;
}

.login a,
.forget-password a {
  color: var(--cf-text-dark) !important;
  font-weight: 600;
}

.forget-password a:hover {
  color: var(--cf-ink) !important;
}

.forget-password {
  color: var(--cf-text-muted) !important;
}

/* --------------------------------------------------------------------------
   13. Misc
   -------------------------------------------------------------------------- */
.overlay {
  background: rgba(17, 24, 39, .55) !important;
}

.mid-content .add-more,
.mid-content .add-more span {
  background: var(--cf-surface) !important;
}

.mid-content .add-more span {
  color: var(--cf-pink-deep) !important;
}

.mid-content .add-more .add-more-info h3,
.add-more-info i {
  color: var(--cf-text-dark) !important;
}

.mid-content .add-more .add-more-info {
  border-radius: var(--cf-radius) !important;
}

/* Scrollbar in sidebar */
.header-left-bar.scrollbar::-webkit-scrollbar {
  width: 8px;
}

.header-left-bar.scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.header-left-bar.scrollbar::-webkit-scrollbar-thumb {
  background: rgba(17, 24, 39, .16);
  border-radius: 9999px;
}

.header-left-bar.scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--cf-pink-deep);
}

/* Mobile sidebar push panel */
.xs-header-push {
  background: var(--cf-sidebar) !important;
  border-bottom: 1px solid var(--cf-sidebar-line);
}

.xs-header-push .trigger,
.xs-user .user-name span a {
  color: var(--cf-text-medium) !important;
}

.xs-header-push .trigger {
  background: var(--cf-pink-tint) !important;
}