/* Wireless Etc. Blue: #005daa */
/* Wireless Etc. Red: #e31837 */

/* O2 Business branding: Beyond Blue #0050FF */
:root {
    --client-primary: #0050FF;
    --client-primary-80: #0040CC;
    --client-primary-60: #6696FF;
    --client-secondary: #0050FF;
    --client-secondary-80: #0040CC;
    --client-secondary-60: #6696FF;
    --client-gray: #FFFFFF;
    --client-gray-80: #F4F7FC;
    --client-gray-60: #E7EDF7;
    --client-primary-text: #031A34;
    --client-button-text: #FFFFFF;
    --client-logo-background: #FFFFFF;
    --client-menu: #FFFFFF;
    --o2-surface: #F7F9FC;
    --o2-border: #CBD6E5;
    --o2-danger: #C62828;
    --o2-focus: #0050FF;
}


/* ############################ Logo ############################ */
.aside .aside-logo
{
	background: var(--client-logo-background) !important;
}
/* ############################ Logo ############################ */.


/* ############################ Login ############################ */

#kt_login > div > div.kt-grid__item .kt-grid__item--order-tablet-and-mobile-2 .kt-grid .kt-grid--hor .kt-login__aside {	
	background-image: linear-gradient(135deg, #0050FF 0%, #003B99 58%, #031A34 100%) !important;
}

#kt_login > div > div.kt-grid__item.kt-grid__item--order-tablet-and-mobile-2.kt-grid.kt-grid--hor.kt-login__aside.ng-star-inserted, .kt-grid__item.kt-grid__item--order-tablet-and-mobile-2.kt-grid.kt-grid--hor.kt-login__aside
{
	background-image: linear-gradient(135deg, #0050FF 0%, #003B99 58%, #031A34 100%) !important;
} 

.kt-grid.kt-grid--hor:not(.kt-grid--desktop):not(.kt-grid--desktop-and-tablet):not(.kt-grid--tablet):not(.kt-grid--tablet-and-mobile):not(.kt-grid--mobile) {
	background-image: linear-gradient(135deg, #0050FF 0%, #003B99 58%, #031A34 100%) !important;
}

.kt-login.kt-login--v1 .kt-login__wrapper 
{	
	background: var(--client-secondary) !important;
}

.kt-login.kt-login--v1 .kt-login__aside .kt-login__title 
{
	color: var(--client-primary) !important;
    font-size: 34px !important;
    font-weight: 700 !important;
}

.kt-login.kt-login--v1 .kt-login__aside .kt-login__subtitle 
{
	color: var(--client-primary) !important;
	font-size: 18px !important;
    font-weight: 400 !important;
}

.kt-login__head d-block mt-3 mr-auto ml-auto text-center
{}

.kt-login__form, .kt-login__title, .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-login__title>h3, .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-login__actions .kt-login__link-forgot
{
	background-color:var(--client-logo-background) !important;
	color:var(--client-primary) !important;
}

.kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-form .form-group .form-control
{
	color:var(--client-primary);
}

.kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-login__actions .kt-login__btn-primary, .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-login__actions .kt-login__btn-secondary
{
	border-color: var(--client-primary-text) !important;
}

.beacon-container
{
	background-color:var(--client-primary-text);
	color:var(--client-primary);
}

.ng-tns-c1-0 
{
	color:#FF0000;
}

.copy-right-text 
{
	color: #ffffff;
}

.o-form-head
{
	color: var(--client-primary) !important;
}

/* ############################ Login ############################ */

/* ############################ Header and Sidebar ############################ */

.header, .aside-menu, user-menu #kt_quick_user_toggle:hover, user-menu #kt_quick_user_toggle span:hover, user-menu .btn.btn-active-light-primary.show,
user-menu #kt_quick_user_toggle:active, user-menu #kt_quick_user_toggle span:active,user-menu #kt_quick_user_toggle:focus, user-menu #kt_quick_user_toggle span:focus
{
  background-color:var(--client-menu) !important;
}


user-menu #kt_quick_user_toggle, user-menu #kt_quick_user_toggle span {
	color: var(--client-primary-text) !important; 
}

side-bar-menu .aside .menu-item .menu-icon i, side-bar-menu .menu-item .menu-link .menu-title
{ 
   color: var(--client-primary-text) !important; 
}

.aside-menu .menu-item .menu-link.active .menu-title 
{	
   color: var(--client-button-text) !important; 
}

side-bar-menu .menu-state-bullet-primary .menu-item .menu-link.active
{
    background-color: var(--client-secondary) !important; 
}

.menu-state-bullet-primary .menu-item.hover > .menu-link:not(.disabled):not(.active),
.menu-state-bullet-primary .menu-item .menu-link:hover:not(.disabled):not(.active) 
{
    background-color: var(--client-secondary-60) !important;  
}

.language-switch-area
{
	color: var(--client-primary-text) !important;
}
/* ############################ Header and Sidebar ############################ */

/* ############################ KT Wizard ############################ */

.kt-wizard-v1, .kt-wizard-v1__nav, .kt-wizard-v1__nav-items
{
	overflow: auto;
	flex-wrap: nowrap !important;
	justify-content: initial !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.kt-wizard-v1__nav-item
{
	flex-wrap: nowrap !important;
	justify-content: initial !important;
	white-space: nowrap !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.kt-wizard-v1__nav-body
{
	padding: 2rem 1.5rem !important;
}

.kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items .kt-wizard-v1__nav-item[data-ktwizard-state="done"]:after, .kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items .kt-wizard-v1__nav-item[data-ktwizard-state="current"]:after {
          color: var(--client-primary) !important; }
        .kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items .kt-wizard-v1__nav-item[data-ktwizard-state="done"] .kt-wizard-v1__nav-body .kt-wizard-v1__nav-icon, .kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items .kt-wizard-v1__nav-item[data-ktwizard-state="current"] .kt-wizard-v1__nav-body .kt-wizard-v1__nav-icon {
          color: var(--client-primary) !important; }
          .kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items .kt-wizard-v1__nav-item[data-ktwizard-state="done"] .kt-wizard-v1__nav-body .kt-wizard-v1__nav-icon g [fill], .kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items .kt-wizard-v1__nav-item[data-ktwizard-state="current"] .kt-wizard-v1__nav-body .kt-wizard-v1__nav-icon g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease;
            fill: var(--client-primary) !important; }
          .kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items .kt-wizard-v1__nav-item[data-ktwizard-state="done"] .kt-wizard-v1__nav-body .kt-wizard-v1__nav-icon:hover g [fill], .kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items .kt-wizard-v1__nav-item[data-ktwizard-state="current"] .kt-wizard-v1__nav-body .kt-wizard-v1__nav-icon:hover g [fill] {
            -webkit-transition: fill 0.3s ease;
            transition: fill 0.3s ease; }
        .kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items .kt-wizard-v1__nav-item[data-ktwizard-state="done"] .kt-wizard-v1__nav-body .kt-wizard-v1__nav-label, .kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items .kt-wizard-v1__nav-item[data-ktwizard-state="current"] .kt-wizard-v1__nav-body .kt-wizard-v1__nav-label {
          color: var(--client-primary) !important; }
/* ############################ KT Wizard  ############################ */


/*############################  Buttons ############################ */

/* for changing the colors of buttons in the page.*/
.btn-primary, .btn-success, .button-primary
{
	background-color:var(--client-secondary) !important;
	border-color: var(--client-secondary) !important;
	color: var(--client-button-text) !important; 
}

.btn-primary:hover, .btn-success:hover, .button-primary:hover
{
	background-color:var(--client-secondary-80) !important;
	border-color: var(--client-secondary-80) !important;
	color: var(--client-button-text) !important; 
}

.btn-check:checked + .btn.btn-primary, .btn-check:active + .btn.btn-primary, .btn.btn-primary:focus:not(.btn-active), .btn.btn-primary:hover:not(.btn-active), .btn.btn-primary:active:not(.btn-active), .btn.btn-primary.active, .btn.btn-primary.show, .show > .btn.btn-primary {
	
	background-color:var(--client-secondary-80) !important;
	border-color: var(--client-secondary-80) !important;
	color: var(--client-button-text) !important; 
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle, 
	.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle,
	.button-primary:not(:disabled):not(.disabled):active, .button-primary:not(:disabled):not(.disabled).active, .show > .button-primary.dropdown-toggle
{
	background-color:var(--client-secondary-80) !important;
	border-color: var(--client-secondary-80) !important;
	color: var(--client-button-text) !important; 
}

.btn.btn-primary:disabled, .btn.btn-success:disabled, .btn.button-primary:disabled
{
	background-color: #cccccc !important;
    border-color: #cccccc !important;
    color: #ffffff !important;
}

.btn.btn-danger
{   
	background-color: var(--o2-danger);
    border-color: var(--o2-danger);
    color: #ffffff !important;
}

.btn.btn-danger:hover, .btn.btn-danger:active, .btn-check:checked + .btn.btn-danger, .btn-check:active + .btn.btn-danger, .btn.btn-danger:focus:not(.btn-active), .btn.btn-danger:hover:not(.btn-active), .btn.btn-danger:active:not(.btn-active), .btn.btn-danger.active, .btn.btn-danger.show, .show > .btn.btn-danger 
{	
	background-color:var(--client-primary-80) !important;
	border-color: var(--client-primary-80) !important;
	color: var(--client-primary-text) !important; 
}

.btn.btn-danger:disabled
{
	background-color:var(--client-gray) !important;
	border-color: var(--client-gray) !important;
	color: var(--client-primary-text) !important; 
}


.btn.btn-default
{
	background-color:var(--client-gray) !important;
	border-color: var(--client-gray) !important;
	color: var(--client-primary-text) !important; 
}

.btn.btn-default:hover
{
	background-color:var(--client-gray-60) !important;
	border-color: var(--client-gray-60) !important;
	color: var(--client-primary-text) !important; 
}

.btn.btn-default:active
{
	background-color:var(--client-gray) !important;
	border-color: var(--client-gray) !important;
	color: var(--client-primary-text) !important; 
}

.btn.btn-default:disabled
{
	background-color:var(--client-gray-80) !important;
	border-color: var(--client-gray-80) !important;
	color: #434349cc;
}


.btn.btn-secondary
{
	background-color:var(--client-gray) !important;
	border-color: var(--client-gray) !important;
	color: var(--client-primary-text) !important; 
}

.btn.btn-secondary:hover
{
	background-color:var(--client-gray-60) !important;
	border-color: var(--client-gray-60) !important;
	color: var(--client-primary-text) !important;
}

.btn.btn-secondary:active
{
	background-color:var(--client-gray) !important;
	border-color: var(--client-gray) !important;
	color: var(--client-primary-text) !important;
}

.btn.btn-secondary:disabled
{
	background-color:var(--client-gray-80) !important;
	border-color: var(--client-gray-80) !important;
	color: var(--client-primary-text) !important;
}

.btn-outline-success {
  color: var(--client-secondary);
  border-color: var(--client-secondary);
  outline-width:thick !important; }
  .btn-outline-success:hover {
    color: var(--client-primary-text);
    background-color: var(--client-secondary);
    border-color: var(--client-secondary); }
  .btn-outline-success:focus, .btn-outline-success.focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 80, 255, 0.35);
    box-shadow: 0 0 0 0.2rem rgba(0, 80, 255, 0.35); }
  .btn-outline-success.disabled, .btn-outline-success:disabled {
    color: var(--client-secondary);
    background-color: transparent;
	outline-width:thick !important; }
  .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
  .show > .btn-outline-success.dropdown-toggle {
    color: #fff;
    background-color: var(--client-secondary);
    border-color: var(--client-secondary); }
    .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
    .show > .btn-outline-success.dropdown-toggle:focus {
      -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 80, 255, 0.35);
      box-shadow: 0 0 0 0.2rem rgba(0, 80, 255, 0.35); }

.text-primary {
	color: var(--client-secondary) !important;
}
/* ############################ Buttons  ############################ */


/* ############################ Datatable  ############################ */

/* ############################ Datatable  ############################ */


/* ############################ Focus-visible style  ############################ */

.menu-item .menu-link:focus-visible,
.btn.btn-icon .svg-icon:focus-visible,
html a:focus-visible, body a:focus-visible,
html button:focus-visible, body button:focus-visible,
html div:focus-visible, body div:focus-visible,
html img:focus-visible, body img:focus-visible {
    outline: 2px solid var(--o2-focus) !important;
    outline-offset: 2px;
}

.kt-header-mobile__toolbar button:focus-visible {
    border: 2px solid var(--o2-focus) !important;	
}

.kt-aside-menu a:focus-visible {
    outline: none !important;
    border: 2px solid var(--o2-focus) !important;
}

p-dropdown div:focus-visible, p-dropdown .ui-state-focus {
    outline: 2px solid var(--o2-focus) !important;
    outline-offset: 2px;
}

/* ############################ Focus-visible style  ############################ */


/* ############################################################################################################################### */

.ui-table-scrollable-body
{
	max-height: 600px !important;
}

/* colored bar top of receipt */
.device-trade-receipt-title {
	background-color: var(--client-secondary) !important;
	color: #FFFFFF !important;
}

/* text in receipt sections */
.device-trade-receipt-header {
	background-color: var(--client-secondary) !important;
	color: #FFFFFF !important; 
}

.confirmation-screen-bullets
{
	text-align: left !important;
	font-size: 14px !important;
	font-weight: 400 !important;
}


/*
.kt-wizard-v1, .kt-wizard-v1__wrapper
{
	width: 80% !important;
	display: inline-block;
}
*/

.question-description
{
	white-space: pre-wrap !important;
}

.o-form-error-container, .form-text text-danger ng-tns-c1-0 ng-star-inserted
{
	color: #FF0000;
}


.kt-checkbox, .form-group
{
	flex-wrap: wrap !important;
	white-space: normal !important;
}


.primeng-datatable-container
{
	overflow-wrap: break-word;
	table-layout: fixed;
	overflow: auto;
	margin-right: -10px;
}

.ui-table
{
	overflow-wrap: break-word;
	overflow: auto;
	margin-right: -10px;
	min-width: 1000px;
}

.ui-table-scrollable-header-table, .ui-table-scrollable-header-box
{
	white-space: normal;
}


/* for changing the background color */
/* .kt-header, .kt-aside-menu, .kt-aside-menu-wrapper, .kt-menu__item, .kt-aside */
/* { */
  /* background-color:var(--client-primary); */
/* } */

/* .kt-header-mobile, .kt-header__topbar */
/* { */
 /* background-color:var(--client-primary); */
 /* color:var(--client-primary-text) !important; */
/* } */

/* .kt-aside__brand,.kt-header-mobile__logo, .kt-header-mobile__toolbar, .ui-dropdown-label-container */
/* { */
	/* background-color:var(--client-primary-text); */
/* } */



/* /* .kt-header .kt-header__topbar .kt-header__topbar-item.kt-header__topbar-item--user .kt-header__topbar-user .kt-header__topbar-username */ */
/* /* { */ */
	/* /* color: var(--client-primary-text); */ */
/* /* } */ */


/* .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__heading, .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link */
/* { */
	/* background-color:var(--client-secondary-80); */
/* } */

/* .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item.kt-menu__item--active > .kt-menu__heading, .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item.kt-menu__item--active > .kt-menu__link  */
/* { */
	/* background-color: var(--client-secondary-80) !important; */
/* } */

/* .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item.kt-menu__item--here > .kt-menu__heading, */
/* .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item.kt-menu__item--here > .kt-menu__link  */
/* { */
    /* background-color: var(--client-secondary-80) !important;  */
/* } */

/* /* .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--open > .kt-menu__heading, .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--open > .kt-menu__link */ */
/* /* { */ */
    /* /* background-color: var(--client-secondary) !important;  */ */
/* /* } */ */



 /* /* .kt-aside-menu .kt-menu__nav > .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__heading, */ */
 /* /* .kt-aside-menu .kt-menu__nav > .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__link  */ */
 /* /* { */ */
      /* /* background-color: var(--client-secondary-60) !important;  */ */
/* /* } */ */

/* .kt-aside-menu .kt-menu__nav > .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__heading .kt-menu__link-icon, */
/* .kt-aside-menu .kt-menu__nav > .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__link .kt-menu__link-icon  */
/* { */
    /* color: var(--client-primary-text) !important;  */
/* }  */

 /* .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__heading, */
 /* .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__link  */
 /* { */
      /* background-color: var(--client-secondary-60) !important;  */
/* } */

 /* .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__heading .kt-menu__link-icon, */
 /* .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__link .kt-menu__link-icon  */
 /* { */
    /* color: var(--client-primary-text) !important;  */
/* }  */


/* /* .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--open > .kt-menu__heading, .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--open > .kt-menu__link .kt-menu__link-icon */ */
/* /* {  */ */
   /* /* color: var(--client-primary-text) !important;  */ */
/* /* } */ */

/* .kt-menu__link kt-menu__toggle ng-star-inserted */
/* { */
/* /*	background-color:var(--client-secondary); */ */
	/* color: var(--client-primary-text); */
/* } */

/* .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-text,  */
/* .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__heading .kt-menu__link-text,  */
/* .kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-text */
/* { */
    /* color: var(--client-primary-text);  */
/* } */
	
/* .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__heading .kt-menu__link-icon, */
	/* .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-icon  */
/* { */
    /* color: var(--client-primary-text);  */
/* } */

/* .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item > .kt-menu__heading .kt-menu__link-icon, */
    /* .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item > .kt-menu__link .kt-menu__link-icon  */
/* { */
	/* color: var(--client-primary-text); */
/* } */

/* .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item.kt-menu__item--hover > .kt-menu__heading .kt-menu__link-icon, .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item.kt-menu__item--hover > .kt-menu__link .kt-menu__link-icon  */
/* { */
	/* color: var(--client-primary-text); */
/* } */

/* .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item.kt-menu__item--active > .kt-menu__heading .kt-menu__link-icon, .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-icon  */
/* { */
	/* color: var(--client-primary-text); */
/* } */

/* .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__heading .kt-menu__link-text, .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-text  */
/* { */
    /* color: var(--client-primary-text);  */
/* } */

/* .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item > .kt-menu__heading .kt-menu__link-text, */
/* .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item > .kt-menu__link .kt-menu__link-text  */
/* { */
	/* color: var(--client-primary-text);  */
/* } */

.nav-link 
{
	color: var(--client-primary);
}

.nav-tabs .nav-item .nav-link
{
	color: var(--client-primary);
}

.nav-tabs .nav-item .nav-link.active, .nav-tabs .nav-item .nav-link:active, .nav-tabs .nav-item .nav-link:hover
{
	color: var(--client-primary);
}

.kt-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title small
{
	color: #959cb6;
	font-weight:400;
}


.ui-paginator-page.ui-state-active{
	background-color:var(--client-primary);
}

.ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active{
	background-color:var(--client-primary);
}

.pi-search:before{
	color:var(--client-primary);
}

.card-text .font-weight-bold .question-description{
	font-weight: 500 !important;
}

/* Modified by GD */

.aside-menu .menu-item.hover > .menu-link:not(.disabled):not(.active) .menu-title, .aside-menu .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-title {
    color: var(--client-menu) !important;
}

.swal2-styled.swal2-confirm {
    border: 0;
    border-radius: 0.25em;
    background: initial;
     background-color: var(--client-secondary-60) !important; 
    color: #fff;
    font-size: 1em;
}




.menu-state-primary .menu-item.hover > .menu-link:not(.disabled):not(.active), .menu-state-primary .menu-item .menu-link:hover:not(.disabled):not(.active) {
    transition: color 0.2s ease, background-color 0.2s ease;
    color: var(--client-menu) !important;
}

.menu-state-bg .menu-item.hover > .menu-link:not(.disabled):not(.active), .menu-state-bg .menu-item .menu-link:hover:not(.disabled):not(.active) {
    transition: color 0.2s ease, background-color 0.2s ease;
    background-color: var(--client-secondary-60) !important;
}


.menu-state-primary .menu-item.hover > .menu-link:not(.disabled):not(.active) .menu-title, .menu-state-primary .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-title {
    color: #ffffff;
}

.swal2-actions:not(.swal2-loading) .swal2-styled:hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
    background-color: var(--client-secondary-60) !important;
    color: var(--client-menu) !important;
}




.btn-check:checked + .btn.btn-light-primary, .btn-check:active + .btn.btn-light-primary, .btn.btn-light-primary:focus:not(.btn-active), .btn.btn-light-primary:hover:not(.btn-active), .btn.btn-light-primary:active:not(.btn-active), .btn.btn-light-primary.active, .btn.btn-light-primary.show, .show > .btn.btn-light-primary {
    background-color:var(--client-secondary-80) !important;
	border-color: var(--client-secondary-80) !important;
	color: var(--client-menu) !important; 
}
.btn.btn-default {
    background-color: var(--client-secondary) !important;
    border-color: var(--client-secondary) !important;
    color: var(--client-menu) !important;
}


.btn.btn-default:hover {
    background-color: var(--client-secondary-60) !important;
    border-color: var(--client-secondary-60) !important;
    color: var(--client-menu) !important;
}


.btn-check:checked + .btn.btn-success, .btn-check:active + .btn.btn-success, .btn.btn-success:focus:not(.btn-active), .btn.btn-success:hover:not(.btn-active), .btn.btn-success:active:not(.btn-active), .btn.btn-success.active, .btn.btn-success.show, .show > .btn.btn-success {
    color: var(--client-menu) !important; 
    border-color: var(--client-secondary-60) !important;
    background-color: var(--client-secondary-60) !important; 
}

.swal2-input {
    box-sizing: border-box;
    width: 95% !important;
    transition: border-color 0.1s, box-shadow 0.1s;
    border: 1px solid #d9d9d9;
    border-radius: 0.1875em;
    background: inherit;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px transparent;
    color: inherit;
    font-size: 1.125em;
}


.swal2-input {
    margin: 1em 1em 0 !important;
}

/* ############################ O2 brand refinements ############################ */
html, body, button, input, select, textarea {
    font-family: "On Air Var", "On Air", Arial, Helvetica, sans-serif;
    color: var(--client-primary-text);
}

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

a, .nav-link, .nav-tabs .nav-item .nav-link {
    color: var(--client-primary);
}

a:hover, a:focus,
.nav-tabs .nav-item .nav-link.active,
.nav-tabs .nav-item .nav-link:hover {
    color: var(--client-primary-80);
}

.form-control, .ui-inputtext, .swal2-input {
    border-color: var(--o2-border) !important;
}

.form-control:focus, .ui-inputtext:focus, .swal2-input:focus {
    border-color: var(--client-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 80, 255, 0.20) !important;
}

.btn-primary, .btn-success, .button-primary,
.swal2-styled.swal2-confirm {
    border-radius: 4px;
    font-weight: 600;
}

.btn.btn-secondary {
    border-color: var(--client-primary) !important;
    color: var(--client-primary) !important;
}

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

.kt-portlet, .card, .modal-content {
    border-color: var(--o2-border);
    border-radius: 6px;
}

.ui-paginator-page.ui-state-active,
.ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active {
    background-color: var(--client-primary) !important;
    color: #FFFFFF !important;
}
/* ############################ O2 brand refinements ############################ */

html body #kt_login > div > div.kt-grid__item.kt-grid__item--order-tablet-and-mobile-2.kt-grid.kt-grid--hor.kt-login__aside.ng-star-inserted,
html body #kt_login .kt-login__aside {
    background-image: none !important;
    background-color: #FFFFFF !important;
}


/* O2 Business - Enterprise Trade-In Registration branding.
   Every rule is scoped under .registration-wrapper (only present on the registration pages),
   because a tenant's Custom CSS is also loaded by the Angular portal and must not restyle it.
   Loaded after enterprise-trade-in-registration.css, so same-specificity rules override it. */

.registration-wrapper {
    --o2-blue: #0050ff;
    --o2-blue-dark: #0041d1;
    --o2-text: #0b2a6f;
    --o2-field-bg: #e6e9f0;
}

/* ---------- Left aside: white, O2 blue text ---------- */
.registration-wrapper .registration-aside {
    background-image: none;
    background-color: #ffffff;
}

.registration-wrapper .registration-aside-title,
.registration-wrapper .registration-aside-subtitle {
    color: var(--o2-blue) !important;
}

.registration-wrapper .registration-aside-title {
    font-size: 30px !important;
}

.registration-wrapper .registration-aside-subtitle {
    font-size: 14px !important;
}

/* ---------- Right side: O2 blue like the retail portal ---------- */
.registration-wrapper .registration-right {
    background: var(--o2-blue);
}

.registration-wrapper .registration-logo-center img {
    filter: none;
}

.registration-wrapper .registration-language-option {
    color: rgba(255, 255, 255, 0.75);
}

.registration-wrapper .registration-language-option:hover,
.registration-wrapper .registration-language-option:focus,
.registration-wrapper .registration-language-option.active {
    color: #ffffff;
}

.registration-wrapper .registration-language-option:not(:last-child)::after {
    color: rgba(255, 255, 255, 0.5);
}

/* ---------- White form card ---------- */
.registration-wrapper .form-card {
    background-color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.registration-wrapper .form-group label,
.registration-wrapper .checkbox-group label {
    color: var(--o2-text);
    font-weight: 600;
}

.registration-wrapper .password-info {
    color: #5a6a8f;
}

/* Light-grey filled inputs, no black outline */
.registration-wrapper .form-group input,
.registration-wrapper .form-group select {
    background-color: var(--o2-field-bg);
    border: 1px solid transparent;
    border-radius: 3px;
}

.registration-wrapper .form-group input:focus,
.registration-wrapper .form-group select:focus {
    background-color: #ffffff;
    border-color: var(--o2-blue);
    box-shadow: 0 0 0 3px rgba(0, 80, 255, 0.15);
}

.registration-wrapper .form-group.has-error input,
.registration-wrapper .form-group.has-error select {
    border-color: #dc3545;
}

.registration-wrapper .checkbox-group input[type="checkbox"] {
    accent-color: var(--o2-blue);
}

/* ---------- Blue submit button ---------- */
.registration-wrapper .submit-button,
.registration-wrapper .success-button-primary {
    background: var(--o2-blue);
    box-shadow: none;
    border-radius: 3px;
}

.registration-wrapper .submit-button:hover:not(:disabled),
.registration-wrapper .success-button-primary:hover {
    background: var(--o2-blue-dark);
    opacity: 1;
    box-shadow: none;
    transform: none;
}

/* ---------- Footer on blue ---------- */
.registration-wrapper .registration-footer {
    color: rgba(255, 255, 255, 0.85);
}