:root {
    --margin: 1rem;
    --vertical-spacing: 2.5rem;
    --s-spacing: 1rem;
    --m-spacing: 1.2rem;
    --l-spacing: 1.6rem;
    --xl-spacing: 2.2rem;
    --flow: 1.5em;
    --secondary-nav-height: 32px;
    --nav-logo-height: 24px;
    --divider-height: 4px;
    --nav-height: 66px;
    --combined-nav-height: calc(var(--secondary-nav-height) + var(--divider-height) + var(--nav-height));
    --colour-blue: #3fa7d9;
    --colour-green: #03cf9e;
    --colour-lavender: #957dff;
    --colour-lavender-mid: #7d7099;
    --colour-orange: #f87a63;
    --colour-pink: #b86bb2;
    --colour-purple: #301b5d;
    --colour-purple-dark: #301b5d;
    --colour-purple-dark-25: rgba(48,27,93,.25);
    --colour-green-light: #dbfef6;
    --colour-lavender-light: #f2efff;
    --colour-orange-light: #feebe8;
    --colour-lilac-light: #f1e1f0;
    --colour-blue-light: #d9edf7;
    --colour-violet-light: #eae5ff;
    --colour-indigo-light: #eae7ef;
    --colour-purple-light: #e7ccf2;
    --colour-gradient-line: linear-gradient(90deg,var(--colour-orange) 0%,var(--colour-lavender) 100%);
    --colour-white: #fff;
    --colour-black: #120728;
    --colour-grey: #999;
    --colour-grey-light: #c3c3c3;
    --colour-background: var(--colour-white);
    --colour-heading: #200d3f;
    --colour-paragraph: #434049;
    --colour-error: #eb0000;
    --colour-link: #6542ff;
    --colour-menu-link: var(--colour-purple-dark);
    --divider-colour-orange: var(--colour-orange);
    --divider-colour-lavender: var(--colour-lavender);
    --font-family-body: sans-serif;
    --font-family-heading: sans-serif;
    --font-family-link: sans-serif;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-size-base: 1rem;
    --font-size-s: 14px;
    --font-size-xs: 12px;
    --font-size-xl: 2.1rem;
    --font-size-xxl: 2.4rem;
    --font-size-p: var(--font-size-base);
    --font-size-h6: 1.1rem;
    --font-size-h5: 1.2rem;
    --font-size-h4: 1.3rem;
    --font-size-h3: 1.4rem;
    --font-size-h2: 1.5rem;
    --font-size-h1: 1.9rem;
    --line-height-body: 172%;
    --line-height-h6: 148%;
    --line-height-h5: 140%;
    --line-height-h4: 132%;
    --line-height-h3: 128%;
    --line-height-h2: 116%;
    --line-height-h1: 110%;
    --line-height-s: 160%;
    --line-height-xs: 140%;
    --line-height-xl: 108%;
    --line-height-xxl: 104%;
    --button-colour: var(--colour-purple-dark);
    --border-radius: 12px;
    --box-shadow: 0 0 6px -3px rgba(0,0,0,.5);
    --background-colour: whitesmoke;
}

body {
    margin-top: 65px;
    background: var(--background-colour);
}

input.form-control {
    height:4rem;
}

.btn-secondary  {
    background-color: var(--colour-purple);
    border-color: var(--colour-purple-dark);
    color: var(--colour-white);
}

.btn-secondary:hover {
    background-color: var(--colour-purple-dark);
    color: var(--colour-white);
}

.btn-primary {
    background-color: var(--colour-green);
    border-color: var(--colour-green);
    color: var(--colour-white);
}

.btn-primary:hover {
    background-color: var(--colour-green);
    color: var(--colour-white);
}

.navbar.navbar-inverse {
    background-color: var(--colour-purple-dark) !important;
}

.navbar-inverse .navbar-brand {
    color: white;
}

.navbar-header {
    position: relative;
    top: -4px;
}

.navbar-brand > .icon-banner {
    position: relative;
    top: -2px;
    display: inline;
    height: 32px;
    border-radius: 20%;
}

.icon {
    position: relative;
    top: -10px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    padding: 10px;
    background: white;
}

.logged-out iframe {
    display: none;
    width: 0;
    height: 0;
}

.page-consent .client-logo {
    float: left;
}

.page-consent .client-logo img {
    width: 80px;
    height: 80px;
}

.page-consent .consent-buttons {
    margin-top: 25px;
}

.page-consent .consent-form .consent-scopecheck {
    display: inline-block;
    margin-right: 5px;
}

.page-consent .consent-form .consent-description {
    margin-left: 25px;
}

.page-consent .consent-form .consent-description label {
    font-weight: normal;
}

.page-consent .consent-form .consent-remember {
    padding-left: 16px;
}

.grants .page-header {
    margin-bottom: 10px;
}

.grants .grant {
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid lightgray;
}

.grants .grant img {
    width: 100px;
    height: 100px;
}

.grants .grant .clientname {
    font-size: 140%;
    font-weight: bold;
}

.grants .grant .granttype {
    font-size: 120%;
    font-weight: bold;
}

.grants .grant .created {
    font-size: 120%;
    font-weight: bold;
}

.grants .grant .expires {
    font-size: 120%;
    font-weight: bold;
}

.grants .grant li {
    list-style-type: none;
    display: inline;
}

.grants .grant li:after {
    content: ', ';
}

.grants .grant li:last-child:after {
    content: '';
}

.card-header {
    font-weight: 600;
    margin-bottom: .5rem;
}

.list-group-item-action {
    border-radius: 0 !important;
    cursor: pointer;
}

#account-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 500px;
}

.mfa-selection {
    margin: 1em 0 1em;
    display: flex;
    flex-direction: column;
}

.mfa-selection .btn {
    margin: 1.5em 0;
    display: flex;
    flex-direction: row;
    padding-top: 1em;
    padding-bottom: 1em;
    align-items:center;
}

.mfa-selection .btn svg {
    width: 24px;
    height: 24px;
    margin-right: 2em;
    margin-top:0.5em;
    fill: var(--colour-white);
}

.subtext {
    display: flex;
    flex-direction: row;
}

.subtext svg {
    width: 24px;
    height: 24px;
    margin-right: 1em;
}

.field-validation-error {
    color: var(--colour-error);
}

.me-1 {
    margin-right: 1rem;
}
.me-2 {
    margin-right: 2rem;
}
.me-3 {
    margin-right: 3rem;
}

.ms-1 {
    margin-left: 1rem;
}

.ms-2 {
    margin-left: 2rem;
}

.ms-3 {
    margin-left: 3rem;
}

label {
    font-weight: 500 !important;
    color: gray;
}