/* Device breakpoints:

    * 768px <  width          : DESKTOP (desktops, laptops and most tablets in portrait mode)
    * 500px <  width <= 768px : TABLET (smaller tablets like iPad mini in portrait mode)
    * 320px <= width <= 500px : MOBILE (all smartphones in portrait mode)

 */

/*** main ***/

html {
    font-size: 16px;
}

body {
    margin: 0.357em;
    color: black;
    font-weight: normal;
    font-family: verdana, sans-serif;
    background-color: white;
    /** Tablet: Prevent arbitrary font size scaling on Safari IOS **/
    -webkit-text-size-adjust: 100%;
    /** Tablet: Prevent 300 ms tap delay on IOS when clicking on links/buttons (used to implement double tap). **/
    touch-action: manipulation;
    /*** bootstrap style overrides/bugfixes ***/
    line-height: normal;
}

body.mainBody {
    margin-left: 0;
    margin-right: 0;
    background-color: #ebeded;
    background-repeat: repeat;
}

/*
	Bootstrap puts a top border on the first item in flush mode
	by default. This is apparently by design but we don't want it.
	https://github.com/twbs/bootstrap/issues/26961
*/
.list-group-flush .list-group-item:first-child {
    border-top: 0;
}

.list-group-flush .list-group-item:last-child {
    border-bottom: 0;
}

h1 {
    font-weight: bold;
    line-height: 1.090em;
    font-size: 1.571em;
    font-family: tahoma, sans-serif;
    margin-bottom: 0.7em;
}

h2 {
    color: black;
    font-weight: bold;
    font-size: 1.2em;
    font-family: tahoma, sans-serif;
    margin-bottom: 0.3em;
}

h2.section {
    padding-bottom: 0.2em;
    margin-bottom: 0.7em;
    border-bottom: 1px solid #ddd;
}

h3 {
    color: black;
    font-weight: bold;
    font-size: 1.1em;
    font-family: tahoma, sans-serif;
    margin-bottom: 0.2em;
    margin-top: 1.0em;
}

p {
    line-height: 125%;
}

.bc-list li {
    margin-top: 0.25em;
}

/*** Links ***/
a.bc-link:link, a.bc-link:visited, .contrib-table > thead > tr > th a:link, .contrib-table > thead > tr > th a:visited {
    /** GWT: need to explicitely specify this to prevent GWT value to take precedence **/
    font-family: verdana, sans-serif;
    color: #027497;
    font-weight: bold;
    text-decoration: underline;
}

a.bc-link:hover, .contrib-table > thead > tr > th a:hover {
    text-decoration: none;
}

.blue {
    color: #027497;
}

.green {
    color: #668000;
}

.orange {
    color: #C75200;
}

.pink {
    color: #E00087;
}

.black {
    color: black;
}

em {
    color: #668000; /* green */
    font-weight: bold;
}

td.label {
    font-weight: bold;
}

input.button {
    border: 1px solid #999999;
    font-size: 1em;
}

table.layout {
    border-collapse: collapse;
}

table.layout > tbody > tr > * {
    padding: 0;
}

img {
    border: 0;
}

hr {
    border: 0;
    height: 1px;
    background-color: #aaa;
}

.center {
    display: flex;
    justify-content: center;
}

.bc-account-type {
    font-weight: bold;
}


kbd {
    border: 1px solid black;
    padding: 0.5em;
    background-color: #eee;
    color: black; /* Bootstrap 5: kbd color is set to var(--bs-body-bg) which is white; force black text. */
    border-radius: 0.3em;
    display: inline-block;
    margin: 0.2em;
    font-size: smaller;
}

/*********************************************************************
 * Layout begin
 *********************************************************************/
#container {
    margin: 0 auto;
}

.ng-rounded-area {
    border: 1px solid #b0afaf;
    background-color: white;
    padding: 0.714em;
    border-radius: 6px;
    box-sizing: border-box;
}

#maincontent {
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-top-width: 1px;
    border-top-style: solid;
    border-image-source: linear-gradient(to right, #b0afaf, white);
    border-image-slice: 1;
    padding-top: 0.714em;
    min-height: 600px;
}

#footer {
    margin-top: 1em;
}

#footer > * {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#footer > *:first-child > * {
    /* In-between row spacing when wrapped */
    margin-top: 0.5em;
    margin-right: 0.3em;
    white-space: nowrap;
}

#footer > .copyright {
    margin-top: 0.4em;
    font-size: small;
}

#footer > .fb-like {
    margin-top: 0.5em;
}

@media screen and (max-width: 500px) { /* MOBILE */
    #footer > .footerlinks > a {
        margin: 0.7em;
    }
}


/* Showing left bar on desktop and all iPad models except iPad mini. */
@media screen and (max-width: 768px) { /* TABLET */
    #container {
        padding: 0.3em;
    }

    #leftbar {
        display: none;
    }
}

@media screen and (max-width: 500px) { /* MOBILE */
    #container {
        padding: 0.15em;
    }
}

/*********************************************************************
 * Layout end
 *********************************************************************/


/*********************************************************************
 * NavBar begin
 *********************************************************************/
#navbar .navbar-brand {
    display: flex;
    flex-direction: column;
}

#navbar .navbar-brand label {
    font-family: Arial, Verdana, sans-serif;
    /* This needs to match the logo width and cannot be specified in em */
    /*noinspection CssNonIntegerLengthInPixels*/
    font-size: 14.5px;
    color: #E00087;
    font-weight: bold;
    white-space: nowrap;
    margin: 0.214em 0 0 0;
    padding: 0;
    text-align: center;
}

#navbar .bg-light {
    background-color: white !important;
}

#navbar .navbar .logosmall {
    display: none;
}

#navbar .navbar {
    padding: 0;
}

/* prevent blue background when clicked */
#navbar .navbar .dropdown-item:active {
    background-color: transparent;
    color: #212529;
}

#navbar .navbar .dropdown-item {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/*
  768px corresponds to bootstrap md breakpoint which is when the
    navbar collapse happens (navbar-expand-md)
    https://getbootstrap.com/docs/4.3/layout/overview/
*/
@media screen and (min-width: 768px) { /* TABLET */
    /* uncollapsed */
    /*** Monochrome tabs ***/
    #navbar .nav-item {
        margin-right: 0.26em;
        border-radius: 0.357em 0.357em 0 0;
        padding-left: 0.3em;
        padding-right: 0.3em;
        background-color: #767676;
    }

    #navbar .nav-item.active {
        background-color: #444;
    }

    #navbar .navbar-light .navbar-nav .active > .nav-link {
        color: white;
    }

    #navbar .nav-item:last-child {
        margin-right: 0;
    }

    #navbar .nav-link {
        font-weight: bold !important;
        color: white !important;
    }

    #navbar .nav-link:hover {
        text-decoration: underline;
    }

    #navbar .navbar-nav {
        border-bottom: 3px solid black;
    }

    /*** Color tabs ***/
    /*#navbar .nav-item {*/
    /*	margin-right: 0.26em;*/
    /*	border-radius: 0.357em 0.357em 0 0;*/
    /*	padding-left: 0.3em;*/
    /*	padding-right: 0.3em;*/
    /*}*/
    /*#navbar .nav-item:last-child {*/
    /*	margin-right: 0;*/
    /*}*/
    /*#navbar .nav-link {*/
    /*	font-weight: bold !important;*/
    /*	color: white !important;*/
    /*}*/
    /*#navbar .nav-link:hover {*/
    /*	text-decoration: underline;*/
    /*}*/
    /*#navbar .navbar-nav {*/
    /*	border-bottom: 3px solid black;*/
    /*}*/
    /*#navbar .navbar .tab-blue {*/
    /*	background-color: #027497;*/
    /*}*/
    /*#navbar .navbar .tab-green {*/
    /*	background-color: #668000;*/
    /*}*/
    /*#navbar .navbar .tab-orange {*/
    /*	background-color: #C75200;*/
    /*}*/
    /*#navbar .navbar .tab-pink {*/
    /*	background-color: #E00087;*/
    /*}*/
    /*#navbar .navbar .tab-black {*/
    /*	background-color: black;*/
    /*}*/
    /*#navbar .dropdown-toggle {*/
    /*	white-space: normal;*/
    /*}*/
    /*#navbar .navbar-nav {*/
    /*	border-bottom: 3px solid black;*/
    /*}*/
}

@media screen and (max-width: 768px) { /* TABLET */
    /* collapsed */
}

/* We swap to the small logo ahead of the collapse to give as much room as possible to the
   navbar on small screens. */
@media screen and (max-width: 850px) {
    #navbar .navbar .logolarge, .navbar-brand > label {
        display: none;
    }

    #navbar .navbar .logosmall {
        display: inline-block;
    }
}

#personalarea {
    min-width: 14em;
}

.personal-links {
    list-style-position: inside;
    padding-left: 0;
}

.personal-links > li {
    margin-top: 0.9em;
    white-space: nowrap;
}

@media screen and (max-width: 374px) {
    #logindiv {
        flex-direction: column;
        align-items: flex-end;
    }
}

/*********************************************************************
 * NavBar end
 *********************************************************************/

/*********************************************************************
 * SimpleTable begin
 *********************************************************************/
table.st-table {
    border-spacing: 1px;
    background-color: #EDEDED;
    color: #b7b7b7;
    border-collapse: separate; /* override bootstrap value */
}

caption.st-caption {
    caption-side: top; /* override bootstrap value */
    text-align: center; /* override bootstrap value */
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    font-size: 0.857em;
    margin: 0;
    padding: 0.833em;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

td.st-td, th.st-th, table.st-table td, table.st-table th {
    padding: 0.4em;
    color: black;
}

td.st-td, table.st-table td {
    color: black;
}

thead tr.st-tr {
    vertical-align: top;
}

thead th.st-th {
    text-align: left;
    background: #ededed;
    color: #666;
    border: 1px solid #FFF;
    text-transform: uppercase;
    font-size: 0.857em;
}

tbody th.st-th {
    font-weight: bold;
}

tbody tr.st-tr {
    background-color: #FFF;
    text-align: left;
}

tbody tr.st-even {
    background: #f0f0f0;
    border-top: 1px solid #FFF;
}

tbody td.st-td {
    height: 3.571em;
    background: #FFF;
    border: 1px solid #FFF;
}

tbody tr.st-even td.st-td {
    background: #f0f0f0;
    border-top: 1px solid #FFF;
}

table.st-table tfoot td.st-td, table.st-table tfoot td {
    background-color: #EDEDED;
    padding: 0.714em;
    text-align: center;
    font-weight: bold;
    border-bottom: 0.214em solid #CCC;
    border-top: 1px solid #DFDFDF;
}

/*********************************************************************
 * SimpleTable end
 *********************************************************************/


/*********************************************************************
 * ContribTable begin
 *********************************************************************/
.contrib-table {
    border-spacing: 1px;
    background-color: #dcdcdc;
    color: #b7b7b7;
}

.contrib-table caption.ct-caption {
    color: black;
    font-size: 0.857em;
    margin: 0;
    text-align: right;
    padding: 0 0 0.25em 0;
    caption-side: top; /* override bootstrap value */
}

/* Applies to tr/td of contrib table directly under thead/tbody/tfoot row */
.contrib-table > * > tr > * {
    padding: 0.333em;
}

.contrib-table > * > tr > td {
    color: black;
}

.contrib-table tbody td.ct-empty-table-message {
    font-style: italic;
    text-align: center;
}

.contrib-table thead tr.ct-tr {
    vertical-align: top;
}

.contrib-table > thead > tr > th {
    text-align: left; /* column header alignment when non sortable */
    background: #ededed;
    color: #666;
    border: 1px solid #FFF;
    text-transform: uppercase;
    font-size: 0.857em;
}

.contrib-table > tbody > tr > th {
    font-weight: bold;
}

.contrib-table tbody tr.ct-tr {
    background-color: #FFF;
    text-align: left;
}

.contrib-table tbody tr.odd {
    background: #f0f0f0;
    border-top: 1px solid #FFF;
}

.contrib-table > tbody > tr > td {
    height: 3.571em;
    background: #FFF;
    border: 1px solid #FFF;
}

.contrib-table > tbody > tr.odd > td {
    background: #f4f4f4;
    border-top: 1px solid #FFF;
}

/* Applies to td/th of footer */
.contrib-table > tfoot > tr > * {
    background-color: #EDEDED;
    padding: 0.714em;
    text-align: center;
    font-weight: bold;
    border-bottom: 0.214em solid #CCC;
    border-top: 1px solid #DFDFDF;
}

/*********************************************************************
 * ContribTable end
 *********************************************************************/


@media print {
    @page {
        size: auto;
    }

    body {
        min-width: 0 !important;
    }
}

.error {
    font-family: tahoma, sans-serif;
    font-size: 1em;
    color: red;
    font-weight: bold;
}

.feedLink {
    margin-left: 0.214em;
    padding: 0 0 0 1.357em;
    background-repeat: no-repeat;
    background-position: 0 50%;
}

fieldset {
    padding: 0.7em;
    border: 1px solid #aaa;
}

fieldset > legend {
    width: auto;
    font-size: inherit;
    margin-bottom: 0;
    color: black;
    font-weight: bold;
    float: none; /* Bootstrap 5: legend switched to float:left which breaks fieldset layout; revert. */
}

/* Bootstrap 5: form-select and input-group both default to width:100%, which fills the
   entire flex row in inline filter forms. Constrain to content width so controls sit
   inline with other elements. The gijgo datepicker also adds mb-3; neutralize it here. */
.d-flex > select.form-select,
.d-flex > .gj-datepicker {
    width: auto;
    margin-bottom: 0 !important; /* Bootstrap 5 mb-3 utility uses !important */
}

/*********************************************************************
 * Advertisement begin
 *********************************************************************/

/* Mobile/Desktop banner ad breakpoints:

    * 760px <  width          : Display desktop banner ads (728x90, 728x250, 728x280) on desktops,
                                laptops and all tablets including smaller tablets like iPad mini.
    * 320px <= width <= 760px : Display mobile banner ads (320x100, 300x100) on all smartphones.

*/
[id|="bc-banner-mobile"] {
    display: none;
}
@media screen and (max-width: 760px) {
    .bc-banner {
        display: none;
    }
    [id|="bc-banner-mobile"] {
        display: block; /* use revert once more widely supported */
    }
}
@media screen and (max-width: 319px) {
    .bc-banner {
        display: none;
    }
}

/* The engine on all puzzle pages is surrounded by ad units on 3 sides: above_puzzle, left_bar and under_puzzle.

By default, all 3 units are visible but we only want to display 2 out of 3 at any given time:
    * On large screens, we display the left_bar and under_puzzle units.
    * On small screens, where the left_bar is hidden, we display above_puzzle and under_puzzle units.
This is achieved by hiding the above_puzzle unit on the same breakpoint used to hide the left bar.
*/
@media screen and (width > 1000px) {
    #bc-banner-above_puzzle {
        display: none;
    }
}

/* Apply margin on all ad units.

The margin is applied on the inner div so if we don't display banner, the div will not be generated and no margin
will be applied.
*/
#bc-banner-page_top > div {
    margin-bottom: 0.714em;
}
#bc-banner-under_puzzle > div, #bc-banner-mobile-under_puzzle > div {
    margin-top: 1.071em;
}
#bc-banner-above_puzzle > div {
    margin-bottom: 0.714em;
}
#bc-banner-interstitial > div {
    margin-top: 0.714em;
}

/*********************************************************************
 * Advertisement end
 *********************************************************************/