/*New Buttons*/
.custom-button {
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-property: all;
    /*    width: 15%;*/
    letter-spacing: .025em;
    --text-opacity: 1;
    color: rgba(247,250,252,var(--text-opacity));
    /*    padding-top: 1rem;
    padding-bottom: 1rem;*/
    /*    margin-top: 1.25rem;*/
    font-weight: 600;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 0.5rem;
    --bg-opacity: 1;
    background-color: rgba(102,126,234,var(--bg-opacity));
    float: right;
    cursor: pointer;
    padding: 1rem 2rem 1rem 2rem;
}

    .custom-button:not([disabled]):hover {
        --bg-opacity: 1;
        background-color: rgba(76,81,191,var(--bg-opacity));
    }

    /*    .custom-button:focus {
        box-shadow: 0 0 0 3px rgba(66,153,225,.5);
        outline: 2px solid transparent;
        outline-offset: 2px;
    }*/

    .custom-button:disabled {
        --bg-opacity: 1;
        background-color: rgba(102,126,234,var(--bg-opacity));
        cursor: not-allowed;
    }



@media (max-width: 1299px) {
    .table-custom-button {
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    .custom-button {
        /* width: 30%;*/
        padding: 0.75rem 1.5rem 0.75rem 1.5rem;
    }
}

input[type=file]::file-selector-button {
    margin-right: 20px;
    border: none;
    background: #084cdf;
    padding: 10px 20px;
    border-radius: 10px;
    color: rgba(247,250,252,1);
    --bg-opacity: 1;
    background-color: rgba(102,126,234,var(--bg-opacity));
    cursor: pointer;
    transition: background .2s ease-in-out;
}

    input[type=file]::file-selector-button:hover {
        --bg-opacity: 1;
        background-color: rgba(76,81,191,var(--bg-opacity));
    }


/*Used for loading*/
.upload-position {
    top: 0px !important;
    height: 100% !important;
}

.load {
    position: absolute;
    left: auto;
    top: 15px;
    /*    width: 100%;*/
    height: 79%;
    background: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    padding: 1rem 3rem 1rem 3rem;
}

    .load::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        border: 3px solid #fff;
        width: 30px;
        height: 30px;
        border-left: 3px solid transparent;
        border-bottom: 3px solid transparent;
        animation: loading1 1s ease infinite;
        z-index: 10
    }

    .load::before {
        content: '';
        position: absolute;
        border-radius: 50%;
        border: 3px dashed #fff;
        width: 30px;
        height: 30px;
        border-left: 3px solid transparent;
        border-bottom: 3px solid transparent;
        animation: loading1 2s linear infinite;
        z-index: 5
    }

@keyframes loading1 {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

button.active {
    transform: scale(.85)
}

button.activeLoading .loading {
    visibility: visible;
    opacity: 1
}

button .loading {
    opacity: 0;
    visibility: hidden
}