:root {
    /* Define your CSS variables here */
    --inputBG-color: rgba(57, 63, 84, 0.8);
    --input-text-inactive: #7881a1;
    --input-text-active: #333;
    --input-border-active: #1e407c;
    --psu-dark-blue: #002d62; /*what blue should be used???*/
    --white: #fff;
}

code {
    display: block;
    white-space: pre-wrap;
    color: var(--psu-dark-blue) !important;
}

.psu-subheading {
    font-weight: bold;
    font-size: 12px;
    text-decoration: underline;
    text-transform: uppercase;
    margin: 5px 2px;
}

.psu-button {
    display: inline-block;
    padding: 6px 10px;
    background-color: var(--psu-dark-blue);
    color: var(--white);
    font-size: 14px;
    text-align: center;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    margin: 5px 20px 5px 2px;
    background-image: none;
    width: 120px;
}

    .psu-button:hover {
        transform: scale(1.05);
        background-color: transparent;
        border: 1px solid var(--psu-dark-blue);
        color: var(--psu-dark-blue);
    }

    .psu-button:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(30, 64, 124, 0.5);
    }

.psu-select {
    background: #eee;
    border: none;
    border-radius: 5px;
    padding: 6px 10px;
    margin: 5px 2px;
}

    .psu-select option[selected="selected"] {
        background: var(--psu-dark-blue);
        color: #fff;
    }

.psu-input-0 {
    width: 100px;
    max-width: 100%;
    border-style: none;
    border-radius: 5px;
    background: transparent;
    outline: none;
    flex-grow: 1;
    color: var(--input-text-active);
    font-size: 14px;
    line-height: 1rem;
    vertical-align: middle;
    background: #eee;
    padding: .5rem;
    transition: all 0.2s ease-in-out;
    margin: 5px 2px;
    font-size: 14px;
    font-weight: bold;
}

/*#ctl00_MainContent_txtPhone_wrapper.riSingle.RadInput.RadInput_Default,
*/
.psu-input-1, #ctl00_MainContent_txtPhone.riTextBox.riEnabled.psu-input-1, #ctl00_MainContent_txtPhone_ClientState {
    width: 200px;
    max-width: 100%;
    border-style: none;
    border-radius: 5px;
    background: transparent;
    outline: none;
    flex-grow: 1;
    color: var(--input-text-active);
    font-size: 14px;
    line-height: 1rem;
    vertical-align: middle;
    background: #eee;
    padding: .5rem;
    transition: all 0.2s ease-in-out;
    margin: 5px 2px;
    font-size: 14px;
    font-weight: bold;
}

.psu-input-2 {
    width: 300px;
    max-width: 100%;
    border-style: none;
    border-radius: 5px;
    background: transparent;
    outline: none;
    flex-grow: 1;
    color: var(--input-text-active);
    font-size: 14px;
    line-height: 1rem;
    vertical-align: middle;
    background: #eee;
    padding: .5rem;
    transition: all 0.2s ease-in-out;
    margin: 5px 2px;
    font-size: 14px;
    font-weight: bold;
}

.psu-input-3 {
    width: 1000px;
    height:70px;
    max-width: 90%;
    border-style: none;
    border-radius: 5px;
    background: transparent;
    outline: none;
/*    flex-grow: 1;*/
    color: var(--input-text-active);
    line-height: 150%;
/*    vertical-align: middle;*/
    background: #eee;
    padding: .5rem;
/*    transition: all 0.2s ease-in-out;*/
    margin: 5px 10px;
    font-size: 14px;
    font-weight: bold;
}

.psu-label {
    font-size: 14px;
    line-height: 1rem;
    vertical-align: middle;
    padding: .5rem;
}

.psu-label-2 {
    font-size: 14px;
    vertical-align: middle;
    padding: 6px 10px;
    margin: 5px 2px;
    /*    font-weight: bold;*/
}

    .psu-input:focus {
        box-shadow: 0 0 3px 0 var(--psu-dark-blue);
        background: transparent;
    }

.psu-y-alignment {
    display: flex;
    flex-direction: column;
}

.row {
    padding-top: 12px;
    padding-left: 15px;
}

.nav {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 2px 4px -.75px #94c0e7;
    align-items: center;
    padding-bottom: 25px
}

.title-center {
    text-align: center;
    margin: auto;
}


.bi {
    font-size: 32px;
}

.content {
    display: flex;
    box-shadow: 0 0 7px 0 #a9a8a8;
    border-radius: 5px;
    flex-direction: column;
    margin-top: 15px;
    padding: 15px 0;
    align-items: center;
}

.dropdown-items {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin-top: 2rem;
}

.psu-id {
    margin-left: -1.25rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    max-width: 50%;
}

.not-found-alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: .25rem;
    margin-top: 1rem;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    font-weight: bold;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.custom-input {
   /* width: 100%;*/
    width: 100px;
    max-width: 100%;
    border-style: none;
    border-radius: 5px;
    background: transparent;
    outline: none;
    flex-grow: 1;
    color: var(--input-text-active);
    font-size: 1.5rem;
    line-height: 2rem;
    vertical-align: middle;
    background: #eee;
    padding: 1rem;
    transition: all 0.2s ease-in-out;
}

    .custom-input:focus {
        box-shadow: 0 0 3px 0 var(--input-border-active);
        background: transparent;
    }

    .custom-input::-webkit-input-placeholder {
        color: var(--input-text-inactive);
    }

.required {
    color: darkred;
}

input:focus {
    outline: none;
}

#MainContent_UpdatePanel1 {
    width: 50%;
}

.buttons {
    margin-top: 1.5rem;
    display: flex;
    gap: 15px;
}

.modern-button {
    display: inline-block;
    padding: 6px 10px;
    background-color: #1e407c;
    color: #fff;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

    .modern-button:hover {
        transform: scale(1.05);
        background-color: transparent;
        border: 1px solid #1e407c;
        color: #1e407c;
    }

    .modern-button:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(30, 64, 124, 0.5);
    }

.field-select {
    background: #eee;
    border: none;
    border-radius: 5px;
    padding: 6px 10px;
}

    .field-select option[selected="selected"] {
        background: var(--input-border-active);
        color: #fff;
    }

    .field-select option:hover {
        background-color: yellow;
    }

.title-container {
    line-height: 1;
}

body {
    margin: 0;
    /*    background-color: #00265d;
    background-image: url("../image.png");*/
}

.psu-line1 {
    display: block;
    background-color: var(--psu-dark-blue);
    width: 100%;
    height: 10pt;
}

.psu-header {
    /*background-color: #ffffff;*/
    color: var(--psu-dark-blue); /*var(--white);*/
    padding-top: 8%;
    display: flex;
    flex-direction: row;
    /*    justify-content: space-between;*/
    align-items: center;
    max-width: 100%;
    background-image: url("../images/NLC_Football_header.jpg");
    /*  psu-logo on site master and site master mobile was <img src="images/psu-logo.svg" alt="Penn State Logo" /> */
    /*  psu-h1 on site master and site master mobile was Nittany Lion Club*/
    /*background-image: url("./images/NLC_Events_Header.jpg");*/
    background-repeat: no-repeat;
    height: 100%;
    background-size: 100%;
}

.psu-logo {
    flex: 0;
    max-width: 0%;
}

.psu-title {
    flex: 1;
    font-weight: 600;
    text-align: center;
    /*    max-width: 500px;
    margin: auto;*/
    font-family: arial;
    text-transform: uppercase;
}

.psu-h1 {
    font-size: 48px;
    font-weight: bold;
    font-family: arial;
}

.psu-line2 {
    display: block;
    background-color: var(--psu-dark-blue);
    width: 100%;
    height: 10pt;
}

.semi {
    margin-top: 20px;
    height: 45px;
    width: 170px;
    border-radius: 0 0 40px 40px;
    margin: 0px auto;
    border: 4px solid #CCC;
    border-top: none;
    position: relative;
    background: white;
    top: -1px;
}

.parent {
    margin-top: 20px;
    width: 100%;
    height: 100pt;
    text-align: center;
    border-top: 1px solid #CCC;
    background: var(--psu-dark-blue);
   /* -- add this or not - which better look for "ticket"  */
    border-radius: 6px 6px 0px 0px;
}

.psu-h2 {
    padding-top: 25px;
    padding-left: 40px;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    color: var(--white);
}

.psu-form {
    height: 850px; /*adjust as needed?*/
    padding-right: 60px;
    padding-left: 60px;
    /*    padding-bottom: 30px;*/
    /*    margin-bottom: 30px;*/
    /*    color: var(--white);*/
    background-color: var(--white);
    border-style: solid;
    border-color: var(--psu-dark-blue);
    /*    background-image: url("../images/psu_hockey5.png");*/
}

.psu-form-updated {
    height: 1250px; /*adjust as needed?*/
    padding-right: 60px;
    padding-left: 60px;
    /*    padding-bottom: 30px;*/
    /*    margin-bottom: 30px;*/
    /*    color: var(--white);*/
    background-color: var(--white);
    border-style: solid;
    border-color: var(--psu-dark-blue);
    /*    background-image: url("../images/psu_hockey5.png");*/
}

.psu-h3 {
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 5px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    color: var(--psu-dark-blue);
}

.psu-h3-conf {
    padding-top: 10px;
    padding-bottom: 2px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: var(--psu-dark-blue);
}

.psu-p {
    margin-top: 20px;
}

.psu-p-2 {
    margin-top: 2px;
}
.psu-p-3 {
    margin-top: 10px;
}
.psu-p-submit {
    margin-top: 20px;
    margin-left: 20px;
}

.psu-footer {
    /*    margin-top: 20px;*/
    width: 100%;
    height: 80pt;
    text-align: center;
    /*  -- add this or not - which better look for "ticket"  */
    border-radius: 0px 0px 6px 6px;
    background: var(--psu-dark-blue);
    position: relative;
}

.psu-white-link {
    color: white;
}

.psu-footer-text {
    padding-top: 20px;
    padding-left: 60px;
    text-align: left;
    color: var(--white);
}

.bootRBL input {
    display: inline;
    margin-right: 0.5em;
    margin-left: 1em;
}

.bootRBL label {
    display: inline;
    font-weight: normal;
    /*     margin-left:1em;*/
}

#MainContent_mainform {
    border: 2px solid #CCC;
    /*    font-weight: bold;*/
}

#MainContent_lblFirstReq.psu-label {
    color: darkred;
    /*    font-weight: bold;*/
}

#MainContent_lblPhoneReq.psu-label {
    color: darkred;
    font-weight: bold;
}

#MainContent_lblEmailReq.psu-label {
    color: darkred;
    font-weight: bold;
}

#MainContent_lblAttendReq.psu-label {
    color: darkred;
    font-weight: bold;
    padding-left: 10px;
}

#MainContent_lblLastReq.psu-label {
    color: darkred;
    /*    font-weight: bold;*/
}

#MainContent_lblInviteNotification.psu-label {
    /* color: darkred;*/
    font-weight: bold;
    color: var(--psu-dark-blue);
    font-style: italic;
}

#MainContent_lblNameTag1FNReq.psu-label {
    color: darkred;
    /*    font-weight: bold;*/
}

#MainContent_lblNameTag1LNReq.psu-label {
    color: darkred;
    /*    font-weight: bold;*/
}

#MainContent_lblNameTag2FNReq.psu-label {
    color: darkred;
    /*    font-weight: bold;*/
}

#MainContent_lblNameTag2LNReq.psu-label {
    color: darkred;
    /*    font-weight: bold;*/
}

#MainContent_lblNoteItems.psu-label {
    /*color: darkred;*/
    font-weight: bold;
    color: var(--psu-dark-blue);
    font-style: italic;
    text-decoration: underline #002d62 1px;
    /*    padding: 20px, 0px, 20px, 0px;*/
}
#MainContent_lblNameTag2.psu-label {
    margin-top: 20px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    color: var(--psu-dark-blue);
}

#MainContent_lblCommentSection.psu-label {
    /*color: darkred;*/
    font-weight: bold;
    color: var(--psu-dark-blue);
    font-style: italic;
}

#MainContent_lblComments.psu-label {
    margin-top: 20px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    color: var(--psu-dark-blue);
}


#MainContent_lblMaxAttendees.psu-label {
    color: darkred;
    font-weight: bold;
}

#MainContent_lblRecExists.psu-label {
    color: darkred;
    font-weight: bold;
    padding-left: 10px;
}

p#lblSubNotify.psu-p-submit {
    margin-left: 20px;
    font-weight: bold;
    color: var(--psu-dark-blue);
    font-style: italic;
    font-size: 14px;
}


/*CHANGE FONT FOR ALL BUT HEADER???*/

/*RESIZE TICKET TOP TO EQUAL TICKET BOTTOM?*/

/*CHECK RESPONSIVE MODE - IMAGE AND TEXT IN HEADER - REDUCE/RESIZE??? */
/* Mobile */
/*@media (max-width: 480px) {
    body {
        background-image: url(images/background-mobile.jpg);
    }
}

/* Tablet 
@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(images/background-tablet.jpg);
    }
}

/* Desktop 
@media (min-width: 1025px) {
    body {
        background-image: url(images/background-desktop.jpg);
    }
}*/


/* If the screen size is 601px wide or more */
@media screen and (min-width: 601px) {
    .col-md-1half {
        width: 125px;
    }
    .col-md-2 {
        width: 9.5%;
    }

    .col-md-3 {
        width: 18%;
    }

}

/* If the screen size is 600px wide or less */
@media screen and (max-width: 600px) {
    .col#psu-div-1-mobile,.col#psu-div-2-mobile {
        display: grid;
        width: 100%;
        margin-right: 0;
    }

    .psu-header {
        padding-top: 6%;
    }

    .psu-h1 {
        font-size: 24px;
        margin-top:12px;
    }

    .psu-h2 {
        padding-top: 20px;
        padding-left: 0px;
        text-align: center;
        font-size: 14px;
    }

    .psu-h3 {
        font-size: 14px;
    }

    #cellAttend1 {
        display: inline;
        padding-top: 5px;
    }

    #cellAttend2, #cellAttend3, #cellAttend4, #cellAttend5 {
        display: block;
        padding-top: 5px;
    }

    #cellAttend5 {
        padding-left: 1.5rem;
    }

    #cellHighSchool1 {
        display: inline;
    }

    #cellHighSchool2 {
        display: block;
    }

    #cellFederal1 {
        display: inline;
    }

    #cellFederal2, #cellFederal3, #cellFederal4 {
        display: block;
    }
    #MainContent_lblNoteItems.psu-label, #MainContent_lblCommentSection.psu-label, #MainContent_lblInviteNotification.psu-label {
        /*  for indent on left on mobile device*/
        display: flex;
    }