/* ===================================================================
   AxusHost WHMCS Theme - Bootstrap Based Custom Styling
   Built on top of Bootstrap 3 from the Six theme
   =================================================================== */

/* ===================================================================
   CSS Variables - AxusHost Brand Colors
   =================================================================== */
:root {
    --axushost-primary: #122235;
    --axushost-secondary: #ff8432;
    --axushost-secondary-hover: #ff8432c2;
    --axushost-light-blue: #fafcff;
    --axushost-lighter-blue: #f7fbff;
    --axushost-blue: #bccfe5;
    --axushost-grey: #f0f0f0;
    --axushost-border-radius: 0.9rem;
}

/* ===================================================================
   Header Customization
   =================================================================== */
#header {
    background-color: var(--axushost-light-blue);
    border-bottom: 2px solid var(--axushost-grey);
}

#header .logo img {
    max-height: 50px;
}

#header .top-nav li a {
    color: var(--axushost-primary);
}

#header .top-nav li a:hover {
    color: var(--axushost-secondary);
}

#header .top-nav .btn {
    background-color: var(--axushost-secondary);
    border-color: var(--axushost-secondary);
    color: white;
    border-radius: var(--axushost-border-radius);
    font-weight: 600;
}

#header .top-nav .btn:hover {
    background-color: var(--axushost-secondary-hover);
    border-color: var(--axushost-secondary-hover);
}

/* ===================================================================
   Navigation Menu
   =================================================================== */
#main-menu {
    background-color: var(--axushost-primary);
    border-bottom: 3px solid var(--axushost-secondary);
}

#main-menu .navbar {
    background-color: var(--axushost-primary);
    border: none;
    margin-bottom: 0;
}

#main-menu .navbar-nav > li > a {
    color: white !important;
    font-weight: 500;
}

#main-menu .navbar-nav > li > a:hover,
#main-menu .navbar-nav > li > a:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--axushost-secondary) !important;
}

#main-menu .navbar-nav > li.active > a,
#main-menu .navbar-nav > li.active > a:hover,
#main-menu .navbar-nav > li.active > a:focus {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--axushost-secondary) !important;
}

/* ===================================================================
   Buttons - Bootstrap Override
   =================================================================== */
.btn-primary {
    background-color: var(--axushost-secondary);
    border-color: var(--axushost-secondary);
    border-radius: var(--axushost-border-radius);
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--axushost-secondary-hover) !important;
    border-color: var(--axushost-secondary-hover) !important;
}

.btn-default {
    border-radius: var(--axushost-border-radius);
}

.btn-success {
    border-radius: var(--axushost-border-radius);
}

.btn-danger {
    border-radius: var(--axushost-border-radius);
}

.btn-info {
    border-radius: var(--axushost-border-radius);
}

.btn-warning {
    border-radius: var(--axushost-border-radius);
}

/* ===================================================================
   Form Elements
   =================================================================== */
.form-control {
    border-radius: var(--axushost-border-radius);
}

.form-control:focus {
    border-color: var(--axushost-secondary);
    box-shadow: 0 0 0 0.2rem rgba(255, 132, 50, 0.25);
}

/* ===================================================================
   Panels & Cards
   =================================================================== */
.panel {
    border-radius: var(--axushost-border-radius);
}

.panel-heading {
    background-color: var(--axushost-light-blue);
}

.panel-title {
    color: var(--axushost-primary);
    font-weight: 700;
}

/* ===================================================================
   Tables
   =================================================================== */
.table thead {
    background-color: var(--axushost-light-blue);
}

.table thead th {
    color: var(--axushost-primary);
    font-weight: 600;
}

/* ===================================================================
   Alerts
   =================================================================== */
.alert {
    border-radius: var(--axushost-border-radius);
}

/* ===================================================================
   Footer
   =================================================================== */
#footer {
    background-color: var(--axushost-primary);
    color: white;
}

#footer h4 {
    color: white;
}

#footer a {
    color: var(--axushost-blue);
}

#footer a:hover {
    color: var(--axushost-secondary);
}

/* ===================================================================
   Homepage Banner
   =================================================================== */
#home-banner {
    background: linear-gradient(135deg, var(--axushost-primary) 0%, #1a3350 100%);
}

.home-shortcuts ul li a:hover {
    background-color: var(--axushost-secondary);
    color: white;
}

/* ===================================================================
   Links
   =================================================================== */
a {
    color: var(--axushost-secondary);
}

a:hover {
    color: var(--axushost-secondary-hover);
}

/* ===================================================================
   Sidebar
   =================================================================== */
.sidebar .list-group-item.active {
    background-color: var(--axushost-secondary);
    border-color: var(--axushost-secondary);
}

/* ===================================================================
   Pagination
   =================================================================== */
.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--axushost-secondary);
    border-color: var(--axushost-secondary);
}
