.pointer {
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.orbitron {
    font-family: "Orbitron", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.fade_container {
    transition: opacity 500ms ease-in-out;
}

.primary_background {
    /*background-color: #242F3F;*/
    background-color: rgba(18,18,23,0.94);
}

.primary_button {
    font-weight: bolder;
    /*background-color: #0d0e29;*/
    background-color: rgb(79 70 229);
    color: white;
    padding: 10px 20px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    border-radius: 5px;
    transition: 0.4s all;
    cursor: pointer;
}

.primary_text {
    color: rgb(229, 231, 235)
}

.main_container {
    /* padding: 8% 4% 8% 4%; */
}
.custom_container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    max-width: 100rem;
    margin-left: auto;
    margin-right: auto;
    /* margin-top: 2%; */
}
.link {
    color: #3b82f6; /* blue-500 */
    cursor: pointer;
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
}
@media (min-width: 1024px) {
    .custom_container {
        padding-left: 12rem;
        padding-right: 12rem;
    }
}
.card_list {
    background-color: #242F3F;
     background-color: rgba(18,18,23,0.94);
    padding: 3%;
    border: 1px solid #1b222d;
}
.fight_row {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    background-color: rgba(27, 40, 56, 0.48);
    transition: transform 0.2s, box-shadow 0.2s;
}

.fight_row:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.ts-wrapper .option .title {
    display: block;
}

.ts-wrapper .option .url {
    font-size: 12px;
    display: block;
    color: #a0a0a0;
}

.custom-option {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.custom-option:hover {
    background-color: #f0f0f0;
}

.ts-control {
    width: 450px !important;
}

.tags {
    color: black;
}

body {
    height: 100vh;
    background-color: rgb(7, 9, 12);
}

.table_selection {
    display: flex;
}

.faceoff_line {
    display: flex;
    justify-content: space-evenly;
    border: 2px solid #313131;
    margin-top: 5px;
    margin-bottom: 2rem;
    padding: 4%;
    border-radius: 0.75rem;
    font-size: 130%;
    font-weight: bolder;
}

.navbar {
    background-color: rgb(7, 9, 12);
    color: white;
    border-bottom: 2px solid #1b222d;
}

.title_large_underline {
    border-bottom: 2px solid ghostwhite;
    padding-bottom: 2%;
    font-size: 3rem;
    font-weight: bold;
    color: #e9e9ec;
}

.stats {
    background-color: rgba(27, 28, 27, 0.8);
    padding: 4%;
    border-radius: 1.25rem;
    display: flex;
}

.stat-delimiter {
    border-left: 1px solid black;
}

.stat-value {
    grid-column-start: 1;
    white-space: nowrap;
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 800;
}

.primary_button:hover {
    background-color: #5b5ec7;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 10px 30px 0 rgba(0, 0, 0, 0.19);
}

.delete_button {
    background-color: darkred !important;
}

.dashboard_module {
    padding: 2.5%;
    border-radius: 2rem;
    background-color: rgba(25, 34, 44, 0.75);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
}

.fighter_property {
    min-width: 150px;
    padding: 1%;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
}

.event_card {
    padding-bottom: 15px;
    margin-bottom: 2%;
}

.pointer:hover {
    background-color: #d4d4d4;
}

.highlight {
    transition: all 0.15s ease-in;
    background-color: #587acc;
    border-radius: 0.5rem;
}

.highlight-removed {
    transition: all 0.15s ease-out;
    background-color: transparent;
}

.navbar-item,
i {
    margin-right: 5px;
    font-size: 110%;
}

.half-width {
    width: 50%;
}

.selected {
    background-color: #1b5419 !important;
    color: white;
}

.hit_card_item {
    font-size: 150%;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: rgb(199, 76, 54);
    border: 1px solid black;
    text-align: center;
}

.strike_card_item {
    width: 10rem;
    cursor: pointer;
    font-size: 130%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: rgb(112, 117, 112);
    border: 1px solid black;
    text-align: center;
    transition: all 0.25s ease-in-out;
}

.strike_card_item:hover {
    background-color: rgb(47, 134, 41, 0.8);
}

.strike_card_selected {
    background-color: rgb(47, 134, 41, 0.8);
}

.strike_possible_destination {
    cursor: pointer;
    font-size: 130%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: rgba(206, 219, 90, 0.501);
    border: 1px solid black;
    text-align: center;
    transition: all 0.25s ease-in-out;
}

.strike_possible_destination_active {
    background-color: rgba(199, 214, 67, 0.879);
}

.strike_possible_destination:hover {
    background-color: rgba(206, 219, 90, 0.78);
}

.strike_destination {
    transition: all 0.25s ease-in-out;
}

.info_card_item {
    font-size: 120%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 2rem;
    border-bottom: 1px solid black;

    span {
        float: right;
    }
}

.strike_card_section {
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    transition: all 0.25s ease-in-out;
}

label {
    font-weight: bold;
}

.round_selector {
    border: 1px solid black;
    border-radius: 3px;
    padding: 4%;
    margin-bottom: 1%;
    width: 100%;
    cursor: pointer;
    transition: all 0.25s ease-in-out;

    label {
        font-weight: normal;
    }
}

.disabled {
    opacity: 0.4;
    cursor: default !important;
}

input:checked ~ .dot {
    transform: translateX(100%);
    background-color: #48bb78;
    /* green color when active */
}

.fight_status {
    border: 1px solid black;
    padding: 4%;
    background-color: rgba(178, 178, 63, 0.888);
    cursor: pointer;
    transition: all 0.15s ease-in-out;

}

.fight_status:hover {
    background-color: rgb(218, 218, 48);
}

.fight_status_active {
    background-color: rgb(218, 218, 48);
}

.fight_status_section {
    margin-bottom: 3%;
}

.ground_time_start {
    background-color: rgba(63, 178, 94, 0.888);
}

.ground_time_stop {
    background-color: rgba(178, 73, 63, 0.888);
}

.ground_time_start_stop_button {
    transition: all 0.4s ease-in-out;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    min-width: 12%;
    border: 2px solid black;
    padding: 1% 3% 1% 3%;
}

.ground_control_time {
    border: 2px solid black;
    padding: 1% 3% 1% 3%;
    background-color: rgba(225, 225, 225, 0.888);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    min-width: 12%;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.fighter_body_image {
    transition: all 0.15s ease-in-out;
    padding: 1%;
    margin: 1%;
}

.fight_round_details {
    transition: all 0.3s ease-in-out;
}

.strike_significant_strike,
.strike_non_significant_strike {
    cursor: pointer;
    height: 50%;
    font-size: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border: 1px solid black;
    text-align: center;
    transition: all 0.25s ease-in-out;
}

.strike_significant_strike {
    opacity: 1;
}

.strike_non_significant_strike {
    opacity: 0.5;
}

.significant_strike_option_active {
    opacity: 1 !important;
}

.strike_significant_strike {
    background-color: rgb(90, 219, 96);
    opacity: 0.5;
}

.strike_non_significant_strike {
    background-color: rgb(219, 90, 90);
    opacity: 0.5;
}

.disabled {
    opacity: 0.4;
    pointer-events: none !important;
}

.activate_simulation {
    width: 90%;
}

#btn_start_simulation {
    float: right;
}

.simulation_banner span {
    margin-right: 4rem;
}

.loader_container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100000;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 1rem;
    width: 10rem;
    height: 10rem;
}

.loader {
    margin-left: 4.5rem;
    margin-top: 3.5rem;
    color: #FFF;
    position: fixed;
    font-size: 11px;
    background: #FFF;
    animation: escaleY 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
    animation-delay: -0.16s;
}

.loader:before,
.loader:after {
    content: '';
    position: absolute;
    top: 0;
    left: 2em;
    background: #FFF;
    width: 1em;
    height: 4em;
    animation: escaleY 1s infinite ease-in-out;
}

.loader:before {
    left: -2em;
    animation-delay: -0.32s;
}

@keyframes escaleY {
    0%, 80%, 100% {
        box-shadow: 0 0;
        height: 4em;
    }
    40% {
        box-shadow: 0 -2em;
        height: 5em;
    }
}

@keyframes matrix {
    0% {
        background-position: 0% 100%, 50% 100%, 100% 100%
    }
    100% {
        background-position: 0% 0%, 50% 0%, 100% 0%
    }
}


@keyframes rotate {
    100% {
        transform: rotate(360deg)
    }
}

/*
Scroll bar slim dark theme (Chat-GPT)
*/
/* Webkit-based browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #242F3F;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #242F3F;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #242F3F;
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #444 #242F3F;
}