html {
  font-size: 14px;
}

:root {
    --color-custom: #0F172A;
}

/* Hide empty validation summary boxes before any form submission */
.validation-summary-valid {
    display: none;
}

section {
    padding: 2rem 0 0 4.5rem;
}

.guide-section {
    padding: 0rem 0 1.5rem 0.5rem;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

footer {
  flex-shrink: 0;
}

h1 {
    font-size:2rem !important;
}

.home-logo {
    border-radius: 10px;
    height: 200px;
}

/*Bootstap overrrides*/
.py-5 {
    /* margin-bottom: 100px;*/
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 1.1rem !important;
}

.manage-league {
    font-size:3.5rem !important;
}

@media (max-width: 768px) {
    section {
        padding: 2rem 2rem;
    }

    .manage-league {
        font-size: 2rem;
    }
}

.form-select {
    border: 1px solid var(--bs-blue);
    color: #000;
}

/* =========================================================
   Extended Bootstrap Color Utilities
   Uses Bootstrap 5.3 CSS custom properties (--bs-*)
   for colors not available as built-in bg-* classes.
   ========================================================= */
/* --- Blue --- */
.bg-blue {
    background-color: var(--bs-blue) !important;
}
.bg-blue-100     { background-color: #cfe2ff !important; }
.bg-blue-200     { background-color: #9ec5fe !important; }
.bg-blue-300     { background-color: #6ea8fe !important; }
.bg-blue-400     { background-color: #3d8bfd !important; }
.bg-blue-500     { background-color: #0d6efd !important; }
.bg-blue-600     { background-color: #0a58ca !important; }
.bg-blue-700     { background-color: #084298 !important; }
.bg-blue-800     { background-color: #052c65 !important; }
.bg-blue-900     { background-color: #031633 !important; }

/* --- Indigo --- */
.bg-indigo        { background-color: var(--bs-indigo) !important; }
.bg-indigo-100    { background-color: #e0cffc !important; }
.bg-indigo-200    { background-color: #c29ffa !important; }
.bg-indigo-300    { background-color: #a370f7 !important; }
.bg-indigo-400    { background-color: #8540f5 !important; }
.bg-indigo-500    { background-color: #6610f2 !important; }
.bg-indigo-600    { background-color: #520dc2 !important; }
.bg-indigo-700    { background-color: #3d0a91 !important; }
.bg-indigo-800    { background-color: #290661 !important; }
.bg-indigo-900    { background-color: #140330 !important; }

/* --- Purple --- */
.bg-purple         { background-color: var(--bs-purple) !important; }
.bg-purple-100     { background-color: #e2d9f3 !important; }
.bg-purple-200     { background-color: #c5b3e6 !important; }
.bg-purple-300     { background-color: #a98eda !important; }
.bg-purple-400     { background-color: #8c68cd !important; }
.bg-purple-500     { background-color: #6f42c1 !important; }
.bg-purple-600     { background-color: #59359a !important; }
.bg-purple-700     { background-color: #432874 !important; }
.bg-purple-800     { background-color: #2c1a4d !important; }
.bg-purple-900     { background-color: #160d27 !important; }

/* --- Pink --- */
.bg-pink           { background-color: var(--bs-pink) !important; }
.bg-pink-100       { background-color: #f7d6e6 !important; }
.bg-pink-200       { background-color: #efadce !important; }
.bg-pink-300       { background-color: #e685b5 !important; }
.bg-pink-400       { background-color: #de5c9d !important; }
.bg-pink-500       { background-color: #d63384 !important; }
.bg-pink-600       { background-color: #ab296a !important; }
.bg-pink-700       { background-color: #801f4f !important; }
.bg-pink-800       { background-color: #561435 !important; }
.bg-pink-900       { background-color: #2b0a1a !important; }

/* --- Red --- */
.bg-red            { background-color: var(--bs-red) !important; }
.bg-red-100        { background-color: #f8d7da !important; }
.bg-red-200        { background-color: #f1aeb5 !important; }
.bg-red-300        { background-color: #ea868f !important; }
.bg-red-400        { background-color: #e35d6a !important; }
.bg-red-500        { background-color: #dc3545 !important; }
.bg-red-600        { background-color: #b02a37 !important; }
.bg-red-700        { background-color: #842029 !important; }
.bg-red-800        { background-color: #58151c !important; }
.bg-red-900        { background-color: #2c0b0e !important; }

/* --- Orange --- */
.bg-orange         { background-color: var(--bs-orange) !important; }
.bg-orange-100     { background-color: #ffe5d0 !important; }
.bg-orange-200     { background-color: #fecba1 !important; }
.bg-orange-300     { background-color: #feb272 !important; }
.bg-orange-400     { background-color: #fd9843 !important; }
.bg-orange-500     { background-color: #fd7e14 !important; }
.bg-orange-600     { background-color: #ca6510 !important; }
.bg-orange-700     { background-color: #984c0c !important; }
.bg-orange-800     { background-color: #653208 !important; }
.bg-orange-900     { background-color: #331904 !important; }

/* --- Yellow --- */
.bg-yellow         { background-color: var(--bs-yellow) !important; }
.bg-yellow-100     { background-color: #fff3cd !important; }
.bg-yellow-200     { background-color: #ffe69c !important; }
.bg-yellow-300     { background-color: #ffda6a !important; }
.bg-yellow-400     { background-color: #ffcd39 !important; }
.bg-yellow-500     { background-color: #ffc107 !important; }
.bg-yellow-600     { background-color: #cc9a06 !important; }
.bg-yellow-700     { background-color: #997404 !important; }
.bg-yellow-800     { background-color: #664d03 !important; }
.bg-yellow-900     { background-color: #332701 !important; }

/* --- Green --- */
.bg-green          { background-color: var(--bs-green) !important; }
.bg-green-100      { background-color: #d1e7dd !important; }
.bg-green-200      { background-color: #a3cfbb !important; }
.bg-green-300      { background-color: #75b798 !important; }
.bg-green-400      { background-color: #479f76 !important; }
.bg-green-500      { background-color: #198754 !important; }
.bg-green-600      { background-color: #146c43 !important; }
.bg-green-700      { background-color: #0f5132 !important; }
.bg-green-800      { background-color: #0a3622 !important; }
.bg-green-900      { background-color: #051b11 !important; }

/* --- Teal --- */
.bg-teal           { background-color: var(--bs-teal) !important; }
.bg-teal-100       { background-color: #d2f4ea !important; }
.bg-teal-200       { background-color: #a6e9d5 !important; }
.bg-teal-300       { background-color: #79dfc1 !important; }
.bg-teal-400       { background-color: #4dd4ac !important; }
.bg-teal-500       { background-color: #20c997 !important; }
.bg-teal-600       { background-color: #1aa179 !important; }
.bg-teal-700       { background-color: #13795b !important; }
.bg-teal-800       { background-color: #0d503c !important; }
.bg-teal-900       { background-color: #06281e !important; }

/* --- Cyan --- */
.bg-cyan           { background-color: var(--bs-cyan) !important; }
.bg-cyan-100       { background-color: #cff4fc !important; }
.bg-cyan-200       { background-color: #9eeaf9 !important; }
.bg-cyan-300       { background-color: #6edff6 !important; }
.bg-cyan-400       { background-color: #3dd5f3 !important; }
.bg-cyan-500       { background-color: #0dcaf0 !important; }
.bg-cyan-600       { background-color: #0aa2c0 !important; }
.bg-cyan-700       { background-color: #087990 !important; }
.bg-cyan-800       { background-color: #055160 !important; }
.bg-cyan-900       { background-color: #032830 !important; }

/* --- Gray --- */
.bg-gray           { background-color: var(--bs-gray) !important; }
.bg-gray-100       { background-color: var(--bs-gray-100) !important; }
.bg-gray-200       { background-color: var(--bs-gray-200) !important; }
.bg-gray-300       { background-color: var(--bs-gray-300) !important; }
.bg-gray-400       { background-color: var(--bs-gray-400) !important; }
.bg-gray-500       { background-color: var(--bs-gray-500) !important; }
.bg-gray-600       { background-color: var(--bs-gray-600) !important; }
.bg-gray-700       { background-color: var(--bs-gray-700) !important; }
.bg-gray-800       { background-color: var(--bs-gray-800) !important; }
.bg-gray-900       { background-color: var(--bs-gray-900) !important; }

/* Custom */
.bg-custom {
    background-color: var(--color-custom);
}

.text-custom {
    color: var(--color-custom) !important;
}

.border-custom {
    border-color: var(--color-custom) !important;
}

.btn-custom {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-custom);
    --bs-btn-border-color: var(--color-custom);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0a1020;
    --bs-btn-hover-border-color: #080e1c;
    --bs-btn-focus-shadow-rgb: 15, 23, 42;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #080e1c;
    --bs-btn-active-border-color: #060c18;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-custom);
    --bs-btn-disabled-border-color: var(--color-custom);
}

.btn-outline-custom {
    --bs-btn-color: var(--color-custom);
    --bs-btn-border-color: var(--color-custom);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-custom);
    --bs-btn-hover-border-color: var(--color-custom);
    --bs-btn-focus-shadow-rgb: 15, 23, 42;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-custom);
    --bs-btn-active-border-color: var(--color-custom);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-custom);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-custom);
    --bs-gradient: none;
}

/* Ocean Blue — elegant alternative to Bootstrap primary (#0d6efd) */
.text-ocean {
    color: #1E6FA6 !important;
}

.bg-ocean {
    background-color: #1E6FA6 !important;
}

.border-ocean {
    border-color: #1E6FA6 !important;
}

.btn-ocean {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1E6FA6;
    --bs-btn-border-color: #1E6FA6;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #195e8d;
    --bs-btn-hover-border-color: #155077;
    --bs-btn-focus-shadow-rgb: 30, 111, 166;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #155077;
    --bs-btn-active-border-color: #114263;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #1E6FA6;
    --bs-btn-disabled-border-color: #1E6FA6;
}

/* Warm Amber — elegant alternative to Bootstrap warning (#ffc107) */
.text-amber {
    color: #B45309 !important;
}

.bg-amber {
    background-color: #B45309 !important;
}

.border-amber {
    border-color: #B45309 !important;
}

.btn-amber {
    --bs-btn-color: #fff;
    --bs-btn-bg: #B45309;
    --bs-btn-border-color: #B45309;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #984608;
    --bs-btn-hover-border-color: #7d3a06;
    --bs-btn-focus-shadow-rgb: 180, 83, 9;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7d3a06;
    --bs-btn-active-border-color: #633005;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #B45309;
    --bs-btn-disabled-border-color: #B45309;
}

.text-orange-700 {
    color: #984c0c !important;
}

/* =========================================================
   Custom Bootstrap Button Variants
   Solid and outline buttons for indigo-700, pink-700,
   and cyan-700 using Bootstrap 5 CSS variable pattern.
   ========================================================= */

/* --- btn-indigo-700 (#3d0a91) --- */
.btn-indigo-700 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3d0a91;
    --bs-btn-border-color: #3d0a91;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #34097b;
    --bs-btn-hover-border-color: #2c0868;
    --bs-btn-focus-shadow-rgb: 61, 10, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2c0868;
    --bs-btn-active-border-color: #250755;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #3d0a91;
    --bs-btn-disabled-border-color: #3d0a91;
}

.btn-outline-indigo-700 {
    --bs-btn-color: #3d0a91;
    --bs-btn-border-color: #3d0a91;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3d0a91;
    --bs-btn-hover-border-color: #3d0a91;
    --bs-btn-focus-shadow-rgb: 61, 10, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3d0a91;
    --bs-btn-active-border-color: #3d0a91;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #3d0a91;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #3d0a91;
    --bs-gradient: none;
}

/* --- btn-pink-700 (#801f4f) --- */
.btn-pink-700 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #801f4f;
    --bs-btn-border-color: #801f4f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6d1a43;
    --bs-btn-hover-border-color: #591638;
    --bs-btn-focus-shadow-rgb: 128, 31, 79;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #591638;
    --bs-btn-active-border-color: #4a1230;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #801f4f;
    --bs-btn-disabled-border-color: #801f4f;
}

.btn-outline-pink-700 {
    --bs-btn-color: #801f4f;
    --bs-btn-border-color: #801f4f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #801f4f;
    --bs-btn-hover-border-color: #801f4f;
    --bs-btn-focus-shadow-rgb: 128, 31, 79;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #801f4f;
    --bs-btn-active-border-color: #801f4f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #801f4f;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #801f4f;
    --bs-gradient: none;
}

/* --- btn-cyan-700 (#087990) --- */
.btn-cyan-700 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #087990;
    --bs-btn-border-color: #087990;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #07677a;
    --bs-btn-hover-border-color: #065566;
    --bs-btn-focus-shadow-rgb: 8, 121, 144;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #065566;
    --bs-btn-active-border-color: #054452;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #087990;
    --bs-btn-disabled-border-color: #087990;
}

.btn-outline-cyan-700 {
    --bs-btn-color: #087990;
    --bs-btn-border-color: #087990;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #087990;
    --bs-btn-hover-border-color: #087990;
    --bs-btn-focus-shadow-rgb: 8, 121, 144;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #087990;
    --bs-btn-active-border-color: #087990;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #087990;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #087990;
    --bs-gradient: none;
}

/* --- btn-orange-500 (#fd7e14) --- */
.btn-orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: #fd7e14;
    --bs-btn-border-color: #fd7e14;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #d76a10;
    --bs-btn-hover-border-color: #ca6510;
    --bs-btn-focus-shadow-rgb: 253, 126, 20;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ca6510;
    --bs-btn-active-border-color: #984c0c;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #fd7e14;
    --bs-btn-disabled-border-color: #fd7e14;
}

.btn-outline-orange {
    --bs-btn-color: #fd7e14;
    --bs-btn-border-color: #fd7e14;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #fd7e14;
    --bs-btn-hover-border-color: #fd7e14;
    --bs-btn-focus-shadow-rgb: 253, 126, 20;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #fd7e14;
    --bs-btn-active-border-color: #fd7e14;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fd7e14;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #fd7e14;
    --bs-gradient: none;
}