@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: "Roboto";
}

.glass {
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 8px 7px 20px 7px #00000063;
    backdrop-filter: blur(9.7px);
    -webkit-backdrop-filter: blur(9.7px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.neumorphism {
    box-shadow: 6px 6px 12px #00000063, -6px -6px 12px rgba(0, 0, 0, 0.19);
}

.neumorphism.selected, .neumorphism:active {
    box-shadow: inset 6px 6px 12px #00000063, inset -6px -6px 12px rgba(0, 0, 0, 0.19);
}


.swal2-popup {
    box-shadow: 0 0 20px 20px #00000063 !important;
    width:80%;
    touch-action: none;
}

.swal2-popup *:not(span) {
    color: black !important;
}

.swal2-icon.swal2-warning {
    border-color: orange !important;
    color: orange !important;
    
    .swal2-icon-content {
        color: orange !important;
    }
}

.swal2-icon.swal2-question {
    border-color: blue !important;
    color: blue !important;

    .swal2-icon-content {
        color: blue !important;
    }
}

.swal2-icon.swal2-success {
    border-color: lightgreen !important;
    
    .swal2-icon-content,
    .swal2-success-line-tip,
    .swal2-success-line-long {
        background-color: lightgreen;
    }
    
    .swal2-success-circular-line-left,
    .swal2-success-circular-line-right,
    .swal2-success-fix {
        display: none;
    }
}

.swal2-icon.swal2-error {
    border-color: red !important;
    color: red !important;

    .swal2-icon-content {
        color: red !important;
    }
}

.swal2-x-mark-line-left, .swal2-x-mark-line-right {
    background-color: red !important;
}

.swal2-input {
    font-size: x-large;
    font-weight: bold;
}

.swal2-container button {
    width: 100px !important;
}


input {
    color: white !important;
    text-align: center !important;
}

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

#spinner-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 10000;
}

#spinner {
    height: 100px;
    width: 100px;
    margin: 40vh auto;
    border: 20px solid rgb(160 160 160 / 45%);
    border-top: 20px solid white;
    border-radius: 50%;
    animation: rotate 1s infinite linear !important;
}