/* Import Fira Sans from Google Fonts - Same as JetPhotos */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap');

/* == General Styles == */

html, body {
    font-family: 'Fira Sans', sans-serif;
    margin: 0;
    padding: 6px 0 0 0;
    background-color: #1D364C;
}

body {
    text-align: justify;
    margin-bottom: 10px;
    font-size: 0.7em; /* Increased from 0.7em for better readability */
    color: #F2F2F2;
}

/* == Structural Elements == */

div.center {
    width: 760px;
    position: relative;
    margin: 0 auto;
    background: #476A8E url(../img/logo.jpg) no-repeat;
}

div.header, div.left, div.main, div.footer {
    margin: 0;
    padding: 0;
}

div.header {
    width: 760px;
    height: 205px;
}

div.left {
    width: 220px;
    height: 700px;
    float: left;
    text-align: center;
    color: #002060;
}

div.main {
    width: 520px;
    margin-left: 240px;
    text-align: center;
}

div.main p {
    text-align: justify;
}

div.main-solo {
    padding: 0 20px 20px 20px;
}

/* == Images == */

img, a img, p img {
    border-color: #002060;
}

.left img {
    border: 2px solid white;
    max-width: 100%;
    height: auto;
}

p.center img {
    border: 2px solid white;
}

.popular-photo {
    width: 350px;
    height: 233px;
    object-fit: cover;
    object-position: top;
}

@media (max-width: 400px) {
    .popular-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }
}

/* == Quick Search Panel == */

.quick-search-panel {
    display: block !important;
    width: 470px !important;
    background-color: #1D364C;
    padding-top: 5px;
    border: 1px solid #002060;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 10px;
    box-sizing: border-box;
    text-align: left;
}

.content-aligned {
    width: 470px;
    margin: 10px auto;
    padding-bottom: 20px;
    text-align: justify;
}

.content-aligned p.center {
    text-align: center;
    margin: 15px 0;
}

.content-aligned .popular-photo {
    display: block;
    margin: 0 auto 15px auto;
}

.quick-search-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.quick-search-list li {
    width: 50%;
    margin-bottom: 8px;
    padding-right: 5px;
    box-sizing: border-box;
}

.quick-search-list a {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 600;
    font-size: 0.9em;
    color: #F2F2F2;
    text-decoration: none;
}

.quick-search-list a:hover {
    text-decoration: underline;
}

.quick-desc {
    display: block;
    font-family: 'Fira Sans', sans-serif;
    font-size: 0.75em;
    font-weight: 300;
    color: #B0C4D8;
    margin-top: 1px;
}

.main-page-image {
    width: 600px;
    height: 200px;
}

/* == Typography == */

h1, h2, h3 {
    font-family: 'Fira Sans', sans-serif;
    color: #F2F2F2;
}

h1 {
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    font-size: 1.5em;
    font-weight: 600;
}

h1.main-page, h1.search {
    margin-bottom: 15px;
    font-size: 1.5em;
}

h2 {
    margin: -20px 0 10px 5px;
    font-weight: 600;
}

h3 {
    margin: 10px 0 0 0;
    font-size: 1.5em;
    font-weight: 600;
}

h3.first {
    margin-top: 0;
}

a {
    font-family: 'Fira Sans', sans-serif;
    color: #F2F2F2;
    font-size: 0.9em;
}

a:hover {
    color: #F2F2F2;
}

/* == Lists == */

ul.left, ul.right, ul.center {
    width: 50%;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* == Forms == */

form.search {
    display: block !important;
    width: 470px !important;
    background-color: #1D364C;
    padding-top: 5px;
    border: 1px solid #002060;
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 10px;
    text-align: left;
}

fieldset {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid;
    font-size: 0.9em;
}

legend {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 600;
    font-size: 1.3em;
}

label {
    font-family: 'Fira Sans', sans-serif;
    display: inline-block;
    margin-bottom: 8px;
}

span.title {
    font-family: 'Fira Sans', sans-serif;
    display: block;
    text-align: left;
    margin-bottom: 3px;
    color: #F2F2F2;
}

input[type="text"],
input[type="password"],
select {
    font-family: 'Fira Sans', sans-serif;
    padding: 2px 5px;
    border: 1px solid #002060;
    background-color: #FFFFFF;
    color: #000;
}

input[type="submit"] {
    font-family: 'Fira Sans', sans-serif;
    padding: 5px 15px;
    border: 1px solid #002060;
    background-color: #476A8E;
    color: #F2F2F2;
    cursor: pointer;
    font-weight: 500;
}

input[type="submit"]:hover {
    background-color: #5A7FA5;
}

.center input[type="submit"] {
    font-family: 'Fira Sans', sans-serif;
    font-size: 10px;
}

/* == Tables == */

table.legend, table.search, table.next-prev {
    font-family: 'Fira Sans', sans-serif;
    border: 1px solid #002060;
    font-size: 0.8em;
    margin: 10px auto;
    background-color: #1D364C;
    border-collapse: collapse;
}

table.legend td,
table.next-prev td {
    padding: 5px 10px;
    border: 1px solid #002060;
}

table.search {
    width: 100%;
}

table.search td {
    padding: 5px 10px;
    background-color: #1D364C;
}

table.search td.top-left,
table.search td.left,
table.search td.remarks {
    color: #FFFFFF;
    font-weight: 600;
    width: 20%;
}

table.search td.photo {
    width: 200px;
    vertical-align: top;
}

table.search td.top, 
table.search td.second {
    width: 30%;
}

table.search td.remarks {
    vertical-align: top;
}

table.next-prev {
    width: auto;
    max-width: 600px;
    margin: 10px auto;
}

table.next-prev td {
    text-align: center;
    vertical-align: top;
    padding: 5px 15px;
}

table.next-prev td.center {
    width: 150px;
}

tr.prev-next-legend td {
    font-weight: 600;
    padding-bottom: 10px;
}

/* == Paragraphs == */

p.center {
    text-align: center;
    margin: 0;
}

p.copy {
    text-align: center;
}

p.back {
    text-align: center;
}

body.photo p {
    text-align: center;
}

p.pages-top,
p.pages-bottom {
    text-align: center;
    margin: 10px 0;
}

/* == Utility Classes == */

.upper {
    text-transform: uppercase;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.border {
    border: 1px solid;
}

.inactive {
    color: #999;
    cursor: default;
}

/* == Select2 Dropdown Styles == */

.select2-container {
    width: 350px !important;
}

.select2-dropdown {
    background-color: #FFFFFF;
}

.select2-container--default .select2-results__option {
    font-family: 'Fira Sans', sans-serif;
    color: #000;
    font-size: 10px;
    text-align: left;
    white-space: nowrap;
}

.select2-container--default .select2-results__option--highlighted {
    font-family: 'Fira Sans', sans-serif;
    color: #F2F2F2;
    font-size: 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    font-family: 'Fira Sans', sans-serif;
    color: #000;
    background-color: #FFFFFF;
    font-size: 10px;
}

/* == Photo Page Responsive == */

body.photo {
    padding: 10px;
    box-sizing: border-box;
}

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

body.photo h1 {
    margin-bottom: 10px;
}

body.photo p {
    text-align: center;
}

table.legend {
    max-width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
}

table.next-prev {
    table-layout: fixed;
    word-wrap: break-word;
}