/*
This is an example css file to show how to modify some of the usual things in greenID Hosted, such as fonts and colours.

Customers can use this as a starting point for making the Hosted pages fit their brand.

None of the items in this file are compulsory - they are examples only.  Remove things that you do not need.

There are many other customisations that can be made.
Inspecting the website will allow you to see which styles to override.

The numbered comments in this file refer to screenshots in the documentation
*/
/* 0: Provide a link to GreenId css. 
Note: For greenID Web with document validation and facial biometrics, we will use greenid-mobile.css.*/
@import url(https://simpleui-au.vixverify.com/df/assets/stylesheets/greenid-mobile.css);

/* 1: Font family */
/* Maybe you want to use a font that won't be on user devices by default?
   Using google font api is one way to do it.  Or you can import fonts some other way */
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&family=Gluten&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;800&display=swap);

/* 2: Background colours */
/* body margins may need adjustment if you want to use a different colour on your banner, to remove a white border */
body {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}
/* 3: Background colours */
/* If you changed the page footer colour, it might look better to also change the body background to match */
body {
    background-color: #f5f5f5;
}

/* 4: Background colours */
/* If you want a different colour in the banner, you may have to adjust the logo padding as well as the colour.
     The logo src and size will be set via greenID settings. 
     Url: https://www.datocms-assets.com/28619/1606456907-bankvic-logo.svg */
#greenid-hosted-logo {
    padding: 12px 30px 12px 16px;
    background: #ffffff;
}

/* 5: Background colours */
/* Page footer colour */
#greenid-hosted-powered-by-gbg {
    background: #ffffff;
    padding-top: 20px;
}

/* 6: Font family */
/* 6: Font colours */
/* Main headings colour and font family, font size */
#greenid-container #greenid-intro-content h1,
.greenid-so-content #greenid-container h1 strong,
.greenid-so-content #greenid-container h1,
.greenid-so-content #greenid-container h2,
.greenid-so-content #greenid-container h3,
.greenid-so-content #greenid-container h4
{
    color: #2b40c7;
    font-family: Metric, sans-serif;
    
}

/* 6: Font family */
/* If you alter the heading fonts, you might need to adjust font sizes depending on the family */
#greenid-container #greenid-intro-content h1,
.greenid-so-content #greenid-container h1 strong,
.greenid-so-content #greenid-container h1
{
    font-size: 50px;
}
.greenid-so-content #greenid-container h2
{
    font-size: 28px;
    color: #474747;
}

/* 7: Font family */
/* If you change the h1 font-family, you will need to redefine the strong font weight */
.greenid-so-content #greenid-container h1 strong
{
    font-weight: bold;
}

/* 8: Font colours */
/* Document selection items */
.greenid-so-content #greenid-container .greenid-so-content-select-item
{
    color: #474747;
}

/* 9: Font family */
/* 9: Font colours */
/* Body text colour and font */
#greenid-container,
.greenid-so-content #greenid-container .greenid-so-content-dropcap,
.greenid-so-content #greenid-container strong,
.greenid-so-content #greenid-container .checkbox.greenid-consent-font label,
.greenid-so-content #greenid-container .greenid-so-content-agree-label
{
  font-family: "Open Sans", sans-serif;
  color: #474747;
}

/* 10: Font family */
/* If you change the body text font-family, you will need to redefine the strong font weight */
.greenid-so-content #greenid-container strong
{
    font-weight: bold;
}

/* 11: Font family */
/* Document scan screens needs !important in the font-family */
#greenid-biometric-content [wsdk-container] *
{
    font-family: "Open Sans", sans-serif !important;
}

/* 12: Font family */
/* Button font */
.greenid-so-content #greenid-container .btn
{
    font-family: "Open Sans", sans-serif;
 	font-weight: bold;
    color: #2b40c7;
}

/* 13: button colours */
/* Primary button colour */
/* NT: Primary button is solid BankVic orange with white text */
.greenid-so-content #greenid-container .btn-primary,
.greenid-so-content #greenid-container[data-eq-state~="xsmall"] .btn-primary,
#greenid-biometric-content .greenid-so-content #greenid-container #webscanRoot .button.button--primary
{
	font-weight: bold;
	color: #ffffff;
    background-color: #ff774d;
    border-color: #ff774d;
}

/* NT: Default and cancel buttons to be blue border and text, white background */
.greenid-so-content #greenid-container .greenid-modal .btn-default,
.greenid-so-content #greenid-container #greenid-source-content #greenid-source-cancel.btn-default {
    background-color: white;
    color: #2b40c7;
    border: 1px solid #2b40c7;
}

/* NT: Hide dark green icon images */
.greenid-so-content #greenid-container .btn-back,
.greenid-so-content #greenid-container .btn-cancel {
    background-image: none;
}

/* 14: Font family */
/* 14: Font colours */
/* Modal 'waiting' screens */
.greenid-so-modal#greenid-wait-modal .modal-body
{
    font-family: "Open Sans", sans-serif;
    color: #474747;
}

/* 15: Font colours */
/* Hyperlink colours */
#greenid-container a:hover,
.greenid-so-content #greenid-container .checkbox label.consent a:hover {
   color: #2b40c7;
   text-decoration: underline;

}
#greenid-container a {
  color: #2b40c7;
  text-decoration: none;
}
#greenid-container a:visited {
    color: #551a8b;
}

/* 16: Font family */
/* 16: Font colours */
/* Fields styling, for data entry forms */
.greenid-so-content #greenid-container label
{
    font-family:  "Open Sans", sans-serif;
    color: #474747;
}

/* 17: button colours */
/* The iconography on data entry forms */
.glyphicon
{
    color: #2b40c7;
}

/* 18: button colours */
/* The 'help' icons on data entry forms */
#greenid-container #greenid-source-header #greenid-source-title a .glyphicon,
#greenid-container .greenid-helpicon, #greenid-container .greenid-helpicon-alt
{
    color: #2b40c7;
}

/* 19: Font family */
/* Text in help tooltips */
.greenid-tooltip,
.greenid-modal
{
    font-family:  "Open Sans", sans-serif;
}


/* 20: Background colours */
/* Well is used on the first data entry screen, but also for decoration on the landing and exit pages */
.well
{
    background-color: #ffffff;
    border: 2px solid #C4C4C4;
    border-radius: 0;
}

/* 21: Background colours */
/* If you want to completely replace the white background of all screens, uncomment the following */
/*
.greenid-so-content,
#greenid-container,
#greenid-container .greenid-bg-white,
.greenid-so-content #greenid-container .btn-cancel,
.greenid-so-content #greenid-container .btn-back,
#greenid-biometric-content [wsdk-container] .light-inner-provider-container,
.greenid-modal .modal-content,
.greenid-modal-backdrop.white,
#greenid-container .dropdown-menu
{
    background-color: lightyellow;
}
*/