.yCvaNaZcd2EmSnGCQz9G {
    background-color: rgba(51, 59, 64, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.lsRlp253tPD0PfEmU8iZ {
    background-color: #fff;
    color: var(--yoti-grey-black);
    display: flex;
    flex-direction: column;
    width: 555px;
    padding: 60px 67px;
    border-radius: var(--radius-large);
}

.xQZAX4TK3RjWUGD66NnG {
    font-weight: bold;
    font-size: 24px;
    margin: 0 0 8px 0;
}

.bh7okpFf1aelFA_Cq9kQ {
    font-weight: normal;
    font-size: 16px;
    margin: 5px 0;
}

.TUzndgax8Pgh2mXmqx_i {
    max-height: 50px;
    padding: 0.5em 0;
    z-index: 2;
    width: 100%;
}

.TUzndgax8Pgh2mXmqx_i a {
    font-size: inherit;
}

.diz9C3CCVfXPJVNdfdlX {
    color: var(--yoti-blue);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--paragraph-font-size);
    max-width: 828px;
    margin: 0 auto;
    padding: 0 1em;
    text-align: center;
}

.IHBk8LsitMdAKvUlt1DS {
    max-width: none;
    padding: 0 2em;
}

.F_00XNQNkGdZZsQl6A4g {
    position: relative;
    text-align: left;
    width: 134px;
}

.F_00XNQNkGdZZsQl6A4g img {
    height: 30px;
}

.xhsUTSX7BwRCV1YCwMj7 {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
}

.xhsUTSX7BwRCV1YCwMj7:active,
.xhsUTSX7BwRCV1YCwMj7:focus {
    outline: 0;
}

.LUOcr4decfzhPybD1mGh {
    border: 3px solid var(--yoti-blue);
    border-top-color: transparent;
    border-right-color: transparent;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-top: -2px;
    display: block;
    padding: 4px;
    transform: rotate(45deg);
}

.xhsUTSX7BwRCV1YCwMj7 span:nth-of-type(2) {
    line-height: 1.14;
    font-size: var(--paragraph-font-size);
    font-weight: bold;
}

.D3ZqNmbhudXVHD1iaziO {
    width: 60px;
}

@media (max-width: 640px) {
    .F_00XNQNkGdZZsQl6A4g {
        width: 112px;
    }

    .F_00XNQNkGdZZsQl6A4g img {
        height: 25px;
    }

    .D3ZqNmbhudXVHD1iaziO {
        width: 62px;
    }
}

.H__Iq7KM4l89BmKBNBMn {
    background: var(--yoti-grey-black);
    border-top: 2px solid #71767a;
    color: var(--yoti-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7em;
    font-weight: 100;
    text-align: center;
    z-index: 2;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.CaJZhFUbmpoMpmJef9tA {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    width: 33%;
}

.CaJZhFUbmpoMpmJef9tA > div {
    margin: 0.25em 0.4em;
}

.CaJZhFUbmpoMpmJef9tA a {
    color: var(--yoti-white);
    font-size: 12px;
    text-decoration: none;
}

.CaJZhFUbmpoMpmJef9tA:first-of-type {
    justify-content: flex-start;
}

.CaJZhFUbmpoMpmJef9tA:last-of-type {
    justify-content: flex-end;
}

.SxuqtEjrPNq2Ga0POqHS {
    height: 20px;
    width: 20px;
}

.dZQ6TtDgVsWPfsVzlFix {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}

.bufdxTI7iPUpf1WF7JIf {
    background-color: var(--yoti-white);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 2em;
    height: 100%;
    width: 100%;
    z-index: 3;
}

.bufdxTI7iPUpf1WF7JIf h1 {
    font-size: 2.8em;
    font-weight: 200;
}

.bufdxTI7iPUpf1WF7JIf p {
    color: var(--yoti-grey-black);
    font-size: 0.9em;
    font-weight: 100;
    line-height: 1.75;
    margin: 1em 0;
    text-align: center;
}

.YJmhv28REdiZyfp4h5og {
    display: flex;
    align-items: space-around;
    justify-content: center;
    margin-top: 2em;
}

.YJmhv28REdiZyfp4h5og button {
    margin: 0 5px;
}

.aYzLduuoJ5jMYL7XWx4F {
    width: 130px;
    height: 130px;
}

.Iu2YbF4idb4urGEZYwmn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 4;
}

.AGMiMpaoO86tXtIvIqog {
    border-radius: 12px;
    background-color: #fff;
    padding: 0 25px;
}

.Pw0I2AiQQWLSaH5GRvpP {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    -webkit-animation: VD_YxkGHuEKy1AffoBQQ 1.4s;
    animation: VD_YxkGHuEKy1AffoBQQ 1.4s;
    transition: opacity 1.4s ease-in-out;
    width: 100%;
}

.Z8mxpXlH31Fz4CoXU3VX {
    font-size: 10px;
    margin: 50px auto;
    text-indent: -9999em;
    width: 11em;
    height: 11em;
    border-radius: 50%;
    background: #299cff;
    background: -moz-linear-gradient(left, #299cff 10%, rgba(41, 156, 255, 0) 42%);
    background: -webkit-linear-gradient(left, #299cff 10%, rgba(41, 156, 255, 0) 42%);
    background: -o-linear-gradient(left, #299cff 10%, rgba(41, 156, 255, 0) 42%);
    background: -ms-linear-gradient(left, #299cff 10%, rgba(41, 156, 255, 0) 42%);
    background: linear-gradient(to right, #299cff 10%, rgba(41, 156, 255, 0) 42%);
    position: relative;
    -webkit-animation: l8dOb3Imrt5USjJFIwn7 1.4s infinite linear;
    animation: l8dOb3Imrt5USjJFIwn7 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.Z8mxpXlH31Fz4CoXU3VX::before {
    width: 50%;
    height: 50%;
    background: #299cff;
    border-radius: 100% 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
}

.Z8mxpXlH31Fz4CoXU3VX::after {
    background: #fff;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    content: "";
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.tFL42oBzZQ_pH4GeU6JY.Z8mxpXlH31Fz4CoXU3VX::after {
    background: var(--yoti-grey-lightest);
}

.AGMiMpaoO86tXtIvIqog .Z8mxpXlH31Fz4CoXU3VX {
    font-size: 4px;
    margin: 25px auto;
}

@-webkit-keyframes VD_YxkGHuEKy1AffoBQQ {
    0% {
        opacity: 0;
    }

    100% {
        transform: 1;
    }
}

@keyframes VD_YxkGHuEKy1AffoBQQ {
    0% {
        opacity: 0;
    }

    100% {
        transform: 1;
    }
}

@-webkit-keyframes l8dOb3Imrt5USjJFIwn7 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes l8dOb3Imrt5USjJFIwn7 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.uE1NVJPdwHuzAzfVzqYw {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 16px;
    position: relative;
    box-shadow: var(--yoti-layer-2);
}

.IrGELRMrxW1YowiDpqad {
    min-width: 100px;
}

.k_IOTh1S6b5A90A6zXPg {
    margin-top: 5px;
}

.GF0rznzPy5Hm3dMAfzGT {
    min-width: 100px;
    text-align: right;
}

.gpNQ9w6JxZgbyHT8gqGn {
    width: 94px;
    height: 25px;
}

@media (max-width: 420px) {
    .uE1NVJPdwHuzAzfVzqYw {
        justify-content: left;
    }

    .at4pwOxnWNv0oraY5pIV {
        display: none;
    }
}

.VDDIvdeS9oGB1WD4N_S1 {
    width: 100%;
    height: 40px;
    padding: 10px 24px;
    display: flex;
    font-size: 12px;
    gap: 16px;
}

.cnKzGGQMET_8EbPpRDaQ,
.gwOa8OsSTu0XSTBAk5kL {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.gnUAbpuD5pkK_RtnaLPg {
    background-color: var(--yoti-grey-black);
    color: var(--yoti-white);
}

._1_SuG4Bev0wLxJftDXg {
    background-color: var(--yoti-grey-lighter);
    color: var(--yoti-grey-black);
}

.fALJAW3CmGw5d3HqsKgS {
    height: 100%;
    margin-right: 10px;
}

.qztCIco7GkWH1_iTae9G {
    color: inherit;
}

.s9Q2oZNUpd3MslJ3gALQ {
    flex: 1;
    text-align: right;
}

.ZXnLToFy0uZiJZvorZXm {
    flex: 1;
}

.YqE6gXnG9XMelTpom945 {
    --yoti-sidebar-width: 190px;
    box-shadow: 0px 0px 63px rgba(51, 59, 64, 0.1);
    margin-top: 56px;
}

.jv0eAbcR736Xc3EkLHyA {
    margin-top: 8px;
}

.NqcboBcQIDjZFo7gAg9F {
    width: 80px;
    height: 80px;
}

.G2BRAIfqniTXvvOalekm {
    padding: 24px 16px 16px 16px;
    line-height: 19.6px;
}

.R1FZj4ZpBwLmPIeeEcNr {
    font-size: 16px;
    font-weight: 700;
}

.RzBQ2k_ITQg_fTVAy6nO {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 16px;
}

.HBtTMipG6NWCO4GLRpQK {
    width: 158px;
}

.i9bTLiypym5YHZE_4Hd7 {
    display: flex;
    font-weight: 300;
    height: 100%;
}

.bhJ9wdcA9rfv1zGRr6iE {
    flex-direction: column;
}

.WVE6AA1EV5jSKjelbLWm {
    padding: 1em;
    width: 100%;
    overflow-x: auto;
    overflow-y: scroll;
    overflow-x: auto;
    overflow-y: scroll;
    overflow: auto scroll;
    margin: 56px 0 0 0;
}

.s8OZjwAytLsiZaadytDy {
    height: 100%;
    margin-top: 0;
}

@media (min-width: 901px) {
    .WVE6AA1EV5jSKjelbLWm {
        padding: 40px 48px;
    }
}

.WXB3Os5VhzP_I3qDQxtJ {
    position: absolute;
    border: 2px solid var(--yoti-grey-black);
    border-radius: var(--radius-small);
    background: white;
    z-index: 1000;
    right: 0px;
    user-select: none;
    box-shadow: var(--yoti-layer-4);
}

.lhaPnqWnI8cbgPfMd39L {
    position: relative;
}

.EtNiQlwaWS4mpU9DstUH {
    position: absolute;
    background: linear-gradient(-45deg, transparent 50%, #fff 50%);
    border-top: 2px solid var(--yoti-grey-black);
    border-left: 2px solid var(--yoti-grey-black);
    width: 13px;
    height: 13px;
    top: -8px;
    transform: rotate(45deg);
}

.N2cL1mBtTXwyLEys6d8L {
    transform: rotate(225deg);
    top: 3px;
}

.i4qbp5R5PHVjVYb0EA8M {
    height: 48px;
    line-height: 48px;
    width: 100%;
    background: white;
    color: var(--yoti-grey-black);
    font-size: 14px;
    cursor: pointer;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.i4qbp5R5PHVjVYb0EA8M:hover {
    background: var(--yoti-grey-lightest);
}

.cVru7v1gKJMEecAqtSZl {
    color: var(--yoti-grey-light);
    pointer-events: none;
}

.MKKaBZqnhujyvhjVvHYs {
    display: flex;
    cursor: pointer;
    color: var(--yoti-grey-black);
    align-items: center;
    padding-right: 15px;
}

.DenSCtSuOiRiHZjrLGpV {
    font-size: 14px;
    color: var(--yoti-grey-black);
    text-align: right;
}

.Pxq53gVPJEKLV1j6PvQo {
    font-size: 12px;
    text-align: right;
    color: var(--yoti-grey);
}

.JfOLnXN6llAnpKP2YtFA {
    margin-right: 20px;
}

.sZWnAo7Mj97QRABEQlLT {
    --yds-icon-size: 32px;
}

.yNUql64KC1bDtcjAqPzj {
    width: 18px;
}

.Fk23Nv1F6QrKhFOuQF1h {
    max-width: 100%;
    max-height: 100%;
}

.wA5iaNA4rIpa2lXF1DMh {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 42px;
    height: 32px;
    margin-right: 20px;
    border-radius: var(--radius-medium);
    overflow: hidden;
}

.xPdhoDPMhpkoeeiBdiun {
    position: fixed;
    z-index: 1;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 2px 3px 0 rgba(var(--yoti-grey-black-rgb), 0.1);
    height: 56px;
    justify-content: space-between;
    width: 100%;
    padding: 0 16px;
}

._9LJZVi0wvquapJ8Smq9q {
    width: 174px;
    padding-left: 4px;
}

.NVlHm9Ti_eQKOzlE5lrO {
    height: 22px;
    width: auto;
}

.iebA240n3Rk_astSdWYP {
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 0;
    padding-left: 0;
    height: 56px;
}

.yXqYsWr7Q_DuMwN7BXvn {
    margin-left: 32px;
    flex: 1;
    display: flex;
}

.OL0W6h8Xis7Tu3U4coJo {
    margin: 8px 20px;
    min-width: 130px;
}

.tRXGdNE4VfXeds76ladO {
    padding-top: 8px;
    border-bottom: 4px solid transparent;
}

.v6Hu1wJwWlMK20HB9GCQ {
    border-bottom: 4px solid var(--yoti-blue-shade);
}

.T8FtphTPzveB9l4h4Y4k {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.BowBzKiDVLVbuDyPjACP {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.jHN51yRSQAVIPRVBw41Z {
    color: var(--yoti-grey-black);
}

.vSg4emCUcQrRlFU0bWpN {
    color: var(--yoti-grey-dark);
}

.WHo2cuRrtlnTjlBYxCMq {
    outline: none;
}

.M3bnxVDQB4XpopPSMrAO {
    margin-right: 4px;
    height: 16px;
    width: 16px;
}

.iAf76WMDaKsQRqDdtETp {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
}

.xsStQIzKYR9TFco8wqGc {
    position: absolute;
    width: 278px;
    content: attr(data-tooltip);
    border-radius: var(--radius-large);
    color: var(--yoti-white);
    padding: 14px;
    font-size: 14px;
    font-weight: normal;
    top: 60px;
    background-color: var(--yoti-grey-black);
    z-index: 100;
}

.xsStQIzKYR9TFco8wqGc:before {
    background-color: var(--yoti-grey-black);
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    top: -5px;
    left: 50%;
}

.osoZBdWL1CmiKLnUPkh_ {
    display: flex;
    width: 420px;
    border-radius: var(--radius-large);
    margin: 0 0 10px 0;
    font-size: 16px;
}

.CnUBK4aVV6ipLmi2R3qJ {
    margin: 16px 16px 0 34px;
}

.GhiORv5Zcd14law6W7wA {
    display: flex;
    flex-direction: column;
    margin: 17px 0 13px 0;
}

.gKhQ66KsVU_kJ4gQS08w {
    line-height: 24px;
}

.gKhQ66KsVU_kJ4gQS08w > p {
    margin: 0;
    font-size: 16px;
}

.xckwB44wpVXLP5gJrfzh {
    margin: 16px 0 0 0;
    color: var(--yoti-grey-dark);
    font-size: 14px;
}

@media not (min-width: 576px) {
    .osoZBdWL1CmiKLnUPkh_ {
        width: 330px;
    }
    .CnUBK4aVV6ipLmi2R3qJ {
        margin-left: 16px;
    }
}

.u4z8EWlSyXrJRdjhHnlV {
    max-width: 375px;
    margin: auto;
}

.h0bI8U3KSCz3wrcUSKGz {
    color: var(--yoti-grey-dark);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.bPcZESySTmlUaEpp7QcM {
    font-weight: normal;
    font-size: 16px;
    line-height: 1.5;
    color: var(--yoti-grey-black);
    margin-bottom: 16px;
}

.a5Yk3CnJhSGiQMlFszwx {
    margin: 26px 0 48px 0;
}

.RxLLxqB1986D0d02lm0r {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 37px 0 41px 0;
}

.MdprAkRWLuFabLR4k8kg {
    margin: 32px 0;
}

.EEgodPVqLwJlFx4y3gKJ {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: auto;
    max-width: 1440px;
}

.IIWl3pkD1h_ahgxd56Q9 {
    flex: 1;
    display: flex;
    height: 280px;
    max-height: 320px;
}

.a3jCEK5tt_ZCK0ZCnyNo {
    flex: 1;
}

.UmNTl2qrLB_6mhS6RG4A {
    width: 650px;
    height: 280px;
    max-height: 320px;
    margin-top: 8px;
    position: relative;
    text-align: center;
}

.Et_mi3Lqy1pWIehm5IXw {
    color: var(--yoti-grey-dark);
    font-size: 52px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.nSIkVyT6I5VgchvFp3EL {
    margin-top: 32px;
    margin-bottom: 8px;
    color: var(--yoti-grey-dark);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 118%;
}

.t_KmV1_VLBcY1CMfi7IF {
    margin-top: 8px;
    font-size: 16px;
}

.h9WWNULFeteogI7pSQV4 {
    max-width: 375px;
    margin: auto;
}

.lLAEn6gnotIuj_UjrawE {
    width: 100%;
    --yoti-button-width: 100%;
}

.lMM7YKZJo6lNxZoX2Fpo {
    margin-bottom: 32px;
}

.pKh1nQk5KFGVBq_4r8n6 {
    width: 100%;
    max-width: 388px;
    max-height: 320px;
}

/* static image out, carousel in, still vertical direction for flex container */
@media (min-width: 650px) {
    .UmNTl2qrLB_6mhS6RG4A {
        height: 520px;
        max-height: inherit;
        text-align: inherit;
        margin-top: 0;
    }

    .IIWl3pkD1h_ahgxd56Q9 {
        height: 520px;
        max-height: inherit;
        justify-content: center;
    }
}

/* horizontal direction for flex container */
@media (min-width: 1280px) {
    .EEgodPVqLwJlFx4y3gKJ {
        flex-direction: row;
    }

    .a3jCEK5tt_ZCK0ZCnyNo {
        margin-top: 32px;
    }

    .UmNTl2qrLB_6mhS6RG4A {
        margin-top: 90px;
    }
}

/* remove space from the top if we are on desktop but with a small screen height */
@media (min-width: 1280px) and (max-height: 860px) {
    .a3jCEK5tt_ZCK0ZCnyNo {
        margin-top: 0;
    }

    .Et_mi3Lqy1pWIehm5IXw {
        margin-top: 0;
        margin-bottom: 8px;
    }
    .nSIkVyT6I5VgchvFp3EL {
        margin-top: 8px;
    }
    .UmNTl2qrLB_6mhS6RG4A {
        margin-top: -50px;
    }
}

.udfwV_sXC_Sfq4zkKfVS {
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-modal-overlay);
    overflow-y: auto;
}

.qquRc4nS9OUgZc3F1NIU {
    background-color: transparent;
    pointer-events: none;
}

.DSdLVxvbsNAP3I7Jkf3u {
    max-height: 100vh;
    background-color: white;
    border-radius: 10px;
    color: #515a5f;
    line-height: 1.5;
    max-width: 800px;
    position: relative;
    box-shadow: var(--yoti-layer-5);
    pointer-events: all;
}

.yiDz9YKaQo7HDjhom2aM {
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 0;
    cursor: pointer;
    position: absolute;
    font-weight: bold;
    top: 7px;
    right: 7px;
    z-index: 2;
}

.gJuEN1hpvBBHvRcLwKPV {
    display: flex;
    gap: 16px;
}

.w299dArGQ0GikJLHirbN {
    position: relative;
    margin-top: 0;
}

.GUg4cRKHiR9ctbzRLlmU {
    width: 550px;
}

.GDk9jIPHjydzHl1wfyqE {
    cursor: pointer;
}

.kvCmDze0u9qiN7vM0FRB {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    justify-content: center;
}

.ZGaq2BqdFFmaTip9odzH {
    width: 17px;
    height: 17px;
    border-radius: 10px;
}

.ZBVCiwkQ1FSlyVfaSFpq {
    color: var(--yoti-grey-dark);
    text-align: center;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
}

.u3sF4hlkxyLSCu9bCaof {
    margin-top: 220px;
    width: 30px;
}

.N7Bn2QJjN8qLx3iP19uh {
    padding: 28px 20px 20px 20px;
}

.cUOrJQYf673lnXRRKUZ0 {
    border: none;
}

.w299dArGQ0GikJLHirbN::before {
    content: "";
    background-image: radial-gradient(
        circle,
        var(--mktg-yellow),
        var(--mktg-yellow) 70%,
        transparent 70%
    );
    position: absolute;
    left: calc(50% - 205px);
    top: calc(50% - 205px);
    width: 410px;
    height: 410px;
}

@media (min-width: 1280px) {
    .ZBVCiwkQ1FSlyVfaSFpq {
        margin-top: 40px;
    }

    .kvCmDze0u9qiN7vM0FRB {
        margin-top: 24px;
    }

    .w299dArGQ0GikJLHirbN {
        margin-top: 50px;
    }

    .u3sF4hlkxyLSCu9bCaof {
        margin-top: 275px;
    }
}

.QO63AX0AxAPbn3eatUv7 {
    width: 21px;
    height: 22px;
    appearance: none;
    border: 2px solid var(--yoti-grey-black);
    border-radius: var(--radius-tiny);
    cursor: pointer;
    margin-right: 12px;
    outline: none;
    margin: 0;
}

.QO63AX0AxAPbn3eatUv7:checked {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgMTAgOCI+CiAgICA8cGF0aCBmaWxsPSIjMUI5RjRBIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik00IDUuMDQ3bDQuNS00LjVMOS45MTQgMS45NiA0IDcuODc1LjA4NiAzLjk2MSAxLjUgMi41NDd6Ii8+Cjwvc3ZnPgo=);
    background-position: 2px 3px;
    background-repeat: no-repeat;
    background-size: 13px;
}

.vOjOXacWD39Bp0_gd2ns {
    font-weight: normal;
    font-size: 16px;
    display: flex;
    align-items: center;
    color: var(--yoti-grey-black);
}

.ueM0tcf9dI8drMYMX1uK {
    font-size: inherit !important;
}

.ueM0tcf9dI8drMYMX1uK:hover {
    color: var(--yoti-blue-tone);
}

.aGqDCdB7cfRXthii9qXt {
    margin-left: 10px;
}

.PwUiYQJgkL0R68Fp4GSM {
    max-width: 375px;
    margin: auto;
}

.ruvyauwPKE4TdAelT0ll {
    display: flex;
    gap: 16px;
}

.Er815691GqaZ73OpTaL6 {
    color: var(--yoti-grey-dark);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.IaBbLBUazTuhP248Ctyl {
    font-weight: normal;
    font-size: 16px;
    line-height: 1.5;
    color: var(--yoti-grey-black);
    margin: 0;
}

.A0ejL3XAVhgZZocfIYdX {
    margin: 24px 0 -5px 0; /* negate the padding of the checkbox */
}

.QUC3OlpPNuAswhqBq5Qe {
    margin-top: 24px;
}

.m5RmZ2CkFaruItF4anfZ {
    max-width: 375px;
    margin: auto;
}

.UAAMAWlh3I5nm8ksCof3 {
    width: 100px;
}

.p166wvOg_lCkMqg8c7__ {
    display: flex;
    gap: 16px;
}

.EgAbZTDROl5CJ5qcEIVx {
    color: var(--yoti-grey-dark);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.otbLYqysQ7U6eA4bBmFj {
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 24px;
    font-size: 16px;
}

.qv3HNj1uSwEOG73NkLEg {
    margin-top: 8px;
    font-size: 16px;
}

.BcAMzBlAYbr23_fEdlL6 {
    width: 100%;
    --yoti-button-width: 100%;
}

.aUDSiGldBqsydFmQImpr {
    font-weight: normal;
    font-size: 16px;
    line-height: 1.5;
    color: var(--yoti-grey-black);
}

.bFyR_63xHh2KfBeuxbBU {
    margin: 32px 0;
}

.Brr6OMRnFrAXFr3I8wzw {
    color: var(--yoti-grey-dark);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.vpBA3Qx9OGECXhBVX7iX {
    max-width: 375px;
    margin: auto;
}

.C8dLQAeIfDAVYDKjU2Il {
    margin-top: 8px;
    font-size: 16px;
}

.RkzTWMOnBi75b4xoD5NN {
    color: var(--yoti-grey-dark);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.XNOK1_fZiAk5ikpdscMR {
    max-width: 375px;
    margin: auto;
}

.yj6r0FF5odAccd9zoYzA {
    font-weight: normal;
    font-size: 16px;
    line-height: 1.5;
    color: var(--yoti-grey-black);
    margin-bottom: 16px;
}

.liiET4dPObqowC7orrxL {
    margin-top: 64px;
    margin-bottom: 25px;
}

body {
    margin: 0;
    color: var(--yoti-grey-black);
    font-family: var(--yoti-font);
}

html,
#root,
body {
    height: 100%;
}

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
    /* subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input::-webkit-contacts-auto-fill-button {
    display: none !important;
    visibility: hidden !important;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

*:focus,
*:active,
*:hover {
    outline: none;
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: normal;
}

h1 {
    font-size: 2.222em;
}

h2 {
    font-size: 1.778em;
}

h3 {
    font-size: 1.556em;
}

h4 {
    font-size: 1.333em;
}

h5 {
    font-size: 1.111em;
}

/* Use where so that it does not override styles from ModalDialog */
:where(p) {
    font-size: 0.889em;
}

small {
    font-size: 0.778em;
}

/* ui-kit components overrides (tech debt) */
.yoti-button {
    position: relative;
}

.yoti-select-field select {
    cursor: pointer;
}

.yoti-select-field__input-group {
    box-sizing: content-box;
}

.yoti-tooltip--small .yoti-tooltip__body,
.yoti-tooltip--medium .yoti-tooltip__body {
    padding: 10px 15px 10px 17px;
    line-height: 24px;
}

.yoti-chip {
    white-space: nowrap;
}

/* END: ui-kit components overrides */

/* TODO [YS-5569] converge existing media query and legacy custom media to use the standard custom media */

/* media queries */

:root {
    /* These are commented out global colours which we import from UKC,
       We keep it here also so that developer can quickly map hex code to colour name.
       (Colours in figma are defined with hex codes)

        --yoti-blue-tint: #e5eeff;
        --yoti-blue: #2875bc;
        --yoti-blue-tone: #27619b;
        --yoti-blue-shade: #254d78;
        --yoti-success-green-tint: #d8fbd3;
        --yoti-success-green: #1b9f4a;
        --yoti-success-green-tone: #128547;
        --yoti-success-green-shade: #0B6B40;
        --yoti-warning-orange-tint: #ffebca;
        --yoti-warning-orange: #db970e;
        --yoti-warning-orange-tone: #b98013;
        --yoti-warning-orange-shade: #986915;
        --yoti-danger-red-tint: #ffe9e4;
        --yoti-danger-red: #d5332e;
        --yoti-danger-red-tone: #b02e28;
        --yoti-danger-red-shade: #8a2821;
        --yoti-grey-lightest: #f2f4f6;
        --yoti-grey-lighter: #d0d5dc;
        --yoti-grey-light: #b5bdc8;
        --yoti-grey: #9ba5b4;
        --yoti-grey-dark: #546072;
        --yoti-grey-black: #333b40;
     */

    /* Legacy  */
    --dark-header-colour: #515a5f;
    --mktg-yellow: #ffeb8c;
    --mktg-yellow-lite: #fff8d9;
}

/* legacy font sizes */
:root {
    --h5-font-size: 1.111em;
    --paragraph-font-size: 0.889em;
}

:root {
    --medium-container-width: 768px;
}

:root {
    --radius-tiny: 2px;
    --radius-small: 4px;
    --radius-medium: 5px;
    --radius-large: 8px;
}

:root {
    --yoti-layer-2: 0 2px 3px 0 rgba(51, 59, 64, 0.1);
    --yoti-layer-4: 0 8px 15px 0 rgba(51, 59, 64, 0.1);
    --yoti-layer-5: 0 16px 31px 0 rgba(51, 59, 64, 0.1);
}

:root {
    --z-modal-overlay: 5000;
}

:root {
    --yoti-tooltip-layer: 9999;
}

@custom-media --yoti-from-small-viewport (min-width: 576px);
@custom-media --yoti-to-small-viewport (max-width: 575px);
@custom-media --yoti-from-medium-viewport (min-width: 768px);
@custom-media --yoti-from-large-viewport (min-width: 992px);
:root {
  --yoti-blue-tint: #e5eeff;
  --yoti-blue: #2875bc;
  --yoti-blue-tone: #27619b;
  --yoti-blue-shade: #254d78;
  --yoti-blue-50: #f7faff;
  --yoti-success-green-tint: #d8fbd3;
  --yoti-success-green: #1b9f4a;
  --yoti-success-green-tone: #128547;
  --yoti-success-green-shade: #318066;
  --yoti-warning-orange-tint: #ffebca;
  --yoti-warning-orange: #db970e;
  --yoti-warning-orange-tone: #b98013;
  --yoti-warning-orange-shade: #7e5715;
  --yoti-danger-red-tint: #ffe9e4;
  --yoti-danger-red: #d5332e;
  --yoti-danger-red-tone: #b02e28;
  --yoti-danger-red-shade: #8a2821;
  --yoti-grey-lightest: #f2f4f6;
  --yoti-grey-lighter: #d0d5dc;
  --yoti-grey-light: #b5bdc8;
  --yoti-grey: #9ba5b4;
  --yoti-neutral-600: #657183;
  --yoti-grey-dark: #546072;
  --yoti-grey-black: #333b40;
  --yoti-grey-black-rgb: 51, 59, 64;
  --yoti-white: #ffffff;
  --yoti-white-rgb: 255, 255, 255;
}

@font-face {
  font-family: "GT Eesti Display";
  font-weight: 400;
  src: url(/app/assets/261c0bcc5d3fb2b9e4cc.woff2) format("woff2"), url(/app/assets/2b2023086be91fcf9b7a.woff) format("woff"), url(/app/assets/30a5a3b7a2028cad5b04.ttf) format("truetype");
}
@font-face {
  font-family: "GT Eesti Display";
  font-weight: 700;
  src: url(/app/assets/ca6cbb1e639b21af8521.woff2) format("woff2"), url(/app/assets/81707a79490c2a6de5b7.woff) format("woff"), url(/app/assets/6c8696968944b7e33161.ttf) format("truetype");
}
@font-face {
  font-family: "Lexend Deca";
  font-family: 400;
  src: url(/app/assets/b5fa3150a6e100578eda.woff2) format("woff2"), url(/app/assets/c221858a6149b9ab238f.woff) format("woff"), url(/app/assets/89566ed042cdd6bc2dd7.ttf) format("truetype");
}
@font-face {
  font-family: "Lexend Deca";
  font-weight: 700;
  src: url(/app/assets/cf15e9c4310949febf39.woff2) format("woff2"), url(/app/assets/c5d0c4daf2b1b6d3f699.woff) format("woff"), url(/app/assets/23d18146b2bb17f27e0a.ttf) format("truetype");
}
:root {
  --yds-default-font-name: GT Eesti Display;
  --yoti-font: var(--yds-default-font-name), sans-serif;
  --yds-font: var(--yoti-font);
  --yoti-text-size-hero: 52px;
  --yoti-text-size-h1: 40px;
  --yoti-text-size-h2: 32px;
  --yoti-text-size-h3: 28px;
  --yoti-text-size-h4: 24px;
  --yoti-text-size-h5: 20px;
  --yoti-text-size-h6: 16px;
  --yoti-text-size-body: 18px;
  --yoti-text-size-paragraph: 16px;
  --yoti-text-size-label: 16px;
  --yoti-text-size-small: 14px;
  --yoti-text-size-tiny: 12px;
  --yoti-text-size-titchy: 10px;
}

[lang*=vi] {
  --yds-default-font-name: Lexand Deca;
  --yoti-font: var(--yds-default-font-name), sans-serif;
  --yds-font: var(--yoti-font);
  font-family: Lexand Deca, sans-serif;
  font-family: var(--yds-font);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* stylelint-disable no-duplicate-selectors */
:root {
  --yoti-tab-focus-on-light: #f500dc;
  --yoti-tab-focus-on-dark: #ffadd2;
}

:root {
  --yoti-tab-focus: var(--yoti-tab-focus-on-light);
}

@media (prefers-color-scheme: dark) {
  :root {
    --yoti-tab-focus: var(--yoti-tab-focus-on-dark);
  }
}
.no-dark-theme {
  --yoti-tab-focus: var(--yoti-tab-focus-on-light);
}

*:focus-visible,
.yds-button:focus-visible {
  outline: 4px solid #f500dc;
  outline: 4px solid var(--yoti-tab-focus);
}

a:focus-visible {
  outline: 4px solid #f500dc;
  outline: 4px solid var(--yoti-tab-focus);
}

a > .yds-button:focus-visible {
  outline: none;
}

.yoti-checkbox__input-element {
  outline-offset: 0;
}

.yoti-switch-button__checkbox {
  outline-offset: 1px;
}

.yds-text-field__input,
.yoti-select-field__input,
.yoti-text-area__input {
  outline-offset: 2px;
}

.yds-button:focus-visible {
  outline-offset: 2px;
}

.yoti-autosuggest-field-dropdown__item:focus-visible {
  outline-offset: -4px;
}

.yoti-dropdown-menu-item:focus-visible {
  z-index: 1;
}

@supports not selector(:focus-visible) {
  *:focus,
  .yds-button:focus {
    outline: 2px solid #f500dc;
    outline: 2px solid var(--yoti-tab-focus);
  }
  a:focus {
    outline: 2px solid #f500dc;
    outline: 2px solid var(--yoti-tab-focus);
  }
  .yds-button:focus {
    outline-offset: 2px;
  }
}
/* stylelint-enable no-duplicate-selectors */
:root {
  --yoti-layer-1: 0px 2px 3px rgba(var(--yoti-grey-black-rgb), 0.1);
  --yoti-layer-2: 0px 4px 7px rgba(var(--yoti-grey-black-rgb), 0.1);
  --yoti-layer-3: 0px 8px 15px rgba(var(--yoti-grey-black-rgb), 0.1);
  --yoti-layer-4: 0px 16px 31px rgba(var(--yoti-grey-black-rgb), 0.1);
  --yoti-layer-5: 0px 32px 63px rgba(var(--yoti-grey-black-rgb), 0.1);
  --yoti-layer-6: 0px 64px 127px rgba(var(--yoti-grey-black-rgb), 0.1);
  --yoti-layer-7: 0px 20px 32px -8px rgba(9, 30, 66, 0.25), 0px 0px 1px rgba(9, 30, 66, 0.31);
}

/* this file can't be imported at the end of this file as @custom-media do not work well with minification + source map comment */
.yds-anchor {
  font-family: var(--yoti-anchor-font, var(--yds-anchor-font, var(--yds-font))); /* @deprecated --yoti-anchor-font class prefix in favour of --yds-anchor-font, deprecation will be removed on next major release */
  font-weight: bold;
}
.yds-anchor--primary {
  color: var(--yoti-blue-tone);
  --yoti-icon-color: var(--yoti-blue-tone);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.yds-anchor--primary:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.yds-anchor--primary:active {
  color: var(--yoti-blue-shade);
  --yoti-icon-color: var(--yoti-blue-shade);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.yds-anchor--light {
  color: var(--yoti-white);
  --yoti-icon-color: var(--yoti-white);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.yds-anchor--light:hover {
  color: var(--yoti-grey-lighter);
  --yoti-icon-color: var(--yoti-grey-lighter);
}
.yds-anchor--is-inline, p > .yds-anchor:not(.yds-anchor--is-not-inline) {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.yds-anchor--is-inline:hover, .yds-anchor--is-inline:focus, p > .yds-anchor:not(.yds-anchor--is-not-inline):hover, p > .yds-anchor:not(.yds-anchor--is-not-inline):focus {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.yds-anchor:hover:has(.yds-button) {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.yds-anchor:focus:has(.yds-button) {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.yoti-pagination {
  --yds-icon-color: var(--yoti-grey-dark);
  --button-radius: 4px;
  --gap-horizontal: 20px;
  --gap-vertical: 10px;
  z-index: 0;
  display: inline-flex;
  gap: 20px;
  gap: var(--gap-horizontal);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.yoti-pagination--horizontal {
  flex-direction: row;
  align-items: center;
  align-items: center;
}
.yoti-pagination--horizontal-reverse {
  flex-direction: row;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: end;
}
.yoti-pagination--vertical {
  flex-direction: column-reverse;
  gap: var(--gap-vertical);
  align-items: start;
}
.yoti-pagination--vertical-end {
  flex-direction: column-reverse;
  gap: var(--gap-vertical);
  align-items: end;
}
.yoti-pagination__text {
  font-family: var(--yds-font);
  font-size: 12px;
  font-weight: normal;
}
.yoti-pagination__list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.yoti-pagination__list-item {
  display: inline-block;
}
.yoti-pagination__list-item .yds-button {
  --yoti-button-width: 40px;
  position: relative;
  -webkit-margin-start: -2px;
     -moz-margin-start: -2px;
          margin-inline-start: -2px;
  border-radius: 0;
}
.yoti-pagination__list-item .yds-button:focus, .yoti-pagination__list-item .yds-button:active, .yoti-pagination__list-item .yds-button:hover {
  z-index: 1;
}
.yoti-pagination__list-item:first-child .yds-button {
  border-start-start-radius: var(--button-radius);
  border-end-start-radius: var(--button-radius);
}
.yoti-pagination__list-item:last-child .yds-button {
  border-start-end-radius: var(--button-radius);
  border-end-end-radius: var(--button-radius);
}.yds-icon {
  font-size: 30px;
  font-size: var(--yds-icon-size, 30px);
  color: var(--yds-icon-color);
}
.yoti-icon-placeholder {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.yoti-icon-placeholder,
.yoti-icon {
  font-size: 30px;
  font-size: var(--yoti-icon-size, 30px);
  color: var(--yoti-icon-color);
}.yoti-data-table {
  --yoti-data-table-columns-default: repeat(var(--yoti-data-table-column-number), 1fr);
  --yoti-data-table-columns-with-action-default: repeat(var(--yoti-data-table-column-number), 1fr) var(--yoti-data-table-row-action-cell-space);
  --yoti-data-table-row-action-cell-space: 50px;
  position: relative;
  display: grid;
  grid-template-columns: var(--yoti-data-table-columns, repeat(var(--yoti-data-table-column-number), 1fr));
  grid-template-columns: var(--yoti-data-table-columns, var(--yoti-data-table-columns-default));
  grid-auto-rows: auto;
  width: 100%;
  font-family: var(--yds-font);
  font-weight: normal;
  text-align: left;
  border-collapse: collapse;
  background-color: var(--yoti-white);
  border-radius: 10px;
}
.yoti-data-table--has-row-action {
  grid-template-columns: var(--yoti-data-table-columns, var(--yoti-data-table-columns-with-action-default));
}
.yoti-data-table caption {
  grid-column: 1/-1;
}
.yoti-data-table thead,
.yoti-data-table tbody,
.yoti-data-table tr {
  display: contents;
}.yoti-data-table-headers th {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: normal;
  color: var(--yoti-grey-dark);
  border-bottom: 2px solid var(--yoti-grey-light);
}.yoti-data-table-headers .yoti-data-table-header--sortable {
  padding: 0;
}
.yoti-data-table-header__sort-button {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  padding-left: 10px;
  font-family: var(--yds-font);
  color: inherit;
  cursor: pointer;
  background-color: inherit;
  border: 0;
}
.yoti-data-table-header__sort-button:hover, .yoti-data-table-header__sort-button:focus-visible {
  background-color: var(--yoti-grey-lightest);
}
.yoti-data-table-header__sort-button:active {
  background-color: var(--yoti-grey-lighter);
}
.yoti-data-table-header__sort-icon-container {
  display: flex;
  margin-left: 8px;
  --yds-icon-size: 18px;
}
.yoti-data-table-header__sort-icon {
  transition: transform 300ms;
}
.yoti-data-table-header__sort-icon--flip {
  transform: rotate(180deg) scaleX(-1);
}.yoti-data-table-row {
  --yoti-icon-size: 28px;
}
.yoti-data-table-row td {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 44px;
  padding: 5px 10px;
  font-size: 14px;
  color: var(--yoti-grey-black);
  border-bottom: 1px solid var(--yoti-grey-light);
  transition: 0.5s background-color;
}
.yoti-data-table-row:last-child td {
  border-bottom: none;
}
.yoti-data-table-row--is-selected td, .yoti-data-table-row--highlight:hover td {
  background-color: var(--yoti-grey-lightest);
}
.yoti-data-table-row--is-clickable td {
  cursor: pointer;
}
.yoti-data-table-row__action-icon {
  --yoti-icon-color: var(--yoti-grey-dark);
  opacity: 0;
  transition: 0.5s opacity;
}
.yoti-data-table-row:hover .yoti-data-table-row__action-icon {
  opacity: 1;
}
.yoti-data-table-row:hover .yoti-data-table-row__action-icon--is-clickable:hover {
  --yoti-icon-color: var(--yoti-grey-black);
  cursor: pointer;
}
.yds-text-field {
  position: relative;
  z-index: 0; /* We need this set to 0 for child elements relative to it otherwise we got stacking bugs with the icon element */
  box-sizing: border-box;
  width: 100%;
  font-family: var(--yds-font);
  font-weight: normal;
  --yoti-icon-color: var(--experimental-yds-text-field-colour-icon-enabled, var(--yoti-grey-dark)); /* @deprecated --yoti-icon-color var prefix in favour of --yds-icon-color, deprecation will be removed on next major release */
  --yds-icon-color: var(--experimental-yds-text-field-colour-icon-enabled, var(--yoti-grey-dark));
  /* Input Group */
  /* Icon */
  /* Label */
  /* Input */
  /* Tooltip */
  /* autocomplete placeholder */
}
.yds-text-field--disabled {
  opacity: 0.5;
}
.yds-text-field__input-group {
  position: relative;
  height: 52px;
  background-color: var(--experimental-yds-text-field-colour-background, var(--yoti-white));
  border: solid 2px var(--experimental-yds-text-field-colour-border-neutral-enabled, var(--yoti-grey));
  border-radius: 5px;
  transition: border-color 0.2s ease-in-out;
}
.yds-text-field__input-group:hover {
  border-color: var(--experimental-yds-text-field-colour-border-neutral-hover, var(--yoti-grey-dark));
}
.yds-text-field--invalid .yds-text-field__input-group {
  border-color: var(--experimental-yds-text-field-colour-border-critical, var(--yoti-danger-red));
}
.yds-text-field--invalid .yds-text-field__input-group:hover {
  border-color: var(--experimental-yds-text-field-colour-border-neutral-hover, var(--yoti-grey-dark));
}
.yds-text-field--disabled .yds-text-field__input-group {
  border-color: var(--yoti-grey);
}
.yds-text-field--active .yds-text-field__input-group {
  border-color: var(--experimental-yds-text-field-colour-border-neutral-focus, var(--yoti-grey-black));
}
.yds-text-field--small .yds-text-field__input-group {
  height: 40px;
}
.yds-text-field__icon {
  --cross-icon-size: 9px;
  position: absolute;
  z-index: 1;
  width: 9px;
  width: var(--cross-icon-size);
  height: 9px;
  height: var(--cross-icon-size);
}
@supports (padding-inline: 0) {
  .yds-text-field__icon {
    inset-block-start: 8px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__icon {
    top: 8px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field__icon {
    inset-inline-start: 15px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__icon {
    left: 15px;
  }
}
.yds-text-field__icon--tick {
  color: var(--experimental-yds-text-field-colour-icon-success, var(--yoti-success-green));
}
.yds-text-field__icon--cross {
  color: var(--experimental-yds-text-field-colour-icon-critical, var(--yoti-danger-red));
}
.yds-text-field--small .yds-text-field__icon {
  transform: translateY(-50%);
}
@supports (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__icon {
    inset-block-start: 50%;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__icon {
    top: 50%;
  }
}
.yds-text-field--small .yds-text-field__icon--tick {
  display: none;
}
.yds-text-field__label {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  line-height: 1;
  color: var(--experimental-yds-text-field-colour-label-enabled, var(--yoti-grey-dark));
  pointer-events: none;
  transition: transform 0.1s ease-in-out,font-size 0.1s ease-in-out,color 0.1s ease-in-out;
  transform: translateY(7px);
}
@supports (padding-inline: 0) {
  .yds-text-field__label {
    inset-block-start: 0px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__label {
    top: 0px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field__label {
    inset-inline-start: 15px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__label {
    left: 15px;
  }
}
.yds-text-field__label--full-height {
  font-size: 16px;
  transform: translateY(calc(-50% + 26px));
}
@supports (padding-inline: 0) {
  .yds-text-field__label--search-icon {
    inset-inline-start: 42px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__label--search-icon {
    left: 42px;
  }
}
.yds-text-field--invalid .yds-text-field__label, .yds-text-field--show-tick .yds-text-field__label {
  --transform: 13px, 7px;
  transform: translate(13px, 7px);
  transform: translate(var(--transform));
}
[dir=rtl] .yds-text-field--invalid .yds-text-field__label, [dir=rtl] .yds-text-field--show-tick .yds-text-field__label {
  --transform: -13px, 7px;
}
.yds-text-field--invalid .yds-text-field__label--search-icon, .yds-text-field--show-tick .yds-text-field__label--search-icon {
  --transform: 0px, 7px;
}
[dir=rtl] .yds-text-field--invalid .yds-text-field__label--search-icon, [dir=rtl] .yds-text-field--show-tick .yds-text-field__label--search-icon {
  --transform: 0px, 7px;
}
.yds-text-field--active .yds-text-field__label {
  color: var(--experimental-yds-text-field-colour-label-focus, var(--yoti-grey-dark));
}
.yds-text-field--small .yds-text-field__label {
  font-size: 14px;
  transform: translateY(0);
}
@supports (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__label {
    inset-block-start: 12px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__label {
    top: 12px;
  }
}
.yds-text-field--small.yds-text-field--has-value .yds-text-field__label {
  position: absolute;
  top: auto;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.yds-text-field--small.yds-text-field--invalid .yds-text-field__label {
  --transform-x: 17px;
  transform: translateY(0) translateX(17px);
  transform: translateY(0) translateX(var(--transform-x));
}
[dir=rtl] .yds-text-field--small.yds-text-field--invalid .yds-text-field__label {
  --transform-x: -17px;
}
.yds-text-field--small.yds-text-field--invalid .yds-text-field__label--search-icon {
  transform: translateX(0);
}
.yds-text-field__input {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 16px;
  line-height: 1;
  color: var(--experimental-yds-text-field-colour-text, var(--yoti-grey-black));
  text-overflow: ellipsis;
  resize: none;
  background: transparent;
  border: none;
  border-radius: 3px;
}
@supports (padding-inline: 0) {
  .yds-text-field__input {
    -webkit-padding-before: 24px;
            padding-block-start: 24px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__input {
    padding-top: 24px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field__input {
    -webkit-padding-after: 6px;
            padding-block-end: 6px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__input {
    padding-bottom: 6px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field__input {
    -webkit-padding-start: 15px;
       -moz-padding-start: 15px;
            padding-inline-start: 15px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__input {
    padding-left: 15px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field__input {
    -webkit-padding-end: 10px;
       -moz-padding-end: 10px;
            padding-inline-end: 10px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__input {
    padding-right: 10px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field__input--search-icon {
    -webkit-padding-start: 42px;
       -moz-padding-start: 42px;
            padding-inline-start: 42px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__input--search-icon {
    padding-left: 42px;
  }
}
.yds-text-field__input::-webkit-search-decoration, .yds-text-field__input::-webkit-search-cancel-button, .yds-text-field__input::-webkit-search-results-button, .yds-text-field__input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.yds-text-field__input::-webkit-input-placeholder {
  color: var(--yoti-grey);
}
.yds-text-field__input::-moz-placeholder {
  color: var(--yoti-grey);
}
.yds-text-field__input::-ms-input-placeholder {
  color: var(--yoti-grey);
}
.yds-text-field__input::placeholder {
  color: var(--yoti-grey);
}
.yds-text-field--small .yds-text-field__input {
  font-size: 14px;
}
@supports (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__input {
    -webkit-padding-before: 10px;
            padding-block-start: 10px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__input {
    padding-top: 10px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__input {
    -webkit-padding-after: 9px;
            padding-block-end: 9px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__input {
    padding-bottom: 9px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__input {
    -webkit-padding-start: 15px;
       -moz-padding-start: 15px;
            padding-inline-start: 15px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__input {
    padding-left: 15px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__input {
    -webkit-padding-end: 10px;
       -moz-padding-end: 10px;
            padding-inline-end: 10px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__input {
    padding-right: 10px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__input--search-icon {
    -webkit-padding-start: 42px;
       -moz-padding-start: 42px;
            padding-inline-start: 42px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__input--search-icon {
    padding-left: 42px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field--small.yds-text-field--invalid .yds-text-field__input {
    -webkit-padding-start: 32px;
       -moz-padding-start: 32px;
            padding-inline-start: 32px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field--small.yds-text-field--invalid .yds-text-field__input {
    padding-left: 32px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field--small.yds-text-field--invalid .yds-text-field__input--search-icon {
    -webkit-padding-start: 42px;
       -moz-padding-start: 42px;
            padding-inline-start: 42px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field--small.yds-text-field--invalid .yds-text-field__input--search-icon {
    padding-left: 42px;
  }
}
.yds-text-field__tooltip {
  position: absolute;
  position: var(--yds-text-field-tooltip-position, var(--yoti-text-field-tooltip-position, absolute)); /* @deprecated --yoti-text-field-tooltip-position class prefix in favour of --yds-text-field-tooltip-position, deprecation will be removed on next major release */
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  min-height: 17px;
  font-size: 12px;
  color: var(--experimental-yds-text-field-colour-text-hint, var(--yoti-grey-dark));
}
@supports (padding-inline: 0) {
  .yds-text-field__tooltip {
    inset-block-start: 100%;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__tooltip {
    top: 100%;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field__tooltip {
    -webkit-padding-before: 4px;
            padding-block-start: 4px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__tooltip {
    padding-top: 4px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field__tooltip {
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__tooltip {
    padding-bottom: 0;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field__tooltip {
    -webkit-padding-start: 2px;
       -moz-padding-start: 2px;
            padding-inline-start: 2px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__tooltip {
    padding-left: 2px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field__tooltip {
    -webkit-padding-end: 2px;
       -moz-padding-end: 2px;
            padding-inline-end: 2px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__tooltip {
    padding-right: 2px;
  }
}
.yds-text-field__tooltip--error {
  color: var(--experimental-yds-text-field-colour-text-error, var(--yoti-danger-red-shade));
}
.yds-text-field__tooltip--floating {
  width: 100%;
  padding: 4px;
  background-color: var(--yoti-white);
  border-radius: 4px;
  box-shadow: 0 2px 3px 0 rgba(var(--yoti-grey-black-rgb), 0.1);
}
.yds-text-field__tooltip--floating:empty {
  display: none;
}
.yds-text-field__search-icon {
  position: absolute;
  z-index: 1;
}
@supports (padding-inline: 0) {
  .yds-text-field__search-icon {
    inset-block-start: 10px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__search-icon {
    top: 10px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field__search-icon {
    inset-inline-start: 8px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__search-icon {
    left: 8px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field__search-icon--small {
    inset-block-start: 6px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__search-icon--small {
    top: 6px;
  }
}
.yds-text-field__search-icon--invalid {
  --yoti-icon-color: var(--experimental-yds-text-field-colour-icon-critical, var(--yoti-danger-red));
}
.yds-text-field__action-icon {
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  background-color: transparent;
  border-width: 0;
  position: absolute;
  top: 12px;
  display: flex;
  cursor: pointer;
}
@supports (padding-inline: 0) {
  .yds-text-field__action-icon {
    inset-inline-end: 12px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__action-icon {
    right: 12px;
  }
}
.yds-text-field--disabled .yds-text-field__action-icon {
  pointer-events: none;
}
@supports (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__action-icon {
    inset-block-start: 6px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__action-icon {
    top: 6px;
  }
}
.yds-text-field--date .yds-text-field__action-icon {
  pointer-events: none;
}
.yds-text-field__autocomplete-placeholder {
  position: absolute;
  pointer-events: none;
}
@supports (padding-inline: 0) {
  .yds-text-field__autocomplete-placeholder {
    inset-block-end: 7px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__autocomplete-placeholder {
    bottom: 7px;
  }
}
@supports (padding-inline: 0) {
  .yds-text-field__autocomplete-placeholder {
    inset-inline-start: 17px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field__autocomplete-placeholder {
    left: 17px;
  }
}
.yds-text-field--small .yds-text-field__autocomplete-placeholder {
  font-size: 14px;
}
@supports (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__autocomplete-placeholder {
    inset-block-end: 11px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field--small .yds-text-field__autocomplete-placeholder {
    bottom: 11px;
  }
}
.yds-text-field__autocomplete-placeholder-hidden {
  color: transparent;
}.yds-icon {
  font-size: 30px;
  font-size: var(--yds-icon-size, 30px);
  color: var(--yds-icon-color);
}@supports (padding-inline: 0) {
  .yds-text-field--has-action-icon:not(.yds-text-field--date) .yds-text-field__input {
    -webkit-padding-end: 47px;
       -moz-padding-end: 47px;
            padding-inline-end: 47px;
  }
}
@supports not (padding-inline: 0) {
  .yds-text-field--has-action-icon:not(.yds-text-field--date) .yds-text-field__input {
    padding-right: 47px;
  }
}
.yds-text-field--date .yds-text-field__input::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 44px;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
[dir=rtl] .yds-text-field--date .yds-text-field__input::-webkit-calendar-picker-indicator {
  left: 0;
}
[dir=rtl] .yds-text-field--date .yds-text-field__input {
  text-align: right;
}
.yds-text-field--date .yds-text-field__input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}.yoti-icon-placeholder {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.yoti-icon-placeholder,
.yoti-icon {
  font-size: 30px;
  font-size: var(--yoti-icon-size, 30px);
  color: var(--yoti-icon-color);
}
.yoti-select-field {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--yds-font);
  font-weight: normal;
  color: var(--yoti-black);
  /* Input Group */
  /* Icon */
  /* Label */
  /* Input */
  /* Down chevron */
  /* Tooltip */
}
.yoti-select-field--disabled {
  opacity: 0.5;
}
.yoti-select-field__input-group {
  position: relative;
  height: 52px;
  background-color: var(--yoti-white);
  border: solid 2px var(--yoti-grey);
  border-radius: 5px;
  transition: border-color 0.2s;
}
.yoti-select-field__input-group:hover {
  border-color: var(--yoti-grey-dark);
}
.yoti-select-field--invalid .yoti-select-field__input-group {
  border-color: var(--yoti-danger-red);
}
.yoti-select-field--disabled .yoti-select-field__input-group {
  border-color: var(--yoti-grey);
}
.yoti-select-field--active .yoti-select-field__input-group {
  border-color: var(--yoti-black);
}
.yoti-select-field--small .yoti-select-field__input-group {
  height: 36px;
}
.yoti-select-field__icon {
  position: absolute;
  z-index: 1;
}
@supports (padding-inline: 0) {
  .yoti-select-field__icon {
    inset-block-start: 9px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field__icon {
    top: 9px;
  }
}
@supports (padding-inline: 0) {
  .yoti-select-field__icon {
    inset-inline-start: 12px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field__icon {
    left: 12px;
  }
}
.yoti-select-field__icon--cross {
  --cross-icon-size: 9px;
  width: 9px;
  width: var(--cross-icon-size);
  height: 9px;
  height: var(--cross-icon-size);
  color: var(--yoti-danger-red);
}
.yoti-select-field--small .yoti-select-field__icon {
  transform: translateY(-50%);
}
@supports (padding-inline: 0) {
  .yoti-select-field--small .yoti-select-field__icon {
    inset-block-start: 50%;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field--small .yoti-select-field__icon {
    top: 50%;
  }
}
@supports (padding-inline: 0) {
  .yoti-select-field--small .yoti-select-field__icon {
    inset-inline-start: 15px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field--small .yoti-select-field__icon {
    left: 15px;
  }
}
.yoti-select-field__label {
  position: absolute;
  z-index: 1;
  font-size: 12px;
  line-height: 1;
  color: var(--yoti-grey-dark);
  pointer-events: none;
  transition: transform 0.1s ease-in-out,font-size 0.1s ease-in-out,color 0.1s ease-in-out;
  transform: translateY(7px);
}
@supports (padding-inline: 0) {
  .yoti-select-field__label {
    inset-block-start: 0px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field__label {
    top: 0px;
  }
}
@supports (padding-inline: 0) {
  .yoti-select-field__label {
    inset-inline-start: 15px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field__label {
    left: 15px;
  }
}
.yoti-select-field__label--full-height {
  font-size: 16px;
  transform: translateY(calc(-50% + 26px));
}
.yoti-select-field--invalid .yoti-select-field__label {
  transform: translateY(7px);
}
@supports (padding-inline: 0) {
  .yoti-select-field--invalid .yoti-select-field__label {
    inset-inline-start: 28px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field--invalid .yoti-select-field__label {
    left: 28px;
  }
}
.yoti-select-field--active .yoti-select-field__label {
  color: var(--yoti-grey-dark);
}
.yoti-select-field--small .yoti-select-field__label {
  font-size: 14px;
  transform: translateY(-50%);
}
@supports (padding-inline: 0) {
  .yoti-select-field--small .yoti-select-field__label {
    inset-block-start: 50%;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field--small .yoti-select-field__label {
    top: 50%;
  }
}
.yoti-select-field--small.yoti-select-field--has-value .yoti-select-field__label {
  display: none;
}
.yoti-select-field--small.yoti-select-field--invalid .yoti-select-field__label {
  transform: translateY(-50%) translateX(16px);
}
.yoti-select-field__input {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: var(--yoti-grey-black);
  resize: none;
  background: transparent;
  border: none;
  border-radius: 3px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
@supports (padding-inline: 0) {
  .yoti-select-field__input {
    -webkit-padding-before: 24px;
            padding-block-start: 24px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field__input {
    padding-top: 24px;
  }
}
@supports (padding-inline: 0) {
  .yoti-select-field__input {
    -webkit-padding-after: 6px;
            padding-block-end: 6px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field__input {
    padding-bottom: 6px;
  }
}
@supports (padding-inline: 0) {
  .yoti-select-field__input {
    -webkit-padding-start: 15px;
       -moz-padding-start: 15px;
            padding-inline-start: 15px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field__input {
    padding-left: 15px;
  }
}
@supports (padding-inline: 0) {
  .yoti-select-field__input {
    -webkit-padding-end: 38px;
       -moz-padding-end: 38px;
            padding-inline-end: 38px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field__input {
    padding-right: 38px;
  }
}
.yoti-select-field__input::-ms-expand {
  display: none;
}
.yoti-select-field__input--empty {
  color: transparent;
}
.yoti-select-field__input--empty option {
  color: var(--yoti-grey-black);
}
.yoti-select-field--small .yoti-select-field__input {
  font-size: 14px;
}
@supports (padding-inline: 0) {
  .yoti-select-field--small .yoti-select-field__input {
    -webkit-padding-before: 10px;
            padding-block-start: 10px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field--small .yoti-select-field__input {
    padding-top: 10px;
  }
}
@supports (padding-inline: 0) {
  .yoti-select-field--small .yoti-select-field__input {
    -webkit-padding-after: 6px;
            padding-block-end: 6px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field--small .yoti-select-field__input {
    padding-bottom: 6px;
  }
}
@supports (padding-inline: 0) {
  .yoti-select-field--small .yoti-select-field__input {
    -webkit-padding-start: 15px;
       -moz-padding-start: 15px;
            padding-inline-start: 15px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field--small .yoti-select-field__input {
    padding-left: 15px;
  }
}
@supports (padding-inline: 0) {
  .yoti-select-field--small .yoti-select-field__input {
    -webkit-padding-end: 38px;
       -moz-padding-end: 38px;
            padding-inline-end: 38px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field--small .yoti-select-field__input {
    padding-right: 38px;
  }
}
@supports (padding-inline: 0) {
  .yoti-select-field--small.yoti-select-field--invalid .yoti-select-field__input {
    -webkit-padding-start: 32px;
       -moz-padding-start: 32px;
            padding-inline-start: 32px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field--small.yoti-select-field--invalid .yoti-select-field__input {
    padding-left: 32px;
  }
}
.yoti-select-field__icon-chevron {
  position: absolute;
  font-size: 22px;
  color: var(--yoti-grey);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transform: translateY(-50%);
}
@supports (padding-inline: 0) {
  .yoti-select-field__icon-chevron {
    inset-block-start: 50%;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field__icon-chevron {
    top: 50%;
  }
}
@supports (padding-inline: 0) {
  .yoti-select-field__icon-chevron {
    inset-inline-end: 13px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field__icon-chevron {
    right: 13px;
  }
}
.yoti-select-field__tooltip {
  position: absolute;
  position: var(--yoti-select-field-tooltip-position, absolute);
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  min-height: 17px;
  font-size: 12px;
  color: var(--yoti-grey-dark);
}
@supports (padding-inline: 0) {
  .yoti-select-field__tooltip {
    inset-block-start: 100%;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field__tooltip {
    top: 100%;
  }
}
@supports (padding-inline: 0) {
  .yoti-select-field__tooltip {
    -webkit-padding-before: 4px;
            padding-block-start: 4px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field__tooltip {
    padding-top: 4px;
  }
}
@supports (padding-inline: 0) {
  .yoti-select-field__tooltip {
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field__tooltip {
    padding-bottom: 0;
  }
}
@supports (padding-inline: 0) {
  .yoti-select-field__tooltip {
    -webkit-padding-start: 2px;
       -moz-padding-start: 2px;
            padding-inline-start: 2px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field__tooltip {
    padding-left: 2px;
  }
}
@supports (padding-inline: 0) {
  .yoti-select-field__tooltip {
    -webkit-padding-end: 2px;
       -moz-padding-end: 2px;
            padding-inline-end: 2px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-select-field__tooltip {
    padding-right: 2px;
  }
}
.yoti-select-field__tooltip--error {
  color: var(--yoti-danger-red-shade);
}
.yoti-select-field__tooltip--floating {
  width: 100%;
  padding: 4px;
  background-color: var(--yoti-white);
  border-radius: 4px;
  box-shadow: 0 2px 3px 0 rgba(var(--yoti-grey-black-rgb), 0.1);
}
.yoti-select-field__tooltip--floating:empty {
  display: none;
}
@keyframes yoti-loading-roll {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.yoti-loading--central {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  line-height: 0;
  text-align: center;
}
.yoti-loading__icon {
  --yds-icon-size: var(--yoti-loading-size, 50px);
  --yds-icon-color: var(--yoti-loading-color, var(--yoti-blue));
  animation: yoti-loading-roll 1.5s infinite;
}.yoti-icon-placeholder {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.yoti-icon-placeholder,
.yoti-icon {
  font-size: 30px;
  font-size: var(--yoti-icon-size, 30px);
  color: var(--yoti-icon-color);
}
.yoti-chip {
  --yoti-icon-size: 22px;
  --yds-icon-size: 22px;
  --height: 30px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: var(--yds-chip-width, var(--yoti-chip-width));
  height: 30px;
  height: var(--height);
  padding: 8px 12px;
  font-family: var(--yds-font);
  font-size: var(--yoti-text-size-h6);
  font-weight: 400;
  line-height: 19px;
  border: 1px;
  border-radius: 17px;
}
.yoti-chip--info {
  --yds-icon-color: $fgColor;
  color: var(--yoti-blue-shade);
  background-color: var(--yoti-blue-tint);
  border-color: var(--yoti-blue-shade);
}
.yoti-chip--success {
  --yds-icon-color: $fgColor;
  color: var(--yoti-success-green-shade);
  background-color: var(--yoti-success-green-tint);
  border-color: var(--yoti-success-green-shade);
}
.yoti-chip--warning {
  --yds-icon-color: $fgColor;
  color: var(--yoti-warning-orange-shade);
  background-color: var(--yoti-warning-orange-tint);
  border-color: var(--yoti-warning-orange-shade);
}
.yoti-chip--danger {
  --yds-icon-color: $fgColor;
  color: var(--yoti-danger-red-shade);
  background-color: var(--yoti-danger-red-tint);
  border-color: var(--yoti-danger-red-shade);
}
.yoti-chip--neutral {
  --yds-icon-color: $fgColor;
  color: var(--yoti-grey-dark);
  background-color: var(--yoti-grey-lightest);
  border-color: var(--yoti-grey-dark);
}
.yoti-chip--medium {
  --height: 24px;
  padding: 8px 12px;
  font-size: var(--yoti-text-size-small);
  line-height: 16px;
  border-radius: 12px;
}
.yoti-chip--small {
  --height: 22px;
  gap: 10px;
  padding: 4px 8px;
  font-size: var(--yoti-text-size-tiny);
  line-height: 14px;
  border-radius: 12px;
}
.yoti-chip__icon {
  margin-top: 4px;
}
.yoti-chip--with-icon {
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border-radius: 15px;
}
.yoti-chip--with-icon.yoti-chip--medium {
  --yoti-icon-size: 20px;
  --yds-icon-size: 20px;
  gap: 4px;
  padding: 4px 12px 4px 8px;
  border-radius: 12px;
}
.yoti-chip--with-icon.yoti-chip--small {
  --yoti-icon-size: 18px;
  --yds-icon-size: 18px;
  gap: 4px;
  padding: 3px 8px 3px 4px;
  border-radius: 12px;
}.yoti-icon-placeholder {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.yoti-icon-placeholder,
.yoti-icon {
  font-size: 30px;
  font-size: var(--yoti-icon-size, 30px);
  color: var(--yoti-icon-color);
}
.yoti-radio-buttons {
  font-family: var(--yds-font);
  font-weight: normal;
  color: var(--yoti-black);
}

.yoti-radio-buttons__list {
  display: grid;
  grid-gap: 8px;
}.yoti-radio-button {
  position: relative;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 16px;
  line-height: 22px;
}
.yoti-radio-button--disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.yoti-radio-buttons__label {
  font-family: var(--yds-font);
  font-weight: normal;
  cursor: pointer;
}
@supports (padding-inline: 0) {
  .yoti-radio-buttons__label {
    -webkit-margin-start: 9px;
       -moz-margin-start: 9px;
            margin-inline-start: 9px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-radio-buttons__label {
    margin-left: 9px;
  }
}
.yoti-radio-buttons__label::after {
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  content: "";
}

.yoti-radio-button__input {
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  cursor: pointer;
  border-radius: 50%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.yoti-radio-button__input::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background: var(--yoti-white);
  border: 2px solid var(--yoti-grey-black);
  border-radius: 50%;
  transition: background 0.1s, border-color 0.1s;
}

.yoti-radio-button__input--checked::before {
  background: var(--yoti-success-green);
}
.yoti-radio-button__input--checked::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--yoti-white);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.yoti-field-addon {
  z-index: 0;
  box-sizing: border-box;
  display: inline-flex;
  height: 52px;
  padding: 0 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: var(--yoti-white);
  border: solid 2px var(--yoti-grey);
  border-radius: 5px;
  transition: border-color 0.15s ease-in-out;
}
.yoti-field-addon--is-selectable {
  cursor: pointer;
}
.yoti-field-addon--small {
  height: 40px;
  padding: 0 8px;
}
.yoti-field-addon--error {
  border-color: var(--yoti-danger-red);
}
.yoti-field-addon__items-layout {
  display: grid;
  grid-template-columns: repeat(1, auto);
  grid-template-columns: repeat(var(--yoti-field-addon-columns, 1), auto);
  grid-gap: 8px;
  align-items: center;
  width: 100%;
}
.yoti-field-addon--small .yoti-field-addon__items-layout {
  grid-gap: 4px;
}
.yoti-field-addon__selection-image {
  max-width: 24px;
  max-height: 20px;
  margin-left: 6px;
}
.yoti-field-addon--small .yoti-field-addon__selection-image {
  max-width: 20px;
  max-height: 16px;
}
.yoti-field-addon__selection-text {
  width: auto;
  width: var(--yoti-field-addon-text-width, auto);
  font-family: var(--yds-font);
  font-size: 16px;
  font-weight: normal;
  color: var(--yoti-grey-dark);
  white-space: nowrap;
}
.yoti-field-addon--small .yoti-field-addon__selection-text {
  font-size: 14px;
}
.yoti-field-addon__change-selection-icon {
  justify-self: end;
  font-size: 28px;
  color: var(--yoti-grey);
}
.yoti-field-addon--small .yoti-field-addon__change-selection-icon {
  font-size: 20px;
}.yoti-with-native-select {
  position: relative;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
.yoti-with-native-select .yoti-field-addon {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.yoti-with-native-select__select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 5px;
  -webkit-appearance: menulist-button;
}
.yoti-with-native-select__focus-ring {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border: 2px solid;
  border-radius: 5px;
  opacity: 0;
}
.yoti-with-native-select__select:hover + .yoti-with-native-select__focus-ring, .yoti-with-native-select__select:focus + .yoti-with-native-select__focus-ring {
  z-index: 1;
  opacity: 1;
}
.yoti-with-native-select__select:hover + .yoti-with-native-select__focus-ring {
  border-color: var(--yoti-grey-dark);
}
.yoti-with-native-select__select:focus + .yoti-with-native-select__focus-ring {
  border-color: var(--yoti-grey-black);
}
.yoti-group-fields {
  z-index: 0;
  display: flex;
  font-family: var(--yds-font);
}
.yoti-group-fields > .yoti-field-addon, .yoti-group-fields > .yoti-with-native-select .yoti-field-addon, .yoti-group-fields > .yoti-with-native-select .yoti-with-native-select__focus-ring, .yoti-group-fields > .yds-text-field .yds-text-field__input-group {
  border-radius: 0;
}
.yoti-group-fields > .yoti-field-addon:first-child, .yoti-group-fields > .yoti-with-native-select:first-child .yoti-field-addon, .yoti-group-fields > .yoti-with-native-select:first-child .yoti-with-native-select__focus-ring, .yoti-group-fields > .yds-text-field:first-child .yds-text-field__input-group {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.yoti-group-fields > .yoti-field-addon:last-child, .yoti-group-fields > .yoti-with-native-select:last-child .yoti-field-addon, .yoti-group-fields > .yoti-with-native-select:last-child .yoti-with-native-select__focus-ring, .yoti-group-fields > .yds-text-field:last-child .yds-text-field__input-group {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.yoti-group-fields > .yds-text-field:first-child {
  margin-right: -2px;
}
.yoti-group-fields > .yds-text-field:last-child {
  margin-left: -2px;
}
.yoti-group-fields > .yoti-field-addon:hover, .yoti-group-fields > .yoti-field-addon:focus, .yoti-group-fields > .yds-text-field:hover, .yoti-group-fields > .yds-text-field.yds-text-field--active {
  z-index: 1;
}
.yoti-notification {
  display: grid;
  grid-template-rows: var(--yoti-notification-grid-template-rows);
  grid-template-columns: var(--yoti-notification-grid-template-columns);
  grid-row-gap: 8px;
  row-gap: 8px;
  grid-column-gap: 8px;
  -webkit-column-gap: 8px;
     -moz-column-gap: 8px;
          column-gap: 8px;
  align-items: center;
  font-family: var(--yds-font);
  font-size: 14px;
  font-weight: normal;
  color: var(--yoti-grey-dark);
  background-color: var(--yoti-white);
  border-radius: 4px;
  box-shadow: var(--yoti-layer-7);
}
.yoti-notification--line {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  width: var(--yoti-notification-width, -webkit-fit-content);
  width: var(--yoti-notification-width, -moz-fit-content);
  width: var(--yoti-notification-width, fit-content);
  min-height: 50px;
}
@supports (padding-inline: 0) {
  .yoti-notification--line {
    -webkit-padding-before: 8px;
            padding-block-start: 8px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-notification--line {
    padding-top: 8px;
  }
}
@supports (padding-inline: 0) {
  .yoti-notification--line {
    -webkit-padding-after: 8px;
            padding-block-end: 8px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-notification--line {
    padding-bottom: 8px;
  }
}
@supports (padding-inline: 0) {
  .yoti-notification--line {
    -webkit-padding-start: 16px;
       -moz-padding-start: 16px;
            padding-inline-start: 16px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-notification--line {
    padding-left: 16px;
  }
}
@supports (padding-inline: 0) {
  .yoti-notification--line {
    -webkit-padding-end: 16px;
       -moz-padding-end: 16px;
            padding-inline-end: 16px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-notification--line {
    padding-right: 16px;
  }
}
.yoti-notification--box {
  width: 288px;
  width: var(--yoti-notification-width, 288px);
  padding: 16px;
}
.yoti-notification__title {
  box-sizing: content-box;
  margin: 0;
  font-family: var(--yds-font);
  font-size: 14px;
  font-weight: normal;
  color: var(--yoti-grey-black);
}
.yoti-notification--box .yoti-notification__description {
  grid-row: 2/span 1;
  grid-column: 2/span 1;
  align-self: start;
  justify-self: start;
  place-self: start;
  align-self: start;
}
.yoti-notification--line .yoti-notification__action-button {
  align-self: end;
  justify-self: end;
  place-self: end;
  align-self: center;
}
@supports (padding-inline: 0) {
  .yoti-notification--line .yoti-notification__action-button {
    -webkit-margin-start: 16px;
       -moz-margin-start: 16px;
            margin-inline-start: 16px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-notification--line .yoti-notification__action-button {
    margin-left: 16px;
  }
}
.yoti-notification--box .yoti-notification__action-button {
  grid-row: 3/4;
  grid-column: 2/4;
  align-self: end;
  justify-self: end;
  place-self: end;
}
.yoti-notification__close-button {
  padding: 0;
  line-height: 0;
  background: none;
  border: none;
}
@supports (padding-inline: 0) {
  .yoti-notification--line .yoti-notification__action-button + .yoti-notification__close-button {
    -webkit-margin-start: 16px;
       -moz-margin-start: 16px;
            margin-inline-start: 16px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-notification--line .yoti-notification__action-button + .yoti-notification__close-button {
    margin-left: 16px;
  }
}
.yoti-notification__close-button-icon {
  --yds-icon-size: 28px;
  --yds-icon-color: var(--yoti-grey-dark);
  cursor: pointer;
  transition: 0.5s opacity;
}
.yoti-notification__close-button-icon:hover {
  --yds-icon-color: var(--yoti-grey-black);
  opacity: 1;
}.yds-notification-badge {
  display: flex;
}.yoti-icon-placeholder {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.yoti-icon-placeholder,
.yoti-icon {
  font-size: 30px;
  font-size: var(--yoti-icon-size, 30px);
  color: var(--yoti-icon-color);
}
.yoti-tooltip {
  position: absolute;
  z-index: 10;
  z-index: var(--yoti-tooltip-layer, 10);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  width: var(--yoti-tooltip-width, -webkit-max-content);
  width: var(--yoti-tooltip-width, -moz-max-content);
  width: var(--yoti-tooltip-width, max-content);
  /* body */
  /* arrow */
}
.yoti-tooltip--small {
  font-size: 14px;
}
.yoti-tooltip--medium {
  font-size: 16px;
}
.yoti-tooltip--up-left {
  right: 0;
  bottom: calc(100% + 8px + 4px);
  bottom: calc(100% + 8px + var(--yoti-tooltip-gap, 4px));
  transform: translateX(6px);
}
.yoti-tooltip--up {
  bottom: calc(100% + 8px + 4px);
  bottom: calc(100% + 8px + var(--yoti-tooltip-gap, 4px));
  left: 50%;
  transform: translateX(-50%);
}
.yoti-tooltip--up-right {
  bottom: calc(100% + 8px + 4px);
  bottom: calc(100% + 8px + var(--yoti-tooltip-gap, 4px));
  left: 50%;
  transform: translateX(-30px);
}
.yoti-tooltip--right-up {
  bottom: 50%;
  left: calc(100% + 8px + 4px);
  left: calc(100% + 8px + var(--yoti-tooltip-gap, 4px));
  transform: translateY(30px);
}
.yoti-tooltip--right {
  top: 50%;
  left: calc(100% + 8px + 4px);
  left: calc(100% + 8px + var(--yoti-tooltip-gap, 4px));
  transform: translateY(-50%);
}
.yoti-tooltip--right-down {
  top: 50%;
  left: calc(100% + 8px + 4px);
  left: calc(100% + 8px + var(--yoti-tooltip-gap, 4px));
  transform: translateY(-30px);
}
.yoti-tooltip--down-right {
  top: calc(100% + 8px + 4px);
  top: calc(100% + 8px + var(--yoti-tooltip-gap, 4px));
  left: 50%;
  transform: translateX(-30px);
}
.yoti-tooltip--down {
  top: calc(100% + 8px + 4px);
  top: calc(100% + 8px + var(--yoti-tooltip-gap, 4px));
  left: 50%;
  transform: translateX(-50%);
}
.yoti-tooltip--down-left {
  top: calc(100% + 8px + 4px);
  top: calc(100% + 8px + var(--yoti-tooltip-gap, 4px));
  right: 50%;
  transform: translateX(30px);
}
.yoti-tooltip--left-up {
  right: calc(100% + 8px + 4px);
  right: calc(100% + 8px + var(--yoti-tooltip-gap, 4px));
  bottom: 50%;
  transform: translateY(30px);
}
.yoti-tooltip--left {
  top: 50%;
  right: calc(100% + 8px + 4px);
  right: calc(100% + 8px + var(--yoti-tooltip-gap, 4px));
  transform: translateY(-50%);
}
.yoti-tooltip--left-down {
  top: 50%;
  right: calc(100% + 8px + 4px);
  right: calc(100% + 8px + var(--yoti-tooltip-gap, 4px));
  transform: translateY(-30px);
}
.yoti-tooltip__body {
  font-family: var(--yds-font);
  font-weight: normal;
  color: var(--yoti-white);
  background-color: var(--yoti-grey-black);
  border-radius: 8px;
}
.yoti-tooltip--small .yoti-tooltip__body {
  padding: 8px 8px;
}
.yoti-tooltip--medium .yoti-tooltip__body {
  padding: 10px 17px;
}
.yoti-tooltip__arrow {
  width: 0;
  height: 0;
  border-top: 8px solid var(--yoti-grey-black);
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  position: absolute;
  width: 16px;
  height: 16px;
}
.yoti-tooltip--up-left .yoti-tooltip__arrow {
  top: 100%;
  right: 22px;
}
.yoti-tooltip--up .yoti-tooltip__arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.yoti-tooltip--up-right .yoti-tooltip__arrow {
  top: 100%;
  left: 22px;
}
.yoti-tooltip--right-up .yoti-tooltip__arrow {
  right: 100%;
  bottom: 22px;
  transform: rotate(90deg);
}
.yoti-tooltip--right .yoti-tooltip__arrow {
  top: 50%;
  right: 100%;
  transform: rotate(90deg) translateX(-50%);
}
.yoti-tooltip--right-down .yoti-tooltip__arrow {
  top: 22px;
  right: 100%;
  transform: rotate(90deg);
}
.yoti-tooltip--down-right .yoti-tooltip__arrow {
  bottom: 100%;
  left: 22px;
  transform: rotate(180deg);
}
.yoti-tooltip--down .yoti-tooltip__arrow {
  bottom: 100%;
  left: 50%;
  transform: rotate(180deg) translateX(50%);
}
.yoti-tooltip--down-left .yoti-tooltip__arrow {
  right: 22px;
  bottom: 100%;
  transform: rotate(180deg);
}
.yoti-tooltip--left-up .yoti-tooltip__arrow {
  bottom: 22px;
  left: 100%;
  transform: rotate(270deg);
}
.yoti-tooltip--left .yoti-tooltip__arrow {
  top: 50%;
  left: 100%;
  transform: rotate(270deg) translateX(50%);
}
.yoti-tooltip--left-down .yoti-tooltip__arrow {
  top: 22px;
  left: 100%;
  transform: rotate(270deg);
}
.yds-alert {
  position: relative;
  display: flex;
  padding: 10px;
  font-family: var(--yds-font);
  font-weight: normal;
}
.yds-alert--small {
  --yoti-icon-size: 22px;
  --yds-icon-size: 22px;
  width: 281px;
  width: var(--yds-alert-width, var(--yoti-alert-width, 281px)); /* @deprecated --yoti-alert-width deprecated in favour of --yds-alert-width, deprecation will be removed on next major release */
  font-size: 12px;
  line-height: 14px;
  border-radius: 4px;
}
@supports (padding-inline: 0) {
  .yds-alert--small {
    -webkit-padding-before: 8px;
            padding-block-start: 8px;
  }
}
@supports not (padding-inline: 0) {
  .yds-alert--small {
    padding-top: 8px;
  }
}
@supports (padding-inline: 0) {
  .yds-alert--small {
    -webkit-padding-after: 8px;
            padding-block-end: 8px;
  }
}
@supports not (padding-inline: 0) {
  .yds-alert--small {
    padding-bottom: 8px;
  }
}
@supports (padding-inline: 0) {
  .yds-alert--small {
    -webkit-padding-start: 16px;
       -moz-padding-start: 16px;
            padding-inline-start: 16px;
  }
}
@supports not (padding-inline: 0) {
  .yds-alert--small {
    padding-left: 16px;
  }
}
@supports (padding-inline: 0) {
  .yds-alert--small {
    -webkit-padding-end: 16px;
       -moz-padding-end: 16px;
            padding-inline-end: 16px;
  }
}
@supports not (padding-inline: 0) {
  .yds-alert--small {
    padding-right: 16px;
  }
}
@supports (padding-inline: 0) {
  .yds-alert--small.yds-alert--has-icon {
    -webkit-padding-start: 8px;
       -moz-padding-start: 8px;
            padding-inline-start: 8px;
  }
}
@supports not (padding-inline: 0) {
  .yds-alert--small.yds-alert--has-icon {
    padding-left: 8px;
  }
}
@supports (padding-inline: 0) {
  .yds-alert--small.yds-alert--has-icon {
    -webkit-padding-end: 8px;
       -moz-padding-end: 8px;
            padding-inline-end: 8px;
  }
}
@supports not (padding-inline: 0) {
  .yds-alert--small.yds-alert--has-icon {
    padding-right: 8px;
  }
}
.yds-alert--medium {
  --yoti-icon-size: 22px;
  --yds-icon-size: 22px;
  width: 360px;
  width: var(--yds-alert-width, var(--yoti-alert-width, 360px)); /* @deprecated --yoti-alert-width deprecated in favour of --yds-alert-width, deprecation will be removed on next major release */
  padding: 16px;
  font-size: 16px;
  line-height: 24px;
  border-radius: 4px;
}
.yds-alert--large {
  --yoti-icon-size: 28px;
  --yds-icon-size: 28px;
  width: 381px;
  width: var(--yds-alert-width, var(--yoti-alert-width, 381px)); /* @deprecated --yoti-alert-width deprecated in favour of --yds-alert-width, deprecation will be removed on next major release */
  padding: 24px;
  font-size: 16px;
  line-height: 24px;
  border-radius: 8px;
}
.yds-alert--full-width {
  width: 100%;
}
.yds-alert--info {
  --yoti-icon-color: var(--experimental-yds-alert-colour-icon-info, var(--yoti-blue-shade));
  color: var(--experimental-yds-alert-colour-text-info, var(--yoti-blue-shade));
  background-color: var(--experimental-yds-alert-colour-background-info, var(--yoti-blue-tint));
}
.yds-alert--success {
  --yoti-icon-color: var(--experimental-yds-alert-colour-icon-success, var(--yoti-success-green-shade));
  color: var(--experimental-yds-alert-colour-text-success, var(--yoti-success-green-shade));
  background-color: var(--experimental-yds-alert-colour-background-success, var(--yoti-success-green-tint));
}
.yds-alert--warning {
  --yoti-icon-color: var(--experimental-yds-alert-colour-icon-warning, var(--yoti-warning-orange-shade));
  color: var(--experimental-yds-alert-colour-text-warning, var(--yoti-warning-orange-shade));
  background-color: var(--experimental-yds-alert-colour-background-warning, var(--yoti-warning-orange-tint));
}
.yds-alert--danger {
  --yoti-icon-color: var(--experimental-yds-alert-colour-icon-danger, var(--yoti-danger-red-shade));
  color: var(--experimental-yds-alert-colour-text-danger, var(--yoti-danger-red-shade));
  background-color: var(--experimental-yds-alert-colour-background-danger, var(--yoti-danger-red-tint));
}
.yds-alert--neutral {
  --yoti-icon-color: var(--experimental-yds-alert-colour-icon-neutral, var(--yoti-grey-dark));
  color: var(--experimental-yds-alert-colour-text-neutral, var(--yoti-grey-dark));
  background-color: var(--experimental-yds-alert-colour-background-neutral, var(--yoti-grey-lightest));
}
.yds-alert__icon {
  display: flex;
}
@supports (padding-inline: 0) {
  .yds-alert__icon {
    -webkit-margin-end: 8px;
       -moz-margin-end: 8px;
            margin-inline-end: 8px;
  }
}
@supports not (padding-inline: 0) {
  .yds-alert__icon {
    margin-right: 8px;
  }
}
.yds-alert__heading {
  box-sizing: content-box;
  font-family: var(--yds-font);
  font-size: 12px;
  font-weight: bold;
}
@supports (padding-inline: 0) {
  .yds-alert__heading {
    -webkit-margin-before: 4px;
            margin-block-start: 4px;
  }
}
@supports not (padding-inline: 0) {
  .yds-alert__heading {
    margin-top: 4px;
  }
}
@supports (padding-inline: 0) {
  .yds-alert__heading {
    -webkit-margin-after: 8px;
            margin-block-end: 8px;
  }
}
@supports not (padding-inline: 0) {
  .yds-alert__heading {
    margin-bottom: 8px;
  }
}
@supports (padding-inline: 0) {
  .yds-alert__heading {
    -webkit-margin-start: 0;
       -moz-margin-start: 0;
            margin-inline-start: 0;
  }
}
@supports not (padding-inline: 0) {
  .yds-alert__heading {
    margin-left: 0;
  }
}
@supports (padding-inline: 0) {
  .yds-alert__heading {
    -webkit-margin-end: 0;
       -moz-margin-end: 0;
            margin-inline-end: 0;
  }
}
@supports not (padding-inline: 0) {
  .yds-alert__heading {
    margin-right: 0;
  }
}
.yds-alert--small .yds-alert__heading {
  font-size: 16px;
  line-height: 19px;
}
@supports (padding-inline: 0) {
  .yds-alert--small .yds-alert__heading {
    -webkit-margin-before: 2px;
            margin-block-start: 2px;
  }
}
@supports not (padding-inline: 0) {
  .yds-alert--small .yds-alert__heading {
    margin-top: 2px;
  }
}
.yds-alert--small .yds-alert__heading--legacy-small {
  font-size: 12px;
  line-height: 14px;
}
@supports (padding-inline: 0) {
  .yds-alert--small .yds-alert__heading--legacy-small {
    -webkit-margin-before: 4px;
            margin-block-start: 4px;
  }
}
@supports not (padding-inline: 0) {
  .yds-alert--small .yds-alert__heading--legacy-small {
    margin-top: 4px;
  }
}
.yds-alert--medium .yds-alert__heading {
  font-size: 20px;
}
@supports (padding-inline: 0) {
  .yds-alert--medium .yds-alert__heading {
    -webkit-margin-before: 0px;
            margin-block-start: 0px;
  }
}
@supports not (padding-inline: 0) {
  .yds-alert--medium .yds-alert__heading {
    margin-top: 0px;
  }
}
.yds-alert--large .yds-alert__heading {
  font-size: 20px;
}
.yds-alert__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.yds-alert__description {
  margin: 0;
}.yoti-icon-placeholder {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.yoti-icon-placeholder,
.yoti-icon {
  font-size: 30px;
  font-size: var(--yoti-icon-size, 30px);
  color: var(--yoti-icon-color);
}.yds-icon {
  font-size: 30px;
  font-size: var(--yds-icon-size, 30px);
  color: var(--yds-icon-color);
}
.yoti-tabs-bar {
  font-family: var(--yds-font);
}
@supports (padding-inline: 0) {
  .yoti-tabs-bar {
    -webkit-margin-after: 10px;
            margin-block-end: 10px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-tabs-bar {
    margin-bottom: 10px;
  }
}
.yoti-tabs-bar a {
  all: inherit;
  display: inline-flex;
  color: var(--yoti-black);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.yoti-tabs-bar--fluid {
  display: grid;
  grid-template-columns: repeat(var(--yoti-tabs-number), 1fr);
  grid-auto-rows: 44px;
}.yoti-tabs-header {
  display: inline-block;
  height: 34px;
  font-family: var(--yds-font);
  font-size: 14px;
  font-weight: normal;
  color: var(--yoti-black);
  text-align: center;
  cursor: pointer;
  background: none;
  border: 0;
}
@supports (padding-inline: 0) {
  .yoti-tabs-header {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
}
@supports not (padding-inline: 0) {
  .yoti-tabs-header {
    padding-top: 0;
  }
}
@supports (padding-inline: 0) {
  .yoti-tabs-header {
    -webkit-padding-after: 14px;
            padding-block-end: 14px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-tabs-header {
    padding-bottom: 14px;
  }
}
@supports (padding-inline: 0) {
  .yoti-tabs-header {
    -webkit-padding-start: 24px;
       -moz-padding-start: 24px;
            padding-inline-start: 24px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-tabs-header {
    padding-left: 24px;
  }
}
@supports (padding-inline: 0) {
  .yoti-tabs-header {
    -webkit-padding-end: 24px;
       -moz-padding-end: 24px;
            padding-inline-end: 24px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-tabs-header {
    padding-right: 24px;
  }
}
@supports (padding-inline: 0) {
  .yoti-tabs-header {
    -webkit-border-after: solid 2px var(--yoti-grey-light);
            border-block-end: solid 2px var(--yoti-grey-light);
  }
}
@supports not (padding-inline: 0) {
  .yoti-tabs-header {
    border-bottom: solid 2px var(--yoti-grey-light);
  }
}
.yoti-tabs-header:hover, .yoti-tabs-header:focus {
  border-color: var(--yoti-blue-shade);
}
.yoti-tabs-header--active {
  border-color: var(--yoti-blue);
}
.yoti-tabs-header--disabled {
  color: var(--yoti-grey-dark);
  border-color: var(--yoti-blue);
}
.yoti-switch-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Native checkbox */
  /* Slider */
  /* Circle */
  /* Label */
}
.yoti-switch-button--disabled {
  pointer-events: none;
}
.yoti-switch-button__checkbox {
  position: absolute;
  top: 0;
  z-index: 1;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.yoti-switch-button--small .yoti-switch-button__checkbox {
  width: 35px;
  height: 18px;
}
.yoti-switch-button--large .yoti-switch-button__checkbox {
  width: 59px;
  height: 31px;
}
.yoti-switch-button__slider, .yoti-switch-button__checkbox {
  border-radius: 20px;
}
.yoti-switch-button__slider {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--yoti-white);
  border-color: var(--yoti-grey-black);
  border-style: solid;
  border-width: 1px;
  transition: background-color 164ms ease-out;
}
.yoti-switch-button--small .yoti-switch-button__slider {
  width: 35px;
  height: 18px;
}
.yoti-switch-button--large .yoti-switch-button__slider {
  width: 59px;
  height: 31px;
}
.yoti-switch-button__checkbox:hover + .yoti-switch-button__slider, .yoti-switch-button__checkbox:focus + .yoti-switch-button__slider {
  background-color: var(--yoti-white);
}
.yoti-switch-button--is-checked .yoti-switch-button__slider {
  background-color: var(--yoti-success-green);
  border-color: var(--yoti-success-green);
}
.yoti-switch-button--is-checked .yoti-switch-button__checkbox:hover + .yoti-switch-button__slider, .yoti-switch-button--is-checked .yoti-switch-button__checkbox:focus + .yoti-switch-button__slider {
  background-color: var(--yoti-success-green-tone);
}
.yoti-switch-button--disabled .yoti-switch-button__slider {
  background-color: var(--yoti-white);
  border-color: var(--yoti-grey);
}
.yoti-switch-button--is-checked.yoti-switch-button--disabled .yoti-switch-button__slider {
  background-color: var(--yoti-grey);
}
.yoti-switch-button__circle {
  position: absolute;
  left: 0;
  background: var(--yoti-grey-dark);
  border-radius: 50%;
  transition: left 164ms ease-out, transform 164ms ease-out;
}
.yoti-switch-button--small .yoti-switch-button__circle {
  --yoti-switch-button-space-from-edge: 1px;
  top: 1px;
  width: 14px;
  height: 14px;
  transform: translateX(1px);
  transform: translateX(var(--yoti-switch-button-space-from-edge));
}
.yoti-switch-button--large .yoti-switch-button__circle {
  --yoti-switch-button-space-from-edge: 3px;
  top: 3px;
  width: 23px;
  height: 23px;
  transform: translateX(3px);
  transform: translateX(var(--yoti-switch-button-space-from-edge));
}
.yoti-switch-button--is-checked .yoti-switch-button__circle {
  left: 100%;
  background: var(--yoti-white);
  transform: translateX(calc(-100% - var(--yoti-switch-button-space-from-edge)));
}
.yoti-switch-button__checkbox:hover + .yoti-switch-button__slider .yoti-switch-button__circle {
  background: var(--yoti-grey-black);
}
.yoti-switch-button--is-checked .yoti-switch-button__checkbox:hover + .yoti-switch-button__slider .yoti-switch-button__circle {
  background: var(--yoti-white);
}
.yoti-switch-button--disabled .yoti-switch-button__slider .yoti-switch-button__circle {
  background-color: var(--yoti-grey);
}
.yoti-switch-button--is-checked.yoti-switch-button--disabled .yoti-switch-button__slider .yoti-switch-button__circle {
  background-color: var(--yoti-white);
}
.yoti-switch-button__label {
  margin-left: 16px;
  font-family: var(--yds-font);
  font-weight: normal;
  cursor: pointer;
}.yoti-with-error {
  display: inline-flex;
  flex-direction: column;
}
.yoti-with-error--full-width {
  width: 100%;
}
.yoti-with-error__component {
  display: inline-block;
}
.yoti-with-error__message {
  height: 14px;
  margin: 4px 0;
  font-family: var(--yds-font);
  font-size: 14px;
  font-weight: normal;
  color: var(--yoti-danger-red-shade);
}
:root {
  --yoti-sidebar-collapsed-width: 60px;
  --yoti-sidebar-icon-size: 18px;
  --transition-duration: 0.8s;
}

.yoti-side-bar {
  --logo-margin-top: 13px;
  --logo-margin-bottom: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--yoti-sidebar-width);
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: var(--yds-font);
  box-shadow: 0px 32px 63px rgba(var(--yoti-grey-black-rgb), 0.1);
  transition: width 0.8s;
  transition: width var(--transition-duration);
}
.yoti-side-bar--collapsed {
  width: 60px;
  width: var(--yoti-sidebar-collapsed-width);
}
.yoti-side-bar--collapsed .yoti-side-bar__nav-item-label {
  opacity: 0;
  transition: opacity 0.5s;
}
.yoti-side-bar--collapsed .yoti-side-bar__nav-item-icon:last-child {
  opacity: 0;
  transition: opacity 0.5s;
}
.yoti-side-bar__view-toggle {
  position: absolute;
  top: 8px;
  right: -9px;
  width: 18px;
  width: var(--yoti-sidebar-icon-size);
  height: 18px;
  height: var(--yoti-sidebar-icon-size);
  background: var(--yoti-white);
  border: 1px solid var(--yoti-grey-light);
  border-radius: 15px;
  box-shadow: 3px 0px 5px rgba(var(--yoti-grey-black-rgb), 0.1);
}
.yoti-side-bar__view-toggle:hover {
  background-color: var(--yoti-grey-dark);
  border: none;
}
.yoti-side-bar__view-toggle:active {
  background-color: var(--yoti-grey-black);
  border: none;
}
.yoti-side-bar__view-toggle-button {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
}
.yoti-side-bar__view-toggle-icon {
  width: 100%;
  height: 100%;
  font-size: var(--yoti-text-size-small);
  color: var(--yoti-grey-dark);
  cursor: pointer;
}
.yoti-side-bar__view-toggle-icon:hover, .yoti-side-bar__view-toggle-icon:active {
  color: var(--yoti-white);
}
.yoti-side-bar__header {
  position: relative;
}
.yoti-side-bar__header--has-logo .yoti-side-bar__view-toggle {
  top: calc(50% + var(--logo-margin-top) / 2 - var(--logo-margin-bottom) / 2);
  transform: translateY(-50%);
}
.yoti-side-bar--custom {
  padding: 0 20px;
}
.yoti-side-bar--custom--with-spacing {
  padding: 24px 20px;
}
.yoti-side-bar--logo {
  padding: var(--logo-margin-top) 20px var(--logo-margin-bottom) 20px;
}
.yoti-side-bar--logo img {
  display: block;
}
.yoti-side-bar--main {
  flex: 1;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.yoti-side-bar--main::-webkit-scrollbar {
  display: none;
}
.yoti-side-bar__nav-list--with-spacing {
  padding-top: 24px;
}
.yoti-side-bar__nav-list-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
  /*
  we need to target the tag name bc when we have a renderWrapper,
  the component is defined by the consumer and we have no control on the class it puts into
  */
}
.yoti-side-bar__nav-list-list a:focus-visible {
  outline-offset: -4px;
}
.yoti-side-bar__nav-title {
  margin: 8px 20px;
}
.yoti-side-bar__nav-title-title {
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
  line-height: 140%;
  color: var(--yoti-grey-dark);
  white-space: nowrap;
}
.yoti-side-bar__nav-item {
  display: inline-flex;
  width: 100%;
  height: 36px;
  padding: 8px 20px;
  margin-bottom: 8px;
  cursor: pointer;
  border-right: 4px solid transparent;
}
.yoti-side-bar__nav-item-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.yoti-side-bar__nav-item-icon {
  --yoti-icon-color: var(--yoti-grey-dark);
  --yds-icon-color: var(--yoti-grey-dark);
  --yoti-icon-size: 20px;
  --yds-icon-size: 20px;
  flex-shrink: 0;
  margin-right: 8px;
}
.yoti-side-bar__nav-item-icon:last-child {
  margin-right: 0;
  margin-left: 8px;
  opacity: 1;
  transition: opacity 1.5s;
}
.yoti-side-bar__nav-item-label {
  flex: 1;
  flex-shrink: 0;
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 140%;
  color: var(--yoti-grey-dark);
  opacity: 1;
  transition: opacity 1.5s;
}
.yoti-side-bar__nav-item--active {
  background-color: var(--yoti-blue-tint);
  border-right: 4px solid var(--yoti-blue-shade);
}
.yoti-side-bar__nav-item--active .yoti-side-bar__nav-item-icon {
  --yoti-icon-color: var(--yoti-blue-shade);
  --yds-icon-color: var(--yoti-blue-shade);
}
.yoti-side-bar__nav-item--active .yoti-side-bar__nav-item-icon:last-child {
  opacity: 1;
}
.yoti-side-bar__nav-item--active .yoti-side-bar__nav-item-label {
  color: var(--yoti-blue-shade);
}
.yoti-side-bar__nav-item:hover .yoti-side-bar__nav-item-icon {
  --yoti-icon-color: var(--yoti-blue);
  --yds-icon-color: var(--yoti-blue);
}
.yoti-side-bar__nav-item:hover .yoti-side-bar__nav-item-label {
  color: var(--yoti-blue);
}.yoti-icon-placeholder {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.yoti-icon-placeholder,
.yoti-icon {
  font-size: 30px;
  font-size: var(--yoti-icon-size, 30px);
  color: var(--yoti-icon-color);
}
.yoti-text-area {
  position: relative;
  box-sizing: content-box;
  width: 100%;
  font-family: var(--yds-font);
  font-weight: normal;
  color: var(--yoti-grey-dark);
  /* Input Group */
  /* Label group, has background to make the label visible when textarea element is scrolled */
  /* Icon */
  /* Label */
  /* Input */
  /* Tooltip */
}
.yoti-text-area--disabled {
  opacity: 0.5;
}
.yoti-text-area__input-group {
  position: relative;
  background-color: var(--yoti-white);
  border: solid 2px var(--yoti-grey);
  border-radius: 5px;
  transition: border-color 0.2s ease-in-out;
}
.yoti-text-area__input-group:hover {
  border-color: var(--yoti-grey-dark);
}
.yoti-text-area--invalid .yoti-text-area__input-group {
  border-color: var(--yoti-danger-red);
}
.yoti-text-area--disabled .yoti-text-area__input-group {
  border-color: var(--yoti-grey);
}
.yoti-text-area--active .yoti-text-area__input-group {
  border-color: var(--yoti-grey-black);
}
.yoti-text-area__label-group {
  position: absolute;
  z-index: 1;
  width: calc(100% - 47px);
  height: 22px;
  background-color: var(--yoti-white);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.yoti-text-area--small .yoti-text-area__label-group {
  background-color: transparent;
}
.yoti-text-area--small.yoti-text-area--has-value .yoti-text-area__label-group {
  position: absolute;
  top: auto;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.yoti-text-area__icon {
  --cross-icon-size: 9px;
  position: absolute;
  width: 9px;
  width: var(--cross-icon-size);
  height: 9px;
  height: var(--cross-icon-size);
}
@supports (padding-inline: 0) {
  .yoti-text-area__icon {
    inset-block-start: 8px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__icon {
    top: 8px;
  }
}
@supports (padding-inline: 0) {
  .yoti-text-area__icon {
    inset-inline-start: 15px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__icon {
    left: 15px;
  }
}
.yoti-text-area__icon--tick {
  color: var(--yoti-success-green);
}
.yoti-text-area__icon--cross {
  color: var(--yoti-danger-red);
}
@supports (padding-inline: 0) {
  .yoti-text-area--small .yoti-text-area__icon {
    inset-block-start: 12px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area--small .yoti-text-area__icon {
    top: 12px;
  }
}
.yoti-text-area__label {
  position: absolute;
  font-size: 12px;
  line-height: 1;
  color: var(--yoti-grey-dark);
  pointer-events: none;
  transition: transform 0.1s ease-in-out,font-size 0.1s ease-in-out,color 0.1s ease-in-out;
  transform: translateY(7px);
}
@supports (padding-inline: 0) {
  .yoti-text-area__label {
    inset-block-start: 0;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__label {
    top: 0;
  }
}
@supports (padding-inline: 0) {
  .yoti-text-area__label {
    inset-inline-start: 15px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__label {
    left: 15px;
  }
}
.yoti-text-area__label--over-input {
  font-size: 16px;
  transform: translateY(calc(-50% + 26px));
}
.yoti-text-area--invalid .yoti-text-area__label, .yoti-text-area--show-tick .yoti-text-area__label {
  --transform: 13px, 7px;
  transform: translate(13px, 7px);
  transform: translate(var(--transform));
}
[dir=rtl] .yoti-text-area--invalid .yoti-text-area__label, [dir=rtl] .yoti-text-area--show-tick .yoti-text-area__label {
  --transform: -13px, 7px;
}
.yoti-text-area--active .yoti-text-area__label {
  color: var(--yoti-grey-dark);
}
.yoti-text-area--small .yoti-text-area__label {
  font-size: 14px;
  transform: translateY(0);
}
@supports (padding-inline: 0) {
  .yoti-text-area--small .yoti-text-area__label {
    inset-block-start: 10px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area--small .yoti-text-area__label {
    top: 10px;
  }
}
.yoti-text-area--small.yoti-text-area--invalid .yoti-text-area__label {
  --transform-x: 17px;
  transform: translateY(0) translateX(17px);
  transform: translateY(0) translateX(var(--transform-x));
}
[dir=rtl] .yoti-text-area--small.yoti-text-area--invalid .yoti-text-area__label {
  --transform-x: -17px;
}
.yoti-text-area__input {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  font-size: 16px;
  line-height: 1;
  color: var(--yoti-grey-black);
  text-overflow: ellipsis;
  resize: none;
  background: transparent;
  border: none;
  border-radius: 3px;
}
@supports (padding-inline: 0) {
  .yoti-text-area__input {
    -webkit-padding-before: 24px;
            padding-block-start: 24px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__input {
    padding-top: 24px;
  }
}
@supports (padding-inline: 0) {
  .yoti-text-area__input {
    -webkit-padding-after: 10px;
            padding-block-end: 10px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__input {
    padding-bottom: 10px;
  }
}
@supports (padding-inline: 0) {
  .yoti-text-area__input {
    -webkit-padding-start: 15px;
       -moz-padding-start: 15px;
            padding-inline-start: 15px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__input {
    padding-left: 15px;
  }
}
@supports (padding-inline: 0) {
  .yoti-text-area__input {
    -webkit-padding-end: 47px;
       -moz-padding-end: 47px;
            padding-inline-end: 47px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__input {
    padding-right: 47px;
  }
}
.yoti-text-area__input::-webkit-input-placeholder {
  color: var(--yoti-grey);
}
.yoti-text-area__input::-moz-placeholder {
  color: var(--yoti-grey);
}
.yoti-text-area__input::-ms-input-placeholder {
  color: var(--yoti-grey);
}
.yoti-text-area__input::placeholder {
  color: var(--yoti-grey);
}
@supports (padding-inline: 0) {
  .yoti-text-area--has-action-icon .yoti-text-area__input {
    -webkit-padding-end: 47px;
       -moz-padding-end: 47px;
            padding-inline-end: 47px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area--has-action-icon .yoti-text-area__input {
    padding-right: 47px;
  }
}
.yoti-text-area--small .yoti-text-area__input {
  font-size: 14px;
}
@supports (padding-inline: 0) {
  .yoti-text-area--small .yoti-text-area__input {
    -webkit-padding-before: 10px;
            padding-block-start: 10px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area--small .yoti-text-area__input {
    padding-top: 10px;
  }
}
@supports (padding-inline: 0) {
  .yoti-text-area--small.yoti-text-area--invalid .yoti-text-area__input, .yoti-text-area--small.yoti-text-area--show-tick .yoti-text-area__input {
    -webkit-padding-start: 32px;
       -moz-padding-start: 32px;
            padding-inline-start: 32px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area--small.yoti-text-area--invalid .yoti-text-area__input, .yoti-text-area--small.yoti-text-area--show-tick .yoti-text-area__input {
    padding-left: 32px;
  }
}
.yoti-text-area__helper-line-container {
  position: absolute;
  position: var(--yoti-text-area-helper-line-position, absolute);
  box-sizing: border-box;
  display: grid;
  grid-template-areas: "tooltip counter";
  grid-template-columns: auto -webkit-min-content;
  grid-template-columns: auto min-content;
  grid-gap: 8px;
  gap: 8px;
  width: 100%;
  min-height: 17px;
  font-size: 12px;
  color: var(--yoti-grey-dark);
}
@supports (padding-inline: 0) {
  .yoti-text-area__helper-line-container {
    inset-block-start: 100%;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__helper-line-container {
    top: 100%;
  }
}
@supports (padding-inline: 0) {
  .yoti-text-area__helper-line-container {
    -webkit-padding-before: 1px;
            padding-block-start: 1px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__helper-line-container {
    padding-top: 1px;
  }
}
.yoti-text-area__tooltip {
  grid-area: tooltip;
}
@supports (padding-inline: 0) {
  .yoti-text-area__tooltip {
    -webkit-padding-before: 4px;
            padding-block-start: 4px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__tooltip {
    padding-top: 4px;
  }
}
@supports (padding-inline: 0) {
  .yoti-text-area__tooltip {
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__tooltip {
    padding-bottom: 0;
  }
}
@supports (padding-inline: 0) {
  .yoti-text-area__tooltip {
    -webkit-padding-start: 2px;
       -moz-padding-start: 2px;
            padding-inline-start: 2px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__tooltip {
    padding-left: 2px;
  }
}
@supports (padding-inline: 0) {
  .yoti-text-area__tooltip {
    -webkit-padding-end: 2px;
       -moz-padding-end: 2px;
            padding-inline-end: 2px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__tooltip {
    padding-right: 2px;
  }
}
.yoti-text-area__tooltip--error {
  color: var(--yoti-danger-red-shade);
}
.yoti-text-area__tooltip--floating {
  padding: 4px;
  background-color: var(--yoti-white);
  border-radius: 4px;
  box-shadow: 0 2px 3px 0 rgba(var(--yoti-grey-black-rgb), 0.1);
}
.yoti-text-area__tooltip--floating:empty {
  display: none;
}
.yoti-text-area__counter {
  grid-area: counter;
}
@supports (padding-inline: 0) {
  .yoti-text-area__counter {
    -webkit-padding-before: 4px;
            padding-block-start: 4px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__counter {
    padding-top: 4px;
  }
}
@supports (padding-inline: 0) {
  .yoti-text-area__counter {
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__counter {
    padding-bottom: 0;
  }
}
@supports (padding-inline: 0) {
  .yoti-text-area__counter {
    -webkit-padding-start: 2px;
       -moz-padding-start: 2px;
            padding-inline-start: 2px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__counter {
    padding-left: 2px;
  }
}
@supports (padding-inline: 0) {
  .yoti-text-area__counter {
    -webkit-padding-end: 2px;
       -moz-padding-end: 2px;
            padding-inline-end: 2px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__counter {
    padding-right: 2px;
  }
}
.yoti-text-area__counter--floating {
  padding: 4px;
  background-color: var(--yoti-white);
  border-radius: 4px;
  box-shadow: 0 2px 3px 0 rgba(var(--yoti-grey-black-rgb), 0.1);
}
.yoti-text-area__action-icon {
  position: absolute;
  width: 28px;
  height: 28px;
  cursor: pointer;
}
@supports (padding-inline: 0) {
  .yoti-text-area__action-icon {
    inset-block-start: 14px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__action-icon {
    top: 14px;
  }
}
@supports (padding-inline: 0) {
  .yoti-text-area__action-icon {
    inset-inline-end: 12px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-text-area__action-icon {
    right: 12px;
  }
}
.yoti-text-area--disabled .yoti-text-area__action-icon {
  pointer-events: none;
}
.yoti-checkbox {
  display: inline-flex;
  align-items: center;
  font-family: var(--yds-font);
  cursor: pointer;
}
.yoti-checkbox--disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.yoti-checkbox-input {
  position: relative;
  display: flex;
}

.yoti-checkbox__input-element {
  width: 21px;
  height: 22px;
  margin: 0;
  cursor: inherit;
  background-color: var(--yoti-white);
  border: 2px solid var(--yoti-grey-black);
  border-radius: 2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.yoti-checkbox__input-element + .yoti-checkbox-tick {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 13px;
  color: var(--yoti-success-green);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.05s ease-in;
  transform: translateX(-50%) translateY(-50%);
}
.yoti-checkbox__input-element:checked + .yoti-checkbox-tick {
  opacity: 1;
}

.yoti-checkbox-label {
  font-family: var(--yds-font);
  font-size: 16px;
  font-weight: normal;
  color: var(--yoti-grey-black);
  cursor: inherit;
}
@supports (padding-inline: 0) {
  .yoti-checkbox-label {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
}
@supports not (padding-inline: 0) {
  .yoti-checkbox-label {
    padding-top: 0;
  }
}
@supports (padding-inline: 0) {
  .yoti-checkbox-label {
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }
}
@supports not (padding-inline: 0) {
  .yoti-checkbox-label {
    padding-bottom: 0;
  }
}
@supports (padding-inline: 0) {
  .yoti-checkbox-label {
    -webkit-padding-start: 16px;
       -moz-padding-start: 16px;
            padding-inline-start: 16px;
  }
}
@supports not (padding-inline: 0) {
  .yoti-checkbox-label {
    padding-left: 16px;
  }
}
@supports (padding-inline: 0) {
  .yoti-checkbox-label {
    -webkit-padding-end: 0;
       -moz-padding-end: 0;
            padding-inline-end: 0;
  }
}
@supports not (padding-inline: 0) {
  .yoti-checkbox-label {
    padding-right: 0;
  }
}.yoti-with-error {
  display: inline-flex;
  flex-direction: column;
}
.yoti-with-error--full-width {
  width: 100%;
}
.yoti-with-error__component {
  display: inline-block;
}
.yoti-with-error__message {
  height: 14px;
  margin: 4px 0;
  font-family: var(--yds-font);
  font-size: 14px;
  font-weight: normal;
  color: var(--yoti-danger-red-shade);
}
.yoti-float-tooltip {
  z-index: 10;
  z-index: var(--yoti-float-tooltip-layer, 10);
  max-width: 340px;
  max-width: var(--yoti-float-tooltip-max-width, 340px);
  padding: 10px 15px 10px 17px;
  margin-top: var(--yoti-float-tooltip-margin-top);
  margin-left: var(--yoti-float-tooltip-margin-left);
  font-family: var(--yds-font);
  font-size: 16px;
  line-height: 24px;
  color: white;
  background: var(--yoti-grey-black);
  border-radius: 8px;
  /* Transition */
}
.yoti-float-tooltip--small {
  font-size: 14px;
  line-height: 22px;
}
.yoti-float-tooltip--medium {
  font-size: 16px;
  line-height: 24px;
}
.yoti-float-tooltip__arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--yoti-grey-black);
  transform: rotate(45deg);
}
.yoti-float-tooltip__arrow--top {
  left: calc(50% - 6px);
}
.yoti-float-tooltip__arrow--right {
  top: calc(50% - 6px);
}
.yoti-float-tooltip__arrow--bottom {
  left: calc(50% - 6px);
}
.yoti-float-tooltip__arrow--left {
  top: calc(50% - 6px);
}
.yoti-float-tooltip-transition-config, .yoti-float-tooltip-transition-right-enter-active, .yoti-float-tooltip-transition-right-exit-active, .yoti-float-tooltip-transition-left-enter-active, .yoti-float-tooltip-transition-left-exit-active, .yoti-float-tooltip-transition-bottom-enter-active, .yoti-float-tooltip-transition-bottom-exit-active, .yoti-float-tooltip-transition-top-enter-active, .yoti-float-tooltip-transition-top-exit-active {
  transition-timing-function: cubic-bezier(0.82, -0.33, 0.41, 1.3);
  transition-duration: 300ms;
  transition-property: opacity, transform;
}
.yoti-float-tooltip-transition-top-enter {
  opacity: 0;
  transform: scale(0.9) translateY(15%);
}
.yoti-float-tooltip-transition-top-enter-active {
  opacity: 1;
  transform: translateY(0);
}
.yoti-float-tooltip-transition-top-exit {
  opacity: 1;
  transform: translateY(0);
}
.yoti-float-tooltip-transition-top-exit-active {
  opacity: 0;
  transform: scale(0.9) translateY(15%);
}
.yoti-float-tooltip-transition-bottom-enter {
  opacity: 0;
  transform: translateY(-15%) scale(0.9);
}
.yoti-float-tooltip-transition-bottom-enter-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.yoti-float-tooltip-transition-bottom-exit {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.yoti-float-tooltip-transition-bottom-exit-active {
  opacity: 0;
  transform: translateY(-15%) scale(0.9);
}
.yoti-float-tooltip-transition-left-enter {
  opacity: 0;
  transform: translateX(7%) scale(0.9);
}
.yoti-float-tooltip-transition-left-enter-active {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.yoti-float-tooltip-transition-left-exit {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.yoti-float-tooltip-transition-left-exit-active {
  opacity: 0;
  transform: translateX(7%) scale(0.9);
}
.yoti-float-tooltip-transition-right-enter {
  opacity: 0;
  transform: translateX(-6%) scale(0.9);
}
.yoti-float-tooltip-transition-right-enter-active {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.yoti-float-tooltip-transition-right-exit {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.yoti-float-tooltip-transition-right-exit-active {
  opacity: 0;
  transform: translateX(-6%) scale(0.9);
}
.yoti-breadcrumb {
  padding: 4px 0;
  font-family: var(--yds-font);
  font-weight: normal;
  cursor: default;
}
.yoti-breadcrumb__chevron {
  width: 6px;
  height: 8px;
  margin: 0 16px;
}
.yoti-badge-placeholder {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.yoti-badge {
  font-family: var(--yds-font);
  font-size: var(--yoti-badge-size);
}
.yoti-badge--small {
  --yoti-badge-size: 22px;
}
.yoti-badge--medium {
  --yoti-badge-size: 28px;
}
.yoti-badge--large {
  --yoti-badge-size: 32px;
}
.yoti-badge--darker-border {
  --yoti-badge-border-color: var(--yoti-grey-black);
}
.yds-button {
  --yoti-icon-color: var(--experimental-yds-button-colour-on-background-solid, var(--yoti-white));
  --yds-icon-color: var(--experimental-yds-button-colour-on-background-solid, var(--yoti-white));
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  width: var(--yoti-button-width, var(--yds-button-width)); /* @deprecated --yoti-button-width class prefix in favour of --yds-button-width, deprecation will be removed on next major release */
  min-height: var(--height);
  font-family: var(--yds-font);
  font-size: 14px;
  font-weight: bold;
  color: var(--experimental-yds-button-colour-on-background-solid, var(--yoti-white));
  letter-spacing: 0.64px;
  cursor: pointer;
  background-color: var(--experimental-yds-button-colour-background-solid-standard-enabled, var(--yoti-blue));
  border: 2px solid transparent;
  border-radius: 8px;
  transition: border-color 164ms cubic-bezier(0.82, -0.33, 0.41, 1.3),background-color 164ms cubic-bezier(0.82, -0.33, 0.41, 1.3),color 164ms cubic-bezier(0.82, -0.33, 0.41, 1.3),opacity 164ms cubic-bezier(0.82, -0.33, 0.41, 1.3);
  /* VARIATIONS */
  /* SIZES */
  /* this element is used to avoid flex is applied to children, because flex removes some of the layout properties of display inline */
}
@supports (padding-inline: 0) {
  .yds-button {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
}
@supports not (padding-inline: 0) {
  .yds-button {
    padding-top: 0;
  }
}
@supports (padding-inline: 0) {
  .yds-button {
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }
}
@supports not (padding-inline: 0) {
  .yds-button {
    padding-bottom: 0;
  }
}
@supports (padding-inline: 0) {
  .yds-button {
    -webkit-padding-start: 16px;
       -moz-padding-start: 16px;
            padding-inline-start: 16px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button {
    padding-left: 16px;
  }
}
@supports (padding-inline: 0) {
  .yds-button {
    -webkit-padding-end: 16px;
       -moz-padding-end: 16px;
            padding-inline-end: 16px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button {
    padding-right: 16px;
  }
}
.yds-button:hover {
  background-color: var(--experimental-yds-button-colour-background-solid-standard-hover, var(--yoti-blue-tone));
}
.yds-button:active {
  background-color: var(--experimental-yds-button-colour-background-solid-standard-pressed, var(--yoti-blue-shade));
}
.yds-button:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
  transform: translateZ(0); /* fix for Safari rendering bug */
}
.yds-button--full-width {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.yds-button--solid-standard {
  background-color: var(--experimental-yds-button-colour-background-solid-standard-enabled, var(--yoti-blue));
}
.yds-button--solid-standard:hover, .yds-button--solid-standard:focus-visible {
  background-color: var(--experimental-yds-button-colour-background-solid-standard-hover, var(--yoti-blue-tone));
}
.yds-button--success {
  background-color: var(--experimental-yds-button-colour-background-solid-success-enabled, var(--yoti-success-green));
}
.yds-button--success:hover, .yds-button--success:focus-visible {
  background-color: var(--experimental-yds-button-colour-background-solid-success-hover, var(--yoti-success-green-tone));
}
.yds-button--solid-success {
  background-color: var(--experimental-yds-button-colour-background-solid-success-enabled, var(--yoti-success-green));
}
.yds-button--solid-success:hover, .yds-button--solid-success:focus-visible {
  background-color: var(--experimental-yds-button-colour-background-solid-success-hover, var(--yoti-success-green-tone));
}
.yds-button--warning {
  background-color: var(--experimental-yds-button-colour-background-solid-warning-enabled, var(--yoti-warning-orange));
}
.yds-button--warning:hover, .yds-button--warning:focus-visible {
  background-color: var(--experimental-yds-button-colour-background-solid-warning-hover, var(--yoti-warning-orange-tone));
}
.yds-button--solid-warning {
  background-color: var(--experimental-yds-button-colour-background-solid-warning-enabled, var(--yoti-warning-orange));
}
.yds-button--solid-warning:hover, .yds-button--solid-warning:focus-visible {
  background-color: var(--experimental-yds-button-colour-background-solid-warning-hover, var(--yoti-warning-orange-tone));
}
.yds-button--danger {
  background-color: var(--experimental-yds-button-colour-background-solid-critical-enabled, var(--yoti-danger-red));
}
.yds-button--danger:hover, .yds-button--danger:focus-visible {
  background-color: var(--experimental-yds-button-colour-background-solid-critical-hover, var(--yoti-danger-red-tone));
}
.yds-button--solid-critical {
  background-color: var(--experimental-yds-button-colour-background-solid-critical-enabled, var(--yoti-danger-red));
}
.yds-button--solid-critical:hover, .yds-button--solid-critical:focus-visible {
  background-color: var(--experimental-yds-button-colour-background-solid-critical-hover, var(--yoti-danger-red-tone));
}
.yds-button--secondary {
  color: var(--experimental-yds-button-colour-content-outline-standard-enabled, var(--yoti-blue));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-standard-enabled, var(--yoti-blue));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--secondary:hover, .yds-button--secondary:focus-visible {
  color: var(--experimental-yds-button-colour-content-outline-standard-hover, var(--yoti-blue-tone));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-standard-hover, var(--yoti-blue-tone));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--secondary:active {
  color: var(--experimental-yds-button-colour-content-outline-standard-pressed, var(--yoti-blue-shade));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-standard-pressed, var(--yoti-blue-shade));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--outline-standard {
  color: var(--experimental-yds-button-colour-content-outline-standard-enabled, var(--yoti-blue));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-standard-enabled, var(--yoti-blue));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--outline-standard:hover, .yds-button--outline-standard:focus-visible {
  color: var(--experimental-yds-button-colour-content-outline-standard-hover, var(--yoti-blue-tone));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-standard-hover, var(--yoti-blue-tone));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--outline-standard:active {
  color: var(--experimental-yds-button-colour-content-outline-standard-pressed, var(--yoti-blue-shade));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-standard-pressed, var(--yoti-blue-shade));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--success-outline {
  color: var(--experimental-yds-button-colour-content-outline-success-enabled, var(--yoti-success-green));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-success-enabled, var(--yoti-success-green));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--success-outline:hover, .yds-button--success-outline:focus-visible {
  color: var(--experimental-yds-button-colour-content-outline-success-hover, var(--yoti-success-green-tone));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-success-hover, var(--yoti-success-green-tone));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--success-outline:active {
  color: var(--experimental-yds-button-colour-content-outline-success-pressed, var(--yoti-success-green-shade));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-success-pressed, var(--yoti-success-green-shade));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--outline-success {
  color: var(--experimental-yds-button-colour-content-outline-success-enabled, var(--yoti-success-green));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-success-enabled, var(--yoti-success-green));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--outline-success:hover, .yds-button--outline-success:focus-visible {
  color: var(--experimental-yds-button-colour-content-outline-success-hover, var(--yoti-success-green-tone));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-success-hover, var(--yoti-success-green-tone));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--outline-success:active {
  color: var(--experimental-yds-button-colour-content-outline-success-pressed, var(--yoti-success-green-shade));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-success-pressed, var(--yoti-success-green-shade));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--warning-outline {
  color: var(--experimental-yds-button-colour-content-outline-warning-enabled, var(--yoti-warning-orange));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-warning-enabled, var(--yoti-warning-orange));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--warning-outline:hover, .yds-button--warning-outline:focus-visible {
  color: var(--experimental-yds-button-colour-content-outline-warning-hover, var(--yoti-warning-orange-tone));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-warning-hover, var(--yoti-warning-orange-tone));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--warning-outline:active {
  color: var(--experimental-yds-button-colour-content-outline-warning-pressed, var(--yoti-warning-orange-shade));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-warning-pressed, var(--yoti-warning-orange-shade));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--outline-warning {
  color: var(--experimental-yds-button-colour-content-outline-warning-enabled, var(--yoti-warning-orange));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-warning-enabled, var(--yoti-warning-orange));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--outline-warning:hover, .yds-button--outline-warning:focus-visible {
  color: var(--experimental-yds-button-colour-content-outline-warning-hover, var(--yoti-warning-orange-tone));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-warning-hover, var(--yoti-warning-orange-tone));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--outline-warning:active {
  color: var(--experimental-yds-button-colour-content-outline-warning-pressed, var(--yoti-warning-orange-shade));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-warning-pressed, var(--yoti-warning-orange-shade));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--danger-outline {
  color: var(--experimental-yds-button-colour-content-outline-critical-enabled, var(--yoti-danger-red));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-critical-enabled, var(--yoti-danger-red));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--danger-outline:hover, .yds-button--danger-outline:focus-visible {
  color: var(--experimental-yds-button-colour-content-outline-critical-hover, var(--yoti-danger-red-tone));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-critical-hover, var(--yoti-danger-red-tone));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--danger-outline:active {
  color: var(--experimental-yds-button-colour-content-outline-critical-pressed, var(--yoti-danger-red-shade));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-critical-pressed, var(--yoti-danger-red-shade));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--outline-critical {
  color: var(--experimental-yds-button-colour-content-outline-critical-enabled, var(--yoti-danger-red));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-critical-enabled, var(--yoti-danger-red));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--outline-critical:hover, .yds-button--outline-critical:focus-visible {
  color: var(--experimental-yds-button-colour-content-outline-critical-hover, var(--yoti-danger-red-tone));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-critical-hover, var(--yoti-danger-red-tone));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--outline-critical:active {
  color: var(--experimental-yds-button-colour-content-outline-critical-pressed, var(--yoti-danger-red-shade));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-critical-pressed, var(--yoti-danger-red-shade));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--outline-neutral {
  color: var(--experimental-yds-button-colour-content-outline-neutral-enabled, var(--yoti-neutral-600));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-neutral-enabled, var(--yoti-neutral-600));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--outline-neutral:hover, .yds-button--outline-neutral:focus-visible {
  color: var(--experimental-yds-button-colour-content-outline-neutral-hover, var(--yoti-grey-dark));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-neutral-hover, var(--yoti-grey-dark));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--outline-neutral:active {
  color: var(--experimental-yds-button-colour-content-outline-neutral-pressed, var(--yoti-grey-black));
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-content-outline-neutral-pressed, var(--yoti-grey-black));
  --yoti-icon-color: $color-text;
  --yds-icon-color: $color-text;
}
.yds-button--tertiary {
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  color: var(--experimental-yds-button-colour-content-outline-neutral-enabled, var(--yoti-grey-dark));
  border-color: var(--experimental-yds-button-colour-stroke-outline-neutral-enabled, var(--yoti-grey-light));
  --yoti-icon-color: $color-stroke;
  --yds-icon-color: $color-stroke;
}
.yds-button--tertiary:hover {
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-stroke-outline-neutral-hover, var(--yoti-grey-dark));
  --yoti-icon-color: $color-stroke;
  --yds-icon-color: $color-stroke;
}
.yds-button--tertiary:active {
  background-color: var(--experimental-yds-button-colour-background-outline, var(--yoti-white));
  border-color: var(--experimental-yds-button-colour-stroke-outline-neutral-pressed, var(--yoti-grey-black));
  --yoti-icon-color: $color-stroke;
  --yds-icon-color: $color-stroke;
}
.yds-button--ghost {
  --yoti-icon-color: var(--experimental-yds-button-colour-on-background-ghost-enabled, var(--yoti-grey-dark));
  --yds-icon-color: var(--experimental-yds-button-colour-on-background-ghost-enabled, var(--yoti-grey-dark));
  color: var(--experimental-yds-button-colour-on-background-ghost-enabled, var(--yoti-grey-dark));
  background-color: transparent;
  transition-timing-function: ease;
}
.yds-button--ghost:hover, .yds-button--ghost:focus-visible {
  background-color: var(--experimental-yds-button-colour-background-ghost-hover, var(--yoti-grey-lightest));
}
.yds-button--ghost:active {
  --yoti-icon-color: var(--experimental-yds-button-colour-on-background-ghost-pressed, var(--yoti-blue));
  --yds-icon-color: var(--experimental-yds-button-colour-on-background-ghost-pressed, var(--yoti-blue));
  color: var(--experimental-yds-button-colour-on-background-ghost-pressed, var(--yoti-blue));
  background-color: var(--experimental-yds-button-colour-background-ghost-pressed, var(--yoti-blue-tint));
}
.yds-button--ghost:disabled {
  --yoti-icon-color: var(--yoti-grey);
  --yds-icon-color: var(--yoti-grey);
  color: var(--yoti-grey);
}
.yds-button--small {
  --height: 32px;
  --yoti-icon-size: 18px;
  --yds-icon-size: 18px;
  /* figma shows 6px padding but our implementation has 2px border */
  font-size: 12px;
  border-radius: 4px;
}
@supports (padding-inline: 0) {
  .yds-button--small {
    -webkit-padding-before: 4px;
            padding-block-start: 4px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--small {
    padding-top: 4px;
  }
}
@supports (padding-inline: 0) {
  .yds-button--small {
    -webkit-padding-after: 4px;
            padding-block-end: 4px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--small {
    padding-bottom: 4px;
  }
}
@supports (padding-inline: 0) {
  .yds-button--small {
    -webkit-padding-start: 16px;
       -moz-padding-start: 16px;
            padding-inline-start: 16px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--small {
    padding-left: 16px;
  }
}
@supports (padding-inline: 0) {
  .yds-button--small {
    -webkit-padding-end: 16px;
       -moz-padding-end: 16px;
            padding-inline-end: 16px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--small {
    padding-right: 16px;
  }
}
.yds-button--small .yds-button__children {
  line-height: 136%;
}
.yds-button--medium {
  --height: 40px;
  --yoti-icon-size: 18px;
  --yds-icon-size: 18px;
  /* figma shows 10px padding but our implementation has 2px border */
  font-size: 14px;
  border-radius: 8px;
}
@supports (padding-inline: 0) {
  .yds-button--medium {
    -webkit-padding-before: 8px;
            padding-block-start: 8px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--medium {
    padding-top: 8px;
  }
}
@supports (padding-inline: 0) {
  .yds-button--medium {
    -webkit-padding-after: 8px;
            padding-block-end: 8px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--medium {
    padding-bottom: 8px;
  }
}
@supports (padding-inline: 0) {
  .yds-button--medium {
    -webkit-padding-start: 16px;
       -moz-padding-start: 16px;
            padding-inline-start: 16px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--medium {
    padding-left: 16px;
  }
}
@supports (padding-inline: 0) {
  .yds-button--medium {
    -webkit-padding-end: 16px;
       -moz-padding-end: 16px;
            padding-inline-end: 16px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--medium {
    padding-right: 16px;
  }
}
.yds-button--medium__children {
  line-height: 140%;
}
.yds-button--large {
  --height: 52px;
  --yoti-icon-size: 20px;
  --yds-icon-size: 20px;
  /* figma shows 16px padding but our implementation has 2px border and font line height impacting */
  font-size: 16px;
  border-radius: 8px;
}
@supports (padding-inline: 0) {
  .yds-button--large {
    -webkit-padding-before: 12px;
            padding-block-start: 12px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--large {
    padding-top: 12px;
  }
}
@supports (padding-inline: 0) {
  .yds-button--large {
    -webkit-padding-after: 12px;
            padding-block-end: 12px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--large {
    padding-bottom: 12px;
  }
}
@supports (padding-inline: 0) {
  .yds-button--large {
    -webkit-padding-start: 16px;
       -moz-padding-start: 16px;
            padding-inline-start: 16px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--large {
    padding-left: 16px;
  }
}
@supports (padding-inline: 0) {
  .yds-button--large {
    -webkit-padding-end: 16px;
       -moz-padding-end: 16px;
            padding-inline-end: 16px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--large {
    padding-right: 16px;
  }
}
.yds-button--large .yds-button__children {
  line-height: 147%;
}
@supports (padding-inline: 0) {
  .yds-button--has-icon-start {
    -webkit-padding-start: 10px;
       -moz-padding-start: 10px;
            padding-inline-start: 10px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--has-icon-start {
    padding-left: 10px;
  }
}
@supports (padding-inline: 0) {
  .yds-button--has-icon-end {
    -webkit-padding-end: 10px;
       -moz-padding-end: 10px;
            padding-inline-end: 10px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--has-icon-end {
    padding-right: 10px;
  }
}
.yds-button--is-icon-only {
  --yoti-icon-size: 28px;
  --yds-icon-size: 28px;
  justify-content: center;
  min-width: 40px;
}
@supports (padding-inline: 0) {
  .yds-button--is-icon-only {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--is-icon-only {
    padding-top: 0;
  }
}
@supports (padding-inline: 0) {
  .yds-button--is-icon-only {
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--is-icon-only {
    padding-bottom: 0;
  }
}
@supports (padding-inline: 0) {
  .yds-button--is-icon-only {
    -webkit-padding-start: 3px;
       -moz-padding-start: 3px;
            padding-inline-start: 3px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--is-icon-only {
    padding-left: 3px;
  }
}
@supports (padding-inline: 0) {
  .yds-button--is-icon-only {
    -webkit-padding-end: 3px;
       -moz-padding-end: 3px;
            padding-inline-end: 3px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--is-icon-only {
    padding-right: 3px;
  }
}
.yds-button--is-icon-only svg {
  font-size: var(--yds-icon-size);
}
.yds-button--is-icon-only.yds-button--small {
  --yoti-icon-size: 28px;
  --yds-icon-size: 28px;
  min-width: 32px;
  padding: 0;
}
.yds-button--is-icon-only.yds-button--small svg {
  font-size: var(--yds-icon-size);
}
.yds-button--is-icon-only.yds-button--large {
  --yoti-icon-size: 34px;
  --yds-icon-size: 34px;
  min-width: 52px;
}
@supports (padding-inline: 0) {
  .yds-button--is-icon-only.yds-button--large {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--is-icon-only.yds-button--large {
    padding-top: 0;
  }
}
@supports (padding-inline: 0) {
  .yds-button--is-icon-only.yds-button--large {
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--is-icon-only.yds-button--large {
    padding-bottom: 0;
  }
}
@supports (padding-inline: 0) {
  .yds-button--is-icon-only.yds-button--large {
    -webkit-padding-start: 4px;
       -moz-padding-start: 4px;
            padding-inline-start: 4px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--is-icon-only.yds-button--large {
    padding-left: 4px;
  }
}
@supports (padding-inline: 0) {
  .yds-button--is-icon-only.yds-button--large {
    -webkit-padding-end: 4px;
       -moz-padding-end: 4px;
            padding-inline-end: 4px;
  }
}
@supports not (padding-inline: 0) {
  .yds-button--is-icon-only.yds-button--large {
    padding-right: 4px;
  }
}
.yds-button--is-icon-only.yds-button--large svg {
  font-size: var(--yds-icon-size);
}
.yds-button--is-icon-only .yds-button-icon-side {
  display: none;
}
.yds-button__children {
  display: inline;
}
.yds-button__children > * {
  vertical-align: middle;
}

.yds-button-icon-side {
  --icon-gap: 0px;
  display: inline-flex;
  flex: 1;
}
.yds-button-icon-side--has-icon {
  --icon-gap: 8px;
}
@supports (padding-inline: 0) {
  .yds-button-icon-side--start {
    -webkit-margin-end: var(--icon-gap);
       -moz-margin-end: var(--icon-gap);
            margin-inline-end: var(--icon-gap);
  }
}
@supports not (padding-inline: 0) {
  .yds-button-icon-side--start {
    margin-right: var(--icon-gap);
  }
}
.yds-button-icon-side--end {
  justify-content: flex-end;
}
@supports (padding-inline: 0) {
  .yds-button-icon-side--end {
    -webkit-margin-start: var(--icon-gap);
       -moz-margin-start: var(--icon-gap);
            margin-inline-start: var(--icon-gap);
  }
}
@supports not (padding-inline: 0) {
  .yds-button-icon-side--end {
    margin-left: var(--icon-gap);
  }
}.yoti-icon-placeholder {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.yoti-icon-placeholder,
.yoti-icon {
  font-size: 30px;
  font-size: var(--yoti-icon-size, 30px);
  color: var(--yoti-icon-color);
}
.yds-icon {
  font-size: 30px;
  font-size: var(--yds-icon-size, 30px);
  color: var(--yds-icon-color);
}
.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}

:root {
    --sender-flow-header-height: 50px;
    --sender-flow-footer-height: 50px;
    --dark-border: solid 1px #eaeaea;

    --z-navigation-sidebar: 0;
    /* Header shadow should not be visible on sidebars */
    --z-sender-flow-header-shadow: 2900;
    --z-sender-flow-sidebar: 3000;
    /* Tooltips which are defined in header should not be overlapped by sidebars
    therefore header z-index should be higher than sidebar index */
    --z-sender-flow-header: 3100;
    /* Footer shadow should be visible on sidebars  */
    --z-sender-flow-footer: 3150;
    --z-sender-flow-tooltip: 3250;
    --z-preview-document-overlay: 3500;
    --z-dnd-overlay: 4000;
}