/**
 * \file
 * \brief Main stylesheet for the default theme.
 */

body
{
    background-color: #FFFFFF;
    color: #000000;
    font: 100%/1.25 "Lucida Grande",Arial,sans-serif,STHeiti,"Arial Unicode MS",MingLiu;
    margin: 0;
    padding: 0;
}

/* Main container div for Lute site content. */
.container {
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Media query for smaller screens */
@media screen and (max-width: 600px) {
    .container {
        width: 95%; /* Adjust as needed */
    }
}

 .lutelogo_small
 {
     margin-right: 2px;
     float: left;
     width: 50px;
     height: auto;
 }

.header {
    display: flex;
    align-items: center; /* Vertically center the items */
}

a.home-link {
    text-decoration: none;
    color: black !important;
}

a.home-link:hover {
    text-decoration: none !important; /* Remove underline on hover */
}

.lutelogo {
    width: auto; /* Reset the width to auto */
    height: 3em; /* Set the height to match the text's font size */
    margin-right: 10px;
}

.title-container {
    flex: 1; /* Allow the title to take up remaining space */
}

#luteTitle {
}

p.version {
    margin: 0px;
    font-size: 0.6em;
    font-style: italic;
}

/* Style for the menu bar */

.menu-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.title {
    font-size: 18px;
    font-weight: bold;
}

.menu {
    display: flex;
}

.menu-item {
    position: relative; /* Required for sub-menu positioning */
    margin-right: 40px;
}

/* main menu item text (not links) */
.menu-item > span {
    text-decoration: none;
    display: block;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    color: black !important;
}

.menu-item > a:hover {
    text-decoration: none;
}

.sub-menu {
    display: none;
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border: 1px solid #ccc;
}

.last-sub-menu {
    right: 0; /* Align the right edge of the sub-menu with the right edge of its container */
}

.sub-menu li {
    margin: 10px 0;
    white-space: nowrap;
}

.menu-item:hover .sub-menu {
    display: block;
}

/* end menu bar. */

/* Book listing */

div#divbooktable {
    width: 70% !important;
    display: table;
    margin-right: auto;
    margin-left: auto;
}

/* End book listing */

/* Term listing CSV export. */
button.buttons-csv {
    padding: 3px !important;
    margin: 5px 0 0 10px !important;
}


.flash-notice {
    margin: 20px;
    padding: 20px;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.flash-notice-narrow {
    margin-top: 2px;
    padding: 2px;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.small-flash-notice {
    margin-top: 3px;
    padding: 3px;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

/* Screen layouts - two columns ************************/

div#term_form_left {
    width: 50%;
}

div#term_form_right {
    width: 50%;
    position: fixed;
    top: 120px;
    right: 0;
    height: 95%;
}

div#read_pane_left {
    width: 50%;
}

div#read_pane_right {
    width: 50%;
    position: fixed;
    top: 0;
    right: 0;
    height: 95%;
}

/* End layouts *****************************************/

input[type=text]
{
    font: 85% "Lucida Grande",Arial,sans-serif,STHeiti,"Arial Unicode MS",MingLiu;
    border: 1px solid #C6C6C6;
    padding: 3px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #D8D8D8;
    opacity: 1; /* Firefox */
}

div#thetext {
    margin-left: 20px;
    margin-right: 20px;
}

div#thetext p {
    line-height: 1.25;
    margin-top: 1em;
    margin-bottom: 1em;
}

table#text
{
    width: 70%;
}

th, td {
    padding: 2px;
}

table#text thead, table#text tr, table#text th:first-child, table#text tbody, table#text tr, table#text td:first-child {
    width: 20%;
    min-width: 20%;
    max-width: 20%;
    vertical-align: top;
}

table#book
{
    width: 70%;
}

table#book thead, table#book tr, table#book th:first-child, table#book tbody, table#book tr, table#book td:first-child {
    width: 20%;
    min-width: 20%;
    max-width: 20%;
    vertical-align: top;
}

table#termimport
{
    width: 70%;
}

table#termimport thead, table#termimport tr, table#termimport th:first-child, table#termimport tbody, table#termimport tr, table#termimport td:first-child {
    width: 10%;
    min-width: 10%;
    max-width: 10%;
    vertical-align: top;
}

table.settingstable
{
    width: 80%;
}

table.settingstable thead, table.settingstable tr, table.settingstable th:first-child, table.settingstable tbody, table.settingstable tr, table.settingstable td:first-child {
    width: 30%;
    min-width: 30%;
    max-width: 30%;
    vertical-align: top;
}

table#language
{
    width: 80%;
}

table#language thead, table#language tr, table#language th:first-child, table#language tbody, table#language tr, table#language td:first-child {
    width: 30%;
    min-width: 30%;
    max-width: 30%;
    vertical-align: top;
}

table#language ul
{
    color: red;
    list-style-type: none;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}

input[type=text].form-control
{
    width: 100%;
    /* padding: 5px 5px; */
    margin: 2px 0;
    box-sizing: border-box;
}

textarea.form-largetextarea
{
    /*
      1em is /supposedly/ = the current font size, roughly
     (ref https://stackoverflow.com/questions/2034544/
     textareas-rows-and-cols-attribute-in-css),
     but on my machine at least it doesn't appear to be so!
     */
    width:50em;
    height:20em;
    padding: 5px 5px;
    margin: 2px 0;
    box-sizing: border-box;
    font: 85% "Lucida Grande",Arial,sans-serif,STHeiti,"Arial Unicode MS",MingLiu;
    border: 1px solid #C6C6C6;
}

div.help-text {
    font-size: 0.8em;
    font-style: italic;
    color: gray !important;
}

.nomarginblock {
    margin-block-start: 0px;
    margin-block-end: 0px;
}

p
{
    margin: 5px 0 5px 0;
    padding: 0;
}
 
h3
{
    margin: 0px 0 0px 0;
    padding: 0;
}

h4
{
    margin: 5px 0 10px 0;
    padding: 0;
}

span.flashtextcopy {
    background-color: yellow !important;
}

span.status0
{
    background-color: #D5FFFF;
    color: #000000;
}

span.status1
{
    background-color: #F5B8A9;
    color: #000000;
}

span.status2
{
    background-color: #F5CCA9;
    color: #000000;
}

span.status3
{
    background-color: #F5E1A9;
    color: #000000;
}

span.status4
{
    background-color: #F5F3A9;
    color: #000000;
}

span.status5
{
    background-color: #DDFFDD;
    color: #000000;
}

span.status99
{
   /* no styling, just regular text.
   background-color: #F8F8F8;
   border-bottom: solid 2px #CCFFCC;
   color: #000000;
   */
}
 
span.status98
{
   /* no styling, just regular text.
   background-color: #F8F8F8;
   border-bottom: dashed 1px #000000;
   color: #000000;
   */
}

span.hasflash:after {
    content: "*";
    color: black;
}

span.overlapped:before {
    content: "\207A";
    color: black;
}

span.textsentence {
     /* The weird "font-size: 0%" prevents excess space between the spans! */
     /* span.textitem then re-sets the font size for the words. */
    font-size: 0%;
}

/** A word shown in the reading pane. */
span.textitem
{
    font-size: 16px;
    color: #000000;
    display:inline-block;

    /* disallow select, only allow mouse-down-drag-up to define multiword
   terms. */
    user-select: none;

    /* Add a transparent border so that when the .wordhover or .kwordmarked
   style is added, things don't get pushed around. */
    border-bottom: 1px solid transparent;
}
 
.textarea
{
    font: 85% "Lucida Grande",Arial,sans-serif,STHeiti,"Arial Unicode MS",MingLiu;
    border: 1px solid #C6C6C6;
    padding: 3px;
}

.click
{
    cursor: pointer;
    color: #C00000;
}

.hide
{
    display: none;
}

a {
    text-decoration: none;
    color: #0000FF;
}

a:link {
    color: #0000EE;
}

a:visited {
    color: #0000EE;
}

a:hover {
    color: #C00000;
    text-decoration: underline;
}

a:focus {
    color: #C00000;
}

a:active {
    color: #C00000;
}
 
 
img
{
    border: 0pt none;
}

.uwordmarked
{
    font-weight: bold;
    border-top: 3px solid red;
    border-bottom: 3px solid red;
    border-right: 3px solid red;
    border-left: 3px solid red;
}

.wordhover
{
    border-bottom: 1px solid blue !important;
}

.kwordmarked
{
    border-bottom: 1px solid red !important;
}

.newmultiterm
{
    background: yellow !important;
}

#termtags
{
    width: 340px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 2px;
}

#texttags
{
    width: 340px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 2px;
}

.nowrap
{
    white-space: nowrap;
    margin-left: 20pt;
}

/* Widening the tooltip. */
div.ui-tooltip {
    max-width: 400px !important;
}

.tooltip-image {
    max-width: 150px;
    max-height: 150px;
    width: auto;
    height: auto;
}

ul.sentencelist {
    margin-block-start: 3px;
}

.termpopup-tag {
    background-color: #e7e7e7;
    color: black;
    padding: 0 1px 0 1px;
    border: 1px solid darkgrey;
}

/* */

ul.shorttaglist {
    margin: 0;
    padding: 0;
    font-size: 1em;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

ul.shorttaglist li {
    padding: 0 18px 0 0.5em;
    padding-left: 3px !important;
    margin: 0 5px 0 0;
    font-size: 85%;
}


ul.shorttaglist li.tagit-new {
    padding: 0 18px 0 0.5em;
    margin: 0 5px 0 0;
    font-size: 85%;
}

ul.shorttaglist li.tagit-choice {
    padding: 0 18px 0 0.5em;
    margin: 0 5px 0 0;
    font-size: 85%;
}

ul.shorttaglist li.tagit-choice-editable {
    padding: 0 18px 0 0.5em;
    margin: 0 5px 0 0;
    font-size: 85%;
}

/* Term form, status elements */

ul.form-control {
    list-style: none; /* Remove the marker */
    padding: 0; /* Remove default padding */
    display: flex; /* Display items in a row */
    
    /* Adjust spacing between items as needed */
    margin: 0;
}

ul.form-control li {
    margin-right: 8px; /* Adjust the spacing between items */
}

/* Style radio buttons */
ul.form-control input[type="radio"] {
    margin: 0;
    padding: 0;
    width: auto; /* Allow the content to determine the width */
}

/* Style labels */
ul.form-control label {
    margin: 0;
    padding: 0;
    cursor: pointer; /* Add pointer cursor for better UX */
}

/* error handler */

div.bug_report {
    margin: 20px;
    padding: 5px;
    border: 1px solid grey;
}

div.code {
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.5;
    padding: 20px;
    background-color: #f8f9fa;
}

div.code pre {
    white-space: pre-wrap;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 15px;
    overflow: auto;
    max-height: 500px;
    font-size: 14px;
    color: #212529;
}
