/*
    ONYX DIGITAL NOTEBOOK

    DATE        MAR 2026
    NAME        ONYX.STYLE.CSS
    VERSION     3.0.18


    THIS FILE IS CREATED AND/OR SOURCED BY OWNER, AND IS INTENDED
    FOR USE IN THE WEBSITE AND IT'S AFFILIATED WEBSITES ONLY. 
    FILE COPYRIGHTS ARE AS DEFINED BY CREATIVE COMMONS (CC) 
    'BY-NC-ND 4.0'. OWNER DOES NOT ASSUME ANY RESPONSIBILITY
    NOR LIABILITY FOR COPYING AND USING IT IN ANOTHER PLACES.
*/



@font-face
{
    font-family: BELLEZA;
    font-display: block;
    src: url(/media/Belleza-Regular.ttf);
}

@font-face
{
    font-family: RUBIK;
    font-display: block;
    src: url(/media/Rubik-VariableFont_wght.ttf);
}

*, html
{
    font-family: Segoe UI, Verdana, sans-serif;
    font-size: 12pt;
    /* line-height: 1em; */
    color: rgb(3, 23, 93);
}

body
{
    width: 98%;
    margin-left: 1.2%;
    margin-right: 0.8%;
}

div
{
    display: inline-block;
    vertical-align: top;
}

.discover, .with, .benefits, textarea, .inpta, .tapanel,.titlecol, .contcol, .para, .sb, .infocont, #msg
{
    line-height: 1.416em;
}

textarea:focus 
{
    outline: none;
}

h1, h2, h3, h4, h5, h6 { font-weight: 500; }
h1 { font-size: 2em;    } 
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; text-align: center; }
h4 { font-size: 1.3em;  }
h5 { font-size: 1.075em;}
h6 { font-size: 0.85em; }

.in { display: inline; }
.inb { display: inline-block; }
.blk { display: block; }
.hid { visibility: hidden;}
.panel { width: 100%; }
.alt { vertical-align: top; }
.alc { text-align: center; }
.sb { display: inline; font-family: Segoe UI Semibold; }
.bgdis { background-color: #fafafa; }
.sf1 { font-size: 0.92em; }
.sf2 { font-size: 0.85em; }
.hand { cursor: pointer; }
.nodec { text-decoration: none; }
/* .para { line-height: 1.35em; } */
.nor { font-weight: 400; }
.bolder { font-weight: 500; }
.ml0 { margin-left: 0; }
.pl1 { padding-left: 0.5em; }
.pl2 { padding-left: 0.75em; }
.pl3 { padding-left: 1em; }

.header
{
    min-height: 3.33rem;
}

.header div
{
    vertical-align: top;
}

.logobox
{
    margin: 0.083rem 1.33rem 0 0.083rem;
}

.logo img
{
    width: 5.83rem;
}

#links
{
    margin: 0.5em 0 0 0;
}

#links a
{
    margin-right: 0.83em;
}

#links img
{
    width: 1.66em;
    height: 1.66em;
}

#auth
{
    margin-left: 0.5em;
}

#auth *
{
    font-family: RUBIK;
    font-size: 0.9em;
}

.logname
{
    /*font-family: Segoe UI Semibold;*/
    font-weight: 500;
    margin: 0 0.416em 0pt 0.33em;
}

#datetimepanel
{
    margin-top: 0;
}

#datetime
{
    font-family: RUBIK;
    font-size: 0.9em;
    margin-right: 0.5rem;
    float: right;
}

.main
{
    width: 99%;
    min-height: 42em;
    padding-top: 2em;
    padding-left: 0.5%;
    padding-right: 0.5%;
}

.footer
{
    width: 100%;
    margin-top: 2em;
    font-size: 0.8em;
    color: rgb(113, 112, 107);
}

.footer .panel
{
    margin-bottom: 0;
}

.footerbottomlinks a
{
    margin-right: 0.66em;
    font-size: 0.75em;
    color: rgb(176, 176, 176);
    text-decoration: none;
}

.copy
{
    width: 100%;
    margin-top: 1.33em;
    font-size: 1em;
    color: rgb(113, 112, 107);
}

#advancedsearchpanel
{
    margin-bottom: 2em;
}

#tagcloud, #tagcloudsearch
{
    display: inline-flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
    width: 69.5%;
    padding-left: 0.5%;
}

#tagcloudsearch
{
    padding-top: 0.5%;
    padding-bottom: 1.5%;
}

#searchbox
{
    width: 30%;
    vertical-align: top;
}

.search
{
    width: 96%;
    max-width: 20.8em;
    float: right;
    margin-top: -0.062em;
    margin-right: 0.25em;
    padding: 0pt;
    font-size: 1em;
    text-indent: 0.37em;
}

.notsel
{
    font-size: 0.916em;
    color: #9ec3e8;
}

#msg
{
    display: block;
    width: 255pt;
    margin-top: 1.025em;
    margin-bottom: 1.66em;
    margin-right: auto;
    margin-left: auto;
    padding: 1em;
    border: solid 1px #B1B3BF;
    border-radius: 0.37em;
    background-image: linear-gradient(90deg, rgb(243, 236, 226), rgb(250, 247, 245));
}

.right
{
    float: right;
}

.center
{
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.centerpanel
{
    display: block;
    width: 279pt;
    margin: 0px auto;
}

.link
{
    cursor: pointer;
    color:rgb(27, 103, 216);
    cursor: pointer;
    text-decoration: none;
}

.arealink
{
    border: 0px;
    resize: none;
    overflow: clip;
    cursor: pointer;
}

.actlink
{
    font-size: 0.9em;
    cursor: pointer;
    margin-left: 0.25em;
}

.actlinkbottom
{
    font-size: 0.9em;
    cursor: pointer;
    margin-left: 0.25em;
    margin-top: 0.5em;
}



/* --------------------   WELCOME   -------------------- */


.discover
{
    background: url('/media/discover.bg.png');
    background-size: cover;
    border-radius: 8pt;
    margin-bottom: 2em;
    font-family: Verdana;
    font-size: 3em; 
    font-weight: 200; 
    letter-spacing: 0.0.25em; 
    text-align: center;
    color: rgb(244, 243, 248);
    margin-bottom: 2.5em;
    padding: 1.33em;
}

.with
{
    font-family: BELLEZA; /* Segoe UI Light; */
    width: 90%;
    font-size: 1.83em;
    font-style: italic;
    letter-spacing: 0.0.25em; 
    text-align: center;
    margin-bottom: 2.17em;
}

.benefits
{
    margin-top: 1em;
    margin-bottom: 3em;
}

.benefits li
{
    margin-bottom: 0.5em;
    font-family: Segoe UI;
    font-size: 1.083em;
    letter-spacing: 0.05em; 
}

.app-review
{
    display: block;
    width: 96%;
    margin-left: 2%;
    border: solid 1px rgb(7, 43, 71);
}


/* --------------------   INFO PAGE   -------------------- */


.infotitle
{
    width: 97%;
    margin-top: 2em;
    margin-bottom: 1.66em;
    padding-left: 3%;
    font-family: Segoe UI Light;
    font-size: 1.8em;
    /*font-weight: 300;*/
}

.infocont
{
    width:86%;
    padding-left: 7%;
    padding-right: 7%;
    font-family: RUBIK;
    font-weight: 300;
}

.infolist
{
    margin-bottom: 0.5em;
}

.infolist li
{
    margin-bottom: 0.25em;
    font-family: Segoe UI;
    letter-spacing: 0.05em; 
    line-height: 1.66em;
}

.pd  /* paragraph divider */
{
    display: block;
    height: 1.33em;
}

.rowlink
{
    display: block;
    font-family: Verdana;
    /* font-size: .92em; */
    line-height: 1.5em;;
    text-decoration: none;
    color: rgb(27, 103, 216);
    margin-bottom: 0.5em;
}

.infolink, .infocont a
{
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
    color: rgb(27, 103, 216);
}

.infoicon
{
    width: 1.25em;
}


/* --------------------   RESULTS VIEW   -------------------- */


.griddesc
{
    display: block;
    padding-left: 1%;
    margin-bottom: 1.66em;
    font-size: 1em;
    font-family: Segoe UI Semibold, Arial;
    font-weight: bolder;
    font-style: italic;
}

.gridview
{
    width: 100%;
    font-size: 1.1em;
}

.gridrow
{
    display: flex;
    flex-wrap: nowrap;
    justify-content: left;
    align-items:normal;
    padding-top: 0.83em;
    padding-bottom: 0.42em;
    min-width: 0;
}

.altrow
{
    border-top: solid 1px rgb(220, 229, 245);
    border-bottom: solid 1px rgb(220, 229, 245);
    margin-top: 1px;
    /* margin-bottom: 1px;   due border-bottom */
}

.altrowbg
{
    border-bottom: solid 1px rgb(220, 229, 245);
}

div .gridbottom /* browser issue */
{
    display: block;
}

.gridbottom
{
    width: 100%;
    height: 1px;
    border-bottom: solid 1px rgb(220, 229, 245);
}

.sort
{
    display: block;
    width: 98.5%;
    height: 2.1em;
}

.sortlink
{
    float: right;
    margin-left: 0.66em;
}

.col
{
    vertical-align: top;
}

.notecol
{
    display: inline-flex;
    flex: 1 1 80%;
    flex-wrap: wrap;
    align-items: start;
    gap: 0.6em;
}

.actcol
{
    flex: 1 0 20%;
    margin-top: -0.15em;
}

.actpanel
{
    width: fit-content;
    padding-right: 0.3em;
    float: right;
}

.actcol a, .tagsactcol a
{
    margin-left: 0.33em;
}

.titlecol
{
    flex: 1 0 20%;
    min-width: 13em;
    font-family: RUBIK;
}

.contcol
{
    flex: 1 0 70%;
    margin-top: -0.166em;
    padding-left: 1%;
    border-width: 0;
    font-weight: 300;
    letter-spacing: 0.042em;
}

.titlelink
{
    width: stretch;
    color: inherit;
    margin-left: 0.5em;
}


.tagstitlecol
{
    flex: 1 1 85%;
    font-family: RUBIK;
}

.tagsactcol
{
    flex: 1 1 15%;
    margin-top: -0.166em;
}

.truncate
{
  width: 200px;              /* Fixed width for truncation */
  white-space: nowrap;       /* Keep text on one line */
  overflow: hidden;          /* Hide overflowed text */
  text-overflow: ellipsis;   /* Add "..." at the end */
  display: inline-block;     /* Required for width to apply */
}

.contcol a
{
    color:#0016d8;
    text-decoration: none;
}

.prot
{
    font-size: 0.916em;
    color: #084754;
    text-decoration: underline;
    cursor: pointer;
}

.rowactlink
{
    width: 16pt;
}

.rowactlink2
{
    width: 14pt;
    padding-top: 1pt;
    padding-left: 0.25em;
    vertical-align: top;
}


/* ----------------------   FORM   ---------------------- */


form label
{
    font-size: 0.9em;
    font-weight: 300;
    letter-spacing: 0.5pt;
    padding-left: 0.4em;
}

.pagetitle
{
    width:100%;
    margin-top: 2em;
    margin-bottom: 3em;
    text-align: center;
}

.pagetitlepanel
{
    display: block;
    width: 279pt;
    margin-right: auto;
    margin-left: auto;
}

.rightact
{
    float: right;
    padding-top: 1em;
    padding-right: 1em;
}

.cbpanel
{
    margin-top: 1em;
    display: flex;
    justify-content: left;
    align-items: center;
}
 
.cblabel
{
    font-weight: 400;
    margin: 0 1.1em 0.05em 0.2em;
}

.butdivider
{
    display: block;
    height: 3em;
}

.but
{
    min-width: 8em;
    margin-right: 0.75em;
    margin-bottom: 0.75em;
    padding: 0.3em 1.05em 0.37em; 
    font-size: 1.3em; 
    text-align: center; 
    color: navy;
    background-image: linear-gradient(90deg, rgb(234, 243, 250), rgb(255, 255, 255));
    border: solid 1px #B1B3BF;
    border-radius: 0.37em;
    cursor: pointer;
}

.but:hover
{
    background-image: linear-gradient(90deg, rgb(242, 248, 250), rgb(255, 255, 255));
}

.inptext
{
    width: 277.5pt;
    height: 2em;
    min-height: 2em;
    margin-top: 0.25em;
    padding: 0pt 0pt 0.22em 0pt;
    font-size: 1.1em;
    text-indent: 0.5em;
    border: solid 1px #B1B3BF;
    border-radius: 0.37em;
}

.ddl
{
    max-width: 279pt;
    width: stretch;
    margin-top: 0.25em;
    padding: 0.33em 1.166em 0.47em 0.166em;
    font-size: 1.1em;
    text-indent: 0.21em;
    border: solid 1px #B1B3BF;
    border-radius: 0.37em;
}

.iconbutpanel
{
    display: block;
    margin-bottom: 2.5em;
}

.iconbut
{
    display: inline-block;
    height: 2.7em;
    min-width: 12em;   
    background-image: linear-gradient(90deg, rgb(234, 243, 250), rgb(255, 255, 255));
    border: solid 1px #B1B3BF;
    border-radius: 0.37em;
    text-decoration: none;
}

.iconbut:hover
{
    background-image: linear-gradient(90deg, rgb(242, 248, 250), rgb(255, 255, 255));
}

.iconbut .img
{ 
    margin: 0.33em 0.4em 0em 0.8em;
}

.iconbut img
{
    width: 2em;
    height: 2em;
}

.iconbut .smallerimg
{ 
    margin: 0.52em 0.6em 0em 0.9em;
}

.iconbut .smallerimg img
{
    width: 1.66em;
    height: 1.66em;
}

.iconbut .text
{
    font-size: 1.3em;
    margin: 0.49em 0.8em 0 0;
}

.titletagpanel
{
    display: block;
    margin-bottom: 18pt;
}

.titlebox
{
    width: 60%;
    max-width: 300pt;
}

.title
{
    width: 90%;
}

.tagbox
{
    width: 40%;
    max-width: 279pt;
    float: right;
}

.titlepanel
{
    display: block;
    /* overflow: auto; */
    width: 100%;
    min-height: 2em;
}

.notetitle
{
    margin-left: 0.66em;
    font-size: 1.5em;
    font-family: Segoe UI Semibold;
}

.notecont
{
    width: 97.7%;
    padding: 0.5em 1%;
    border: solid 1px #cdd6e9;
    color: inherit;
    font-weight: 300;
    resize: none;
    overflow: auto;
}

.notecont a
{
    color:#0016d8;
    text-decoration: none;
}

.tag
{
    min-width: 3.42em;
    vertical-align: top;
    padding: 0.062em 0.25em 0.187em 0.25em;
    font-size: 0.83em;
    font-family: Segoe UI Semibold, Arial;
    text-align: center;
    color: navy;
    background-color: #ffb95f;
    border: 1px solid #817159;
}

.notetag
{
    display: inline-flex;
    justify-content: left;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0.35em 0 0 0.8em;
}

.notetag img
{
    width: 0.75em;
    margin: 0 0.4em 0 0;
}

.notetaglabel
{
    margin-top: 0.025em;
    font-family: Verdana, Arial;
    font-size: 0.916em;
    color: rgb(113, 112, 107);
}

.cloudtag
{
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0 0.75em 0.5em 0;
}

.cloudtag img
{
    width: 0.583em;
    margin-right: 0.33em;
}

.taglabel
{
    font-family: Verdana, Arial;
    font-size: 0.875em;
    color: rgb(113, 112, 107);
    line-height: inherit;
}

.tapanel
{
    display: block;
    width: 99.8%;
    margin-top: 0.25em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    border: solid 1px #B1B3BF;
    border-radius: 0.37em;
}

.inpta
{
    width: 98.3%;
    padding: 0.2% 0.5% 0% 1%;
    border: 1px;
    overflow: auto;
    resize: none;
}

.inpta a
{
    color:#0016d8;
    text-decoration: none;
}

.tafull
{
    /* width: 100%; Adjust width as needed */
    /* overflow: hidden; Hidden scrollbars */
    resize: none; /* Prevent manual resizing */
}

.inpmsg, .lastinpmsg
{
    display: block;
    margin: 0.21em 0.5em 1em 0.4em;
    color: #777777;
    font-size: 0.8em;
    line-height: 1.35em;
}

.lastinpmsg
{
    margin-bottom: 0;
}

.getpass
{
    text-align: left; 
    font-family: Lucida Console; 
    font-size: 1em; 
    font-stretch: expanded; 
    letter-spacing: 1.5pt;
    text-decoration: underline; 
    cursor: pointer; 
    color: #1843b9;
}

.stackedlinks
{
    display: block;
    margin-top: 1.5em;
    margin-bottom: 2em;
}

.stackedlinks a
{
    display: block;
    margin-bottom: 0.75em;
}

.addtag
{
    width: 20pt;
    height: 20pt;
}





/***********************************************        M E D I A   Q U E R I E S        ************************************************/




@media screen and (max-width: 800px) 
{

    *
    {
        font-size: 0.916rem;
    }

    body
    {
        width: 97%;
        margin-left: 1.5%;
        margin-right: 1.5%;
    }

    .main
    {
        width: 98%;
        padding-left: 1%;
        padding-right: 1%;
    }
    
    .tagcol
    {
        width: 17%;
        padding-top: 2pt;
    }

    .titlecol
    {
        min-width: 8em;
    }

    .notecont
    {
        width: 96.7%;
        padding: 6pt 1.5%;
    }

    .inpta /* 800 */
    {
        width: 97.6%;
        padding: 0.2% 0.5% 0% 1.6%;
    }
}

@media screen and (max-width: 600px) 
{

    *
    {
        font-size: 0.875rem;
    }

    body
    {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }

    .cloudtag img
    {
        margin-top: 0;
    }

    .tagcol
    {
        width: 17%;
        padding-top: 2pt;
    }

    .titlecol
    {
        min-width: 6em;
    }

    .notecont
    {
        width: 95.7%;
        padding: 6pt 2%;
    }

    .inpta /* 600 */
    {
        width: 97.2%;
        padding: 0.2% 0.5% 0% 2%;
    }
}


@media screen and (max-width: 450px) 
{
    .actcol
    {
        flex: 1 0 25%;
        margin-top: -0.15em;
    }

    .tagstitlecol
    {
        flex: 1 1 80%;
    }

    .tagsactcol
    {
        flex: 1 1 20%;
    }
}