@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

:root {
    /* Brand Colors */
    --color-primary: #3b5cde;
    --color-accent: #6493ff;
    --color-warning: #fbbf24;

    --button-secondary: #3b5cde;
    /* Text Colors */
    --color-text: #fff;

    /* Background Colors */
    --color-bg-primary: #222339;
    --color-bg-secondary: #1b1c30;
    --color-bg-input: #1b1c29;

    /* Border Colors */
    --color-border: #1b1c30;

    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Space Grotesk", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
}

/* ==========================================================================
    Hidden Elements
========================================================================== */
#tableServicesList_filter,
#tableEmailsList_filter,
.input-group-prepend,
header.header .search .form-control,
header.header .search {
  display: none;
}

/* ==========================================================================
    Base Elements
========================================================================== */
body,
.table,
.popover-user-notifications ul li a {
    color: var(--color-text);
}
.popover-user-notifications ul li a:hover {
    background-color: var(--color-bg-secondary);
    border-radius: 8px;
}
.popover,
#popup-backdrop {
    background-color: var(--color-bg-primary);
}
.popover-user-notifications {
    border: var(--color-border);
    border-radius: 10px;
}
.verification-banner {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    border-bottom: var(--color-border);
}
.verification-banner.email-verification .btn.btn-action,
.verification-banner.email-verification .btn.btn-action:active,
.verification-banner.email-verification .btn.btn-action[disabled]:hover {
    background-color: var(--color-accent);
    border-color: transparent;
}
.verification-banner .fal,
.verification-banner .far,
.verification-banner .fas {
    color: var(--color-warning);
}
/* ==========================================================================
    Links & Text Accents
========================================================================== */
a,
a:hover,
.popover-body,
.fa-inverse,
code {
    color: var(--color-accent);
}
.truncate {
    white-space: wrap;
}
.fa-circle {
    color: var(--color-bg-primary);
}
/* ==========================================================================
    Buttons & Interactive Elements
========================================================================== */
.btn-sm,
.btn-default,
.btn-primary,
.btn-success,
.btn-default:hover,
.btn-default:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
    border-radius: 8px;
}

.btn-link,
.btn-link:hover {
    color: var(--color-warning);
}

.btn-default,
.btn-default:active,
.btn-default:active:focus,
.btn-default:active:hover,
.btn-info,
.btn-secondary,
.list-group-item.active,
.btn-primary,
header.header .search .btn {
    color: var(--color-text);
    background-color: var(--color-accent);
    border-color: transparent;
}

.btn-default.active.focus,
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default:active.focus,
.btn-default:active:focus,
.btn-default:active:hover,
.open > .dropdown-toggle.btn-default.focus,
.open > .dropdown-toggle.btn-default:focus,
.open > .dropdown-toggle.btn-default:hover {
    color: var(--color-text);
    background-color: var(--color-accent);
    border-color: transparent;
}
.btn-default {
  background-color: var(--button-secondary);
}

.btn-primary:disabled {
  background-color: var(--color-bg-primary);
  border-color: var(--color-border);
}

.btn-default.disabled {
  border-color: transparent;
}

.btn-danger.disabled,
.btn-danger:disabled {
  margin-bottom: 15px;
}

.btn-info:hover,
.btn-info:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-default:hover,
.btn-default:focus,
.btn-default.active,
.btn-default.active:hover,
.btn-default.active:focus {
  background-color: var(--color-accent);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  color: var(--color-text);
  background-color: var(--color-accent);
  border-color: transparent;
}

.page-item.active .page-link,
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  background-color: var(--button-secondary);
  border-color: var(--color-border);
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
  color: var(--color-text);
  background-color: var(--color-warning);
}

#ticketReply {
  margin-bottom: 15px;
}
/* ==========================================================================
   Alerts & Notifications
   ========================================================================== */
.alert-danger,
.alert-warning,
.alert-info,
.status-cancelled {
  background-color: var(--color-warning);
  border: 1px solid var(--color-border);
  color: #000;
  font-weight: 400;
  border-radius: 4px;
}
.status-closed {
  background-color: var(--button-secondary);
}
.alert-success,
.badge-info {
  background-color: var(--color-accent);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 8px;
}

.badge {
  padding: 6px;
  border-radius: 5px;
}

.label-default {
  background-color: #e53935;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 15px;
}
.label-info {
  background-color: var(--color-warning);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 15px;
}
.view-ticket .posted-by {
  background-color: var(--color-bg-primary);
  color: #9ca3af;
}
.view-ticket .card-body {
  border-bottom: 1px solid var(--color-border);
}
.requestor-type-operator {
  background-color: var(--color-accent);
}
html
  body.primary-bg-color
  section#main-body
  div.container
  div.row
  div.col-12.primary-content
  div.row
  div.col-md-4
  div.affiliate-stat.affiliate-stat-green.alert-warning.mb-2,
html
  body.primary-bg-color
  section#main-body
  div.container
  div.row
  div.col-12.primary-content
  div.row
  div.col-md-4
  div.affiliate-stat.affiliate-stat-green.alert-info.mb-2 {
  background-color: #369;
  color: var(--color-text);
}
html
  body.primary-bg-color
  section#main-body
  div.container
  div.row
  div.col-12.primary-content
  div.card.my-3
  div.card-body
  input.form-control {
  background-color: var(--color-bg-primary);
  color: var(--color-accent);
}

/* ==========================================================================
   Header Components
   ========================================================================== */
header.header,
.progress {
  background-color: var(--color-bg-secondary);
}
header.header .logo-img {
  max-height: 50px;
}
header.header .topbar {
  background-color: var(--color-bg-primary);
}

header.header .search {
  border: 1px solid var(--color-border);
}

header.header .toolbar .nav-link {
  border: 1px solid var(--color-border);
  font-size: 1.2em;
  border-radius: 8px;
}

header.header .navbar a {
  color: var(--color-text);
}
.markdown-content h2 {
  color: var(--color-text);
}
.nav-tabs .nav-link.active {
  background-color: var(--color-bg-secondary);
  border: 1px solid transparent;
  color: var(--color-text);
}
.nav-tabs .nav-link:hover {
  border-color: transparent;
}
.responsive-tabs-sm .nav-item a:hover {
  background-color: var(--color-bg-secondary);
}

/* ==========================================================================
   Navigation & Menus
   ========================================================================== */
.dropdown-menu {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}
.master-breadcrumb,
.breadcrumb {
  background-color: var(--color-bg-primary);
}
.primary-bg-color,
.modal .modal-header {
  background-color: var(--color-bg-primary);
}
.dropdown-item,
.dropdown-item:hover {
  color: var(--color-text);
}
.dropdown-item:hover,
.dropdown-item:focus,
header.header .dropdown-item:active {
  background-color: var(--color-bg-primary);
}
.page-link,
.page-link:focus,
.page-link:hover {
  background: #202020;
  color: #4f5360;
  border: 1px solid transparent;
}
.page-item.disabled .page-link {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
}
.dropdown-divider {
  border-top: 1px solid var(--color-bg-primary);
}
/* ==========================================================================
   Cards, Tiles & Containers
   ========================================================================== */
.bg-white {
  background-color: var(--color-bg-secondary) !important;
}
.card,
.modal-content,
.client-home-cards .card-header,
div.product-details div.product-icon {
  background-color: var(--color-bg-secondary);
}
div.product-details-tab-container {
  border: 1px solid var(--color-border);
}
.card {
  border-radius: 8px;
}
.card:hover {
  background-color: var(--color-bg-secondary);
}

.client-home-cards .list-group {
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.tiles .tile,
.tiles .tile:hover {
  background-color: var(--color-bg-secondary);
  border-radius: 15px;
  border-right: 4px solid var(--color-accent) !important; 
  margin-right: 10px;
}

.tiles .tile i {
  font-size: 40px;
}

.tiles .tile:hover i {
  font-size: 45px;
  color: var(--color-accent);
}

.table-dark {
  background-color: var(--color-bg-secondary);
}
.kb-category a:hover,
.kb-category a:focus,
.kb-article-item:hover,
.kb-article-item:focus {
  background-color: transparent;
}
.requestor-type-owner {
  background-color: #9ca3af;
}
.card-body {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
}
/* ==========================================================================
   Form Controls
   ========================================================================== */
.form-control,
.form-control:focus,
#registration .field,
#registration .form-control:focus,
#registration .form-control {
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
#registration .sub-heading span {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  border-radius: 8px;
}
#registration .sub-heading {
  border-top: 1px solid var(--color-bg-secondary);
}
.form-control,
.form-control:focus,
.custom-select:disabled {
  color: var(--color-text);
}
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--color-warning);
  color: var(--color-bg-primary);
}

.input-group-text {
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.dataTables_wrapper .dataTables_filter label .form-control {
  background: var(--color-bg-input) no-repeat 8px 5px;
}
.table-list:hover > tbody > tr > td {
  background-color: var(--color-bg-primary);
}
.table-hover tbody tr:hover {
  color: var(--color-text);
}
.dataTables_wrapper table.table-list {
  border: 1px solid var(--color-border);
}
.dataTables_wrapper table.table-list thead th.sorting_desc,
.dataTables_wrapper table.table-list thead th,
.dataTables_wrapper table.table-list thead th.sorting_asc {
  background-color: var(--color-bg-primary);
  color: var(--color-text);
  border-bottom: 4px solid var(--color-border);
}
.table th {
  border-top: 2px solid var(--color-border);
}
.custom-file-label {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.custom-file-label::after {
  color: var(--color-text);
  background-color: var(--button-secondary);
  border-color: transparent;
}
.bg-white {
  background-color: var(--color-bg-primary);
}

/* ==========================================================================
   List Groups & Sidebars
   ========================================================================== */
.list-group-item {
  background-color: var(--color-bg-primary);
}

.list-group-item-action {
  color: var(--color-text);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: transparent;
  color: var(--color-text);
}

.sidebar .list-group-item.active,
.list-group-item-action:active,
.sidebar .list-group-item.active:focus,
.sidebar .list-group-item.active:hover {
  background-color: var(--color-primary);
}

.sidebar .list-group-item {
  border-color: var(--color-border);
}

.sidebar .list-group-item:last-child {
    border-radius: 0 0 8px 8px;
}

.sidebar .list-group-item .badge {
  background-color: var(--color-bg-secondary);
  color: var(--color-accent);
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table-list > tbody > tr > td,
.table-list > tbody > tr > td:hover {
  background-color: transparent;
}

.table-bordered td {
  border: 1px solid var(--color-border);
}

.table td {
  border-top: 1px solid var(--color-border);
}
.table thead th {
  border-bottom: 2px solid var(--color-border);
}

/* ==========================================================================
   Editors
   ========================================================================== */
.md-editor,
div.md-editor.active {
  border: 1px solid var(--color-border);
}
.md-editor > .btn-toolbar {
  background-color: var(--color-bg-primary) !important;
}

.md-editor > textarea.markdown-editor {
  background-color: var(--color-bg-secondary) !important;
}

.md-editor.md-fullscreen-mode,
.md-editor.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode .md-preview,
.md-editor.md-fullscreen-mode .md-input:focus,
.md-editor.md-fullscreen-mode .md-input:hover {
  background-color: var(--color-bg-primary) !important;
}
.md-editor .md-footer {
  background-color: var(--color-bg-primary);
}

.md-editor > textarea.markdown-editor {
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.md-preview {
  background-color: var(--color-bg-primary);
}
.md-editor > .md-preview,
.md-editor > textarea.markdown-editor {
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
  background-color: var(--color-bg-secondary) !important;
}
/* ==========================================================================
   Footer
   ========================================================================== */
footer.footer {
  background-color: var(--color-bg-secondary);
}
footer.footer .copyright {
  color: var(--color-text);
}

footer.nav {
    display: flex;
    flex-direction: row;
}


/* Custom */

.domain-pricing .tld-pricing-header div:nth-child(2n+1) {
    border-color: var(--color-accent) !important;
    background-color: var(--color-bg-primary) !important;
}

.domain-pricing .tld-pricing-header .col-sm-2, .domain-pricing .tld-pricing-header .col-sm-4, .domain-pricing .tld-pricing-header .col-xs-2, .domain-pricing .tld-pricing-header .col-xs-4 {
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: 6px solid #97b5d2;
    background-color: var(--color-bg-primary) !important;
    border-radius: 4px 4px 0 0;
}

.domain-pricing .tld-row.highlighted {
    background: var(--color-bg-secondary) !important;
}

.container {
    width: 100%;
}
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}
@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}

/* Footer */
.prism-footer {
    padding-top: 2.5rem;
    padding-bottom: 0.75rem;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: #1b1c2e; /* Assuming this is your bckgrndsecondary color */
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .prism-footer {
        padding-left: 12rem;
        padding-right: 12rem;
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

.prism-footer-aside {
    max-width: 30rem;
}

.prism-footer-logo {
    height: auto;
    width: 12rem;
    margin-bottom: 1.25rem;
}

.prism-footer-description {
    font-size: .875rem;
    line-height: 1.25rem;
    color:oklch(74.6477% .0216 264.435964/1);
    margin-bottom: 1rem;
}

.prism-footer-status-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    text-decoration: none;
}

.prism-footer-status-ping {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #10b981;
    border-radius: 50%;
    animation: prism-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes prism-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.prism-footer-status-text {
    font-weight: 700;
    color: #10b981;
}

.prism-footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.prism-footer-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin-bottom: .5rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: .6;
    color: #fff !important;
    background: linear-gradient(to right, #fff 20%, #3b6cde 40%, #3b6cde 60%, #fff 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 3s ease-in-out infinite alternate;
}

.prism-footer-social-icon {
    height: 16px;
    width: auto
}

@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.prism-footer-link {
    color: oklch(74.6477% .0216 264.435964/1);
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 0.125rem 0;
    font-size: .875rem;
    line-height: 1.25rem;
}

.prism-footer-link:hover {
    color: #3b6cde;
    text-decoration: none !important;
}

.prism-footer-separator {
    display: flex;
    align-items: center;
    gap: 0;
}

.prism-footer-gradient-left {
    height: 0.125rem;
    width: 100%;
    background: linear-gradient(to left, #3b6cde, transparent);
}

.prism-footer-gradient-right {
    height: 0.125rem;
    width: 100%;
    background: linear-gradient(to right, #3b6cde, transparent);
}

.prism-footer-bottom {
    background-color: #1b1c2e;
    padding: 0.25rem 0;
}

.prism-footer-container {
    padding-left: 2rem;
    padding-right: 2rem;
}

@media (min-width: 1024px) {
    .prism-footer-container {
        padding-left: 12rem;
        padding-right: 12rem;
    }
}

.prism-footer-bottom-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .prism-footer-bottom-content {
        flex-direction: row;
    }
}

.prism-footer-copyright {
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .prism-footer-copyright {
        margin-bottom: 0;
    }
}

@media (max-width: 1023px) {
    .prism-footer-copyright {
        margin-top: 0.25rem;
    }
}

.prism-footer-copyright-link {
    color:oklch(74.6477% .0216 264.435964/1);
    font-size: 0.875rem;
    text-decoration: none;
}

.prism-footer-copyright-link:hover {
    text-decoration: none;
}

.prism-footer-social {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
}

.prism-footer-social-link {
    color:oklch(74.6477% .0216 264.435964/1);
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.25rem;
    transition: color 0.2s ease;
}

.prism-footer-social-link:hover {
    color: #3b6cde;
    text-decoration: none !important;
}

.prism-footer-legal-hidden {
    display: none;
}

@media (min-width: 1024px) {
    .prism-footer-legal-hidden {
        display: block;
    }
}

.prism-footer-legal-mobile {
    display: block;
}

@media (min-width: 1024px) {
    .prism-footer-legal-mobile {
        display: none;
    }
}

.prism-footer-social-separator {
    color:oklch(74.6477% .0216 264.435964/1);
    font-size: .875rem;
    line-height: 1.25rem;
}