/*
 * Global site styles.
 */

/*
 * Brand primary color, matching the legacy app's palette (same hex used
 * there for hover/active states on the orange brand color). Bootstrap 5.3's
 * compiled dist CSS bakes hex values into most component-level custom
 * properties rather than referencing --bs-primary dynamically, so utility
 * classes (text/bg/border-primary, links) are covered by the root override
 * below, but .btn-primary/.btn-outline-primary need their own.
 */
:root {
    --bs-primary: #e24e0e;
    --bs-primary-rgb: 226, 78, 14;
    --bs-link-color: #e24e0e;
    --bs-link-color-rgb: 226, 78, 14;
    --bs-link-hover-color: #cb460d;
    --bs-link-hover-color-rgb: 203, 70, 13;
    --bs-focus-ring-color: rgba(226, 78, 14, 0.25);
}

.btn-primary {
    --bs-btn-bg: #e24e0e;
    --bs-btn-border-color: #e24e0e;
    --bs-btn-hover-bg: #cb460d;
    --bs-btn-hover-border-color: #cb460d;
    --bs-btn-active-bg: #c0420c;
    --bs-btn-active-border-color: #c0420c;
    --bs-btn-disabled-bg: #e24e0e;
    --bs-btn-disabled-border-color: #e24e0e;
    --bs-btn-focus-shadow-rgb: 226, 78, 14;
}

.btn-outline-primary {
    --bs-btn-color: #e24e0e;
    --bs-btn-border-color: #e24e0e;
    --bs-btn-hover-bg: #e24e0e;
    --bs-btn-hover-border-color: #e24e0e;
    --bs-btn-active-bg: #e24e0e;
    --bs-btn-active-border-color: #e24e0e;
    --bs-btn-disabled-color: #e24e0e;
    --bs-btn-disabled-border-color: #e24e0e;
    --bs-btn-focus-shadow-rgb: 226, 78, 14;
}
.btn-warning {
    color: #242c30;
    background-color: #ffba5f;
    border-color: #ffba5f;
}
.btn-warning:hover {
    color: #242c30;
    background-color: #ffaa39;
    border-color: #ffa42c
}
.btn {
    font-weight: 600;
}
/*
 * Top nav (header), matching legacy's #site-header .site-nav look: text +
 * icon links (no Bootstrap nav-pills background blocks), with a colored
 * bottom border and darkened text/icon to mark the current section.
 */
.top-nav .nav-link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.015rem;
    color: #74848b;
    border-bottom: 3px solid transparent;
}

.top-nav .nav-link svg {
    color: #c5cdd4;
}

.top-nav .nav-link:hover {
    color: #5a666d;
}

.top-nav .nav-link:hover svg {
    color: #74848b;
}

.top-nav .nav-link.active {
    color: #242c30;
    border-bottom-color: #e24e0e;
}

.top-nav .nav-link.active svg {
    color: #e24e0e;
}

/*
 * Sidebar nav (Billing/Support left column), matching legacy's
 * .sidebar-nav look: a flat left-border indicator, no filled background.
 */
.sidebar-nav .nav-link {
    color: #aab7be;
    background: none;
    border-left: 2px solid transparent;
    border-radius: 0;
    padding-left: 0.75rem;
}

.sidebar-nav .nav-link:hover {
    color: #5a666d;
}

.sidebar-nav .nav-link.active {
    border-left-color: #e24e0e;
    color: #242c30;
    font-weight: 600;
    background: none;
}
/*.breadcrumbs + main.container {*/
/*    margin-top: 1.5rem;*/
/*}*/

/* table */
.table {
    --bs-table-color:#74848b;
}

.services-page .portlet-body h5,
.services-page .portlet-body .h5 {
    color: #f26b31;
}

.support-page #table_list_tickets tbody td.dt-empty {
    text-align: center;
}

/*
 * DataTables Bootstrap5 CSS reverses the header flex layout (icon before
 * text) for numeric/date columns, assuming they're right-aligned. Keep
 * the sort icon after the title for these column types too.
 */
table.dataTable thead th.dt-type-numeric div.dt-column-header,
table.dataTable thead th.dt-type-date div.dt-column-header {
    flex-direction: row;
}

/* ul */
.list-group-item {
    padding-left: 0;
}

body {
    color:#242c30 ;
}

/* form */
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    padding: 0;
}
/*
 * intl-tel-input wraps its <input> in a div.iti that's inline-block and
 * sized to content by default, so a phone field ends up narrower than
 * sibling .form-control fields in the same form row. Stretch it to match.
 */
.iti {
    display: block;
    width: 100%;
}
.gj-datepicker-bootstrap [role=right-icon] button {
    width: 38px;
    position: relative;
    border: 1px solid #ced4da;
}

/* footer */
.site-footer {
    margin-top: 8px;
}

/* card */
.card {
    border: 1px solid #dfe5e8;
    border-radius: 3px;
    background: #fff;
    margin: 0 0 1.5rem
}

.card.card-tabs .nav-tabs {
    margin: 0;
    padding: 0
}

.card.card-tabs .nav-tabs li {
    display: inline-block;
    position: relative;
    margin-bottom: -1px
}

.card.card-tabs .nav-tabs li a {
    color: #aab7be;
    position: relative;
    padding: 1rem 1.5rem;
    display: inline-block;
    text-decoration: none;
    bottom: 0;
    border-bottom: 1px solid transparent
}

.card.card-tabs .nav-tabs li a.active {
    color: #242c30;
    font-weight: 600;
    border-bottom-color: #f26b31
}

.card.card-tabs .nav-tabs li:hover a {
    color: #5a666d;
    border-bottom-color: #aab7be
}

.card.card-tabs .card-header {
    border: none
}

.card.card-empty {
    border-style: dashed
}

.card.card-empty .card-empty-text {
    text-align: center;
    color: var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color)))
}

.card .card-header {
    overflow: hidden;
    border-bottom: 1px solid #eef1f3
}

.card .card-header .card-title {
    padding: .75rem 1rem;
    margin: 0;
    font-size: 16px;
    color: #aab7be;
    font-weight: 400;
    float: left
}

.card .card-header .card-nav {
    padding: .75rem 1rem;
    float: right
}

.card .card-header .card-nav ul {
    margin: 0;
    padding: 0
}

.card .card-header .card-nav ul li {
    list-style: none;
    display: inline-block;
    padding: 0 .25rem
}

.card .card-header .card-nav a {
    font-size: .875rem
}

.card .card-body {
    padding: 1rem 1.5rem
}

.card .card-body p:last-child {
    margin-bottom: 0
}

.card .card-body.no-gutter {
    padding: 0
}

.card .card-footer {
    padding: .5rem;
    border-top: 1px solid #eef1f3;
    line-height: 1
}

.card .card-footer .card-footer-link {
    font-size: 14px;
    display: inline-block;
    text-align: center;
    line-height: normal
}

.card.no-border {
    border: none
}
.card .card-body {
    padding: 1rem 1.5rem;
}
.card>h1,.card>h2,.card>h4,.card>h5,.card>h6 {
    color: #aab7be;
    font-weight: 600;
    letter-spacing: -.015rem
}

.card>h1 {
    font-size: 22px
}

.card>h2 {
    font-size: 20px
}

.card>h3 {
    font-size: 18px
}

.card>h4 {
    font-size: 16px
}

.card>h5 {
    font-size: 14px
}

.card>h6 {
    font-size: 12px
}

/*
 * Support ticket post bodies can contain long unbroken strings (tracking
 * links, etc.) with no spaces to wrap at, which would otherwise overflow
 * past the post's bordered container.
 */
.post-body {
    word-break: break-all;
    overflow-wrap: break-word;
    max-width: 100%;
}

.billing-page .comment .comment-text {
    margin-left: 0;
}