:root {
    --btn_color_primary: #fdfeff;
    --btn_color_primary_hover: #fdfeff;
    --btn_color1: #9cc8f9;
    --btn_color2: #0d5aae;
    --btn_color1_hover: #dc7f1b;
    --btn_color2_hover: #a10dae;
}

.ButtonStyle {
    width: 259px;
    height: 50px;
    /* padding: 10px 13px 13px 13px; */
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: linear-gradient(var(--btn_color1), var(--btn_color2));
    border-radius: 1000px;
    color: var(--btn_color_primary);
    display: inline-block;
    font: normal bold 20px "Open Sans", sans-serif;
    text-align: center;
    /* -- */
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.ButtonStyle.Logout {
    width: 100px !important;
    font-size: 89%;
}

.ButtonStyle.Document {
    /* width: 100px !important; */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 89%;
}

a.ButtonStyle.Document {
    line-height: 50px;
}

a.ButtonStyle span {
    color: var(--btn_color_primary);
    line-height: 50px;
}
a.ButtonStyle span:hover {
    color: var(--btn_color_primary_hover);
}

button.swal2-confirm,
button.swal2-cancel {
    font-size: 100%;
    width: 130px;
}

.ButtonStyle:before {
    content: "";
    position: absolute;
    background: linear-gradient(
        145deg,
        var(--btn_color1_hover),
        var(--btn_color2_hover)
    );
    color: var(--btn_color_primary_hover);
    border-radius: 10rem;
    z-index: -1;
    bottom: 0;
    left: 0;
    filter: blur(5px);
    width: 100%;
    height: 0%;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.ButtonStyle:hover {
    bottom: 5px;
    color: var(--btn_color_primary_hover);
}

.ButtonStyle:hover:before {
    opacity: 1;
    height: 100%;
}
.ButtonStyle:active {
    top: 0px;
}

@media (max-width: 991.98px) {
    .ButtonStyle {
        /* padding: 13px; */
        width: 250px;
        height: 50px;
        font-size: 18px;
    }
}