@import url('https://fonts.googleapis.com/css2?family=Roboto');

a:link{color:#3d3d3d; text-decoration: none;}
a:visited{color: #3d3d3d;; text-decoration: none;}
a:hover{color: #e52c5c;; text-decoration: none;}
a:active{color: #3d3d3d;; text-decoration: none;}

a.adminlinks:link{color:#fff; text-decoration: none; background:#dd6247; padding: 8px 10px; text-align: center; display: block; margin: 3px auto; border-radius: 10px; font-size: 16px;}
a.adminlinks:visited{color:#fff; text-decoration: none; background:#dd6247; padding: 8px 10px; text-align: center; display: block; margin: 3px auto;}
a.adminlinks:hover{color:#fff; text-decoration: none; background:#e2487c; padding: 8px 10px; text-align: center; display: block; margin: 3px auto;}
a.adminlinks:active{color:#fff; text-decoration: none; background:#e2487c; padding: 8px 10px; text-align: center; display: block; margin: 3px auto;}

a.navlink:link{color:#c0c0c0; text-decoration: none; font-size: 24px; display: inline-block; margin: 0px 12px;}
a.navlink:visited{color:#c0c0c0; text-decoration: none; font-size: 24px; display: inline-block; margin: 0px 12px;}
a.navlink:hover{color:#e2487c; text-decoration: none; font-size: 24px; display: inline-block; margin: 0px 12px;}
a.navlink:active{color:#e2487c; text-decoration: none; font-size: 24px; display: inline-block; margin: 0px 12px;}

a.logoutlink:link{color:#970101; text-decoration: none; font-size: 24px; display: inline-block; margin: 0px 12px;}
a.logoutlink:visited{color:#970101; text-decoration: none; font-size: 24px; display: inline-block; margin: 0px 12px;}
a.logoutlink:hover{color:#e2487c; text-decoration: none; font-size: 24px; display: inline-block; margin: 0px 12px;}
a.logoutlink:active{color:#e2487c; text-decoration: none; font-size: 24px; display: inline-block; margin: 0px 12px;}

a.sessionopen:link{color:#008000; text-decoration: none; font-size: 22px;}
a.sessionopen:visited{color:#008000; text-decoration: none; font-size: 22px;}
a.sessionopen:hover{color:#008000; text-decoration: none; font-size: 22px;}
a.sessionopen:active{color:#008000; text-decoration: none; font-size: 22px;}

a.ticketlink:link{color:#fff; text-decoration: none; font-size: 16px;}
a.ticketlink:visited{color:#fff; text-decoration: none; }
a.ticketlink:hover{color:#fff; text-decoration: none; }
a.ticketlink:active{color:#fff; text-decoration: none; }

*{
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
scroll-behavior: smooth;
}

body
{
background: #fff;
/*padding: 104px 0px 85px 0px;*/
padding: 0px 0px 85px 0px;
margin: 0px;
color: #000;
font-size: 12px;
text-align: center;
}
table
{
margin: 0px auto;
border: 0px solid #c0c0c0;
}
th
{
font-size: 10px;
font-weight: bold;
padding: 5px;
color: #000;
border-bottom: 1px solid #808080;
max-width: 90px;
}
td
{
font-size: 12px;
color: #000;
}
tr:nth-child(odd)
{
background: #f3f3f3;
}
tr:nth-child(even)
{
background: #fff;
}
#tdpadnum
{
    padding:10px;
    text-align: center;
}
#tdpadname
{
    padding:10px;
    text-align: center;
}

#setpass { background: #008000;}
#main { background: #fff;}
#profile { background: #c0c0c0;}
#redeem { background: #fac556;}
#attendance{background:#60204c;}
#error{background:#be1212;}
#loaded { background: #008000;}
#type { background: #e08925;}

header
{
position: sticky;
/*position: fixed;*/
top: 0px;
width: 100%;
height: 64px;
display: block;
text-align: center;
padding: 16px 12px;
margin: 0px;
/*background-color: #1b2335;*/
background-color: #3b00ab;
box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.2);
z-index: 15;
}
footer
{
padding: 10px 0px 5px 0px;
text-align: center;
color: #c0c0c0;
position: fixed;
bottom: 0px;
display: block;
width: 100%;
background: #fff;
border-top: 1px solid #c0c0c0;
border-radius: 20px 20px 0px 0px;
z-index: 20;
}
.symbol
{
    margin: 5px auto;
    display: block;
    opacity: 0.7;
}
.headerbox
{
    margin: 0px auto;
    padding: 0px;
    border: 0px solid #fff;
}
.logosymbol
{
    height: 30px;
    margin: 0px 5px 0px 0px;
    display: inline-block;
    vertical-align: top;
}
.logo
{
    margin: 3px 0px 0px 0px;
    height: 30px;
}
.indexgate
{
    margin: 30px auto 10px auto;
}
.gatebox
{
    width: 300px;
    display: block;
    text-align: center;
}



#gatebox{margin: 20px auto 20px auto;}
#setpassbox{margin: 20px auto;}

.menubottom
{
    text-align: center;
    margin: 0px auto 15px auto;
    font-size: 0px;
}
.footerbox
{
    display: inline-block;
    border: 0px solid #c0c0c0;
    position: relative;
    padding: 0px;
    margin: 0px;
}
.helpbox
{
text-align: center;
color: #fff;
font-size: 12px;
margin: 10px auto;
display: block;
}
#gatecode
{
background: #edf0f7;
border: 0px solid #808080;
color: #000;
font-size: 14px;
border-radius: 22px;
display: block;
margin: 10px auto;
padding: 15px 15px;
text-align: justify;
width: 100%;
}
.salutebox
{
    width: 300px;
    margin: 10px auto;
    font-size: large;
    color: #fff;
    padding: 0px 20px;
}

.navbar
{
    position: fixed;
    top: 64px;
    left: 0px;
    width: 100%;
    display: inline-block;
    padding: 12px 10px 10px 20px;
    text-align: justify;
    font-size: 16px;
    background:#eee;
    z-index: 12;
    color: #2c2c2c;
}
.subnavbar
{
    display: block;
    text-align: left;
    padding: 12px 10px 10px 90px;
    font-size: 14px;
    border: 0px solid #c0c0c0;    
    position: relative;
    margin: 40px 0px 0px 0px;
}
.downdirarrow
{
    position: absolute;
    top: 0px;
    left: 70px;
    font-size: 22px;
}
.container
{
    display: block;
    margin: 50px 0px 10px 0px;
    padding: 10px 10px;
    border-top: 0px solid #c0c0c0;
    min-width: 350px;
    width: 98%;
}
.maincontainer
{
    border: 0px solid #e52c5c;
    display: block;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    min-width: 350px;
    width: 98%;
}
.badgescontainer
{
    display: block;
    padding: 10px;
    padding: 0px;
    margin: 50px auto 10px auto;
    text-align: center;
    min-width: 350px;
    width: 98%;
}
.badgeiconsm
{
    width: 30px;
}
.userslistcontainer
{
    margin: 10px auto;
    padding: 10px;
    text-align: center;
}
.profilebar
{
    max-width: 900px;
    width: 90%;
    display: block;
    padding: 0px;
    margin: 0px auto;
    text-align: left;
    border: 0px solid #c0c0c0;
    position: relative;
}
.profilebarbox
{
    max-width: 900px;
    width: 100%;
    display: block;
    padding: 8px 10px 5px 10px;
    margin: 0px auto;
    text-align: left;
    border: 0px solid #000;
    border-radius: 0px 0px 12px 12px;
    position: relative;
    background-color: #eee;
    /*background-color: #3c4f75;*/
    /*background-color: #222224;*/
}
.profilepic
{
    width: 70px;
    height: 70px;
    margin: 0px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: inline-block;
    vertical-align: top;
}
.userslistprofilepic
{
    width: 70px;
    height: 70px;
    border: 0px solid #fff;
    border-radius: 50%;
    display: inline-block;
    vertical-align: top;
    box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.1);
    margin: 5px auto 8px auto;
}
.userslistprofilepicsm
{
    width: 30px;
    height: 30px;
    border: 0px solid #fff;
    border-radius: 50%;
}

.profilepicnav
{
    width: 50px;
    height: 50px;
    border: 3px solid #3b00ab;
    border-radius: 50%;
    display: inline-block;
    vertical-align: top;
    box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.2);
    /*box-shadow: 0px 0px 0px 5px rgba(238, 238, 238, 1.0);*/
    position: absolute;
    top: 40px;
    right: 10px;
    z-index: 10;
}
.userinfo
{
    margin: 12px 0px 0px 10px;
    font-size: 22px;
    display: inline-block;
}
.profileuserinfo
{
    display: block;
    padding: 15px 5px 0px 5px;
}
.profilebarusername
{
    display: block;
}
.profilebarusertype
{
    margin: 2px 2px 2px 14px;
    font-size: 12px;
}
.pointscollection
{
    width: 800px;
    display: block;
    margin: 10px auto;
    text-align: left;
    padding: 0px;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
}
.pointscontainer
{
    width: 150px;
    margin: 10px;
    padding: 12px 10px 5px 10px;
    text-align: center;
    border: 2px solid #dd6247;
    border-radius: 10px;
    background: #ff7c5d;
    color: #fff;
    display: inline-block;
}
.pointsvalue
{
    font-size:45px;
}
.levelcontainer
{
    max-width: 900px;
    width: 95%;
    margin: 10px auto;
    padding: 15px 15px 5px 15px;
    text-align: center;
    display: block;
    border-bottom: 1px solid #eee;
}
.userlevelinfo
{
    display: block;
    margin: 7px auto;
    border: 0px solid #000;
}
.levelbar
{
    width: 100%;
    margin: 0px;
    background: #c0c0c0;
    display: block;
    text-align: left;
    padding: 0px;
    border-radius: 7px;
    position: relative;
    height: 25px;
    border: 0px solid #000;
}
.nextlevelbox
{
    position: absolute;
    top: -12px;
    right: -35px;
    font-size: 20px;
    color: #c0c0c0;
    background:#eee;
    border: 0px solid #000;
    border-radius: 50%;
    padding: 12px 10px 9px 10px;
    width: 48px;
    height: 48px;
    text-align: center;
}
#nxtlvlactive
{
    color: #fff;
    background: #e52c5c;
}
.levelprogress
{
    background:#2196f3;
    padding: 5px 10px 5px 5px;
    text-align: right;
    color: #fff;
    border-radius: 8px;
    height: 100%;
}
.thisleveldata
{
    display: block;
    font-size: 14px;
    padding: 0px 0px 5px 0px;
}
.nextleveldata
{
    margin: 5px;
    text-align: right;
    padding: 0px 30px 0px 0px;
    font-size: 11px;
}
.awardcollectiontitlebar
{
    max-width: 800px;
    width: 95%;
    position: relative;
    text-align: left;
    font-size: 14px;
    color: #000;
    color: #fff;
    background: #808080;
    padding: 5px 5px 5px 50px;
    margin: 20px auto 0px auto;
    border-radius: 10px 10px 0px 0px;
}
.awardcollection
{
    max-width: 800px;
    width: 95%;
    padding: 20px;
    margin: 0px auto 10px auto;
    text-align: center;
    background: #eee;
    border-radius: 0px 0px 10px 10px;
}
.badgebox
{
    width: 95px;
    border: 0px solid #c0c0c0;
    padding: 0px;
    margin: 5px 3px;
    display: inline-block;
    text-align: center;
    vertical-align: top;
}
.badgebox img
{
    width: 75px;
}
.badgename
{
    font-size: 10px;
    text-align: center;
    display: block;
    padding: 0px 3px;
    margin: 0px;
    color: #3d3d3d;
    border-radius: 4px;
}
.nobadgemsg
{
    text-align: center;
    font-size: 14px;
    padding: 20px;
    margin: 5px auto;
}
.awardsicon
{
    position: absolute;
    left: 13px;
    top: -14px;
    width: 30px;
}
.challengesicon
{
    position: absolute;
    left: 10px;
    top: -6px;
    width: 35px;
}
.codegeneratorbox
{
text-align: left;
width: 300px;
margin: 10px auto;
display: inline-block;
}
#inputreg
{
background: #edf0f7;
border: 0px solid #808080;
color: #000;
font-size: 14px;
border-radius: 10px;
display: block;
margin: 10px auto;
padding: 15px 15px;
text-align: justify;
width: 100%;
}
.admintoolbox
{
    width: 100%;
    display: inline-block;
    margin: 10px auto;
    vertical-align: top;
    padding: 10px;
    border: 1px solid #c0c0c0;
    border-radius: 10px;
    background: #fff;
}
.profilesidebar
{
    width: 300px;
    padding: 0px 0px 10px 0px;
    background: #eee;
    border-radius: 0px 0px 10px 10px;
    display: inline-block;
    vertical-align: top;
    color: #3d3d3d;
}
.profilesidebar p
{
    margin: 3px auto;
}
.profileuserbox
{
    max-width: 350px;
    display: block;
    padding: 20px 10px;
    background: #55e8c2;
    border-radius: 10px 10px;
    margin: 0px auto 15px auto;
    position: relative;
}
.profilebigpic
{
    width: 150px;
    height: 150px;
    border: 4px solid #fff;
    border-radius: 50%;
    display: inline-block;
    vertical-align: top;
}
.mainuserinfo
{
    margin: 5px 0px 0px 5px;
    padding: 10px;
    display: inline-block;
    border: 0px solid #c0c0c0;
}
.profileusername
{
    display: block;
    margin: 0px auto;
    font-size: 20px;
    display: block;
    height: 22px;
}
.profileusernickname
{
    display: block;
    margin: 0px auto;
    font-size: 14px;
    display: block;
    font-style: italic;
}
.profileuserlastname
{
    display: block;
    margin: 0px auto;
    font-size: 24px;
    display: block;
    height: 26px;
}
.profileusertype
{
    padding: 10px 5px;
    display: block;
    margin: 10px auto;
    font-size: 16px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.redeemwarning
{
    width: 300px;
    padding: 10px;
    margin: 10px auto;
    font-size:xx-large;
    text-align: center;
    color:#000;
}
.redeembox
{
    padding: 20px 10px;
    background:#fff;
    border-radius: 20px;
    margin: 20px auto;
    width: 300px;
    text-align: center;
    position: relative;
    box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.2);
}
.redeemthumb
{
    display: block;
    margin: 10px auto;
    width: 120px;
}
.redeemthumbbadge
{
    display: block;
    margin: 10px auto;
}
.redeemthumbgift
{
    display: block;
    margin: 0px auto 10px auto;
    width: 90%;
}
.redeemthumbprize
{
    display: block;
    margin: 10px auto 0px auto;
    width: 180px;
}
.redeemtxt
{
    font-size: 25px;
    display: block;
    margin: 5px auto;
}
.redeemvalue
{
    font-size: 80px;
    line-height: 60px;
    font-weight: bolder;
    display: block;
    margin: 5px auto;
}
.redeembadgename
{
    font-size: 20px;
    font-weight: bolder;
    display: block;
    margin: 5px auto;
}
.redeembadgetext
{
    font-size: 14px;
    display: block;
    margin: 5px auto;
    padding: 0px 10px;
}
.redeemunity
{
    font-size: 16px;
    display: block;
    margin: 5px auto;
}
.redeempointstotal
{
    font-size: 16px;
    display: block;
    margin: 15px auto 10px auto;
    border-top: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
    padding: 10px;
}
.redeembuttonbar
{
    width: 300px;
    margin: 5px auto;
}
.collectionsidebar
{
    display: inline-block;
    vertical-align: top;
    width: 210px;
    border-right: 1px solid #eee;
    text-align: center;
    padding: 10px;
    margin: 0px;
}
.collectionbox
{
    width: 150px;
    padding: 0px;
    margin: 5px 5px 5px 25px;
    display: block;
    text-align: left;
    position: relative;
}
.collecticon
{
    width: 50px;
    position: absolute;
    top: 10px;
    left: -20px;
}
.collectiontype
{
    font-size: 12px;
    padding: 3px 0px 3px 35px;
    border: 0px solid #c0c0c0;
    display: block;
}
.collectionvalue
{
    text-align: center;
    padding: 5px 10px 5px 30px;
    margin: 0px;
    display: block;
    font-size: 24px;
    font-weight: bolder;
    color: #3d3d3d;
    border-radius: 0px 10px 10px 0px;
}
.mechanicsmenu
{
    text-align: left;
    border: 0px solid #c0c0c0;
    margin: 10px auto;
    width: 300px;
}
.badgeinfobox
{
    width: 270px;
    min-height: 220px;
    padding: 0px;
    display: inline-block;
    text-align: center;
    border: 1px solid #c0c0c0;
    margin: 10px;
    vertical-align: top;
    position: relative;
}
.badgeinfoboxlist
{
    width: 270px;
    padding: 0px;
    display: inline-block;
    text-align: center;
    border: 1px solid #c0c0c0;
    margin: 10px;
    vertical-align: top;
    position: relative;
}
.badgeinfobox img
{
    width: 80px;
    display: inline-block;
    margin: 5px auto 0px auto;
}
.badgeinfo
{
    display: block;
    margin: 5px 10px;
    z-index: 1;
}
.badgecode
{
    width: 30px;
    text-align: center;
    padding: 3px;
    background:#3d3d3d;
    color: #fff;
    border-radius: 0px 0px 5px 0px;
    z-index: 2;
    display: inline-block;
}
.badgeinfoname
{
    display: block;
    font-size: 16px;
    padding: 5px;
}
.badgeinfodetails
{
    display: block;
    margin: 0px;
    padding: 5px 5px 5px 10px;
    text-align: justify;
}
.badgaobtainedstamp
{
    font-size: 12px;
    margin: 0px 0px 0px 0px;
    padding: 5px 5px 5px 10px;
    text-align: justify;
}
.listbox
{
    width: 300px;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    border: 1px solid #c0c0c0;
    text-align: center;
    border-radius: 10px;
    vertical-align: top;
}
.listboxitem
{
    display: block;
    background:#eee;
    padding: 5px;
    border-radius: 5px;
    margin: 3px auto;
}
.listitemthumb
{
    height: 40px;
    margin: 5px;
    display: inline-block;
}
.listintemdata
{
    display: inline-block;
    text-align: left;
    margin: 0px;
    padding: 6px 0px;
    vertical-align: top;
}
.listiteminfo
{
    display: block;
    padding: 2px;
    text-align: left;
    margin: 2px;
    font-size: 10px;
}
.listitemvalue
{
    text-align: right;
    padding: 2px;
    display: block;
}
.badgeresumebox
{
    width: 300px;
    margin: 10px auto;
    border: 0px solid #c0c0c0;
    padding: 10px;
    text-align: center;
}
.badgeresumename
{
    display: block;
    font-size: 16px;
    padding: 10px;
}
.badgeresumeinfo
{
    display: block;
    text-align: justify;
    font-size: 14px;
    padding: 5px;
    margin: 5px auto 10px;
}
.badgeresumepoints
{
    display: block;
    text-align: left;
    font-size: 24px;
    padding: 10px 10px 10px 50px;
    background: url(../img/icon-points.png) no-repeat left 10px center;
    background-size: 30px;
    border-top: 1px solid #c0c0c0;
}
.badgeresumecoins
{
    display: block;
    text-align: left;
    font-size: 24px;
    padding: 10px 10px 10px 50px;
    background: url(../img/icon-coins.png) no-repeat left 10px center;
    background-size: 30px;
    border-top: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
}
.grouplistbox
{
    padding: 10px;
    border: 1px solid #c0c0c0;
    border-radius: 10px;
    margin: 20px;
    text-align: center;
    display: inline-block;
}
.grouplistboxuser
{
    width: 200px;
    padding: 10px;
    border: 1px solid #c0c0c0;
    border-radius: 10px;
    margin: 10px 5px;
    text-align: center;
    display: inline-block;
}
.groupinfobox
{
    background-color: #eee;
    width: 350px;
    text-align: left;
    padding: 10px;
    border-radius: 10px;
    margin: 5px auto;
}
.userslistbox
{
    width: 150px;
    height: 135px;
    display: inline-block;
    padding: 10px;
    margin: 5px;
    border: 1px solid #c0c0c0;
    border-radius: 10px;
    text-align: center;
    vertical-align: top;
}
.groupuserdata
{
    margin: 0px auto;
    padding: 2px;
    text-align: center;
    font-size: 12px;
}
.sectiontitle
{
    text-align: center;
    font-size: 20px;
    padding: 10px;
    display: block;
}
.challengebox
{
    width: 80px;
    display: inline-block;
    margin: 10px;
    text-align: center;
    vertical-align: top;
}
.challengebox img
{
    width: 75px;
}
.challengename
{
    font-size: 10px;
    text-align: center;
    display: block;
    padding: 2px 6px 0px 6px;
    margin: 0px;
    color: #3d3d3d;
    border-radius: 4px;
}
.checkmark
{
    display: block;
    margin: 0px;
    color:#008000;
    text-align: center;
}
.faultmark
{
    display: block;
    margin: 0px;
    color:#df5709;
    text-align: center;
}
.attendanceuserslistprofilepic
{
    width: 35px;
    height: 35px;
    border-radius: 50%;
}
.attendancestatusmark
{
    padding: 5px;
    text-align: center;
    width: 25px;
    color:#008000;
}
.attendancestatusfault
{
    padding: 5px;
    text-align: center;
    width: 25px;
    color:#da0c0c;
}
.attendancestatuspending
{
    padding: 5px;
    text-align: center;
    width: 25px;
    color:#da920c;
}
.attendancestatusnone
{
    padding: 5px;
    text-align: center;
    width: 25px;
    color:#eee;
}
.attendanceinfocell
{
    padding: 5px;
    text-align: left;

}
.attendancevaluecell
{
    text-align: right;
    padding: 5px;
}
.attendacebox
{
    padding: 10px;
    width: 300px;
    border-radius: 10px;
    text-align: left;
    border: 1px solid #eee;
    margin: 5px auto;
    display: block;
    background: #fff;
}
.attendancesessionnum
{
    padding: 10px 5px;
    display: inline-block;
    border: 0px solid #c0c0c0;
    width: 50px;
    text-align: right;
    vertical-align: top;
}
.attendancesession
{
    padding: 10px;
    display: inline-block;
    border: 0px solid #c0c0c0;
    width: 180px;
    vertical-align: top;
}
.attendancesessionstatusmark
{
    padding: 5px;
    text-align: center;
    width: 25px;
    color:#008000;
    display: inline-block;
    width: 40px;
    font-size: 22px;
    vertical-align: top;
}
.attendancesessionstatusfault
{
    padding: 5px;
    text-align: center;
    width: 25px;
    color:#da0c0c;
    display: inline-block;
    width: 40px;
    font-size: 22px;
    vertical-align: top;
}
.attendancesessionstatuspending
{
    padding: 5px;
    text-align: center;
    width: 25px;
    color:#da920c;
    display: inline-block;
    width: 40px;
    font-size: 22px;
    vertical-align: top;
}
.attendancerecordbox
{
    padding: 10px;
    display: inline-block;
    margin: 10px;
    border: 1px solid #eee;
    vertical-align: top;
    background: #eee;
}
.attendancestats    
{
    padding: 10px 20px;
    display: inline-block;
    margin: 10px;
    border: 1px solid #eee;
    vertical-align: top;
    text-align: left;
    border-radius: 10px;
}

#ico-green {color:#008000;}
#ico-red {color:#da0c0c;}
#ico-orange {color:#da920c;}


.attendacegriditem
{
    padding: 3px 0px;
    width: 30px;
    border-radius: 5px;
    text-align: center;
    border: 0px solid #c0c0c0;
    margin: 3px;
    display: inline-block;
    background: #eee;
    position: relative;
}
.attendancesstatusico
{
    position: absolute;
    top: -5px;
    right: -10px;
    width: 20px;
    font-size: 12px;
}

#attendancecheck{background-color:#a0dfa0;}
#attendancefault{background-color:#db8888;}

.sessionsgroupsbox
{
    display: inline-block;
    padding: 10px;
    vertical-align: top;
    border: 1px solid #c0c0c0;
    margin: 0px 20px 0px 10px;
}
.maincollection
{
    max-width: 920px;
    text-align: center;
    padding: 10px 0px;
    margin: 10px auto;
    display: block;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
}
.maincollectionbox
{
    width: 150px;
    padding: 0px 5px;
    margin: 15px;
    display: inline-block;
    text-align: left;
    position: relative;
    border-radius: 10px;
}
.maincollecticon
{
    width: 50px;
    position: absolute;
    top: -14px;
    left: -20px;
}
#editicon
{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
}




.profilecollectionbox
{
    width: 320px;
    padding: 0px 10px;
    margin: 35px auto 0px auto;
    display: inline-block;
    text-align: left;
    position: relative;
    border-radius: 10px 10px 0px 0px;
}
.profilecollecticon
{
    width: 50px;
    position: absolute;
    top: -14px;
    left: -14px;
}
.profilecollectiontype
{
    font-size: 16px;
    display: block;
    padding: 8px;
    text-align: center;
}
.profilecollectionvalue
{
    text-align: center;
    padding: 5px;
    margin: 0px auto 10px auto;
    display: block;
    font-size: 14px;
    color: #3d3d3d;
    border: 0px solid #000;
}

#collectioncoins { background: #fdf6e7;}
#collectionpoints {background:#e7e0f8}
#collectionlevel {background:#ebf8ee;}
#collectionbadges {background:#cbe6ef;}
#collectionpenalties {background: #f5cad6;}
#collectionchallenges {background: #f7dcc4;}
#collectionmaps {background: #c8ecd2;}


#profilepoints { border: 2px solid #8666d9; background: #e7e0f8;}
#profilecoins { border: 2px solid #eda810; background: #fdf6e7;}
#profilelevel { border: 2px solid #37bb5a; background: #ebf8ee;}
#profilebadges { border: 2px solid #248ec9; background: #cbe6ef;}
#profilepenalties { border: 2px solid #e52c5c; background: #f5cad6;}
#profilechallenges { border: 2px solid #e2832d; background: #f7dcc4;}
#profilemaps { border: 2px solid #37bb5a; background: #ebf8ee;}

#pointstitle {color:#8666d9;}
#coinstitle {color:#eda810;}
#leveltitle {color:#37bb5a;}
#badgestitle {color:#248ec9;}
#penaltiestitle{color: #e52c5c;}
#challengestitle{color: #e2832d;}
#mapstitle {color:#37bb5a;}

#logpoints {background: #8666d9; color: #fff; border-bottom: 1px solid #fff;}
#logcoins {background: #eda810; color: #fff; border-bottom: 1px solid #fff;}
#logpenalties {background: #e52c5c  ; color: #fff; border-bottom: 1px solid #fff;}
#logbadges { border-right: 2px solid #248ec9; border-left: 2px solid #248ec9; border-bottom: 2px solid #248ec9;}
#logchallenges { border-right: 2px solid #e2832d; border-left: 2px solid #e2832d; border-bottom: 2px solid #e2832d;}
#logmaps { border: 2px solid #37bb5a;}

#thpoints{background: #8666d9; font-size: 10px; font-weight: bold; padding: 5px; color: #fff; border-bottom: 1px solid #fff; }
#thcoins{background: #eda810; font-size: 10px; font-weight: bold; padding: 5px; color: #fff; border-bottom: 1px solid #fff; }
#thpenalties{background: #e52c5c; font-size: 10px; font-weight: bold; padding: 5px; color: #fff; border-bottom: 1px solid #fff; }

#grayscale{filter: grayscale(100%); opacity: 0.2;}

#navmaps {background: #ebf8ee;}
#navpoints {background: #e7e0f8;}
#navcoins{background: #fdf6e7;}
#navbadges{background: #cbe6ef;}
#navpenalties{background: #f5cad6;}
#navchallenges{background: #f7dcc4;}

.penaltiessubtext
{
    display: block;
    margin: 0px auto 10px auto;
    text-align: center;
    font-size: 12px;
}
.profilegroupbox
{
    background: #eee;
    text-align: left;
    font-size: 14px;
    color: #3d3d3d;
    padding: 10px;
    display: block;
}
.profilelogsvalue
{
    padding: 5px 5px 5px 10px;
    text-align: right;
}
.profilelogsvaluecell
{
    padding: 5px 5px 5px 10px;
    text-align: right;
    max-width: 80px;
}
.profilelogstext
{
    padding: 5px;
    text-align: left;
}
.profilelogsresume
{
    display: block;
    padding: 10px 5px 10px 5px;
    width: 320px;
    margin: 0px auto;
    text-align: center;
    border-radius: 0px 0px 10px 10px;
}
.collectionnavbar
{
    display: block;
    padding: 0px;
    margin: 40px auto 0px auto;
    text-align: center;
}
.navbarbox
{
    width: 56px;
    height: 80px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    padding: 5px 2px 5px 2px;
    margin: 2px 0px;
    border: 0px solid #c0c0c0;
    border-radius: 0px 0px 10px 10px;
    font-size: 9px;
}
.profilenavbaricon
{
    width: 40px;
    margin: 3px;
}
.profileupdatebox
{
    width: 340px;
    margin: 0px auto 10px auto;
    text-align: center;
    background:#55e8c2;
    padding: 30px 20px 20px 20px;
    border-radius: 0px 0px 20px 20px;
}
.profilepicuploadmsg
{
    margin: 10px auto;
    padding: 10px 0px;
}
.sessionstatusopen
{
    padding: 5px;
    text-align: center;
    width: 25px;
    color:#008000;
    display: inline-block;
    width: 40px;
    font-size: 22px;
    vertical-align: top;
}
.sessionstatusclosed
{
    padding: 5px;
    text-align: center;
    width: 25px;
    color:#da0c0c;
    display: inline-block;
    width: 40px;
    font-size: 22px;
    vertical-align: top;
}
.ticketsbar
{
    max-width: 900px;
    padding: 0px 15px;
    border-radius: 10px;
    background: #ec84b5;
    color: #fff;
    margin: 10px auto;
    text-align: left;
    border: 1px solid #fff;
}
.ticketsicon
{
    font-size: 20px;
    background: #fff;
    color: #ec84b5;
    width: 130px;
    text-align: center;
    display: inline-block;
    margin: 0px 20px 0px 0px;
}
.giftboxinfo
{
    display: inline-block;
    font-size: 20px;
    vertical-align: top;
    padding: 26px 0px 0px 0px;
}
.ticketwarning
{
    display: inline-block;
    font-size: 10px;
    text-align: center;
    padding: 2px 5px 0px 5px;
    color: #fff;
}
.errorbox
{
    margin: 0px auto;
    max-width: 350px;
    display: block;
    font-size: 20px;
    text-align: center;
    padding: 20px;
    color: #9e5936;
}
.logsnavprofileinfobox
{
    display: block;
    padding: 5px;
    text-align: left;
}
.logsnavprofileinfoboxname
{
    display: inline-block;
    vertical-align: top;
    padding: 3px;
}
.sessionqrthumb
{
    width: 30px;
}
.sessionqrthumb:hover
{
    width: 250px;
}
.groupresumecell
{
    padding: 5px;
    text-align: center;
}
.mainbanner
{
    width: 95%;
    max-width: 900px;
    display: block;
    padding: 0px;
    margin: 10px auto;
    border-radius: 10px;
}
.subsections
{
    max-width: 900px;
    display: block;
    margin: 10px auto;
    padding: 0px;
}
.subsections img
{
    max-width: 300px;
    display: inline-block;
    margin: 5px;
}
.badgetopbar
{
    padding: 0px 10px 0px 0px;
    text-align: left;
    margin: 0px;
    display: block;
}
.ckeckmarkshow
{
    color: #008000;
    font-size: 16px;
    float: right;
    padding: 3px 5px;
}
.ckeckmarkhide
{
    display: none;
    visibility: hidden;
}
#inactivefilter
{
    filter: grayscale(100%);
    opacity: 0.2;
}
.ballotstotalbanner
{
    background: url("../img/ballots-total-bg.png") no-repeat left top;
    width: 95%;
    max-width: 900px;
    height: 252px;
    display: block;
    padding: 0px;
    margin: 10px auto;
    border: 1px solid #fff;
    border-radius: 10px;
    text-align: right;
    position:relative;
}
.ballotsmaintotalbox
{
    border: 0px solid #c0c0c0;
    width:fit-content;
    text-align: center;
    position: absolute;
    right: 30px;
    top: 30px;
}
.ballotstotalcounter
{
    font-size: 170px;
    line-height: 150px;
    color:#fff;
    display: block;
}
.ballotstotaltext
{
    font-size: 18px;
    line-height: 16px;
    color:#fff;
    display: block;
}
.rediconsm
{
    width: 15px;
}
.cardicon
{
    width: 60px;
    margin: 10px;
}
.collectorbox
{
    width:220px;
    padding: 8px;
    margin: 5px;
    display: inline-block;
    text-align: left;
    position: relative;
    border-radius: 8px;
    vertical-align: top;
}
.collectorboxvalue
{
    width:140px;
    text-align: right;
    padding: 5px 10px 0px 10px;
    margin: 0px auto;
    font-size: 28px;
    font-weight: bolder;
    color: #fff;
    display: inline-block;
    border: 0px solid #c0c0c0;
    vertical-align: top;
}
.collectorboxtitle
{
    font-size: 14px;
    display: block;
    font-weight:normal ;
    padding: 0px;
    text-align: right;
    color: #fff;
    margin: 0px auto;
}
.collectoricon
{
    width: 60px;
    height: 60px;
    display: inline-block;
}
#collectorpoints{background-color: #8666d9;}
#collectorcoins{background-color: #eda810;}
#collectorbadges{background-color: #248ec9;}
#collectorlevel {background-color:#37bb5a;}
#collectorpenalties{background-color: #e52c5c;}
#collectorchallenges{background-color: #e2832d;}
#collectormapfinder{background-color: #d94a5c;}
#collectorchaos{background-color: #c98868;}
#collectortickets{background-color: #ec84b5;}
#collectorballots{background-color: #666620;}
#collectormaps{background-color:#37bb5a;}
#collectorgallery{background-color:#60204c;}
#collectorasistencia{background-color:#60204c;}
#collectorpuzzles{background-color:#00ddbd;}
#collectorballots{background-color:#666620;}


.settingsbanners
{
    display: block;
    width: 320px;
    margin: 60px auto 20px auto;
    text-align: center;
}
.settingsbanners img
{
    width: 90%;
    display: block;
    border-radius: 10px;
    margin: 10px auto;
    border: 1px solid #000;
}
.settingsbox
{
    padding: 10px 0px;
    margin: 5px 3px;
    text-align: center;
    width: 60px;
    border: 1px solid #c0c0c0;
    border-radius: 10px;
    display: inline-block;
    vertical-align: top;
}
.settingsboxlarge
{
    padding: 10px 0px;
    margin: 5px 3px;
    text-align: center;
    width: 100px;
    height: 110px;
    border: 1px solid #c0c0c0;
    border-radius: 10px;
    display: inline-block;
    vertical-align: top;
}
.settingsadds
{
    width: 350px;
    padding: 10px;
    margin: 5px auto;
    text-align: left;
    border: 1px solid #c0c0c0;
    border-radius: 10px;
    display: block;
}
.settingsmapresumethumbsm
{
    width: 50px;
}
.profilemapbox
{
display: block;
margin: 10px;
border: 1px solid #37bb5a;
border-radius: 0px 10px 10px 10px;
padding: 5px;
text-align: left;
position: relative;
}
.profilemapboxfound
{
display: block;
margin: 10px;
border: 1px solid #37bb5a;
background-color: #37bb5a;
border-radius: 0px 10px 10px 10px;
padding: 5px;
text-align: left;
position: relative;
}
.profilemapfinded
{
    width: 80px;
    margin: 5px;
    display: inline-block;
    vertical-align: top;
    filter: sepia(100%);
}
.profilemapclaimed
{
    width: 80px;
    margin: 5px;
    display: inline-block;
    vertical-align: top;
}
.profilemapsinfo
{
    width: 160px;
    display: inline-block;
    margin: 10px 0px 5px 10px;
    padding: 0px;
    vertical-align: top;
    text-align: left;
}
.profilemapnumber
{
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #37bb5a;
    color: #fff;
    padding: 10px;
    border-radius: 0px 0px 10px 0px;
}
.mapfinderpic
{
    width: 50px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: top;
    border: 3px solid #008000;
    margin: 2px;
}
.gallerythumblist
{
    width: 50px;
    display: inline-block;
    vertical-align: top;
    margin: 2px;
}
.starthumbicon
{
    width: 20px;
    margin: 0px;
}
.mapunlockerpic
{
    width: 45px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: top;
    border: 3px solid #c0c0c0;
    margin: 2px;
}
.settingsmapcheck
{
    font-size:20px;
    color:#008000;
    text-align: center;
}
.settingsmapstatus
{
    font-size:14px;
    color:#da920c;
    text-align: center;
    padding: 5px;
}
.settingscontainer
{
    margin: 50px auto 10px auto;
    max-width: 350px;
    text-align: center;
}
.settingsbuttonsbar
{
    width: 370px;
    display: block;
    padding: 5px;
    border: 0px solid #c0c0c0;
    margin: 10px auto;
}
.settingsbuttonsbartitle
{
    display: block;
    padding: 5px;
    margin: 0px auto 10px auto;
    font-weight: bold;
    border-bottom: 1px solid #c0c0c0;
}
.badgeminicon
{
    width: 20px;
    display: inline-block;
    margin: 2px;
}
.badgeminicon:hover
{
    width: 60px;
}
.ballotsprintbox
{
    width: 240px;
    padding: 10px;
    border: 1px solid #ececec;
    display: inline-block;
    margin: 0px;
}
.logresumemodule
{
    max-width: 370px;
    background-color: #ececec;
    display: block;
    margin: 0px auto 15px auto;
    padding: 10px 5px;
    border-radius: 10px;
    font-size: 16px;
}
.latesteventstitle
{
    padding: 0px 0px 10px 0px;
    text-align: center;
    display: block;
}
.latesteventslink
{
    display: block;
    padding: 5px;
    text-align: right;
}
.logresumebox
{
    display: block;
    padding: 5px 5px 5px 40px;
    border: 0px solid #c0c0c0;
    border-radius: 10px;
    text-align: left;
    margin: 5px auto;
    width: 310px;
    min-height: 48px;
    position: relative;
    font-size: 12px;
}
.logresumeboxpic
{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #c0c0c0;
    position: absolute;
    left: -10px;
    top: -1px;
}
.logresumeinfo
{
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    padding: 5px 25px 5px 10px;
    text-align: left;
    color: #fff;
}
.logresumeicon
{
    width: 30px;
    position: absolute;
    right: -10px;
    top: 8px;
}
.picchangeresultmsg
{
    display: block;
    margin: 0px auto;
    padding: 10px 20px;
    text-align: center;
    color: #fff;
    font-size: 14px;
}
.topitosbox
{
    width: 320px;
    height: 100px;
    border: 1px solid #c0c0c0;
    border-radius: 10px;
    display: block;
    background: url(../img/topitos_run.png) no-repeat center center;
    padding: 10px;
    text-align: left;
    margin: 5px auto;
}
.topitosnumber
{
    padding: 12px 0px 0px 0px;
    width: 75px;
    border: 0px solid #c0c0c0;
    font-size: 40px;
    text-align: center;
}
.gradesvalue
{
    text-align: center;
    font-size: 14px;
    padding: 5px;
    width: 80px;
}
.downloadlistbox
{
    margin: 60px 10px 10px 10px;
    padding: 10px;
    display: block;
    border: 1px solid #c0c0c0;
    text-align: justify;
}
.mailblockbar
{
    position: absolute;
    top: 50px;
    right: 13px;
    width: 40px;
    padding: 5px;
    font-size:26px;
    border: 0px solid #000;
}
.mailblockcounter
{
    position: absolute;
    top: 0px;
    right: 3px;
    padding: 2px 4px;
    font-size: 9px;
    color: #fff;
    background: #9b0101;
    border-radius: 10px;
    text-align: center;
}


@media screen and (max-width: 380px)
{
    .profilebar
    {
        width: 97%;
        display: block;
        padding: 5px 5px 5px 25px;
        margin: 0px auto;
        text-align: left;
        border: 0px solid #c0c0c0;
    }
    .pointscollection
    {
        width: 100%;
        display: block;
        margin: 10px auto;
        text-align: center;
        padding: 0px 20px 10px 10px;
        border-bottom: 1px solid #eee;
        border-top: 1px solid #eee;
    }
    .awardcollectiontitlebar
    {
        width: 300px;
        position: relative;
        text-align: left;
        font-size: 14px;
        color: #000;
        color: #fff;
        background: #808080;
        padding: 5px 5px 5px 50px;
        margin: 10px auto 0px auto;
        border-radius: 10px 10px 0px 0px;
    }
    .awardcollection
    {
        width: 300px;
        padding: 15px 10px 10px 10px;
        margin: 0px auto 10px auto;
        text-align: center;
        background: #eee;
        border-radius: 0px 0px 10px 10px;
    }
    .levelcontainer
    {
        width: 97%;
        margin: 10px auto 0px auto;
        padding: 3px 10px;
        text-align: center;
        border-bottom: 1px solid #eee;
        display: block;
    }
    .collectionbox
    {
        width: 100%;
        padding: 0px 15px 0px 0px;
        margin: 10px 35px 5px 5px;
        display: block;
        text-align: left;
        position: relative;
    }
    .collecticon
    {
        width: 50px;
        position: absolute;
        top: 10px;
        left: 0px;
    }
    .collectiontype
    {
        font-size: 12px;
        padding: 3px 12px 3px 35px;
        border: 0px solid #c0c0c0;
        display: block;
        text-align: right;
    }
    .collectionvalue
    {
        text-align: right;
        padding: 5px 10px 5px 50px;
        margin: 0px 0px 0px 25px;
        display: block;
        font-size: 24px;
        font-weight: bolder;
        color: #3d3d3d;
        border-radius: 0px 10px 10px 0px;
    }
    .collectionsidebar
    {
        display: block;
        width: 100%;
        border-right: 0px solid #eee;
        text-align: center;
        padding: 10px;
        margin: 10px auto;
    }
    .profilesidebar
    {
        width: 100%;
        padding: 0px 0px 10px 0px;
        background: #eee;
        border-radius: 0px 0px 10px 10px;
        display: block;
    }
    .maincollection
    {
        width: 97%;
        text-align: center;
        padding: 10px 0px;
        margin: 10px auto;
        display: block;
    }
    .maincollectionbox
    {
        width: 140px;
        padding: 0px 5px;
        margin: 10px 12px;
        display: inline-block;
        text-align: left;
        position: relative;
        border-radius: 10px;
    }
    .maincollecticon
    {
        width: 40px;
        position: absolute;
        top: -10px;
        left: -17px;
    }
    .collectionnavbar
    {
        display: block;
        padding: 0px 10px;
        border-top: 1px solid #eee;
        margin: 55px auto 0px auto;
        width: 360px;
        text-align: center;
    }
    .navbarbox
    {
        width: 40px;
        height: 60px;
        text-align: center;
        display: inline-block;
        vertical-align: top;
        padding: 15px 2px 5px 2px;
        margin: 0px 0px;
        border: 0px solid #c0c0c0;
        border-radius: 0px 0px 10px 10px;
        font-size: 0px;
    }
    .profilenavbaricon
    {
        width: 30px;
        margin: 0px;
    }
    .ticketsbar
    {
        width: 90%;
        max-width: 300px;
        padding: 0px 15px;
        border-radius: 10px;
        background: #ec84b5;
        color: #fff;
        margin: 10px auto;
        text-align: center;
    }
    .ticketsicon
    {
        font-size: 20px;
        background: #fff;
        color: #ec84b5;
        width: 130px;
        text-align: center;
        display: inline-block;
        margin: 0px auto;
        border-radius: 0px 0px 10px 10px;
        padding: 0px 0px 8px 0px;
    }
    .giftboxinfo
    {
        display: inline-block;
        font-size: 20px;
        vertical-align: top;
        padding: 10px 10px 12px 10px;
    }   
    .ticketinfo
    {
        display: inline-block;
        padding: 18px 5px 0px 5px;
        vertical-align: top;
        font-size: 20px;
        color: #fff;
    }
    .ticketwarning
    {
        display: block;
        font-size: 10px;
        text-align: center;
        padding: 2px 5px 10px 5px;
        color: #fff;
    } 


}

@media screen and (max-width: 550px)
{
    .ballotstotalbanner
    {
        background: #f9b63c url("../img/ballots-total-bg.png") no-repeat left -50px top;
        background-size: cover;
        width: 95%;
        max-width: 900px;
        display: block;
        padding: 0px;
        margin: 10px auto;
        border: 1px solid #fff;
        border-radius: 10px;
        text-align: right;
        position:relative;
    }

    .collectorbox
    {
        width:160px;
        padding: 8px 5px;
        margin: 5px;
        display: inline-block;
        text-align: left;
        position: relative;
        border-radius: 10px;
        vertical-align: top;
    }
    .collectorboxvalue
    {
        width:100px;
        text-align: right;
        padding: 2px 5px 5px 5px;
        margin: 0px auto;
        font-size: 18px;
        font-weight: bolder;
        color: #fff;
        display: inline-block;
        border: 0px solid #c0c0c0;
        vertical-align: top;
    }
    .collectorboxtitle
    {
        font-size: 12px;
        display: block;
        font-weight:normal ;
        padding: 0px;
        text-align: right;
        color: #fff;
        margin: 0px auto;
    }
    .collectoricon
    {
        width: 40px;
        height: 40px;
        display: inline-block;
    }

}

@media screen and (max-width: 470px)
{
.ballotstotalbanner
    {
        background: #f9b63c;
        width: 95%;
        max-width: 900px;
        display: block;
        padding: 0px;
        margin: 10px auto;
        border: 1px solid #fff;
        border-radius: 10px;
        text-align: right;
        position:relative;
    }
    
}

#ballotsbody
{
    margin: 0px;
}



a.booklink:link{color:#000; text-decoration: none; font-size: 16px;}
a.booklink:visited{color:#000; text-decoration: none; }
a.booklink:hover{color:#000; text-decoration: none; }
a.booklink:active{color:#000; text-decoration: none; }

.booklinkbox
{
    display: block;
    text-align: right;
    margin: 0px auto;
}
.originmsgbox
{
    padding: 20px;
    margin: 20px auto;
    display: block;
    font-size: 16px;
    max-width: 340px;
    text-align: center;
}
.originmsgbox img
{
    max-width: 200px;
}




.gradesbars
{
    font-size: 12px;
    text-align: left;
}


/* Styling the border and box effect of the progress bar*/
.progress-bar {
    width: 100%;
    height: 26px;
    margin: 0px auto;
    border: 1px solid #eee;
    border-radius: 10px;
    background-color: #c0c0c0;
}

/* Stylingthe background color of each animation and border radius */
.percentage {
    display: block;
    height: 100%;
    background-color: #2196f3;
    border-radius: 10px;
    animation: progress 1500ms ease-in 1;
    padding: 5px 10px;
    text-align: right;
    color: #fff;
}
#cut1per{background-color: #199b53;}
#cut2per{background-color: #9b1985;}
#cut3per{background-color: #e28d0d;}
#cut4per{background-color: #2d0de2;}

.cut1percentage {
    display: block;
    height: 100%;
    background-color: #199b53;
    border-radius: 10px;
    animation: progress 1500ms ease-in 1;
    padding: 5px 10px;
    text-align: right;
    color: #fff;
}

.whitecardthumb
{
    width:3px;
    cursor: pointer;
}
.whitecardthumb:hover
{
    width: 50px;
}

/* Animating the progress bar by initially starting from 0*/
@keyframes progress {
    from {
        width: 0;
    }
}