:root {
    /*colors*/
    --cross-checker-blue: #3A8DDE;
    --dark-blue: #003764;
    --light-blue: #054981;
    --link-blue: #3399FF;
    --gray: #95A1AB;
    --light-gray: #e6e9eb;
    --link-gray: #85898c;
    --black: #19222F;
    --offwhite: #F8F8F8;
    --focus-blue: #356dff;
    --danger: #dc3545;
    --admin-green: #386e3b;
    --admin-green-focus: #4caf50;
    --surface-neutral: #D8D8D8; /* grey */
    --surface-secondary: #F5F5F5; /* grey */
    --surface-brand-highlight: #024175; /*  */
    --surface-brand-highlight: #024175; /* dark blue */
    /*font families*/
    --font-bentonsans: 'bentonsans';
    --font-nimbus: nimbus-sans, sans-serif;
    --font-countach: Countach;
    /* sizing */
    --radius-full: 360px;
}

@font-face {
    font-family: ProfileRegular;
    src: url('fonts/bebasneueregular.ttf') format('truetype');
}

.font-ProfileRegular {
    font-family: ProfileRegular;
}

@font-face {
    font-family: ProfileBolder;
    src: url('fonts/bebasneuebold.ttf') format('truetype');
}

.font-ProfileBolder {
    font-family: ProfileBolder;
}

@font-face {
    font-family: 'bentonsans';
    src: url('fonts/BentonSansStdCompressedBlack/font.woff2') format('woff2'), url('fonts/BentonSansStdCompressedBlack/font.woff') format('woff');
}

.font-bentonsans {
    font-family: 'bentonsans' !important;
}

.font-nimbus {
    font-family: nimbus-sans, sans-serif;
}

.font-countach {
    font-family: Countach;
}

/* Chevron for BS5 Mega Menu */
.dropdown-chevron {
    width: 16px;
    height: 16px;
    background: url('https://streams1.perfectgame.org/images/icons/chevron-right.svg') no-repeat center;
    background-size: contain;
    transition: transform 0.3s ease;
    display: inline-block;
}

    .dropdown-chevron.rotate {
        transform: rotate(-90deg);
    }

/* Chevron for BS5 Collapse */
.chev-down {
    display: none;
}

.chev-right {
    display: inline;
}

/* When the collapse is open */
button[aria-expanded="true"] .chev-down {
    display: inline;
}

button[aria-expanded="true"] .chev-right {
    display: none;
}


body {
    font-family: var(--font-nimbus);
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
}

.scale-50 {
    transform: scale(0.5);
}

.scale-150 {
    transform: scale(1.5);
}

.scale-200 {
    transform: scale(2);
}

.no-wrap {
    white-space: nowrap;
}

.rounded-10x {
    border-radius: 10px;
}

.w-max-content {
    width: max-content !important;
}

/* Hyperlink styles */
a {
    color: var(--dark-blue);
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
        color: var(--light-blue);
    }

.link-box {
    color: var(--dark-blue);
    text-decoration: none;
    border-radius: 3px;
    padding: 3px 5px;
}

    .link-box:hover {
        background-color: var(--light-gray);
    }

    .link-box.link-box--active {
        color: var(--offwhite);
        background-color: var(--dark-blue);
    }

/* hover */
.hover-bg-light-gray {
    transition: background-color 0.3s ease-out;
}

    .hover-bg-light-gray:hover {
        background-color: var(--light-gray);
    }

    .hover-bg-light-gray img {
        transition: transform 0.3s ease-out, border 0.3s ease-out;
        border: 2px solid transparent;
    }

    .hover-bg-light-gray:hover img {
        transform: scale(1.05);
        border: 2px solid white;
        box-shadow: 3px 4px 5px -1px rgba(161, 161, 161, 1);
    }
/* hover scroll in */
/* Initial state for the arrow label */
.scrollin {
    display: inline-block; /* Ensure proper rendering */
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

/* Animation on hover: Arrow disappears and slides in from the bottom */
.hover-bg-light-gray:hover .scrollin {
    transform: translateY(50%);
    opacity: 0; /* Disappears first */
}

/* Bring it back after sliding out */
.hover-bg-light-gray:hover .scrollin {
    animation: arrow-slide-in 0.6s ease-out 0.3s forwards; /* Delay to create the "disappear and reappear" effect */
}

/* Keyframe animation for sliding in from the bottom */
@keyframes arrow-slide-in {
    from {
        transform: translateY(50%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* spinner */

.pgds-spinner-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.pgds-spinner {
    width: 7rem;
    height: 7rem;
}

/* colors */

.color-cross-checker-blue {
    color: var(--cross-checker-blue)
}

.color-white {
    color: white;
}

.color-light-blue {
    color: var(--light-blue);
}

.color-gray {
    color: var(--gray);
}

.color-light-gray {
    color: var(--light-gray);
}

.color-link-gray {
    color: var(--link-gray);
}

.color-black {
    color: var(--black);
}

.color-admin-green {
    color: var(--admin-green);
}

.color-danger {
    color: var(--danger)
}

.color-dark-blue {
    color: var(--dark-blue);
}

.color-light-blue {
    color: var(--dark-blue-hover);
}

.color-link-blue {
    color: var(--link-blue);
}

.color-gray {
    color: var(--gray);
}

.color-light-gray {
    color: var(--light-gray);
}

.color-black {
    color: var(--black);
}

.color-offwhite {
    color: var(--offwhite);
}

.color-focus-blue {
    color: var(--focus-blue);
}

/* Background Color */

.bg-cross-checker-blue {
    background-color: var(--cross-checker-blue)
}

.bg-offwhite {
    background: var(--offwhite);
}

.bg-dark-blue {
    background: var(--dark-blue);
}

.bg-light-blue {
    background-color: var(--light-blue);
}

.bg-focus-blue {
    background-color: var(--focus-blue);
}

.bg-gray {
    background-color: var(--gray);
}

.bg-light-gray {
    background-color: var(--light-gray);
}

.bg-black {
    background-color: var(--black);
}

.bg-admin-green {
    background-color: var(--admin-green) !important;
}

.bg-white {
    background-color: white;
}

/* font-size */

.fs-12x {
    font-size: 12px;
}

.fs-14x {
    font-size: 12px;
}

.fs-16x {
    font-size: 16px;
}

.fs-20x {
    font-size: 20px;
}

.fs-24x {
    font-size: 24px !important;
}

.fs-32x {
    font-size: 32px;
}

.fs-48x {
    font-size: 48px;
    line-height: 120%;
}

.fs-3r {
    font-size: 3rem;
}

/* Border */
.border-1-dark-blue {
    border: 1px solid var(--dark-blue) !important;
}

.border-silver {
    border-color: silver !important;
}

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

/* Buttons */
.btn-admin {
    border: 1px solid var(--admin-green) !important;
    font-family: var(--font-bentonsans);
    background-color: var(--admin-green) !important;
    text-transform: uppercase;
    border-radius: 0;
    letter-spacing: .02em;
    display: inline-block;
    color: white;
}

.btn-pill {
    border-radius: 30px;
    font-family: var(--font-nimbus);
    text-transform: revert;
    padding: 3px 24px;
}

.btn-admin:hover {
    border: 1px solid var(--admin-green-focus) !important;
    background-color: var(--admin-green-focus) !important;
    color: white;
}

.btn-primary {
    background-color: var(--dark-blue);
    font-family: var(--font-bentonsans);
    text-transform: uppercase;
    border: var(--dark-blue) solid 1px;
    border-radius: 0;
    letter-spacing: .02em;
    display: inline-block;
    color: white;
    font-weight: normal;
    /*width: max-content;
    padding: 12px auto;
    display: flex;
    align-items: center;*/
}

    .btn-primary:hover {
        background-color: var(--light-blue);
        border: var(--dark-blue) solid 1px;
        color: white;
    }

    .btn-primary a:hover {
        background-color: var(--light-blue);
        border: var(--dark-blue) solid 1px;
        color: white;
    }

.btn-outline-primary {
    background-color: white;
    font-family: var(--font-bentonsans);
    text-transform: uppercase;
    border: var(--dark-blue) solid 1px;
    border-radius: 0;
    letter-spacing: .02em;
    display: inline-block;
    color: var(--dark-blue);
    /*width: max-content;
    padding: 12px 60px;
    display: flex;
    align-items: center;*/
}

.btn-outline-primary-rounded {
    background-color: white;
    font-family: var(--font-bentonsans);
    text-transform: uppercase;
    letter-spacing: .02em;
    display: inline-block;
    color: var(--dark-blue);
    display: flex;
    gap: 10px;
    border-radius: 30px;
    font-family: var(--font-nimbus);
    text-transform: revert;
    padding: 3px 24px;
    transition: background-color 0.1s ease-in, color 0.1s ease-in;
}

    .btn-outline-primary-rounded:hover {
        border: 1px solid var(--dark-blue);
        background-color: var(--dark-blue) !important;
        color: white;
    }

.btn-outline-primary:hover {
    color: var(--dark-blue);
    background-color: var(--light-gray);
    border: var(--dark-blue) solid 1px;
}

.btn-outline-primary-rounded {
    color: var(--dark-blue);
    background-color: white !important;
    border: var(--dark-blue) solid 1px;
}

.btn-primary.aspNetDisabled {
    background-color: var(--gray);
    color: white;
    border: none;
}

.btn-outline-primary.aspNetDisabled {
    color: var(--gray);
    border: none
}

.btn-outline-primary.button-rounded,
.btn-primary.button-rounded {
    display: flex;
    gap: 10px;
}

/* Btn-White */
.btn-white {
    color: #212529;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
}

    /* Hover/Focus states */
    .btn-white:hover,
    .btn-white:focus {
        background-color: #f8f9fa;
        border-color: #adb5bd;
        color: #212529;
        text-decoration: none;
    }

    /* Active state */
    .btn-white:active,
    .btn-white.active {
        background-color: #e9ecef;
        border-color: #adb5bd;
        color: #212529;
    }

/* Arrow Button */
.btn-arrow {
    letter-spacing: 0.01em;
    line-height: 160%;
    width: auto;
    cursor: pointer;
    position: relative;
}

    .btn-arrow::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 11px;
        background-size: contain;
        background-repeat: no-repeat;
        margin-left: 10px;
    }

/* Black Arrow Right */
.btn-arrow-black-up-right::after {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M10 1.05554V8.27754C10 8.42487 9.94147 8.56618 9.83729 8.67036C9.7331 8.77455 9.5918 8.83308 9.44446 8.83308C9.29712 8.83308 9.15582 8.77455 9.05164 8.67036C8.94745 8.56618 8.88892 8.42487 8.88892 8.27754V2.39647L0.948891 10.3372C0.844649 10.4414 0.703267 10.5 0.555847 10.5C0.408427 10.5 0.267045 10.4414 0.162804 10.3372C0.0585623 10.233 0 10.0916 0 9.94415C0 9.79673 0.0585623 9.65535 0.162804 9.55111L8.10353 1.61108H2.22246C2.07512 1.61108 1.93382 1.55255 1.82964 1.44836C1.72545 1.34418 1.66692 1.20288 1.66692 1.05554C1.66692 0.9082 1.72545 0.766897 1.82964 0.662714C1.93382 0.55853 2.07512 0.5 2.22246 0.5H9.44446C9.5918 0.5 9.7331 0.55853 9.83729 0.662714C9.94147 0.766897 10 0.9082 10 1.05554Z" fill="%23000000"/%3E%3C/svg%3E');
}

/* Blue Arrow Right */
.btn-arrow-blue-up-right::after {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M10 1.05554V8.27754C10 8.42487 9.94147 8.56618 9.83729 8.67036C9.7331 8.77455 9.5918 8.83308 9.44446 8.83308C9.29712 8.83308 9.15582 8.77455 9.05164 8.67036C8.94745 8.56618 8.88892 8.42487 8.88892 8.27754V2.39647L0.948891 10.3372C0.844649 10.4414 0.703267 10.5 0.555847 10.5C0.408427 10.5 0.267045 10.4414 0.162804 10.3372C0.0585623 10.233 0 10.0916 0 9.94415C0 9.79673 0.0585623 9.65535 0.162804 9.55111L8.10353 1.61108H2.22246C2.07512 1.61108 1.93382 1.55255 1.82964 1.44836C1.72545 1.34418 1.66692 1.20288 1.66692 1.05554C1.66692 0.9082 1.72545 0.766897 1.82964 0.662714C1.93382 0.55853 2.07512 0.5 2.22246 0.5H9.44446C9.5918 0.5 9.7331 0.55853 9.83729 0.662714C9.94147 0.766897 10 0.9082 10 1.05554Z" fill="%2319222F"/%3E%3C/svg%3E');
}

/* White Arrow Right */
.btn-arrow-white-up-right::after {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M10 1.05554V8.27754C10 8.42487 9.94147 8.56618 9.83729 8.67036C9.7331 8.77455 9.5918 8.83308 9.44446 8.83308C9.29712 8.83308 9.15582 8.77455 9.05164 8.67036C8.94745 8.56618 8.88892 8.42487 8.88892 8.27754V2.39647L0.948891 10.3372C0.844649 10.4414 0.703267 10.5 0.555847 10.5C0.408427 10.5 0.267045 10.4414 0.162804 10.3372C0.0585623 10.233 0 10.0916 0 9.94415C0 9.79673 0.0585623 9.65535 0.162804 9.55111L8.10353 1.61108H2.22246C2.07512 1.61108 1.93382 1.55255 1.82964 1.44836C1.72545 1.34418 1.66692 1.20288 1.66692 1.05554C1.66692 0.9082 1.72545 0.766897 1.82964 0.662714C1.93382 0.55853 2.07512 0.5 2.22246 0.5H9.44446C9.5918 0.5 9.7331 0.55853 9.83729 0.662714C9.94147 0.766897 10 0.9082 10 1.05554Z" fill="%23FFFFFF"/%3E%3C/svg%3E');
}

/* Rounded Buttons */
.btn-pill-primary {
    display: inline-flex;
    box-sizing: border-box !important;
    min-width: 80px !important;
    padding: 4px 12px 2px 12px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: var(--radius-full) !important;
    border: 1px solid var(--dark-blue) !important;
    background-color: var(--dark-blue) !important;
    color: white !important;
    font-family: var(--font-nimbus) !important;
    white-space: nowrap !important;
}

.btn-pill-primary-sm {
    display: inline-flex;
    box-sizing: border-box !important;
    min-width: 80px !important;
    padding: 4px 12px 2px 12px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: var(--radius-full) !important;
    border: 1px solid var(--dark-blue) !important;
    background-color: var(--dark-blue) !important;
    color: white !important;
    font-size: 14px !important;
    font-family: var(--font-nimbus) !important;
    white-space: nowrap !important;
}

.btn-pill-secondary {
    display: inline-flex;
    box-sizing: border-box !important;
    min-width: 80px !important;
    padding: 4px 12px 2px 12px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: var(--radius-full) !important;
    border: 1px solid var(--black) !important;
    background-color: white !important;
    color: var(--black) !important;
    font-family: var(--font-nimbus) !important;
    white-space: nowrap !important;
}

.btn-pill-secondary-sm {
    display: inline-flex;
    box-sizing: border-box !important;
    min-width: 80px !important;
    padding: 4px 12px 2px 12px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: var(--radius-full) !important;
    border: 1px solid var(--black) !important;
    background-color: white !important;
    color: var(--black) !important;
    font-size: 14px !important;
    font-family: var(--font-nimbus) !important;
    white-space: nowrap !important;
}

.btn-pill-primary-highlight {
    display: inline-flex;
    box-sizing: border-box !important;
    min-width: 80px !important;
    padding: 3px 8px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: var(--radius-full)!important;
    border: 1px solid var(--surface-brand-highlight) !important;
    background-color: var(--surface-brand-highlight) !important;
    color: white !important;
    font-family: var(--font-nimbus) !important;
    white-space: nowrap !important;
}

.btn-pill-primary-lighlight-sm {
    display: inline-flex;
    box-sizing: border-box !important;
    min-width: 80px !important;
    padding: 3px 8px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: var(--radius-full)!important;
    border: 1px solid var(--surface-brand-highlight) !important;
    background-color: var(--surface-brand-highlight) !important;
    color: white !important;
    font-size: 14px !important;
    font-family: var(--font-nimbus) !important;
    white-space: nowrap !important;
}

.aspNetDisabled {
    opacity: .7;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

    .aspNetDisabled:disabled {
        pointer-events: none;
    }

.button-wide {
    width: 100%;
    max-width: 300px;
    display: block;
    text-align: center;
    word-break: break-all;
}

.button-rounded {
    border-radius: 30px;
    font-family: var(--font-nimbus);
    text-transform: revert;
    padding: 3px 24px !important;
}

/* Checkboxes */

.pgds-cbox-danger input[type="checkbox"]:checked,
.pgds-cbox-danger input[type="checkbox"]:active,
.pgds-cbox-danger input[type="checkbox"]:focus {
    accent-color: var(--danger);
}

.pgds-cbox-primary input[type="checkbox"]:checked,
.pgds-cbox-primary input[type="checkbox"]:active,
.pgds-cbox-primary input[type="checkbox"]:focus {
    accent-color: var(--dark-blue);
}

.pgds-cbox-admin input[type="checkbox"]:checked,
.pgds-cbox-admin input[type="checkbox"]:active,
.pgds-cbox-admin input[type="checkbox"]:focus {
    accent-color: var(--admin-green);
}

.form-check-list input[type="checkbox"] {
    margin-right: 10px;
}

.form-check input[type="checkbox"] {
    margin-right: 10px;
}

.check-primary input[type="radio"] {
    margin-right: 10px;
    accent-color: var(--dark-blue);
    cursor:pointer;
}
.check-primary label
{
    cursor:pointer;
}
.table-pg-primary th
{
    background-color:var(--dark-blue) !important;
    color:white !important;
}

.table-black {
    background-color: black !important;
    color: white !important;
}

    .table-black th,
    .table-black td {
        background-color: black !important;
        color: white !important;
    }

.table-minimal-spacing {
    border-collapse: collapse;
    width: 100%;
}

    .table-minimal-spacing td,
    .table-minimal-spacing th {
        padding: 0;
        margin: 0;
        line-height: 14px;
    }

.table-medium-spacing {
    border-collapse: collapse;
    width: 100%;
}

    .table-medium-spacing td,
    .table-medium-spacing th {
        padding: 0;
        margin: 0;
        line-height: 16px;
    }

.topline {
    min-height: 36px;
    background: rgb(180,186,198);
    background: linear-gradient(0deg, rgba(180,186,198,1) 0%, rgba(11,27,87,1) 2%, rgba(54,71,114,1) 100%);
    padding: 5px 20px;
    color: white;
    font-family: ProfileBolder !important;
    font-size: 18px;
    font-style: italic;
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
}

.SearchTabActive {
    background-color: #c6c6c6;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: solid #c6c6c6 1px;
    border-right: solid #c6c6c6 1px;
    border-bottom: solid #c6c6c6 1px;
    border-left: solid #c6c6c6 1px;
    padding: 1px 7px;
    font-family: ProfileRegular;
    font-size: 16px;
    color: #353535;
}

.SearchTab {
    background-color: #e1e1e1;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: solid #e1e1e1 1px;
    border-right: solid #c6c6c6 1px;
    border-bottom: solid #c6c6c6 1px;
    border-left: solid #c6c6c6 1px;
    padding: 1px 7px;
    font-family: ProfileRegular;
    font-size: 16px;
    color: #757575;
}

/* Modal Background Overlay */

.background-overlay {
    z-index: 1048;
    height: 120%;
    opacity: .7;
    background-color: #19222F;
    margin: -4em 3em;
    left: -48px;
    right: -48px;
    top: 58%;
    transform: translateY(-50%);
    position: fixed;
    max-height: 120%;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1021;
    display: block;
}

/* icons */

.pgds-icon {
    background-color: transparent;
    border: none;
    width: max-content;
    border-radius: 16px;
}

/* rotate the icon 180 degrees */

.rotate-180 {
    transform: rotate(180deg);
}

/* Iframe Container */
.iframe-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
}

    .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

/* checkboxes */
.pgds-grey-checkbox input[type="checkbox"] {
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 1px;
    border: 2px solid #98a2b3;
    box-sizing: border-box;
    color: white;
}

.pgds-red-checkbox input[type="checkbox"] {
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 1px;
    border: 2px solid #98a2b3;
    box-sizing: border-box;
    color: white;
}

    .pgds-red-checkbox input[type="checkbox"]:checked {
        background-color: #aa182c;
        border-color: #aa182c;
    }

.pgds-blue-checkbox input[type="checkbox"] {
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 1px;
    border: 2px solid #98a2b3;
    box-sizing: border-box;
    color: white;
}

    .pgds-blue-checkbox input[type="checkbox"]:checked {
        background-color: #005cb9;
        border-color: #005cb9;
    }

/* PG RadioButtonList */
.radio-pg td {
    position: relative;
    padding-left: 20px;
    vertical-align: top;
}

.radio-pg input[type="radio"] {
    position: absolute;
    left: 0;
    top: 2px;
}

.radio-pg label {
    display: block; 
}

.button-rounded {
    border-radius: 16px;
    padding: 3px 24px 0px;
}

/* horizontal line */
.pgds-horizontal-line {
    border-top: 1px solid var(--black);
}

/* Header */

.pgds-heading {
    flex: 1;
    width: 100%;
    position: relative;
    font-size: 32px;
    line-height: 120%;
    text-transform: uppercase;
    font-family: var(--font-bentonsans);
    color: var(--black);
    text-align: left;
    display: inline-block;
}

.pgds-header-container {
    text-align: center;
    font-family: var(--font-bentonsans);
    color: var(--black);
}

    .pgds-header-container > * {
        margin: 16px auto;
    }

    .pgds-header-container h1 {
        font-family: var(--font-bentonsans);
        text-transform: uppercase;
        font-size: 64px;
        line-height: 110%;
        color: var(--black);
        text-align: center;
    }

    .pgds-header-container h3 {
        font-family: var(--font-nimbus);
        font-size: 20px;
        letter-spacing: 0.01em;
        line-height: 160%;
        color: var(--black);
        text-align: center;
        max-width: 480px;
        padding-inline: 2rem;
    }

.pgds-large-header {
    font-size: 64px;
}

/* Hero */

.pgds-hero {
    position: relative;
    color: var(--black);
    text-align: center;
    letter-spacing: 0.01em;
}

    .pgds-hero > div:first-child {
        font-size: 48px;
        text-transform: uppercase;
        font-family: var(--font-bentonsans);
    }

    .pgds-hero > div:last-child {
        font-size: 20px;
        font-family: var(--font-nimbus);
        text-align: center;
    }

/* Article Header */

.pgds-article-header-container > h2 {
    font-size: 32px;
    font-family: var(--font-bentonsans);
    text-transform: uppercase;
    padding-bottom: 8px;
}

.pgds-article-header-container > p {
    font-size: 16px;
    font-family: var(--font-nimbus);
    margin-top: 0;
    max-width: 398px;
    font-size: 16px;
    letter-spacing: 0.01em;
    line-height: 160%;
    text-align: left;
}

/* Page Header */

.pageHeader {
    font-size: 65px;
    text-align: center;
    font-family: var(--font-bentonsans);
    text-transform: uppercase;
}

/* Status Badges */

.badge.Requested {
    background-color: lightgray;
    color: #000000;
}

.badge.PreApproved {
    background-color: lightgray;
    color: #000000;
}

.badge.Accepted {
    background-color: #7eacda;
    color: #fff;
}

.badge.WaitListed {
    background-color: #ffe880;
    color: #000;
}

.badge.Participating {
    background-color: #8BDB93;
    color: #000;
}

.badge.NotAttending {
    background-color: #ebced2;
    color: #000;
}

/* Admin Email Search */

.admin-use-container {
    float: right;
    position: fixed;
    right: 12px;
    background-color: white;
    padding: 5px;
    bottom: 6px;
    z-index: 3000;
    border: 2px solid var(--dark-blue);
    background-color: var(--light-gray);
}

.admin-use-textbox {
    border-radius: 0px !important;
    height: 61px;
}

.admin-use-button {
    padding-top: 18px !important;
}

/* Image Cards */

.pgds-image-card {
    position: relative;
    padding: 24px;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 1/1;
}

    .pgds-image-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("https://streams1.perfectgame.org/images/showcases/journies/journeys-card-1.jpg") center / cover no-repeat;
        transition: transform 0.3s ease, filter 0.3s ease;
        z-index: 0;
    }

    .pgds-image-card:hover::before {
        transform: scale(1.1);
        filter: brightness(0.8);
    }

.pgds-image-card-header {
    font-family: var(--font-bentonsans);
    color: white;
    text-transform: uppercase;
    margin-bottom: .5em;
    font-size: 24px;
    position: relative;
    z-index: 1;
}

.pgds-image-card-text {
    color: white;
    position: relative;
    z-index: 1;
}

.pgds-image-card-cta {
    position: absolute;
    bottom: 20px;
    left: 20px;
    padding: 3px 15px;
    z-index: 1;
}

/* Card */

.pgds-EventCard {
    overflow: hidden;
    border: 1px solid var(--light-gray);
    margin-bottom: 20px;
    padding: 12px;
    background-color: var(--offwhite);
    transform: scale(0.97);
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

    .pgds-EventCard:hover {
        background-color: white;
        border-color: var(--dark-blue);
        transform: scale(1);
    }
/* PGDS RadGrid */

.pgds-RadGrid strong,
.pgds-RadGrid .RadComboBox .rcbInput,
.pgds-RadGrid td.rgPagerCell {
    font-weight: 700 !important;
    background-color: white;
}

.pgds-RadGrid .rgPagerCell .rgNumPart a.rgCurrentPage {
    background-color: var(--dark-blue) !important;
    color: white !important;
    border: 1px solid var(--dark-blue) !important;
}

.pgds-RadGrid .rcbReadOnly {
    background-color: white;
}

.pgds-RadGrid {
    border: 1px solid #dedede !important;
}

@media (max-width: 430px) {

    .pgds-RadGrid {
        border: none !important;
    }

        .pgds-RadGrid .rgPager td {
            border: none;
        }

        .pgds-RadGrid .rgMasterTable {
            display: block;
        }

            .pgds-RadGrid .rgMasterTable tbody tr {
                display: flex;
                flex-wrap: wrap;
                margin-bottom: 20px;
                padding: 15px;
                border-radius: 8px;
                transition: box-shadow 0.3s ease;
            }

                .pgds-RadGrid .rgMasterTable tbody tr:hover {
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                }

                .pgds-RadGrid .rgMasterTable tbody tr td {
                    width: 100%;
                    border: none;
                }

            .pgds-RadGrid tfoot .rgFooter,
            .pgds-RadGrid .rgMasterTable thead {
                display: none;
            }

            .pgds-RadGrid .rgMasterTable tbody tr td a {
                text-decoration: none;
                color: inherit;
            }

            .pgds-RadGrid .rgMasterTable tbody tr td {
                font-size: 14px;
            }

            .pgds-RadGrid .rgMasterTable tbody tr {
                margin-bottom: 15px;
                border: 2px solid var(--dark-blue);
            }

        .pgds-RadGrid .rcbReadOnly {
            display: revert !important;
        }

        .pgds-RadGrid td.rgPagerCell {
            display: block !important;
        }

        .pgds-RadGrid .rgPagerCell .rgAdvPart {
            margin-left: 0 !important;
        }

            .pgds-RadGrid .rgPagerCell .rgAdvPart span {
                padding: 7px 7px 7px 4px !important;
            }
}

@media (max-width: 769px) {
    .pageHeader {
        font-size: 32px;
    }

    /* Header */

    .pgds-large-header {
        font-size: 32px;
    }
}

@media (max-width: 576px) {
    /* container */
    .container.pgds-container {
        margin: 24px !important;
    }
}


.responsive-title {
    font-size: 1.65rem;
}

.responsive-subtitle {
    font-size: 1.55rem;
}

@media (min-width: 576px) {
    .responsive-title {
        font-size: 1.85rem;
    }

    .responsive-subtitle {
        font-size: 1.65rem;
    }
}

@media (min-width: 768px) {
    .responsive-title {
        font-size: 2rem;
    }

    .responsive-subtitle {
        font-size: 1.75rem;
    }
}

@media (min-width: 992px) {
    .responsive-title {
        font-size: 2.75rem;
    }

    .responsive-subtitle {
        font-size: 2rem;
    }
}