:root {
--html_bg_color:  linear-gradient(#000000, #ff0000, #000000) no-repeat fixed;

--body_bg_color:  #fff;
--body_font_color:  #000;
--body_font: 'Quicksand', sans-serif;
--body_size:  14px;
--body_width:  1200px;
--body_link_border:  2px #757575;
--body_link_border_style:  none solid solid solid;


--tab_color:  #909090;
--tab_text_color:  #000;
--tab_hover_color:  #860000;
--tab_hover_text_color:  #fff;
--tab_active_color:  #000;
--tab_active_text_color:  #fff;
--tab_bg_color:  #FFF;


--header_bg_color:    #000;
--header_font_color:  #fff;

--footer_bg_color:  #fff;
--footer_font_color:  #ee0c20;

--main_bg_color:  #fff;
--main_font_color:  #000;

--user_bg_color:  #fff;
--user_font_color:  #000;

--h3_font:  'Playfair';
--h3_size:  14px;
--h3_color:  #920000;
--h4_font:  'Shadows Into Light', cursive;
--h4_size:  20px;
--h4_color:  #652b82;

--title_font: 'Handlee', cursive;
--title_size:  26px;
--title_lineheight:  20px;
--title_color:  #652b82;

--title_font_2:  'Handlee', cursive;
--title_size_2:  20px;
--title_lineheight_2:  28px;
--title_color_2:  #8b0000;

--eh_font:  'Handlee', cursive;
--eh_size:  24px;
--eh_color:  #f19320;
--eh_bg_color:  #fee5c7;
--eh_border_color:  #000;

--nav_bg_color:  linear-gradient(to right, #000000, #ff0000, #000000);
--nav_link_border:  2px #757575;
--nav_link_border_style:  solid none;
--nav_color:  #fff;
--nav_link_color:  #fff;
--nav_link_hover_color:  #000;
--nav_font:  'Nunito', sans-serif;
--nav_size:  12px;
--nav_weight:  600;


--admin_nav_bg_color:  #000;
--admin_nav_link_border:  4px #652b82;
--admin_nav_link_border_style:  none none solid none;
--admin_nav_color:  #fff;
--admin_nav_link_color:  #fff;
--admin_nav_link_hover_color:  #ff0000;

--copy_font:  'Nunito', sans-serif;
--copy_size:  12px;
--copy_color:  #000;

--rankname_font:  'Handlee', cursive;
--rankname_size:  18px;
--rankname_color:  #b8c4cb;
--trophyname_size:  20px;
--flexleader_bg:  #FFF;
--display_size:  14px;
--lb_font: 'Handlee', cursive;
--lb_size:  12px;
--lb_color:  #000;
--tt_font:  'Nunito', sans-serif;
--tt_size:  10px;
--tt_color:  #000;
--tt_bg_color:  #fff;

--color_1:  #FFF;
--color_2:  #000;
--color_3:  #8d0000; /*main color (borders)*/
--color_4:  #757575;/*accent color*/
--color_5:  #D13210;/*pop color and links*/

--hr_color:  #000;

--bg_color_2:  #757575;/*even rows*/
--bg_color_3:  #fff; /*odd rows*/
--bg_color_4:  #ccffee;/*even rows admin rank personal*/
--bg_color_5:  #e6fff7; /*odd rows admin rank personal*/
--bg_color_5:  #ffccff;/*even rows admin rank weight*/
--bg_color_7:  #ffe6ff; /*odd rows admin rank weight*/

/*sizes*/
--max_width:  350px;
}
@font-face {
  font-family: Horsemen;
  src: url(Horsemen.otf);
}
/*start code*/
html {
	background:  var(--html_bg_color);
	height: 100%;
}

body {
	min-height: 100%;
	background:  var(--body_bg_color);
	border:  var(--body_link_border);
	border-style:  var(--body_link_border_style);
	width:  var(--body_width);
	margin:auto;
	font-family:  var(--body_font);
	font-size:   var(--body_size);
	color:  var(--body_font_color);
  box-shadow: 0 0 18px #7267a1;
  }
p {
	font-family:  var(--body_font);
	font-size:   var(--body_size);
	color:  var(--body_font_color);
}
p.gdate{
margin: 4px 0 0 0;
padding: 0px;
}
div.header {
	background:  var(--header_bg_color);
	color:  var(--header_font_color);
	text-align: center;
}
div.footer {
	background:  var(--footer_bg_color);
	color:  var(--footer_font_color);
	text-align: center;
}

div.main {
	min-height: 100%;
	background:  var(--main_bg_color);
	font-family:  var(--body_font);
	font-size:   var(--body_size);
	color:  var(--body_font_color);
	margin:auto;
	text-align: center;
	padding:0px;
}
div.user {
	background:  var(--user_bg_color);
	color:  var(--user_font_color);
	width:600px;
	margin:auto;
}
#output_image, #output_image1, #output_image2, #output_image3, #output_image4, #output_image5 {
 max-width:   600px;
}
img.imgevborderh{
max-width: 100%;
max-height:280px;
padding:0px;
border:2px solid  var(--color_3);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
img.imgevborder{
width:175px;
padding:5px;
border:2px solid  var(--color_3);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
img.minibelt{
width:15px;
height:15px;
padding:2px;
 }
.responsive {
	max-width: 100%;
	margin:auto;
max-height:300px;
}

h3{
	font-family:  var(--h3_font);
	color:  var(--h3_color);
	font-size:  var(--h3_size);
	text-align:left;
	max-width:   var(--max_width);
}
h4{
	font-family:  var(--h4_font);
	color:  var(--h4_color);
	font-size:  var(--h4_size);
	text-align:center;
	margin: 0px;
	padding: 0px;
	max-width:   var(--max_width);
}

.title{
	font-family:  var(--title_font);
	font-size:  var(--title_size);
	color:  var(--title_color);
	text-align:center;
	margin: 10px;
	padding: 0px;
	line-height: var(--title_lineheight);
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
.title2 {
	font-family:  var(--title_font_2);
	font-size:  var(--title_size_2);
	color:  var(--title_color_2);
	text-align:center;
	margin: 10px;
	padding: 0px;
	line-height: var(--title_lineheight_2);
}
div.links {
	background:  var(--nav_bg_color);
	border:  var(--nav_link_border);
	border-style:  var(--nav_link_border_style);
	font-family:  var(--nav_font);
	font-size:  var(--nav_size);
	font-weight:  var(--nav_weight);
	text-align: center;
	padding: 10px;
	color:   var(--nav_color);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.grouptitle {
font-size: 13px;
font-family: Horsemen;
-webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
text-shadow:    0px 1px 4px #23430C; 
height:50%;
}
.grouptitle1 {
	color:  #e21313;
}
.grouptitle2 {
	color:  #b413e2;
}
.grouptitle3 {
	color:  #0a8c23;
}
.grouptitle4 {
	color:  #598af8;
}
.grouptitle5 {
	color:  #f17406;
}
.grouptitle6 {
	color:  #1fa2a0;
}
.grouptitle7 {
	color:  #f1f371;
}
.grouptitle8 {
	color:  #2d0576;
}
.grouptitle9 {
	color:  #f85376;
}

a.teamplayer
{
	color:   var(--color_2);
	text-decoration:none;
}
a.teamplayer:hover
{
	color:   var(--color_3);
}
a.links
{
	color:   var(--nav_link_color);
	text-decoration:none;
	padding: 10px 0px;
}
a.links:hover
{
	color:   var(--nav_link_hover_color);
	padding: 10px 0px;
}
.iweeks
{
	font-family:  var(--title_font_2);
	font-size:  18px;
	color:   #1571b5;
font-weight:600;
	text-decoration:none;
	padding: 5px 0px;
	margin:0;
}
.ruleh
{
	font-family:  var(--title_font_2);
	font-size:  18px;
	color:   #8b0000;
font-weight:600;
	text-decoration:none;
	padding: 0px;
	margin: 5px;
}
.ruleb
{
	font-family:  var(--title_font_2);
	font-size:  15px;
padding:0 5px 5px 5px;
margin:0;
 }
.rulebw
{
	font-family:  var(--title_font_2);
	font-size:  12px;
padding:0 2px;
margin:0;
 }.eve
{
	font-family:  var(--title_font_2);
	font-size:  15px;
	color:   #652b82;
font-weight:600;
	text-decoration:none;
	padding: 3px 0px;
	margin:0;
}
.played
{
	font-family:  var(--title_font_2);
	font-size:  13px;
	color:   #1571b5;
       font-weight:600;
	text-decoration:none;
	padding: 3px 0px;
margin: 2px 0;
}
a.weeks
{
	font-family:  var(--title_font_2);
	font-size:  18px;
	color:   #652b82;
font-weight:600;
	text-decoration:none;
	padding: 10px 0px;
}
a.weeks:hover
{
	color:   #e21f26;
	padding: 10px 0px;
}
a.diam
{
	color:   #860000;
	text-decoration:none;
}
a.diam:hover
{
	color:   #000;
	text-decoration:none;
}
a.diam2
{
	color:   #860000;
	text-decoration:none;
}
a.diam2:hover
{
	color:   #000;
	text-decoration:none;
}
a.even
{
	color:   #fff;
	text-decoration:none;
}
a.even:hover
{
	color:   #000;
	text-decoration:none;
}
a.odd
{
	color:   #8b0000;
	text-decoration:none;
}
a.odd:hover
{
	color:   #000;
	text-decoration:none;
}
div.adminlinks {
	background:  var(--admin_nav_bg_color);
	border:  var(--nav_link_border);
	border-style:  var(--admin_nav_link_border_style);
	color:   var(--admin_nav_color);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) inset, 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

a.adminlinks {
	color:   var(--admin_nav_link_color);
	text-decoration:none;
	padding: 10px 0px;
}
a.adminlinks:hover	{
	color:   var(--admin_nav_link_hover_color);
	padding: 10px 0px;
}
div.adminlinksmo {
	background:  var(--nav_bg_color);
	border:  var(--nav_link_border);
	border-style:  none none solid none;
	font-family:  var(--nav_font);
	font-size:  var(--nav_size);
	font-weight:  var(--nav_weight);
	text-align: center;
	padding: 10px;
	color:   var(--nav_color);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

a.adminlinksmo {
	color:   var(--nav_link_color);
	text-decoration:none;
	padding: 10px 0px;
}
a.adminlinksmo:hover	{
	color:   var(--nav_link_hover_color);
	padding: 10px 0px;
}
div.adminlinksho {
	background:  #000;
	border:  var(--nav_link_border);
	border-style:  var(--admin_nav_link_border_style);
	color:   var(--admin_nav_color);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) inset, 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

a.adminlinksho {
	color:   var(--admin_nav_link_color);
	text-decoration:none;
	padding: 10px 0px;
}
a.adminlinksho:hover	{
	color:   var(--admin_nav_link_hover_color);
	padding: 10px 0px;
}

.copy, a.copy:hover
{
	font-family:  var(--copy_font);
	font-size:  var(--copy_size);
	color:   var(--copy_color);
}

.flex-container {
	display: flex;
	flex-wrap: wrap;
	align-items: top;
	justify-content: center;
	padding:3px;
}
.sortby {
	margin: auto;
	color:   var(--color_2);
font-weight:600;
	font-size:  13px;
padding: 5px;
	text-decoration:none;
}
a.sortbyactive
{
	margin: auto;
	color:   var(--color_5);
	padding: 5px;
	text-decoration:none;
}
.flexleaderstats{
 background: var(--flexleader_bg);
font-size: var(--display_size);
font-weight: 900;
text-align:center;
padding:0px;
}

a.sortby:hover
{
	margin: auto;
	color:   var(--color_3);
	padding: 5px;
	text-decoration:none;
}

a.sortbyev:hover
{
	margin: auto;
	color:  var(--color_5);
	padding: 5px;
	text-decoration:none;
}
table.eventinfo td {
    font-size: 13px;
}
.flexleader{
border-left: 1px solid #8b0000;
border-right: 1px solid #8b0000;
border-bottom: 1px solid #8b0000;
background: var(--flexleader_bg);
font-size: var(--display_size);
font-weight: 900;
text-align:center;
margin:3px;
padding:0px;
border-radius: 25px;
min-width:200px
}
.flexleadertrophy{
background: var(--flexleader_bg);
font-size: var(--display_size);
text-align:center;
margin:5px;
padding:0px;
border-radius: 25px;
min-width:150px
}
.flexrules{
border: 1px solid #8b0000;
background: var(--flexleader_bg);
font-size: var(--display_size);
text-align:center;
margin:3px;
padding:0px;
border-radius: 25px;
max-width:300px
}

img.trophyimage{
border: 1px solid  var(--color_3);
	max-height:300px;
        border-radius: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img.profimage{
float: left;
border: 1px solid  #652b82;
	max-height:100px;
	max-width:200px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img.profimagemp{
border: 1px solid  #652b82;
	max-height:100px;
	max-width:200px;
}
img.champimage{
border: 1px solid  var(--color_3);
	max-height:200px;
        border-radius: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.trophyname{
	font-family:  var(--rankname_font);
	font-size:  var(--trophyname_size);
	text-align:center;
	border-top: 1px solid  var(--color_2);
	border-bottom: 1px solid  var(--color_2);
	background: var(--color_3);
	margin:0;
	color:   var(--color_4);
	padding: 5px;
}
.rankname{
	font-family:  var(--rankname_font);
	font-size:  var(--rankname_size);
	text-align:center;
	margin:0;
	color:   #FFF;
	padding: 5px;
	background: #8b0000;
	border-radius: 25px;
}
.rankname:hover
{
color: #fff;
}
.flexboard {
	font-size:  var(--display_size);
	color:  var(--color_5);
}

.flexboard:hover
{
	color:  var(--color_3);
}
.gamedisplay {
background: #000;
	font-family: var(--body_font);
	font-size:   var(--display_size);
 	border: solid 1px  var(--color_4);
 	color:  var(--color_1);
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px;
 }
.gamedisplay2 {
	font-size:   11px;
 	border: solid 1px  var(--color_3);
 	color:  var(--color_1);
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px;
 }
table.challengestats {
	font-family: var(--lb_font);
	font-size: var(--lb_size);
 	border: solid 1px  var(--color_3);
 	color: var(--lb_color);
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px
 }
td.challengestats {
	font-family: var(--lb_font);
	font-size: 14px;
 	border: solid 1px var(--color_3);
 	color: var(--lb_color);
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px
 	}

table.manplay {
	font-family: var(--lb_font);
	font-size: var(--lb_size);
 	border: solid 1px  var(--color_3);
 	color: var(--lb_color);
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px
 }
td.manplay {
	font-family: var(--lb_font);
	font-size: 14px;
 	border: solid 1px var(--color_3);
 	color: var(--lb_color);
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px
 	}
td.head {
	background: #000;
	font-family: var(--lb_font);
	font-size: var(--lb_size);
 	border: solid 1px #8b0000;
 	color: #fff;
	font-weight:600;
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px
 	}
td.subhead {
	background: #fff;
	font-family: var(--lb_font);
	font-size: var(--lb_size);
 	border: solid 1px var(--color_3);
 	color: #000;
 	font-weight:600;
	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px
 	}
td.odd {
	background: #909090;
	font-family: var(--lb_font);
	font-size: var(--lb_size);
 	border: solid 1px #000;
 	color: #8b0000;
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px;
 	font-weight:600;
 	}
td.even {
	background: #8b0000;
	font-family: var(--lb_font);
	font-size: var(--lb_size);
 	border: solid 1px #000;
 	color: #fff;
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px;
 	font-weight:600;
 	}
td.odd2 {
	background: #909090;
	font-family: var(--lb_font);
	font-size: var(--lb_size);
 	border-bottom: solid 1px #000;
 	color: #8b0000;
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px;
 	font-weight:600;
 	}
td.even2 {
	background: #8b0000;
	font-family: var(--lb_font);
	font-size: var(--lb_size);
 	border-bottom: solid 1px #000;
 	color: #fff;
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px;
 	font-weight:600;
 	}
td.diam {
	background: #909090;
	font-family: var(--lb_font);
	font-size: var(--lb_size);
 	border: solid 1px #000;
 	color: #8b0000;
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px;
 	font-weight:600;
 	}
td.diam2 {
	background: #fff;
	font-family: var(--lb_font);
	font-size: var(--lb_size);
 	border: solid 1px #000;
 	color: #860000;
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px;
 	font-weight:600;
 	}
 	
 	table.leaderboard {
	font-family: var(--lb_font);
	font-size: var(--lb_size);
 	border-left: solid 1px  var(--color_3);
 	border-right: solid 1px   var(--color_3);
 	color: var(--lb_color);
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px
 }
td.leaderboard {
	font-family: var(--lb_font);
	font-size: var(--lb_size);
 	border-bottom: solid 1px var(--color_3);
 	border-top: solid 1px var(--color_3);
 	color: var(--lb_color);
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px
 	}
td.leaderboard1 {
	font-family: var(--lb_font);
	font-size: var(--lb_size);
 	border: solid 1px var(--color_3);
 	color: var(--lb_color);
 	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px}
td.leaderboardl {
	font-family: var(--lb_font);
	font-size: var(--lb_size);
 	border-bottom: solid 1px var(--color_3);
 	border-left: solid 1px var(--color_3);
 	color: var(--lb_color);
	border-collapse: collapse;
 	margin:auto;
 	text-align:center;
 	padding: 5px
 	}

.pop{
	color:  var(--color_5);
margin: 2px 0;
}

.popsmall{
	color:  var(--color_5);
	font-size: 12px;
}
.daypop{
	font-size: 24px;
	font-weight:900;
	color:  var(--color_5);
}

a, a:hover
{
	margin: auto;
	color:  var(--color_5);
	text-decoration:none;
}

.req{
	font-family: 'Nunito', sans-serif;
	font-size: 9px;
	 color:red;
}

table.form{
	font-family: var(--lb_font);
	font-size: var(--lb_size);
	width:   var(--max_width);
 	color: var(--lb_color);
 	padding: 0px 2px;
	border: 1px solid  var(--color_3);
  border-collapse: collapse;
  }
td.form{
	font-family: var(--lb_font);
	font-size: var(--lb_size);
	width:   var(--max_width);
 	color: var(--lb_color);
 	padding: 4px 4px;
  }
table.poste td{
	font-family: var(--lb_font);
	font-size: var(--lb_size);
	width:   var(--max_width);
 	color: var(--lb_color);
 	padding: 4px;
 	}

select {
	padding: 2px 2px;
	border: 1px solid  var(--color_3);
	border-radius: 4px;
	font-family: var(--lb_font);
	font-size: var(--lb_size);
 	color: #000;
 	font-weight: 600;
}
.event_header{
	border: solid 1px  var(--eh_border_color);
	background: var(--eh_bg_color);
	font-family:  var(--eh_font);
	font-size:  var(--eh_size);
	color:  var(--eh_color);
	text-align:center;
	padding: 5px;
}

/* Style the tab */
.tab {
	overflow: hidden;
	border: 1px solid  var(--color_3);
	background-color: var(--tab_color);
	color:  var(--color_3);
	width:380px;
	margin:auto;
	font-family: var(--lb_font);
	font-size: var(--lb_size);
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: inherit;
	color: var(--tab_text_color);
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 16px 12px;
	transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
	background-color:  var(--tab_hover_color);
	color:  var(--tab_hover_text_color);
}

/* Create an active/current tablink class */
.tab button.active {
	background-color:  var(--tab_active_color);
	color:  var(--tab_active_text_color);
}

/* Style the tab content */
.tabcontent {
	display: none;
	padding: 6px 6px;
	border: 1px solid   var(--color_3);
	border-top: none;
	background-color:  var(--tab_bg_color);
	width:380px;
	margin:auto;
}

input[type=button], input[type=submit], input[type=reset] {
	padding: 8px;
	font-size: 10px;
	color:  var(--color_2);
	background:  var(--color_3);
	border: none;
	border-radius: 5px;
	text-decoration:none;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.19);
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
	padding: 8px;
	font-size: 10px;
	color:  var(--color_2);
	background:  var(--color_4);
	border: none;
	border-radius: 5px;
	text-decoration:none;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.19);
}

.btn {
	padding: 10px;
	font-size: 15px;
	color:  var(--color_1);
	background:  var(--color_3);
	border: none;
	border-radius: 5px;
	text-decoration:none;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.btn:hover {
	padding: 10px;
	font-size: 15px;
	color: var(--color_2);
	background:  var(--color_4);
	border: none;
	border-radius: 5px;
	text-decoration:none;
	box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.datebtn {
	padding: 8px;
	font-size: 10px;
	color:  var(--color_1);
	background:  var(--color_3);
	border: none;
	border-radius: 5px;
	text-decoration:none;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.19);
}
.datebtn:hover {
	padding: 8px;
	font-size: 10px;
	color: var(--color_2);
	background:  var(--color_4);
	border: none;
	border-radius: 5px;
	text-decoration:none;
	box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.19);
}


hr.hero{
border: none;
    height: 2px;
    width:70%;
    /* Set the hr color */
  background: linear-gradient(to right, #ff0000, #000, #ff0000); /* Modern Browsers */
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);    }


hr.event{
border: none;
    height: 1px;
    /* Set the hr color */
    color: var(--color_3); /* old IE */
    background-color: var(--color_3); /* Modern Browsers */
    }
.center {
  text-align: center;
}

.pagination {
  display: inline-block;
}
.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.pagination a {
	color: var(--color_2);
	float: left;
	padding: 8px 16px;
	text-decoration: none;
	transition: background-color .3s;
	border: 1px solid #ddd;
	margin: 0 1px;
}

.pagination a.active {
	background-color: #8b0000;
	color: var(--color_1);
	border: 1px solid #000;
}
.pagination a:hover:not(.active) {
	background-color: var(--color_4);
}

.tooltip {
	position: relative;
	display: inline-block;
/*	border-bottom: 1px dotted black;  If you want dots under the hoverable text */
}
	
/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	font-family: var(--tt_font);
 	font-size: var(--tt_size);
	background-color:  var(--tt_bg_color);
	color: var(--tt_color);
	whitespace:nowrap;
	padding: 0px;
	border-radius: 6px;
	border: 1px solid  var(--color_3);
	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	top: 100%;
	left: 50%;
	margin-left: -60px;
}
	
	/* Show the tooltip text when you mouse over the tooltip container */
	.tooltip:hover .tooltiptext {
		visibility: visible;
}

* {
  box-sizing: border-box;
}
.bg_color_2 {
	background:  var(--bg_color_2);
}
.bg_color_3 {
	background:  var(--bg_color_3);
}
.bg_color_4 {
	background:  var(--bg_color_4);
}
.bg_color_5 {
	background:  var(--bg_color_5);
}
.bg_color_6 {
	background:  var(--bg_color_6);
}
.bg_color_7 {
	background:  var(--bg_color_7);
}

@media only screen and (max-width: 600px) {
  body{width: 100%;}
  .links{  text-align: center;
	font-family: 'Nunito', sans-serif;
      font-size: 12px;
    font-weight:600;
}
div.main{
background: #fff;
  text-align: center;
padding:0px;
}
div.user{max-width:100%}
.pagination a {
  color: black;
  float: left;
  padding: 4px 4px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 1px;
}

}