/* Stylesheet applied only to pages **on the website** (not applied to mobile app). */

/* == Color Scheme ================================================================================================== */
:root {
    --flamingo-pink: #db4d69;

    --siteheader-margin-right: 22px;

    --border-radius: 5px;
}

/* == Base styles =================================================================================================== */
/* CSS rules which target the standard unqualified HTML elements.                                                     */

html {
    background: #006C67 url(../images/png/second_chance_bkg_2024.png) no-repeat center 185px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

body {
    margin: 0;
}

/* -- Text ---------------------------------------------------------------------------------------------------------- */

h1 {
    font-family: "Arial Black", Gadget, Arial, sans-serif;
    font-weight: 900;
    font-size: 2rem;
    color: #000000;
    margin-top: 0;
    margin-bottom: 17px;
}

h2 {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 17px;
}

p {
    margin-top: 0;
}

/* -- Forms --------------------------------------------------------------------------------------------------------- */

input {
    background-color: #F5F5F5;
    border: 1px solid #CCC;
    padding: 2px;
    font-size: inherit;
}

/* == Utility classes =============================================================================================== */
/* Re-usable CSS classes.                                                                                             */

/* -- .fl-inline-link ---------------------------------------------------------------------------------------------- */
/* The .fl-inline-link ruleset is used to highlight hyperlinks within text elements like paragraphs.                 */

.fl-inline-link {
    color: var(--flamingo-pink);
    text-decoration: underline;
    font-weight: bold;
}

/* -- .fl-submit-button --------------------------------------------------------------------------------------------- */
/* The .fl-submit-button ruleset provides a generic submit button styled to match the theme of the website.           */
/* To use the ruleset, apply the .fl-submit-button class to an <input type="submit"> or a <button>                    */

.fl-submit-button {
    height: 32px;
    width: auto;
    border: 1px solid #CCC;
    padding: 4px 50px;
    margin: 15px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px 5px 5px 5px;
    background: #FEFEFE linear-gradient(to bottom, #FEFEFE 0%, #DEDEDE 100%);
}

/* -- .fl-popover-menu ---------------------------------------------------------------------------------------------- */
/* The .fl-popover-menu ruleset allows you to create a navigation menu which appears as you hover over a label.
 *
 * ##### Example Usage
 * ```
 * <nav class="fl-popover-menu">
 *     <div class="fl-popover-menu-title">
 *         My Pets
 *     </div>
 *     <div class="fl-popover-menu-content">
 *         <div>Cocoa</div>
 *         <div>Jessie</div>
 *         <div>Tim</div>
 *     </div>
 * </nav>
 * ```
 */

.fl-popover-menu {
    display: flex;
    flex-direction: column;
    align-items: end;
    position: relative;
}

.fl-popover-menu-title {
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    gap: 8px;
}

/* The body of the fl-popover. Includes the menu items, but not the title. */
/* This is what appears when hovering over the title. */
.fl-popover-menu-content {
    /* Position the popover-menu-content immediately below the popover-menu-title. */
    /* And, remove the popover-menu-content from the normal document flow. */
    position: absolute;
    top: 100%;
    z-index: 1;

    background-color: white;
    color: black;
}

/* If the fl-popover-menu is unhovered, then its content should be hidden. */
.fl-popover-menu > .fl-popover-menu-content {
    display: none;
}

/* If the fl-popover-menu is hovered, then its content should be shown */
.fl-popover-menu:hover > .fl-popover-menu-content {
    display: block;
}

/* Append the down arrow icon to the end of the popover menu title. */
.fl-popover-menu-title::after /* (down arrow) */ {
    content: "";
    background: url(../icons/down-arrow-pink.png) no-repeat;
    background-position: center;
    height: 20px;
    width: 25px;
    display: inline-block;
}

.fl-popover-menu-content a:hover {
    color: var(--flamingo-pink);
}

/* -- .fl-image-fade-bottom ---------------------------------------------------------------------------------------- */
/* The .fl-image-fade-bottom utility rule makes the bottom edge of an image fade away to white.                      */
/* Example Usage:                                                                                                    */
/* ```                                                                                                               */
/* <div class="fl-image-fade-bottom">                                                                                */
/*     <img height="x" width="y" src="" />                                                                           */
/* </div>                                                                                                            */
/* ```                                                                                                               */

.fl-image-fade-bottom {
    position: relative;
}

.fl-image-fade-bottom::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15%;
    background: linear-gradient(to bottom, transparent, white);
}

/* == Specific rules =============================================================================================== */
/* These are rules which are specific to individual pages or components.                                             */

/* -- WEB-INF/home.jsp ----------------------------------------------------------------------------------------------*/

.home-carousel-button {
    position: absolute;
    bottom: 0;
    background-color: transparent;
    border: none;
    opacity: 0;
    height: 100%;
    width: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-carousel-button:hover {
    opacity: 1;
}

/* -- WEB-INF/page.tag ----------------------------------------------------------------------------------------------*/
#page {
    /* Center the page horizontally in the window. */
    margin: 0 auto;
    width: 960px;
}

#page-content {
    background-color: white;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

/* -- WEB-INF/shell/navaccount.jsp --------------------------------------------------------------------------------- */

#navaccount {
    margin-right: var(--siteheader-margin-right);
    margin-top: 6px;
    font-family: Arial, Helvetica, sans-serif;
}

#navaccount-signed-in-players-name {
    font-size: 13px;
    font-weight: 700;
}

#navaccount-content {
    padding: 0 5px;
}

#navaccount-content :last-child {
    border-bottom: none;
}

.navaccount-menu-item {
    font-size: 11px;
    padding: 5px;
    border-bottom: 1px solid #000000;
}

#navaccount-login-form-container {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
    font-family: 'open_sans', Arial, Helvetica, sans-serif;
}

#navaccount-login-form-username-field {
    width: 224px;
}

#navaccount-login-form-password-field-container {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

#navaccount-login-form-password-field {
    width: 194px;
}

/* Styles common to the above two #navaccount-login-form-username-field and #navaccount-login-form-password-field. */
.navaccount-login-form-text-field {
    border-radius: 2px;
    padding: 1px 12px;
    height: 24px;
    background-color: white;
    border: none;
    font-size: 11px;
}

.navaccount-login-form-text-field:focus {
    outline: 0;
}

#navaccount-login-submit-button {
    height: 25px;
    width: 25px;
    border: none;
    background: url('../icons/submit-button-pink.png') transparent;
}

#navaccount-login-submit-button:hover {
    background: url('../icons/submit-button-white.png') transparent;
}

#navaccount-login-form-registration-link {
    text-decoration: underline;
}

/* -- WEB-INF/shell/siteheader.jsp ---------------------------------------------------------------------------------- */

#siteheader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 145px;
    color: white;
}

#siteheader-flamingo-logo-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

#siteheader-site-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}

#siteheader-navpromos-stripe {
    width: 100%;
    background-color: #015953;
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: right;
    color: white;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

/* -- WEB-INF/shell/navpromos.jsp ----------------------------------------------------------------------------------- */

#navpromos {
    font-family: open_sans, Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin-right: var(--siteheader-margin-right);
    height: 100%;
}

#navpromos-title {
    height: 100%;
}

/* The element which appears when hovering over the 'Current Promotions' item in the navpromos stripe. */
#navpromos-content {
    font-size: 11px;

    /* Make the navpromos menu as wide as the title of the menu 'Current Promotions'. */
    width: 100%;
}

.navpromos-menu-item {
    padding: 8px 5px;
    border-bottom: 1px solid black;
}

.navpromos-menu-section :last-child {
    border-bottom: none;
}

.navpromos-menu-section {
    padding: 0 8px;
}

#navpromos-closed-promotions-heading {
    padding: 8px 13px;
    border-bottom: 2px solid #006C67;
    font-weight: bold;
}

/* -- WEB-INF/promo/promoheader.jsp ---------------------------------------------------------------------------- */

#promoheader-header {
    display: flex;
    flex-direction: column;
}

#promoheader-navbar {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: var(--promotion-background);
    color: white;
    height: 40px;
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
    font-family: Arial, Helvetica, sans-serif;
}

#promoheader-navbar > * {
    border-right: 1px solid white;
    padding-left: 39px;
    padding-right: 39px;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#promoheader-navbar > :last-child {
    border-right: none;
}

#promoheader-navbar a {
    color: white;
    text-decoration: none;
}

.promoheader-navbar-item-disabled {
    opacity: 75%;
    cursor: default;
    pointer-events: none;
}

/* -- WEB-INF/shell/sitefooter.jsp ---------------------------------------------------------------------------------- */

#sitefooter {
    margin-top: 20px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 11px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

#sitefooter-bottom-left-corner {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    gap: 10px;
}

#sitefooter-bottom-right-corner {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
    gap: 10px;
}

#sitefooter-florida-lottery-link {
    color: white;
    text-decoration: none;
}

#sitefooter-social-links {
    margin-top: 2px;
    display: flex;
    flex-direction: row;
    gap: 5px;
}

/** -- WEB-INF/promo/ticketEntry.jsp -------------------------------------------------------------------------------- */

#ticketEntry-ticket-number-input {
    background-color: #F5F5F5;
    border: 2px solid black;
    padding: 2px;
    box-sizing: border-box;
    height: 22px;
    width: 180px;
}

#ticketEntry-pin-input {
    background-color: #F5F5F5;
    border: 2px solid black;
    padding: 2px;
    height: 22px;
    box-sizing: border-box;
}

#ticketEntry-promo-code-input {
    background-color: #F5F5F5;
    border: 2px solid black;
    padding: 2px;
    height: 22px;
    width: 180px;
    box-sizing: border-box;
}

#ticketEntry-submit-button {
    background: linear-gradient(0deg, rgba(216,36,62,1) 57%, rgba(239,88,79,1) 100%);
    color: white;
    border-radius: 1px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
}

.ticketEntry-field-label {
    font-weight: bold;
}

#ticketEntry-ticket-table {
    width: 100%;
}

#ticketEntry-couponTable {
    width: 100%;
}

#ticketEntry-action-message {
    color: #c60c30;
    font-weight: bold;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 15px;
}

/** -- WEB-INF/promo/howToPlay.jsp ---------------------------------------------------------------------------------- */
.promotion-how-to-play-call-to-action-link {
    background-color: var(--promotion-primary-color);
    color: white !important;
    text-decoration-color: white !important;
    border-radius: var(--border-radius);
    font-weight: bold;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
    padding-right: 40px;
    text-transform: uppercase;
    margin-bottom: 17px;
}

/** -- WEB-INF/promo/rules.jsp ---------------------------------------------------------------------------------------*/
.promotion-rules-content table {
    margin-top: 25px;
}

.promotion-rules-content li {
    margin-bottom: 0.5em;
}

/* ... Primary list ................................................................................................. */
.promotion-rules-content ol {
    counter-reset: list;
}
.promotion-rules-content ol > li {
    list-style: none;
}
.promotion-rules-content ol > li:before {
    content: "(" counter(list, decimal) ") ";
    counter-increment: list;
}

/* ... Secondary list  .............................................................................................. */
.promotion-rules-content ol ol {
    counter-reset: list;
}
.promotion-rules-content ol > li {
    list-style: none;
}
.promotion-rules-content ol ol > li:before {
    content: "(" counter(list, lower-alpha) ") ";
    counter-increment: list;
}

/* ... Tertiary list ................................................................................................ */
.promotion-rules-content ol ol ol {
    counter-reset: list;
}
.promotion-rules-content ol ol ol > li {
    list-style: none;
}
.promotion-rules-content ol ol ol > li:before {
    content: counter(list, decimal) ". ";
    counter-increment: list;
}

/* ... Quaternary list ...............................................................................................*/
.promotion-rules-content ol ol ol ol {
    counter-reset: list;
}
.promotion-rules-content ol ol ol ol > li {
    list-style: none;
}
.promotion-rules-content ol ol ol ol > li:before {
    content: counter(list, lower-alpha) ". ";
    counter-increment: list;
}

/** -- WEB-INF/promo/ticketEntryWinners.jsp ------------------------------------------------------------------------- */

/* An anchor tag in the draw menu list in the sidebar of the winners page. */
.promotion-winners-page-draw-menu-item {
    color: black !important;
    text-decoration: none;
}

.promotion-winners-page-draw-menu-item.selected {
    color: var(--flamingo-pink) !important;
}

/* .. tables ........................................................................................................ */
/* Note that these table styles are applied on top / in addition to, the .promopage table styles defined below.      */
.promotion-winners-content table {
    overflow-x: hidden;
    text-overflow: ellipsis;
    table-layout: fixed;
    width: auto;
}

.promotion-winners-content td {
    font-weight: normal;
}

.promotion-winners-content th,
.promotion-winners-content td {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Draw Order Column */
.promotion-winners-content th:nth-child(1),
.promotion-winners-content td:nth-child(1) {
    width: 65px;

}

/* Player Name Column */
.promotion-winners-content th:nth-child(2),
.promotion-winners-content td:nth-child(2) {
    width: 148px;

    /* Truncate long player names which overflow the table horizontally. */
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
    overflow: hidden;
}

/* Player Home City Column */
.promotion-winners-content th:nth-child(3),
.promotion-winners-content td:nth-child(3) {
    width: 148px;

    /* Truncate long city names which overflow the table horizontally. */
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
    overflow: hidden;

}

/* Player Home State Column */
.promotion-winners-content th:nth-child(4),
.promotion-winners-content td:nth-child(4) {
    width: 54px;
}

/* Ticket number column */
.promotion-winners-content th:nth-child(5),
.promotion-winners-content td:nth-child(5) {
    width: 230px;
}

/* == .promopage rules ============================================================================================== */
/* All rules for styling .promopage, the class applied to the root of all promotion-specific pages (how to play, etc) */

/* --- .promopage headings  ----------------------------------------------------------------------------------------- */

.promopage h1 {
    text-transform: uppercase;
    color: var(--promotion-primary-color);
    border-bottom: 1px solid black;
}

.promopage h2 {
    text-transform: uppercase;
    color: var(--promotion-primary-color);
}

/* --- .promopage lists --------------------------------------------------------------------------------------------- */

.promopage ul, ol {
    padding-left: 10px;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 1em;
}


.promopage li {
    margin-bottom: 13px;
}


/* -- .promopage tables --------------------------------------------------------------------------------------------- */
/* Style rules applied to all the tables on all the promo-specific pages.                                             */
/* Note that specific pages (notably the winners page), define tables style on-top of this base rule set.             */
/* Note that there is a separate (but parallel) set of rules for the printed winners page.                            */
/* When making aesthetic changes to these rules, consider also making the change in style/print-ticket-entry-winners.css */

.promopage table {
    box-shadow: none;
    width: 100%;
    -webkit-text-size-adjust: none;
    border-spacing: 0;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--promotion-primary-color);

}

.promopage table > caption {
    font-weight: bold;
    text-transform: uppercase;
    text-wrap: nowrap;
    padding: 15px 10px;
    background-color: var(--promotion-primary-color);
    color: var(--promotion-secondary-color);
}

.promopage thead {
    font-weight: bold;
    background: var(--promotion-primary-color);
    color: white;
}

.promopage th,
.promopage td {
    padding: 10px;
    text-align: center;
}

.promopage-enable-quilt-tables table > tbody > tr {
    color: black;
    background-color: color-mix(in srgb, var(--promotion-primary-color), transparent 95%);
}

.promopage-enable-quilt-tables  table > tbody > tr:nth-child(2n) {
    background-color: color-mix(in srgb, var(--promotion-primary-color), transparent 85%);
}

.promopage-enable-quilt-tables table > tbody > tr > td:nth-child(2n) {
    background-color: color-mix(in srgb, var(--promotion-primary-color), transparent 90%);
}

.promopage-enable-basic-tables table > tbody > tr {
    color: black;
    background-color: white;
}

.promopage-enable-basic-tables table > tbody > tr:nth-child(2n - 1) {
    background-color: rgb(230, 230, 230);
}

/* == .promotion-content rule ======================================================================================= */
/* All rules for styling .promotion-content, the class applied to all promotion-related content/copy which is loaded */
/* from the database. There are .promotion-content sections in How to Play page, Rules page, How to Claim page, etc.*/
.promotion-content a {
    color: var(--promotion-primary-color);
    text-decoration: underline;
    font-weight: bold;
}

/* == Fonts ========================================================================================================= */

/* -- Open Sans ----------------------------------------------------------------------------------------------------- */
/* The Apache License Version 2 for Open Sans can be found at this permalink: http://www.fontsquirrel.com/license/open-sans */

@font-face {
    font-family: 'open_sans';
    src: url('../fonts/opensans-regular-webfont.eot');
    src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/opensans-regular-webfont.woff') format('woff'),
    url('../fonts/opensans-regular-webfont.ttf') format('truetype'),
    url('../fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sans';
    src: url('../fonts/opensans-bold-webfont.eot');
    src: url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/opensans-bold-webfont.woff') format('woff'),
    url('../fonts/opensans-bold-webfont.ttf') format('truetype'),
    url('../fonts/opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'open_sans_extrabold';
    src: url('../fonts/opensans-extrabold-webfont.eot');
    src: url('../fonts/opensans-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/opensans-extrabold-webfont.woff') format('woff'),
    url('../fonts/opensans-extrabold-webfont.ttf') format('truetype'),
    url('../fonts/opensans-extrabold-webfont.svg#open_sans_extraboldregular') format('svg');
    font-weight: 800;
    font-style: normal;
}