:root {
    --background: #e7ebee;
    --grad-default: linear-gradient(to bottom, #03a9f4 0%, #2980b9 100%);
}

html, body {
    /*height: 100%; /* center login*/
}

body {
    display: flex;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: var(--background);
}

.card {
    max-width: 350px;
}
.card-img-top {
    background: var(--grad-default);
    padding: 2.5rem;
}

.form-floating > .form-control, .form-floating > .form-control-plaintext {
    padding: 0.5rem 0.75rem;
}
.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
    height: calc(3rem + 2px);
    line-height: 1;
}
.form-floating > label {
    padding: 0.75rem 0.75rem;
}

.text-grad {
    background: var(--grad-default);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-grad {
    background: var(--grad-background);
}
    .btn-grad:hover {
        background: var(--grad-hover);
    }
    .btn-grad:focus-visible {
        background: var(--grad-hover);
    }
    .btn-check:checked + .btn-grad, .btn-grad.active, .btn-grad.show, .btn-grad:first-child:active, :not(.btn-check) + .btn-grad:active {
        background: var(--grad-active);
    }
    .btn-grad.disabled, .btn-grad:disabled, fieldset:disabled .btn-grad {
        background: var(--grad-background);
    }
    .btn-grad.btn-blue {
        --grad-background: linear-gradient(to bottom, #03a9f4 0%, #2980b9 100%);
        --grad-hover: linear-gradient(to bottom, #0184c1 0%, #1f628e 100%);
        --grad-active: linear-gradient(to bottom, #0070a4 0%, #1a5378 100%);
        --bs-btn-color: #fff;
        --bs-btn-bg: #2980b9;
        --bs-btn-border-color: #2980b9;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: #1f628e;
        --bs-btn-hover-border-color: #1f628e;
        --bs-btn-focus-shadow-rgb: 49,132,253;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: #1a5378;
        --bs-btn-active-border-color: #0a53be;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: #2980b9;
        --bs-btn-disabled-border-color: #2980b9;
    }
    .btn-grad.btn-success {
        --grad-background: linear-gradient(to bottom, #1ea466 0%, #198754 100%) !important;
        --grad-hover: linear-gradient(to bottom, #1a925a 0%, #146c43 100%);
        --grad-active: linear-gradient(to bottom, #167e4d 0%, #105535 100%);
    }
    .btn-grad.btn-warning {
        --grad-background: linear-gradient(to bottom, #ffc107 0%, #ffa000 100%);
        --grad-hover: linear-gradient(to bottom, #ffd65d 0%, #ffc20e 100%);
        --grad-active: linear-gradient(to bottom, #fedd77 0%, #ffcd39 100%);
    }
    .btn-grad.btn-danger {
        --grad-background: linear-gradient(to bottom, #e84e40 0%, #dd191d 100%);
        --grad-hover: linear-gradient(to bottom, #c22d3b 0%, #8c212b 100%);
        --grad-active: linear-gradient(to bottom, #a42632 0%, #701a22 100%);
    }


.animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
}
    .animated.infinite {
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }
    .animated.hinge {
        animation-duration: 2s;
        -webkit-animation-duration: 2s;
    }

@keyframes shake {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }

    20%, 60% {
        transform: translate3d(-10px, 0, 0);
        -webkit-transform: translate3d(-10px, 0, 0);
    }

    40%, 80% {
        transform: translate3d(10px, 0, 0);
        -webkit-transform: translate3d(10px, 0, 0);
    }
}
@-webkit-keyframes shake {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }

    20%, 60% {
        transform: translate3d(-10px, 0, 0);
        -webkit-transform: translate3d(-10px, 0, 0);
    }

    40%, 80% {
        transform: translate3d(10px, 0, 0);
        -webkit-transform: translate3d(10px, 0, 0);
    }
}

.shake {
    animation-name: shake;
    -webkit-animation-name: shake;
}