button {
  bottom:1px;
  cursor:pointer;
  margin-right:8px;
  position:relative;
  padding:4px 11px;
  border:1px solid #003f3f;
  border-radius:6px;
  background:none;
  color:#0085a6;
  background-color:#fff;
  font-size:1vw;
  transition:all .3s ease-in-out;
}

button:hover {
  background:#0085a6; 
  color:#fff;
}

.my_button {
  font-size: 1wv;
  font-weight: 400;
  text-transform: uppercase;
  width: 60%;
  height: auto;
  bottom:1px;
  margin-right:8px;
  position:relative;
  border-radius:6px;
  border: 1px solid rgba(255, 255, 255, 0.2);

  color:#FFF;
  background: #00007F;
  transition:all .3s ease-in-out;

  padding: 0.3rem;
  width: 100%;
  cursor: pointer;
}

.my_button:hover {
    background:#FFFFFF; 
    color:#00007F; 
}

/* Tables */
/* Responsive scroll-y table */
.table-responsive {
	min-height:.01%;	
	overflow-x:auto;
}
@media screen and (max-width: 801px) {
	.table-responsive {
		width:90%; 
		overflow-y:hidden; 
		-ms-overflow-style:-ms-autohiding-scrollbar;
	}
}
.global_table {
	border-collapse:collapse;
	border-spacing:0;
	-webkit-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);
	-moz-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);
	box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);
	margin-bottom:40px;
	margin-top:.5em;
	width:100%; 
	max-width:100%;
        border-radius: 35px;
        margin-left: auto;
        margin-right: auto;
}
/* Default table */
table {
	border-collapse:collapse;
	border-spacing:0;
	-webkit-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);
	-moz-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);
	box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);
	margin-bottom:40px;
	margin-top:.5em;
	width:95%; 
	max-width:95%;
        border-radius: 15px;
        margin-left: auto;
        margin-right: auto;
}

table thead tr {
	border-bottom:1px solid #001f1f; 
	color:#fff; 
	background-color: #000
}
table tfoot tr {
	border-top:1px solid #001f1f;
}
table thead th, table tfoot th {
	background-color:#00cfcf;
	color:#000;
	font-size:1vw;
	line-height:1.8;
	padding: 15px 14px 13px 14px;
	position:relative;
	text-align:center;
	text-transform:uppercase;	
}
table tbody tr {
	background-color:#fff;
}

table tbody a:hover {
	color:#ffffff;
}
table tbody tr:hover {
	background-color:#00afaf; 
	color:#000000;
}
table td:active {
          background:red;
          border-width: 1px;
          border-style: solid;
          border-color: #001f1f;
      }

table th{
	background-color:#000;
	color:#000;
	border:1px solid #001f1f;
	padding:10px 14px;
	position:relative;
	vertical-align:middle;
        font-size: 16px;
}
table td {
	border:1px solid #001f1f;
	padding:10px 14px;
	position:relative;
	vertical-align:middle;
        font-size: 14px;
}
caption {
	font-size:1.111em; 
	font-weight:300; 
	padding:10px 0;
}

@media (max-width:1024px) {
	table {
		font-size: .944444em;
	}
}
@media (max-width:767px) {
	table {
		font-size: 0.6em;
	}
}

 /* Responsive table full */
@media (max-width: 767px) {
	.table-responsive-full {
		box-shadow:none;
	}
	.table-responsive-full thead tr, 
	.table-responsive-full tfoot tr {
		display:none;
	}
	.table-responsive-full tbody tr {
		-webkit-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);
		-moz-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);
		box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);
		margin-bottom:20px;
	}
	.table-responsive-full tbody tr:last-child {
		margin-bottom:0;
	}
	.table-responsive-full tr,
	.table-responsive-full td {
		display:block;
	}
	.table-responsive-full td {
		background-color:#fff;
		border-top:none;
		position:relative;
		padding-left:50%;
	}
	.table-responsive-full td:hover {
		background-color:#eee; 
		color:#000;
	}
	.table-responsive-full td:hover:before {
		color:hsl(0, 0%, 40%);
	}
	
	.table-responsive-full td:first-child {
		border-top:1px solid #001f1f;
		border-bottom: 1px solid #001f1f;
		border-radius: 4px 4px 0 0;
		color: #000;
		font-size: 1.2vw;
		font-weight: bold;
	}
	.table-responsive-full td:before {
		content: attr(data-label);
		display: inline-block;
		color: hsl(0, 0%, 60%);
		font-size: 14px;
		font-weight: normal;
		margin-left: -100%;
		text-transform: uppercase;
		width: 100%;
		white-space:nowrap;
	}
}

/* Sort table */
.sort-table-arrows {
	float:center; 
	transition:.3s ease;
	}
.sort-table-arrows button {
	float:center;
	margin:0; 
	padding:4px 8px;
	}
.sort-table-arrows .my_button {
	float:center;
	margin:0; 
	padding:4px 8px;
	}
.sort-table th.c_id {
    font-size:1vw;
    width:10% !important;
}
.sort-table th.name {
    font-size:1vw;
    width:33% !important;
}
.sort-table td.name {
    font-size:1vw;
    width:33% !important;
}
.sort-table th.category {
    font-size:1vw;
    width:10% !important;
}
.sort-table th.sub_category {
    font-size:1vw;
    width:10% !important;
}
.sort-table th.group {
    font-size:1vw;
    width:10% !important;
}
.sort-table th.j_grade {
    font-size:1vw;
    width:10% !important;
}
.sort-table th.grade {
    font-size:1vw;
    width:10% !important;
}

.sort-table td.grade {
    font-size:1vw;
    width:10% !important;
}
.sort-table td.vlink {
    font-size: 1vw;
    width:5% !important;
}
.sort-table th.vlink {
    font-size: 1vw;
    width:5% !important;
}
.sort-table th.c_id .sort-table th.votes th.grade {
    font-size:1vw;
}
.sort-table .name {
	font-size: 1.4em; 
	text-transform: uppercase; 
	font-weight: bold;
	}
.sort-table .c_id {
	font-size: 1.4em; 
	text-align: center; 
	text-transform: uppercase; 
	font-weight: bold;
	}
.sort-table .votes {
	font-size: 1.4em; 
	text-align: center; 
	text-transform: uppercase; 
	font-weight: bold;
	}
.sort-table .grade {
	font-size: 1.4em; 
	text-align: center; 
	text-transform: uppercase; 
	font-weight: bold;
	}
.sort-table .j_grade {
	font-size: 1.4em; 
	text-align: center; 
	text-transform: uppercase; 
	font-weight: bold;
	}

.sort-table .name small {
	font-size: 0.7em; 
	color: blue; 
	font-weight:normal;
	}
.sort-table .group small {
	font-size: 0.7em; 
	color: red; 
	font-weight:normal;
	}
.sort-table .grade small {
	font-size: 0.7em; 
	color: blue; 
	font-weight:normal;
	}
.sort-table .j_grade small {
	font-size: 0.7em; 
	color: blue; 
	font-weight:normal;
	}

.sort_table tbody a:hover {
	color:#ffffff;
	}
.sort_table tbody tr:hover {
	background-color:#afafaf; 
	color:#0000ff;
	}

@media (max-width:1024px) {
	.sort-table th,.sort-table-arrows {text-align:center;}
	.sort-table-arrows {float:none; padding:8px 0 0; position:relative; right:0px;}
	.sort-table-arrows button {bottom:0;}
	.sort-table-arrows .my_button {bottom:0;}
}
@media (max-width:767px) {
	.sort-table thead tr {border-bottom:none; display:block; margin:10px 0; text-align:center;}
	.sort-table thead tr th.category {display:none;}
	.sort-table td.category {display:none;}
	.sort-table thead tr th.sub_category {display:none;}
	.sort-table td.sub_category {display:none;}
	.sort-table th {
		border-bottom:1px solid #001f1f;
		border-radius:4px;
		display:inline-block;
		font-size:.75em;
		line-height:1;
		margin:3px 0;
		padding:10px;
	}
	.sort-table th.name, .sort-table th.c_id, .sort-table th.category, .sort-table th.sub_category .sort-table th.group, .sort-table th.votes .sort-table th.grade .sort-table th.vlink  {width: 100px !important;}
	.sort-table td.category:before {display:none;}
	.sort-table td.sub_category:before {display:none;}
	.sort-table td.name {letter-spacing:.03em; padding-left:14px;}
}

@media (max-width:640px) {
	.sort-table thead tr {border-bottom:none; display:block; margin:10px 0; text-align:center;}
	.sort-table thead tr th.group {display:none;}
	.sort-table td.group {display:none;}
	.sort-table th {
		border-bottom:1px solid #001f1f;
		border-radius:4px;
		display:inline-block;
		font-size:.75em;
		line-height:1;
		margin:3px 0;
		padding:10px;
	}
	.sort-table th.name, .sort-table th.c_id, .sort-table th.category, .sort-table th.group, .sort-table th.votes .sort-table th.grade .sort-table th.vlink {width: 100px !important;}
	.sort-table td.category:before {display:none;}
	.sort-table td.name {letter-spacing:.03em; padding-left:14px;}
	.sort-table td.grade {letter-spacing:.03em; padding-left:14px; height: 50px;}
	.sort-table td.vlink {letter-spacing:.03em; padding-left:14px; height: 50px;}
}

@media (max-width: 480px) {
	.table-responsive-full td {padding-left:14px;}
	.table-responsive-full td:before {display:block; margin-bottom:.5em; margin-left:0;}
	.table-responsive_full td.grade {letter-spacing:.03em; padding-left:14px; height: 50px;}
	.table-responsive_full td.vlink {letter-spacing:.03em; padding-left:14px; height: 50px;}
	.sort-table thead tr th.votes {display:none;}
	.sort-table td.votes {display:none;}
}