body
{
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    width: 100%;
    height: 100%;
    background: #1d1d1d;
    color: #fff;
    /*position:fixed;*/
    min-height: 5in;
    scrollbar-width: thin; /* Para sa Firefox */
    scrollbar-color: rgba(0,0,0,0.3) transparent;
}


.hider
{
    display:none;
}
.overlay
{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1000;
    /*background: url(supply/overbg.png);*/
    cursor: default;
    /*display: none;*/
}

.overlay2
{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1000;
    background: url(../supply/over_bg/2.png);
    cursor: default;
}

.overlay3
{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 1000;
    background: none;
    cursor: default;
    background: url(../supply/over_bg/1.png);
}

.center
{
    position: absolute;
    /*background: white;*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 10px;
    cursor: default;
    max-width: 3in;
}

.center2
{
    position: absolute;
    background: #181818;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 10px;
    cursor: default;
    border: 1px solid #22221d;
}

.center3
{
    position: absolute;
    background: #181818;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 5px;
    cursor: default;
    border: 2px solid #fff;
}


.pop_h
{
    width: 98%;
    height: 10%;
    border-bottom: 1px solid #22221d;
    margin: auto;
}

    .pop_h table
    {
        width: 100%;
        height: 100%;
        font-size: 1em;
        font-weight: 600;
        color: #d4af37; /* Gold color to match the buttons */
        border-radius: 8px 8px 0 0; /* Rounded corners on the top */
        letter-spacing: 1px; /* Slight spacing for elegance */
        text-transform: uppercase;

    }

.pop_b
{
    width: 98%;
    height: 80%;
    overflow-y: scroll;
    margin: auto;
    background: url(../supply/logo/803bde_egrv.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    overflow-x: hidden;
}

/* General button styling */
.team-button {
    display: inline-block;
    font-size: 1em;
    font-weight: bold;
    padding: 4px 6px;
    margin: 5px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

/* Modify Button */
.modify-button {
    background-color: #4CAF50; /* Green */
    color: white;
}

.modify-button:hover {
    background-color: #45a049;
    transform: scale(1.05);
}

/* Deactivate Button */
.deactivate-button {
    background-color: #f44336; /* Red */
    color: white;
}

.deactivate-button:hover {
    background-color: #d32f2f;
    transform: scale(1.05);
}

/* Optional: Additional focus styling for accessibility */
.team-button:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}


.pop_plyercard_container
{
    width:99%;height:auto;margin-top:5px;background-image:url(../supply/over_bg/3.png);border-radius:10px;border:1px solid rgba(0,0,0,0.3);
}
    .pop_plyercard_container:hover
    {
        border-radius:15px;
        border:1px solid rgba(98, 95, 95, 0.62);
    }
    .pop_plyercard_container .plyrname
    {
        color:#37d5f3;
        font-size:1.2em;
    }
        .pop_plyercard_container .plyr-info
    {
        font-size:1em;
    }

    .plyr_inc_h
    {
        font-family: 'Arial', sans-serif; /* O ibang gusto mong font */
        font-size: 1.5rem; /* Malinaw na laki ng font */
        font-weight: bold; /* Ginawang bold para sa emphasis */
        color: #333; /* Dark gray na kulay */
        background-color: #f4f4f4; /* Light gray background */
        padding: 0px 0px; /* Space sa loob ng heading */
        text-align: center; /* Naka-center ang text */
        border-bottom: 2px solid #ccc; /* Border sa ilalim para i-separate sa content */
        margin: 0; /* Alisin ang default margin */
        height:10%; 
    }

    .search_bar_plyr_new {
    width: 96%; /* Lapad ng search bar, adjust kung kinakailangan */
    font-size: .9rem; /* Size ng text */
    border: 2px solid #ccc; /* Border style */
    border-radius: 5px; /* Rounded corners */
    outline: none; /* Alisin ang outline kapag na-click */
    display: block; /* Para sa proper alignment sa parent */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow */
    transition: all 0.3s ease-in-out; /* Smooth hover effect */
    height:80%;
    margin:auto;
    background:rgba(187, 183, 183, 0.49)
}

.search_bar_plyr_new:focus {
    border-color: #007bff; /* Kulay ng border kapag na-click */
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2); /* Blue shadow on focus */
}


.done-button {
    background-color: #28a745; /* Green background */
    color: white; /* Text color */
    font-size: .8rem; /* Font size */
    font-weight: bold; /* Bold text */
    padding: 5px 10px; /* Button size */
    border: none; /* Remove border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor for better UX */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: all 0.3s ease-in-out; /* Smooth hover transition */
    /*display: block; /* Ensure alignment works */*/
    text-align: center; /* Center text */
    margin:auto;
}

.done-button:hover {
    background-color: #218838; /* Darker green on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Deeper shadow on hover */
    transform: translateY(-2px); /* Slight lift effect */
}



.done-button:active {
    background-color: #1e7e34; /* Even darker green on click */
    transform: translateY(1px); /* Slight press effect */
    box-shadow: 0 0 5px 2px #80aaff; /* Blue glow outline */
}

/* CSS for the Insert to players list button */
.insert-to-players-list
{
    background-color: #007bff; /* Blue background */
    color: #fff; /* White text */
    font-size: 1em; /* Adjust font size */
    font-weight: bold; /* Make text bold */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    padding: 8px 12px; /* Padding for size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth hover effect */
}

    /* Hover effect */
    .insert-to-players-list:hover
    {
        background-color: #0056b3; /* Darker blue on hover */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
    }

    /* Focus effect */
    .insert-to-players-list:focus
    {
        outline: none; /* Remove default outline */
        box-shadow: 0 0 5px 2px #80aaff; /* Blue glow outline */
    }

    /* Disabled state */
    .insert-to-players-list:disabled
    {
        background-color: #6c757d; /* Gray background for disabled */
        cursor: not-allowed; /* Change cursor for disabled */
        opacity: 0.65; /* Reduce opacity */
    }

    .textbox-newteam {
    width: 95%;
    margin:auto;
    padding: 8px;
    border: 1px solid #666;
    border-radius: 5px;
    font-size: 16px;
    background-color: #2e2e2e;
    color: #fff;
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s, border-color 0.2s;
}

    .textbox-newteam:focus {
    background-color: #3a3a3a;
    border-color: #888;
    outline: none;
}

.textbox-newteam::placeholder {
    color: #bbb;
}




.ddl_evnts_typ {
    width: auto;
    min-width: 100px;
    padding: .2rem;
    border: 2px solid #2a2a2a; /* Dark gray accent */
    border-radius: 8px;
    background-color: #1e1e1e; /* Dark background */
    font-size:1em;
    color: #f5f5f5; /* Light text color */
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Subtle shadow */
}

.ddl_evnts_typ:hover {
    background-color: #2c2c2c; /* Slightly lighter background on hover */
    border-color: #444; /* Lighter gray border on hover */
}

.ddl_evnts_typ:focus {
    border-color: #666; /* Focus border */
    box-shadow: 0 0 6px rgba(102, 102, 102, 0.5); /* Subtle glow effect */

}


     
              .popup-container_tvtt2rr {
            background-color: #1e1e1e;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
            width: 90%;
            padding: 20px;
            text-align: center;
            margin:auto;
            background-image:url(supply/logo/803bde_egrv.png);background-repeat:no-repeat;background-size:contain;background-position:center;background-size:60%;
        }

        .popup-header_tvtt2rr {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .popup-body_tvtt2rr {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .team-section_tvtt2rr {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .team_tvtt2rr {
            width: 40%;
        }


     .select_tvtt2rr {
            width: 100%;
            padding: 8px;
            border: 1px solid #333;
            border-radius: 8px;
            box-sizing: border-box;
            background-color: #252525;
            color: #e0e0e0;
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
        }

        .select_tvtt2rr:focus {
            outline: none;
            border-color: #007bff;
        }
        .vs_tvtt2rr {
            font-size: 18px;
            font-weight: bold;
            color: #ff7000;
        }

        .match-section_tvtt2rr {
            margin-top: 20px;
        }

        .popup-footer_tvtt2rr {
            margin-top: 20px;
        }

       .styled-textbox_tvtt2rr {
    -webkit-appearance: none; /* Removes default browser styles for WebKit browsers */
    -moz-appearance: textfield; /* Removes default styles for Firefox */
    appearance: none; /* Modern browsers */
    width: 30%;margin:auto;
    padding: 8px;
    border: 1px solid #333;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: #252525;
    color: #e0e0e0;
    font-family: 'Open Sans', sans-serif;
    text-align:center;
}

.styled-textbox_tvtt2rr::placeholder {
    color: #888; /* Placeholder text color */
}

.styled-textbox_tvtt2rr:focus {
    outline: none;
    border-color: #007bff; /* Blue border on focus */
}

        .btn_tvtt2rr {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
        }

        .btn_tvtt2rr:hover {
            background-color: #0056b3;
        }



/*matches*/
.matches-button {
    display: block;
    width: 80%;
    margin: 10px auto;
    padding: 10px;
    font-size: 1em;
    color: #c0c0c0; /* Soft gray-silver for text */
    background-color: #2c2c2c; /* Dark background */
    border: 1px solid #444; /* Subtle border for definition */
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Deeper shadow for dark theme */
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .matches-button:hover {
    background-color: #3e3e3e; /* Slightly lighter on hover */
    color: #00d4ff; /* Accent color for interactivity */
    transform: scale(1.05); /* Small zoom effect */
  }

  .matches-button:active {
    background-color: #1f1f1f; /* Slightly darker on click */
    color: #a3a3a3; /* Even softer gray when active */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7); /* Adjusted shadow on active */
    transform: scale(0.95); /* Slightly shrink on click */
  }


/*end*/

.pop_f
{
    width: 98%;
    height: 10%;
    margin: auto;
}

    .pop_f table
    {
        width: 100%;
        height: 100%;
        text-align: center;
    }


.pin1
{
    background: linear-gradient(45deg, #d4af37, #b8860b); /* Gold shades */
    color: white;
    border: none;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: .85em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

    .pin1:hover
    {
        background: linear-gradient(45deg, #b8860b, #d4af37);
        color: #fff9e3; /* Slightly brighter for contrast */
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    }

    .pin1:active
    {
        transform: translateY(2px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .pin1:focus
    {
        outline: 2px solid #ffe08a; /* Focus state with soft gold outline */
    }

/*Neutrals*/
.pc_container
{
    display: none;
    width: 100%;
    height: 100%;
}

.tab_container
{
    display: none;
    width: 100%;
    height: 100%;
}

.fon_container
{
    display: none;
    width: 100%;
    height: 100%;
}





/* Phone (up to 600px wide) */
@media (max-width: 600px)
{
    .pc_container
    {
        display: none;
    }

    .tab_container
    {
        display: none;
    }

    .fon_container
    {
        display: block;
    }
}

/* Tablet (601px to 1024px) */
@media (min-width: 601px) and (max-width: 1024px)
{
    .pc_container
    {
        display: none;
    }

    .tab_container
    {
        display: block;
    }

    .fon_container
    {
        display: normal;
    }
}

/* Desktop (1025px and above) */
@media (min-width: 1025px)
{
    .pc_container
    {
        display: block;
    }

    .tab_container
    {
        display: none;
    }

    .fon_container
    {
        display: none;
    }

    .pc_head
    {
        width: 100%;
        height: 13%; /*border-bottom:2px solid black;*/
        box-shadow: 0 8px 6px rgba(0, 0, 0, 0.15);
        background: #2a2929;
    }

    .h_nav
    {
        text-decoration: none;
        color: #fff;
        font-size: .9rem;
        transition: color 0.3s;
    }

        .h_nav:hover
        {
            color: #f0a500;
            cursor: pointer;
        }

    .pc_body
    {
        width: 100%;
        height: 80%;
    }

    .car_main
    {
        width: 92%;
        height: 90%;
        float: left;
    }

    .car_main_tit
    {
        padding: 20px;
        background-image: url(../supply/over_bg/3.png);
        border: 1px solid #3d3b3b;
        font-size: .9em;
        border-radius: 2px;
    }

    .car_title
    {
        width: 100%;
        height: 10%;
    }

    .car_nav_but_l
    {
        width: 4%;
        height: 90%;
        float: left; /*background-image:url(../supply/icons/carleft1.png);*/
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-size: 20%;
        cursor: pointer;
    }

        .car_nav_but_l:hover
        {
            background-size: 30%;
            transition: all 0.2s ease;
        }

    .car_nav_but_r
    {
        width: 4%;
        height: 90%;
        float: right; /*background-image:url(../supply/icons/carright1.png);*/
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-size: 20%;
        cursor: pointer;
    }

        .car_nav_but_r:hover
        {
            background-size: 30%;
            transition: all 0.2s ease;
        }

    .car_ind
    {
        border: 1px solid #3d3c3c;
        border-radius: 3px;
        font-size: .8em;
        background-image: url(../supply/over_bg/2.png);
        cursor: pointer;
        display: inline-block;
        width: 30px;
        height: 30px;
        vertical-align: central;
        text-align: center;
        line-height: 30px;
        margin-left: 1px;
        margin-right: 1px;
    }

        .car_ind:hover
        {
            font-size: 1.2em;
            transition: all 0.3s ease;
            color: #f0a500;
        }

    .pc_footer
    {
        width: 100%;
        height: 7%; /*border-top:2px solid black;*/
        box-shadow: 8px 0 6px rgba(0, 0, 0, 0.15);
        background: #2a2929;
    }
}