:root {
    --circle-d: 8px;
    --circle-inactive-color: #A1A3A6;
    --circle-active-color: #FFFFFF;
    --circle-error-color: #D45858;

    --done-color: #FFFFFF;
    --error-color: #D45858;

    --key-color: rgba(255, 255, 255, 0.3);
    --key-color-hover: rgba(255, 255, 255, 1);
    --key-bg: rgba(255, 255, 255, 0);
    --key-bg-click: rgba(255, 255, 255, 0.2);

    --transition-slow: 1s;
}

.fullPage {
    place-content: start center;
    background-color: var(--bg-color);
}
.fullPage > .fullPageBox {
    position: relative;
    background-color: var(--bg-color);
    border: 0 none;
    border-radius: var(--popbox-radius);

    /* padding: 0 30px 0 30px; */
    width: 100%;
    margin: auto;
}
.fullPage > .fullPageBox .circles {
    margin-left: auto;
    margin-right: auto;
}



.pin-header {
    position: absolute;
    top: 20px;
    left: -30px;
    right: -30px;
    pointer-events: none;
}
.pin-header > .in {
    width: min(100%, 1560px);
    margin: 0 auto;
    padding: 0 46px 0 49px;
}

.pin-back {
    text-align: left;
    place-self: start;

    position: relative;
    left: -5px;
}
.pin-back > button {
    font-size: 0.75rem;
    color: var(--color-text);
    pointer-events: auto;
}
.pin-back > button:hover {
    color: var(--color-link);
}
.pin-back > button.disabled,
.pin-back > button.disabled:hover {
    color: var(--color-text);
    pointer-events: none;
}


/* .pin-status-container {
    text-align: center;
    overflow: hidden;
} */
.pin-status {
    font-size: .875rem;
    color: var(--error-color);
    /* margin-top: -12px; */
    /* margin-bottom: 11px; */
}
.pin-status-text {
    padding-bottom: 1px;
}
.pin-status-timer {
    font-weight: 100;
}

.pin-container {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.enterPinContainer .pin-container {
    padding: 6px 0 0 0;
}
.pin-create-dialog .pin-container {
    padding: 6px 0 0 0;
}

.pin-info {
    font-size: .875rem;
    color: var(--color-text);
    line-height: 1.5625rem;
    max-width: 400px;
    margin: 0 auto;
    padding: 32px 0 0 0;
}
.pin-forgot {
    font-size: .875rem;
    color: var(--color-text);
    line-height: 1.5625rem;
    max-width: 400px;
    margin: 0 auto;
    padding: 0 0 31px 0;
}
.pin-forgot button {
    color: var(--color-link);
}
.pin-footer {
    font-size: 0.75rem;
    color: var(--color-footer);
}
.pin-footer > .ic307 {
    padding-bottom: 22px;
}
.pin-footer.likeFooter {
    min-height: 73px;
}

.left-timer .time-sep {
    transition: opacity 0.2s ease;
}
.left-timer[data-d="0"] .time-sep {
    opacity: 0.7;
}
.left-timer[data-d="1"] .time-sep {
    opacity: 1;
}

.pin-profile {
    text-align: center;
    font-size: 0.875rem;
    color: #FFFFFF;
    font-weight: 700;
    /* margin-bottom: 18px; */
    margin-top: 16px;
    margin-bottom: 3px;
}
.status-box {
    text-align: center;
    font-size: 0.875rem;
    margin-bottom: 7px;
    /* overflow: hidden; */
}
.status-box > .pin-title {
    display: block;
}
.status-box > .pin-title.error {
    color: var(--error-color);
}
.status-box > .pin-title.done {
    color: var(--done-color);
}
.status-box > .status-text {
    display: none;
}
.status-box.show-status .pin-title {
    display: none;
}
.status-box.show-status .status-text {
    display: block;
    overflow: hidden;
    animation: expandStatus 0.4s ease-out forwards;
    padding: 2px 0 2px 0;
}
.status-text .content {
    line-height: 17px; /* Piefiksējam rindas augstumu precizitātei */
}
/* Animācija, izmantojot max-height */
@keyframes expandStatus {
    0% {
        /* Sākumā atļaujam rādīt tikai 1 rindu */
        max-height: 19px;
    }
    100% {
        /* Izplešamies līdz izmēram, kurā droši ietilps 2 vai 3 rindas */
        /* Tā kā 5em ir tuvu reālajam izmēram, animācija būs gluda un bez aiztures */
        max-height: 5em;
    }
}

/* .enterPinContainer .pin-title {
    margin-bottom: -4px;
} */
.pin-digits {
    display: flex;
    justify-content: center;
    gap: 5px;
}
.pin-digits > .d {
    position: relative;
    width: var(--circle-d);
    height: var(--circle-d);
    border-radius: 100%;
    text-align: center;
    font-size: 0;
    line-height: 0;
    margin-top: 6px;
}
.pin-digits > .d::before {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--circle-d);
    height: var(--circle-d);
    border-radius: 100%;
    text-align: center;
    font-size: 0;
    line-height: 0;
    content: '';

    border: 1px solid var(--circle-inactive-color);
}
.pin-digits > .d::after {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--circle-d);
    height: var(--circle-d);
    border-radius: 100%;
    text-align: center;
    font-size: 0;
    line-height: 0;
    content: '';
    background: var(--circle-active-color);

    transform: translate(0px, -10px);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.pin-digits > .d.full::after {
    transform: translate(0px, 0px);
    opacity: 1;
}
.pin-digits > .d.error::before {
    border: 1px solid var(--circle-error-color);
}
.pin-digits > .d.full.error::after {
    background: var(--circle-error-color);
}

.pin-digits > .d-plus {
    position: relative;
    width: var(--circle-d);
    height: var(--circle-d);
    font-size: 0;
    line-height: 0;
    margin-top: 7px;

    background-image: url('/theme/images/pin/pin-plus.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 7px 7px;
    image-rendering: optimizequality;
    background-image: url('/theme/images/pin/pin-plus.svg');
}
.pin-digits > .d-plus.error {
    background-image: url('/theme/images/pin/pin-plus-red.png');
    background-image: url('/theme/images/pin/pin-plus-red.svg');
}
.pin-digits > .d-clear {
    width: 37px;
    height: 18px;

    color: #0B1324;
    font-size: .75rem;
    text-align: center;
    font-weight: 700;
    line-height: 1;
    padding: 3px 0 2px 5px;
    margin-left: 5px;
    opacity: 0.5;

    background-image: url('/theme/images/pin/pin-clear.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 37px 18px;

    image-rendering: optimizequality;

    background-image: url('/theme/images/pin/pin-clear.svg');
    border-radius: 0;

    transition: opacity var(--transition-slow) ease;
}
.pin-digits > .d-clear:hover {
    opacity: 1;
}

.pin-digits > .d-plus > div {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--circle-d);
    height: var(--circle-d);
    border-radius: 100%;
    text-align: center;
    font-size: 0;
    line-height: 0;
    content: '';
    background: var(--circle-active-color);

    transform: translate(0px, -10px);
    opacity: 0;
}
.pin-digits > .d-plus > div.full {
    animation: popAndFade 0.4s ease forwards;
}
.pin-digits > .d-plus > div.out {
    animation: popAndFadeRev 0.3s ease forwards;
}

@keyframes popAndFade {
    0% {
        transform: translate(0px, -10px);
        opacity: 0;
    }
    50% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
}
@keyframes popAndFadeRev {
    0% {
        transform: translate(0px, 0px);
        opacity: 0;
    }
    33% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
    100% {
        transform: translate(0px, -10px);
        opacity: 0;
    }
}

.pin-input {
    padding-top: 0;
}

.pin-actions {
    display: flex;
    gap: 28px;
    width: 202px;
    margin: 0 auto;
    padding-top: 20px;
}
.pin-actions > button {
    border: 0 none;
    outline: 0 none;
    background-color: transparent;

    font-size: .875rem;
    color: var(--color-link);;
    cursor: pointer;

    padding: 0 0 1px 0;
    margin: 0;
}
.pin-actions > button.pinok {
    margin-left: auto;
    width: 66px;
    height: 30px;
    font-size: 0.875rem;

    opacity: 0.3;
    background-color: var(--button-bg);
    border: 1px solid var(--button-bg);
    color: #FFFFFF;
    border-radius: var(--input-radius);
    white-space: nowrap;

    cursor: pointer;
    padding-top: 1px;
    padding-bottom: 2px;

    transition: opacity 0.2s ease;
}
.pin-actions > button.pinok.active {
    opacity: 1;
}
.validated .pin-actions > button.pinok {
    opacity: 1;
}

.numpad {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 20px;
    padding: 9px 0 15px 0;
}
.numpad > button {
    position: relative;
    width: 60px;
    height: 60px;
    border: 0 none;
    outline: 0 none;
    background-color: var(--key-bg);
    border-radius: 100%;

    font-size: 1.5rem;
    color: var(--key-color);
    cursor: pointer;

    padding: 0;
    margin: 0;

    transition: background-color var(--transition-slow) ease, color var(--transition-slow) ease;

    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.numpad > button.is-text-bright {
    color: var(--key-color-hover);
}

.keyboard {
    display: none;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}
.keyboard > button {
    position: relative;
    width: 46px;
    height: 52px;
    border: 0 none;
    outline: 0 none;
    background-color: var(--key-bg);
    border-radius: 17px;

    font-size: 1.5rem;
    color: var(--key-color);
    cursor: pointer;

    padding: 0 0 1px 0;
    margin: 0;

    transition: background-color var(--transition-slow) ease, color var(--transition-slow) ease;

    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.keyboard > button.is-text-bright {
    color: var(--key-color-hover);
}

/* Šis nostrādās TIKAI tad, ja ir reāla pele (nevis "teorētiska" Android pele) */
@media (hover: hover) and (pointer: fine) {
    .numpad > button:hover {
        color: var(--key-color-hover);
    }
    .keyboard > button:hover {
        color: var(--key-color-hover);
    }
}


.click-effect {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--key-bg-click);
    pointer-events: none;
}
.numpad > button > .click-effect {
    border-radius: 100%;
}
.keyboard > button > .click-effect {
    border-radius: 17px;
}
/* 1. fāze: Iešana uz 100% */
.click-effect.in {
    animation: fillUp 0.2s ease-out forwards;
}
/* 2. fāze: Iešana atpakaļ uz 0% */
.click-effect.out {
    animation: fadeOut 0.2s ease-in forwards;
}

@keyframes fillUp {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}


.pin-container[data-input="123"] > .pin-input > .numpad {
    display: inline-grid;
}
.pin-container[data-input="123"] > .pin-actions > button[data-input="123"] {
    display: none;
}
.pin-container[data-input="ABC"] > .pin-input > .keyboard.uppercase {
    display: inline-grid;
}
/* .pin-container[data-input="ABC"] > .pin-input > .keyboard.uppercase > button {
    text-transform: uppercase;
} */
.pin-container[data-input="ABC"] > .pin-actions > button[data-input="ABC"] {
    display: none;
}
.pin-container[data-input="abc"] > .pin-input > .keyboard.lowercase {
    display: inline-grid;
}
/* .pin-container[data-input="abc"] > .pin-input > .keyboard.lowercase > button {
    text-transform: lowercase;
} */
.pin-container[data-input="abc"] > .pin-actions > button[data-input="abc"] {
    display: none;
}


/* .enterPinContainer {
    padding: 64px 0 0 0;
} */
/* .pin-grid-container {
    padding: 0;
} */

.pin-grid {
    padding: 0;
    min-height: calc(100dvh - 40px);
    display: grid;
}
.pin-grid > .pin-top {
    /* min-height: calc(100dvh - 87px); */
    padding: 33px 0 0 0;
    place-self: start center;
}
.pin-grid > .pin-bottom {
    min-height: 73px;
    font-size: 0.75rem;
    place-self: end center;
}

.pin-create-dialog .pin-grid {
    min-height: calc(100dvh - 99px);
}
.pin-create-dialog .pin-grid > .pin-top {
    padding-top: 27px;
}


.circles-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;

    padding: 12px 0 0 0;
}
.circles-wrapper .circles {
    margin-top: 15px;
}

.step3.withpadding {
    padding: 32px 0 0 0;
}
.step2convert.withpadding {
    padding: 32px 0 0 0;
}

.pin-set-notification {
    max-width: 600px;
    margin: 0 auto;
}
.pin-set-notification .tx-txt {
    text-align: center;
    padding-top: 0;
    padding-bottom: 0;
}
.pin-set-notification .tx-btns {
    padding-top: 8px;
}
.pin-set-notification h1 {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-title-new);
    text-align: center;
    padding-top: 0;
    padding-bottom: 16px;
}

.pinwarnbox {
    position: relative;
    text-align: center;
    border: 1px solid var(--error-color);
    border-radius: var(--popbox-radius);

    padding: 31px 28px 33px 28px;
    margin-top: 34px;
}
.pinwarnbox > .title {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);

    background-color: var(--error-color);
    border-radius: var(--popbox-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    gap: 0;

    font-size: 0.625rem;
    font-weight: 700;
    color: var(--bg-color);
    line-height: 10px;

    padding: 5px 26px 5px 24px;

    /* background-image: url('/theme/images/pin/warn-split.png');
    background-repeat: no-repeat;
    background-position: calc(50% - 12px) 50%;
    background-size: 55px 56px;
    image-rendering: optimizequality;
    background-image: url('/theme/images/pin/warn-split.svg'); */
}
.pinwarnbox > .title > .sep {
    position: relative;
    width: 31px;
    height: 10px;
}
.pinwarnbox > .title > .sep::before {
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: 0;
    right: 0;
    content: '';

    background-image: url('/theme/images/pin/warn-split.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 55px 56px;
    image-rendering: optimizequality;
    background-image: url('/theme/images/pin/warn-split.svg');
}

.pinError {
    animation: pinError .4s ease-in-out forwards;
}
@keyframes pinError {
    0% { transform: translate(3px, 0px); }
    33% { transform: translate(-3px, 0); }
    66% { transform: translate(3px, 0px); }
    100% { transform: translate(0, 0); }
}

.pinChangeNotification {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text);
    max-width: 600px;
}
.pinChangeNotification > .title {
    font-weight: 700;
    margin-top: 16px;
    margin-bottom: 3px;
    color: #FFFFFF;
}
.pinChangeNotification > .text {
    margin-bottom: 32px;
    color: var(--color-text);
}
.pinChangeNotification > .buttons {
    margin-bottom: 16px;
    align-items: center;
    justify-content: center;
}

/* .pin-input-old .pin-digits > .d-plus {
    opacity: .5;
    pointer-events: none;
} */
/* .pin-container.pin-input-old > .pin-actions > button[data-input="abc"],
.pin-container.pin-input-old > .pin-actions > button[data-input="ABC"],
.pin-container.pin-input-old > .pin-actions > button[data-input="123"] {
    opacity: .5;
    pointer-events: none;
}
.pin-input-old > .pin-input > .numpad > button[data-val="+"],
.pin-input-old > .pin-input > .numpad > button[data-val="="] {
    opacity: .5;
    pointer-events: none;
} */


@media all and (max-width: 700px) {
    .pin-htitle {
        display: none;
    }
}
@media (max-width: 600px) {
    .pin-header {
        top: 13px;
    }
    .pin-back {
        left: -36px;
    }
    .pin-header,
    .pin-info {
        padding-left: 10px;
        padding-right: 10px;
    }
    .pin-profile {
        margin-top: 0;
        margin-top: -18px;
    }
    .circles-wrapper .circles {
        margin-top: 3px;
        margin-bottom: 0;
    }
    .pin-create-dialog .pin-grid {
        min-height: calc(100dvh - 81px);
    }
}