BODY
{
font-family:"Roboto Condensed",Arial,sans-serif;
font-size:17px;
font-size: clamp(17px,2.1vw,19px);
overflow-y:scroll;
overflow-x:hidden;
background:var(--background-alt);
scrollbar-gutter:stable;
}

FOOTER
{
padding-top:150px;
padding-left: 10px;
padding-bottom: 10px;
font-size: 12px;
}

/*
BODY::-webkit-scrollbar
{
all:unset;
}

BODY::-webkit-scrollbar-button
{
display:block;
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
height: auto;
width: initial;
background-position: center 5px;
background-size:9px 7px;
image-rendering: pixelated;
background-repeat:no-repeat;
}

BODY::-webkit-scrollbar-button:hover
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
}

BODY::-webkit-scrollbar-button:active
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
}

BODY::-webkit-scrollbar-button:vertical:start:increment,
BODY::-webkit-scrollbar-button:vertical:end:decrement
{
display:none;
}

BODY::-webkit-scrollbar-button:vertical:decrement
{
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='50,00 0,50 100,50'/></svg>");
}

BODY::-webkit-scrollbar-button:vertical:increment
{
background-position: center 6px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='0,0 100,0 50,50'/></svg>");
}

BODY::-webkit-scrollbar-thumb
{
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.3);
border-left:2px solid rgba(255,255,255,0.3);
border-right:2px solid rgba(255,255,255,0.3);
}

BODY::-webkit-scrollbar-thumb:hover
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
}

BODY::-webkit-scrollbar-thumb:active
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
}

BODY::-webkit-scrollbar-track
{
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
}
*/

IMG[src^="svg/"]
{
width:1.3em;
height:1.3em;
position:relative;
top:-2px;
pointer-events:none;
filter:invert(1);
}

IMG[src^="svg/"].invert
{
filter:invert(0);
}

A
{
color:var(--link-color);
}

A:focus,
A:hover
{
color:var(--link-focus-color);
}

A,A *
{
cursor:pointer;
}

A *
{
pointer-events:none;
}

H1
{
font-size:30px;
font-size:clamp(30px,2.3vw,33px);
}

H2
{
font-size:24px;
font-size:clamp(24px,2.2vw,29px);
}

H3
{
font-size:18px;
font-size:clamp(18px,2.1vw,23px);
}

H4
{
font-size:14px;
font-size:clamp(14px,2vw,19px);
}

H5
{
font-size:12px;
font-size:clamp(12px,1.9vw,17px);
}

H6
{
font-size:10px;
font-size:clamp(10px,1.9vw,15px);
}

MARK
{
background:yellow;
}

.no-gutter-container
{
padding-left:0;
padding-right:0;
}

.form-group LABEL
{
display:block;
}

.form-group LABEL SMALL
{
font-weight:normal;
display:block;
color:var(--minor-grey-text);
}

.form-control
{
border:1px solid var(--field-borders);
border-radius:3px;
-webkit-box-shadow:none !important;
box-shadow:inset 1px 2px 4px 2px rgba(0,0,0,0.05) !important;
font-size: 17px;
font-size: clamp(17px,1.7vw,19px);
height: 40px;
height: clamp(40px,2.3vw,46px);
}

.form-control:focus
{
border:1px solid var(--field-border-focus);
outline:0;
}

.form-control.err
{
border:1px solid var(--critical-color) !important;
border-right:4px solid var(--critical-color) !important;
}

#err
{
color:var(--critical-color);
font-size:12px;
}

.table-striped>tbody>tr:nth-of-type(odd)
{
background-color:var(--odd-rows);
}

.table-striped>tbody>tr:nth-of-type(even)
{
background-color:var(--even-rows);
}

.table-hover>tbody>tr:hover
{
background-color:var(--hover-rows);
}

.navbar-fixed-top
{
border-bottom:0;
height:54px;
margin-bottom:0;
}

.navbar-default
{
background-color:var(--navbar) !important;
}

.navbar-default .navbar-nav>li>a
{
color:var(--black) !important;
}

.navbar-brand>IMG
{
display:inline-block;
height:30px;
margin-top:-4px;
}

.navbar-right LI A.dropdown-toggle
{
font-size:17px;
font-size:clamp(17px,2.1vw,19px);
height:53px;
}

.navbar-default .navbar-nav>.open>a, 
.navbar-default .navbar-nav>.open>a:focus, 
.navbar-default .navbar-nav>.open>a:hover
{
background:transparent;
}

.navbar-nav>li>.dropdown-menu
{
background-color:var(--navbar);
}

.dropdown-menu>li>a:focus, 
.dropdown-menu>li>a:hover
{
background-color:var(--hover-rows);
}

.dropdown-menu
{
font-size:17px;
font-size:clamp(17px,2.1vw,19px);
}

HEADER
{
margin:0;
padding:0;
background-color:var(--header);
padding-left:10px;
width:100%;
padding-bottom:5px;
padding-top:5px;
color:var(--grey-dk4);
text-transform:uppercase;
font-size:19px;
font-size:clamp(19px,2.1vw,19px);
line-height:31px;
position:fixed;
top:49px;
z-index:999;
height:35px;
}

.btn
{
filter:brightness(1);
outline:0 none !important;
color:var(--white) !important;
border:1px solid rgba(0,0,0,0.1);
font-size:17px;
font-size: clamp(17px,1.1vw,19px);
}

.btn:focus,
.btn:hover
{
filter:brightness(1.05);
}

.btn:active
{
-webkit-box-shadow:none !important;
box-shadow:none !important;
filter:brightness(0.98) !important;
}

.btn-prime
{
background-color:var(--prime-button-color);
}

.btn-second
{
background:var(--second-button-color) !important;
color:var(--grey-dk3) !important;
}

.btn-critical
{
background:var(--critical-button-color);
}

.bg-critical
{
background:var(--critical-color);
}

#main
{
margin-top:60px;
}

#main.with-header
{
margin-top:98px;
}

.loginpages .navbar-right
{
display:none;
}

.loginpages FORM
{
background-color:var(--login-forms);
padding:20px;
border-radius:5px;
}

.whitepage
{
background:var(--white);
}

#file-upload
{
margin-bottom:30px;
}

#file-upload INPUT[type="file"]
{
display:none;
}

#attachments .attachment
{
width:100%;
padding-top:5px;
padding-bottom:1px;
border-radius:5px;
padding-left:2px;
margin-top:5px;
font-size:15px;
font-size:clamp(15px,1.75vw,19px);
}

#attachments .attachment:nth-child(odd){
background:var(--odd-rows);
}

#attachments .attachment:nth-child(even){
background:var(--even-rows);
}

#attachments .attachment BUTTON
{
background:transparent;
border:1px solid transparent;
outline:none;
padding:3px;
border-radius:3px;
position:relative;
top:-2px;
}

#attachments .attachment BUTTON:hover,
#attachments .attachment BUTTON:focus
{
background-color:var(--grey-lt3);
border:1px solid rgba(0,0,0,0.2);
}

#attachments .attachment BUTTON:active
{
background-color:var(--grey-mid4);
}

#attachments .attachment BUTTON.btn-delete:hover,
#attachments .attachment BUTTON.btn-delete:focus
{
background-color:var(--critical-button-color);
border:1px solid rgba(0,0,0,0.2);
filter:brightness(1);
}

#attachments .attachment BUTTON.btn-delete:hover IMG,
#attachments .attachment BUTTON.btn-delete:focus IMG
{
filter:invert(1);
}

#attachments .attachment BUTTON.btn-delete:active
{
filter:brightness(0.9);
}

#attachments .attachment BUTTON IMG
{
height:15px;
filter: invert(0);
}

@keyframes repeatRight 
{
0% { background-position-x: 0%; }
100% { background-position-x: 100%; }
}

#set.hidden
{
display:none;
}

#set::before
{
content:' ';
display:block;
width:200vw;
height:2em;
background:red url(../img/set.gif) center center repeat-x;
transform:rotate(-45deg);
position:absolute;
top:50vh;
left:-50vw;
z-index:9999;
animation: repeatRight 40s linear infinite;
background-size: auto 18px;
}

#set::after
{
content:' ';
display:block;
width:200vw;
height:2em;
background:red url(../img/set.gif) center center repeat-x;
transform:rotate(45deg);
position:absolute;
top:50vh;
left:-50vw;
z-index:9999;
animation: repeatRight 40s linear infinite;
background-size: auto 18px;
}

#pg-login #main,
#pg-forgot #main,
#pg-reset #main
{
min-height:1120px;
}

#pg-search .whitepage
{
padding:10px;
border-radius:5px;
min-height:1120px;
}

#pg-search #clear
{
display: inline-block;
position: absolute;
right: 20px;
z-index: 3;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
visibility:hidden;
filter:contrast(0.5);
}

#pg-search #clear:hover,
#pg-search #clear:focus
{
filter:contrast(1);
}

#pg-search #clear:active
{
filter:contrast(0.5);
}

#pg-search.usermode #clear
{
display:none !important;
visibility:hidden !important;
}

#pg-search #btn-user-add
{
display:none;
}

#pg-search.usermode .leftcol
{
visibility:hidden;
}

#pg-search.usermode #btn-add
{
display:none;
}

#pg-search.usermode #btn-user-add
{
display:inline-block;
}

#pg-search.usermode .user-btn-edit
{
border:1px solid rgba(0,0,0,0.2);
background:var(--white);
border-radius:4px;
width:24px;
height:24px;
line-height:24px;
vertical-align:top;
text-align:center;
padding:0;
overflow:hidden;
position:relative;
}

#pg-search.usermode .user-btn-edit:hover, 
#pg-search.usermode .user-btn-edit:focus {
border:1px solid var(--grey-mid7);
}

#pg-search.usermode .user-btn-edit IMG {
pointer-events:none;
width:17px !important;
height:17px !important;
opacity:1 !important;
filter:none !important;
position:absolute;
top:2px;
left:2px;
}

#pg-search.usermode .user-id-row 
{
line-height:24px;
font-weight:normal;
}

#pg-search.usermode .user-id-row .user-fullname
{
font-weight:700;
width:19%;
display:inline-block;
}

#pg-search.usermode .user-id-row .user-username 
{
width:16%;
display:inline-block;
}

#pg-search.usermode .user-id-row .user-email 
{
width:30%;
display:inline-block;
}

#pg-search.usermode .user-id-row .user-role 
{
width:12%;
display:inline-block;
}

#pg-search.usermode .user-id-row .user-created 
{
width:20%;
display:inline-block;
text-align:right;
}

#pg-search #search
{
border-top-right-radius:4px;
border-bottom-right-radius:4px;
}

#pg-search #articles
{
font-size:14px;
font-size:clamp(14px,1vw,19px);
}

#pg-search #articles TR
{
cursor:pointer;
}

#pg-search #articles TR,
#pg-search #articles TD
{
border:0;
}

#pg-search #articles TBODY TD:nth-child(1)
{
text-align:right;
font-weight:700;
font-family:Hack,Menlo,Monaco,Consolas,"Courier New",monospace;
font-size:18px;
padding-top:4px;
vertical-align: top;
position: relative;
}

#pg-search #articles TBODY TD:nth-child(1) IMG
{
opacity:0.7;
height:25px;
filter:grayscale(1);
}

#pg-search #articles TBODY TD:nth-child(2)
{
font-weight:700;
padding-bottom: 6px;
padding-right: 7px;
}

#pg-search #articles .title
{
margin-top:-3px;
}

#pg-search .table-hover>tbody>tr:hover .title
{
text-decoration:underline;
}

#pg-search #articles TBODY TD:nth-child(2) .title
{
font-size:19px;
}

#pg-search #articles TBODY TD:nth-child(2) .creator
{
font-size:17px;
font-size: clamp(17px,1.5vw,19px);
font-weight:normal;
color:var(--minor-text);
}

#pg-search #articles TBODY TD:nth-child(2) .tags
{
font-weight:normal;
float:right;
text-align:right;
}

#pg-search #articles TBODY TD:nth-child(2) .tags I
{
font-style:normal;
font-weight:normal;
padding:1px 4px;
border-radius:5px;
border:1px solid rgb(118 118 118 / 60%);
background:var(--tag);
white-space:nowrap;
}

#pg-article .hootdown-toolbar
{
display:none;
}

#pg-article #article
{
display:none;
}

#pg-article #article-items
{
min-height:800px;
}

#pg-article .articleblock #title
{
font-weight:700;
font-size:22px;
margin-bottom:20px;
}

#pg-article .articleblock #title TT
{
margin-right:30px;
font-size:24px;
color:var(--minor-text);
}

#preview PRE
{
background-color:var(--code-blocks);
color:var(--black);
}

#preview CODE
{
background-color:var(--code-blocks);
color:var(--black);
}

#pg-article #preview
{
border:0;
border-radius:0;
padding:0;
min-height:50vh;
font-size:17px;
font-size: clamp(17px,2.1vw,19px);
}

#pg-article .buttons
{
font-size:15px;
font-size:clamp(15px,1.9vw,19px);
}

#pg-article .buttons:first-child
{
margin-top:-2px;
margin-right:-10px;
}

#pg-article .buttons A
{
text-decoration:none !important;
margin-left:20px;
border-bottom:1px solid transparent;
}

#pg-article .buttons A:hover,
#pg-article .buttons A:focus
{
border-bottom:1px solid var(--sub-menu-link-hover);
}


#pg-article .buttons IMG
{
height:16px;
width:16px;
}

#pg-article .buttons A:hover IMG
{
filter:invert(1);
}

#pg-article #author
{
background:var(--grey-lt3);
margin-bottom:2px;
margin-top:15px;
font-size:17px;
font-size: clamp(17px,1.9vw,19px);
border-radius:4px;
padding:2px;
padding-left:3px;
padding-right:3px;
}

#pg-article #author SPAN
{
margin-right:20px;
}

#pg-article .articleblock #tags
{
margin-bottom:20px;
border:1px solid var(--default-borders);
padding:6px;
border-radius:4px;
padding-left:3px;
padding-right:3px;
overflow-wrap:anywhere;
}

#pg-article .articleblock #tags B
{
display:inline-block;
}

#pg-article .articleblock #tags .tag
{
padding:1px 9px;
border-radius:2px;
border:1px solid rgb(118 118 118 / 60%);
background:var(--tag);
margin-right:3px;
white-space:nowrap;
}

#pg-article-add #article-form LABEL SMALL,
#pg-article-edit #article-form LABEL SMALL
{
display:inline-block;
}

#pg-article-add #preview,
#pg-article-edit #preview
{
max-height: 1000px;
overflow-y: auto;
}

#pg-article HR,
#pg-article-edit HR
{
border-color:#AAA;
}