html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* {
   margin: 0px;
   padding: 0px;
   border: 0px;   
   list-style-type: none;
   text-decoration: none;
}

BODY {
   background: #3b3735;
   color: #999999;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: 400;
}


/*----------------------------
 This is the primary container
 that everything else is 
 nested in
------------------------------*/
DIV.maincontainer {
   width: 1000px;
   background-color: #ececec;
   margin: 0px auto;
   border-radius: 0px;
   padding: 0px;
   position: relative;
   box-shadow: 0px 50px 70px rgba(0, 0, 0, 0.4),
               0px 10px 10px rgba(0, 0, 0, 0.3);
   border-bottom: 2px solid #333;
   border-top: none;
   border-left: 2px solid #555;
   border-right: 2px solid #000;
}

DIV.maincontainer::after {
   content:"";   
   background-color: inherit;
   width:inherit;
   padding: 0px;
   margin: 0px 0px -8px 0px;
   border-radius: 0px;
   background: linear-gradient(to bottom, rgba(236,236,236,0.0),white);
   height:60px;
   position: absolute;
   bottom:-60px;
   transform: scaleY(-1);
   opacity: 0.4;
   border-bottom: 2px solid #333;
   border-left: 2px solid #555;
   border-right: 2px solid #000;
   border-top: none;
   left: -2px;
}



/*----------------------------
       Header styles
------------------------------*/
HEADER {
   height: 83px;
   position: relative;
   background: #7284ab;
}

#site_title {
   position: absolute;
   white-space: nowrap;
   left: 18px;
   top: 19px;
   display: block;
}

HEADER H1 {
    color: #f5f5f5;
    font-size: 16px;
    font-variant: all-small-caps;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 6px;
    font-weight: 800;
    margin: 0px;
    line-height: 19px;
     border-radius: opx;
    padding: 0px 9px 4px;
    text-align: center;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    border-left: none;
    border-right: none;
}

HEADER H2 {
   position: absolute;
   right: -5px;
   bottom: -15px;
   color: white;
   font-weight: 200;
   font-variant: all-small-caps;
   text-shadow: 1px 1px 0px rgb(0 0 0);
   font-size: 15px;
   letter-spacing: -0.2px;
   font-family: Arial, Helvetica, sans-serif;
}



HEADER > NAV {
   position: absolute;
   right: 9px;
   bottom: 4px;
}
HEADER > NAV UL LI {
   display: inline;
   border-left: 1px solid #efefef;
}
HEADER > NAV UL LI:first-child {
   border-left: none;
} 
HEADER > NAV UL LI A:link,
HEADER > NAV UL LI A:visited,
HEADER > NAV UL LI A:active {
   display: inline-block;
   color: #efefef;
   font-weight: 100;
   font-family: Arial, Helvetica, sans-serif;
   font-variant: all-small-caps;
   letter-spacing: 0.5px;
   font-size: 14px;
   text-decoration: none;
   padding: 6px 10px;
   display: inline-block;
}
HEADER > NAV UL LI A:hover {
   text-decoration: underline;
}



HEADER INPUT{
   border-radius: 4px;
}

HEADER LABEL {
   color: #fff;
   text-shadow: 1px 1px 0 #000;
} 

HEADER INPUT[type=submit] {
   min-width: initial;
   border-color: #444;
   background-color: #c7c7c7;
   color: #444;
}

HEADER A.freelink {
   color: #f17f7f;
   text-shadow: 1px 1px 0 #000;
}

#header_loginform {
    position: absolute;
    top: 10px;
    right: 10px;
}

#header_loginform > DIV:nth-of-type(1) {
   top: 0px;
   right: 170px;
}
#header_loginform > DIV:nth-of-type(1) INPUT,
#header_loginform > DIV:nth-of-type(2) INPUT
{
   width: 95px;
}

#header_loginform > DIV:nth-of-type(2) {
   top: 0px;
   right: 60px;
}

#header_loginform > DIV:nth-of-type(3) {
   top: 13px;
   right: 9px;
}

#header_loginform > DIV:nth-of-type(3) INPUT {
   width: 39px;
}

#profile_widget {
   display: inline;
   position: absolute;
   top: 12px;
   right: 88px
}

#update_user_button,
#profile_button {
   position: absolute;
   border-radius: 20px;
   display: block;
   width: 40px;
   height: 40px;
   text-align: center;
   vertical-align: middle;
   font-size: 20px;
   line-height: 40px;
   font-weight: 100;
   color: #fff;
   text-shadow: 1px 1px 0 rgb(0 0 0 / 40%);
   background: rgb(43 185 48);
   font-family: Arial, Helvetica, sans-serif;
}

#profile_button {
   z-index: 101;
   cursor: pointer;
}

.update_user_button_inline {
   position: relative;
   border-radius: 9px;
   display: inline-block;
   width: 18px;
   height: 18px;
   text-align: center;
   vertical-align: middle;
   font-size: 9px;
   line-height: 18px;
   font-weight: 100;
   color: #fff;
   text-shadow: 0.5px 0.5px 0 rgb(0 0 0 / 40%);
   background: rgb(43 185 48);
   cursor: pointer;
   font-family: Arial, Helvetica, sans-serif;
   margin-right: 4px;
   top: -1px;
}

#profile_button:after {
   position: absolute;
   content: "";
   border: solid white;
   border-width: 0 3px 3px 0;
   display: inline-block;
   padding: 3px;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   top: 17px;
   right: -17px;
   cursor: pointer;
   z-index: 101;
}

#profile_menu {
   display: none;
   position: absolute;
   right: -66px;
   top: -6px;
   min-width: 150px;
   background-color: #e1e1e1;
   box-shadow: 7px 6px 1px rgb(0, 0, 0, 0.4);
   z-index: 100;
}

#profile_menu.show {
   display: block;
}

#profile_menu.hide {
   display: none;
}

#profile_menu > DIV:nth-of-type(1) {
   color: white;
   font-size: 17px;
   padding: 18px 81px 19px 10px; 
   background: #7a7a7a;
}
}

#profile_menu > NAV {
   position: relative;
}
#profile_menu > NAV UL LI {
   display: block;
}
#profile_menu > NAV UL LI A:link,
#profile_menu > NAV UL LI A:visited,
#profile_menu > NAV UL LI A:active {
   display: block;
   color: #5a5a5a;
   font-weight: 100;
   font-family: Arial, Helvetica, sans-serif;
   font-variant: all-small-caps;
   letter-spacing: 0.5px;
   font-size: 14px;
   text-decoration: none;
   padding: 8px 10px;
   font-family: Arial, Helvetica, sans-serif;
}
#profile_menu > NAV UL LI A:hover {
   background-color: #7284ab;
   color: white;
}


/*----------------------------
 content between the header 
 and footer
------------------------------*/
MAIN {
   background-color: transparent;
   padding: 28px 45px 13px;    
   margin: 10px;
   border-bottom: 1px solid #ddd;
   border-top: 1px solid #ddd;
   position: relative;
}



/*----------------------------
     footer styles
------------------------------*/
FOOTER {
   padding: 10px 14px 17px 14px;
   color: #848cb5;;
   font-family: Verdana, Helvetica, Arial, sans-serif;
   font-size: 9px;
   text-align: center;
}



/*----------------------------
     general content
------------------------------*/
TABLE {
   background-color: transparent;
   margin: 0px;
}

TABLE > THEAD > TR > TH {
   background-color: #7284ab;
   padding: 7px 20px;
   color: white;
   font-size: 11px;
   font-weight: 100;
   margin-left: 16px;
   font-family: Arial, Helvetica, sans-serif;
   font-variant: all-small-caps;
   letter-spacing: 1.5px;
   vertical-align: middle;
}

TABLE > TBODY > TR > TD {
   background-color: #f3f3f3;
   padding: 6px 20px;
   color: #727272;
   vertical-align: middle;
}

TABLE > TBODY > TR:hover > TD {
   background-color: #e1e7f5;
   padding: 6px 20px;
}

/* for pagination, must set colspan to 100% */
TABLE > TFOOT > TR > TD:nth-of-type(1) {
   background-color: transparent;
   padding: 18px 3px 0px;
   color: #727272;
   text-align: right;
   font-size: 11px;
   font-weight: 100;
   letter-spacing: 0px;
   font-variant: all-small-caps;
}

DIV.table_title {
   font-size: 15px;
   font-weight: 100;
   font-family: Arial, Helvetica, sans-serif;
   font-variant: all-small-caps;
   letter-spacing: 5px;
   color: #727272;
   position: relative;
   padding: 12px;
   text-align: center;
   background-color: #e1e1e1;
   margin: 0px 0px 0px 0px;
}


INPUT,
TEXTAREA {
   padding: 3px;
   border: 1px #b5b5b5 solid;
   color: #55aa55;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
}



INPUT[type='text'],
INPUT[type='password'],
INPUT[type='date'],
INPUT[type='datetime-local'],
INPUT[type='email'],
INPUT[type='number'],
INPUT[type='month'],
INPUT[type='search'],
INPUT[type='tel'],
INPUT[type='time'],
INPUT[type='url'],
INPUT[type='week'] {
   height: 15px;
}

LABEL {
   margin: 0px 0px 2px 5px;
   display: block;
   text-align: left;
   font-variant: all-small-caps;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #666;
   font-weight: 400;
   letter-spacing: 1px;
} 

FORM {
   position: relative;
   width: 100%;
   height: 100%;
}

FORM > FIELDSET {
   position: relative;
   display: inline-block;
   width: 100%;
   height: 100%;
   border-radius: 0px;
   background-color: #e1e1e1;
}

FORM > FIELDSET > LEGEND {
   font-size: 15px;
   font-weight: 100;
   font-family: Arial, Helvetica, sans-serif;
   font-variant: all-small-caps;
   letter-spacing: 3px;
   color: #727272;
   position: absolute;
   top: 12px;
   left: 16px;
}


FORM > DIV,
FORM > DIV > DIV,
FORM > FIELDSET > DIV,
FORM > FIELDSET > DIV > DIV {
   position: absolute;
}


A:link,
A:visited,
A:hover,
A:active {
   color: #3e5ae1;
}
A:hover {
   text-decoration: underline;
}

INPUT[type=submit]{
   background-color: #7284ab;
   border-radius: 0px;
   border: 0px;
   box-sizing: border-box;
   color: white;
   cursor: pointer;
   display: inline-block;
   font-family: -apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;
   font-size: 13px;
   font-weight: 400;
   line-height: 1.15385;
   margin: 0;
   outline: none;
   padding: 3px 0.8em;
   text-align: center;
   text-decoration: none;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
   vertical-align: baseline;
   white-space: nowrap;
   min-width: 67px;
   position: relative;
}

#message_die {
   text-align: center;
   font-size: 14px;
   width: 485px;
   margin: 0 auto;
   padding-bottom: 23px;
}



#lateral_select_box {
   font-size: 0px;
   display: inline-block;
}



#lateral_select_box > A:link,
#lateral_select_box > A:visited,
#lateral_select_box > A:active {
    display: inline-block;
    width: 61px;
    text-align: center;
    padding: 3px 0px;
    background-color: #f5f5f5;
    margin: 0; 
    color: #6e6e6e;
    font-variant: all-small-caps;
    text-decoration: none;
    font-size: 10px;
}

#lateral_select_box > A:hover,
#lateral_select_box > SPAN {
    display: inline-block;
    width: 61px;
    text-align: center;
    padding: 3px 0px;
    margin: 0;
    color: #ffffff;
    font-variant: all-small-caps;
    text-decoration: none;
    font-size: 10px;
}

#lateral_select_box A:hover {
    background-color: #bbbbbb;
}

#lateral_select_box SPAN {
    background-color: #707070;
}




.display_box {
   background-color: #e1e1e1;
}

.display_box H3 {
   font-size: 15px;
   font-weight: 100;
   font-family: Arial, Helvetica, sans-serif;
   font-variant: all-small-caps;
   letter-spacing: 5px;
   color: #727272;
   position: absolute;
   text-align: center;
   background-color: #e1e1e1;
   margin: 0px 0px 0px;
   display: block;
   top: 12px;
   left: 16px;
}

.display_box H4 {
   margin: 0px 0px 5px 5px;
   display: block;
   text-align: left;
   font-variant: all-small-caps;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #666;
   font-weight: 400;
   letter-spacing: 1px;
}


.freelink {
   display: block;
   text-align: left;
   font-variant: all-small-caps;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #3E5AE0;
   font-weight: 400;
   letter-spacing: 0.3px;
   white-space: nowrap;
} 


.fixed_content {
   position:relative;
}

A + DIV.fieldtip,
P + DIV.fieldtip,
SPAN + DIV.fieldtip,
DIV + DIV.fieldtip,
IMG + DIV.fieldtip,
INPUT + DIV.fieldtip {
   position: absolute;
   left: 10px;
   top: calc(100% + 20px);
   box-shadow: 5px 5px 0px rgb(0 0 0 / 24%);
   background: none;
   width: calc(100% - 20px);
   z-index: 10;
   opacity: 0;
   transition: all 300ms cubic-bezier(.35,1.7,.91,.79);
   transform: scale(0);
   writing-mode: initial;
   text-orientation: initial;
   color: #999999;
}

/* FIELD TIPS: the little yellow
   popup that shows under element
   when you hover   */
A:focus + DIV.fieldtip,
A:hover + DIV.fieldtip,
P:focus + DIV.fieldtip,
P:hover + DIV.fieldtip,
SPAN:focus + DIV.fieldtip,
SPAN:hover + DIV.fieldtip,
DIV:focus + DIV.fieldtip,
DIV:hover + DIV.fieldtip,
IMG:focus + DIV.fieldtip,
IMG:hover + DIV.fieldtip,
INPUT:focus + DIV.fieldtip,
INPUT:hover + DIV.fieldtip {
   transform: scale(1);
   opacity: 1;
}

A + DIV.fieldtip:after,
P + DIV.fieldtip:after,
SPAN + DIV.fieldtip:after,
DIV + DIV.fieldtip:after,
IMG + DIV.fieldtip:after,
INPUT + DIV.fieldtip:after {
   content: "";
   width: 20px;
   height: 20px;
   transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   background: #fcffdf;
   position: absolute;
   box-shadow: 5px 7px 0px rgb(0 0 0 / 24%);
   z-index: -1;
   top: -10px;
   left: calc(50% - 10px);
}

DIV.fieldtip DIV {
   padding: 12px 19px;
   background: #fcffdf;
}


/* DISABLED ELEMENTS */
.disabled {
   -webkit-filter: grayscale(1);
   /*pointer-events: none; */
   opacity: 0.5;
}  
/* suspend the mouse events on click on click only */
.disabled:active {
   -webkit-filter: grayscale(1);
   pointer-events: none;
   opacity: 0.5;
}
/* this allows mouse events, like hover over the .disabled element
   but not over any of the descendants. This allows the .disabled
   element to have a tooltip/hover popup, but not allow any click
   or hover events on the contained elements */
DIV.disabled * {
   cursor: default;
   pointer-events: none;
}

.banned
{
   background-color: #b76b6b;
   color: #ffffff;
   border: 1px solid #ffffff;
   outline: 1px solid #b76b6b;
}

/* the little tag for user level/rank */
.banned,
.user_level,
.user_level_,
.user_level_user,
.user_level_admin,
.user_level_superuser,
.user_level_programmer {
   background-color: white;
   padding: 0px 3px 1px;
   color: #7284ab;
   font-size: 10px;
   font-variant: all-small-caps;
   letter-spacing: 1px;
   border: 1px solid #7284ab;
   vertical-align: middle;
   display: inline-block;
}

.banned
{
   background-color: #b76b6b;
   color: #ffffff;
   border: 1px solid #ffffff;
   outline: 1px solid #b76b6b;
}

.user_level_user {
   background-color: white;
   color: #7284ab;
   border-color: #7284ab;
   outline: 1px solid white;
}

.user_level_admin {
   background-color: #86b977;
   color: white;
   border-color: white;
   outline: 1px solid #86b977;
}

.user_level_superuser {
   background-color: #9aa3d1;
   color: white;
   border-color: white;
   outline: 1px solid #9aa3d1;
}

.user_level_programmer {
   background-color: #b76969;
   color: white;
   border-color: white;
   outline: 1px solid #b76969;
}

/* the icon of the padlock */
DIV.padlock_icon_locked,
DIV.padlock_icon_unlocked,
DIV.padlock_icon_large_locked,
DIV.padlock_icon_large_unlocked {
   display: inline-block;
}
DIV.padlock_icon_locked,
DIV.padlock_icon_unlocked {
   height: 19px;
   width: 19px;
}
DIV.padlock_icon_large_locked,
DIV.padlock_icon_large_unlocked {
   height: 40px;
   width: 40px;
}
DIV.padlock_icon_large_locked,
DIV.padlock_icon_locked {
   background-image: url(../images/locked.svg);

   
}
DIV.padlock_icon_large_unlocked,
DIV.padlock_icon_unlocked {
   background-image: url(../images/unlocked.svg);
}

MAIN H1 {
   text-align: center;
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 40px;
   margin-top: 44px;
   font-family: Arial, Helvetica, sans-serif;
   font-variant: all-small-caps;
   letter-spacing: 4px;
   color: #7284ab;
   text-shadow: 2px 2px 0px rgb(0 0 0 / 11%);
}


/*----------------------------
 These are the style overides
 for the simplified popup
 display, which has a popup
 id set on its main container
------------------------------*/
#popup {
   width: 595px;
   margin: 40px auto 22px;
   border-radius: 0px;
   border-top: 2px solid #333;

}

#popup MAIN {
   border-bottom: 0px;
   border-top: 0px;

}

#popup FOOTER {
   text-align: right;
}

/*----------------------------
            FORMS
------------------------------*/
  

/* USER REGISTRATION FORM */
#registerform {
   height: 422px;
}
#registerform > DIV:nth-of-type(1) {
   top: 8px;
   left: 0px;
}
#registerform > DIV:nth-of-type(1) INPUT
{
   width: 230px;
}
#registerform > DIV:nth-of-type(2) {
   top: 8px;
   left: 280px;
}
#registerform > DIV:nth-of-type(2) INPUT
{
   width: 200px;
}
#registerform > DIV:nth-of-type(3) {
   top: 68px;
   left: 0px;
}
#registerform > DIV:nth-of-type(3) INPUT
{
   width: 295px;
}
#registerform > DIV:nth-of-type(4) {
   top: 128px;
   left: 0px;
}
#registerform > DIV:nth-of-type(4) INPUT
{
   width: 295px;
}
#registerform > DIV:nth-of-type(5) {
   top: 208px;
   left: 00px;
}
#registerform > DIV:nth-of-type(5) IMG {
   border: 1px solid #b9b9b9;
}
#registerform > DIV:nth-of-type(6) {
   top: 315px;
   right: 14px;
}
#registerform > DIV:nth-of-type(7) {
   top: 338px;
   left: 0px;
}
#registerform > DIV:nth-of-type(7) INPUT
{
   width: 160px;
}
#registerform > DIV:last-child {
   bottom: 0px;
   left: 50%;
   transform: translate(-50%, 0);
}


/* SIMPLE LOGING FORM */
#loginform {
   height: 152px;
}
#loginform > DIV:nth-of-type(1) {
   top: 8px;
   left: 50%;
   transform: translate(-50%, 0);
}
#loginform > DIV:nth-of-type(1) INPUT
{
   width: 260px;
}
#loginform > DIV:nth-of-type(2) {
   top: 68px;
   left: 50%;
   transform: translate(-50%, 0);
}
#loginform > DIV:nth-of-type(2) INPUT
{
   width: 260px;
}
#loginform > DIV:last-child {
   bottom: 0px;
   left: 50%;
   transform: translate(-50%, 0);
}


/* RESET PASSWORD FORM */
#forgotpw {
   height: 92px;
}
#forgotpw > DIV:nth-of-type(1) {
   top: 8px;
   left: 50%;
   transform: translate(-50%, 0);
}
#forgotpw > DIV:nth-of-type(1) INPUT
{
   width: 260px;
}
#forgotpw > DIV:last-child {
   bottom: 0px;
   left: 50%;
   transform: translate(-50%, 0);
}


/* MESSAGE TIMER */
#timer_container {
   height: 100px;
}

#timer_container CANVAS {
   position: absolute;
   display: inline-block;
   border-radius: 0px;
   margin: 0px;
   border: 0px;  
   background-color: transparent;
   width: 60px;
   height: 60px;
   filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.11));
}

#timer_container CANVAS {
   top: 20px;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

#timer_container A {
   top: 92px;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

/* displays the contents as columns */
DIV.columns {
   display: flex;
   justify-content: space-between;
   margin: 0 0 0 0;
}

/* USER CP PAGE */
#usercp_main {
   position: relative;
}


/* USER DATA WIDGETS */
#view_user_data,
#user_data,
#license_user_data {
   position: relative;
   width: 420px;
   height: 60px;
   background-color: #e1e1e1;
   margin: 0 0 38px 0;
}

DIV.button,
DIV.button * {
   cursor: pointer;
}



#update_user_button {
   top: 10px;
   left: 14px;
}

#license_user_data > SPAN:nth-of-type(1),
#view_user_data > SPAN:nth-of-type(1),
#user_data > SPAN:nth-of-type(1) {
   color: #787878;
   font-size: 20px;
   position: absolute;
   top: 11px;
   left: 61px;
}

#license_user_data > SPAN:nth-of-type(2),
#view_user_data > SPAN:nth-of-type(2),
#user_data > SPAN:nth-of-type(2) {
   top: 36px;
   left: 61px;
   position: absolute;
   color: #787878;
}

#view_user_data > SPAN:nth-of-type(3) {
   top: 11px;
   right: 14px;
   position: absolute;
}

#view_user_data > SPAN:nth-of-type(4) {
   top: 34px;
   right: 14px;
   position: absolute;
}


A.endcap {
   position: absolute;
   right: -18px;
   top: 0px;
   height: 100%;
   width: 15px;
   background-color: #cdcdcd;
   color: #6d6d6d;
   writing-mode: vertical-rl;
   text-orientation: mixed;
   font-variant: all-small-caps;
   cursor: pointer;
}

A.endcap:hover {
   background-color: #636363;
   color: #ffffff;
}

A.endcap > SPAN {
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
   top: 50%;
   height: 100%;
   vertical-align: middle;
   text-align: center;
   width: 100%;
}

A.endcap > SPAN + DIV.fieldtip {
   left: -92px;
   width: 200px;
   font-variant: initial;
}


/* PASSWORD UPDATE FORM */
#updatepassform {
   height: 245px;
   width: 420px;
   position: relative;
   margin: 0 0 38px 0;
}
#updatepassform > FORM >DIV:nth-of-type(1) {
   top: 63px;
   left: 50%;
   transform: translate(-50%, 0);
}
#updatepassform > FORM >DIV:nth-of-type(1) INPUT
{
   width: 250px;
}
#updatepassform > FORM >DIV:nth-of-type(2) {
   top: 123px;
   left: 50%;
   transform: translate(-50%, 0);
}
#updatepassform > FORM >DIV:nth-of-type(2) INPUT
{
   width: 250px;
}
#updatepassform > FORM >DIV:last-child {
   bottom:35px;
   left: 50%;
   transform: translate(-50%, 0);
}


/* REGISTER PRODUCT FORM */
#updatelicenseform {
   height: 120px;
   width: 418px;
   position: relative;
   margin: 0 0 38px 0;
}

#updatelicenseform > FORM >DIV:nth-of-type(1) {
   bottom: 27px;
   left: 32px;
}
#updatelicenseform > FORM >DIV:nth-of-type(1) INPUT
{
   font-family: 'Courier New', monospace;
   width: 240px;
}
#updatelicenseform > FORM >DIV:last-child {
   bottom: 27px;
   right: 32px;
}



/* PASSWORD EMAIL FORM */
#updateemailform {
   height: 338px;
   width: 418px;
   position: relative;
   margin: 0 0 38px 0;
}

#updateemailform > FORM >DIV:nth-of-type(1) {
   top: 63px;
   left: 60px;
}
#updateemailform > FORM >DIV:nth-of-type(1) INPUT
{
   width: 200px;
}
#updateemailform > FORM >DIV:nth-of-type(2) {
   top: 123px;
   left: 60px;
}
#updateemailform > FORM >DIV:nth-of-type(2) INPUT
{
   width: 295px;
}
#updateemailform > FORM >DIV:nth-of-type(3) {
   top: 183px;
   left: 60px;
}
#updateemailform > FORM >DIV:nth-of-type(3) INPUT
{
   width: 295px;
}
#updateemailform > FORM >DIV:last-child {
   bottom: 35px;
   left: 50%;
   transform: translate(-50%, 0);
}


#licenseinput {
    position: relative;
}


/* the form to filter by license on the
   admin license control panel */
#generatelicenseform {
   height: 147px;
   width: 430px;
   position: relative;
   margin: 0 0 38px 0;
}
#generatelicenseform > FORM >DIV:nth-of-type(1) {
   top: 63px;
   left: 85px;
}
#generatelicenseform > FORM >DIV:nth-of-type(1) INPUT
{
   width: 40px;
}
#generatelicenseform > FORM >DIV:nth-of-type(2) {
   top: 63px;
   left: 149px;
}
#generatelicenseform > FORM >DIV:nth-of-type(2) INPUT
{
   width: 100px;
}
#generatelicenseform > FORM >DIV:last-child {
   top: 77px;
   right: 85px;
}


/* the form to filter by license on the
   admin license control panel */
#searchlicenseform {
   height: 147px;
   width: 430px;
   position: relative;
   margin: 0 0 38px 0;
}
#searchlicenseform > FORM >DIV:nth-of-type(1) {
   top: 63px;
   left: 60px;
}
#searchlicenseform > FORM >DIV:nth-of-type(1) INPUT
{
   width: 200px;
}
#searchlicenseform > FORM >DIV:last-child {
   top: 77px;
   left: 290px;
}


/* LICENSELIST the table that lists license keys 
   on the admin license control panel */
#licenselist {
   width: 100%;
}


#licenselist > TBODY > TR {
   height: 30px;
}


#licenselist > TBODY > TR > TD:nth-of-type(1) {
   font-weight: 700;
   font-family: 'Courier New', monospace;
}




/* the form to filter by username on the
   admin user control panel */
#searchuserform {
   height: 147px;
   width: 430px;
   position: relative;
   margin: 0 0 38px 0;
}
#searchuserform > FORM >DIV:nth-of-type(1) {
   top: 63px;
   left: 60px;
}
#searchuserform > FORM >DIV:nth-of-type(1) INPUT
{
   width: 200px;
}
#searchuserform > FORM >DIV:last-child {
   top: 77px;
   left: 290px;
}


/* USERLIST the table that lists usernames 
   on the admin user control panel */
#userlist {
   width: 100%;
}


#userlist > TBODY > TR > TD:nth-of-type(4){
   text-align: center;
}
/* the width on this one is necessary because
   the content has a popup that inherits
   this width for itself */
#userlist > TBODY > TR > TD:nth-of-type(3)  {
   text-align: center;
   position: relative;
   width: 110px;
}

/* MESSAGES STYLES */
#message_count {
    display: block;
    /* swap to this position to make
       the message count stick to the
       top of the page
    position: fixed; */
    position: absolute;
    left: calc(50% + 0px);
    transition: all 300ms cubic-bezier(.35,1.7,.91,.79);
    top: calc(0% + 6px);
    transform: translate(-50%, 0%);
    opacity: 1;
    background-color: #ffffff14;
    border-radius: 5px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    color: white;
    line-height: 20px;
    font-weight: 400;
    padding: 0px 10px;
    cursor: pointer;
    border-top: 1px solid #0000004a;
    border-bottom: 1px solid #ffffff69;
    border-left: 1px solid #0000004a;
    border-right: 1px solid #ffffff69;
    font-variant: all-small-caps;
    font-size: 10px;
    letter-spacing: 1px;
}

#messages_popup.show {
   top: calc(50% + 0px);
   transform: translate(-50%, -50%);
   opacity: 1;
}

#messages_popup.hide {
   top: calc(0%);
   transform: translate(-50%, -100%);
   opacity: 0;
}


#messages_popup {
   display: block;
   position: fixed;
   left: 50%;
   box-shadow: 10px 10px 1px rgb(0 0 0 / 25%);
   transition: all 300ms cubic-bezier(.35,1.7,.91,.79);
   z-index: 200;
}


#messages_popup > DIV {
   width: 400px;
   padding: 20px;

}
#messages_popup > DIV.notice_message {
   background-color: #fcffdf;
}
#messages_popup > DIV.error_message {
   background-color: #c35a5a;
}
#messages_popup > DIV.log_message {
   background-color: #dfebff;
}




#messages_popup > DIV > H3 {
   font-size: 15px;
   font-weight: 100;
   font-family: Arial, Helvetica, sans-serif;
   font-variant: all-small-caps;
   letter-spacing: 5px;
   text-align: center;
   background-color: transparent;
   margin: 0px 0px 0px;
   display: block;
}
#messages_popup > DIV.notice_message > H3 {
   color: #727272;
}
#messages_popup > DIV.error_message > H3 {
   color: #ffffff;
}
#messages_popup > DIV.log_message > H3 {
   color: #1a1a1a;
}



#messages_popup > DIV > SPAN {
   display: inline-block;
   margin: 10px;
   line-height: 20px;
}
#messages_popup > DIV.notice_message > SPAN {
   color: #999999;
}
#messages_popup > DIV.error_message > SPAN {
   color: #ffffff;
}
#messages_popup > DIV.log_message > SPAN {
   color: #636470;
}

/* ADMIN USER CONTROL PANEL */
#admin_usercp {
   position: relative;
   width: 780px;
   margin: 0 auto 38px;
}

#locked_widget {
   position: relative;
   width: 331px;
   height: 92px;
   margin: 0 0 38px 0;
}

#locked_widget > DIV:nth-of-type(1) {
   top: 38px;
   left: 46px;
   position: absolute;
   font-size: 13px;
   line-height: 20px;
}

#locked_widget > DIV:nth-of-type(2) {
   top: 28px;
   right: -30px;
   width: 150px;
   position: absolute;
   text-align: center;
}

#locked_widget > DIV:nth-of-type(3) {
   top: 70px;
   right: 24px;
   position: absolute;
}

#locked_widget > DIV:nth-of-type(3) > A {
   font-size: 11px;
}

#update_a_user_widget {
   position: relative;
   width: 780px;
   height: 235px;
   margin: 0 0 38px 0;
}

#changeuseremailform {
   position: absolute;
   height: 35px;
   width: 392px;
   top: 63px;
   left: 40px;
}

#changeuseremailform > DIV:nth-of-type(1) {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 35px;
   width: 392px;
}

#changeuseremailform > DIV:nth-of-type(1) > DIV:nth-of-type(1) {
   top: 0px;
   left: 0px;
}

#changeuseremailform > DIV:nth-of-type(1) > DIV:nth-of-type(1) INPUT
{
   width: 295px;
}

#changeuseremailform > DIV:nth-of-type(1) > DIV:last-child {
   top: 14px;
   left: 325px;
}

#changeuserpassform {
   position: absolute;
   height: 35px;
   width: 357px;
   top: 143px;
   left: 40px;
}

#changeuserpassform > DIV:nth-of-type(1) {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 35px;
   width: 357px;
}

#changeuserpassform > DIV:nth-of-type(1) > DIV:nth-of-type(1) {
   top: 0px;
   left: 0px;
}

#changeuserpassform > DIV:nth-of-type(1) > DIV:nth-of-type(1) INPUT
{
   width: 260px;
}

#changeuserpassform > DIV:nth-of-type(1) > DIV:last-child {
   top: 14px;
   left: 290px;
}

#ban_control {
   position: absolute;
   height: 35px;
   width: 122px;
   top: 63px;
   left: 545px;
}

#role_control {
   position: absolute;
   height: 35px;
   width: 184px;
   top: 143px;
   left: 545px;
}



/* ADMIN USER CONTROL PANEL */
#admin_licensecp {
   position: relative;
   height:320px;
}


#license {
   position: relative;
   width: 418px;
   height: 74px;
   margin: 0 0 38px 0;
}


#license > DIV:nth-of-type(1) {
   width: 100%;
   height: 100%;
}

DIV.active {
   outline: 1px dashed #e1a9b6;
   background-color: #fffeef;
   color: #000000;
   border: 1px solid #bd6969;
}

DIV.active:before {
   outline: 1px solid #e1a9b6;
   border: 5px solid #e1a9b6;
}

DIV.active:after {
   outline: 1px solid #7284ab;
   color: #7284ab;
   border: 3px solid #7284ab;
}


DIV.expired {
   outline: 1px dashed #dbdbdb;
   background-color: #fdfdfd;
   color: #858585;
   border: 1px solid #bbbaba;
}

DIV.expired:before {
   outline: 1px solid #dbdbdb;
   border: 5px solid #dbdbdb;
}

DIV.expired:after {
   outline: 1px solid #bbbaba;
   color: #bbbaba;
   border: 3px solid #bbbaba;
}

DIV.expired > DIV:nth-of-type(1):after {
   content: "Expired";
   outline: 5px dotted #e18383;
   position: absolute;
   font-size: 33px;
   text-transform: uppercase;
   font-weight: 900;
   font-family: 'Courier New', monospace;
   letter-spacing: 3px;
   line-height: 23px;
   vertical-align: middle;
   text-align: center;
   padding: 1px 0px 0px 5px;
   z-index: 100;
   color: #e18383;
   transform: rotate(-9deg);
   right: -18px;
   bottom: 13px;
   margin: 0px;
   scale: 0.6;
}

DIV.active,
DIV.expired {
   outline-offset: -13px;
}

DIV.active:before,
DIV.expired:before {
   content: " ";
   outline-offset: -9px;
   background-color: transparent;
   display: block;
   height: calc(100% - 19px);
   width: calc(100% - 17px);
   position: absolute;
   top: 5px;
   left: 4px;
   vertical-align: top;
   margin: 0px;
   padding: 0px;
   pointer-events: none;
}

DIV.active:after,
DIV.expired:after {    
   content: "PB";
   outline-offset: -5px;
   background-color: transparent;
   display: block;
   height: 16px;
   width: 23px;
   position: absolute;
   bottom: 28px;
   left: 25px;
   text-align: center;
   vertical-align: middle;
   line-height: 16px;
   font-weight: 900;
   font-family: Arial, Helvetica, sans-serif;
   pointer-events: none;
}

#license > DIV:nth-of-type(1) > SPAN:nth-of-type(1),
#license > DIV:nth-of-type(1) > SPAN:nth-of-type(2) {
   position: absolute;
   display: inline-block;
   width: 100%;
   text-align: center;
   font-weight: 900;
   font-family: 'Courier New', monospace;
}

#license > DIV:nth-of-type(1) > SPAN:nth-of-type(1) {
   font-size: 16px;
   top: 21px;
   left: 0px;
}

#license > DIV:nth-of-type(1) > SPAN:nth-of-type(2) {
   font-size: 10px;
   top: 44px;
   left: 0px;
}




#license_update {
   position: relative;
   width: 433px;
   height: 200px;
   background-color: #e1e1e1;
   margin: 0 0 38px 0;
}

#changelicenseassignform {
   top: 123px;
}
#changelicenseexpirationform {
   top: 61px;
}
#changelicenseexpirationform,
#changelicenseassignform {
   position: absolute;
   height: 35px;
   width: 355px;
   left: 40px;
}


#changelicenseexpirationform > DIV:nth-of-type(1),
#changelicenseassignform > DIV:nth-of-type(1) {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 35px;
   width: 340px;
}


#changelicenseexpirationform > DIV:nth-of-type(1) > DIV:nth-of-type(1), 
#changelicenseassignform > DIV:nth-of-type(1) > DIV:nth-of-type(1) {
   top: 0px;
   left: 0px;
}

#changelicenseexpirationform > DIV:nth-of-type(1) > DIV:nth-of-type(1) INPUT
{
   width: 100px;
}

#changelicenseassignform > DIV:nth-of-type(1) > DIV:nth-of-type(1) INPUT
{
   width: 255px;
}

#changelicenseassignform > DIV:nth-of-type(1) > DIV:last-child {
   top: 14px;
   left: 285px;
}

#changelicenseexpirationform > DIV:nth-of-type(1) > DIV:last-child{
   top: 14px;
   left: 130px;
}