/*** Variables **/
:root {
    --white: #ffffff;
    --black: #000000;
    --red: #F74B64;

    --purple-140: #52267D;
    --purple-100: #9452BA;
    --purple-20: #CAACDD;

    --grey-120: #605C64;

    --blue-140: #272E47;
    --blue-40: #B0B0DB;
    --blue-20: #EFEFF8;

    --pf-global--FontSize--xl: 36px;
    --pf-global--FontSize--md: 18px;
    --pf-global--FontSize--sm: 14px;

    --pf-global--LineHeight--xl: 34px;
    --pf-global--LineHeight--md: 26px;
    --pf-global--LineHeight--sm: 22px;

    --pf-global--FontWeight--normal: 400;
    --pf-global--FontWeight--semi-bold: 500;
    --pf-global--FontWeight--bold: 600;

    --pf-global--FontFamily--sans-serif: Inter, Arial, sans-serif;

    --ak-c-form-control-BorderColor: var(--blue-40);

    --pf-c-form--m-error--Color: #a94c3f;

    --pf-global--BorderRadius--sm: 5px;

    --pf-c-form-control--BackgroundColor: var(--white);
    --pf-c-form-control--BorderWidth: 2px;
    --pf-c-form-control--FontSize: 15px;
    --pf-c-form-control--LineHeight: 17px;
    --pf-c-form-control--BorderRadius: 5px;
    --pf-c-form-control--Height: 50px;
}
/*** General ***/
a,
.login-pf a {
    color: var(--purple-100);
}

a:hover,
.login-pf a:hover {
    color: var(--purple-100);
}

a:focus,
.login-pf a:focus {
    color: var(--purple-100);
    outline: var(--purple-100);
}

/*** Layout ***/
.login-pf {
    background: none !important;
}

.login-pf body {
    background-image: none;
    background-color: var(--white);
    background-size: cover;
    font-family: var(--pf-global--FontFamily--sans-serif);
    font-size: var(--pf-global--FontSize--md);
    font-weight: var(--pf-global--FontWeight--normal);
    line-height: var(--pf-global--LineHeight--md);
    color: var(--grey-120);

    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.login-pf-page {
    padding: 0;
    width: 400px;
    max-width: 1240px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 132px);
}

#kc-header {
    padding: 0;
    margin-bottom: 20px;
}
#kc-header-wrapper {
    display: flex;
    align-items: center;
    padding: 0;
    height: 140px;
    justify-content: center;
}
div.kc-logo-text {
    background-size: cover;
    background-image: url(../img/logo_trial.svg);
    background-repeat: no-repeat;
    height: 33px;
    width: 150px;
    margin: 0;
}

div.kc-logo-text span {
    display: none;
}

.login-pf-page .login-pf-header {
    display: none;
}

.login-pf-page .card-pf {
    width: 100%;
    padding: 0;
    background: #fff;
    margin: 0 auto;
    max-width: none;
    border-top: 0;
    box-shadow: 0 0 0;
    flex: auto;
}

#kc-header {
    color: black;
    height: 140px;
}

#kc-header-wrapper {
    font-size: 29px;
    text-transform: capitalize;
}

.login-pf-page-footer {
    height: 72px;
    margin: 60px auto 0 auto;
    color: var(--purple-20);
    border-top: 1px solid var(--purple-20);
    font-size: var(--pf-global--FontSize--sm);
    line-height: var(--pf-global--LineHeight--sm);
    display: flex;
    padding: 17px 0 33px 0;
    justify-content: flex-start;
    width: 1240px;
}
.login-pf-page-footer a {
    color: var(--purple-20);
}
.login-pf-page-footer .copyright {
    margin-right: 125px;
}
.login-pf-page-footer .mentions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 700px;
}

#kc-content {
    width: 100%;
    height: 100%;
}
#kc-content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#free-trial-registration-form {
    flex: auto;
    display: flex;
    align-items: center;
}

/*** Content ***/
.title {
    color: var(--black);
    font-size: var(--pf-global--FontSize--xl);
    font-weight: var(--pf-global--FontWeight--bold);
    line-height: var(--pf-global--LineHeight--xl);
    margin-bottom: 30px;
}
.lead {
    color: var(--grey-120);
    font-size: var(--pf-global--FontSize--md);
    font-weight: var(--pf-global--FontWeight--normal);
    line-height: var(--pf-global--LineHeight--md);
    margin-bottom: 30px;
}

blockquote {
    color: var(--black);
    font-size: var(--pf-global--FontSize--md);
    font-weight: var(--pf-global--FontWeight--bold);
    line-height: var(--pf-global--LineHeight--md);
    text-align: right;
    padding: 0;
    border-left: none;
}
blockquote p {
    color: var(--black)!important;
    margin-bottom: 5px;
}
blockquote p:before {
    content: '“';
}
blockquote p:after {
    content: '”';
}
blockquote footer {
    font-size: var(--pf-global--FontSize--md);
    font-weight: var(--pf-global--FontWeight--normal);
    line-height: var(--pf-global--LineHeight--md);
    color: var(--black)!important;
}
blockquote footer:before {
    content: "";
}
blockquote footer strong {
    font-weight: var(--pf-global--FontWeight--bold);
}

/*** Form ***/
.pf-c-form-control {
    --ak-c-form-control-BorderColor: #DFE1F0;

    --pf-c-form-control--BorderWidth: 2px;
    --pf-c-form-control--BackgroundColor: var(--white);
    --pf-c-form-control--BorderTopColor: #B0B0DB;
    --pf-c-form-control--BorderRightColor: #B0B0DB;
    --pf-c-form-control--BorderLeftColor: #B0B0DB;
    --pf-c-form-control--BorderBottomColor: #B0B0DB;
    --pf-c-form-control--placeholder--Color: #DFE1F0;
    --pf-c-form-control--FontSize: 15px;
    --pf-c-form-control--LineHeight: 17px;
    --pf-c-form-control--BorderRadius: 5px;
    --pf-c-form-control--Height: 50px;

    --pf-c-form-control--focus--PaddingBottom: 5px;

    font-weight: var(--pf-global--FontWeight--semi-bold);
    margin-top: 0;
    padding: 5px 20px;
}
.pf-c-form-control:focus,
.pf-c-form-control:hover {
    --pf-c-form-control--BorderTopColor: var(--purple-100);
    --pf-c-form-control--BorderRightColor: var(--purple-100);
    --pf-c-form-control--BorderLeftColor: var(--purple-100);
    --pf-c-form-control--BorderBottomColor: var(--purple-100);

    outline-color: var(--purple-100);
    outline-style: inherit;
}
.pf-c-form__label {
    --pf-c-form__label--Color: var(--blue-140);
    --pf-c-form__label--LineHeight: var(--pf-global--LineHeight--sm);
    --pf-c-form__label--FontSize: var(--pf-global--FontSize--sm);
    --pf-c-form__label--FontWeight: var(--pf-global--FontWeight--bold);

    margin: 5px 0;
    text-transform: capitalize;
    font-weight: var(--pf-c-form__label--FontWeight);
}

.form-group {
    margin-bottom: 30px;
}
.form-group .two-col-wrapper:first-child {
    padding-right: 10px;
}
.form-group .two-col-wrapper:not(:first-child) {
    padding-left: 10px;
}

.form-actions-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

/*** Select ***/
select.pf-c-form-control {
    padding: 5px 40px 5px 20px;
}
select.pf-c-form-control.pf-m-focus,
select.pf-c-form-control:focus {
    padding-bottom: 5px;
}

/*** Buttons ***/
.pf-c-button {
    --pf-c-button--PaddingTop: 14px;
    --pf-c-button--PaddingBottom: 14px;
    --pf-c-button--PaddingRight: 20px;
    --pf-c-button--PaddingLeft: 20px;
    --pf-c-button--LineHeight: 17px;
    --pf-c-button--FontWeight: 500;
    --pf-c-button--FontSize: 15px;
    --pf-c-button--BorderRadius: 5px;

    --pf-c-button--m-primary--Color: #ffffff;
    --pf-c-button--m-primary--BackgroundColor: var(--purple-100);
    --pf-c-button--m-primary--hover--Color: #ffffff;
    --pf-c-button--m-primary--hover--BackgroundColor: var(--purple-140);
    --pf-c-button--m-primary--active--Color: #ffffff;
    --pf-c-button--m-primary--active--BackgroundColor: var(--purple-140);
    --pf-c-button--m-primary--focus--Color: #ffffff;
    --pf-c-button--m-primary--focus--BackgroundColor: var(--purple-140);
    --pf-c-button--m-primary--disabled--Color: #ffffff;
    --pf-c-button--m-primary--disabled--BackgroundColor: var(--blue-40);

    --pf-c-button--m-secondary--BackgroundColor: var(--white);
    --pf-c-button--m-secondary--BorderColor: var(--purple-100);
    --pf-c-button--m-secondary--Color: var(--purple-100);
    --pf-c-button--m-secondary--hover--BackgroundColor: var(--white);
    --pf-c-button--m-secondary--hover--BorderColor: var(--purple-140);
    --pf-c-button--m-secondary--hover--Color: var(--purple-140);
    --pf-c-button--m-secondary--focus--BackgroundColor: var(--white);
    --pf-c-button--m-secondary--focus--BorderColor: var(--purple-140);
    --pf-c-button--m-secondary--focus--Color: var(--purple-140);
    --pf-c-button--m-secondary--active--BackgroundColor: var(--white);
    --pf-c-button--m-secondary--active--BorderColor: var(--purple-140);
    --pf-c-button--m-secondary--active--Color: var(--purple-140);
    --pf-c-button--BorderWidth: 2px;
    font-weight: bold;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.pf-c-button:disabled.pf-m-primary, .pf-c-button.pf-m-disabled.pf-m-primary {
    --pf-c-button--disabled--Color: var(--pf-c-button--m-primary--disabled--Color);
    --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-primary--disabled--BackgroundColor);
}
.pf-c-button:disabled.pf-m-secondary, .pf-c-button.pf-m-disabled.pf-m-secondary {
    --pf-c-button--disabled--Color: var(--blue-40);
    --pf-c-button--disabled--BackgroundColor: var(--white);
    --pf-c-button--disabled--BorderColor: var(--blue-40);
}

/*** Checkbox ***/
.form-horizontal .checkbox-option {
    height: 20px;
}

div.checkbox-text {
    padding-left: 0px;
}

.form-horizontal .checkbox-text{
    text-align: left;
}

/*** Progress bar ***/
progress[value] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    border: none;
    border-radius: 10px;

    width: 100%;
    height: 5px;

    background-color: var(--blue-20);
    color: var(--purple-100);

    position: relative;
    margin: 60px 0 0 0;
}


progress[value]::-webkit-progress-bar {
    background-color: var(--blue-20);
    border-radius: 10px;
}

progress[value]::-webkit-progress-value {
    background: var(--purple-100);
    border-radius: 10px;
}
progress[value]::-moz-progress-bar {
    background: var(--purple-100);
    border-radius: 10px;
}

.step-progress {
    width: 410px;
    text-align: center;
}
.progress-label {
    font-weight: bold;
    font-size: var(--pf-global--FontSize--sm);
    color: var(--blue-140);
}

/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

p[data-value]:after {
    content: attr(data-value) '%';
    position: absolute; right:0;
}

#confirmation-email {
    margin-top: -35px;
}

#confirmation-email img {
    margin-top: 50px;
}

#confirmation-email #info {
    width: 400px;
    margin: 40px auto 30px auto;
    font-size: var(--pf-global--FontSize--md);
}

#confirmation-email #no-email {
    color: var(--purple-100);
    font-size: var(--pf-global--FontSize--sm);
    margin-bottom: 35px;
}

#confirmation-email #resend-email {
    font-size: 16px;
    font-weight: bold;
    border: 1px solid;
    display: inline-block;
}

#confirmation-email #resend-email a {
    font-weight: bold;
}

input::placeholder {
    color: var(--pf-c-form-control--placeholder--Color);
}
#email-error-message {
    color: #F74B64;
    font-weight: bold;
    font-size: 14px;
}

#kc-form-buttons {
    text-align: center;
}
#kc-form-buttons input {
    width: auto;
    padding: 14px 20px;
    display: inline-block;
    border-radius: 5px;
    font-size: 15px;
}
.login-pf-settings {
    font-size: 14px;
}
#kc-form-options .checkbox {
    color: var(--blue-140);
}

.login-pf-settings a {
    font-weight: 600;
}

#kc-registration {
    font-size: 15px;
}

.trouble-log-in {
    color: var(--purple-100);
    margin-bottom: 30px;
}

.pf-c-form__helper-text.pf-m-error {
    color: #F74B64;
    font-size: 14px;
    font-weight: bold;
}