:root {
    /*
    --dark-bg-color: white;
    --dark-text-color: #0d0015;

    --light-bg-color: #0d0015;
    --light-text-color: white;
    */

    --dark-bg-color: #0d0015;
    --dark-text-color: white;

    --light-bg-color: white;
    --light-text-color: #0d0015;
}

/*
    Typesetting
*/

body {
    font-family: "Univers", "Helvetica Neue", "Segoe UI", "YuGothic", Arial, sans-serif;
    font-weight: 400;
}

p {
    font-family: "Univers", "Helvetica Neue", "Segoe UI", "YuGothic", Arial, sans-serif;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Apply styles to all header tags directly */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 200;
}


.display-text {
    user-select: none;
    text-align: left;
}

.head-text {
    font-weight: 700;
    font-kerning: auto;
    letter-spacing: -0.05em;
    line-height: 0.8;
}

.link-no-effect {
    text-decoration: none;
    /* Remove underline */
    color: inherit;
    /* Use the same color as the surrounding text */
    cursor: pointer;
    /* Keep the pointer cursor to indicate it's clickable */
}

/* Remove any visual effects on hover, focus, and active states */
.link-no-effect:hover,
.link-no-effect:focus,
.link-no-effect:active {
    text-decoration: none;
    color: inherit;
}

/*
    row and col style for header banner
*/


/*
    nav and nav links for header banner
*/

.nav-banner {
    height: 100%;
    /* Ensure the nav fills the height of the nav-col */
}

.my-nav-item {}

@media (max-width: 767px) {

    /* nav-item in narrow window */
    .my-nav-item {}
}

.nav-link-banner {
    height: 100%;
}

.my-nav-link {
    color: var(--dark-text-color);
    padding: 0 1rem 0 0;
}

.my-nav-link:focus {
    /*
    background-color: #0d0015;
    color: white;
    */
    color: var(--light-text-color);
    background-color: var(--light-bg-color);
}

.my-nav-link:hover {
    /*
    background-color: #0d0015;
    color: white;
    */
    color: var(--light-text-color);
    background-color: var(--light-bg-color);
}

/*
    header-banner
*/

.header-banner {
    /*
    background-color: white;
    color: #0d0015;
    */
    font-family: "Helvetica Neue", "Univers", "Segoe UI", "YuGothic", Arial, sans-serif;
    color: var(--dark-text-color);
    background-color: var(--dark-bg-color);
    padding: 0;
}

.header-banner-row {
    min-height: 4rem !important;
}

.header-banner-row>[class^="col"] {
    /*> for direct child*/
    padding-left: 0;
}

@media (min-width: 768px) {
    .header-banner-row>[class^="col"] {
        /*> for direct child*/
        border-left: 1px solid var(--dark-text-color);
    }

    .header-banner-row>[class^="col"]:last-child {
        border-right: 1px solid var(--dark-text-color);
        /* Apply the right border to the last child */
    }
}


/* Style for the pseudo-element to create the white line */
.line-overlay::after {
    content: '';
    position: absolute;
    top: 0.4rem;
    /* Adjust the vertical position */
    left: 0;
    right: 0;
    height: 1px;
    /* Line thickness */
    /*
    background-color: #0d0015;
    */
    background-color: var(--dark-text-color);
    /* Line color */
}

.line-overlay {
    width: 100%;
    /* Necessary for the pseudo-element positioning --  delegate the padding to child elements */
    /*
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    */
}

.line-overlay>*:first-child {
    padding-top: 0.4rem;
}

/*
    Color palette
*/

/* NYC MTA Subway Line Colors */
.subway-line-1-2-3 {
    background-color: #EE352E;
    /* Red */
}

.subway-line-4-5-6 {
    background-color: #00933C !important;
    color: white !important;
    /* Green */
}

.subway-line-7 {
    background-color: #B933AD;
    /* Purple */
}

.subway-line-A-C-E {
    background-color: #0039A6;
    /* Blue */
}

.subway-line-B-D-F-M {
    background-color: #FF6319;
    /* Orange */
}

.subway-line-G {
    background-color: #6CBE45;
    /* Light Green */
}

.subway-line-J-Z {
    background-color: #996633;
    /* Brown */
}

.subway-line-L {
    background-color: #A7A9AC;
    /* Gray */
}

.subway-line-N-Q-R-W {
    background-color: #FCCC0A !important;
    /* Yellow */
    color: #0d0015 !important;
}

.subway-line-S {
    background-color: #808183;
    /* Dark Gray */
}

.subway-line-SIR {
    background-color: #0039A6;
    /* Navy Blue */
}

/* NYC MTA Subway Line Text Colors */
.text-subway-line-1-2-3 {
    color: #EE352E;
    /* Red */
}

.text-subway-line-4-5-6 {
    color: #00933C;
    /* Green */
}

.text-subway-line-7 {
    color: #B933AD;
    /* Purple */
}

.text-subway-line-A-C-E {
    color: #0039A6;
    /* Blue */
}

.text-subway-line-B-D-F-M {
    color: #FF6319;
    /* Orange */
}

.text-subway-line-G {
    color: #6CBE45;
    /* Light Green */
}

.text-subway-line-J-Z {
    color: #996633;
    /* Brown */
}

.text-subway-line-L {
    color: #A7A9AC;
    /* Gray */
}

.text-subway-line-N-Q-R-W {
    color: #FCCC0A;
    /* Yellow */
}

.text-subway-line-S {
    color: #808183;
    /* Dark Gray */
}

.text-subway-line-SIR {
    color: #0039A6;
    /* Navy Blue */
}


.subway-blue {
    background-color: #1CA3C6 !important;
    color: white !important;
}

.subway-red {
    background-color: #F55028 !important;
    color: white !important;

}

.text-white {
    color: white;
}

.bg-stop {
    background-color: #d3381c;
}

.bg-primary {
    background-color: #165e83;
}

.bg-secondary {
    background-color: #028760;
}

/*
    Visual components
*/

.svg-icon {
    width: 3em;
    height: 3em;
}

.svg-fill {
    display: inline-flex;
    width: 2rem;
    /* Scale width relative to font size */
    height: 2rem;
    /* Scale height relative to font size */
    vertical-align: middle;
    /* Align icon with text */
}

.svg-banner {
    fill: white
}

.inline-text-circle {
    font-size: 3em;
}

.circle {
    user-select: none;
    display: inline-flex;
    width: 4rem;
    height: 4rem;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    /* Adjust the font size as needed */
    border-radius: 50%;
    margin: 0;
    /* Adjust spacing as needed */
    text-align: center;
    border-width: 0;
}

/*
    List card
*/

.my-card {
    border-radius: 0;
    border-color: var(--dark-bg-color);
}

.my-card>.list-group:first-child {
    border-radius: 0;
}

.my-card>.list-group:last-child {
    border-radius: 0;
}

.my-list-group-item {
    border-style: none;
    transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out;
    /* Smooth transition */
}

.my-list-group-item:hover {
    color: var(--dark-text-color);
    /* Text color on hover */
    background-color: var(--dark-bg-color);
    /* Background color on hover */
}

.my-list-group-item:focus {
    color: var(--dark-text-color);
    /* Text color on hover */
    background-color: var(--dark-bg-color);
    /* Background color on hover */
}

.my-card-header {
    background-color: var(--dark-bg-color);
    color: var(--dark-text-color);
}

.my-card-header:first-child {
    border-radius: 0;
}