:root
{
    /*Main Colour Scheme*/
    --default-light: #FAFAFA;
    --default-light-blue: #4C98CF;
    --default-blue: #0071AE;
    --default-medium-blue: #004468;
    --default-dark-blue: #003552;
    --default-light-grey: #DCDCDC;
    --default-grey: #45494A;
    --default-dark-grey: #2B2E2E;
    --default-orange: #FF8B00;
    --default-green: #71AE00;
    --default-white: #FFFFFF;
    --default-black: #000000;
    --default-top-toolbar-colour: #54595A;
    --default-tab-button-colour: #E4E4E4;

    /*Inputs*/
    --input-colour: #F1F1F1;
    --input-placeholder: #8E8E8E;
    --responsive-default-blue: var(--default-blue);

    /*Responsive Colours*/
    --responsive-default-grey: var(--default-grey);
    --responsive-light-grey: var(--default-light-grey);
    --text-colour: var(--default-black);

    --responsive-blue-button-text: rgba(255, 255, 255, 1);
    --responsive-alt-button: #DADADA;


/*----------------DEFAULT CUSTOM STYLES---------------*/
    /*Headers*/
    --header-background: var(--default-grey);
    --header-border: none;
    --header-logo-width: 140px;
    --header-logo-height: auto;
    --header-logo-margin-left: initial;
    --header-logo-margin-top: initial;
    --dashboard-header-icon-colour: var(--default-white);

    /*Modals*/
    --default-success: #00AE94;
    --default-success-transparent: rgba(0,174,148,0.2);
    --default-info: #549FE0;
    --default-info-transparent: rgba(84,159,224,0.2);
    --default-warning: #EF7339;
    --default-warning-transparent: rgba(239,115,57,0.2);
    --default-error: #E6484E;
    --default-error-transparent: rgba(230,72,78,0.2);
    --challenge-ussd-counter-colour: var(--default-blue);

    /*Signing Option Modals*/
    --header-circle-background: rgba(0, 113, 174, 0.2);
    --header-circle-icon: var(--default-blue);
    --options-modal-primary-button: var(--default-blue);
    --options-modal-primary-button-text: var(--default-white);
    --options-modal-secondary-button: var(--default-blue);
    --options-modal-secondary-button-text: var(--default-blue);
    --tab-content-colour: var(--default-light);
    --tab-button-active-colour: var(--default-blue);
    --tab-button-active-border: 4px solid var(--default-blue);
    --tab-button: var(--default-tab-button-colour);
    --tab-button-width: 25%;

    /*Loaders*/
    --saved-loader-colour: var(--default-blue);
    --small-loader-colour: var(--default-blue);

    /*Tutorial Cards*/
    --card-header: var(--default-blue);
    --notification-lighter-colour: #0083C2;
    --card-button: var(--default-blue);
    --card-button-text: var(--default-white);
    --alt-card-button: var(--default-light);
    --alt-card-button-text: var(--default-black);
    --card-link-button: var(--default-white);

    /*Buttons styles*/
    --header-button-background: var(--default-blue);
    --header-button-text: var(--default-white);
    --header-button-dropdown-background: var(--default-blue);
    --header-button-dropdown-text: var(--default-white);

    /*Welcome Covers*/
    --cover-button-colour: var(--default-blue);
    --cover-button-text: var(--default-white);
    --tooltip-colour: var(--default-blue);
    --tooltip-text-colour: var(--default-white);
    --cover-details-block-background: var(--default-blue);
    --cover-details-block-text: var(--default-white);
    --cover-footer-colour: var(--default-grey);
    --cover-heading-text: var(--default-blue);
    --multi-doc-icon-colour: var(--default-blue);
    --document-security-background-colour: var(--default-blue);
    --document-security-icon-display: block;
    --document-security-logo-width: 200px;
    --document-security-logo-margin-bottom: initial;

    /*Done Overlay*/
    --done-button-background-colour: var(--default-blue);
    --done-button-text-colour: var(--default-white);

    /*Viewer Styles*/
    --top-toolbar: var(--default-top-toolbar-colour);
    --top-toolbar-active: var(--default-dark-blue);
    --top-toolbar-toggled: var(--default-blue);
    --top-toolbar-dropdown: var(--default-blue);
    --top-toolbar-dropdown-hover: #0084CB;
    --top-toolbar-dropdown-active: var(--default-light-blue);
    --top-toolbar-dropdown-toggled: var(--default-dark-grey);
    --top-toolbar-button-text-colour: var(--default-white);

    --right-toolbar-closed: var(--default-grey);
    --right-toolbar-open: var(--default-blue);
    --right-button: var(--default-blue);
    --right-button-closed: var(--default-grey);
    --right-active-button-closed: var(--default-light-blue);
    --right-active-button: var(--default-dark-blue);
    --right-toolbar-button-text-colour: var(--default-white);
    --overview-heading-colour: var(--default-blue);

    --right-toolbar-toggle-button: var(--default-blue);
    --right-toolbar-toggle-button-open: var(--default-light-blue);

    --floating-buttons: var(--default-blue);

    --burger-menu-icon: var(--default-blue);
    --left-toolbar-header-buttons: var(--default-blue);
}

button
{
    border: none;
    outline: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: none;
}

.roundedButton
{
    padding: 10px 20px;
    min-width: 110px;
    min-height: 45px;
    border-radius: 2rem;
    text-decoration: none;
}

.roundedButton:hover, .roundedButton:focus
{
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
}

.roundedButton:active
{
    box-shadow: none;
}

.blueButton
{
    background-color: var(--responsive-default-blue);
    color: var(--responsive-blue-button-text);
}

.blueButton:disabled, .altButton:disabled, .lightGreyButton:disabled, .orangeButton:disabled, .greenButton:disabled
{
    background-color: var(--responsive-default-grey);
    box-shadow: none;
    cursor: default;
}

.altButton
{
    background-color: var(--responsive-alt-button);
    color: var(--default-black);
}

.greyButton
{
    background-color: var(--default-grey);
    color: var(--default-white);
}

.greyButton:disabled
{
    background-color: var(--default-light-grey);
    box-shadow: none;
    cursor: wait;
}

.lightGreyButton
{
    background-color: var(--default-light-grey);
    color: var(--default-black);
}

.darkGreyButton
{
    background-color: var(--default-dark-grey);
    color: var(--default-white);
}

.darkBlueButton
{
    background-color: var(--default-dark-blue);
    color: var(--default-white);
}

.orangeButton
{
    background-color: var(--default-orange);
    color: var(--default-white);
}

.greenButton
{
    background-color: var(--default-green);
    color: var(--default-white);
}

.outlineButton
{
    background-color: transparent;
    border: 2px solid var(--default-white);
    padding: 15px;
    color: var(--default-white);
}

.outlineButton:hover
{
    background-color: var(--default-blue);
    border: 2px solid var(--default-blue);
    box-shadow: none;
    color: var(--default-white);
}

.outlineButton:disabled, .blueOutlineButton:disabled, .orangeOutlineButton:disabled, .greenOutlineButton:disabled
{
    color: var(--responsive-impression-grey);
    border: 2px solid var(--responsive-impression-grey);
    box-shadow: none;
    cursor: wait;
}

.outlineButton:disabled:hover, .blueOutlineButton:disabled:hover, .orangeOutlineButton:disabled:hover, .greenOutlineButton:disabled:hover
{
    background-color: transparent;
    color: var(--responsive-impression-grey);
    border: 2px solid var(--responsive-impression-grey);
    box-shadow: none;
    cursor: wait;
}

.blueOutlineButton
{
    background-color: transparent;
    border: 2px solid var(--responsive-impression-blue);
    padding: 15px;
    color: var(--responsive-impression-blue);
    box-shadow: none;
}

.blueOutlineButton:hover
{
    background-color: var(--default-blue);
    border: 2px solid var(--default-blue);
    box-shadow: none;
    color: var(--default-white);
}

.blueOutlineButton:focus
{
    box-shadow: none;
}

.greyOutlineButton
{
    background-color: transparent;
    border: 2px solid var(--default-grey);
    padding: 15px;
    color: var(--default-grey);
    box-shadow: none;
}

.greyOutlineButton:hover
{
    background-color: var(--default-grey);
    border: 2px solid var(--default-grey);
    box-shadow: none;
    color: var(--default-white);
}

.greyOutlineButton:focus
{
    box-shadow: none;
}

.greyOutlineButton:disabled
{
    color: var(--default-light-grey);
    border: 2px solid var(--default-light-grey);
    box-shadow: none;
    cursor: wait;
}

.greyOutlineButton:disabled:hover
{
    background-color: transparent;
    color: var(--default-light-grey);
    border: 2px solid var(--default-light-grey);
    box-shadow: none;
    cursor: wait;
}

.orangeOutlineButton
{
    background-color: transparent;
    border: 2px solid var(--default-orange);
    padding: 15px;
    color: var(--default-orange);
    box-shadow: none;
}

.orangeOutlineButton:hover
{
    background-color: var(--default-orange);
    border: 2px solid var(--default-orange);
    box-shadow: none;
    color: var(--default-white);
}

.orangeOutlineButton:focus
{
    box-shadow: none;
}

.greenOutlineButton
{
    background-color: transparent;
    border: 2px solid var(--default-green);
    padding: 15px;
    color: var(--default-green);
    box-shadow: none;
}

.greenOutlineButton:hover
{
    background-color: var(--default-green);
    border: 2px solid var(--default-green);
    box-shadow: none;
    color: var(--default-white);
}

.greenOutlineButton:focus
{
    box-shadow: none;
}