.edge_button_shadow {
    padding: 0;
    width: max-content;
}

.edge_button {
    --border: 2px;
    border-radius: 50px 50px;
    background-color: rgba(255, 255, 255, 0.1);
    --slant-x: 80%;
    --slant-y: 47%;
    --color: var(--blue);
    font-size: 1.25em;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    color: var(--color);
    padding: 1em 3.4em 1em 2.5em;
    cursor: pointer;
    /* clip-path: polygon(0 0, 100% 0, 100% var(--slant-y), var(--slant-x) 100%, 0 100%); */
    /* background: linear-gradient(to bottom right, var(--color) 50%, #0000 50.1%) top left, linear-gradient(to top left, var(--color) 50%, #0000 50.1%) bottom right; */
    /* background-size: 0 0, calc(100% - var(--slant-x) +(2* var(--border))) calc(100% - var(--slant-y) +(2* var(--border))); */
    /* background-repeat: no-repeat; */
    box-shadow: inset 0 0 0 var(--border) var(--color), 2px 2px 5px rgba(0, 0, 0, 0.2);
    border: none;
    /* border-top-left-radius: 70px; */
    /* border-bottom-left-radius: 70px; */
    transition: color var(--t, 0.3s), background-size 0.3s;
}

.edge_button_claim {
    --border: 2px;    /* root border width */
    --slant-x: 80%;   /* root coordinate-x slanted corners */
    --slant-y: 47%;   /* root coordinate-y slanted corners */
    --color: #FFF;  /* root color */
    
    font-size: 1.25em;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    color: var(--color);

    padding: 1em 3.4em 1em 2.5em;
    cursor: pointer;
    
    clip-path:  /* clip the element to a polygon */
        polygon(
            0 0,                  /* vertext 1 */
            100% 0,               /* vertext 2 */
            100% var(--slant-y),  /* vertext 3 */
            var(--slant-x) 100%,  /* vertext 4 */
            0 100%                /* vertext 5 */
        );
    background: 
        linear-gradient(to bottom right,var(--blue)  50%,#0000 50.1%) top left,
        linear-gradient(to top     left,var(--blue)  50%,#0000 50.1%) bottom right;
    background-size: 
        0 0,
        calc(100% - var(--slant-x) + (2*var(--border))) calc(100% - var(--slant-y) + (2*var(--border)));
    background-repeat: no-repeat;

    box-shadow: inset 0 0 0 var(--border) var(--blue), 2px 2px 5px rgba(0,0,0,0.2);  /* the border color */
    border: none;
    border-top-left-radius: 70px;
    border-bottom-left-radius: 70px;
    
    transition: color var(--t,0.3s), background-size 0.3s;
}

.edge_button:hover {
    --color: var(--white);  /* root hover color */
    color: white;
    background-size: 100% 100%;
    --t: 0.2s 0.1s;
    background-color: var(--blue);
}

.edge_button:active {
    --color: var(--white);
    color: white;
    outline: none;
    background-color: var(--blue);
}

.edge_Container {
    --slant-x: 80%;   /* root coordinate-x slanted corners */
    --slant-y: 47%;   /* root coordinate-y slanted corners */
    --color: #FFF;  /* root color */
    
    font-size: 1.25em;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    color: var(--color);

    padding: 1em 3.4em 1em 2.5em;
    cursor: pointer;
    
    clip-path:  /* clip the element to a polygon */
        polygon(
            0 0,                  /* vertext 1 */
            100% 0,               /* vertext 2 */
            100% var(--slant-y),  /* vertext 3 */
            var(--slant-x) 100%,  /* vertext 4 */
            0 100%                /* vertext 5 */
        );
    background: #1E1F30;
    background-size: 
        0 0,
        calc(100% - var(--slant-x) + (2*var(--border))) calc(100% - var(--slant-y) + (2*var(--border)));
    background-repeat: no-repeat;

    box-shadow: inset 0 0 0 var(--border) var(--color), 2px 2px 5px rgba(0,0,0,0.2);  /* the border color */
    border: none;
    transition: color var(--t,0.3s), background-size 0.3s;
}


/* For dark theme sweet alert */
.swal2-html-container {
    /* color: #E1E1E1; */
    color: var(--dark_blue) !important;
    background-color: var(--pale_blue) !important;
    text-align: center;
}

.swal2-popup{
    color: var(--dark_blue) !important;
    background-color: var(--pale_blue) !important;
    text-align: center;
}

.swal2-title{
    color: var(--dark_blue) !important;
    background-color: var(--pale_blue) !important;
    text-align: center;
}