/*** 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: 1px;
    --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;
    max-width: 1240px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    height: 100%;
}

#kc-header {
    padding: 0;
    margin-bottom: 0;
}
#kc-header-wrapper {
    display: flex;
    align-items: center;
    padding: 0;
    height: 120px;
}
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 .login-pf-page-footer {
    height: 72px;
    margin-top: 30px;
    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;
}
.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;
    margin: 0;
}
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: var(--blue-40);

    --pf-c-form-control--BorderWidth: 1px;
    --pf-c-form-control--BackgroundColor: var(--white);
    --pf-c-form-control--BorderTopColor: var(--blue-40);
    --pf-c-form-control--BorderRightColor: var(--blue-40);
    --pf-c-form-control--BorderLeftColor: var(--blue-40);
    --pf-c-form-control--BorderBottomColor: var(--blue-40);
    --pf-c-form-control--placeholder--Color: var(--blue-40);
    --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);
    --pf-c-form-control--BorderWidth: 2px;
    padding: 5px 19px;

    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;
}

#kc-form-options .checkbox {
    color: #67768A;
}

/*** 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);
    font-size: 16px;
    font-weight: normal;
}
#email-error-message {
    color: #F74B64;
    font-weight: bold;
    font-size: 14px;
}

.select2-container.pf-c-form-control {
    padding: 0;
    border: 0;
}
.select2-container.pf-c-form-control.select2-container-active {
    --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);
    --pf-c-form-control--BorderWidth: 2px;
}
.select2-container.pf-c-form-control:hover .select2-choice > .select2-chosen, .select2-container.pf-c-form-control.select2-container-active .select2-choice > .select2-chosen {
    padding: 0 19px;
    line-height: 46px;
}
.select2-container.pf-c-form-control .select2-choice {
    font-weight: var(--pf-global--FontWeight--semi-bold);
    outline-color: var(--purple-100);
    background: var(--pf-c-form-control--BackgroundColor);
    border: solid var(--pf-c-form-control--BorderWidth) var(--ak-c-form-control-BorderColor);
    margin-top: 0;
    padding: 0;
    height: var(--pf-c-form-control--Height);
    text-overflow: ellipsis;

    font-size: var(--pf-c-form-control--FontSize);
    line-height: var(--pf-c-form-control--LineHeight);
    border-radius: var(--pf-c-form-control--BorderRadius);
}
.select2-container.select2-dropdown-open .select2-choice,
.select2-container.pf-c-form-control:hover .select2-choice,
.select2-container.pf-c-form-control:focus .select2-choice {
    border-color: var(--purple-100);
    color: var(--black);
}
.select2-container.pf-c-form-control .select2-choice > .select2-chosen {
    height: var(--pf-c-form-control--Height);
    line-height: 48px;
    padding: 0 20px;
    margin-right: 52px;
    text-overflow: ellipsis;
}

.select2-container.pf-c-form-control .select2-choice .select2-arrow {
    border: none;
    background: none;
    width: 52px
}
.select2-container.pf-c-form-control .select2-choice .select2-arrow b {
    position: absolute;
    top: 14px;
    right: 20px;
    width: 22px;
    height: 22px;
    background: transparent url('../icons/icon_arrow_down.svg') no-repeat !important;
}
.select2-container.pf-c-form-control:hover .select2-choice .select2-arrow b {
    background-image: url('../icons/icon_arrow_down_active.svg');
}
.select2-container.select2-dropdown-open.pf-c-form-control .select2-choice .select2-arrow b {
    background-image: url('../icons/icon_arrow_up_active.svg') !important;
}
.select2-container-active .select2-choice, .select2-container-active .select2-choices {
    box-shadow: none;
}

.select2-search {
    margin: 5px 0 10px;
}
.select2-search:after {
    content: " ";
    position: absolute;
    right: 20px;
    top: 14px;
    display: block;
    width: 22px;
    height: 22px;
    background: transparent url("../icons/icon_search.svg") no-repeat;
}
.select2-search input {
    position: static;
    background: var(--pf-c-form-control--BackgroundColor) !important;
    border: var(--pf-c-form-control--BorderWidth) solid var(--blue-40);
    box-sizing: border-box;
    border-radius: var(--pf-global--BorderRadius--sm);
    min-height: var(--pf-c-form-control--Height);
    height: var(--pf-c-form-control--Height);
    line-height: var(--pf-c-form-control--LineHeight);
    font-size: var(--pf-c-form-control--FontSize);

    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    margin: 0;
    padding: 5px 52px 5px 20px;
}
.select2-drop {
    padding: 10px;
    background: var(--white);

    box-shadow: 4px 4px 20px var(--blue-40);
    border-radius: 5px;

    flex: none;
    order: 2;
    flex-grow: 0;
    margin: 5px 0px;
    border: none;

}
.select2-drop-active {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: none;
}

.select2-results {
    margin: 0;
    padding: 0;

    /** Mozilla **/
    scrollbar-color: var(--purple-100) transparent;
    scrollbar-width: thin;
}
.select2-results::-webkit-scrollbar {
    width: 4px;
    background-color: transparent;
}
.select2-results::-webkit-scrollbar-thumb {
    height: 30px;
    border-radius: var(--pf-global--BorderRadius--sm);
    background: var(--purple-100);
}
.select2-results li {}
.select2-results .select2-highlighted {
    background: var(--blue-20);
    color: var(--black);
    border-radius: 5px;
}
.select2-results .select2-result-label {
    height: 38px;
    padding: 10px;
    line-height: 18px;
    font-size: 16px;
    font-weight: var(--pf-global--FontWeight--semi-bold);
}
.select2-results .select2-no-results {
    background: var(--blue-20);
    color: var(--black);
    border-radius: 5px;
}
.flag-icon {
    margin-right: 5px;
}