style.css

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

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


:root {
    --primary-900: #463f75;
    --primary-700: #4e4982;
    --primary-600: #57538e;
    --primary-400: #7373a6;
    --primary-100: #cbcde0;
    --font: #eaeaea;
}

.cursor-none {
    cursor: none;
}

.cursor-pointer {
    cursor: pointer;
}

.invisible {
    visibility: hidden;
}


body {
    font-size: 1rem;
    font-family: 'Manrope', sans-serif;
    background-color: #382F5D;
    color: var(--font);
}

.alert {
    text-align: center;
    padding: 0.25rem;
}

p {
    margin-bottom: 0;
    color: var(--font);
}

a {
    color: var(--font);
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 8px;
}

button:focus {
    border: none;
}

.btn-outline-primary {
    color: var(--font);
    border: 1px solid var(--font);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: var(--font);
    border: 1px solid var(--font) !important;
    background-color: var(--primary-400) !important;
}


input {
    border: none !important;
    /* border-radius: 2px !important; */
    background-color: var(--primary-600) !important;
    /* border-bottom: 2px solid blue !important; */
    color: var(--font) !important;
}

input:focus {
    color: var(--font);
    box-shadow: 0px 0px 12px var(--font) !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}



.shortcut-key-label {
    display: inline;
    color: black;
}


.shortcut-key-input {
    width: 2.5rem;
    padding: 1rem .75rem;
    border: 0.8114px solid #dee2e6;
    border-radius: 6px;
}

.action-item-container {
    padding: 0rem 0.5rem 0.5rem 0.5rem;
    /* border-left: 4px solid blue; */
    border-radius: 0.25rem;
    /* background-color: #f7f7f7; */
    width: fit-content;
}


label,
label::after {
    background-color: transparent !important;
    color: var(--primary-100) !important;
}

.accordion-button {
    background-color: var(--primary-900);
    color: var(--font);
    font-weight: bold;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


.accordion-button:focus,
.accordion-button:not(.collapsed) {
    background-color: var(--primary-900);
    color: var(--font);
    font-weight: bold;
    box-shadow: none;
}

.accordion-item {
    border: 1px solid var(--primary-700);
    background-color: var(--primary-400);
}

.z-10 {
    z-index: 10;
}

.emoticon {
    margin-left: -2.5rem;
}


@keyframes headShake {
    0% {
        transform: translateX(0);
    }

    6.5% {
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}