.card-get-color {
    background-color: light-dark(rgb(188, 206, 251), #121212);
}

.card-post-color {
    background-color: light-dark(rgb(158, 235, 71), #90ec6f);
}

.badge-get-color {
    background-color: light-dark(rgb(91, 200, 215), #65d3e0);
}

.badge-post-color {
    background-color: light-dark(rgb(1, 150, 32), #028f3a);
}

.arrow {
    transition: transform 0.3s ease-in-out;
}

.arrow-up {
    transform: rotate(180deg);
}

.arrow-down {
    transform: rotate(0deg);
}

.small-input-box {
    width: 50px;
}

.medium-input-box {
    width: 100px;
}

.large-input-box {
    width: 200px;
}

.xxl-input-box {
    width: 400px;
}

.notification-bubble-success {
    position: fixed;
    top: 70px;
    right: 20px;
    background-color: light-dark(#28a745, #42be68);
    color: light-dark(white, #121212);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.notification-bubble-error {
    position: fixed;
    top: 70px;
    right: 20px;
    background-color: light-dark(#990000, #bf0000);
    color: light-dark(white, #121212);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}