@import url("//fonts.googleapis.com/css?family=Open+Sans");
@import url("//fonts.googleapis.com/css?family=Quicksand");
@import url("//fonts.googleapis.com/css?family=Inconsolata");

* {
    margin: 0;
    padding: 0;
}

article,
header,
nav,
section,
footer,
main {
    display: block;
}

input,
textarea,
button,
select {
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
}

input:active, input:focus, input:disabled,
textarea:active,
textarea:focus,
textarea:disabled,
button:active,
button:focus,
button:disabled,
select:active,
select:focus,
select:disabled,
a,
a:visited,
a:focus,
a:active,
a:hover {
    outline: 0;
}

input::-ms-clear,
textarea::-ms-clear,
button::-ms-clear,
select::-ms-clear {
    display: none;
}

select::-ms-expand {
    display: none;
}

input:-ms-input-placeholder {
    color: #cacaca;
}

button {
    border: 0;
}

button::-moz-focus-inner,
a::-moz-focus-inner {
    border: 0;
}

progress {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    outline: none;
}

fieldset {
    border: 0;
    outline: none;
}

address {
    font-style: normal;
}

table,
th,
thead,
tbody,
tr,
td {
    -webkit-appearance: none;
    appearance: none;
    border-spacing: 0;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    border: 0;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #363157;
    background: #fff;
    font-family: Open Sans, sans-serif;
}

button,
select {
    font-family: Open Sans, sans-serif;
    appearance: none;
    -moz-appearance: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Quicksand, sans-serif;
    font-weight: 700;
}

h1 {
    font-size: 32px;
    line-height: 40px;
    color: #363157;
}

h2 {
    font-size: 24px;
    line-height: 30px;
    color: #363157;
}

h3 {
    font-size: 20px;
    line-height: 30px;
    color: #363157;
}

h4 {
    font-size: 18px;
    line-height: 30px;
    color: #363157;
}

p {
    font-family: Open Sans, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #363157;
}

a {
    font-weight: 600;
    color: #2d9fd1;
}

h1::-moz-selection,
h2::-moz-selection,
h3::-moz-selection,
h4::-moz-selection,
h5::-moz-selection,
h6::-moz-selection,
p::-moz-selection,
strong::-moz-selection,
small::-moz-selection,
label::-moz-selection,
input::-moz-selection,
span::-moz-selection {
    color: #fff;
    background: #ff463c;
}

h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection,
p::selection,
strong::selection,
small::selection,
label::selection,
input::selection,
span::selection {
    color: #fff;
    background: #ff463c;
}

.text-uppercase {
    text-transform: uppercase;
}

.input {
    width: 50%;
    float: left;
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;
}

@media screen and (max-width: 44.9375em) {
    .input {
        width: 100%;
    }
}

.input__group {
    width: 50%;
    float: left;
    box-sizing: border-box;
}

@media screen and (max-width: 59.9375em) {
    .input__group {
        width: 100%;
    }
}

.input__group .input {
    width: 100%;
}

.input__group--has-two {
    padding: 10px;
}

.input__group--has-two .input {
    width: 50%;
    padding: 10px;
}

@media screen and (max-width: 59.9375em) {
    .input__group--has-two {
        padding: 0;
    }

    .input__group--has-two .input {
        width: 50%;
        padding: 20px;
    }
}

@media screen and (max-width: 44.9375em) {
    .input__group--has-two .input {
        width: 100%;
    }
}

.input__label {
    font-size: 11px;
    line-height: 20px;
    text-transform: uppercase;
    color: #a19fb1;
    font-weight: 700;
    letter-spacing: 1px;
    min-height: 20px;
    line-height: 20px;
    float: left;
    width: auto;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.input__message {
    width: auto;
    height: 20px;
    float: right;
    text-align: right;
    position: relative;
    font-size: 12px;
    line-height: 22px;
    color: #726e89;
    font-weight: 600;
}

.input__message__pre {
    color: #a19fb1;
    font-weight: 400;
}

.input__note {
    width: 100%;
    float: left;
    padding-top: 10px;
    font-size: 12px;
    line-height: 22px;
    color: #726e89;
}

.input__field, .input__textarea {
    width: 100%;
    float: left;
    box-sizing: border-box;
    background: #fff;
    font-family: Open Sans, sans-serif;
    border: 1px solid #d7d6dd;
    line-height: 24px;
    padding: 0 20px;
    height: 44px;
    border-radius: 2px;
    position: relative;
    font-family: Open Sans, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #363157;
}

.input__field:active, .input__field:focus, .input__textarea:active, .input__textarea:focus {
    border: 1px solid #a19fb1;
}

.input__field:disabled, .input__textarea:disabled {
    border: 1px solid #f2f2f4;
    background: #f2f2f4;
}

.input__field:disabled:hover, .input__textarea:disabled:hover {
    cursor: not-allowed;
}

.input__field::-webkit-input-placeholder, .input__textarea::-webkit-input-placeholder {
    color: #a19fb1;
}

.input__field::-moz-placeholder, .input__textarea::-moz-placeholder {
    color: #a19fb1;
}

.input__field::-ms-placeholder, .input__textarea::-ms-placeholder {
    color: #a19fb1;
}

.input__field:-moz-placeholder, .input__textarea:-moz-placeholder {
    color: #a19fb1;
}

.input__select {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #363157;
    width: 100%;
    float: left;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    border: 1px solid #d7d6dd;
    line-height: 24px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    border-radius: 2px;
    height: 44px;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='%23a19fb1' fill-rule='nonzero' d='M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: right 10px top 10px;
    padding: 10px 44px 10px 20px;
}

.input__select:disabled {
    border: 1px solid #f2f2f4;
    background-color: #f2f2f4;
    box-shadow: none;
    color: #a19fb1;
}

.input__select:disabled:hover {
    cursor: not-allowed;
}

.input__select:focus, .input__select:active {
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
    border: 1px solid #a19fb1;
}

.input__color-select {
    width: 100%;
    float: left;
    box-sizing: border-box;
    position: relative;
}

.input__color-select__input {
    width: 100%;
    float: left;
    box-sizing: border-box;
    background: #fff;
    font-family: Open Sans, sans-serif;
    border: 1px solid #d7d6dd;
    line-height: 24px;
    padding: 0 20px;
    height: 44px;
    border-radius: 2px;
    position: relative;
    font-family: Open Sans, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #363157;
}

.input__color-select__input:active, .input__color-select__input:focus {
    border: 1px solid #a19fb1;
}

.input__color-select__input:disabled {
    border: 1px solid #f2f2f4;
    background: #f2f2f4;
}

.input__color-select__input:disabled:hover {
    cursor: not-allowed;
}

.input__color-select__input::-webkit-input-placeholder {
    color: #a19fb1;
}

.input__color-select__input::-moz-placeholder {
    color: #a19fb1;
}

.input__color-select__input::-ms-placeholder {
    color: #a19fb1;
}

.input__color-select__input:-moz-placeholder {
    color: #a19fb1;
}

.input__color-select__pick {
    width: 100%;
    float: left;
    box-sizing: border-box;
    width: 44px;
    position: absolute;
    float: right;
    top: 0;
    right: 0;
}

.input__search {
    width: 100%;
    float: left;
    box-sizing: border-box;
    background: #fff;
    font-family: Open Sans, sans-serif;
    border: 1px solid #d7d6dd;
    line-height: 24px;
    padding: 0 20px;
    height: 44px;
    border-radius: 2px;
    position: relative;
    font-family: Open Sans, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #363157;
    border: 0;
    position: relative;
    background: #f2f2f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='%23a19fb1' fill-rule='nonzero' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
    background-size: 24px 24px;
    background-position: top 10px left 10px;
    box-sizing: border-box;
    padding-left: 44px;
}

.input__search:active, .input__search:focus {
    border: 1px solid #a19fb1;
}

.input__search:disabled {
    border: 1px solid #f2f2f4;
    background: #f2f2f4;
}

.input__search:disabled:hover {
    cursor: not-allowed;
}

.input__search::-webkit-input-placeholder {
    color: #a19fb1;
}

.input__search::-moz-placeholder {
    color: #a19fb1;
}

.input__search::-ms-placeholder {
    color: #a19fb1;
}

.input__search:-moz-placeholder {
    color: #a19fb1;
}

.input__search:focus, .input__search:hover {
    border: 0;
}

.input__search--small {
    padding-left: 38px;
    height: 38px;
    background-position: top 7px left 7px;
}

.input__textarea {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    min-height: 120px;
    padding: 20px;
}

.input__radio {
    width: 100%;
    float: left;
    min-height: 44px;
    position: relative;
}

.input__radio__label {
    width: 100%;
    float: left;
    box-sizing: border-box;
    position: relative;
    line-height: 24px;
    padding: 10px 20px 10px 34px;
}

.input__radio__label::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 18px;
    background: #fff;
    background-size: 18px 18px;
    box-shadow: 0 0 0 1px #a19fb1;
    border: 3px solid #fff;
    position: absolute;
    left: 0;
    top: 13px;
    box-sizing: border-box;
}

.input__radio__label:hover {
    cursor: pointer;
}

.input__radio__hidden {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.input__radio__hidden:checked + label::before {
    background: #2d9fd1;
}

.input__radio__hidden:disabled + label {
    color: #a19fb1;
}

.input__radio__hidden:disabled + label::before {
    border: 0;
    box-shadow: 0 0 0 1px #d7d6dd;
    background: #d7d6dd;
}

.input__radio__hidden:disabled + label:hover {
    cursor: not-allowed;
}

.input__checkbox {
    width: 100%;
    float: left;
    min-height: 44px;
    position: relative;
}

.input__checkbox__label {
    width: 100%;
    float: left;
    box-sizing: border-box;
    position: relative;
    line-height: 24px;
    padding: 10px 20px 10px 34px;
}

.input__checkbox__label::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 2px;
    background: #fff;
    background-size: 20px 20px;
    border: 1px solid #a19fb1;
    position: absolute;
    left: 0;
    top: 12px;
    box-sizing: border-box;
}

.input__checkbox__label:hover {
    cursor: pointer;
}

.input__checkbox__hidden {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.input__checkbox__hidden:checked + label::before {
    border: 0;
    background: #2d9fd1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='nonzero' d='M9.677 20a1.59 1.59 0 0 1-1.27-.632l-4.084-5.396a1.59 1.59 0 0 1 .309-2.23 1.59 1.59 0 0 1 2.232.309l2.687 3.548 6.756-10.85a1.595 1.595 0 0 1 2.196-.508c.746.464.976 1.447.51 2.195L11.03 19.248a1.588 1.588 0 0 1-1.28.75C9.725 20 9.702 20 9.677 20z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right -2px top -2px;
}

.input__checkbox__hidden:disabled + label {
    color: #a19fb1;
}

.input__checkbox__hidden:disabled + label::before {
    border: 0;
    box-shadow: none;
    background: #d7d6dd;
}

.input__checkbox__hidden:disabled + label:hover {
    cursor: not-allowed;
}

.input__serial {
    width: 100%;
    float: left;
    margin-top: 10px;
    position: relative;
}

.input__serial::before {
    content: "";
    width: 100%;
    height: 1px;
    background: #d7d6dd;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    z-index: 0;
}

.input__serial__item {
    width: 100%;
    float: left;
    box-sizing: border-box;
    background: #fff;
    font-family: Open Sans, sans-serif;
    border: 1px solid #d7d6dd;
    line-height: 24px;
    padding: 0 20px;
    height: 44px;
    border-radius: 2px;
    position: relative;
    font-family: Open Sans, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #363157;
    width: calc((100% - 24px) / 4);
    padding: 0;
    margin-right: 8px;
    margin-top: 0;
    z-index: 1;
    text-align: center;
    font-family: Inconsolata, monospace;
    font-size: 18px;
    line-height: 26px;
    color: #363157;
}

.input__serial__item:active, .input__serial__item:focus {
    border: 1px solid #a19fb1;
}

.input__serial__item:disabled {
    border: 1px solid #f2f2f4;
    background: #f2f2f4;
}

.input__serial__item:disabled:hover {
    cursor: not-allowed;
}

.input__serial__item::-webkit-input-placeholder {
    color: #a19fb1;
}

.input__serial__item::-moz-placeholder {
    color: #a19fb1;
}

.input__serial__item::-ms-placeholder {
    color: #a19fb1;
}

.input__serial__item:-moz-placeholder {
    color: #a19fb1;
}

.input__serial__item:last-of-type {
    margin-right: 0;
}

.input__file {
    width: 100%;
    height: 200px;
    float: left;
    position: relative;
    border: 1px dashed #a19fb1;
    border-radius: 2px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.input__file:hover {
    border: 1px dashed #726e89;
}

.input__file__field {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.input__file__header {
    position: relative;
    width: 50%;
    height: 200px;
    text-align: center;
    box-sizing: border-box;
    padding: 20px;
    float: left;
}

.input__file__group {
    position: relative;
    width: 100%;
    top: 50%;
    float: left;
    transform: translateY(-50%);
}

.input__file__title {
    width: 100%;
    float: left;
    font-size: 20px;
    line-height: 30px;
}

.input__file__additional {
    width: 100%;
    float: left;
    font-size: 14px;
}

.input__file__image-container {
    float: left;
    width: 50%;
    height: 200px;
    box-sizing: border-box;
    padding: 20px;
    position: relative;
}

.input__file__image-container::before {
    content: "";
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    background: #eaf5fa;
    background-size: 100%;
    position: absolute;
    float: left;
}

.input__file__image-container::after {
    content: "";
    width: 100px;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%232d9fd1' fill-rule='nonzero' d='M21 4H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm-1 14H4V6h16v12zm-3.685-5.123l-3.231 1.605-3.77-6.101L6 16h12l-1.685-3.123zM15.25 11a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5z'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.input__file__image {
    width: 100%;
    height: 100%;
    padding: 30px;
    object-fit: contain;
    box-sizing: border-box;
}

.input__file__remove {
    color: #ff463c;
    font-weight: 400;
}

.input__file--selected .input__file__image-container::before, .input__file--selected .input__file__image-container::after {
    display: none;
}

.input--error .input__message {
    color: #ff463c;
}

.input--error .input__field {
    background: rgba(255, 70, 60, 0.05);
    border: 1px solid rgba(255, 70, 60, 0.3);
}

.input--error .input__field:active, .input--error .input__field:focus {
    border: 1px solid rgba(255, 70, 60, 0.5);
}

.input--success .input__message {
    color: #259a00;
}

.input--success .input__field {
    background: rgba(52, 172, 12, 0.05);
    border: 1px solid rgba(52, 172, 12, 0.3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23259a00' fill-rule='nonzero' d='M9.677 20a1.59 1.59 0 0 1-1.27-.632l-4.084-5.396a1.59 1.59 0 0 1 .309-2.23 1.59 1.59 0 0 1 2.232.309l2.687 3.548 6.756-10.85a1.595 1.595 0 0 1 2.196-.508c.746.464.976 1.447.51 2.195L11.03 19.248a1.588 1.588 0 0 1-1.28.75C9.725 20 9.702 20 9.677 20z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: right 10px top 10px;
    padding: 10px 44px 10px 20px;
}

.input--success .input__field:active, .input--success .input__field:focus {
    border: 1px solid rgba(52, 172, 12, 0.5);
}

.input--success .input__serial::before {
    background: rgba(52, 172, 12, 0.3);
}

.input--success .input__serial::after {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: #259a00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='nonzero' d='M9.677 20a1.59 1.59 0 0 1-1.27-.632l-4.084-5.396a1.59 1.59 0 0 1 .309-2.23 1.59 1.59 0 0 1 2.232.309l2.687 3.548 6.756-10.85a1.595 1.595 0 0 1 2.196-.508c.746.464.976 1.447.51 2.195L11.03 19.248a1.588 1.588 0 0 1-1.28.75C9.725 20 9.702 20 9.677 20z'/%3E%3C/svg%3E");
    background-size: 20px 20px;
    position: absolute;
    right: -8px;
    top: -8px;
    z-index: 2;
}

.input--success .input__serial__item {
    background: #f5fbf3;
    border: 1px solid rgba(52, 172, 12, 0.3);
}

.input--full {
    width: 100%;
}

.input--phone .input__label {
    width: 100%;
}

.input--phone .input__select {
    width: 130px;
    float: left;
    margin-right: 10px;
}

.input--phone .input__field {
    width: calc(100% - 140px);
    float: left;
}

@media print, screen and (min-width: 45em) {
    .input--phone .input__field {
        padding-right: 0;
    }
}

.input--has-extra .input__label {
    width: 100%;
    float: left;
}

.input--has-extra .input__select,
.input--has-extra .input__field {
    width: 50%;
    float: left;
}

.input--has-extra .input__checkbox,
.input--has-extra .input__radio {
    width: 50%;
    float: left;
    padding-left: 40px;
    box-sizing: border-box;
}

.button {
    height: 44px;
    border-radius: 2px;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    width: 100%;
    float: left;
    padding: 10px 0;
    box-sizing: border-box;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    transition: 0.2s;
}

.button:hover {
    cursor: pointer;
}

.button--small, .message__footer__button {
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    padding: 7px 0;
    height: 38px;
}

.button--blue, .message--informative .message__footer__button {
    background: #2d9fd1;
}

.button--blue:hover, .message--informative .message__footer__button:hover {
    background: #288db8;
}

.button--green, .message--confirmative .message__footer__button {
    background: #259a00;
}

.button--green:hover, .message--confirmative .message__footer__button:hover {
    background: #2c910a;
}

.button--orange, .message--attentive .message__footer__button {
    background: #ff463c;
}

.button--orange:hover, .message--attentive .message__footer__button:hover {
    background: #e64037;
}

.button--lightblue {
    background: #eaf5fa;
    color: #2d9fd1;
}

.button--lightblue:hover {
    color: #fff;
    background: #2d9fd1;
}

.button--grey {
    background: none;
    color: #a19fb1;
}

.button--grey:hover {
    background: #f2f2f4;
}

.button--disabled {
    background: #d7d6dd;
    color: #fefefe;
}

.button--disabled:hover {
    cursor: not-allowed;
}

.button--plus {
    position: relative;
}

.button--plus::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d9fd1' fill-rule='nonzero' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
}

.button[class*="--plus"][class*="--small"][class*="--lightblue"] {
    position: relative;
}

.button[class*="--plus"][class*="--small"][class*="--lightblue"]::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d9fd1' fill-rule='nonzero' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
}

.button[class*="--plus"][class*="--small"][class*="--lightblue"]:hover::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='nonzero' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E");
}

.button--add-rule {
    border: 1px dashed rgba(54, 49, 87, 0.3);
    border-radius: 2px;
    font-size: 14px;
    text-transform: none;
    color: rgba(54, 49, 87, 0.6);
    background: none;
    font-weight: 600;
    position: relative;
    text-align: left;
    padding: 0 20px 0 40px;
    height: 40px;
}

.button--add-rule::before {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    float: left;
    margin: 12px;
    left: 0;
    top: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(54, 49, 87, 0.6)' fill-rule='nonzero' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

.button--add-rule:hover {
    background: rgba(45, 159, 209, 0.05);
    border-color: #2d9fd1;
    color: #2d9fd1;
}

.button--add-rule:hover::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d9fd1' fill-rule='nonzero' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

.message {
    width: 100%;
    float: left;
    box-sizing: border-box;
    border-radius: 2px;
    position: relative;
}

.message__description, .token-expired {
    width: 100%;
    float: left;
    box-sizing: border-box;
    font-family: Open Sans, sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #363157;
    padding: 20px 20px 20px 60px;
    margin: 0;
}

.message__description--strong {
    font-weight: 600;
    padding-bottom: 5px;
}

.message__list {
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 0 20px 20px 60px;
    list-style-type: none;
}

.message__list-item {
    font-family: Open Sans, sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #363157;
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 0 0 0 24px;
    position: relative;
}

.message__list-item::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 100%;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    background: #363157;
}

.message__list-item--checked {
    color: rgba(54, 49, 87, 0.6);
}

.message__list-item--checked::before {
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(54, 49, 87, 0.4)' fill-rule='nonzero' d='M9.677 20a1.59 1.59 0 0 1-1.27-.632l-4.084-5.396a1.59 1.59 0 0 1 .309-2.23 1.59 1.59 0 0 1 2.232.309l2.687 3.548 6.756-10.85a1.595 1.595 0 0 1 2.196-.508c.746.464.976 1.447.51 2.195L11.03 19.248a1.588 1.588 0 0 1-1.28.75C9.725 20 9.702 20 9.677 20z'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
}

.message__footer {
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 0 20px 20px;
}

.message__footer__button {
    width: auto;
    padding: 0 20px;
    float: right;
}

.message__highlight {
    font-weight: 600;
}

.message::before {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    top: 20px;
    left: 20px;
}

.message__link {
    font-weight: 600;
}

.message--informative {
    background: #eaf5fa;
    border-left: 3px solid #2d9fd1;
}

.message--informative .message__link {
    color: #2d9fd1;
}

.message--informative .message__highlight {
    color: #2d9fd1;
}

.message--informative::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%232d9fd1' fill-rule='nonzero' d='M12 2C6.478 2 2 6.477 2 12s4.477 10 10 10c5.522 0 10-4.477 10-10S17.522 2 12 2zm.934 3.61c.975 0 1.261.566 1.261 1.213 0 .807-.646 1.554-1.749 1.554-.923 0-1.362-.464-1.335-1.231 0-.647.54-1.536 1.823-1.536zM10.436 17.99c-.667 0-1.153-.405-.687-2.181l.763-3.151c.132-.504.154-.706 0-.706-.199 0-1.064.347-1.575.691l-.332-.545c1.62-1.353 3.482-2.146 4.279-2.146.666 0 .777.787.445 2l-.875 3.312c-.156.585-.089.787.066.787.2 0 .854-.241 1.498-.749l.377.507c-1.576 1.575-3.293 2.18-3.959 2.18z'/%3E%3C/svg%3E");
    background-size: 24px 24px;
}

.message--attentive {
    background: #ffeceb;
    border-left: 3px solid #ff463c;
}

.message--attentive .message__link {
    color: #ff463c;
}

.message--attentive .message__link:hover {
    border-bottom: 1px solid #ff463c;
}

.message--attentive .message__highlight {
    color: #ff463c;
}

.message--attentive::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='%23ff463c' fill-rule='nonzero' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 24px 24px;
}

.message--attentive .message__description {
    display: none;
}

.message--confirmative {
    background: #eaf6e6;
    border-left: 3px solid #259a00;
}

.message--confirmative .message__link {
    color: #259a00;
}

.message--confirmative .message__link:hover {
    border-bottom: 1px solid #259a00;
}

.message--confirmative .message__highlight {
    color: #259a00;
}

.message--confirmative::before {
    width: 20px;
    height: 20px;
    top: 22px;
    left: 22px;
    background: #259a00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='nonzero' d='M9.677 20a1.59 1.59 0 0 1-1.27-.632l-4.084-5.396a1.59 1.59 0 0 1 .309-2.23 1.59 1.59 0 0 1 2.232.309l2.687 3.548 6.756-10.85a1.595 1.595 0 0 1 2.196-.508c.746.464.976 1.447.51 2.195L11.03 19.248a1.588 1.588 0 0 1-1.28.75C9.725 20 9.702 20 9.677 20z'/%3E%3C/svg%3E");
    background-size: 24px 24px;
    background-position: center center;
    border-radius: 24px;
}

.portal {
    width: 100%;
    float: left;
    box-sizing: border-box;
    background: #fff;
    border-radius: 2px;
    padding: 20px;
    position: relative;
}

.portal__header {
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 20px;
}

.portal__description {
    font-family: Open Sans, sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #363157;
    padding: 20px 0 0;
}

.portal__form {
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 0 20px 20px;
}

.portal__form__footer {
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 20px 0 0;
}

.portal__form__button {
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 20px 0 20px 0;
}

.portal__form__qr {
    height: 100%;
    padding: 40px 40px 0 40px;
    text-align: center;
}

.portal__form__qr img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

.portal__form__submit {
    border-radius: 20px;
    font-family: Quicksand, sans-serif;
}

.portal__input {
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 20px 0;
}

.portal__input__label {
    margin: 0;
}

.portal__input__field {
    padding: 0;
    border: 0;
    border-bottom: 1px solid #d7d6dd;
    border-radius: 0;
}

.portal__input__field:not([disabled="disabled"]):hover {
    border-bottom: 1px solid #a19fb1;
}

.portal__input__field:focus, .portal__input__field:not([disabled="disabled"]):active {
    border: 0;
    border-bottom: 1px solid #726e89;
}

.portal__footer, .portal__button {
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 0 20px 20px;
    text-align: center;
}

.portal__button {
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 0 20px 20px;
    text-align: center;
}

.portal__footer__link {
    font-size: 14px;
    color: rgba(54, 49, 87, 0.75);
    font-weight: 400;
    cursor: pointer;
}

.portal__footer__link:hover {
    text-decoration: underline;
}

.portal__message {
    margin: 10px 0;
}

.login {
    background: #292463;
    padding: 80px 0;
}

.login__container {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    max-width: 460px;
    margin: 0 auto;
    position: relative;
}

.login-error {
    display: none;
    color: #ff463c;
}

.twoFactor-error {
    color: #ff463c;
}

.twoFactor-success {
    color: #259a00;
}

.lost-password-message, .password-change-success {
    display: none;
    color: #259a00;
}

.login__header {
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 40px 0 30px;
}

.login__modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(41, 36, 99, 0.9);
    overflow: auto;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

.login__modal__container {
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 10% 20px;
    max-width: 500px;
}

@media screen and (max-width: 44.9375em) {
    .login__modal__container {
        padding: 20px;
    }
}

.login__modal__footer {
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 30px 0 0;
    text-align: center;
}

.login__modal__footer__text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.login__modal__footer__link {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-sizing: border-box;
}

.login__modal__footer__link:hover {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.login__modal__contact-info {
    position: absolute;
    bottom: -50px;
    width: calc(100% - 40px);
    text-align: center;
}

.password-weak, .password-strong {
    display: none;
}

.justify {
    text-align:justify;
}