:root {
    /********************************************************
    * COMPANY LOGO
    *********************************************************/
    --company-logo-img-url: url("https://uploads.pingone.asia/environments/395c4a97-bf03-45fb-bc58-9498e67fca58/images/25c83c16-446a-46d5-8ba5-c53398bf005a_e5b5eed0-4b7b-4bff-8e75-a478266d6984_original.png");
    --company-logo-max-height: 65px;
  
    /********************************************************
    * PAGE BACKGROUND 
    *********************************************************/
    --page-background-image-url: none;
    --page-background-colour: #f7FAFC !important;
    --page-background-size: cover;
    --page-background-repeat: no-repeat;
  
    /********************************************************
    * CARD
    *********************************************************/
    --card-border-radius: 5px !important;
    --card-border: none !important;
    --card-box-shadow: 0 0px 20px 0px rgba(121, 128, 135, 0.20) !important;
  
    /********************************************************
    * CARD BODY
    *********************************************************/
    --card-body-background-color: rgb(255, 255, 255);
    --card-body-font-family: Calibri, sans-serif;
    --card-body-border-radius: 5px !important;
  
    /********************************************************
    * BODY TEXT
    *********************************************************/
    --body-text-font-size: 1rem;
    --body-text-line-height: 150%;
    /* HEADING FONT COLOUR (HEX) */
    --body-text-color: #393A3B !important;
  
    /********************************************************
    * HEADINGS
    *********************************************************/
    --heading-text-weight: bold;
    --heading-font-size: 1.5rem;
    --heading-line-height: 130%;
    /* HEADING FONT COLOUR (HEX) */
    --heading-text-color: #0B253F;
  
    /********************************************************
    * PLACEHOLDER TEXT
    *********************************************************/
    --placeholder-font-weight: 400 !important;
    --placeholder-font-size: 1rem !important;
    --placeholder-line-height: 130%;
    --placeholder-padding: 5px 10px !important;
    /* PLACEHOLDER FONT COLOUR (HEX) */
    --placeholder-font-color: #757678 !important;
  
    /********************************************************
    * INPUT LABEL TEXT
    *********************************************************/
    --input-label-font-size: 0.875rem !important;
    --input-label-line-height: 150%;
    /* PLACEHOLDER FONT COLOUR (HEX) */
    --input-label-font-color: #575859 !important;
  
  
    /********************************************************
    * INPUT CHECKBOX
    *********************************************************/
    --input-checkbox-font-size: 16px !important;
    --input-checkbox-border-radius: 2px !important;
    --input-checkbox-border: 1px solid #D2D3D4 !important;
    --input-checkbox-border-hover: 1px solid #505152 !important;
    --input-checkbox-border-selected: 1px solid #505152 !important;
    --input-checkbox-background: 1px solid #F7F9FA !important;
  
    /********************************************************
    * TEXT FONT COLORS
    *********************************************************/
  
    /*  ERROR FONT COLOR  */
    --text-color-error: rgb(163, 19, 0);
  
    /*  LABEL MANDATORY COLOR (HEX)  */
    --text-color-label-mandatory: #BB4A4C;
  
    /********************************************************
    * FORM ATTRIBUTES
    *********************************************************/
    --form-border-radius: 5px;
    --default-border-color: #B9BBBD;
    --active-border-color:  #4A6D90;
  
    /********************************************************
    * BUTTON ATTRIBUTES
    *********************************************************/
  
    /*  BUTTON FONT COLOR  */
    --button-primary-text-color:  #FFFFFF;
  
    /*  BUTTON BACKGROUND COLOR (HEX)  */
    --button-primary-background-color:  #0B253F;
  
    /*  BUTTON BACKGROUND COLOR HOVER (HEX)  */
    --button-primary-hover-background-color: #4A6D90;
  
    /*  BUTTON BACKGROUND COLOR DISABLED (HEX)  */
    --button-primary-disabled-background-color:  #EBECED;
  
    /*  BUTTON FONT COLOR  */
    --button-secondary-text-color: #0B253F;
  
    /*  BUTTON BACKGROUND COLOR (HEX)  */
    --button-secondary-background-color:   #FFFFFF;
  
    /*  BUTTON BACKGROUND COLOR HOVER (HEX)  */
    --button-secondary-hover-background-color: #DBE6F0;
  
    /*  BUTTON BACKGROUND COLOR DISABLED (HEX)  */
    --button-secondary-disabled-background-color:  #EBECED;
    
    /* LINK BUTTON FONT COLOR (RGB)  */
    --link-button-primary-color: #393A3B;
  
    /*  BUTTON HOVER ALPHA  */
    --button-hover-alpha: 0.70;
  
    /*  BUTTON ACTIVE ALPHA  */
    --button-active-alpha: 0.80;
  
    /*  BUTTON DISABLED ALPHA  */
    --button-disabled-alpha: 0.65;
  
    /*  BUTTON FONT WEIGHT  */
    --button-primary-text-weight: 600;
  
    /*  BUTTON FONT WEIGHT  */
    --button-secondary-text-weight: 600;
    
    /********************************************************
    * ACTIVITY INDICATOR & BUTTON SPINNER COLOR
    *********************************************************/
  
    --activity-indicator-color: rgb(68, 98, 237);
  
    --polling-indicator-color: rgb(68, 98, 237);
  
    /********************************************************
    * APPLYING TEXT COLOR - DO NOT CHANGE
    *********************************************************/
    /* H1,H2, H3, Body text color */
    --bs-body-color: rgb(var(--text-color-main)) !important;
    --bs-danger-rgb: var(--text-color-error);
  
  }
  
  /********************************************************
  * CLASSES BELOW ARE DERIVED FROM VALUES ABOVE
  * DO NOT CHANGE UNLESS YOU HAVE CSS 'SKILLZ' :)
  *********************************************************/
  
  /*  COMPANY LOGO  */
  .companyLogo {
    content: var(--company-logo-img-url) !important;
    height: var(--company-logo-max-height) !important;
    width: auto !important;
  }
  
  /*  BACKGROUND IMAGE  */
  div.bg-light {
    background-image: var(--page-background-image-url);
    background-size: var(--page-background-colour);
    background-repeat: var(--page-background-size);
    background-color: var(--background-color) !important;
  }
  
   /*  CARD OUTTER  */
  .card {
    border-radius: var(--card-border-radius) !important;
    border: var(--card-border) !important;
    box-shadow: var(--card-box-shadow) !important;
  }
  
  /*  CARD FONT & COLOR  */
  .card-body {
    background-color: rgb(var(--card-body-background-color)) !important;
    border-radius: var(--card-body-border-radius) !important;
    font-family: var(--card-body-font-family) !important; 
  }
  
  /*  CARD FONT & COLOR  */
  .body-text {
    font-size: var(--body-text-font-size) !important;
    color: var(--body-text-color) !important;
    line-height: var(--body-text-line-height) !important;
  }
  
  /*  HEADING TEXT  */
  h1, h2, h3, h4 {
    color: rgb(var(--heading-text-color)) !important;
    font-weight: var(--heading-text-weight) !important;
    font-size: var(--heading-font-size) !important;
    line-height: var(--heading-line-height) !important;
  }
  
  /* PLACEHOLDER LABEL */
  .placeholder-label {
    line-height: var(--placeholder-line-height);
    color: var(--placeholder-font-color) !important;
    font-size: var(--placeholder-font-size) !important;
    padding: var(--placeholder-padding) !important;
    font-weight: var(--placeholder-font-weight) !important;
  }
  
  /* INPUT LABEL */
  .input-label{
    color: var(--input-label-font-color) !important;
    line-height: var(--input-label-line-height) !important;
    font-size: var(--input-label-font-size) !important;
  }
  
  /* TEXT MANDATORY*/
  .label-mandatory{
    color: var(--text-color-label-mandatory) !important;
  }
  
  /* HORIZONTAL BUTTONS */
  .center-button{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
  }
  
  /* PASSWORD TOGGLE */
  .passwordToggle{
    margin: 0 0 0 0 !important
  }

  /* ERROR/ALERT CIRCLE  */
  .mdi-alert-circle::before {
    padding-right: 3px !important;
  }
  
  /*  FORM CONTROL COLOR  */
  .form-control{
    color: var(--text-color-primary) !important;
    border-color: var(--default-border-color) !important;
    border-radius: var(--form-border-radius) !important;
  }
  
    /*  FORM CONTROL FOCUS COLOR  */
  .form-control:focus {
    color: var(--text-color-primary) !important;
    border-radius: var(--form-border-radius) !important;
    border-color: var(--active-border-color) !important;
    box-shadow: 0 0 0 0rem !important;
  }
  
  /*  CHECKBOX DEFAULT  */
  .form-check-input{
    font-size: var(--input-checkbox-font-size) !important;
    border-radius: var(--input-checkbox-border-radius) !important;
    border: var(--input-checkbox-border) !important;
    background-color: var(--input-checkbox-background) !important;
  }
  
  /*  CHECKBOX DEFAULT  */
  .form-check-label{
    font-size: var(--input-checkbox-font-size) !important;
    /*padding: 0 0 0 10px; */
  }
  
  /*  CHECKBOX HOVER  */
  .form-check-input:hover{
    border: var(--input-checkbox-border-hover) !important;
  }
  
  /*  CHECKBOX CHECKED  */
  .form-check-input:checked{
    border: var(--input-checkbox-border-hover) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
  }
  
  /*  ERROR MESSAGE PARAGRAPH  */
  .card .text-danger {
    color: var(--text-color-error) !important;
  }
  
  .form-floating > .form-control, .form-floating > .form-select {
    height:calc(1em + 20px) !important;
  }
  
  .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
  }
  
  .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    opacity: 0 !important;
  }
  
  .form-floating > label {
    padding: 7px 10px !important;
  }
  
  
  /*  PRIMARY BUTTON  */
  .btn-primary {
    /*  font color  */
    --bs-btn-color: var(--button-primary-text-color) !important;
    /*  font color when hovering  */
    --bs-btn-hover-color: var(--button-primary-text-color) !important;
    /*  border color  */
    --bs-btn-border-color: var(--button-primary-background-color) !important;
    /*  background color  */
    --bs-btn-bg: var(--button-primary-background-color) !important;
    /*  background color when hovering  */
    --bs-btn-hover-bg: var(--button-primary-hover-background-color) !important;
    /*  background color when active  */
    --bs-btn-active-bg: var(--button-primary-background-color) !important;
    /*  background color when disabled  */
    --bs-btn-disabled-bg: var(--button-primary-disabled-background-color) !important;
    background-color: var(--button-primary-background-color) !important;
    border-color: var(--button-primary-background-color) !important;
    border-radius: 5px !important;
    color: var(--button-primary-text-color) !important;
    font-weight: var(--button-primary-text-weight) !important;
    text-transform: uppercase !important;
  }
  
  /*  PRIMARY BUTTON DISABLED */
  .btn-primary:disabled {
    background-color: #EBECED !important;
    border-color:  #EBECED !important;
    color:  #575859 !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
  }
  
  /*  PRIMARY BUTTON HOVER */
  .btn-primary:hover {
    background-color: var(--button-primary-hover-background-color) !important;
    border-color: var(--button-primary-hover-background-color) !important;
    color: var(--button-primary-text-color) !important;
    text-transform: uppercase !important;
  }
  
  
  /*  SECONDARY BUTTON */
  .btn-outline-secondary {
    /*  font color  */
    --bs-btn-color: var(--button-secondary-text-color) !important;
    /*  font color when hovering  */
    --bs-btn-hover-color: var(--button-secondary-text-color) !important;
    /*  border color  */
    --bs-btn-border-color: var(--button-secondary-background-color) !important;
    /*  background color  */
    --bs-btn-bg: var(--button-secondary-background-color) !important;
    /*  background color when hovering  */
    --bs-btn-hover-bg: var(--button-secondary-hover-background-color) !important;
    /*  background color when active  */
    --bs-btn-active-bg: var(--button-secondary-background-color) !important;
    /*  background color when disabled  */
    --bs-btn-disabled-bg: var(--button-secondary-disabled-background-color) !important;
    background-color: var(--button-secondary-background-color) !important;
    border-color: var(--button-primary-background-color) !important;
    border-radius: 5px !important;
    color: var(--button-secondary-text-color) !important;
    font-weight: var(--button-secondary-text-weight) !important;
    text-transform: uppercase !important;
  }
  
  /*  SECONDARY BUTTON HOVER */
  .btn-outline-secondary:hover {
    background-color: var(--button-secondary-hover-background-color) !important;
    border-color: var(--button-secondary-hover-background-color) !important;
    text-transform: uppercase !important;
  }
  
  /*  LINK BUTTON  */
  .btn-link {
    /*  button font color  */
    --bs-btn-color: rgb(var(--link-button-primary-color)) !important;
    /*  button font color when active  */
    --bs-btn-active-color: rgba(var(--link-button-primary-color), var(--button-active-alpha)) !important;
    /*  button font color when hovering  */
    --bs-btn-hover-color: rgba(var(--link-button-primary-color), var(--button-hover-alpha)) !important;
    /*  button font color when disabled  */
    --bs-btn-disabled-color: rgba(var(--link-button-primary-color), var(--button-disabled-alpha)) !important;
    color: var(--link-button-primary-color) !important;
    padding: 0 0 10px 0 !important;
  }
  .btn-link-info {
    /*  button font color  */
    --bs-btn-color: rgb(var(--link-button-primary-color)) !important;
    /*  button font color when active  */
    --bs-btn-active-color: rgba(var(--link-button-primary-color), var(--button-active-alpha)) !important;
    /*  button font color when hovering  */
    --bs-btn-hover-color: rgba(var(--link-button-primary-color), var(--button-hover-alpha)) !important;
    /*  button font color when disabled  */
    --bs-btn-disabled-color: rgba(var(--link-button-primary-color), var(--button-disabled-alpha)) !important;
    color: var(--link-button-primary-color) !important;
    padding: 0 0 0 0 !important;
  }
  /*  BUTTON MARGIN */
  .btn{
    margin: 0 15px 0 15px;
  }
  
  /*  POLLING INDICATORS  */
  .css-11k6vsm,
  .css-17zi2ag,
  .css-139roxj {
  /* width: 20px; */
  /* height: 20px; */
  /* animation-duration: 0.75s; */
  /*  circle background color  */
  background-color: var(--polling-indicator-color) !important;
  }
  
  /*  BUTTON ACTIVITY INDICATOR  */
  .css-sw2ho0 {
  /*  spinning circle color  */
  --primary-color: var(--activity-indicator-color) !important;
  }
  
  .branding-template-link-container {
    text-align: center;
  }
  
  .padding-component--top-lg {
    padding-top: 25px;
  }
  
  .text-block {
    font-size: 15px !important; 
  }
  
  /* Hide the default show password icon for all browsers */
  input[type="password"]::-ms-reveal,
  input[type="password"]::-ms-clear,
  input[type="password"]::-webkit-credentials-auto-fill-button,
  input[type="password"]::-webkit-credentials-auto-fill-button {
      display: none;
  }

   .devicename {
    color: #393A3B !important;
    font-size: 16px !important;
    line-height: 150% !important;
    font-family: Calibri, sans-serif !important;
    font-weight: bold;
}

.devicedescription {
  color: #393A3B !important;
  font-size: 16px !important;
  line-height: 150% !important;
  font-family: Calibri, sans-serif !important;
}

.mfaButton {
  border-radius: 4px !important;
  margin: 0 !important;
}

.alertBox{
  display: flex;
  padding: 8px 16px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 4px;
  border: 1px solid var(--Feedback-Information-500, #0A6ED1);
  background: var(--Feedback-Information-50, #F5FAFF);  
  font-size: 14px !important;
  line-height: 150% !important;
  margin-bottom: 32px;

}