@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400;1,500&display=swap');

/*@font-face {*/
/*    font-family: Trueno;*/
/*    src: url("/fonts/Trueno-Regular.otf");*/
/*    font-weight: 400;*/
/*    font-style: normal;*/
/*}*/

/*@font-face {*/
/*    font-family: Trueno;*/
/*    src: url("/fonts/Trueno-Bold.otf");*/
/*    font-weight: 500;*/
/*    font-style: normal;*/
/*}*/

/*@font-face {*/
/*    font-family: Trueno;*/
/*    src: url("/fonts/Trueno-Light.otf");*/
/*    font-weight: 300;*/
/*    font-style: normal;*/
/*}*/

* {
    font-family: Roboto, Lato;
}

.container-xxl {
    max-width: 1500px !important;
}

button.disabled, button:disabled {
    pointer-events: initial !important;
    cursor: not-allowed !important;
}

.hidden { visibility: hidden; }
.shown { visibility: visible; }

/* Outlined alert style */
.alert-danger.alert-danger-outline {
    border: 1px solid #e74c3c;
    background-color: rgb(231,76,60);
    background-color: rgba(231,76,60,0.6);
}

button.disabled, button:disabled {
    pointer-events: initial !important;
    cursor: not-allowed !important;
}

/* === ICON STYLES === */
.bi-1x { font-size: 1rem !important; line-height: 1rem !important; height: 1rem !important; }
.bi-2x { font-size: 1.5rem !important; line-height: 1.5rem !important; height: 1.5rem !important; }
.bi-3x { font-size: 2rem !important; line-height: 2rem !important; height: 2rem !important; }
.bi-4x { font-size: 2.5rem !important; line-height: 2.5rem !important; height: 2.5rem !important; }
.bi-5x { font-size: 3rem !important; line-height: 3rem !important; height: 3rem !important; }
.bi-6x { font-size: 3.5rem !important; line-height: 3.5rem !important; height: 3.5rem !important; }

/* scaled 1.5 */
.form-check.form-check-lg input[type="checkbox"] {
    height: 1.5em;
    width: 1.5em;
    margin-top: 0.375em;
}
.form-check.form-check-lg .form-check-label {
    font-size: 1.5em;
    line-height: 1.5em;
}

.selectable {
    user-select: all;
    cursor: pointer;
}

[onclick] {
    cursor: pointer;
}

.display-7 {

}

/* Animations (modified from https://animista.net) */
html {
    --animation-time: 0.4s;
    --animation-time-short: 0.2s;
    --animation-time-long: 0.8s;
    --animation-ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
    --animation-ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
}
.scale-up-ver-center {
    -webkit-animation: scale-up-ver-center var(--animation-time) var(--animation-ease-in-out-quart) both;
    animation: scale-up-ver-center var(--animation-time) var(--animation-ease-in-out-quart) both;
}
@-webkit-keyframes scale-up-ver-center {
    0% { -webkit-transform: translateY(50px) scaleY(0.2); transform: translateY(50px) scaleY(0.2); opacity: 0; }
    100% { -webkit-transform: scaleY(1);transform: scaleY(1); opacity: 1; }
}
@keyframes scale-up-ver-center {
    0% { -webkit-transform: translateY(50px) scaleY(0.2); transform: translateY(50px) scaleY(0.2); opacity: 0; }
    100% { -webkit-transform: scaleY(1);transform: scaleY(1); opacity: 1; }
}
.slide-in-up {
    -webkit-animation: slide-in-up var(--animation-time) var(--animation-ease-in-out-quad) both;
    animation: slide-in-up var(--animation-time) var(--animation-ease-in-out-quad) both;
}
@-webkit-keyframes slide-in-up {
    0% { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; }
    100% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; }
}
@keyframes slide-in-up {
    0% { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; }
    100% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1; }
}
.slide-in-right {
    -webkit-animation: slide-in-right var(--animation-time) var(--animation-ease-in-out-quad) both;
    animation: slide-in-right var(--animation-time) var(--animation-ease-in-out-quad) both;
}
@-webkit-keyframes slide-in-right {
    0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; }
    100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; }
}
@keyframes slide-in-right {
    0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; }
    100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; }
}
.slide-in-left {
    -webkit-animation: slide-in-left var(--animation-time) var(--animation-ease-in-out-quad) both;
    animation: slide-in-left var(--animation-time) var(--animation-ease-in-out-quad) both;
}
@-webkit-keyframes slide-in-left {
    0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; }
    100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; }
}
@keyframes slide-in-left {
    0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; }
    100% { -webkit-transform: translateX(0px); transform: translateX(0px); opacity: 1; }
}
.shake-horizontal {
    -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@-webkit-keyframes shake-horizontal {
    0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }
    10%, 30%, 50%, 70% { -webkit-transform: translateX(-10px); transform: translateX(-10px); }
    20%, 40%, 60% { -webkit-transform: translateX(10px); transform: translateX(10px); }
    80% { -webkit-transform: translateX(8px); transform: translateX(8px); }
    90% { -webkit-transform: translateX(-8px); transform: translateX(-8px); }
}
@keyframes shake-horizontal {
    0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }
    10%, 30%, 50%, 70% { -webkit-transform: translateX(-10px); transform: translateX(-10px); }
    20%, 40%, 60% { -webkit-transform: translateX(10px); transform: translateX(10px); }
    80% { -webkit-transform: translateX(8px); transform: translateX(8px); }
    90% { -webkit-transform: translateX(-8px); transform: translateX(-8px); }
}

.animation-order-1 { animation-delay: 0s; }
.animation-order-2 { animation-delay: 0.1s; }
.animation-order-3 { animation-delay: 0.2s; }