:root {
  /* Orange */
  --primary-color: rgb(255 94 23);
  /* Blue */
  --secondary-color: rgb(3 101 244);
  --text-color: black;
  --background-color: white;
  --border-primary: #ff5e17;
  --border-radius: 0;

  --menu-hover: #c57551;
  --border-gray: #c4ced0;
  --orange: #ed782c;
  --accent-orange: #f39253;
  --yellow: #f3be31;
  --red: #d51b1b;
  --border-red: #af0000;
  --text-dark: #222;
}

body {
  background-color: var(--background-color);
}

.tmo img {
  width: 350px;
}

.topBar {
  background-color: var(--background-color);
  color: var(--text-color);
}

.topBar .branding .applicationName {
  color: var(--text-color);
}

.topBar .branding img {
  -webkit-transform: scale(1);
  transform: scale(1);
}

p.caution {
  color: var(--orange);
}

.siteFooter {
  border-top: 1px solid var(--border-primary);
  background-color: white;
  color: var(--secondary-color);
}

.siteFooter .helpCenter ul li div:nth-of-type(2),
.siteFooter .helpCenter ul li div:nth-of-type(2) a,
.horizontalMenu a,
.siteFooter a {
  color: var(--secondary-color);
}

.siteFooter .helpCenter ul li div:nth-of-type(2) a:hover,
.horizontalMenu a:hover,
.siteFooter a:hover {
  color: color-mix(in srgb, var(--secondary-color), black 20%);
}

.siteFooter .verticalMenu.logo img {
  width: 8rem;
}

.navbar {
  background-color: var(--primary-color);
}

.navbar .dropdown:hover,
.navbar .dropdown:active,
.navbar .dropdown:focus-within,
.navbar .dropdown:focus {
  background-color: var(--secondary-color);
  background-color: color-mix(in srgb, var(--primary-color), black 10%);
}

.menu .menu {
  background-color: var(--secondary-color);
}

.menu .menu a:hover {
  background: color-mix(in srgb, var(--secondary-color), black 20%);
}

.navBurger::before, .navBurger::after {
  background: black;
}

.titleBox h3 {
  color: var(--secondary-color);
}

body.hasCurrentUser .pageContent,
html.userLayout .pageContent {
  background: none;
  background-color: var(--background-color);
  color: var(--text-color);
}

.emergencyNotice {
  background-color: var(--primary-color);
  color: white;
  a {
    color: white;
  }
}

.notEnabled h2 {
  color: color-mix(in srgb, var(--text-color), black 30%);
}

.userSearch {
  background: white;
  color: var(--text-color);
  border-color: var(--border-primary);
}

.userSearchResults .resultCount {
  color: var(--text-color);
}

.impersonate .currentUser .profileLink {
  color: var(--text-color);
}

.userAdminTitle .currentlyImpersonating {
  background-color: var(--border-primary);
}

.SectionHeading.level-2,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary-color);
}

.SectionHeading.level-4,
.SectionHeading.level-3 {
  color: var(--text-color);
}

.ChargeSummary {
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
}

.ItemSummaryCard,
.ItemEditCard {
  border-color: var(--border-primary);
  background-color: var(--background-color);
  color: var(--text-color);
  border-radius: var(--border-radius);
}

.ItemSummaryCard .ItemSummaryCard-header > .ItemSummaryCard-title {
  color: var(--primary-color);
}

.ItemEditCardHandle.isEnabled.isSelected .ItemEditCardHandle-label {
  color: var(--text-color);
}

.ItemEditCard .ItemEditCard-header > .ItemEditCard-title {
  color: var(--text-color);
}

.ItemEditCardHandle .ItemEditCardHandle-label {
  color: var(--text-color);
}

.Modal {
  background: white;
}

.Modal-headerButton {
  color: var(--primary-color);
}

.Modal-header {
  background-color: var(--background-color);
  border-bottom: 1px solid var(--border-primary);
}

.Modal-heading {
  color: var(--primary-color);
  background-color: var(--background-color);
}

.AddEquipmentOption {
  background-color: var(--background-color);
  border-color: var(--border-primary);
}

.AddEquipmentOption-title {
  color: var(--text-color);
}

.AddEquipmentOption-title:hover {
  color: rgba(0,0,0,.8);
}

.FlyoutMenu-menu {
  background-color: var(--background-color);
  color: var(--text-color);
  border-color: var(--border-primary);
}

.FlyoutMenu-menu::after {
  border-bottom-color: var(--border-primary);
}

.FlyoutMenuLink {
  background-color: var(--background-color);
  color: var(--text-color);
}

.FlyoutMenuLink:hover {
  background-color: var(--background-color);
}

.ChannelLineup {
  background-color: var(--text-color);
}

.ChannelPremiumPackage,
.ChannelPackage {
  background-color: var(--background-color);
  color: var(--primary-color);
}

.ChannelLineup-channel {
  border-color: var(--border-primary);
  background-color: var(--background-color);
}

.NoEquipment {
  background: white;
  border: 1px solid var(--border-primary);
}

.AccountSummary-header {
  border-color: var(--border-primary);
}

.contentCard,
.ReferFriend,
.ContentCard,
.AccountSummary-display,
.RemoteDVR {
  background: white;
  border-color: var(--border-primary);
  color: var(--text-color);
  border-radius: var(--border-radius);
}

.ReferFriend-disclaimer,
.ReferralProgramInfo h5,
.ReferralProgramInfo h4 {
  color: var(--text-color);
}

.ReferralLink-copyNotification {
  background-color: var(--background-color);
  color: var(--text-color);
  border: none;
}

.ReferFriend .Button span {
  color: white;
}

.ReferFriend .Button {
  background-color: var(--secondary-color) !important;
}

.ReferralLink-display {
  border: 1px solid var(--border-primary);
  background-color: var(--background-color);
  color: var(--text-color);
  border-radius: var(--border-radius);
}

.ReferralLink-linkText {
  color: var(--text-color);
}

.SummarySection-header h2,
.SummarySection-header h3 {
  color: var(--text-color);
}

.SummarySection-field,
.SummarySection-label {
  color: var(--text-color);
}

.AccountCard .ContentCard-iconButton .FontAwesomeIcon {
  color: var(--primary-color);
}

.AccountCard .ContentCard-iconButton:hover .FontAwesomeIcon {
  color: color-mix(in srgb, var(--primary-color), black 20%);
}

.ContentCard .ContactCard-channelTitle,
.ContentCard .ContentCard-header {
  color: var(--text-color);
}

.ContactCard .ContentCard-iconButton .FontAwesomeIcon {
  color: var(--primary-color);
}

.ContactCard .ContentCard-iconButton:hover .FontAwesomeIcon {
  color: rgba(255,67,18,.8);
}

.ContactChannelPreference .FormCheckbox-label::before {
  background: white;
}

.ContactAdd-optInGroup .FormCheckbox .FormCheckbox-label.isEnabled {
  color: var(--text-color);
}

.ContactChannelPreference .FormCheckbox-label.isSelected::before {
  color: var(--primary-color);
}

.ContactChannelPreference .FormCheckbox-label.isEnabled {
  background: white;
  color: var(--text-color);
}

.ContactChannelPreference .FormCheckbox-label.isEnabled::before {
  background: white;
  border-color: var(--border-primary);
}

.ContactChannelPreference .FormCheckbox-label.isEnabled:hover {
  background: white;
}

.ContactChannelPreference .FormCheckbox-label.isEnabled.isSelected::before {
  content: '\2714';
  color: var(--primary-color);
}

.Button.style-redPrimary {
  background-color: var(--border-primary);
}

.FormCheckbox-label {
  color: var(--text-color);
}

.FormSelect-select {
  background-color: var(--background-color);
  border: 1px solid var(--border-primary);
  color: var(--text-color);
  padding: 0 1em;
}

.FormSelect-select.placeholder {
  color: #808080;
}

.formInputMeta a {
  color: var(--text-color);
}

.FormInput-input {
  background-color: white;
  border-color: var(--border-primary);
  color: var(--text-color);
}

.FormInput.FormInput-invalid .FormInput-input {
  border-color: red;
}

.FormInput-invalidText {
  background-color: red;
}

.FormSelect-option {
  color: var(--text-color);
}

.ReviewChangesBar {
  color: var(--text-color);
  background-color: white;
  border-top: 1px solid var(--border-primary);
}

.reviewContactsAction .contactGroupName,
.reviewContactsAction .contactName {
  color: var(--text-color);
}

.NutritionalLabel .bcl {
  border-color: var(--border-primary);
}

.TimeslotPicker h3 {
  background-color: white;
  color: var(--text-color);
  border-bottom: 1px solid var(--border-primary);
}

.Timeslot {
  color: var(--text-color);
}

.Timeslot:hover:not(.Timeslot-selected) {
  color: color-mix(in srgb, var(--text-color), white 30%);
}

.Timeslot-selected {
  color: white;
  background-color: var(--primary-color);
}

.PanelLayout {
  background-color: var(--background-color);
}

.PanelLayout-panelHeader {
  background: white;
  border-color: var(--border-primary);
  color: var(--primary-color);
}

.PanelLayout-panelNavigation {
  background: white;
  border-top: 1px solid var(--border-primary);
}

.VacationForm label {
  color: var(--text-color);
}

.ItemEditCard {
  border-color: var(--border-primary);
}

.ItemEditCardHandle.isEnabled.isSelected.isRemovable:hover .ItemEditCardHandle-label,
.ItemEditCardHandle.isEnabled:hover,
.ItemEditCardHandle.isEnabled:hover .ItemEditCardHandle-label,
.ItemEditCardHandle.isCaution:hover .ItemEditCardHandle-label,
.ItemEditCardHandle.isWarning:hover .ItemEditCardHandle-label {
  color: rgba(0,0,0,.8);
}

.ItemEditCardHandle {
  border-left-color: var(--border-primary);
}

.Calendar {
  background-color: var(--background-color);
  border-color: var(--border-primary);
}

.CalendarArrow,
.Calendar-currentMonth {
  color: var(--text-color);
}

.CalendarArrow-active:hover { 
  color: rgba(0,0,0,.8);
}

.Day-selected,
.Day-endSelected,
.Day-endDay:hover,
.Day-selectable:hover {
  background: var(--border-primary);
  color: white;
}

.Day.Day-inRange,
.Day-endDay:hover,
.Day-selectable:hover {
  background: var(--border-primary);
  color: white !important;
}

.Day-endSelected {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.card {
  background: white;
  color: var(--text-color);
  border-radius: var(--border-radius);
}

.card {
  border-color: var(--border-primary);
}

.cardActions a,
.cardHeader.blue h4 {
  color: var(--primary-color);
}

.confirmPassword {
  background-color: var(--background-color);
}

.currentEmail span {
  color: var(--text-color);
}

.ui-datepicker .ui-datepicker-header,
.ui-datepicker {
  border-color: var(--border-primary);
  background: white;
  color: var(--text-color);
}

.ui-datepicker .ui-state-default,
.ui-datepicker.ui-widget-content .ui-state-default {
  color: var(--text-color);
}

.ui-datepicker .ui-datepicker-unselectable .ui-state-default,
.ui-datepicker .ui-datepicker-disabled .ui-state-default {
  color: #525252;
}

.ui-datepicker td {
  background: white;
}

.ui-datepicker .ui-datepicker-today {
  border-color: var(--border-primary);
  background: white;
}

.ui-datepicker td.ui-datepicker-current-day,
.ui-datepicker td.ui-datepicker-current-day a.ui-state-active {
  background: var(--border-primary);
}

.ui-datepicker td:hover {
  background: var(--border-primary);
}

.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after {
  color: var(--text-color);
}

.ui-datepicker .ui-datepicker-prev:hover::after,
.ui-datepicker .ui-datepicker-next:hover::after {
  color: rgba(0,0,0,.8);
}

.dueBalance .pastDue {
  color: var(--primary-color);
}

.updatedBalanceInfo .currentBalanceDue {
  background-color: var(--background-color);
  border-color: var(--border-primary);
}

.updatedBalanceInfo .currentBalanceDue .title {
  background-color: var(--background-color);
  color: var(--primary-color);
}

.webmailInfo p {
  color: var(--text-color);
}

.webmailInfo .option {
  border-color: var(--border-primary);
  background: white;
  color: var(--primary-color);
}

.webmailInfo .option:hover {
  border-color: var(--border-primary);
  color: rgba(255,67,18,.8);
}

.pageContent {
  background: white;
}

.message {
  color: var(--text-color);
  background: white;
}

.message h3.error {
  color: var(--primary-color);
}

div.bcl {
  border-color: var(--border-primary);
}

div.bcl .smallBorder,
div.bcl .bigBorder {
  border-bottom-color: var(--text-color);
}

a {
  color: var(--text-color);
}

html.userLayout .topBar {
  height: 7rem;
}

.loginBox .js-screen {
  background: #000;
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius);
}

.topBar .menu a:hover,
.topBar .menu a {
  color: var(--text-color);
}

.topBar .userInfo {
  color: var(--text-color);
}

.topBar .userInfo .js-flyoutPanel {
  color: var(--text-color);
  background-color: white;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
}

.topBar .userInfo .js-flyoutPanel li a {
  color: var(--text-color);
}

.topBar .userInfo .js-flyoutPanel li a:hover {
  color: color-mix(in srgb, var(--text-color), white 30%);
  background-color: white;
}

.message.update p {
  color: var(--text-color);
}

.callRecordsInfo div.dt-container table.dataTable thead > tr > th,
.equipmentInfo div.dt-container table.dataTable thead > tr > th {
  background-color: var(--primary-color);
  color: white;
}

.PaymentTable-statusIcon .FontAwesomeIcon {
  color: var(--text-color);
}

.AddServiceBanner-content {
  padding: .5em;
}

.PackageEdit {
  padding-bottom: .5em;
}

.EquipmentEdit {
  padding: 0 .5em .5em;
}

.SectionHeading-label {
  padding-left: .5em;
}

.SectionHeading-meta {
  padding-right: .5em;
}

.AccountSummary-display,
.InvoiceTable-table thead th:first-of-type,
.InvoiceTable-table thead th:last-of-type,
.PaymentTable-table thead th:first-of-type,
.PaymentTable-table thead th:last-of-type {
  border-radius: var(--border-radius);
}

.callRecordsInfo div.dt-container table.dataTable thead > tr > th:last-of-type,
.equipmentInfo div.dt-container table.dataTable thead > tr > th:last-of-type,
.callRecordsInfo div.dt-container table.dataTable thead > tr > th:first-of-type, .equipmentInfo div.dt-container table.dataTable thead > tr > th:first-of-type {
  border-radius: var(--border-radius);
}

.callRecordsInfo div.dt-container .dt-input,
.equipmentInfo div.dt-container .dt-input {
  color: black;
  background-color: white;
  border-color: var(--border-primary);
}

.callRecordsInfo div.dt-container .dt-paging .dt-paging-button,
.equipmentInfo div.dt-container .dt-paging .dt-paging-button {
  border-radius: var(--border-radius);
}

.callRecordsInfo div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled),
.callRecordsInfo div.dt-container .dt-paging .dt-paging-button.current,
.callRecordsInfo div.dt-container .dt-paging .dt-paging-button.current:hover,
.equipmentInfo div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled),
.equipmentInfo div.dt-container .dt-paging .dt-paging-button.current,
.equipmentInfo div.dt-container .dt-paging .dt-paging-button.current:hover {
  color: black !important;
  background: white;
  border-color: var(--border-primary);
}

.callRecordsInfo div.dt-container .dt-paging .dt-paging-button.disabled,
.callRecordsInfo div.dt-container .dt-paging .dt-paging-button.disabled:hover,
.callRecordsInfo div.dt-container .dt-paging .dt-paging-button.disabled:active,
.equipmentInfo div.dt-container .dt-paging .dt-paging-button.disabled,
.equipmentInfo div.dt-container .dt-paging .dt-paging-button.disabled:hover,
.equipmentInfo div.dt-container .dt-paging .dt-paging-button.disabled:active {
  color: black !important;
}

.callRecordsInfo div.dt-container table.dataTable.display > tbody > tr > *,
.equipmentInfo div.dt-container table.dataTable.display > tbody > tr > * {
  border-color: var(--border-primary);
}

.errorContent {
  background-color: var(--background-color);
  border: 1px solid var(--border-primary);
}

.errorContent h3 {
  color: red;
}

.errorContent h4 {
  color: var(--text-color);
}

.errorContent .errorHelp {
  border-color: var(--border-primary);
  background: white;
}

.errorContent .errorDebugInfo {
  background: white;
}

.statusMessages .message.warning .details {
  border-color: var(--border-primary);
}

.statusMessages .message.warning .details .h4 {
  color: var(--primary-color);
}

.statusMessages .message .details a {
  color: var(--primary-color);
}

.statusMessages .message .details a:hover {
  color: rgba(255,67,18,.8);
}

.notification.expand {
  background: white;
}

.ServiceNotification {
  background: white;
  color: var(--text-color);
  /*border-color: var(--border-primary);*/
  border-color: #b11016;
}

/*
.ServiceNotification-statusBadge.active {
  background: var(--primary-color);
}
*/

.ServiceNotification .timestamp,
.outageType::before,
.outageType::after,
.outageType span,
.outageType {
  color: var(--text-color);
}

.boxLayout .box {
  color: var(--text-color);
  background: white;
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius);
}

.boxLayout .box a.phone:hover {
  color: rgba(0,0,0,.8);
}

.boxLayout .box .title {
  background-color: var(--primary-color);
  color: white;
}

.boxLayout .box h3,
.boxLayout .box h4 {
  color: var(--primary-color);
}

.boxLayout .box a,
.boxLayout .box.quickLink a {
  color: var(--text-color);
}

.boxLayout .box i::before {
  color: var(--text-color);
}

.quickBillpay {
  background: var(--secondary-color);
  border-radius: var(--border-radius);
  color: white !important;
}

.NoResults {
  background: white;
  color: var(--text-color);
  border-color: var(--border-primary);
}

.InvoiceTable-table thead tr,
.PaymentTable-table thead tr {
  background-color: var(--border-primary);
  color: white;
}

#manageServices .TabLayout-navigation {
  max-width: 38em;
}

.TabLayout-content {
  background: white;
  border-color: var(--border-primary);
  color: var(--text-color);
  border-radius: var(--border-radius);
  padding: 0;
}

.TabLayout-arrow {
  color: var(--primary-color);
}

.TabLayout-arrow.inactive {
  color: color-mix(in srgb, var(--primary-color) 40%, transparent);
}

.TabLayoutNavigationTab.isActive {
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
}

.TabLayoutNavigationTab:hover {
  color: white;
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
}

.paymentMethodList {
  background: white;
}

.striped > div:nth-of-type(odd),
.striped > div:nth-of-type(even),
.striped tbody tr:nth-of-type(odd),
.striped tbody tr:nth-of-type(even) {
  background: white;
  border: 1px solid var(--border-primary);
}

.closeX::before, .closeX::after {
  background-color: var(--text-color);
}

.paymentMethodList i::before {
  color: var(--text-color);
}

.paymentMethodList a:hover i::before {
  color: rgba(0,0,0,.8);
}

.portalBranding img {
  width: 8rem;
}

.js-modal {
  background: white;
  border-color: var(--border-primary);
  color: var(--text-color);
}

.js-helpLink,
.js-helpLinkModal {
  color: var(--text-color);
}

.js-helpMenu { 
  color: var(--text-color);
  background: white;
  border-color: var(--border-primary);
}

.js-helpMenu h4 {
  color: var(--primary-color);
}

.js-helpClose {
  color: var(--border-primary);
}

.js-helpClose:hover {
  color: rgba(255,67,18,.8);
}

.developmentFeature {
  background-color: var(--primary-color);
}

.formatInput.developmentFeature {
  padding: .25em .75em;
}

.voicemailPhone p {
  padding: .75em;
}

.loginBox .js-screen {
  background-color: var(--background-color);
  color: var(--text-color);
}

.uiPage {
  color: var(--text-color);
  background: white;
  border: none;
}

.uiPage .ticketCard {
  background-color: white;
  border-color: var(--border-primary);
  border-radius: var(--border-radius);
}

.uiPage .ticketCard .ticketBody .note .timestamp,
.uiPage .ticketCard .ticketBody h4 {
  color: black;
}

.js-crumbs li.js-pending {
  background-color: color-mix(in srgb, var(--primary-color) 60%, transparent);
  color: white;
}

.js-crumbs li::after {
  background-color: transparent;
}

.js-crumbs li.js-active:last-child,
.js-crumbs li.js-done,
.js-crumbs li.js-active {
  background-color: var(--primary-color);
}

.js-crumbs li.js-done::after,
.js-crumbs li.js-active::after {
  background-color: inherit;
}

.securityQuestionList .securityQuestion {
  background: white;
}

.NoAccountsMessage {
  background: white;
}

.uiPage .subscriber-info--value,
.uiPage .subscriber-info {
  color: var(--text-color);
  background-color: var(--background-color);
}

.surcharge {
  border-color: var(--border-primary);
  background-color: var(--background-color);
  color: var(--text-color);
}

.paymentAmounts .amountBox.selected,
.paymentAmounts .amountBox {
  background-color: var(--background-color);
  border-color: var(--border-primary);
}

.paymentAmounts .amountBox .title,
.paymentAmounts .amountBox.selected .title {
  background-color: var(--primary-color);
  border-color: var(--border-primary);
  border-radius: var(--border-radius);
}

.paymentAmounts .amountBox .title label input:checked ~ *::before {
  color: var(--primary-color);
}

.paymentAmounts .amountBox .amount .dueDate.pastDue {
  color: var(--primary-color);
}

.paymentInfoConfirmation {
  background-color: var(--background-color);
  border-color: var(--border-primary);
}

.paymentInfoConfirmation section {
  border-color: var(--border-primary);
}

.paymentInfoConfirmation h4 {
  color: var(--text-color);
}

.terms-note {
  color: var(--text-color);
}

.Button.style-blueSecondary,
.impersonate .actions a,
.userAdminButton,
.Button.style-bluePrimary,
.Button.style-bluePrimaryAlt,
.Button.style-greenPrimary,
.Button,
.button {
  background: var(--secondary-color);
  color: white;
  border-radius: var(--border-radius) !important;
}

a.quickBillpay:hover,
.impersonate .actions a:hover,
.userAdminButton:hover,
.Button.style-bluePrimary:not(.isDisabled):hover,
.Button.style-bluePrimaryAlt:not(.isDisabled):hover,
.Button.style-greenPrimary:not(.isDisabled):hover,
.Button.style-blueSecondary:not(.isDisabled):hover,
.button:hover,
.button:active,
.button:focus {
  background: color-mix(in srgb, var(--secondary-color), black 20%);
}

label {
  color: white;
  color: rgb(0 0 0 / 90%);
  font-weight: normal;
}

.selectWidget select {
  outline: transparent;
}

.ContactEdit-optInGroup .FormCheckbox .FormCheckbox-label.isEnabled,
.FormCheckbox-label {
  color: var(--text-color);
}

.ContactChannelPreference .FormCheckbox-label.isEnabled::before,
.FormCheckbox-label::before,
.formRadio input ~ *::before,
.formCheckbox input ~ *::before {
  border-color: var(--border-primary);
  background-color: var(--background-color);
  color: var(--primary-color);
  border-width: 1px;
  content: "\200b";
  border-radius: var(--border-radius);
}

.formRadio input ~ *::before {
  border-radius: 50%;
}

.formCheckbox input:checked ~ *::before,
.formRadio input:checked ~ *::before,
.FormCheckbox-label.isSelected::before {
  content: '\2714';
  color: var(--primary-color);
}

.formRadio input:checked ~ *::before {
  content: '\2022';
}

form .error {
  border: 1px solid red !important;
}

input,
input:valid,
form input[type='text'],
form input[type='email'],
form input[type='select'],
form input[type='password'],
form select,
form textarea {
  border: 1px solid var(--border-primary);
  color: var(--text-color);
  background: white;
  border-radius: var(--border-radius);
}

:focus-visible {
  outline: none;
}

.quickpay a {
  color: white;
}

.statusMessages .message .details {
  border: 1px solid var(--border-primary);
  color: var(--text-color);
  background: white;
  border-radius: var(--border-radius);
}

.statusMessages .message .js-close {
  color: var(--primary-color)
}

.statusMessages .message .js-close:hover {
  color: rgba(255,67,18,.8);
}

.firstTimeUser a,
.firstTimeUser h4 {
  color: var(--text-color);
}

#loader {
  background-image: url(/includes/assets/USICP/loader.png);
  background-size: 80px;
  width: 80px;
  height: 94px;
  left: 48%;
  transform: spinIt 2s linear infinite;
}

@keyframes spinIt {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media screen and (min-width: 31rem) {
  .ChannelLineup {
    background-color: var(--background-color);
  }

  .ChannelLineup-channel {
    border-color: var(--border-primary);
  }

  .ChannelPremiumPackage,
  .ChannelPackage {
    background-color: var(--background-color);
    color: var(--primary-color);
  }

  .ChannelPackage.isIncluded {
    background-color: var(--background-color);
  }
}