@font-face {
    src: url("../fonts/SF-PRO-ROUNDED-BOLD.OTF");
    font-family: "sf-pro-rounded-bold";
}
@font-face {
    src: url("../fonts/SF-PRO-ROUNDED-MEDIUM.OTF");
    font-family: "sf-pro-rounded-medium";
}

body {
    overflow: hidden;
    user-select: none;
    /* background-color: rgba(0, 0, 0, 0.502);  */
}

.fade-enter-active,
.fade-leave-active {
    transition: all 0.5s ease;
}
.fade-enter {
    opacity: 0;
    transform: translateY(0);
}

.fade-enter-to {
    opacity: 1;
    transform: translateY(8px);
}
.fade-leave {
    opacity: 1;
    transform: translateY(8px);
}
.fade-leave-to {
    opacity: 0;
    transform: translateY(-60px);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.summaryModal-enter-active {
    animation: category-enter 0.5s ease forwards;
}
.summaryModal-leave-active {
    animation: categoryImage-leave 0.3s ease forwards;
}

@keyframes category-enter {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0%);
    }
}
@keyframes categoryImage-leave {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(-100%);
    }
}
.categoryItemMechanic {
    transition: background-color 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}
.categoryItemMechanic.red:hover {
    background-color: #ff6262 !important;
}
.categoryItemMechanic.blue:hover {
    background-color: #62a1ff !important;
}
.categoryItemMechanic.orange:hover {
    background-color: #ff9a62 !important;
}
.categoryItemMechanic.white:hover {
    background-color: #ffffff !important;
}
.categoryItemMechanic.purple:hover {
    background-color: #bc84ff !important;
}

.bottom-container-enter-active {
    animation: category-item-enter 0.2s ease forwards;
}

.bottom-container-leave-active {
    animation: category-item-leave 0.2s ease forwards;
}

.stanceMenu-enter-active {
    animation: stance-enter 1s ease forwards;
}
.stanceMenu-leave-active {
    animation: stance-leave 0.2s ease forwards;
}
@keyframes stance-enter {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}
@keyframes stance-leave {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes category-item-enter {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes category-item-leave {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
.swiper-pagination-bullet {
    background: rgb(185, 179, 179) !important;
    opacity: 0.5;
    transition: width 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: white !important;
    opacity: 1;
    border-radius: 1vw !important;
    width: 4vw !important;
    transition: width 0.5s ease;
}

/* .swiper-slide:hover {
    border: 0.1875rem solid #bc84ff;
    filter: drop-shadow(0rem 0rem 0.5vw #bc84ff);
} */
.swiper-slide.red:hover {
    border: 0.1875rem solid #ff6262;
    filter: drop-shadow(0rem 0rem 0.5vw #ff6262);
}
.swiper-slide.blue:hover {
    border: 0.1875rem solid #62a1ff;
    filter: drop-shadow(0rem 0rem 0.5vw #62a1ff);
}
.swiper-slide.orange:hover {
    border: 0.1875rem solid #ff9a62;
    filter: drop-shadow(0rem 0rem 0.5vw #ff9a62);
}
.swiper-slide.white:hover {
    border: 0.1875rem solid #ffffff;
    filter: drop-shadow(0rem 0rem 0.5vw #ffffff);
}
.swiper-slide.purple:hover {
    background-color: #bc84ff !important;
    filter: drop-shadow(0rem 0rem 0.5vw #bc84ff);
}

.special-color-fields {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    outline: none;
    color: transparent;
}

.special-color-fields::-webkit-input-placeholder {
    color: transparent !important;
}
.stancemenu {
    -webkit-appearance: none;
    width: 100%;
    margin: 0.375rem 0;
    background: linear-gradient(
        to right,
        #ff9c65 0%,
        #ff9c65 var(--pos, 0%),
        rgba(217, 217, 217, 0.32) var(--pos, 50%),
        rgba(217, 217, 217, 0.32) 100%
    );
}

.stancemenu::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.2vw;
    height: 2.1vh;
    background: #bc84ff;
    cursor: pointer;
    border: 0.125rem solid white;
    border-radius: 50%;
}

.boss-menu-input {
    border-radius: 0.375rem;
    border: 0.125rem solid rgba(255, 156, 101, 0.14);
    background: rgba(255, 156, 101, 0.23);
    outline: none;
    appearance: none;

    color: rgba(255, 156, 101, 0.8);
    leading-trim: both;
    text-edge: cap;
    font-family: "sf-pro-rounded-bold";
    font-size: 1.7vh;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.boss-menu-input::-webkit-outer-spin-button,
.boss-menu-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.boss-menu-input::placeholder {
    color: rgba(255, 156, 101, 0.29);
    leading-trim: both;
    text-edge: cap;
    font-family: "sf-pro-rounded-bold";
    font-size: 1.7vh;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.id-input {
    border-radius: 0.3125rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.12);
    outline: none;
    appearance: none;

    color: rgba(255, 255, 255, 0.8);
    leading-trim: both;
    text-edge: cap;
    font-family: "sf-pro-rounded-bold";
    font-size: 1vh;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.id-input::-webkit-outer-spin-button,
.id-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.id-input::placeholder {
    color: rgba(255, 255, 255, 0.47);

    leading-trim: both;
    text-edge: cap;
    font-family: "sf-pro-rounded-bold";
    font-size: 1vh;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background: rgba(255, 156, 101, 0.3);
    /* Not removed via appearance */
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: currentColor;
    width: 20px;
    height: 20px;
    border: 0.15em solid #ff9c65;
    border-radius: 6px;

    display: grid;
    place-content: center;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    /* Windows High Contrast Mode */
    background-color: #75482f;
}
input[type="checkbox"]:checked {
    background: #ff9c65;
}
input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.search-logs-input {
    appearance: none;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 2.5rem;
    border-radius: 29px;
    background: linear-gradient(180deg, rgba(188, 132, 255, 0.31) 0%, rgba(188, 132, 255, 0.31) 100%),
        linear-gradient(0deg, rgba(188, 132, 255, 0.03), rgba(188, 132, 255, 0.03));
    color: rgba(255, 255, 255, 0.9);
    leading-trim: both;
    text-edge: cap;
    font-family: "sf-pro-rounded-bold";
    font-size: 1.25vh;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}
.search-logs-input::placeholder {
    color: rgba(255, 255, 255, 0.47);
}

.hoverjobmenu:hover {
    border: 2px solid #d6b4ff;
    border-radius: 0.5vw;
    background-color: rgba(188, 132, 255, 0.71);
}