@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);
        }

        *
        {
            font-family: Segoe UI, Arial;
            /*font-family: RUBIK;*/
            font-size: 12pt;
            color: rgb(3, 23, 93);
        }

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

        div
        {
            display: inline-block;
        }
       
        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; }
        .mltext { line-height: 17pt; }
        .nor { font-weight: 400; }
        .bolder { font-weight: 500; }
        .ml0 { margin-left: 0pt; }
        .pl1 { padding-left: 0.5em; }
        .pl2 { padding-left: 0.75em; }
        .pl3 { padding-left: 1em; }

        .header
        {
            display: flex;
            min-height: 40pt;
        }

        .header div
        {
            vertical-align: top;
        }

        .logobox
        {
            margin: 1pt 16pt 0pt 1pt;
        }

        .logo img
        {
            width: 70pt;
        }

        #links
        {
            margin: 6pt 0pt 0pt 0pt;
        }

        #links a
        {
            margin-right: 12pt;
        }

        #links img
        {
            width: 20pt;
            height: 20pt;
        }

        #auth
        {
            margin-left: 6pt;
        }

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

        .logname
        {
            /*font-family: Segoe UI Semibold;*/
            font-weight: 500;
            margin: 0pt 5pt 0pt 4pt;
        }

        #datetimepanel
        {
            margin-top: 0pt;
        }

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

        .main
        {
            width: 99%;
            min-height: 500pt;
            padding-top: 24pt;
            padding-left: 0.5%;
            padding-right: 0.5%;
        }

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

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

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

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

        #advancedsearchpanel
        {
            margin-bottom: 24pt;
        }

        #tagcloud, #tagcloudsearch
        {
            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: 250pt;
            float: right;
            margin-top: -0.75pt;
            margin-right: 3pt;
            padding: 0pt;
            font-size: 1em;
            text-indent: 4.5pt;
        }

        .notsel
        {
            font-size: 11pt;
            color: #9ec3e8;
        }

        #msg
        {
            display: block;
            width: 255pt;
            margin-top: 13pt;
            margin-bottom: 16pt;
            margin-right: auto;
            margin-left: auto;
            padding: 12pt;
            border: solid 1px Navy;
            background-image: linear-gradient(90deg, rgb(234, 243, 250), rgb(255, 255, 255));
        }

        .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: 3pt;
        }

        .actlinkbottom
        {
            font-size: 0.9em;
            cursor: pointer;
            margin-left: 3pt;
            margin-top: 6pt;
        }



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


        .discover
        {
            background: url('/media/discover.bg.png');
            background-size: cover;
            border-radius: 8pt;
            margin-bottom: 24pt;
            font-family: Verdana;
            font-size: 36pt; 
            font-weight: 200; 
            letter-spacing: 0.3pt; 
            text-align: center;
            color: rgb(244, 243, 248);
            margin-bottom: 30pt;
            padding: 16pt;
        }

        .with
        {
            font-family: BELLEZA; /* Segoe UI Light; */
            width: 90%;
            font-size: 22pt;
            font-style: italic;
            letter-spacing: 0.3pt; 
            text-align: center;
            margin-bottom: 26pt;
        }

        .benefits
        {
            margin-top: 12pt;
            margin-bottom: 36pt;
        }

        .benefits li
        {
            margin-bottom: 6pt;
            font-family: Segoe UI;
            font-size: 13pt;
            letter-spacing: 0.6pt; 
        }

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


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


        .infotitle
        {
            width: 97%;
            margin-top: 24pt;
            margin-bottom: 20pt;
            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;
            line-height: 20pt;
        }

        .infolist
        {
            margin-bottom: 16pt;
        }

        .infolist li
        {
            margin-bottom: 3pt;
            font-family: Segoe UI;
            letter-spacing: 0.6pt; 
        }

        .pd  /* paragraph divider */
        {
            display: block;
            height: 16pt;
        }

        .rowlink
        {
            display: block;
            font-family: Verdana;
            font-size: .92em;
            text-decoration: none;
            color: rgb(27, 103, 216);
            margin-bottom: 6pt;
        }

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

        .infoicon
        {
            width: 12pt;

        }


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


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

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

        .gridrow
        {
            display: block;
            padding-top: 11pt;
            padding-bottom: 5pt;
        }

        .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: 25pt;
        }

        .sortlink
        {
            float: right;
            margin-left: 8pt;
        }

        .col
        {
            vertical-align: top;
        }

        .titlecol
        {
            width: 18.7%;
            max-width: 18.7%;
            padding-left: 10pt;
            padding-top: 0.7pt;
            font-family: RUBIK;
            line-height: 17pt;
        }

        .titlelink
        {
            color: inherit;
        }


        .tagstitlecol
        {
            width: 85%;
            max-width: 86%;
            padding-left: 1.5%;
        }

        .contcol
        {
            width: 66%;
            padding-left: 1%;
            border-width: 0;
            overflow: hidden;
            font-weight: 300;
            line-height: 17pt;
            letter-spacing: 0.5pt;
        }

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

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

        .actcol
        {
            width: 12%;
        }

        .actcol a
        {
            margin-left: 4pt;
        }
        
        .rowactlink
        {
            width: 16pt;
        }
        
        .rowactlink2
        {
            width: 14pt;
            padding-top: 1pt;
            padding-left: 3pt;
            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: 24pt;
            margin-bottom: 36pt;
            text-align: center;
        }

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

        .pagetitlelabel
        {
            width: 50%;
            text-align: center;
        }

        .pagetitleact
        {
            width: 25%;
            height: 27pt;
        }

        .rightact
        {
            float: right;
            padding-top: 12pt;
            padding-right: 12pt;
        }

        .cbpanel
        {
            margin-top: 1em;
        }

        .cbinp
        {
            vertical-align: top;
            width: 18pt;   
            height: 30pt;
            margin-left: 0pt;
            padding-top: 1pt;
        }

        .cbinpm
        {
            vertical-align: top;
            width: 18pt;   
            height: 30pt;
            margin-left: 12pt;
            padding-top: 1pt;
        }

        .cblabel
        {
            vertical-align: top;
            font-weight: 400;
            margin-left: 4pt;
            margin-right: 12pt;
        }

        .butdivider
        {
            display: block;
            height: 36pt;
        }

        .but
        {
            min-width: 120pt;
            margin-right: 9pt;
            margin-bottom: 9pt;
            padding: 0pt 12.5pt 2.5pt; 
            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 navy;
            cursor: pointer;
        }

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

        .inptext
        {
            width: 272.4pt;
            /*height: 1.5em;*/
            margin-top: 3pt;
            padding: 3.8pt 0pt 5.2pt 4pt;
            font-size: 1.1em;
            text-indent: 4.5pt;
            border-width: 1px;
        }

        .ddl
        {
            width: 100%;
            max-width: 279pt;
            margin-top: 3pt;
            padding: 3pt 3pt 4pt 2pt;
            font-size: 1.1em;
            text-indent: 2.5pt;
        }

        .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;
            width: 100%;
            height: 28pt;
            margin-bottom: 5pt;
        }

        .notetitle
        {
            vertical-align: top;
            margin-top: 0pt;
            margin-left: 8pt;
            font-size: 18pt;
            font-family: Segoe UI Semibold;
        }

        .notecont
        {
            width: 97.7%;
            padding: 6pt 1%;
            border: solid 1px #cdd6e9;
            color: inherit;
            font-weight: 300;
            resize: none;
            overflow: auto;
            line-height: 17pt;
        }

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

        .tag
        {
            min-width: 41pt;
            vertical-align: top;
            padding: 0.75pt 3pt 2.25pt 3pt;
            font-size: 10pt;
            font-family: Segoe UI Semibold, Arial;
            text-align: center;
            color: navy;
            background-color: #ffb95f;
            border: 1px solid #817159;
        }

        .notetag
        {
            height: 15pt;
            margin: 6pt 0pt 0pt 12pt;
        }

        .notetag img
        {
            width: 10pt;
            height: 10pt;
            margin-top: 2pt;
            margin-right: 6pt;
        }

        .notetaglabel
        {
            display: inline-block;
            vertical-align: top;
            padding-top: 0.1pt;
            font-family: verdana, Arial;
            font-size: 11pt;
            color: rgb(113, 112, 107);
        }

        .cloudtag
        {
            height: 13pt;
            margin: 0pt 9pt 6pt 0pt;
        }

        .cloudtag img
        {
            width: 7pt;
            height: 13pt;
            vertical-align: top;
            margin-right: 4pt;
        }

        .taglabel
        {
            vertical-align: top;
            margin-top: 0pt;
            font-family: Verdana, Arial;
            font-size: 10.5pt;
            color: rgb(113, 112, 107);
            line-height: normal;
        }

        .tapanel
        {
            display: block;
            width: 99.8%;
            margin-top: 3pt;
            padding-top: 3pt;
            padding-bottom: 3pt;
            border: solid 1px #777777;
        }
        
        .inpta
        {
            display: inline-block;
            width: 98.3%;
            padding: 0.2% 0.5% 0% 1%;
            border: 1px;
            overflow: auto;
            resize: none;
        }

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

        .inpmsg, .lastinpmsg
        {
            display: block;
            margin: 6pt 6pt 12pt 0.4em;
            color: #777777;
            font-size: 0.8em;
        }

        .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: 18pt;
            margin-bottom: 18pt;
        }

        .stackedlinks a
        {
            display: block;
            margin-bottom: 7pt;
        }

        .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: 11pt;
            }

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

            .main
            {
                width: 98%;
                padding-left: 1%;
                padding-right: 1%;
            }

            .discover
            {
                font-size: 30pt;
            }

            .with
            {
                font-size: 18pt;
            }

            .benefits li
            {
                font-size: 12pt;
            }

            .sort
            {
                height: 20pt;
            }
    
            .gridview
            {
                font-size: 13pt;
            }

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

            .titlecol
            {
                width: 24%;
                max-width: 24%;
            }

            .tagstitlecol
            {
                width: 81%;
                max-width: 81%;
                padding-left: 10pt;
            }

            .contcol
            {
                width: 55%;
            }

            .actcol
            {
                width: 17%;
            }

            .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: 10pt;
            }

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

            .discover
            {
                font-size: 24pt;
            }

            .with
            {
                font-size: 16pt;
            }

            .benefits li
            {
                font-size: 11pt;
            }

            .sort
            {
                height: 20pt;
            }

            .gridview
            {
                font-size: 12pt;
            }

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

            .titlecol
            {
                width: 24%;
                max-width: 24%;
                padding-top: 0.7pt;
                font-size: 10pt;
            }

            .tagstitlecol
            {
                width: 76%;
                max-width: 76%;
                padding-left: 10pt;
            }

            .contcol
            {
                width: 49%;
            }

            .actcol
            {
                width: 23%;
            }

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

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

            .but
            {
                min-width: 90pt;
            }
        }

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

            *
            {
                font-size: 10pt;
            }

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

            .gridview
            {
                font-size: 12pt;
            }

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

            .titlecol
            {
                width: 20%;
                max-width: 20%;
                padding-top: 1pt;
                font-size: 10pt;
            }

            .tagstitlecol
            {
                width: 76%;
                max-width: 76%;
                padding-left: 10pt;
            }

            .contcol
            {
                width: 40%;
            }

            .actcol
            {
                width: 40%;
            }

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

            .inpta /* 400 */
            {
                width: 96.7%;
                padding: 0.2% 0.5% 0% 2.4%;
            }

            .but
            {
                min-width: 70pt;
            }
        }