/* Custom Dark Mode Styles for WHMCS Twenty-One Theme */

/* General Font Setting */
body,
.main-content,
.container-fluid,
.navbar,
.card,
.panel,
.content-wrapper,
.list-group-item,
.product-details,
.product-details-tab-container,
.action-icon-btns,
.input-group-text,
.md-editor>.btn-toolbar,
.ticket-message-textbox,
.form-control,
.pagination .page-item,
.dropdown-menu,
.btn,
.footer,
.modal-content,
a,
.link,
.table,
.breadcrumb,
.announcement,
.announcement-card,
.announcement-content,
.icon,
.nav-tabs .nav-link,
.widget-content,
.clientarea-box,
.clientarea-header {
    font-family: 'Montserrat', sans-serif !important;
    /* Apply Montserrat font */
}

/* Specific Font Weight Adjustments */
.custom-nav-btn,
.navbar-brand,
.header,
.navbar-nav .nav-link {
    font-family: 'Montserrat', sans-serif !important;
    /* Apply Montserrat font */
    font-weight: 700;
    /* Use bold weight for headers and navigation */
}

/* Optional: Ensure Consistency Across Components */
.navbar,
.navbar-light .navbar-nav .nav-link,
.navbar-brand,
.header,
.client-home-cards .card-header {
    font-family: 'Montserrat', sans-serif !important;
}

/* General Background and Text Colors */
body,
.main-content,
.container-fluid {
    background-color: #11141b !important;
    /* Dark grey background */
    color: #dedddd !important;
    /* Light grey text color */
}

/* Container Width Adjustments for Different Screen Sizes */
@media (min-width: 576px) {

    .container,
    .container-sm {
        max-width: 540px;
        /* Small container width */
    }
}

@media (min-width: 768px) {

    .container,
    .container-md {
        max-width: 720px;
        /* Medium container width */
    }
}

@media (min-width: 992px) {

    .container,
    .container-lg {
        max-width: 960px;
        /* Large container width */
    }
}

@media (min-width: 1200px) {

    .container,
    .container-xl {
        max-width: 1050px;
        /* Extra large container width */
    }
}

@media (min-width: 1400px) {

    .container,
    .container-xxl {
        max-width: 1496px;
        /* Extra extra large container width for larger screens */
    }
}



/* Header */
.header,
.navbar,
.navbar-inner,
.navbar-light .navbar-nav .nav-link {
    background-color: #141820 !important;
    /* Medium grey background for header */
    color: #dedddd !important;
    /* Light grey text */
    border-bottom: 1px solid #1f242f !important;
    /* Darker grey border */
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #ffffff !important;
    /* White text on hover */
}

/* Panels, Cards, and Content Boxes */
.card,
.panel,
.content-wrapper,
.panel-default,
.panel-body {
    background-color: #141820 !important;
    /* Medium grey panel background */
    color: #dedddd !important;
    /* Light grey text */
    border: 1px solid #1f242f !important;
    /* Darker grey border */
}

/* Client Home Cards - Card Header */
.client-home-cards .card-header {
    background-color: #141820 !important;
    /* Medium grey background for client home card headers */
    color: #ffffff !important;
    /* White text for titles */
    border-bottom: 1px solid #1f242f !important;
}

/* Tiles */
.tiles .tile {
    background-color: #141820 !important;
    /* Medium grey background for tiles */
    color: #dedddd !important;
    /* Light grey text for tiles */
    border: 1px solid #1f242f !important;
}

.tiles .tile:hover,
.tiles .tile:focus {
    background-color: #1f242f !important;
    /* Darker grey on hover or focus */
    color: #ffffff !important;
    /* White text on hover or focus */
}

/* List Group Items (Collapsible Card Body and Sidebar) */
.list-group-item {
    background-color: #141820 !important;
    /* Medium grey background for list group items */
    color: #dedddd !important;
    /* Light grey text */
    border: 1px solid #1f242f !important;
}

.list-group-item:hover,
.list-group-item:focus {
    background-color: #1f242f !important;
    /* Darker grey on hover or focus */
    color: #ffffff !important;
    /* White text on hover or focus */
}

/* Product Details and Icons */
.product-details .product-icon {
    background-color: #141820 !important;
    /* Medium grey background for product icons */
    color: #dedddd !important;
    /* Light grey text for icons */
    border: 1px solid #1f242f !important;
}

/* Product Details Tab Container */
.product-details-tab-container,
.bg-white {
    background-color: #141820 !important;
    /* Medium grey background for tab container */
    color: #dedddd !important;
    /* Light grey text color */
}

/* Action Icon Buttons */
.action-icon-btns {
    background-color: #141820 !important;
    /* Medium grey background for action icon buttons */
    color: #dedddd !important;
    /* Light grey text */
    border: 1px solid #1f242f !important;
}

.action-icon-btns a {
    margin: 0 0 10px 0;
    padding: 10px 0 15px;
    display: block;
    text-align: center;
    transition: all .3s ease;
    color: #dedddd !important;
    /* Light grey text color */
    text-decoration: none;
    background-color: #141820 !important;
    /* Medium grey background for action icon buttons */
    border-radius: .25rem;
}

.action-icon-btns a:hover {
    background-color: #1f242f !important;
    /* Darker grey on hover */
    color: #ffffff !important;
    /* White text on hover */
}

/* Input Group Text */
.input-group-text {
    background-color: #141820 !important;
    /* Medium grey background for input group text */
    color: #dedddd !important;
    /* Light grey text */
    border: 1px solid #1f242f !important;
}

/* Markdown Editor Toolbar */
.md-editor>.btn-toolbar {
    background-color: #141820 !important;
    /* Medium grey background for markdown editor toolbar */
    color: #dedddd !important;
    /* Light grey text */
    border: 1px solid #1f242f !important;
    color: #000000 !important;
    /* Dark text color for better contrast */
}

.md-editor>.md-preview,
.md-editor>textarea.markdown-editor {
    padding: 15px !important;
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    background-color: #e9e9e9 !important;
    /* Dark grey background */
    color: #131313 !important;
    /* Light grey text */
}

.markdown-content h3,
.md-preview h3 {
    font-size: 1.2em;
    color: #fff;
}

.view-ticket .posted-by {
    color: #bfb9b9;
    font-size: .9rem;
    background-color: #070707;
    padding: .5rem 1rem;

}

.view-ticket .card-body {
    border-bottom: #1f242f !important;
}

.card-body {
    margin-top: 2rem;
    background-color: #1f242f;


}

.modal .modal-header {
    background-color: #141820;
}

.modal-body pre {
    color: #dedddd !important;
}

div.md-editor.active {
    border: #1f242f !important;
}

/* Ticket Message Text Box */
.ticket-message-textbox {
    background-color: #ffffff !important;
    /* Keep background white for readability */
    color: #000000 !important;
    /* Dark text color for better contrast */
    border: 1px solid #1f242f !important;
}

/* Form Inputs and Textareas */
input[type="text"],
input[type="password"],
textarea,
select,
.form-control {
    background-color: #141820 !important;
    /* Medium grey input fields */
    color: #dedddd !important;
    border: 1px solid #1f242f !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: #1f242f !important;
    /* Highlighted border on focus */
    box-shadow: none !important;
}

.StripeElement {
        background-color: #fff !important;
}

/* Search Icon in Input Box */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    /* Removes default search decoration */
}

input[type="search"]::-webkit-search-cancel-button {
    background-color: #141820 !important;
    /* Medium grey background for search cancel button */
    border: none !important;
}

/* Pagination (Next and Previous Buttons) */
.pagination .page-item,
.pagination .page-link {
    background-color: #141820 !important;
    /* Medium grey background for pagination buttons */
    color: #dedddd !important;
    /* Light grey text */
    border: 1px solid #1f242f !important;
}

.pagination .page-item:hover,
.pagination .page-link:hover {
    background-color: #1f242f !important;
    /* Darker grey on hover */
    color: #ffffff !important;
    /* White text on hover */
}

/* Dropdown Menus */
.dropdown-menu {
    background-color: #141820 !important;
    /* Medium grey dropdown background */
    color: #dedddd !important;
    /* Light grey text */
    border: 1px solid #1f242f !important;
}

.dropdown-item {
    color: #dedddd !important;
    /* Light grey text for dropdown items */
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #1f242f !important;
    /* Darker grey on hover */
    color: #ffffff !important;
    /* White text on hover */
}

/* Buttons */
.btn-primary,
.btn-default,
.btn {
    background-color: #078bde !important;
    /* Blue button background */
    border-color: #078bde !important;
    color: #ffffff !important;
    /* White text for buttons */
}

.btn-primary:hover,
.btn-default:hover,
.btn:hover {
    background-color: #056ba4 !important;
    /* Slightly darker blue on hover */
    border-color: #056ba4 !important;
    color: #ffffff !important;
}

/* Footer */
.footer,
.footer-widgets {
    background-color: #141820 !important;
    /* Medium grey footer */
    color: #dedddd !important;
    border-top: 1px solid #1f242f !important;
}

.header.header .topbar {
    background-color: #0b0e13;
    padding: 15px;
}

/* Modal Dialogs */
.modal-content {
    background-color: #141820 !important;
    /* Medium grey modal background */
    color: #dedddd !important;
    border: 1px solid #1f242f !important;
}

/* Specific Link Styling */
a,
.link {
    color: #078bde !important;
    /* Blue links */
}

a:hover,
.link:hover {
    color: #ffffff !important;
    /* White on hover */
}

/* Table Styling */
.table,
.table-striped,
.table-hover,
.table-bordered,
.table th,
.table td {
    background-color: #141820 !important;
    /* Medium grey table background */
    color: #dedddd !important;
    border-color: #1f242f !important;
}

/* Breadcrumbs */
.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a,
.master-breadcrumb {
    background-color: #141820 !important;
    /* Medium grey breadcrumb background */
    color: #dedddd !important;
    /* Light grey text */
    border: 1px solid #1f242f !important;
}

.breadcrumb-item a:hover,
.master-breadcrumb a:hover {
    color: #ffffff !important;
    /* White text on hover */
}

/* Announcement Panels */
.announcement,
.announcement-card,
.announcement-content,
.alert,
.alert-warning,
.alert-info {
    background-color: #141820 !important;
    /* Medium grey background for announcement panels */
    color: #dedddd !important;
    border: 1px solid #1f242f !important;
}

.announcement-title {
    color: #ffffff !important;
    /* White color for announcement titles */
}

.announcement-body {
    color: #dedddd !important;
    /* Light grey color for announcement text */
}

/* Icons */
.fa,
.fas,
.far,
.fal,
.fab,
.icon {
    color: #dedddd !important;
    /* Light grey icons */
}

/* Tabs and Navigation Links */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: #141820 !important;
    /* Medium grey active tab background */
    border-color: #1f242f !important;
    color: #dedddd !important;
    /* Light grey text */
}

.nav-tabs .nav-link {
    color: #078bde !important;
    /* Blue text for inactive tabs */
}

/* Widget Box and Dashboard Panels */
.widget-content,
.panel,
.panel-default,
.dashboard-stat {
    background-color: #141820 !important;
    /* Medium grey panel and widget background */
    color: #dedddd !important;
    border: 1px solid #1f242f !important;
}

/* Client Area Boxes */
.clientarea-box,
.clientarea-header {
    background-color: #141820 !important;
    /* Medium grey client area background */
    color: #dedddd !important;
    border: 1px solid #1f242f !important;
}


/* Adjust Header Height and Add Button Hover Effect */
.header {
    padding: 25px 0;
    /* Adjust header height */
}

.logo-img {
    max-width: 0.3%;
    height: auto;
    padding: 5px;
}

.custom-nav-btn {
    font-weight: bold;
    /* Bold text for buttons */
    font-size: 18px;
    color: #dedddd !important;
    /* Light grey text */
    margin-left: 15px;
    text-decoration: none;
    /* Remove underline */
    padding: 5px 10px;
    /* Add padding */
    transition: background-color 0.3s ease;
    /* Smooth transition for hover */
}

.custom-nav-btn:hover {
    background-color: #273141;
    /* Darker grey on hover */
    border-radius: 5px;
    /* Rounded corners on hover */
    color: #ffffff !important;
    /* White text on hover */
}

/* Specific Styling for Cart Button */
.btn.nav-link.cart-btn {

    border-color: #078bde !important;
    /* Blue border */

}

.btn.nav-link {

    border-color: #141820 !important;
    /* Blue border */
    font-size: 2.0em;
    padding: 0px;
    margin: 0px;


}

header.header .toolbar .nav-link {
    font-size: 1.8em;

}

/* Hover Effect for Cart Button */
.btn.nav-link.cart-btn:hover {
    background-color: #056ba4 !important;
    /* Slightly darker blue on hover */
    border-color: #056ba4 !important;
    /* Slightly darker border on hover */
    color: #ffffff !important;
    /* Ensure white text on hover */
    text-decoration: none;
    /* Remove underline on hover */
}

/* Specific Styling for Cart Button Badge */
.btn.nav-link.cart-btn .badge.badge-info {
    background-color: #078bde !important;
    /* Bright green background for badge */
    color: #ffffff !important;
    /* White text color for contrast */
    border-radius: .25rem;
    /* Rounded corners for badge */
    font-weight: bold;
    /* Bold font for the badge text */
}

/* Styling for Navigation Links */
.nav-link,
.dropdown-item {
    color: #dedddd !important;
    /* Light grey text */
    font-family: 'Montserrat', sans-serif;
    /* Custom font */
    font-weight: 700;
    /* Bold font weight */
    padding: 5px 10px;
    /* Padding for links */
    text-decoration: none;
    /* Remove underline */
    transition: background-color 0.3s ease;
    /* Smooth hover transition */
}

.nav-link:hover,
.dropdown-item:hover {
    background-color: #273141;
    /* Darker background on hover */
    border-radius: 5px;
    /* Rounded corners on hover */
    color: #ffffff !important;
    /* White text on hover */
}



/* Ensure alignment of left and right side navbars */
.navbar-nav.ml-auto {
    margin-left: auto;
}

.navbar-nav {
    display: flex;
    align-items: center;

}

.navbar .dropdown-menu-right {
    right: 0;
    left: auto;
}


/* Increase Font Size for Main Navigation Links */
.header.header .navbar-nav a {
    font-size: 17px;
    /* Adjust the font size as needed */
    margin: 5px;
}

/* Hide currency selector on mobile devices */
@media (max-width: 768px) {
    .currency-selector {
        display: none;
    }

    /* Hide Main Website and Game Panel buttons on mobile */
    .custom-nav-btn {
        display: none;
    }

    /* Align navigation to the left on mobile */
    #nav {
        justify-content: flex-end;
    }
}




/* Footer Styles */
.footer {
    background-color: #141820;
    /* Full width background color */
    color: #dedddd;
    /* Light grey text */
    padding: 20px;
    /* Padding for spacing */
    width: 100%;
    /* Full width */


}

/* Footer Content */
.footer-left {
    max-width: 300px;
    /* Constrain width for the left content */

}

.footer-logo {
    width: 150px;
    /* Adjust the logo size */
}

.footer p {
    margin-bottom: 5px;
    /* Margin between lines of text */
}

section#main-body {
    margin: 0;
    padding: 20px 0;
    min-height: 70vh !important;
}

div.product-details-tab-container {  
    border: 1px solid #1f242f;
}

/* Added CSS Kinetic Theme*/
.client-home-cards .list-group {
    border-top: 1px solid #1f242f !important;
    border-bottom: 1px solid #1f242f !important;
}

.custom-file-label {
    color: #6c757d;
    background-color: #252a38;
    border: 1px solid #11141b;
}

.custom-file-label::after {
    color: #6c757d;
    background-color: #2a303f;
}

div.md-editor.active {
    border: 3px solid #11141b !important;
}

.md-control-fullscreen {
    display: none;
}

.md-editor {
    border: 3px solid #11141b !important;
}

.md-editor > textarea.markdown-editor {
    padding: 15px !important;
    border-top: 1px solid #1f242f !important;
    border-bottom: 1px solid #1f242f !important;
    background-color: #2a303f !important;
    color: #cbccc6 !important;
}

.md-editor .md-footer {
    display: block;
    padding: 6px 4px;
    border-top: 3px solid #1f242f !important;
    background: #252a38;
}

.nav-tabs {
    border-bottom: 1px solid #1f242f;
}

.nav-tabs .nav-link:hover {
    border-color: #1f242f;
}

.responsive-tabs-sm .nav-item a {
    border-color: #1f242f;
    margin-right: 2px;
}

.responsive-tabs-sm .nav-item a:hover {
    background-color: #3c455a;
}