.edge_button_shadow {
    padding: 0;
    width: max-content;
    --dropShadowColor: #00FEE4;
}

.edge_button {
    --border: 2px;    /* root border width */
    --slant: calc(100% - 20px);   /* root coordinate slanted corners */
    --color: #FFF;  /* root color */
    
    position: relative;
    font-size: 1.25em;
    line-height: 150%;
    font-family: 'Epilogue';
    font-weight: 600;
    color: var(--color);
    border: 2px solid var(--color);
    border-top-left-radius: 70px;
    border-bottom-left-radius: 70px;
    
    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, 0% 50%;
    background-repeat: no-repeat;
    transition: color var(--t,0.3s), background-size 0.3s;


    clip-path:  /* clip the element to a polygon */
        polygon(
            0 0,                  /* vertext 1 */
            100% 0,               /* vertext 2 */
            100% var(--slant),  /* vertext 3 */
            var(--slant) 100%,  /* vertext 4 */
            0 100%                /* vertext 5 */
        );
}

.edge_button::before {
    --border: calc(2px / 2);
    --slant: calc(100% - 20px);
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    right: -1px;
    top: 1px;
    background: var(--color);
    z-index: -10;

    clip-path: polygon(100% calc(var(--slant) - 1px), 100% 1px, 100% 100%, calc(var(--slant) - 1px) 100%);
}

.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: 'Epilogue';
    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(--highlighted-color)  50%,#0000 50.1%) top left,
        linear-gradient(to top     left,var(--highlighted-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(--highlighted-color), 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:not(.noHoverEffect):hover, .edge_button:not(.noHoverEffect).active {
    --color: #00FEE4;
    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:  100% 100%;
    background-repeat: no-repeat;
    color: #000;
    border: 2px solid var(--color);
}

.edge_button:not(.noHoverEffect):active {
    --color: #1BC7D2;
    color: #163D40;
    outline: none;
}



/* EDge Button Background color effect */
.edge_button {
    pointer-events: auto;
}

.edge_button_shadow:has(.edge_button:not(.noHoverEffect):hover) {
    filter: drop-shadow(0 0 10px var(--dropShadowColor));
}

.edge_button_shadow:has(.edge_button:not(.noHoverEffect):active) {
    filter: drop-shadow(0 0 10px var(--dropShadowColor));
}

.edge_button_shadow:has(.edge_button:not(.noHoverEffect):focus) {
    filter: drop-shadow(0 0 10px var(--dropShadowColor));
}

.edge_button_shadow:has(.edge_button:not(.noHoverEffect):hover) .edge_button::before {
    background: var(--color);
}

.edge_button_shadow:has(.edge_button:not(.noHoverEffect):active) .edge_button::before {
    background: var(--color);
}

.edge_button_shadow:has(.edge_button:not(.noHoverEffect).active) .edge_button::before {
    background: var(--color);
}


/* For dark theme sweet alert */
.swal2-html-container {
    color: #E1E1E1;
    text-align: center;
}

@media screen and (max-width: 580px) {
    /* .edge_button {
        --slant: calc(100% - 10px)
    }

    .edge_button::before {
        --slant: calc(100% - 10px)
    } */

    .edge_button {
        --slant-x: 60%;
        --slant-y: calc(100% - 20px);
        clip-path: polygon(0 0, 100% 0, 100% var(--slant-x), var(--slant-y) 100%, 0 100%);
    }
    
    .edge_button::before {
        clip-path: polygon(100% calc(var(--slant-x) - 3px), 100% 1px, 100% 100%, calc(var(--slant-y) - 1.5px) 100%);
    }
}