.row {
    --bs-gutter-x: 0rem !important;
}

body {
    margin: 0;
}
.btn {
    border-radius: 2px !important;
    position: relative;
    z-index: 1;
}

    .btn::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #00000015;
        transform: scaleX(0);
        /* transform-origin: left; */
        transition: all 0.3s ease-out;
        z-index: -1;
    }

    .btn:hover::before, .btn:active::before {
        transform: scaleX(1);
    }

    .btn:focus {
        box-shadow: none !important;
    }

    .btn:focus-visible {
        outline: none !important;
    }

.btn-primary, .btn-primary:hover, .btn-primary:active {
    border: none !important;
    color: #fff !important;
    box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
    background: linear-gradient(0deg, rgba(22,9,240,1) 0%, rgba(49,110,244,1) 100%);
}

.btn-secondary, .btn-secondary:hover, .btn-secondary:active {
    border: none !important;
    color: #fff !important;
    box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
    background: linear-gradient(0deg, #6c757d 0%, #979ca0 100%);
}

.btn-success, .btn-success:hover, .btn-success:active {
    border: none !important;
    color: #fff !important;
    box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
    background: linear-gradient(0deg, #117446 0%, #1c8b58 100%);
}

.btn-danger, .btn-danger:hover, .btn-danger:active {
    border: none !important;
    color: #fff !important;
    box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
    background: linear-gradient(0deg, #c82837 0%, #df3847 100%);
}

.btn-warning, .btn-warning:hover, .btn-warning:active {
    border: none !important;
    color: #fff !important;
    box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
    background: linear-gradient(0deg, #ffc107 0%, #ffd100 100%);
}

.btn-info, .btn-info:hover, .btn-info:active {
    border: none !important;
    color: #fff !important;
    box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
    background: linear-gradient(0deg, #0dcaf0 0%, #00e3ff 100%);
}
#login-container {
    background-image: linear-gradient(rgb(255 255 255 / 35%), rgb(255 255 255 / 35%)), url('../media/login-bg.jpg');
    background-size: cover;
    height: 100vh;
}

.form-decoration {
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.form-image {
    background-image: url('../media/login-image.jpg');
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
}

.form-container {
    background-color: #ffffffc7;
    padding: 3%;
}

.comapny-logo {
    text-align: center;
}

    .comapny-logo img {
        width: 30%;
    }

.form-footer {
    text-align: center;
    font-size: 0.75rem;
    color: grey;
    margin-top: 5%;
}

    .form-footer p {
        margin-bottom: 0;
    }

        .form-footer p a {
            text-decoration: none;
            color: gray;
        }

.text-container {
    margin-top: 5%;
}

    .text-container h2 {
        font-size: 1.5rem;
        margin-bottom: 0;
    }

    .text-container p {
        font-size: 0.9rem;
        color: gray;
    }

.input-container input.input.form-control {
    margin-bottom: 2%;
}

.input-container label {
    display: inline-block;
    color: #005ae0;
    font-weight: 500;
}

.input-container input.input.form-control {
    outline: none;
    border: none;
    box-shadow: none;
    transition: none;
}

    .input-container input.input.form-control:focus {
        outline: none;
        border: none;
        box-shadow: none;
    }

.button-container {
    text-align: right;
}

    .button-container button.btn.btn-transparent {
        border: none;
        background-image: linear-gradient(to right, #0067ff 50%, #1fc2ff 50%);
        background-size: 200% 100%;
        background-position: 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 0.3s ease-in-out;
    }

        .button-container button.btn.btn-transparent:hover {
            background-position: 0;
        }

        .button-container button.btn.btn-transparent:focus {
            outline: none;
            border: none;
        }

    .button-container button.btn.btn-primary {
        text-transform: uppercase;
        border-radius: 2px;
    }