/*
 * =========================================================
 * ASPIRIN CLIENTS V203
 * NEW CLIENT
 * =========================================================
 */


.a203-create-row {
    margin-bottom: 13px;
}


.a203-new-client {
    width: 100%;
    min-height: 56px;

    border: 0;
    border-radius: 18px;

    padding: 0 18px;

    background: #cfff2f;
    color: #080908;

    font: inherit;
    font-size: 15px;
    font-weight: 950;

    cursor: pointer;

    box-shadow:
        0 10px 28px
        rgba(207,255,47,.10);
}


.a203-new-client:active {
    transform: scale(.985);
}


.a203-overlay {
    position: fixed;
    inset: 0;

    z-index: 12000;

    display: none;

    align-items: flex-end;
    justify-content: center;

    padding:
        18px
        14px
        calc(
            18px
            + env(safe-area-inset-bottom)
        );

    box-sizing: border-box;

    background:
        rgba(0,0,0,.78);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.a203-overlay.open {
    display: flex;
}


.a203-sheet {
    width: 100%;
    max-width: 540px;

    max-height:
        calc(
            100vh
            - 70px
            - env(safe-area-inset-top)
            - env(safe-area-inset-bottom)
        );

    overflow-y: auto;

    box-sizing: border-box;

    padding: 22px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 28px;

    background:
        rgba(19,20,20,.985);

    box-shadow:
        0 28px 80px
        rgba(0,0,0,.56);
}


.a203-head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 22px;
}


.a203-title {
    color: #fff;

    font-size: 25px;
    font-weight: 950;

    line-height: 1.08;
}


.a203-subtitle {
    margin-top: 7px;

    color: #8d9098;

    font-size: 12px;
    line-height: 1.45;
}


.a203-close {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 14px;

    background:
        rgba(255,255,255,.055);

    color: #fff;

    font-size: 24px;
}


.a203-field {
    display: block;

    margin-bottom: 14px;
}


.a203-label {
    display: block;

    margin:
        0
        0
        7px
        3px;

    color: #96999f;

    font-size: 11px;
    font-weight: 850;

    letter-spacing: .04em;
}


.a203-required {
    color: #cfff2f;
}


.a203-input {
    width: 100%;
    min-height: 54px;

    box-sizing: border-box;

    padding:
        0
        16px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 17px;

    outline: none;

    background:
        rgba(255,255,255,.05);

    color: #fff;

    font: inherit;
    font-size: 15px;
}


.a203-input:focus {
    border-color:
        rgba(207,255,47,.65);

    box-shadow:
        0 0 0 3px
        rgba(207,255,47,.07);
}


.a203-input::placeholder {
    color: #65686f;
}


.a203-grid {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,.72fr);

    gap: 10px;
}


.a203-error {
    display: none;

    margin:
        2px
        0
        14px;

    padding:
        11px
        13px;

    border-radius: 14px;

    background:
        rgba(255,70,70,.09);

    color: #ff9292;

    font-size: 12px;
    line-height: 1.4;
}


.a203-error.visible {
    display: block;
}


.a203-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 10px;

    margin-top: 6px;
}


.a203-action {
    min-height: 52px;

    border: 0;
    border-radius: 17px;

    font: inherit;
    font-size: 14px;
    font-weight: 900;
}


.a203-save {
    background: #cfff2f;
    color: #080908;
}


.a203-save:disabled {
    opacity: .55;
}


.a203-cancel {
    background:
        rgba(255,255,255,.07);

    color: #fff;

    border:
        1px solid
        rgba(255,255,255,.08);
}


@media (
    max-width: 390px
) {

    .a203-grid {
        grid-template-columns:
            1fr;
    }

}