/* ---------------------------------------------------
    Fonts
----------------------------------------------------- */

.din-regular, body, #header, p, .form-floating label, small, h4, h5, h6, td, .card-title, .modal-body, input, select, textarea, .steps .step .step-title, label, .dropdown-item, .modal-body p:not(.din-condensed-medium), .shopping-cart-wrapper td {
    font-family: "URWDIN-Regular", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-shadow: none;
}
.din-medium, .nav li a, .nav li button, .card-title, .din-condensed-medium, #selected_blockquote p{
    font-family: "URWDIN-Medium", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-shadow: none;
}
.din-regular-bold {
    font-family: "URWDIN-Regular", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-shadow: none;
}
.din-bold, form h1 + h3 {
    font-family: "URWDIN-Bold", sans-serif;
    font-style: normal;
    text-shadow: none;
}
.din-condensed-light, .shop h3.price, .modal h3.price, .shop .price span:before, .modal .price span:before, .plan-cost, .plan_list .price, .shop .bundle h3.price span:first-of-type:before, #device_list .price .money:before, .text-secondary .money:before {
    font-family: "URWDINCond-Light", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-shadow: none;
}
.shop .sku-topup h3 .price span:before {
    font-weight: 400 !important;
}
.din-condensed-bold,.btn-primary, .btn span.badge, #header .btn-primary, .btn-primary span.ready-state,
form h1, .btn-secondary, .btn-danger, .btn-danger span, .btn-default, .page-title, .plan-summary .title, .plan-summary .badge, td.strong,
.navbar .nav-link.dropdown-toggle, .modal-title, .dropdown-header, .modal ul.plan_list li label input[name="plan"] + span, .card-header h4, .plan-addons h5,
.btn-outline-secondary, .btn-outline-primary, table th, table thead tr td, #plan_list .card.product-container label, .plan_list .card.product-container label,
.select-device .card.product-container label, input[name="plan"], input[name="device"], .shop .bundle h3.price span:first-of-type, .shop .price .money, .modal .price .money,
#device_list .price .money, .btn-checkout{
    font-family: "URWDINCond-Bold", sans-serif;
    font-weight: 300;
    font-style: normal;
    text-shadow: none;
}
.din-black {
    font-family: "URWDIN-Black", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-shadow: none;
}
p, h1, h2, h3, h4, h5{
    color: #000;
}
.data-only-plan, .mobile-plan, .optional-voice-plan, .NO-PLAN p.plan-type span {
    font-size: 1rem;
}
.page-title {
    font-size: 3rem;
    line-height: 2.6rem;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.page-title li {
    line-height: 1.2rem;
}
.page-title li:not(.dropdown-header) {
    text-transform: none;
}
.plan-summary .title {
    font-size: 20px;
    vertical-align: middle;
    text-transform: uppercase;
}
.shop .card-header h4{
    font-size: 3rem;
}
.card-header h4 {
    margin-bottom:0;
    padding-top: .25rem!important;
    text-transform: uppercase;
}
.card-header.loading h4 {
    font-size: 20px;
    padding-top: .45rem!important;
    padding-bottom: .25rem!important;
}
a.navbar-brand.text-uppercase, .navbar .nav-link.dropdown-toggle, p.din-condensed-medium {
    font-size: 18px;
}
.modal-title {
    font-size: 3rem !important;
    text-transform: uppercase;
    margin-left: auto !important;
    margin-right: auto !important;
}
.modal-header .btn-close {
    margin:0;
}
td.strong {
    font-size: 16px;
}
.modal-body p:not(.din-condensed-medium) {
    font-size: 16px;
}
a.text-uppercase {
    font-size: 13px;
    text-decoration: none !important;
}
.dropdown-header {
    text-transform: uppercase;
    font-size: 18px;
}
.plan-cost {
    margin-left: 5px;
}
.text-body-secondary {
    color: #999 !important;
    font-size: .7em;
}
form h1 + h3 {
    font-size: 20px;
    letter-spacing: 4px;
}
form h1, form h1 + h3 {
    line-height: 24px;
    text-align: center;
}
.form-wrapper {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    margin: 1em 0;
    font-size: .92em;
    border-radius: 2px;
    line-height: 1.5;
    background-color: #eee;
    color: #515151;
}
.bg-grey .form-wrapper {
    background-color: #fff;
}
.bg-grey .form-wrapper:before {
    border: 1em solid #fff;
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
}
.form-wrapper label.btn.btn-outline-secondary {
    background-color: #fff;
}
.form-wrapper input:checked + label.btn.btn-outline-secondary {
    background-color: #6c757d;
}
.subscription:not(.has-kamotik):not(.has-kamotik-scheduled)[data-family='natsagaq_plans'] .get-kamotik + .re-activate,
.subscription:not(.has-kamotik):not(.has-kamotik-scheduled)[data-family='taki_plans'] .get-kamotik + .re-activate,
.subscription:not(.has-kamotik):not(.has-kamotik-scheduled)[data-family='natsagaq_family_plans'] .get-kamotik + .re-activate {
    background-color: #fff;
    color: #6c757d;
    border-color: #6c757d;
}
.form-wrapper label.btn.btn-outline-secondary .text-truncate {
    max-width: 100%;
}
.panel {
    margin-bottom: 30px;
}
.form-wrapper.no-arrow:before {
    content: "";
    border:0 !important;
}
.form-wrapper:before {
    content: "";
    display: block;
    border: 1em solid #eee;
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
    position: absolute;
    top: -0.75em;
    left: 0;
    margin: -1em 0 0 2em;
    z-index: 1;
}
.text-center .form-wrapper:before {
    content: "";
    display: block;
    border: 1em solid #eee;
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
    position: absolute;
    top: -0.75em;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust to center properly */
    margin: 0;
    margin-top: -1em; /* Adjust top margin as needed */
    z-index: 1;
}
.nav-tabs li {
    text-align: center;
}
.nav-tabs li .nav-link{
    font-family: "URWDINCond-Bold", sans-serif;
    font-weight: 300;
    font-style: normal;
    text-shadow: none;
    font-size: 22px;
    line-height: 1;
}
.radio-inline {
    margin-right: 10px;
}
.fixed-bottom .card{
    -webkit-box-shadow:0 -6px 10px 0 rgba(0,0,0,0.23);
    box-shadow:0 -6px 10px 0 rgba(0,0,0,0.23);
}
.card-title {
    margin-bottom:0;
}
.card-title.v-align {
    padding-top: 4px;
    line-height: 42px;
}
p, .modal-body {
    font-size: 16px;
}
.card ul label span {
    font-size: 14px;
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff !important;
}
.shop .card #product_serial input + label {
    width: 118%;
    text-align: left;
}
.shop .card ul label span {
    text-align: left;
}
.modal .card ul label span, .plan-addons h5 {
    font-size: 26px;
}
.modal .card.selected tr td {
    background-color: #fff;
}
.card li:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.card li:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.tab-content form .form-wrapper .card:hover, .tab-content form .card.selected, .search-result .card:hover {
    border-color: #82e782;
}
.search-result .action-select :hover .fa-usd:before {
    color: #fff;
}
.tab-content .card:not(.item).selected .list-group-item {
    background-color: #eeffe4;
}
.expired .modal .tab-content .card.selected .list-group-item {
    background-color: #f8d7da;
}
.list-group-item a {
    text-decoration: none;
}
.row-clickable:hover  {
      background-color: #eeffe4 !important;
      cursor: pointer;
}
.shop .list-group-item:hover {
    background-color: #fff;
    cursor: pointer;
}
.alert + span.help-text {
    margin-bottom: 12px;
    display: block;
}
.tab-content form .form-wrapper .card:hover, .tab-content form .card:hover label, .tab-content form .card:hover label input, li a:hover, .search-result .card:hover {
    cursor: pointer;
}
.account-search-result .card:hover {
    cursor: default !important;
}
.account-search-result .select-account:hover {
    cursor: pointer !important;
}
.select-addon.card:hover ul li {
    background-color: #fff;
}
.navbar-toggler {
    border: 1px solid #300833;
    padding: 10px 15px;
}
.shop .price, .plan_list .price {
    font-size: 4rem;
    line-height: 1;
    color: #333;
}
#plan_list h3, #plan_list input ~ span, .plan_list h3, .plan_list input ~ span, .select-addon input ~ span, .shop .sku-hardware .price, #device_list .sku-hardware .price {
    font-size: 3rem;
    line-height: 0.9;
    color: #333;
}
#plan_list input ~ span.required {
    font-size: 1rem;
}
#device_list input ~ span {
    font-size: 1.6rem;
    line-height: 1;
    color: #333;
}
.modal #plan_list h3, .modal #plan_list input ~ span, .modal .plan_list h3, .modal .plan_list input ~ span, .modal #device_list input ~ span, .modal .select-addon input ~ span {
    font-size: 2.6rem;
    line-height: 0.9;
    color: #333;
}
.features p {
    font-size: 20px !important;
    line-height: 1.2 !important;
}
.features p i {
    width: 24px;
}
.features p i.fa-info-circle {
    color: #60cdf6 !important;
}
.features p i.fa-info-circle.text-danger {
    color: #d9534f !important;
}
.features ~ h3.price span + span, .features ~.footer h3.price span + span {
    font-size: 2.6rem !important;
    line-height: 1;
}
.modal .features ~ h3.price span + span {
    font-size: 1.8rem !important;
    line-height: 1;
}
.plan-type {
    color: #666;
    min-height: 16px;
}
.card-expiry-notice {
    display: none;
}
.card-is-expired.card-expiry-notice {
    display: block;
}
.product-container:hover {
    cursor: pointer;
}
.product-container {
    display: flex;
    flex-direction: column;  /* Stack items vertically */
    height: 100%;  /* Ensure it takes full height of its parent container */
}
.card {
    border: 1px solid #bbb;
    display: flex;
    flex-direction: column;
}
.shop .card, .step .card {
    height: 100%;  /* Ensure the card takes up the full height of its parent */
}
.card .content {
    flex-grow: 1;  /* Ensures this section takes up remaining space */
}

.card .footer {
    margin-top: auto;  /* Push the footer (button and switch) to the bottom */
}
/**********/


/* ---------------------------------------------------
    Tabs
----------------------------------------------------- */
.tab-subscriptions-active .tab-subscriptions a, .tab-billing-active .tab-billing a, .tab-profile-active .tab-profile a, .tab-activity-active .tab-activity a{
    color: #000;
    background-color: #fff;
    border: 1px solid;
    border-bottom: 1px solid #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}
.tab-subscriptions-active, .tab-billing-active, .tab-profile-active, .tab-activity-active {
    background-color: #eee;
}
.has-schedule .modal .select-plan .modal-body {
    background-color: #eee;
}

/* ---------------------------------------------------
    Timeline
----------------------------------------------------- */
.timeline {
    margin: 30px 0;
    padding: 0;
    list-style: none;
    position: relative;
}
.timeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    background: #d7d7d7;
    left: 23%;
    margin-left: -10px;
}
.timeline > li {
    position: relative;
}

.timeline > li .time {
    display: block;
    padding-right: 40px;
    position: absolute;
}

.timeline > li .time span {
    text-align: right;
}
.timeline > li .time > span:first-child {
    color: #555;
    font-size: 16px;
}
.timeline > li .time > span:last-child {
    font-size: 14px;
    line-height: 12px;
    color: #bbb;
}
.timeline > li .label {
    margin: 0 0 15px 28%;
    background: #f5f5f5;
    color: #000;
    padding: 20px;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    position: relative;
    border-radius: 5px;
    display: block;
    white-space: normal;
    text-align: left;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.timeline > li:nth-child(odd) .label {
    background: #f5f5f5;
}

.timeline > li > .label .text-muted {
    color: #bbb;
}

.timeline > li .label h2 {
    margin-top:0;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.4);
}
.timeline > li .label:after {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: #e7e7e7;
    border-width: 10px;
    top: 10px;
}
.timeline .label .fa{
    font-size: 20px;
    padding: 4px;
    vertical-align: middle;
}
.timeline > li > .fa {
    width: 40px;
    height: 40px;
    font-family: 'FontAwesome', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 20px;
    line-height: 40px;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 8px #d7d7d7;
    text-align: center;
    left: 23%;
    top: 0;
    margin: 0 0 0 -25px;
}
.can-view-history .history-link .btn,
.view-activity .btn{
    padding:0.25rem 0.5rem 0.15rem;
    font-size:0.875rem;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: " / " !important;
    display: flex !important;
}
.fa-stack > .fa-certificate + .fa-ticket{
    color: #fff;
    font-size: 14px;
    line-height: 26px;
}
.timeline .text-danger:before, .timeline .text-success:before {
    color: #fff;
}
.timeline .text-success{
    background-color: #27ae60 !important;
}
.timeline .text-danger{
    background-color: #d9534f !important;
}
.timeline table{
    margin-bottom: 10px;
}
.timeline .label p{
    margin:0;
}
.timeline object .btn {
    border-radius:0;
}
.timeline form + .history-btn, .timeline p + a, .timeline p + a + a {
    margin-top: 15px;
}
.activity-promo .label p{
    margin-bottom: 12px;
}
.activity-promo td span span {
    line-height: 26px;
}
.activity .sortable {
    width: 3%;
}
.activity .sortable:hover {
    cursor: pointer;
}
.match-promo_code {
    display: none;
}
.promo-code-0-not-match .match-promo_code, .promo-code-0-not-match #promo_codes .alert {
    display: block;
}
.tab-content {
    background-color: #fff;
    padding:15px;
}
.tab-content + .form-group{
    margin-top: 15px;
}
#plan_list .tab-content {
    padding-bottom: 0 !important;
}
.modal-cdr .tab-content{
    border: 1px solid #ddd;
}
.new-subscription-block a{
    margin-top: 5px;
}
.history-fragments a[data-bs-toggle="collapse"]:after{
    font-family: 'FontAwesome', sans-serif;
    content: " \f056" !important;
}
.history-fragments a[data-bs-toggle="collapse"].collapsed:after{
    font-family: 'FontAwesome', sans-serif;
    content: " \f055" !important;
}
.history-fragments #more_container{
    display: none;
}
.history-fragments #more_container.history-has-more {
    display: table-footer-group;
}
.history-fragments tr.selectable-row td:first-of-type {
    width: 12%;
}
.history-link .btn-primary[disabled] {
    background-color: #e5e5e5 !important;
    border-color: #e5e5e5 !important;
}
.no-filters .filter-btn {
    display: none;
}
.btn-checkout {
    font-size: 26px;
}
.promo_code span, .promo_code button.btn-checkout, .promo_code input {
    border-color: #000 !important;
}

/* ---------------------------------------------------
    Timeline Customer
----------------------------------------------------- */
#recent_activity .timeline > li:nth-child(odd) .label:after {
    border-right-color: #f8f8f8;
}
#recent_activity .timeline > li:nth-child(odd) .label {
    background: #f8f8f8;
}
#recent_activity .timeline > li .label{
    background: #efefef;
}
#recent_activity .timeline > li .label:after{
    border-right-color: #efefef;
}
#recent_activity li .label p {
    color: #000;
    margin: 0;
    font-size: 15px;
    display: inline;
    vertical-align: middle;
}
#recent_activity .btn {
    height: auto;
}

/* ---------------------------------------------------
    Timeline Short
----------------------------------------------------- */
#recent_activity li .label{
    text-align: left;
    white-space: inherit;
}
#recent_activity li .time, #recent_activity li .time + i, #recent_activity li .time + i + .label{
    display: table-cell;
    vertical-align: middle;
}
#recent_activity ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display:table;
    border-spacing: 3px;
    border-collapse: separate;
    width:100%;
}
#recent_activity li .time + i{
    background-color: transparent;
}
#recent_activity li .time{
    width: 200px;
}
#recent_activity li{
    border-bottom: 1px solid #d7d7d7 !important;
}
#recent_activity li:nth-child(odd){
    background-color: #f8f8f8;
}
#recent_activity .time p.text-muted{
    margin:0;
}
#recent_activity form{
    display: inline;
}
#recent_activity .label a.btn-default, #recent_activity button.btn-default{
    text-shadow: none;
    border:0;
    padding:0;
    color: #337ab7;
    font-size: 14px;
    font-weight: 400;
    background-color: transparent;
}
#recent_activity .label a.btn-default:hover, #recent_activity .label a.btn-default:active,
#recent_activity button.btn-default:hover, #recent_activity button.btn-default:active{
    color: #5cc6fb;
    text-decoration: none;
}
#recent_activity .label table, #recent_activity .extended-desc {
    display: none;
}
#recent_activity .inline{
    margin-bottom:0;
}
#recent_activity li > div.history-link:hover {
    text-decoration: none;
    background-color: #f0f0f0;
    cursor: pointer;
}

/** **/

/* ---------------------------------------------------
    Utility
----------------------------------------------------- */

.text-left {
    text-align: left !important;
}
#header .text-right {
    text-align: right !important;
}
.text-right {
    text-align: right !important;
}
.float-right {
    float: right !important;
}
.float-left {
    float: left !important;
}
:root {
    scroll-behavior: auto !important;
}
.d-relative {
    position: relative;
}
.btn-primary:not(.product-container), .btn-secondary:not(.product-container), .btn-danger:not(.product-container), .btn-outline-secondary:not(.product-container), .btn-outline-primary:not(.product-container), .btn-default {
    text-transform: uppercase;
}
.subscription .card-header .dropdown .btn, .subscription .btn.btn-circle {
    height: 42px;
    font-size: 16px;
    border-radius: 24px;
}
#section-billing .card-header .dropdown .btn, #section-billing .btn.btn-circle, .auth-account .btn.btn-circle {
    height: 36px;
    font-size: 16px;
    border-radius: 24px;
}
.btn {
    border-radius: 4px;
}
.d-contents {
    display: contents;
}
.load-more {
    margin: 15px 0;
}
.border-rounded-0 {
    border-radius: 0;
}
.modal .btn-secondary, .modal .btn-danger {
    padding-top: 8px;
}
.fa-spin {
    -webkit-animation-duration: var(--fa-animation-duration, 0.8s);
    animation-duration: var(--fa-animation-duration, 0.8s);
}
.table-striped>tbody>tr:nth-of-type(odd) td.bg-white{
    background-color: #fff !important;
    --bs-table-accent-bg: #fff !important;
}
.table-danger td {
    color: #b02a37 !important;
    padding: 12px;
}
tr.row-spacer, tr.row-spacer td {
    border: 0;
    background-color: #f5f5f5;
}
tr.row-spacer  ~ tr td {
    border-top: 1px solid #ddd;
}
.addon .table tbody tr.row-spacer td:last-child {
    border: 0 !important;
    background-color: #f5f5f5;
}
tr.bg-grey, td.bg-grey {
    background-color: rgba(0,0,0,.005);
}
.addon table th {
    font-size: 20px;
}
.addon tr:not(.row-spacer) td {
    padding: 15px 8px;
}
.bg-grey {
    background-color: #f5f5f5;
}
.border-top-1 {
    border-top: 1px solid #ddd;
}
.disabled {
    pointer-events: none;
}
#bundles .addon-select {
    display: none;
}

/* ---------------------------------------------------
    Forms
----------------------------------------------------- */
[class^="ve-"] .form-error-highlight p{
    display:none;
    margin: 10px 0;
    color: #a94442;
    font-size: 16px;
}
[class^="ve-"].product .form-error-highlight .field-error{
    display: block;
}
[class^="ve-"] .form-error-highlight .submission-error{
    display: block;
}
.submission-error, .field-error {
    display: none;
}
a.logo {
    display: block;
    text-align: center;
}
.loading-state, .loading .ready-state {
    display: none;
}
.loading .loading-state {
    display: block;
}
.loader.loading .spinner-border {
    width: 20px !important;
    height: 20px !important;
    font-size: 16px !important;
}
.nav li a {
    font-size: 16px;
}
.form-signin {
    max-width: 450px;
    padding: 15px;
}
.form-signin form {
    background-color: #505050;
}
form small {
    font-size: 11px;
    line-height: 12px;
}
.form-floating label {
    font-size: 14px;
    padding-top: 20px;
    color: #aaa;
}
.form-wrapper input:disabled + label:after, .form-wrapper input:focus + label, .form-wrapper input:active + label, .form-floating>.form-control:-webkit-autofill~label, .form-floating>.form-control:not(:placeholder-shown)~label::after {
    background-color: transparent !important;
}
#linkList tr:first-child {
    border-bottom: 2px dotted;
}
.form-floating textarea + label {
    padding-left: 25px;
}
.help-text {
    font-size: 13px;
    text-align: left;
}
.timeline.bg-dark {
    background-color: #e7e7e7 !important;
}
.form-floating {
    margin-bottom: 3px;
}
.form-floating input {
    margin-bottom: 3px;
}
.form-floating + .alert + .span {
    margin-top: 12px;
    display: block;
}
small {
    color: #777;
}
.required {
    color: red;
}
#header .form-floating>.form-control, #header .form-floating>.form-control-plaintext, #header .form-floating>.form-select {
    height: calc(2.6rem + calc(var(--bs-border-width) * 2));
    line-height: 1.25;
}
#header .form-floating label {
    font-size: 14px;
    padding-top: 12px;
}
#header .form-floating label:before {
    content: "\f002";
    display: inline-block;
    width: 20px;
    font-family: 'FontAwesome', sans-serif;
}
#header .btn-primary {
    font-size: 16px;
}
#header span.ready-state {
    font-weight: 300 !important;
}
#page-container .btn-primary {
    font-size: 18px;
}
.date-width {
    width: 175px;
}
.fetchMore{
    height: 42px;
    font-size: 16px;
    padding-top: 10px;
}
.no-chart #clickBarChart {
    display: none !important;
}
.no-chart + .mt-4 {
    margin-top:0 !important;
}
.subscriptions .btn {
    height: 42px;
    font-size: 16px;
    padding-top: 10px;
}
.btn-link {
    height: auto;
    font-size: 14px;
    padding:0;
}
.btn-link:hover > i {
    color: #0d6efd;
}
.search-result .btn-link:hover .fa-stack i + i {
    color: #fff;
}
.alert {
    display: none;
}
.alert .btn {
    padding: 10px 18px;
}
.alert-danger table td {
    background-color: #f8d7da !important;
    border-bottom: 1px solid #b02a37;
}
.user-fee span, .user-fee span:before {
    color: #dc3545;
}
.card p.card-text {
    font-size: 50px;
}
.input-group div + .btn.btn-primary.text-uppercase {
    height: 58px;
    font-size: 16px;
    padding-top: 10px;
}
.input-group .form-floating button {
    height: 56px;
    font-size: 16px;
    padding-top: 10px;
    margin-top: -2px;
}
tr.link td form .input-group {
    width: 33%;
    float: left;
}
/*td form .input-group {
    width: 50%;
    float: left;
}*/
td form .input-group + button + a{
    float: right;
    margin-top: 12px;
    vertical-align: middle;
}
td form .input-group + button{
    float:left;
    margin-left: 6px;
    margin-top: 8px;
}
td form .input-group + a {
    margin-top: 12px;
}
input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background: transparent;
    color: transparent;
    cursor: pointer;
    height: auto;
    inset: 0;
    position: absolute;
    width: auto;
}
i.online {
    font-size: 12px;
    margin-left: 6px;
    color: #1aae54 !important;
}
.text-success {
      color: #1aae54 !important;
}
.bg-success {
    background-color: #39b710 !important;
}
.bg-success-1, .bg-lime, .state-expired .badge.bg-lime:not(.device-toggle):not(.next-action):not(.wallet) {
    background-color: #7ab838 !important;
}
.bg-success-2 {
    background-color: #a8c630 !important;
}
.bg-warning, .bg-success[data-next-action="expire"] {
    background-color: #ecb606 !important;
}
.bg-warning-1 {
    background-color: #fb8e33 !important;
}
.bg-warning-2 {
    background-color: #f3672e !important;
}
.fa-warning, .fa-trash {
    color: #ecb606;
}
.table-success th, .table-success td{
    background-color: #b9e8fa !important;
}
i.offline {
    font-size: 12px;
    margin-left: 6px;
    color: rgba(92, 93, 93, 0.78);
}
.bg-offline {
    background-color: rgba(92, 93, 93, 0.78);
}
.bg-missing {
    background-color: #b02a37;
}
.bg-online {
    background-color: #1aae54 !important;
}
.progress {
    border-radius: 30px !important;
    background-color: #7a7a7a !important;
}
.progress-bar:hover {
    cursor: pointer;
}
i.missing {
    font-size: 12px;
    margin-left: 6px;
    width: 12px;
    height: 12px;
    color: #b02a37;
}
.no-decoration {
    text-decoration: none;
}
.card:not(.item).selected .list-group-item, .payment-methods .card.selected .card-body {
    background-color: #eeffe4;
}
.modal .tab-content .card:not(.item).selected .list-group-item {
    background-color: transparent !important;
}
.select-device .list-group-item, .select-plan .list-group-item, .select-addon .list-group-item {
    border:0;
}
.payment-methods .card:hover, .select-device .card:hover, .select-addon .card:hover {
    border: 1px solid #82e782;
}
.payment-methods .btn-group-vertical label {
    padding: 15px;
}
#make_payment .payment-methods label {
    height: 58px;
    vertical-align: middle;
    line-height: 46px;
}
.expired .modal .card:hover {
    border: 1px solid #dc3545;
}
form.loading .form-floating button[type="submit"] {
    padding-left: 75px;
    width: 170px;
}
/* Center the button text vertically and horizontally */
button .button-text {
    display: inline-block;
    vertical-align: middle;
    line-height: inherit; /* Ensure the line height matches the button's height */
}
/* Position the spinner relative to the button */
form.loading .form-floating button[type="submit"] .spinner-border {
    position: absolute;
    left: 25px;
}
form.loading button[type="submit"] .spinner-border {
    vertical-align: bottom !important;
}

/* ---------------------------------------------------
    Notes
----------------------------------------------------- */
.notes{
    overflow: auto;
}
.account-note-view .fa-stack{
    font-size: 14px;
}
.notes blockquote {
    display: grid;
}
.notes blockquote pre, .history-fragments pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word; /* For older browsers */
}
.no-notes .scroll-container{
    display: none;
}
table tr:nth-child(even) blockquote pre {
    background-color: #fff;
}
.tab-content .card:not(.item).selected .list-group-item .table-responsive {
    background-color: #eeffe4;
    background-image: linear-gradient(to right, #eeffe4, #eeffe4), linear-gradient(to right, #eeffe4, #eeffe4), linear-gradient(to right, rgba(0, 0, 0, .35), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, .35), rgba(255, 255, 255, 0));
}
.notes button i {
    padding-right: 5px;
    margin-bottom: 3px;
}
.internal-memo .btn-xs {
    line-height: 1;
    padding: 2px 6px;
}

/* ---------------------------------------------------
    Steps
----------------------------------------------------- */
.steps .step {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    text-align: center;
}
.steps .step .step-icon-wrap {
    display: block;
    position: relative;
    width: 100%;
    height: 40px;
    text-align: center;
}
.steps .step.completed .step-icon {
    border-color: #0da9ef;
    background-color: #0da9ef;
    color: #fff;
}
.steps .step.active .step-icon, .steps .step.active .step-title {
    color: #000;
}
.step.active .step-title {
    font-weight: 600 !important;
}
.steps .step .step-icon {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid #ced3d7;
    border-radius: 50%;
    background-color: #f5f5f5;
    color: #ababab;
    font-size: 20px;
    line-height: 40px;
    z-index: 5;
}
.steps .step.completed .step-icon-wrap::before, .steps .step.completed .step-icon-wrap::after {
    background-color: #0da9ef;
}
.steps .step .step-icon-wrap::after {
    right: 0;
}
.steps .step .step-icon-wrap::before, .steps .step .step-icon-wrap::after {
    display: block;
    position: absolute;
    top: 50%;
    width: 50%;
    height: 3px;
    margin-top: -1px;
    background-color: #ced3d7;
    content: '';
    z-index: 1;
}
.steps .step .step-title {
    margin-top: 16px;
    margin-bottom: 0;
    color: #606975;
    font-size: 14px;
    font-weight: 500;
}
.step-icon .fa {
    line-height: 40px;
}
.scanned-spacer {
    margin-bottom: 240px;
}
.modal-footer {
    justify-content: flex-start;
}

/* ---------------------------------------------------
    Switch
----------------------------------------------------- */
.form-switch .form-check-input {
    border-radius: 2em !important;
}
.form-check .form-check-label {
    margin-top: 2px;
}
.form-wrapper p + .form-check {
    margin-left: 12px;
}
.form-floating textarea {
    height: 200px !important;
}
.form-switch .form-check-label > span:first-of-type {
    float: left;
    padding-right: 40px;
    font-size: 14px;
    padding-top: 2px;
}
.form-switch .form-check-label input + span.badge {
    margin-left: 5px;
    margin-top: 1px;
    padding-bottom: 2px;
}
.form-check span + .form-check-input {
    float: none !important;
}
.form-check-label:hover, .form-check-label input:hover, label:hover, .dropdown-menu li a:hover {
    cursor: pointer;
}
.form-wrapper .switch label input[type="checkbox"]:checked+.lever {
    background-color: #bbd9c0;
}
.switch, .switch * {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.switch label {
    cursor: pointer;
}
.switch label input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch [type="checkbox"]:not(:checked), .switch [type="checkbox"]:checked {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.switch label .lever {
    content: "";
    display: inline-block;
    position: relative;
    width: 50px;
    height: 8px; /* Set the height to 8px */
    background-color: rgba(0,0,0,0.38);
    border-radius: 15px;
    -webkit-transition: background 0.3s ease;
    transition: background 0.3s ease;
    vertical-align: middle;
    margin: 0 8px;
}
.switch label .lever:before, .switch label .lever:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 1px solid #000;
    border-radius: 50%;
    left: 0;
    top: -8px;
    -webkit-transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
    transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease;
}
.switch label.roaming .lever:before, .switch label.roaming .lever:after {
    font-family: 'Font Awesome 6 Free'; /* stylelint-disable-line */
    content: "\e22d";
    font-size: 22px;
    color: #535353;
}
.switch label.roaming input[type="checkbox"]:checked+.lever:before, .switch label.roaming input[type="checkbox"]:checked+.lever:after {
    color: #147b3c;
}
.switch label .lever:before {
    background-color: rgba(38,166,154,0.15);
}
.switch label .lever:after {
    background-color: #fff;
    -webkit-box-shadow:0 3px 1px -2px rgb(0 0 0 / 20%),0 2px 2px 0 rgb(0 0 0 / 14%),0 1px 5px 0 rgb(0 0 0 / 12%);
    box-shadow:0 3px 1px -2px rgb(0 0 0 / 20%),0 2px 2px 0 rgb(0 0 0 / 14%),0 1px 5px 0 rgb(0 0 0 / 12%);
}
.switch label input[type="checkbox"]:checked+.lever:before, .switch label input[type="checkbox"]:checked+.lever:after {
    left: 30px;
}
.switch label input[type="checkbox"]:checked+.lever {
    background-color: #1aae54;
}
.switch label input[type="checkbox"]:checked+.lever:after {
    background-color: #fff;
}
/* ---------------------------------------------------
----------------------------------------------------- */

#plan_list .panel-collapse label input[type="radio"], .plan_list .panel-collapse label input[type="radio"], #device_list .panel-collapse label input[type="radio"] {
    display: none;
}
#page-container .btn[type="submit"]:not(.ajax-search) {
    margin-top:8px;
}
#header .user-description {
    display: flex;
}
#header .user-description .text-truncate {
    max-width: 150px;
    padding-top: 8px;
}
.form-check {
    margin-right: 60px !important;
}

label + .alert {
    margin-top: 12px;
}
.alert-danger .table-danger td {
    background-color: transparent;
    --bs-table-accent-bg: transparent;
}
.input-group-text {
    max-height: 58px;
}
html{
    background-color: #fff;
}
.html-tooltip + .hidden {
    display: none;
}
.note-inline {
    display: none;
}
.campaign-page .highlight-campaign a, .stats-page .highlight-stats a {
    border-bottom: 1px solid #000;
}
::-webkit-calendar-picker-indicator:hover{
    cursor:pointer;
}
.mail {
    color: #333333;
    background: #fafafa;
    border: 1px solid #cccccc;
    width: 100%;
    padding: 10px;
}
.message {
    padding-top: 10px;
}
th, td {
    text-align: left;
}
td {
    font-size: 14px;
}

section {
    margin:0 10px;
    border-bottom: 1px solid #ddd;
}

section summary:hover{
    cursor: pointer;
}

section:nth-child(even) {
    background: #fff;
}

section:nth-child(odd) {
    background: #fff;
}
.ribbon {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: absolute;
    display: none;
}
.ribbon::before,
.ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 3px solid #fec841;
}
.ribbon span {
    position: absolute;
    display: block;
    width: 170px;
    padding: 5px 0;
    background-color: #fec841;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    font-weight: bold;
}
.ribbon-bottom-right {
    bottom: 0;
    right: 0;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
    border-top-color: transparent;
    border-left-color: transparent;
}
.ribbon-bottom-right::before {
    top: 0;
    right: 0;
}
.ribbon-bottom-right::after {
    bottom: 0;
    left: 0;
}
.ribbon-bottom-right span {
    left: -20px;
    bottom: 30px;
    transform: rotate(-45deg);
    height:30px;
}
.SSI-SERVICE-KAMOTIK .ribbon,
.SSI-SERVICE-KAMOTIK-VOICE .ribbon {
    display: block;
}
#selected_portal_panel #selected_blockquote .blockquote > .row:first-child:after{
    font-family: FontAwesome, Helvetica, sans-serif;
    content: "\f00d";
    font-size: 40px;
    display: inline-block;
    position: absolute;
    right: 60px;
}
#footer {
    background-color: #fff;
    padding:30px;
    border-top: 1px solid #ddd;
}

/* ---------------------------------------------------
    Tables
----------------------------------------------------- */
table tr{
    vertical-align: middle;
}
table form {
    margin-bottom:0;
}
.table-responsive {
    background-image:
        /* Shadows */
            linear-gradient(to right, white, white),
            linear-gradient(to right, white, white),

                /* Shadow covers */
            linear-gradient(to right, rgba(0,0,0,.35), rgba(255,255,255,0)),
            linear-gradient(to left, rgba(0,0,0,.35), rgba(255,255,255,0));

    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 20px 100%, 20px 100%, 20px 100%, 20px 100%;

    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
    border:0;
    border-radius: 6px;
}
.table-responsive > table {
    margin-bottom:0;
}
.table-responsive > table > tr {
    background-color: rgba(0,0,0,.005);
}
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.005);
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: rgba(0,0,0,.005);
    color: #000;
    vertical-align: middle;
}
.table-striped>tbody>tr.table-success:nth-of-type(odd) {
    background-color: #b9e8fa !important;
    --bs-table-striped-bg: #b9e8fa !important;
}
.table-striped>tbody>tr:nth-of-type(even)>* {
    background-color: rgba(0,0,0,0);
    color: #000;
    vertical-align: middle;
}
.table-responsive > .table-striped > tbody > tr.note-inline:nth-of-type(odd) {
    background-color: #fff;
}
.table-responsive > .table-striped > tbody > tr:nth-of-type(odd) + tr.note-inline {
    background-color: rgba(225, 225, 225, .2);
}
.table>tbody>tr.note-inline>td, .table>tbody>tr.note-inline>th, .table>tfoot>tr.note-inline>td, .table>tfoot>tr.note-inline>th, .table>thead>tr.note-inline>td, .table>thead>tr.note-inline>th {
    border-top: 1px solid transparent;
}
table tr.no-height, table tr.no-height td {
    height:0;
    padding:0;
    border:0;
}
table tr.no-height .modal tr,
table tr.no-height td .modal td{
    height:0;
    padding: .5rem;
    border:0;
}
.table-clickable:hover tbody tr.selectable-row.hover{
    cursor: pointer;
    background-color: rgba(248, 255, 129, 0.2);
}
table th, table thead tr td {
    color: #444;
    font-size: 16px;
}
.name-header, .speed-header {
    width:25%;
}
.number-header, .voice-header, .location-header, .settings-header, .type-header {
    width: 10%;
}
.status-header {
    width: 5%;
}
.finance-interface .date {
    width: 15%;
}
.finance-interface .edit-transactions-block .table-clickable:hover tbody .lineitem .date .btn-link {
    font-size: 12px;
}
.finance-interface .edit-transactions-block .table-clickable:hover tbody .lineitem.hover .date .btn-link, .finance-interface .open-line-items .lineitem.bg-success .date .btn-link{
    width: 30px;
    visibility: visible;
}
.finance-interface .edit-transactions-block #edit_transactions .date .fa{
    display: none;
}
.finance-interface .edit-transactions-block #edit_transactions tr.Reverse:hover .date .fa{
    display: inline-block;
}
.finance-interface #open_trans .lineitem.hover{
    cursor: pointer;
}
.table-clickable:hover tbody tr.bg-success:hover, .lineitem.bg-success{
    background-color: rgba(56, 166, 40, .2) !important;
}
.can-view-history .history-fragments .selectable-row.groupEVEN, .history-fragments .row-header-odd.groupEVEN, .history-fragments .row-header-even.groupEVEN{
    background-color: rgba(230, 233, 234, 0.5);
}
.can-view-history .history-fragments .selectable-row.groupODD, .history-fragments .row-header-odd.groupODD, .history-fragments .row-header-even.groupODD{
    background-color: rgba(206, 194, 194, 0.07);
}
.view-history{
    display: none !important;
}
.view-history .btn-default:hover{
    background-color: transparent !important;
}
.can-view-history .view-history .history-link .history-btn {
    display: none !important;
}
.table-clickable .date .btn-link{
    width: 30px;
    visibility: hidden;
}
.table-clickable .date .checkbox input{
    display: none;
}
.table-clickable .date .checkbox label{
    padding-left:0;
}
#open_trans .table-clickable .date .checkbox input{
    display: inline-block;
}
#open_trans .table-clickable .date .checkbox label{
    padding-left: 20px;
}

details[open]{
    background: #4c5d7c;
    color: #fff;
}
details[open] table tbody tr:hover td {
    background-color: #fff;
    color: #000;
}
details[open] h5, h5 + a {
    color: #fff !important;
}
.search-result h5 a, .search-result .btn-link a {
    color: #000 !important;
}
.btn-outline-secondary.show-search-results {
    padding: 8px 12px 3px;
}
a:hover{
    color: #0d6efd;
}
h5 + a:hover {
    color: #f0ff00 !important;
}
details[open] summary:hover{
    background: #4c5d7c;
}
details[open] .thread-link {
    display: none;
}
details summary{
    padding: 10px;
}
.filter-btn, #toggleDevices {
    font-size: 26px;
}
#toggleDevices {
    padding-top: 16px;
}
#toggleDevices img {
    padding-bottom: 4px;
    filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg) brightness(0.4);
    -webkit-filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg) brightness(0.4);
}
#toggleDevices:hover img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
.input-group-text.h-100 i {
    font-size: 26px;
    padding-top: 15px;
}
.rateplans a {
    text-decoration: none;
}
.ml{
    margin-left: 13px;
}
summary{
    position: relative;
}
summary .subject{
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 10px;
}
.spinner-border {
    display: none;
    margin-right: 10px;
}
.subscription.has-governor .device-throttle button {
    font-size: 14px;
}
.device-throttle .btn-link, .device-throttle .btn-link:hover, .device-throttle .btn-link:hover > i {
    text-decoration: none !important;
    color: #000 !important;
}
.sort-title .text-truncate {
    max-width: 240px;
}

/* ---------------------------------------------------
    Subscriptions
----------------------------------------------------- */
#subscription_search {
    height: 70px;
}
.plan-summary {
    vertical-align: bottom;
    display: inline;
    gap: 2px; /* Adjust the gap between badges as needed */
}
.plan-summary div.title {
    display: inline-flex;
    color: #000;
    margin-left: 5px;
}
.plan-summary div.title a, .plan-summary a.title {
    color: #000;
    text-decoration: none;
}
.auth-account .plan-summary .badge {
    padding: 2px 0 !important;
}
.plan-summary div.badge a, .plan-summary div.badge div {
    text-decoration: none;
    color: #fff;
    display: block;
    padding: 0.4rem !important;
}
.plan-summary div.badge.device-toggle {
    padding-top: 0.4rem !important;
}
.plan-summary div.badge:hover {
    opacity: 0.8;
}
.plan-summary div.title:hover a {
    opacity: 0.6;
}
.D-bucket-above-threshold span.D,
.B31-bucket-above-threshold span.B31,
.LC-bucket-above-threshold span.LC,
.LD-bucket-above-threshold span.LD,
.R-bucket-above-threshold span.R,
.has-schedule .next-action,
.has-wallet span.wallet,
.bucket.unlimited-bucket {
    background-color: #39b710 !important;
    border-radius: 4px;
}
.D-bucket-below-threshold span.D,
.B31-bucket-below-threshold span.B31,
.homegateway.LD-bucket-empty span.LD,
.LC-bucket-below-threshold span.LC,
.LD-bucket-below-threshold span.LD,
.R-bucket-below-threshold span.R,
.subscription:not(.has-schedule).autopay-off [data-days-left="Expires"],
.subscription:not(.has-schedule).autopay-off [data-days-left="1"],
.subscription:not(.has-schedule).autopay-off [data-days-left="2"],
.subscription:not(.has-schedule).autopay-off [data-days-left="3"],
.subscription:not(.has-schedule).autopay-off [data-days-left="4"],
.subscription:not(.has-schedule).autopay-off [data-days-left="5"],
.subscription:not(.has-schedule).autopay-off [data-days-left="6"],
.subscription:not(.has-schedule).autopay-off [data-days-left="7"],
.subscription:not(.has-schedule).autopay-off [data-days-left="8"],
.subscription:not(.has-schedule).autopay-off [data-days-left="9"],
.subscription:not(.has-schedule).autopay-off [data-days-left="10"]{
    background-color: #f5bc00 !important;
    border-radius: 4px;
}
.btn-check:checked:hover, .btn-check:checked + label {
    pointer-events: none;
    cursor: default;
}
.payment-methods .btn-check:checked:hover, .payment-methods .btn-check:checked + label {
    pointer-events: auto;
    cursor: default;
}
.bucket.not-supported-buckets, .state-expired .badge:not(.device-toggle):not(.next-action):not(.wallet), .subscription span.wallet[data-payg="0"], .expired .bucket.unlimited-bucket,
.state-cancelled .next-action, .bucket.wallet-n-a, .subscription.no-plan .usage-buckets, .subscription.state-cancelled .usage-buckets, .subscription.dormant .next-action {
    background-color: #606060 !important;
    border-radius: 4px;
}
.plan-summary div.badge.not-supported-buckets span, .plan-summary div.badge.unlimited-bucket span {
    padding-top: 6px !important;
}
#section-billing .plan-summary div.badge, .auth-account .plan-summary div.badge {
    padding-top: 2px !important;
}
.not-supported-buckets .fa, .unlimited-bucket .fa {
    padding:0 2px;
}
.B31 .abbr {
    display: none;
}
.isolated-subscription .subscription-id a, .isolated-subscription .mobile-number a{
    pointer-events: none;
    cursor: default;
    color: black;
    text-decoration: none;
}
.subscription.wallet-empty .badge.wallet, .subscription.no-plan.state-activated span.next-action {
    background-color: #606060 !important;
    border-radius: 4px;
}
.state-expired .next-action, .financial-status-arrears .postpay, .credit-card.card-is-expired {
    background-color: #dc3545 !important;
    border-radius: 4px;
}
.alert.backend-error ~ .row #wizard .select-device .focused {
    border: 3px solid #ffaaaa;
}
details[open] .direction, section summary:hover .direction {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.filter {
    position: absolute;
    right: 15px;
    top: 20px;
    border: 0;
}
pre {
    font-family: 'SFMono-Regular',Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-weight: 400;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    color: #000;
    background-color: rgba(238, 238, 238, 0.23);
    font-size: 16px;
}
.form-wrapper input:disabled {
    background-color: #dcdcdc;
}
.form-check-inline input {
    font-size: 16px;
}
table {
    width: 100%;
}
.html-tooltip {
    position: relative;
    display: inline-block;
}

.html-tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 3px;
    margin-left: 6px;
    margin-top: -4px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}
.html-tooltip:hover .tooltiptext {
    visibility: visible;
}
.account-tabs .text-truncate {
    max-width: 150px;
}
.text-truncate {
    max-width: 200px;
}
.location.text-truncate {
    max-width: 50px;
}
.search-result .text-truncate {
    max-width: 400px;
}
.search-result .btn-link, .search-result a {
    text-decoration: none;
}
.search-result .visit-account a:hover {
    text-decoration: underline;
    color: #666;
    cursor: pointer !important;
}
.search-result .btn-link a:hover, .search-result .btn-link .fa-circle {
    color: #0d6efd;
}
.search-result .blockquote p {
    margin-bottom: 0;
}
.search-result.billing-account-search-result {
    margin-bottom: 1rem;
}
.search-result.billing-account-search-result .btn-link, .search-form .search-result.billing-account-search-result .action-assign, .search-form .search-result.billing-account-search-result .action-select, #account_create_form .btn-link,
.search-result.account-search-result .btn-link, .search-result.account-search-result .btn-link.transfer-account, .search-result.account-search-result .btn-link.action-select{
    display: none;
}
.search-result.account-search-result .visit-account {
    display: block;
}
.search-result.billing-account-search-result .visit-billing {
    display: block;
}
.invoice-result {
    display: none;
}
.search-result.includes-invoices .invoice-result {
    display: block;
}
.search-result.includes-invoices .visit-billing {
    display: none;
}
.qiniq-account .fa-circle {
    color: #9b3d9b !important;
}
.ssi-account .fa-circle {
    color: #172c3e !important;
}
.emi-account .fa-circle {
    color: #469b46 !important;
}
.conditional-field:not(:empty):before {
    content: "(";
}
.conditional-field:not(:empty):after {
    content: ")";
}
#account_create_form .btn-link.action-select{
    display: block !important;
    margin-bottom: 10px;
}
#assign_payment_method .search-results .btn-link.action-assign,
#transfer_subscription .btn-link.transfer-account,
#assign_billing .action-assign{
    display: block !important;
    text-decoration: none;
}
.transfer-account a, #selected_blockquote a {
    pointer-events: none;
}
.input-group .btn[type='submit'] {
    height: 58px;
}
.navbar {
    margin-bottom:0;
}
.navbar .fa {
    font-size: 22px;
}
.navbar .nav-link {
    font-size: 14px;
}
.navbar .nav-link:after, .dropdown button:after{
    display: none;
}
#navbar .text-truncate {
    max-width: 240px;
    vertical-align: middle;
}
#language_navbar a.dropdown-toggle:hover,#language_navbar a.dropdown-toggle:active,#language_navbar a.dropdown-toggle:focus {
    color: #eee;
}
.steps {
    background-color: #f2f2f2;
}
.sort-data {
    width: 115px;
}
.sort-roaming {
    width: 155px;
}
.sort-payg {
    width: 120px;
}
#filters a:hover {
    cursor: pointer;
}
.dropdown .fa {
    margin-top: -2px;
}
.popover {
    max-width: none !important;
    width: 400px;
}
.modal .card-header .row > .col-lg-10.collapsed .card-title span:after, .modal .card-header .row > .col-lg-10 .card-title span:after, .card-header .row > .col-lg-10 .card-title div.plan-summary:after, .card-header .row > .col-lg-10 .card-title div.plan-summary div:after {
    display: none !important;
}
.modal form[name="device_settings"] .form-group label .input-group {
    width: 100%;
}
.fa-eye-slash, .fa-eye {
    position: absolute;
    top: 22px;
    right: 16px;
    font-size: 15px;
    margin-left:0;
    z-index: 5;
}
.device-toggle {
    color: #000;
    vertical-align: middle;
}
.device-toggle.collapsed:after {
    font-family: "FontAwesome", sans-serif;
    font-weight: 400;
    content: "\f054";
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-left: 5px;
    margin-bottom: 3px;
    vertical-align: middle;
    color: #000;
}
.device-toggle:after {
    font-family: "FontAwesome", sans-serif;
    font-weight: 400;
    content: "\f078";
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-left: 5px;
    margin-bottom: 3px;
    vertical-align: middle;
    color: #000;
}
.bg-dark-subtle {
    background-color: #5c5d5d !important;
}
.modal .card-header .row > .col-lg-10:hover,.modal .card.product-container:hover, .modal .card.product-container.selected:hover{
    cursor: default !important;
}
.card-header .badge:hover{
    cursor: pointer;
}
.missing .plan-summary div.badge + span {
    display: none !important;
}
.missing .plan-summary div.badge.missing {
    display: inline-block !important;
}
.modal h1.modal-title {
    padding-left: 30px;
    margin-top:0.5rem !important;
    line-height: 2.5rem !important;
}

/* ---------------------------------------------------
    Bundles
----------------------------------------------------- */
.bundle-kamotik-base, .bundle-kamotik-plus-voice, .bundle-kamotik-xmas-special {
    /*padding-top: 40px !important; only to make room for bow at the top */
}
.bundle-kamotik-base .bg-primary {
    background-color: #9F64A7 !important;
}
.bundle-kamotik-plus-voice .bg-primary {
    background-color: #82c258 !important;
}
.bundle-kamotik-promo .bg-primary, .bundle-kamotik-xmas-special .bg-primary {
    background-color: #e92539 !important;
}
.bundle-kamotik-voice .bg-primary, .bg-dark-blue {
    background-color: #60cdf6 !important;
}
.bundle-kamotik-voice .usage-display, .SSI-SERVICE-KAMOTIK-VOICE .features .data, .has-bundles .offnet-data {
    display: none !important;
}
.bg-base-grey {
    background-color: #dcddde;
}
.product-container.bg-base-grey:hover {
    background-color: #c4c4c4;
}
.bundle.product-container:hover {
    filter: brightness(1.05);
}
.text-lime {
    color: #82c258;
}

/* Usage Blocks */
.usage-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    margin-top: 50px;
}

.usage-bar {
    position: relative;
    width: 75px;
    height: 25px; /* Adjust height for each individual bar */
}

.bar-background {
    width: 100%;
    height: 100%;
    background-color: #9b3d9b;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    position: relative;
    border: 1px solid white;
}
.bar-background.data-offnet:empty, .usage-bar .data-offnet {
    display: none;
}
.feature-data-offnet .usage-bar .data-offnet {
    display: block;
}
.loading-content {
    display: none;
}
.bar-usage {
    width: 100%;
    background-color: grey;
    border-radius: 0;
    position: absolute;
    left: 0;
    right: 0;

}
.bar-usage.GB1 {
    height: 2px;
    top: -3px;  /* Default starting position for the first bar */
}
.bar-usage.GB5 {
    height: 10px;
    top: -11px;  /* Default starting position for the first bar */
}
.bar-usage.GB50 {
    height: 20px;
    top: -21px;  /* Default starting position for the first bar */
}

/* Dynamically set top position based on nth-child */
.bar-background .bar-usage.GB1:nth-child(1) {
    top: -3px;  /* First bar: top -3px */
}
.bar-background .bar-usage.GB1:nth-child(2) {
    top: -6px;  /* Second bar: top -7px */
}
.bar-background .bar-usage.GB1:nth-child(3) {
    top: -9px;  /* Third bar: top -11px */
}
.bar-background .bar-usage.GB1:nth-child(4) {
    top: -12px;  /* Fourth bar: top -14px */
}
.bar-background .bar-usage.GB1:nth-child(5) {
    top: -15px;  /* Fourth bar: top -18px */
}

.bar-background .bar-usage.GB5:nth-child(1) {
    top: -11px;  /* First bar: top -11px */
}
.bar-background .bar-usage.GB5:nth-child(2) {
    top: -22px;  /* Second bar: top -22px */
}
.bar-background .bar-usage.GB5:nth-child(3) {
    top: -33px;  /* Third bar: top -33px */
}
.bar-background .bar-usage.GB5:nth-child(4) {
    top: -44px;  /* Fourth bar: top -44px */
}
.bar-background .bar-usage.GB5:nth-child(5) {
    top: -55px;  /* Fourth bar: top -55px */
}

.bar-background .bar-usage.GB50:nth-child(1) {
    top: -21px;  /* First bar: top -21px */
}
.bar-background .bar-usage.GB50:nth-child(2) {
    top: -42px;  /* Second bar: top -42px */
}
.bar-background .bar-usage.GB50:nth-child(3) {
    top: -63px;  /* Third bar: top -63px */
}
.bar-background .bar-usage.GB50:nth-child(4) {
    top: -84px;  /* Fourth bar: top -84px */
}
.bar-background .bar-usage.GB50:nth-child(5) {
    top: -105px;  /* Fourth bar: top -105px */
}

/* If there are more bars, continue this pattern */

/* Apply special styling to the first .bar-usage if not the only child */
.bar-background .bar-usage:last-child {
    border-top-left-radius: 4px;  /* Rounded top corners for the first bar */
    border-top-right-radius: 4px; /* Rounded top corners for the first bar */
}

.text-overlay {
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    text-transform: uppercase;
}
/* End Usage Blocks */

.fa-info-circle:hover {
    cursor: pointer;
}
/* Order bundles by Price */
.bundle-order-20 { order: 20; }
.bundle-order-25 { order: 25; }
.bundle-order-35 { order: 35; }
.bundle-order-90 { order: 90; }

.overlay-message .card:hover {
    cursor: default !important;
}
.bundle-name:not(:empty):before {
    content: "(";
}
.bundle-name:not(:empty):after {
    content: ")";
}
.bundle input[name="plan"], .tab-pane .product-container .card label input {
    display: none;
}
.bundle .fa-gift {
    color: #e92539;
}
.bundle .badge.bg-lime {
    font-size: 14px;
}
#bundles {
    background-color: #fff;
}
.select-plan .collapse-toggle .nav-item {
    max-width: 500px;
}
.tab-bundles, .tab-data_only {
    margin-right: 3px;
}
.tab-classic, .tab-data_only, .tab-data_talk_text {
    margin-left: 3px;
}
.bow {
    position: absolute;
    z-index: 20;
    top: 0;
    display: none;
}
.bundle-kamotik-xmas-special .bow {
    display: none;
}
.bundle h3 {
    font-size: 3rem;
    line-height: 0.9;
}
.features + h3, .sku-topup h3, .shop .sku-topup h3 .price {
    font-size: 4rem !important;
    line-height: 1;
}
.features + h3 span, input::placeholder {
    font-family: "URWDINCond-Light", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-shadow: none;
}
.features + h3 span:not(:first-of-type) {
    font-size: 2.5rem;
}
#get-kamotik_wizard .panel-collapse {
    background-color: #fff;
}
#get-kamotik_wizard .nav-tabs li button.active {
    background-color: #fff !important;
}
#get-kamotik_wizard.form-wrapper .nav-tabs li button.active {
    background-color: #fff !important;
}
#get-kamotik_wizard.form-wrapper .panel-collapse {
    background-color: #fff;
}
.bundle .features p:empty {
    height: 24px;
}
.bundle .card:hover {
    border-color: #bbb !important;
    cursor: pointer !important;
}
.bundles .btn-outline-primary {
    color: #913f98;
    border-color: #913f98;
    font-size: 1.4rem !important;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 4px;
}
.bundles .btn-outline-primary:hover, .bundles .btn-outline-primary.active {
    color: #fff;
    background-color: #913f98;
}
/* Ensure horizontal scrolling and snap behavior */
.overflow-x-auto {
    display: flex;
    overflow-x: auto; /* Allow horizontal scrolling */
    scroll-snap-type: x mandatory;  /* Mandatory snapping on the x-axis */
    scroll-behavior: smooth;  /* Smooth scrolling */
}
.overlay-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Center the text inside */
    width: 100%; /* Ensures it fits within the col-9 width */
}
.overlay-message .card {
    border: 8px solid #82c258 !important;
    border-radius: 8px;
    padding: 30px;
}
.overlay-message p {
    font-size: 1.8rem;
    line-height: 2rem;
}
.overlay-message p span[data-phone] {
    color: #82c258 !important;
}
/* Apply styles only when data-bundles is 2 or more */
.row[data-bundles]:not([data-bundles="1"]) .bundle.card {
    flex-shrink: 0;  /* Prevent plans from shrinking */
    scroll-snap-align: center;  /* Align each plan to the center */
    width: 100%; /* Ensure the plans take up the full width of the container */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Make sure everything inside stretches correctly */
    height: 100%; /* Allow it to stretch vertically */
}

/* Ensure that the container's child elements (plans) are in a row without wrapping */
.row .bundle {
    display: flex;
    flex-wrap: nowrap;  /* Prevent wrapping, all plans stay on one line */
    justify-content: center;
}

/* Make the individual plan items (col-md, etc.) take equal height */
.row.flex-nowrap .col-xl-4, .row.flex-nowrap .col-lg-4, .row.flex-nowrap .col-md-4, .row.flex-nowrap .col-sm-4, .row.flex-nowrap .col-xs-4 {
    display: flex; /* Turn each column into a flex container */
    flex-direction: column; /* Arrange child items vertically */
}

/* Set the features section to take all available space */
.row .bundle .features {
    flex-grow: 1; /* This ensures the features section grows to take remaining space */
}

/* Ensure that the price and button sections are at the bottom of each card */
.row .bundle .price,
.row .bundle .btn {
    margin-top: auto; /* Push these elements to the bottom */
}
.scroll-tip {
    max-width: 75%;
    margin: auto;
    border-radius: 3px;
    padding: 5px 6px 0 !important;
}

/* ---------------------------------------------------
    Money
----------------------------------------------------- */

.money:before {
    content: "$";
}
.money.money-infinitesimal:before{
    content: "<$";
}
.shopping-cart-wrapper .money.money-negative:before {
    content: "-$";
}
.shopping-cart-wrapper .money.money-negative:after {
    content: "";
}
.money.money-negative:before {
    content: "($";
}
.money.money-negative:after {
    content: ")";
}
html[lang="fr"] .money:before {
    content: "";
}
html[lang="fr"] .money.money-infinitesimal:before{
    content: "";
}
html[lang="fr"] .money.money-negative:before {
    content: "(";
}
html[lang="fr"] .money:after {
    content: " $";
}
html[lang="fr"] .btn-primary .money:after {
    content: " $";
}
html[lang="fr"] .money.money-infinitesimal:after{
    content: " $";
}
html[lang="fr"] .money.money-negative:after {
    content: ") $";
}
html[lang="fr"] .btn-success .money.money-negative:after {
    content: ") $";
}
.btn-success .money.money-negative:after {
    content: ")";
}
.modal .table>:not(caption)>*>* {
    background-color: transparent;
}
.modal .table.features:not(.table-bordered) thead th{
    border-bottom: 1px solid #ddd;
}
.select-device .product-container img {
    height: 80px;
    width: auto;
}
.product-specs {
    display: none;
}
.product-specs select {
    font-size: 20px;
}
#additional_devices {
    display: block;
}
#additional_devices .child-serial {
    display: none;
}
#additional_devices .sku-ship-to .child-serial,.sku-ship-to.selected ~ #serial_accordion .ship-to{
    display: block;
    margin-top: 0;
}
#additional_devices .sku-ship-to .child-product-serial .child-serial + .child-serial-number {
    display: none !important;
}
.customize-device .subsku {
    display: none;
}
.customize-device.sku-ship-to.has-subskus .subsku {
    display: inline-block;
}
.ship-to-label.badge.text-bg-info {
    background-color: #cff4fc !important;
}
.sku-input-serial-number label .identifier .serial {
    display: inline-block;
}
.sku-input-imei .identifier .imei {
    display: inline-block;
}
.sku-input-serial-number.selected ~ #serial_accordion label .identifier .serial,
.sku-input-serial-number.active ~ #serial_accordion label .identifier .serial,
[data-label="serial-number"] .identifier .serial
{
    display: inline-block;
}
.sku-input-imei.selected ~ #serial_accordion label .identifier .imei,
.sku-input-imei.active ~ #serial_accordion label .identifier .imei,
[data-label="imei"] .identifier .imei
{
    display: inline-block;
}
.identifier .serial, .identifier .imei{
    display: none;
}
.shopping-cart-wrapper {
    background-color: #bfd8dd;
}
.shopping-cart-wrapper td, .adjustments p {
    font-size: 18px;
}
.shopping-cart-wrapper h3 {
    font-size: 3rem;
}
.shopping-cart-wrapper h4 {
    font-size: 1.8rem;
}

.shopping-cart-wrapper input[type="checkbox"], .shopping-cart-wrapper input[type="radio"]:not(.btn-check) {
    display: inline-block;
}
/* Style the radio buttons */
input[type="checkbox"], input[type="radio"]:not(.btn-check) {
    width: 25px; /* Adjust box size */
    height: 25px; /* Adjust box size */
    margin: 0; /* Remove default margin */
    appearance: none; /* Remove default styling */
    -webkit-appearance: none; /* Safari-specific */
    border: 1px solid black; /* 1px black border */
    border-radius: 3px; /* Rounded corners */
    background-color: white; /* Default background */
    cursor: pointer; /* Pointer cursor */
    outline: none; /* Remove focus outline */
    transition: border-color 0.2s ease, background-color 0.2s ease;
    vertical-align: text-bottom;
    margin-right: 5px;
}

/* Add green circle when radio button is selected */
input[type="checkbox"]:checked, input[type="radio"]:not(.btn-check):checked {
    border-color: #000; /* Green border when selected */
    background-color: white; /* Keep fill white */
    position: relative; /* To position the green circle */
}

.shop form .card:hover {
    cursor: pointer;
}
.shop form .bundle.card:hover {
    cursor: default;
}
.Get-Kamotik, .Re-activating, .Re-activating #get-kamotik_wizard .panel-collapse.addon-select, .Get-Kamotik #get-kamotik_wizard .panel-collapse.addon-select, .Purchase-a-plan,
.Get-Kamotik #wizard > .card > .card-header, .shop-color.Re-activating #wizard > .card > .card-header, .Purchase-a-plan #wizard > .card > .card-header{
    background-color: #f5f5f5 !important;
}
.Purchase-a-plan #wizard .wizard-collapse > .card-body {
    padding: 0 !important;
}
.shop.Kamotik-Add-ons .addon-select  > .pt-5 {
    padding-top: 1rem !important;
}
.shop.Kamotik-Add-ons .addon-select h3 {
    font-size: 1.8rem !important;
    margin-bottom: 1rem !important;
}
.Kamotik-Add-ons .device-renew {
    display: inline-block;
}
.Kamotik-Add-ons .renew-switch, .Kamotik-Add-ons .switch {
    margin: 0 !important;
}
.renew-switch.d-block {
    padding: 0.5rem;
}
.sku-topup .h1.d-block {
    margin-top: 1rem;
}
#classic {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
#wizard > .card > .card-header {
    background-color: #fff !important;
}
.addon-select {
    margin: 0 -15px;
}
.wizard .btn-group {
    margin-bottom: 20px;
}
.wizard .subscription.mobile_type .select-plan .product-specs .btn, .subscription .select-device label.active .product-specs .btn{
    float: none;
}
.wizard .select-device .product-container.active .product-specs, .customize-device.show .product-specs{
    display: inline-block;
}
.on-net-usage, .roaming-usage {
    display: none;
    font-size: 18px;
}
.sku-on-net .on-net-usage, .sku-roaming .roaming-usage {
    display: block;
    font-size: 18px;
}
.payment-prefix {
    display: none;
}
#payment_methods .card-footer {
    margin: 0 -15px -44px;
}
#payment_methods #payment-method-account-credit .btn[type="submit"] .payment-prefix.extend {
    display: inline-block;
}
#payment_methods .btn[type="submit"] .payment-prefix.pay {
    display: inline-block;
}
.kamotik-sup {
    display: none;
}
#get-kamotik-wizard .kamotik-sup {
    display: inline-block;
    font-size: 20px;
    letter-spacing: 1px;
}
.title .get-kamotik {
    padding-top: 2px;
    padding-left: 4px;
    padding-right: 4px;
}
.getSpecs {
    padding: 12px 18px;
}
#kamotik-addons_wizard #plan_list div:first-of-type.after-mid-billing-cycle.mid-cycle-text {
    display: block !important;
}
.mid-cycle-text {
    display: none !important;
}
.addon-modal tr td {
    width: 33%;
}
.addon .table tbody td:last-child {
    border-right: 1px solid #ddd;
}
#checkout_buttons {
    margin-top: 20px;
}
.h1.block .fa{
    vertical-align: middle;
    padding: 0 5px;
}
.form-floating>input[type='file'].form-control {
    line-height: 1.5rem;
    height: 70px;
}
.form-floating>input[type="file"].form-control-plaintext:focus, .form-floating>input[type="file"].form-control-plaintext:not(:placeholder-shown), .form-floating>input[type="file"].form-control:not(:placeholder-shown) {
    padding-top: 2.2rem;
}
.modal .subscription-dates {
    color: #449d44;
    font-weight: bolder;
}
.modal .expired.subscription-dates {
    color: #a94442;
    font-weight: bolder;
}
.modal .expires.subscription-dates {
    color: #f5bc00;
    font-weight: bolder;
}
.nav-link .d-inline-block.text-truncate.v-align {
    vertical-align: middle;
}
.usage-price-strikethrough {
    text-decoration: line-through;
    color: #a94442;
}
.billing-in-arrears .balance.badge {
    background-color: #dc3545 !important;
}
/* Style the checkmark */
.addon-dropdown .checkmark {
    visibility: hidden; /* Hide the checkmark by default */
    margin-right: 10px; /* Add space between checkmark and text */
    width: 16px;
}

/* Show the checkmark when the item is selected */
.addon-dropdown .dropdown-item.selected .checkmark {
    margin-right: 10px; /* Add space between checkmark and text */
    visibility: visible; /* Show the checkmark when selected */
}

/* You can also style the dropdown item when it's selected */
.addon-dropdown .dropdown-item.selected {
    background-color: #f8f9fa; /* Change background when selected */
}

/* Style the checkmark itself */
.addon-dropdown .checkmark::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";  /* stylelint-disable-line */
    font-weight: 900;
}
.addon-dropdown .dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}
.addon-dropdown .dropdown-item:hover {
    background-color: #f5f5f5 !important;
}

/* ---------------------------------------------------
    Redeem Topup PINS
----------------------------------------------------- */

/* pins[0] inputs */
.on-pins-0-good, .on-pins-0-same { display: none;  }
.pins-0-good, .pins-0-good .on-pins-0-good {display:block; color: #449d44;}
.on-pins-0-bad  { display: none; }
.pins-0-bad, .pins-0-bad .on-pins-0-bad {display:block; color: #a94442;}
.pins-0-good #pin_0 {
    border: 2px solid #449d44;
}
.pins-0-bad #pin_0 {
    border: 2px solid #a94442;
}
/* pins[1] inputs */
.on-pins-1-good, .on-pins-1-same { display: none; }
.pins-1-good, .pins-1-good .on-pins-1-good {display:block; color: #449d44;}
.on-pins-1-bad  { display: none; }
.pins-1-bad, .pins-1-bad .on-pins-1-bad {display:block; color: #a94442;}
.pins-1-good #pin_1 {
    border: 2px solid #449d44;
}
.pins-1-bad #pin_1 {
    border: 2px solid #a94442;
}
/* pins[2] inputs */
.on-pins-2-good, .on-pins-2-same { display: none; }
.pins-2-good, .pins-2-good .on-pins-2-good {display:block; color: #449d44;}
.on-pins-2-bad  { display: none; }
.pins-2-bad, .pins-2-bad .on-pins-2-bad {display:block; color: #a94442;}
.pins-2-good #pin_2 {
    border: 2px solid #449d44;
}
.pins-2-bad #pin_2 {
    border: 2px solid #a94442;
}
/* pins[3] inputs */
.on-pins-3-good, .on-pins-3-same { display: none; }
.pins-3-good, .pins-3-good .on-pins-3-good {display:block; color: #449d44;}
.on-pins-3-bad  { display: none; }
.pins-3-bad, .pins-3-bad .on-pins-3-bad {display:block; color: #a94442;}
.pins-3-good #pin_3 {
    border: 2px solid #449d44;
}
.pins-3-bad #pin_3 {
    border: 2px solid #a94442;
}
/* pins[4] inputs */
.on-pins-4-good, .on-pins-4-same { display: none; }
.pins-4-good, .pins-4-good .on-pins-4-good {display:block; color: #449d44;}
.on-pins-4-bad  { display: none; }
.pins-4-bad, .pins-4-bad .on-pins-4-bad {display:block;}
.pins-4-good #pin_4 {
    border: 2px solid #449d44;
}
.pins-4-bad #pin_4 {
    border: 2px solid #a94442;
}
/* pins[5] inputs */
.on-pins-5-good, .on-pins-5-same { display: none; }
.pins-5-good, .pins-5-good .on-pins-5-good {display:block; color: #449d44;}
.on-pins-5-bad  { display: none; }
.pins-5-bad, .pins-5-bad .on-pins-5-bad {display:block; color: #a94442;}
.pins-5-good #pin_5 {
    border: 2px solid #449d44;
}
.pins-5-bad #pin_5 {
    border: 2px solid #a94442;
}
.loading-pin-result {
    display: none;
}
.pins {
    position: relative;
}
.pins a {
    display: none;
    position: absolute;
    right: 10px;
    top: 30px;
    font-size: 20px;
}
.ve-min-len-pins_0 label.pins + .alert {
    display: block;
}
form label + .alert-danger {
    clear: both;
    margin-top: 4px;
}
[class^="pin-*-error"], .pin-collapse input+span.help-block {
    color: #a94442;
}
#topupTable {
    display: none;
    margin-bottom: 40px !important;
}
.pin-collapse {
    padding: 10px 0 !important;
}
.pin-collapse:not(:first-of-type), #topupTable_payment {
    display: none;
}
.pin-collapse label {
    width: 100%;
}
#payment-method-topup-card .amount-input, #modal_payment #payment-method-topup-card .form-error-highlight, .redeem-input  {
    display: none;
}
#payment-method-topup-card .redeem-input, #modal_payment #payment-method-topup-card .redeem-input{
    display: block;
}
.container-fluid.mt-5 .page-title.din-condensed-bold.text-uppercase.text-center{
    margin-top: 3rem !important;
}
#collapserow_0, #add_1 {
    display: block;
}
.addon thead th{
    background-color: #f5f5f5;
}
.addon table tbody tr td:first-of-type {
    border-left: 1px solid #ddd;
}
.add-pin, .remove-pin {
    padding-left: 0;
    padding-top: 0;
}
#add-pin_5 {
    display: none;
}
#remove-pin_0 {
    display: none;
}
.nav-tabs .nav-link:not(.active):hover {
    background-color: #f5f5f5;
}
.nav-tabs .nav-link {
    padding-top: 16px;
}
#get-kamotik_wizard table td.addon label, #kamotik-addons_wizard table td.addon label {
    line-height: 46px;
}
.addon .lever {
    margin-left:0 !important;
    margin-top:6px;
}

#canvas-wrapper {
    position: relative;
    width: 100%;   /* Make the wrapper full width of its parent */
    height: auto;  /* Allow height to adjust based on content */
}

#data-usage-graph {
    width: 100% !important;  /* Make the canvas element fill the container width */
    height: auto !important; /* Maintain aspect ratio */
}

.data-graph.modem, .data-graph.phone, .data-graph.homegateway {
    display: block;
}

/* ---------------------------------------------------
----------------------------------------------------- */
@media (min-width: 1600px) {
    .container-fluid.shop > .row-fluid:first-of-type, .container-fluid.my-5 {
        max-width: 1600px;
        margin: auto;
    }
}
@media (min-width: 1441px) {
    .sort-title .text-truncate {
        max-width: 240px;
    }
}
@media (min-width: 1201px) and (max-width: 1440px) {
    .sort-title .text-truncate {
        max-width: 180px;
    }
}
@media (max-width: 1380px) {
    .plan .overflow-x-auto .row {
        min-width: 1500px;
    }
    #bundle .d-xl-none.d-lg-block {
        display: block !important;
    }
    .bundles .overflow-x-auto .row {
        min-width: 1200px;
    }
}
@media (min-width: 1110px) {
    .subscription .plan-summary div.badge {
        width: 10%;
    }
}
@media (min-width: 1024px) and (max-width: 1109px) {
    .subscription .plan-summary div.badge {
        width: 9.5%;
    }
}
@media (min-width: 1024px) {
    .subscription .card-header .dropdown .btn, .btn.btn-circle {
        padding-top: 5px;
    }
    #section-billing .plan-summary div.badge, .auth-account .plan-summary div.badge {
        width: 200px;
    }
}
@media (max-width: 1023px) {
    .plan-summary .title {
        width:100%;
    }
    .sort-title .text-truncate {
        max-width: initial;
    }
}
@media (min-width: 1024px) and (max-width: 1201px) {
    .sort-title .text-truncate {
        max-width: 180px;
    }
}
@media (min-width: 992px) and (max-width: 1380px) {
    .bundles .col-lg-3 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}
@media (min-width: 980px) {
    /* Allow overflow for speed dropdown */
    .subscription .card-body .table-responsive, .shop .table-responsive, .step .table-responsive, .tab-pane .card .card-header + .card-body > .table-responsive  {
        overflow: visible !important;
    }
    .subscription.card .card-body .text-center.d-xl-none.d-lg-block.d-md-block.d-sm-block {
        display: none !important;
    }
}
@media (min-width: 1024px) and (max-width: 1220px) {
    .plan-summary .title {
        font-size: 18px !important;
    }
    .plan-summary .badge {
        font-size: 15px !important;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {

    .subscription .plan-summary .badge, .subscription .plan-summary .title + div {
        width: 33%;
        display: inline-block;
    }
    #section-billing .plan-summary .badge, #section-billing .plan-summary .title + div, .auth-account .plan-summary .badge, .auth-account .plan-summary .title + div {
        width: 49.4%;
        display: inline-block;
    }
    .auth-account .plan-summary .badge, .auth-account .plan-summary .title + div {
        margin-left: 0 !important;
    }
    .subscription .card-header .dropdown .btn, .btn.btn-circle {
        padding-top: 5px;
    }
}
@media (min-width: 900px) and (max-width: 1200px) {
    .modal-lg {
        min-width: 800px;
    }
    .modal-lg .table-responsive {
        overflow-x: auto !important;
    }
}
@media (min-width: 992px) {
    .navbar .navbar-brand, .navbar .navbar-collapse {
        width: 33%;
    }
    .navbar .navbar-collapse {
        margin-left: 1rem;
    }
    .navbar-brand + div {
        width: 100%;
    }
    .subscription .card-title > .dropdown, #section-billing .card-title > .dropdown {
        position: absolute;
        left: 8px;
        top: 5px;
    }
    .card-title > .dropdown {
        position: absolute;
        left: 8px;
        top: 9px;
    }
    .account-toolbox .dropdown-toggle, .auth-user-manage-action .dropdown-toggle {
        margin-top: 2px;
    }
    .subscription .card-title, #section-billing .card-title, .card-title {
        margin-left: 1rem;
    }
    .subscription .plan-summary div.title {
        margin-top: 6px;
    }
    .account-search-result .col-lg-6:first-child, #transfer_subscription .col-lg-6:first-child, .billing-account-search-result .col-lg-6:first-child {
        margin-left: 8.33333333%;
        width: 40%;
    }
    .view-history .btn-group, .view-history .history-link p a, .view-history .history-link p + a,
    .view-activity .btn-group, .view-activity p a, .view-activity  p + a{
        margin-left: 10px;
    }
    .nav-tabs .nav-link:not(.active) {
        border-top: 1px solid #bbb;
        border-left: 1px solid #bbb;
        border-right: 1px solid #bbb;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .tab-subscriptions {
        margin-right: 5px;
    }
    .account-note-view {
        margin-left: 5px;
    }
    .tab-profile {
        margin: 0 5px;
    }
    .filter-btn {
        width: 265px;
    }
    .input-group-text.h-100 {
        max-height: none;
    }
    #subscription_search + label {
        font-size: 17px;
        padding-top: 22px;
    }
    .payment-methods .flex-wrap div.flex-fill {
        width: 33%;
    }
    .manage-billing, .remove-billing {
        max-width: 200px;
    }
    .adjustments td {
        padding-top: 0;
        padding-bottom: 0;
    }
}
@media (max-width: 991px) {
    .ml time {
        display: block;
    }
    .nav-tabs li a, .nav-tabs li button {
        border: 1px solid #ddd !important;
        border-radius:0 !important;
    }
    .nav-tabs li:not(:first-child) a{
        border-radius:0 !important;
    }
    .nav-tabs li .active:after {
        content: '\2713';
        display: inline-block;
        color: blue;
        padding: 0 6px 0 0;
        margin-left: 5px;
    }
    #devices .card .my-auto {
        margin:0 !important;
    }
    .subscription .card-title > .dropdown, #section-billing .card-title > .dropdown {
        position: absolute;
        top: 12px;
        right: 10px;
    }
    .card-title > .dropdown{
        position: absolute;
        top: 20px;
        right: 10px;
    }
    .modal-title {
        font-size: 2rem !important;
    }
    .card tr .dropdown {
        position: unset;
    }
    .table-responsive{
        display: block;
        background-color: #fff;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive tr:hover {
        cursor: e-resize;
    }
    .subscription .plan-summary .title {
        margin-bottom: 10px !important;
    }
    .subscription .plan-summary .title, #section-billing .plan-summary .title, #section-user .plan-summary .title, .auth-account .plan-summary .title {
        margin-top: 12px;
        margin-bottom:0;
        max-width: 80%;
    }
    .search-result .row>* {
        text-align: center !important;
    }
    .tab-subscriptions-active .nav.nav-tabs li.nav-item .nav-link, .tab-billing-active .nav.nav-tabs li.nav-item .nav-link, .tab-profile-active .nav.nav-tabs li.nav-item .nav-link {
        background-color: #f8f8f8 !important;
    }
    .tab-subscriptions-active .nav.nav-tabs li.nav-item .nav-link.active, .tab-billing-active .nav.nav-tabs li.nav-item .nav-link.active, .tab-profile-active .nav.nav-tabs li.nav-item .nav-link.active {
        background-color: #fff !important;
    }
    #recent_activity li .time{
        width: 150px;
    }
    #recent_activity li .time, #recent_activity li .time + i, #recent_activity li .time + i + .label{
        vertical-align: top;
    }
    #recent_activity li .time + i + .label{
        width: 100%;
        display: block;
    }
    .page-title {
        font-size: 3.2em !important;
        line-height: 1em !important;
    }
    .view-history .btn-group, .view-history .history-link .btn,
    .view-activity .btn-group, .view-activity .btn {
        display: block;
        text-align: center !important;
        border-radius: 4px !important;
        justify-content: center;
        width: 100%;
    }
    .view-history .history-link p,
    .view-activity p{
        margin-bottom: 10px !important;
    }
    .view-history .btn-group .btn,
    .view-activity .btn-group .btn{
        margin: 2px 0;
    }
    .view-history .history-link,
    .view-activity li {
        padding: 10px;
    }
    .history-link .time + i, .view-activity .time + i {
        font-size: 20px;
    }
    .input-group-text.h-100 {
        max-height: none;
    }
    .mb-xs-5 {
        margin-bottom: 2rem !important;
    }
    .payment-methods .flex-wrap div.flex-fill {
        width: 32%;
    }
    #navbar .nav-item.dropdown .dropdown-menu {
        display: block;
    }
    #navbar .dropdown .dropdown-toggle {
        cursor: default;
        pointer-events: none;
    }
    .addon-select .table-responsive tr:hover {
        cursor: default;
    }
    .addon-select .table-responsive .table,
    .activate-step-preview .table-responsive .table {
        min-width: auto !important;
    }
    .addon-select .table-responsive table,
    .addon-select .table-responsive thead,
    .addon-select .table-responsive tbody,
    .addon-select .table-responsive th,
    .addon-select .table-responsive td,
    .addon-select .table-responsive tr,
    .activate-step-preview .table-responsive table,
    .activate-step-preview .table-responsive thead,
    .activate-step-preview .table-responsive tbody,
    .activate-step-preview .table-responsive th,
    .activate-step-preview .table-responsive td,
    .activate-step-preview .table-responsive tr{
        display: block;
        width: 100%;
    }
    .addon-select .dropdown-item {
        text-align: center;
    }
    .addon-select .table-responsive thead {
        display: none !important; /* Hide headers on small screens */
    }

    .addon-select .table-responsive td{
        position: relative;
        padding-left: 50%;
        border: none;
        border-bottom: 1px solid #ddd;
    }
    .activate-step-preview .table-responsive td{
        position: relative;
        border: none;
        text-align: left !important;
    }
    .activate-step-preview .table-responsive tr{
        border-bottom: 1px solid #ddd;
    }
    .addon-select .table-responsive td::before,
    .activate-step-preview .table-responsive td::before{
        content: attr(data-label);
        display: block;
        width: 100%;
        text-align: center;
        font-family: "URWDINCond-Bold", sans-serif;
        font-weight: 300;
        font-style: normal;
        text-shadow: none;
        white-space: nowrap;
        font-size: 20px;
    }
    .addon-select .table-responsive tr:not(.row-spacer) {
        border:1px solid #000;
        margin-top: 5px;
    }
    .addon-select .table-responsive tr.row-spacer {
        display: none !important;
    }
    .addon-select .addon td, .addon-select .addon label {
        text-align: center !important;
    }
    .addon-select .addon td:empty {
        display: none;
    }
    .addon-select .table-responsive {
        overflow: visible !important;
    }
    .addon-select .dropdown-menu {
        width: 100% !important;
        inset: unset !important;
        top: 85px !important;
        transform: none !important; /* Remove offset */
        position: absolute !important; /* Ensure it overlays properly */
    }

    .addon-select .addon-dropdown {
        width: 100%;
        position: relative;
    }

    .addon-select .dropdown-menu .dropdown-item {
        white-space: normal; /* Allow wrapping of long text */
    }
    .activate-step-preview tfoot, .activate-step-preview tfoot tr{
        width: 100% !important;
        display: block !important;
    }
    .activate-step-preview tfoot, .activate-step-preview tfoot tr td h4{
        text-align: right;
    }
    .activate-step-preview tfoot td {
        padding-top: 0;
        padding-bottom: 0;
    }
}
@media (max-width: 979px) {
    .subscription.card .card-body .table-responsive table {
        width: 1200px;
    }
}
@media (min-width: 920px) {
    .account-tabs .d-md-inline-block {
        display: inline-block !important;
    }
    .account-tabs .d-md-none {
        display: none !important;
    }
}
@media (max-width: 880px) {
    .timeline:before {
        display: none;
    }
    .timeline > li .time {
        width: 100%;
        position: relative;
        padding: 0 0 14px;
    }
    .timeline > li .time p{
        margin: 0;
    }
    .timeline > li .time span {
        text-align: left;
    }

    .timeline > li .label {
        margin: 0 0 30px;
        padding: 14px;
        font-weight: 400;
        font-size: 95%;
    }

    .timeline > li .label:after {
        right: auto;
        left: 20px;
        border-right-color: transparent;
        border-bottom-color: #fff;
        top: -20px;
    }

    .timeline > li:nth-child(odd) .label:after {
        border-right-color: transparent;
        border-bottom-color: #fff;
    }

    .timeline > li > .fa {
        position: relative;
        float: right;
        left: auto;
        margin: -55px 5px 0 0;
    }
}
@media (min-width: 768px) and (max-width: 920px) {
    .account-tabs .d-md-inline-block {
        display: none !important;
    }
    .account-tabs .d-md-none {
        display: inline-block !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .select-plan .col-lg-6, #checkout_buttons .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}
@media (max-width: 767px) {
    .select-plan .col-lg-6.text-right, .select-plan .col-lg-6.text-left {
        text-align: center !important;
    }
    .plan-summary .badge, .plan-summary .title + div {
        width: 100%;
        display: inline-block;
    }
    #checkout_buttons .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .table-responsive .table {
        min-width: 900px;
    }
}
@media (max-width: 575px) {
    .sm-line-break {
        display: block;
    }
    .mb-xs-5 {
        margin-bottom: 3rem !important;
    }
    .bundles .py-sm-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    .col-xs-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-xs-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-xs-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-xs-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .card .table-responsive {
        border-radius:0;
    }
    .flex-sm-nowrap {
        flex-wrap: nowrap !important;
    }
    .step .step-title {
        display: none;
    }
    .mx-xs-0 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .col-lg-1.my-auto {
        margin-top: 5px !important;
    }
    .page-title {
        font-size: 2.5em !important;
        line-height: 1em !important;
    }
    .payment-methods .flex-wrap div.flex-fill {
        width: 100%;
    }
    /* provide some bundle overlap for visible scroll queue */
    .bundles .col-xs-4 {
        flex: 0 0 auto;
        width: 28.33333333%;
    }
    .d-sm-none {
        display: none !important;
    }
    .my-xs-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    .mt-xs-3 {
        margin-top: 1rem !important;
    }
    .col-xs-6 {
        width: 50% !important;
    }

}
@media (min-width: 501px) {
    #recent_activity .label a.btn-default:before {
        content: ' | ';
        font-size: 14px;
        margin-left: 4px;
    }

    #recent_activity .label button.btn-default:before {
        content: ' | ';
        font-size: 14px;
        margin-left: 4px;
        margin-right: 3px;
    }
}
@media (max-width: 500px) {
    .timeline .invoice-actions .btn-group, #recent_activity .invoice-actions .btn-group{
        width: 100%;
        display: block !important;
    }
    .timeline .btn, .timeline a {
        margin: 1px 0 !important;
        width: 100%;
        text-align: center !important;
    }
    .checkout_buttons .col-sm-6 button, .checkout_buttons .col-sm-6 .btn {
        width: 100%;
        margin-top: 2px;
        margin-bottom: 2px;
    }
}