@import url('https://fonts.googleapis.com/css?family=Poppins');

:root {
    --color-primary: #244f8f;
    --color-danger: #ff7782;
    --color-white: #ffffff;
    --color-dark: #363949;
    --color-dark-variant: #677483;
    --color-light: rgba(132, 139, 200, 0.18);
    --color-background: #fbf6f0;

    --radius-sm: 0.625rem;
    --radius-md: 0.9375rem;
    --radius-lg: 1.125rem;

    --shadow-card: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.12);
    --transition-base: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    min-height: 100vh;
    width: 100%;
    background: radial-gradient(circle at top right, #ffffff 0%, var(--color-background) 55%);
    color: var(--color-dark);
    overflow: hidden;
}

.container-login {
    min-height: 100vh;
    perspective: 1000px;
}

.login-all {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    animation: login-box-enter 0.8s ease;
}

.login-box {
    width: 100%;
    max-width: 540px;
}

.card-login {
    border-radius: var(--radius-lg);
    border: 1px solid rgba(36, 79, 143, 0.12);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.card-login .card-header {
    background: linear-gradient(135deg, rgba(36, 79, 143, 0.07), rgba(36, 79, 143, 0.02));
    border-bottom: 1px solid rgba(36, 79, 143, 0.08);
    padding: 1.25rem 1.25rem 0.85rem;
}

.card-login .card-body {
    padding: 1.1rem 1.25rem 1.35rem;
}

.logo-login {
    width: min(200px, 62%);
    height: auto;
    animation: login-attribute 0.6s ease;
}

.title-login {
    margin-bottom: 1rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-dark);
    animation: login-attribute 0.6s ease;
}

.txt-login {
    color: var(--color-dark);
}

.form-control.txt-login,
.input-group-text.txt-login,
.btn-login {
    border-radius: var(--radius-sm);
}

.form-control.txt-login {
    border: 1px solid rgba(103, 116, 131, 0.4);
    transition: var(--transition-base);
}

.form-control.txt-login:focus {
    border-color: rgba(36, 79, 143, 0.6);
    box-shadow: 0 0 0 0.2rem rgba(36, 79, 143, 0.14);
}

.input-group-text.txt-login {
    border: 1px solid rgba(103, 116, 131, 0.4);
    border-left: 0;
    background: #f8fafc;
}

.frm-sign,
.form-group label.txt-login {
    margin-bottom: 0.35rem;
    font-size: 0.86rem;
    font-weight: 600;
}

.btn-login {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.2px;
    animation: login-input 0.7s ease;
}

#btn_saveSignMember {
    margin-top: 0.35rem;
}

.form-group.frm_member,
.input-group.frm_member {
    animation: login-input 0.6s ease;
}

.input-group.frm_member {
    width: 100%;
    display: block;
}

.signature-pad,
.signature-pad .m-signature-pad {
    width: 100%;
}

.m-signature-pad-body {
    width: 100%;
    max-width: 100%;
    height: 200px;
    border: 1px solid var(--color-dark-variant);
    border-radius: var(--radius-sm);
    color: var(--color-dark);
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

.m-signature-pad-body canvas,
.m-signature-pad-body canvas.m-1 {
    width: 100% !important;
    height: 190px;
    margin: 0 !important;
    display: block;
}

.clear-sign .ribbon {
    border-radius: 0 0 0 var(--radius-sm);
}

@media (max-width: 991.98px) {
    body {
        overflow: auto;
    }

    .login-all {
        min-height: auto;
        padding: 1rem 0.75rem;
    }

    .card-login .card-body,
    .card-login .card-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .title-login {
        font-size: 0.95rem;
    }
}

@keyframes login-attribute {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes login-box-enter {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes login-input {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}