/* stylesheet.css */

/* stuff for phones */

html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Ensure they take the full viewport height */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Apply scaling for smaller screens */
@media (max-width: 450px) {
    .main-container {
        display: flex; /* Enable Flexbox for proper alignment */
        flex-wrap: wrap; /* Allow rows to wrap properly */
        transform: scale(0.4); /* Scale everything down to 40% */
        transform-origin: top left; /* Ensure scaling starts from the top-left corner */
        width: calc(100% / 0.4); /* Dynamically adjust width based on scale */
        overflow-y: auto; /* Allow vertical scrolling if content overflows */
        overflow-x: hidden; /* Prevent unwanted horizontal scrollbars */
        gap: 10px; /* Add spacing between elements */
        justify-content: space-between; /* Distribute space between columns */
    }

    /* Optional: Adjust content inside the scaled container */
    .main-container > * {
        flex: 1 1 auto; /* Ensure children grow proportionally */
    }
}

/* end stuff for phones */

/* footer */
.footer {
    position: relative; /* Ensure it's positioned relative to the content */
    width: 100%; /* Full-width footer */
    margin-top: auto; /* Push it to the bottom of the page */
    padding: 10px 20px; /* Add some padding for better spacing */
    background-color: #13294b; /* Example background color */
    color: white;
    text-align: center;
}

.footer a {
    color: #4b9cd3; /* Link color */
    text-decoration: none; /* Remove underlines */
    margin: 0 5px; /* Add spacing between links */
}

.footer a:hover {
    color: #ffffff; /* Change link color on hover */
}
/* end footer*/


.banner {
    height: 75px;
    margin: 0px -10px 10px;
    background-color: rgb(66, 196, 247);
    border-radius: 2px;
}

.banner h2{
    color: white;
    padding-top: 10px;
    margin-left: 2%;
    display: inline-block;
}

.banner Img{
    position: relative;
    float: right;
    right: 10px;
    height: 75px;
}

.rc-slider-track {
  background-color: red;
  width: 100%;
  position: relative;
}

/* Default state styles */
#submit-button {
    padding: 10px; /* Adjust padding for overall size */
    width: 125px;  /* Adjust width for wider buttons */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
    line-height: 1; /* Adjust line-height for vertical centering */
    background-color: white; /* Set the background color to white */
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Clicked state styles */
#submit-button:active,
#submit-button:hover {
    background-color: #13294b;
    color: white;
}

/* Active and Focus state styles */
#submit-button:active,
#submit-button:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

#individual-submit-button.pitch-submit-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background-color: white;
    border-color: #13294b;
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

#individual-submit-button.pitch-submit-button:hover {
    background-color: #13294b;
    color: white;
}

#individual-submit-button.pitch-submit-button:active,
#individual-submit-button.pitch-submit-button:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

#agg-submit-button.pitch-submit-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background-color: white;
    border-color: #13294b;
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

#agg-submit-button.pitch-submit-button:hover {
    background-color: #13294b;
    color: white;
}

#agg-submit-button.pitch-submit-button:active,
#agg-submit-button.pitch-submit-button:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

#game-leader-submit-button.pitch-submit-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background-color: white;
    border-color: #13294b;
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

#game-leader-submit-button.pitch-submit-button:hover {
    background-color: #13294b;
    color: white;
}

#game-leader-submit-button.pitch-submit-button:active,
#game-leader-submit-button.pitch-submit-button:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

#season-leader-submit-button.pitch-submit-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background-color: white;
    border-color: #13294b;
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

#season-leader-submit-button.pitch-submit-button:hover {
    background-color: #13294b;
    color: white;
}

#season-leader-submit-button.pitch-submit-button:active,
#season-leader-submit-button.pitch-submit-button:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

.custom-range-slider .rc-slider-track {
    background-color: #13294b; /* Color of the slider track */
}

.custom-range-slider .rc-slider-handle {
    border-color: #13294b; /* Color of the slider handle */
}

.custom-range-slider .rc-slider-handle:hover {
    border-color: #13294b; /* Color of the slider handle on hover */
}


/* Hide radio buttons */
.radio-group .btn-check {
    display: none;
}
/* Radio Button Design */
.radio-group .btn-group .btn {
    padding: 10px; /* Adjust padding for overall size */
    width: 125px;  /* Adjust width for wider buttons */
    margin-right: -4px; /* Adjust the margin to remove space between buttons */
    margin-left: -4.5px; /* Adjust the margin to remove space between buttons */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
}

/* Active Radio Button Color */
.radio-group .btn-group .btn.active {
    background-color: #13294b; /* Change the background color when checked */
    border-color: #13294b; /* Change the border color when checked */
}

.radio-group .btn-group .btn:hover {
    background-color: #13294b; /* Change the background color when checked */
    border-color: #13294b; /* Change the border color when checked */
}

.radio-group .btn-group .btn:not(.active):not(:hover) {
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Adjust size for specific buttons */
.radio-group .btn-group .btn.smaller {
    padding: 10px; /* Adjust padding for overall size */
    width: 125px;  /* Adjust width for wider buttons */
    margin-right: -4px; /* Adjust the margin to remove space between buttons */
    margin-left: -4.5px; /* Adjust the margin to remove space between buttons */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
}

/* Active Radio Button Color */
.radio-group .btn-group .btn-check:checked + label {
    background-color: #13294b; /* Change the background color when checked */
    border-color: #13294b; /* Change the border color when checked */
}

.radio-group .btn-group .btn:hover + label {
    background-color: #13294b; /* Change the background color when checked */
    border-color: #13294b; /* Change the border color when checked */
}

.radio-group .btn-group .btn:not(:checked) + label:not(:hover) {
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* SMALL Radio Group Buttons */

/* Hide radio buttons */
.small-radio-group .btn-check {
    display: none;
}
/* Radio Button Design */
.small-radio-group .btn-group .btn {
    padding: 8px; /* 10px top & bottom */
    padding-left: 43px; /* Adds space to the left of the text */
    padding-right: 43px; /* Adds space to the right of the text */
    margin-right: -4px; /* Adjust the margin to remove space between buttons */
    margin-left: -4.5px; /* Adjust the margin to remove space between buttons */
    font-size: 11px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
}

/* Active Radio Button Color */
.small-radio-group .btn-group .btn.active {
    background-color: #13294b; /* Change the background color when checked */
    border-color: #13294b; /* Change the border color when checked */
}

.small-radio-group .btn-group .btn:hover {
    background-color: #13294b; /* Change the background color when checked */
    border-color: #13294b; /* Change the border color when checked */
}

.small-radio-group .btn-group .btn:not(.active):not(:hover) {
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Adjust size for specific buttons */
.small-radio-group .btn-group .btn.smaller {
    padding: 10px; /* Adjust padding for overall size */
    width: 125px;  /* Adjust width for wider buttons */
    margin-right: -4px; /* Adjust the margin to remove space between buttons */
    margin-left: -4.5px; /* Adjust the margin to remove space between buttons */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
}

/* Active Radio Button Color */
.small-radio-group .btn-group .btn-check:checked + label {
    background-color: #13294b; /* Change the background color when checked */
    border-color: #13294b; /* Change the border color when checked */
}

.small-radio-group .btn-group .btn:hover + label {
    background-color: #13294b; /* Change the background color when checked */
    border-color: #13294b; /* Change the border color when checked */
}

.small-radio-group .btn-group .btn:not(:checked) + label:not(:hover) {
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* DDZ Radio Group Buttons */

/* Hide radio buttons */
.ddz-radio-group .btn-check {
    display: none;
}
/* Radio Button Design */
.ddz-radio-group .btn-group .btn {
    padding: 8px; /* 10px top & bottom */
    padding-left: 32px; /* Adds space to the left of the text */
    padding-right: 32px; /* Adds space to the right of the text */
    margin-left: -15px; /* Adjust the margin to remove space between buttons */
    margin-right: 3px; /* Adjust the margin to remove space between buttons */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
}

/* Active Radio Button Color */
.ddz-radio-group .btn-group .btn.active {
    background-color: #13294b; /* Change the background color when checked */
    border-color: #13294b; /* Change the border color when checked */
}

.ddz-radio-group .btn-group .btn:hover {
    background-color: #13294b; /* Change the background color when checked */
    border-color: #13294b; /* Change the border color when checked */
}

.ddz-radio-group .btn-group .btn:not(.active):not(:hover) {
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Adjust size for specific buttons */
.ddz-radio-group .btn-group .btn.smaller {
    padding: 10px; /* Adjust padding for overall size */
    width: 50px;  /* Adjust width for wider buttons */
    margin-right: -4px; /* Adjust the margin to remove space between buttons */
    margin-left: -4.5px; /* Adjust the margin to remove space between buttons */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
}

/* Active Radio Button Color */
.ddz-radio-group .btn-group .btn-check:checked + label {
    background-color: #13294b; /* Change the background color when checked */
    border-color: #13294b; /* Change the border color when checked */
}

.ddz-radio-group .btn-group .btn:hover + label {
    background-color: #13294b; /* Change the background color when checked */
    border-color: #13294b; /* Change the border color when checked */
}

.ddz-radio-group .btn-group .btn:not(:checked) + label:not(:hover) {
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Default state styles for login/logout buttons */
#login-button,
#logout-button {
    padding: 10px; /* Adjust padding for overall size */
    width: 100px;  /* Adjust width for wider buttons */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #4b9cd3; /* Border color */
    line-height: 1; /* Vertical centering */
    background-color: white; /* Background color */
    color: #13294b; /* Font color */
}

/* Hover and clicked state styles */
#login-button:hover,
#logout-button:hover,
#login-button:active,
#logout-button:active {
    background-color: #4b9cd3; /* Hover color */
    color: white; /* Font color on hover */
}

/* Active and focus state styles */
#login-button:focus,
#logout-button:focus {
    outline: none; /* Remove default focus outline */
    box-shadow: none; /* Remove default box shadow */
}

/* Disabled button styles */
#login-button:disabled,
#logout-button:disabled {
    pointer-events: none; /* Prevent clicking */
    opacity: 1; /* Reduce opacity to visually indicate it's disabled */
    background-color: #13294b; /* Change background color to indicate disabled state */
    color: #13294b; /* Optional: change text color */
    cursor: not-allowed; /* Change cursor to 'not-allowed' when disabled */
    border-color: #13294b;
}

/* Default state styles */
#modal-login-button,
#close-login-modal {
    background-color: white;
    border-color: #413294; /* Border color */
    color: #13294b;
}

/* Clicked and Hover state styles */
#modal-login-button:active,
#modal-login-button:hover,
#close-login-modal:active,
#close-login-modal:hover {
    background-color: #13294b;
    border-color: #413294; /* Border color */
    color: white;
}

/* Active and Focus state styles */
#modal-login-button:active,
#modal-login-button:focus,
#close-login-modal:active,
#close-login-modal:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

/* Default state styles */
#download-btn {
    padding: 10px; /* Adjust padding for overall size */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
    line-height: 1; /* Adjust line-height for vertical centering */
    background-color: white; /* Set the background color to white */
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Clicked state styles */
#download-btn:active,
#download-btn:hover {
    background-color: #13294b;
    color: white;
}

/* Active and Focus state styles */
#download-btn:active,
#download-btn:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

/* Default state styles */
#arsenal-download-btn {
    padding: 10px; /* Adjust padding for overall size */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
    line-height: 1; /* Adjust line-height for vertical centering */
    background-color: white; /* Set the background color to white */
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Clicked state styles */
#arsenal-download-btn:active,
#arsenal-download-btn:hover {
    background-color: #13294b;
    color: white;
}

/* Active and Focus state styles */
#arsenal-download-btn:active,
#arsenal-download-btn:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

/* Default state styles */
#game-scout-button {
    padding: 10px; /* Adjust padding for overall size */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
    line-height: 1; /* Adjust line-height for vertical centering */
    background-color: white; /* Set the background color to white */
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Clicked state styles */
#game-scout-button:active,
#game-scout-button:hover {
    background-color: #13294b;
    color: white;
}

/* Active and Focus state styles */
#game-scout-button:active,
#game-scout-button:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

/* Default state styles */
#arsenal-submit-button {
    padding: 10px; /* Adjust padding for overall size */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
    line-height: 1; /* Adjust line-height for vertical centering */
    background-color: white; /* Set the background color to white */
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Clicked state styles */
#arsenal-submit-button:active,
#arsenal-submit-button:hover {
    background-color: #13294b;
    color: white;
}

/* Active and Focus state styles */
#arsenal-submit-button:active,
#arsenal-submit-button:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

/* Dropdown Design */
.dropdown-group .btn {
    padding: 10px; /* Same padding as radio buttons */
    width: 250px;  /* Adjust width for dropdown */
    font-size: 14px; /* Match font size */
    border-color: #13294b; /* Match border color */
    border-radius: 5px; /* Optional: Add rounded corners for dropdown */
}

.Select-menu-outer {
    display: block !important;
}

/* Estimator Add Row Button */
/* Default state styles */
#add-row-button {
    padding: 10px; /* Adjust padding for overall size */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
    line-height: 1; /* Adjust line-height for vertical centering */
    background-color: white; /* Set the background color to white */
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Clicked state styles */
#add-row-button:active,
#add-row-button:hover {
    background-color: #13294b;
    color: white;
}

/* Active and Focus state styles */
#add-row-button:active,
#add-row-button:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

/* Estimator Submit Button */
/* Default state styles */
#estimator-submit-btn {
    padding: 10px; /* Adjust padding for overall size */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
    line-height: 1; /* Adjust line-height for vertical centering */
    background-color: white; /* Set the background color to white */
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Clicked state styles */
#estimator-submit-btn:active,
#estimator-submit-btn:hover {
    background-color: #13294b;
    color: white;
}

/* Active and Focus state styles */
#estimator-submit-btn:active,
#estimator-submit-btn:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

/* ESTIMATOR DOWNLOAD BTN*/
/* Default state styles */
#estimator-download-btn {
    padding: 10px; /* Adjust padding for overall size */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
    line-height: 1; /* Adjust line-height for vertical centering */
    background-color: white; /* Set the background color to white */
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Clicked state styles */
#estimator-download-btn:active,
#estimator-download-btn:hover {
    background-color: #13294b;
    color: white;
}

/* Active and Focus state styles */
#estimator-download-btn:active,
#estimator-download-btn:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

/* Center text inside dropdown menu */
.dropdown-menu {
    text-align: center; /* Center the text inside the dropdown */
    background-color: #13294b !important; /* Dark blue background */
    border: #13294b !important;
}

/* Center individual dropdown items */
.dropdown-menu .dropdown-item {
    text-align: center !important; /* Ensures each item is centered */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white !important; /* Keep text white */
}


/* Make GRAPHICS, LEADERBOARDS, and GLOSSARY white always */
.navbar-nav .dropdown .dropdown-toggle {
    color: white !important;
}

/* Also ensure hover and active states keep them white */
.navbar-nav .dropdown .dropdown-toggle:hover,
.navbar-nav .dropdown .dropdown-toggle:focus,
.navbar-nav .dropdown .dropdown-toggle:active {
    color: white !important;
}

/* In assets/styles.css */
.visualization-container::-webkit-scrollbar {
  height: 6px;
}

.visualization-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/* Add a subtle indicator on small screens */
@media (max-width: 1080px) {
  .visualization-container::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 20px;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.05));
    pointer-events: none;
  }
}

.game-card-container {
  position: relative;
}

.default-view {
  display: block;
}

.hover-view {
  display: none;
}

.game-card-container:hover .default-view {
  display: none;
}

.game-card-container:hover .hover-view {
  display: block;
}


/* Season Summary Submit Button */
/* Default state styles */
#season-scout-button {
    padding: 10px; /* Adjust padding for overall size */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
    line-height: 1; /* Adjust line-height for vertical centering */
    background-color: white; /* Set the background color to white */
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Clicked state styles */
#season-scout-button:active,
#season-scout-button:hover {
    background-color: #13294b;
    color: white;
}

/* Active and Focus state styles */
#season-scout-button:active,
#season-scout-button:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

/* SEASON SUMMARY DOWNLOAD BTN*/
/* Default state styles */
#season-download-btn {
    padding: 10px; /* Adjust padding for overall size */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
    line-height: 1; /* Adjust line-height for vertical centering */
    background-color: white; /* Set the background color to white */
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Clicked state styles */
#season-download-btn:active,
#season-download-btn:hover {
    background-color: #13294b;
    color: white;
}

/* Active and Focus state styles */
#season-download-btn:active,
#season-download-btn:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}


/* Env Factors Submit Button */
/* Default state styles */
#environmental-factors-button {
    padding: 10px; /* Adjust padding for overall size */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
    line-height: 1; /* Adjust line-height for vertical centering */
    background-color: white; /* Set the background color to white */
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Clicked state styles */
#environmental-factors-button:active,
#environmental-factors-button:hover {
    background-color: #13294b;
    color: white;
}

/* Active and Focus state styles */
#environmental-factors-button:active,
#environmental-factors-button:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

/* Env Factors Download Button*/
/* Default state styles */
#environmental-factors-download-btn {
    padding: 10px; /* Adjust padding for overall size */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
    line-height: 1; /* Adjust line-height for vertical centering */
    background-color: white; /* Set the background color to white */
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Clicked state styles */
#environmental-factors-download-btn:active,
#environmental-factors-download-btn:hover {
    background-color: #13294b;
    color: white;
}

/* Active and Focus state styles */
#environmental-factors-download-btn:active,
#environmental-factors-download-btn:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}


/* DDZ Submit Button */
/* Default state styles */
#ddz-button {
    padding: 10px; /* Adjust padding for overall size */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
    line-height: 1; /* Adjust line-height for vertical centering */
    background-color: white; /* Set the background color to white */
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Clicked state styles */
#ddz-button:active,
#ddz-button:hover {
    background-color: #13294b;
    color: white;
}

/* Active and Focus state styles */
#ddz-button:active,
#ddz-button:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}

/* DDZ Download Button*/
/* Default state styles */
#ddz-download-btn {
    padding: 10px; /* Adjust padding for overall size */
    font-size: 14px; /* Adjust font size for larger text */
    border-color: #13294b; /* Change the border color when checked */
    line-height: 1; /* Adjust line-height for vertical centering */
    background-color: white; /* Set the background color to white */
    color: #13294b; /* Change the font color for non-selected, non-hovered state */
}

/* Clicked state styles */
#ddz-download-btn:active,
#ddz-download-btn:hover {
    background-color: #13294b;
    color: white;
}

/* Active and Focus state styles */
#ddz-download-btn:active,
#ddz-download-btn:focus {
    outline: none; /* Remove the default focus outline */
    box-shadow: none; /* Remove the default box shadow on focus/active */
}