body {
    font-family: lato, sans-serif;
    color: var(--quaternary-color);
    margin: 0;
}

html, body, .login-pf-page {
    background-color: var(--secondary-color)
}

.content-box-head {
    background: var(--primary-color);
}

.footer {
    background-color: inherit;
}

.alert-error {
    background-color: inherit;
}

.form-element {
    color: var(--white-color);
}

.form-element a {
    text-decoration: none;
    color: var(--link-color);
}

.form-element input[type='submit'], .primaryButton, a.primaryButton, .form-element a.primaryButton {
    border: 0;
    border-radius: 0;
    background: var(--success-color);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    -webkit-appearance: none;
}

.flatButton {
    display: inline-block;
    padding: 13px 40px;
    color: var(--white-color);
    font-size: 17px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--white-color);
    border-radius: 0;
    text-align: center;
    background-color: transparent;
}

.forgotPassword a {
    color: var(--link-color);
}

.content-box {
    background: rgb(0, 36, 85);
    background: linear-gradient(270deg, rgba(0, 36, 85, 0.4) 0%, rgba(0, 36, 85, 0.85) 50%, rgba(0, 36, 85, 0.4) 100%);
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
    /*border:0;*/
    border: 2px solid;
    border-image: linear-gradient(to bottom, var(--primary-color) 20%, #000000 100%);
    border-image-slice: 1;
}

.form-element .explain {
    display: block;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--white-color);
    margin: 0 0 10px;
}

.content-box-head h1 {
    color: var(--black-color);
    font-size: 24px;
    font-weight: bold;
    line-height: 31.92px;
    letter-spacing: 0;
    text-align: center;
    margin: 0 0 2px;
}

.form-element input[type='text'], .form-element input[type='password'], .form-element input[type='tel'], .form-element input[type='date'], .form-element textarea {
    color: var(--white-color);
    background: transparent;
    border-radius: 0;
    border: 1px solid var(--septenary-color);
}

.form-element input::placeholder {
    color: var(--septenary-color);
}

.alert-input, input[type='text'].alert-input, input[type='tel'].alert-input, input[type='date'].alert-input, select.alert-input {
    border-color: var(--senary-color);
}

.current-execution-step {
    color: var(--primary-color);
    font-weight: 400
}

.progress-bar-box {
    z-index: 1;
}

progress#step-progress-bar {
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
}

progress#step-progress-bar { /* for FF target directly the element */
    background: var(--octonary-color);
    background-color: var(--octonary-color);
    border: 0;
    border-radius: 0;
}

progress#step-progress-bar::-moz-progress-bar { /* for FF ::progress-bar is the value bar */
    border: 0;
    border-radius: 0;
    background-color: var(--primary-color);
}

progress#step-progress-bar::-webkit-progress-bar {
    -webkit-appearance: none;
    background: var(--octonary-color);
    background-color: var(--octonary-color);
    border: 0;
    border-radius: 0;
}

progress#step-progress-bar::-webkit-progress-value {
    -webkit-appearance: none;
    background: var(--primary-color);
    background-color: var(--primary-color);
    border: 0;
    border-radius: 0;
}

.divider-text {
    display: flex;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0;
    align-items: center;
    text-align: center;
    color: var(--white-color);
    background: inherit;
    padding: 0;
}

.divider-text::before,
.divider-text::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--septenary-color);
}

.divider-text:not(:empty)::before {
    margin-right: .25em;
}

.divider-text:not(:empty)::after {
    margin-left: .25em;
}

/*telephone jquery component*/
.iti__flag-container {
    background-color: rgba(154, 164, 183, .4);
}

.bonus-consent-checkbox,
.terms-checkbox {
    border: 1px solid var(--septenary-color);
    border-radius: 2px;
    width: 22px;
    height: 22px;
    margin: -3px 17px 10px 0;
    cursor: pointer;
}

.bonus-consent-checkbox.checked,
.terms-checkbox.checked {
    border: 1px solid var(--primary-color);
    background: url("data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg width%3D%2227px%22 height%3D%2222px%22 viewBox%3D%220 0 27 22%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E    %3C!-- Generator%3A sketchtool 57 (101010) - https%3A%2F%2Fsketch.com --%3E    %3Ctitle%3E45442DF8-1CB3-4F58-8046-6E21B427CD10%3C%2Ftitle%3E    %3Cdesc%3ECreated with sketchtool.%3C%2Fdesc%3E    %3Cg id%3D%22Web%22 stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22%3E        %3Cg id%3D%22Registracija-1%22 transform%3D%22translate(-497.000000%2C -728.000000)%22 fill%3D%22%23FFBA00%22%3E            %3Cg id%3D%22Group-10%22 transform%3D%22translate(485.000000%2C 715.000000)%22%3E                %3Cpath d%3D%22M37.5476626%2C14.3938663 C36.1680333%2C13.3785536 34.1572935%2C13.58664 33.0562141%2C14.8584168 L28.8231307%2C19.7470512 L22.0450838%2C27.5749445 L18.7014761%2C24.3345651 L18.0114932%2C23.6659597 C16.7950242%2C22.487217 14.7721735%2C22.4403898 13.4934681%2C23.5617615 C12.2144263%2C24.6834432 12.163628%2C26.5481577 13.3804334%2C27.7272104 L19.9404848%2C34.084544 C20.5450187%2C34.670349 21.3826868%2C35 22.2556783%2C35 C22.3021032%2C35 22.3481918%2C34.9990697 22.3946168%2C34.997209 C23.3173973%2C34.9603054 24.1776051%2C34.5574676 24.7538804%2C33.8919633 L38.0519455%2C18.5345061 C39.1526885%2C17.2627293 38.9272919%2C15.4088688 37.5476626%2C14.3938663%22 id%3D%22Fill-1%22%3E%3C%2Fpath%3E            %3C%2Fg%3E        %3C%2Fg%3E    %3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center;
    background-size: 70%;
}

.correspondence-checkbox-label {
    color: var(--primary-color);
    font-size: 15px;
    letter-spacing: 0.47px;
}

.bonus-consent-label-wrapper,
.terms-label-wrapper {
    margin-top: -3px;
}

.bonus-consent-label,
.terms-label {
    font-size: 14px;
    letter-spacing: 0.44px;
    line-height: 23px;
}

.form-element select {
    color: var(--white-color);
    background-color: transparent;
}

input[type='submit'].textSubmit {
    color: var(--primary-color);
    font-size: 14px;
    letter-spacing: 0;
    line-height: 28px;
}

input[type='button'].textSubmit {
    color: var(--primary-color);
    font-size: 14px;
    letter-spacing: 0;
    line-height: 28px;
}

.form-element label.veriLabel {
    font-size: 14px;
    line-height: 28px;
    letter-spacing: 0;
    text-align: center;
}

div.veriLabel {
    font-size: 14px;
    letter-spacing: 0;
    line-height: 18px;
}

.profile-summary-category {
    background-color: var(--primary-color);
    /*text-align: left;*/
    /*margin: 12px 24px 12px 24px;*/
    /*padding: 12px;*/
    font-family: Lato, Roboto, serif;
    color: var(--black-color);
    font-size: 14px;
    letter-spacing: 0;
    line-height: 14px;
    font-weight: 600;
}

.nameGrid {
    color: var(--white-color);
    font-size: 12px;
    letter-spacing: 0;
}

.nameGrid div:nth-child(2n) {
    color: var(--white-color);
    font-size: 12px;
    font-weight: bold;
    padding-left: 12px;
    letter-spacing: 0.38px;
}

.summary-header {
    color: var(--white-color)
}

.form-element option {
    font-size: 14px;
    letter-spacing: 0;
    line-height: 14px;
    color: var(--white-color);
    background-color: var(--quinary-color);
    /*height: 15px;*/
    /*width: 85px;*/
    border-radius: 2px;
    border: 1px solid var(--septenary-color);
    padding: 0 10px;
    height: 38px;
    width: 100%;
    box-sizing: border-box;
}

.form-element option:hover {
    background-color: yellow;
}

.formContent {
    padding: 0 24px;
    color: var(--white-color);
    font-size: 14px;
    letter-spacing: 0;
    line-height: 20px;
}

.disabled-input-field {
    background: inherit !important;
    border-color: var(--septenary-color) !important;
}

.personal-number-not-issued-label {
    color: var(--white-color);
    font-size: 14px;
    letter-spacing: 0;
    font-weight: normal;
}

.topLogo {
    padding-right: 15px;
    width: 172px;
}

::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%239AA4B7" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}

.country-select .country-list {
    background-color: var(--quinary-color);
    border: 1px solid var(--septenary-color);
}

.country-select .country-list .country.highlight {
    background-color: rgba(255, 255, 255, 0.05);
}

.country-select .country-list .country.active span {
    color: var(--white-color);
}

.form-element .iti__country-list {
    background-color: var(--quinary-color);
    border: 1px solid var(--white-color);
}

.form-element .iti__country.iti__highlight {
    background-color: rgba(255, 255, 255, 0.05);
}

.form-element select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 330"><path fill="%239AA4B7" d="M325.607 79.393c-5.857-5.857-15.355-5.858-21.213.001l-139.39 139.393L25.607 79.393c-5.857-5.857-15.355-5.858-21.213.001-5.858 5.858-5.858 15.355 0 21.213l150.004 150a14.999 14.999 0 0021.212-.001l149.996-150c5.859-5.857 5.859-15.355.001-21.213z"/></svg>') no-repeat right 14px center;
    background-size: 16px 16px;
}

#dateOfBirth.empty {
    color: var(--septenary-color);
}

.formContent.nameGrid {
    padding: 0 24px 0 36px;
}

.nameGrid div {
    margin-bottom: 6px;
}

.with-show-hide-password-icon {
    position: relative;
    display: flex;
}

.show-hide-password-icon-position {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}