:root {
    --top-panel-height: 50px;
    --bar-widht: 40px;
    --bar-height: 5px;
    --hamburger-gap:6px;
    --animation-timing: 200ms ease-in-out;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
    --hamburger-margin:10px;
}

.hamburger-menu {
    --x-width: calc(var(--hamburger-height) * 1.41421356);

    display:flex;
    flex-direction: column;
    gap: var(--hamburger-gap);
    width: max-content;
    position:absolute;
    top: var(--hamburger-margin);
    left:var(--hamburger-margin);
    z-index:2;
    cursor:pointer;
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
    content:"";
    width: var(--bar-widht);
    height: var(--bar-height);
    --foreground: black;
    --background: #fff;
    background-color: var(--background);
    border-radius: 9999px;
    transform-origin: left center;
    transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing);
}

.hamburger-menu input {
    appearance: none;
    padding:0;
    margin:0;
    outline:none;
    pointer-events:none;
}

.hamburger-menu:has(input:checked)::before{
    rotate: 45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after{
    rotate: -45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / 2);
}

.hamburger-menu input:checked {
    opacity:0;
    width:0;
}

.wordlookup
{
    border: 2px solid #7c9ce6;
    background-color:#0e1934;
    color: #ececec;
    border-radius: 5px;
    font-size:16px;
    margin:var(--hamburger-margin);
    padding:4px 2px 2px 2px;
    display:none;
}


#docmanagement
{
    justify-content: right;
    font-size:20px;
    background-color: #0e444b;
    color:#c3edf2;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    right:0;
    z-index: 5;
    display:flex;
    flex-wrap: wrap;
    height:var(--top-panel-height);
}

.mgmt
{
    position:fixed;
    transition: max-height 400ms ease-in-out;
    width:100%;
    max-height:0px;
    font-size:20px;
    background-color: #0e444b;
    color:#c3edf2;
    z-index: 5;
    overflow: hidden;
    top:var(--top-panel-height);
}

.signin input[type="text"], .signin input[type="password"]
{
    width: calc(100% - 10px);
    font-size:18px;
    margin:3px 0 6px 0;
    padding:2px;
}

.opensignupbutton, .forgotpasswordbutton
{
    background-color: unset !important;
    border: none;
    text-decoration: underline;
    padding: 0;
    margin: 0;
    color: blue !important;
}

.trustpilot-widget
{
    margin:10px;
}

#docmanagement:has(input:checked) + .mgmt
{
    max-height:500px;
}


html
{
    font-family: Arial, Helvetica, sans-serif;
    background-color:#0e1a05;
    font-size:18px;
    padding: 0 0 80px 0;
}

body
{
    margin:0;
    padding:0;
}
.sectiontype, .sameas
{
    font-size:16px;
    max-width: 100px;
    background-color: #49683b;
    color: rgb(227, 227, 227);
}
#editor
{
    height:10px;
}
.line
{
    margin:0 3px 6px 3px;
    padding:3px;
    background-color:#000000;
    border-radius: 3px;
}
.linewords
{
    display: flex;
    gap: 0px;
    background-color:#010716;
    margin:5px;
    flex-wrap:wrap;
    overflow:hidden;	
}
.linenum, .syllable-total, .eolrpl
{
    color:rgb(182, 182, 182);
    font-size: 16px;
    text-align: center;
}

.linectrl
{
    color:gray;
    font-size: 16px;
}

.wordctrl {
    min-width: 60px;
    padding: 2px;
    text-align: center;
    cursor: default;
    position: relative;
    background-color: #1e1f27;
    border-radius:5px;
}
.linectrl
{
    margin:5px;
    text-align: right;
}
.wordaction
{
    position:absolute;
    display: none;
    font-size: 14px;
    height: 23.5px;
    border-width: 0 2px 2px 2px;
    border-color: #4859a8;
    border-radius: 0 3px 3px 0;
    top: 32px;
    left:4px;
    z-index: 50;
}
.word
{
    display:inline-block;
    min-width:50px;
    height:22px;
    padding: 2px 1px 0 1px;
    cursor:text;
    color:white;
    background-color:#13141b;
    border-radius:3px;
    border:2px solid #4859a8;
}
.word:focus-visible, .wordaction:focus-visible, .opensectionactions:focus-visible, selcect.sameas:focus-visible
{
    border:2px solid orange;
    outline:none;
}
.ctrl
{
    padding:2px 0 0 0;
    display:none;
}
.syllable-count
{
    transform: translateX(-50%);
    font-size: 12px;
    color: white;
    padding: 3px;
}
button
{
    color:white;
    cursor:pointer;
    padding: 0px;
    border: 1px solid gray;
    background-color:#1d2522;
}
button img
{
    height: 12px;
    width: 13px;
    filter: invert(100%);
    position: relative;
    top: 1px;
    padding-top: 0px;
}
.addright::after
{
    content:'>';
    position:relative;
    left:-2px;
}
.addleft::before
{
    content:'<';
    position:relative;
    left:2px;
}
.section
{
    background-color:#354d07;
    padding:4px;
    margin-top:10px;
}
.secctrlhead
{
    font-weight: bold;
    font-size: 18px;
}
.sectionctrl
{
    color:rgb(202, 202, 202);
    font-size:16px;
    text-align: left;
    margin:3px;
}
.sectionctrl button
{
    margin:0 3px 0 3px;
}

.dlgbackground
{
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height: 900px;
    z-index: 10;
    background:rgba(16, 26, 31, 0.438);
    backdrop-filter: blur(2px);
}

.dialog
{
    z-index: 20;
    display:none;
    background-color: #e1e1e2;
    padding: 0;
    position: absolute;
    max-width:700px;
    text-align: right;
}

.dialog input
{
    line-height: 18px;
    margin: 2px;
}

.dialog button
{
    background-color:rgb(199, 199, 199);
    color:black;
    border-radius:3px;
    padding:3px;
    margin:6px;
    font-size:18px;
}

.dialog button:active
{
    background-color:black;
    color:white;
    padding:3px;
}

.dialog button:disabled
{
    background-color:#b4b4b4;
}

.dlgtopbar
{
    background-color: #d9d9de;
    padding:5px;
    text-align: left;
}

.dlgmain
{
    padding:5px;
    background-color: #fafafc;
    text-align: left;
    margin:5px;
}

.help .dlgmain, .open .dlgmain, .rhymepatterns .dlgmain, .rhymelookup .dlgmain, .synonymlookup .dlgmain
{
    height:400px;
    overflow-y:scroll;
}

.mgmt button
{
    border-radius:3px;
    padding:3px;
    margin:3px 5px 3px 5px;
    border: 2px solid #6cd3e0;
    background-color: #093136;
    color: #b6f6ff;
    font-size:18px;
}

@media (max-width: 700px)
{
    #docmanagement button
    {
        min-width: 30%;
    }		
}

@media (min-width: 700px)
{
    .mgmt button
    {
        min-width: 15%;
    }
}

.mgmsongnametext
{
    width: 93%;
}
.mgmsongnameprompt
{
    min-width:60px;
    display:inline-block;
    font-size: 18px;
    margin:3px
}

#mgmsongname
{
    display:inline-block;
    color:rgb(206, 206, 206);
    background-color: #133131;
    font-size:18px;
    width:calc(100% - 90px);
    margin:3px;
}

.mgmt button:disabled
{
    border: 2px solid #6cd3e0;
    background-color: #3a9aa7;
    color: #66c3cf;
}

.mgmt button:hover, .opensectionactions:hover, .toppanelbutton:hover, .wordaction:hover
{
    border: 2px solid #f87d61;
    background-color: #772b0a;
    color: #f0bba0;
}

.mgmt button:active, .opensectionactions:active, .toppanelbutton:active, .wordaction:active
{
    border: 2px solid #7ff861;
    background-color: #06410d;
    color: #b4f0a0;
}

.rhymeadd, .rhymeset
{
    padding:2px;
    font-size:14px;
    margin:0 5px 0 5px !important;
}

.lookuprhymelist, .lookupsynonymlist
{
    border-collapse: collapse;
}

.lookuprhymelist th, .lookupsynonymlist th
{
    font-weight: bold;
}

.lookuprhymelist td, .lookupsynonymlist td
{
    border: 1px solid black;
}

h1
{
    font-size:20px;
}

.openlist thead
{
    font-weight: bold;
}

.openlist
{
    border-collapse: collapse;
}

.openlist td
{
    padding:3px;
}

.openlist tr:nth-child(odd)
{
    background-color: #f0f0f0;
}

.opensectionactions
{
    border:2px;
    background-color: #2c3d0b;
    color:#a2ffad;
    font-size: 18px;
    border-radius: 5px;
    border:2px solid #7aaa1a;
}

.patterncombo
{
    width:20px;
    font-size:18px;
}