.box-button {
    width: 100%;
    height: 5rem;
    position: relative;
    color: rgb(13, 110, 253);
    border: 1px solid rgba(13, 110, 253, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 8px;
    margin: 0;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.1s 0.15s;
}

.box-button:hover {
    color: rgb(248, 245, 250);
    /*    background-color: rgb(13, 110, 253);*/
}

.box-button::before {
    content: "";
    position: absolute;
    top: 0;
    right: -10%;
    background-color: rgb(13, 110, 253);
    width: 10%;
    transform: skewX(150deg);
    height: 100%;
    z-index: -1;
    transition: width 0.5s;
}

.box-button:hover::before {
    width: 120%;
}

.box-button:active::before {
    color: rgb(248, 245, 250);
    background-color: rgb(10, 49, 124);
}


.back-button {
    text-decoration: none;
    color: rgb(53, 148, 251);
    /*    color: rgb(13, 110, 253);*/
    background-color: rgb(248, 245, 250);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.back-button:hover {
    color: rgb(248, 245, 250);
    background-color: rgb(53, 148, 251);
}

.back-button:active {
    background-color: rgba(13, 110, 253, 0.5);
}

.nasef-select, ::picker(select) {
    appearance: base-select;
}
.nasef-input,
.nasef-select {
    height: 3rem;
    border: 1px solid rgba(53, 148, 251, 0.5) !important;
    border-radius: 1px;
    border-radius: 8px;
    cursor: pointer;
    padding: 2px 14px;
    color: rgb(0, 0, 0);
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nasef-select:hover {
    background-color: rgb(240, 240, 250);
}

.nasef-select:active, 
.nasef-select:focus {
    border: 1px solid rgba(53, 148, 251, 0.5) !important;
    
}

.nasef-select option {
    height: 2.5rem !important;
    background-color: transparent !important;
    cursor: pointer;

}

.nasef-select option:checked {
    background-color: rgb(53, 148, 251) !important;
    color: rgb(248, 245, 250);
}

.nasef-select option:hover {
    background-color: rgb(240, 240, 250) !important;
    color: rgb(0, 0, 0);
}


.nasef-btn {
    height: 3rem;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid;
    outline: none;

    padding: 2px 4px;
    background-color: rgb(53, 148, 251);
    color: rgb(248, 245, 250);
    outline: none;
    

    display: flex;
    justify-content: center;
    align-items: center;
}

.nasef-btn:hover{
    background-color: rgb(13, 110, 253);
}

.nasef-btn:active{
    background-color: rgb(53, 148, 251, 0.8);
}


.nasef-table {
    width: 100%;
    border-radius: 8px 8px 0px 0px;
    overflow: hidden;
}

.nasef-table thead {
    background-color: rgba(53, 148, 251, 0.1);

}

.nasef-table thead td{
    font-weight: bold;


}

.nasef-table td {
    height: 3rem;
    padding: 1rem;
    border-right: solid 1px rgba(53, 148, 251, 0.1);
    border-left: solid 1px rgba(53, 148, 251, 0.1);
    
}


@keyframes spin{
    from{
        transform: rotate(0deg);
    }
    
    to{
        transform: rotate(360deg);
    }
}

.spinner{
    animation: spin 1.5s linear infinite;
}