:root {
    --color-primary: white;
    --color-cyan: #00f9ff;
    --color-faded: #60796f;

    --bg-dark: #191918;
    --bg-medium: #343434;

    --border-1: #bcbcbc;

    /* Main Button */
    --button-1-bg: #262e43;
    --button-1-border: #262e43;
    --button-1-hover-bg: #262e43;
    --button-1-hover-border: var(--color-primary);
    /* Secondary Button */
    --button-2-bg: #262e43;
    --button-2-border: #262e43;
    --button-2-hover-bg: #262e43;
    --button-2-hover-border: #262e43;
}

@font-face {
  font-family: "RuneScape Bold";
  src: url("https://paragonrsps.com/resources/RuneScape-Bold-12.ttf")
    format("truetype");
}

nav {
    font-family: "RuneScape Bold", Sans-Serif;
}


.container {
    max-width: 1420px;
}
.container-xl {
    max-width: 1700px;
}
a {
    font-weight:700;
    color:#fff;
    transition:.2s all;
}


p {
    color:var(--color-primary);
}

h1 {
    color:#fff;
    font-weight:700;
    text-transform:uppercase;
}

h2 {
    color:var(--color-primary);
    font-weight:700;
    text-transform:uppercase;
    font-size:72px;
}

h6 {
    color: #ffffff;
}

h3 {
    font-family: "RuneScape Bold", Sans-Serif;
    font-weight:700;
    text-transform:uppercase;
    color:var(--color-primary);
    text-shadow:0 0 24px rgb(0 27 221 / 75%);
    margin-top: 3rem;
    margin-bottom:20px;
}

h4 {
    font-family: "RuneScape Bold", Sans-Serif;
    font-weight:400;
    color: var(--color-cyan);
}

p {
    font-size:14px;
    line-height:30px;
}

#header__topbar {
    background-color: #191512;
    height:55px;
    padding:16px 10%;
}

#header__topbar p {
    color:#b2b4b7;
    font-weight:200;
    font-size:14px;
}

.players-online {
    font-weight:700;
    color:#bb5a54;
}


#logo {
    margin:0 auto;
    display:block;
    position:relative;
    text-align:center;
    width: 500px;
    max-width: 40%;
    opacity: 1;
    transition:.2s all;
}

#logo:hover {
    filter: brightness(120%);
}

#header__content {
    margin:100px auto 70px auto;
    text-align:center;
}

#header__content #buttons {
    max-width: 600px;
    width: 100%;
    margin: 10px auto;
}


.btn__blurple {
    padding:10px 40px;
    color:#fff;
    font-weight:bold;
    background-color:black;
    border-radius:10px;
    border:3px solid var(--color-primary);
    transition:.2s all;
    display:inline-block;
}

.btn__blurple:hover {
    background-color:#b54545;
}

.btn--header {
    padding:10px 50px;
    color:#fff;
    font-weight:bold;
    border-radius:10px;
    transition:.2s all;
    width: 100%;
}
.btn__cyan {
    background-color:black;
    border:3px solid var(--color-cyan);
}

.btn__atx {
    background-color:black;
    border:3px solid #bb5f5f;
}

.btn__atx:hover {
    background-color:#b54545;
}

.btn__cyan:hover {
    background-color:rgba(81,216,254,0.3);
}

.btn__white {
    background-color:rgba(255,255,255,0.1);
    border:3px solid #fff;
}

.btn__white:hover {
    background-color:rgba(255,255,255,0.3);
}

.btn__orange, .btn__white, .btn__blurple {
    box-shadow:0 3px 7px rgba(0,0,0,0.5);
}

.section {
    padding:55px 10%;
}

.card {
    background:var(--bg-dark);
    box-shadow:0 0 7px rgba(0,0,0,0.35) inset;
    border:1px solid rgba(221,79,0,0.3);
}

#about, #discord, .content-container, .vote-card {
    background-color: var(--bg-dark);
    box-shadow:0 0 17px rgba(0,0,0,0.3);
}

.vote-card {
    background-position: top center, center;
}

#features {
    margin-top:50px;
}

.content-box {
    
    text-align:center;
}

.video-details {
    text-align:right;
}


.copyright {
    font-size: 14px;
    padding: 20px 10%;
    text-transform: uppercase;
}

.main-content {
   background-color: var(--bg-dark);
   box-shadow:0 1px 0 rgba(255,255,255,0.1) inset, 0 0px 15px rgba(0,0,0,0.6);
   border-top: 1px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
}

.video-container {
  width: 100%;
  padding-top: 56.25%;
  height: 0px;
  position: relative;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

::-webkit-scrollbar-track{
    border-radius: 0px;
    background-color: var(--bg-medium);
}

::-webkit-scrollbar{
    width: 12px;
}

::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background: var(--color-primary);
}

.form-control {
	background-color:var(--bg-medium);
	border-color: var(--border-1);
    color: white;
}

.form-control:focus, .form-control:active {
	outline: 0 !important;
	box-shadow: none !important;
	border-color: var(--color-primary) !important;
    background-color: var(--bg-dark);
    color: var(--color-primary);
}

.alert-danger {
    color: #999999;
	background-color: var(--bg-dark);
	border-color: var(--border-1);
}

.alert-basic {
    color: #999999;
	background-color: var(--bg-dark);
	border-color: var(--border-1);
}


.add-btn, .add-btn:hover, .add-btn:focus, .add-btn:active{
	color:white !important;
	background-color: var(--bg-medium) !important;
	border-color: var(--border-1) !important;
	outline: 0 !important;
}

.badge {
    background-color:var(--bg-medium);
    border-radius:2px;
    padding: 5px;
    margin-right: 5px;
    color: var(--color-cyan);
}

.btn-success {
    color: #ffffff;
    background-color: var(--button-1-bg);
    border-color: var(--button-1-border);
}
.btn-success:hover, .btn-success:active, .btn-success:focus {
    background-color: var(--button-1-hover-bg);
        border-color: var(--button-1-hover-border) !important;
}

.btn-success:active:hover, .btn-success.active:hover, .open > .dropdown-toggle.btn-success:hover, .btn-success:active:focus, .btn-success.active:focus, .open > .dropdown-toggle.btn-success:focus, .btn-success:active.focus, .btn-success.active.focus, .open > .dropdown-toggle.btn-success.focus {
    color: #ffffff;
    background-color: var(--button-1-hover-bg);
    border-color: var(--button-1-hover-border) !important;
}

.btn-primary {
    color: #ffffff;
    background-color: var(--button-2-bg);
    background-color: var(--button-2-border);
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--button-2-hover-bg);
    background-color: var(--button-2-hover-border);
}

.box {
	background-color: #262e43;
    background-image: url(https://img.freepik.com/free-photo/view-apocalyptic-dark-clouds_23-2151065807.jpg?size=626&ext=jpg&ga=GA1.1.44546679.1716854400&semt=ais_user);
    background-repeat: no-repeat;
    background-size: cover;
	min-height: 300px;
	border-radius: 5px;
	padding: 20px;
	padding-bottom:40px;
	color: white;
	border-style: solid;
	border-width: 5px;
	border-color: #1d1d1d;
}

.box2 {
	background-color:#211c18;
	border-radius: 5px;
	padding: 5px;
}

.header-text {
	height: 100px;
}
h1.header {
	font-family: "RuneScape Bold", Sans-Serif;
	font-size: 60px;
	text-transform: uppercase;
	color:#FFF;
}
h1.header .left {
	color: #FFF;
	background-color:#FFF;
	padding-left: 10px;
	padding-right:10px;
	border: solid 1px black;
}
h1.header .right {
	color: #FFF;
	background-color:black;
	padding-left: 10px;
	padding-right:10px;
	border: solid 1px black;
}
form.vote {
	width:300px;
	margin:auto;
	margin-top: 25px;
}
input.error {
	border: solid 1px red;
}
.site {
	margin:3px;
	transition: all .3s ease-in-out;
}
.footer {
	margin-top: 20px;
	color:#444;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    vertical-align: middle;
}

.containerv {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  justify-content: center;  /* Center items horizontally within the flex container */
  width: 80%;  /* Set the width of the container */
  max-width: 1200px;  /* Optional: max width for the container */
}

@media (min-width: 768px) {
  .containerv {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .containerv {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .containerv {
    width: 1170px;
  }
}

.col-md-8 {
    position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 992px) {
  .col-md-8 {
    float: left;
  }
}

.text-center {
  text-align: center;
}

.btn-default {
  color: #333333;
  background-color: white;
  border-color: #cccccc;
}
.btn-default:focus,
.btn-default.focus {
  color: #333333;
  background-color: #cecece;
  border-color: #8c8c8c;
}
.btn-default:hover {
  color: #333333;
  background-color: #cecece;
  border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #333333;
  background-color: #cecece;
  border-color: #adadad;
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
  color: #333333;
  background-color: #bcbcbc;
  border-color: #8c8c8c;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: white;
  border-color: #cccccc;
}
.btn-default .badge {
  color: white;
  background-color: #333333;
}

.angry-grid {
   display: grid; 

   grid-template-rows: 1fr;
   grid-template-columns: 1fr 1fr;
   
   gap: 0px;
   height: auto;
   
}
  
#item-0 {
   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 2;
   grid-column-end: 2;
   
}
#item-1 {
   grid-row-start: 1;
   grid-column-start: 2;

   grid-row-end: 2;
   grid-column-end: 3;
   
}

.container-info-vote {
    background-color: #1a1a1a;
    border-style: solid;
    border-width: 2px;
    border-color: #1d1d1d;
    height: auto;
    width: auto;
    margin-left: 15%;
}

.vote-rewards {
    color: var(--color-primary);
}

.top-voters {
    margin-top: 1rem;
    font-size: 12px;
}

.top-voters-title {
  font-size: 24px;
  padding-left: 0.5rem;
  text-transform: uppercase;
  color: white;
  
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}


.top-voters-list {
    padding-left: 0px;
}

.top-voters-list table {
  color: white;
}

table {
  counter-reset: item;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 0px;
}

td {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left !important;
  margin: 0px;
  padding: 0px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 16px;
}

tr {
    padding-right: 10%;
}

.rank {
    display: inline-block;
  float: left;
  width: 3rem;
  text-align: right;
  padding-left: 5%;
}

.name {
    padding-left: 10%;
}

.count {
  margin-left: auto;
  padding-right: 10%;
}

.grey {
  background-color: #222222;
}

.black {
  background-color: #1e1e1e;
}

.btn-continue {
    color: #ffffff;
    background-color: var(--button-1-bg);
    border-color: black;
}

*, ::after, ::before {
  box-sizing: border-box;
}

.container-atx-vote {
  max-width: 1320px;
  width: 100%;
  padding-right: var(--bs-gutter-x,.75rem);
  padding-left: var(--bs-gutter-x,.75rem);
  margin-right: auto;
  margin-left: auto;
  margin-top: 3rem;
}

.container-atx {
  max-width: 1320px;
  width: 100%;
  padding-right: var(--bs-gutter-x,.75rem);
  padding-left: var(--bs-gutter-x,.75rem);
  margin-right: auto;
  margin-left: auto;
  margin-top: 10rem;
}

.main-content-atx {
  background: #151515;
  border-top: solid 1px var(--color-primary);
  border-bottom: solid 1px var(--color-primary);
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 2rem;
}

.p-3-atx {
  padding: 1rem!important;
}

.title-atx {
  width: auto;
  min-height: 1rem;
  font-size: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #0a0a0a;
  color: var(--color-primary);
  border-radius: 5px;
}

.profile-content-container {
  display: flex;
}

.profile-card-atx {
  width: 33.3%;
  height: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: var(--color-primary);
  background-color: #0a0a0a;
  margin-top: 1rem;
  border-radius: 5px;
  box-sizing: border-box;
}


.profile-picdiv {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-pic {
  border-radius: 50%;
}

.profile-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.profile-card-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
}


#openaccount {
  background-color: #151515;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 0.5rem;
  width: 60%;
  white-space: normal;
  word-wrap: break-word;
}

#opensettings {
  background-color: #151515;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 0.5rem;
  width: 60%;
  white-space: normal;
  word-wrap: break-word;
}

#signout {
  background-color: #151515;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 0.5rem;
  width: 60%;
  white-space: normal;
  word-wrap: break-word;
}

.button-centers {
  justify-content: center;
}

#profilepayments {
  background-color: #151515;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  margin-bottom: 0.5rem;
  width: 49%;
  float: left;
  white-space: normal;
  word-wrap: break-word;
}

#votestats {
  background-color: #151515;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  margin-bottom: 1.5rem;
  width: 49%;
  float: right;
  white-space: normal;
  word-wrap: break-word;
}

.payment-info-table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  border-style: solid;
  border-width: 0.5px;
  border-color: rgb(58, 57, 57);
  margin-top: 2rem;
}

.payment-info-table th {
  background-color:#151515;
}

.payment-info-table th,
.payment-info-table td {
  padding: 8px;
  display: table-cell;
  text-align: center !important;
  padding: 1rem;
}

.payment-info-table th {
  font-weight: bold;
}

.payment-info-table td {
  text-align: center;
}

.container-2-boxes {
  display: flex;
  width: 100%;
}

.left-box {
  flex: 1;
  margin-left: 1rem;
  margin-right: 1rem;
}

.pagination-container {

}

.pagination-info {
  margin-right: 10px;
}

.pagination-dropdown {
  padding: 5px;
  border-radius: 5px;
  border: none;
  background-color: #f1f1f1;
  font-size: 14px;
  cursor: pointer;
}

.pagination-dropdown option {
  background-color: white;
  color: black;
  font-size: 14px;
}

.left-content-card {
  width: 33.3%;
  height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: var(--color-primary);
  margin-top: 1rem;
  border-radius: 5px;
  box-sizing: border-box;
}

.right-box {
  width: 66.67%;
  padding: 1rem;
  color: var(--color-primary);
  margin-top: 1rem;
  border-radius: 5px;
  float: right;
  margin-left: 2rem;
}

.left-content-card-vote {
  width: 33.3%;
  height: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: var(--color-primary);
  margin-top: 1rem;
  border-radius: 5px;
  box-sizing: border-box;
}

.right-box-vote {
  width: 66.67%;
  padding: 1rem;
  color: var(--color-primary);
  margin-top: 1rem;
  border-radius: 5px;
  float: right;
  margin-left: 2rem;
}

.right-box {
  flex: 1;
}

.cart-container {
  background-color: #2b2929;
  height: auto;
  padding: 2rem;
  margin-bottom: 1rem;
  margin-right: 1rem;
  margin-left: 1rem;
  display: border-box;
  border-style: solid;
  border-color: #222b35;
  border-width: 2px;
  border-radius: 5px;
}

.hs-table-container {

}

.hs-table {
  width: 100%;
  border-collapse: collapse;
  display: table !important;
}

.hs-table th {
  color: #5d727a;
}

.hs-table tr {
  color: #91918d;
}

.hs-table td {
  display: table-cell !important;
}

.hs-table tr:nth-child(even) {
  background-color: #1e1e1e;
  padding-left: 10px;
}

.hs-table tr:nth-child(odd) {
  background-color: #222222;
  padding-left: 10px;
}


.hs-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.hs-pagination a {
  text-decoration: none;
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.hs-pagination a:hover {
  background-color: #f2f2f2;
}

.hs-pagination .active {
  background-color: #4CAF50;
  color: white;
}

.hs-pagination .current-page {
  color: green;
}

.clearfix-hs::after {
  content: "";
  display: table;
  clear: both;
}

.primary-text-color a {
  color: var(--color-primary);
}

.parent-container-hs {
  width: 70%;
  margin: 0 auto; /* centers horizontally */
  border-top: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  background-color: #1A1A1A !important;
  padding: 1rem;
}

.sub-containerleft-hs {
  width: 70%;
  float: left;
}

.sub-containerright-hs {
  width: 30%;
  float: right;
}

.hs-container {
  max-width: 60%;
  margin: 0 auto;
  border-top: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  background-color: #1A1A1A;
  padding: 10px;
}

.hs-titlebar {
  background-color: #1e1e1e;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: solid 4px #2e2e2e;
}

.hs-title-text {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.hs-title-text p {
  margin: 0;
  font-size: 16px;
}

.dropdowns-container {
  padding-right: 1rem;
  display: flex;
  align-items: center;
}

.dropdown-container {
  margin-left: 10px;
}

.dropdown-container select {
  padding: 5px;
  background-color: #272727;
  border-color: #272727;
  transition: background-color .1s ease-in-out;
  color: var(--color-primary);
}

#filter {
    background-color: #1e1e1e;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  text-transform: uppercase;
}

.search-container {
  background-color: #1E1E1E;
  margin-left: 0.5rem;
  width: 100%;
  padding: 5%;
}

.search-header {
  color: var(--color-primary);
  border-bottom: solid 4px #2e2e2e;
  text-align: center;
  font-size: 22px;
}

.search-body {
  padding: 0.5rem;
  margin-top: 1rem;
}

.search-btn {
  cursor: pointer;
  color: var(--color-primary);
  border-color: #272727;
  background-color: #272727;
  transition: background-color .1s ease-in-out;
  box-shadow: none !important;
  text-decoration: none !important;
  width: 50%;
  margin: 2rem;
  margin-bottom: 0;
  font-size: 20px;
}

.shadow-hs {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

.skills-container {
  background-color: #1E1E1E;
  margin-left: 0.5rem;
  width: 100%;
  padding: 5%;
  margin-top: 1rem;
}

.skill-item-hs {
  color: white;
  padding: 0.5rem;
  font-size: 12px;
  text-align: center;
  border-bottom: solid 1px #2e2e2e;
}

#payment-form {
  width: 20%;
  margin: 0 auto;
  margin-top: 5%;
  text-align: left;
  padding: 2rem;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  box-shadow: 1px 1px 5px var(--color-primary);
  background-color: #242424;
  color: white;
}

#display-amount {
  margin: 25px auto;
  text-align: left;
  padding: 1rem;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  box-shadow: 1px 1px 5px var(--color-primary);
  background-color: #242424;
  color: rgb(19, 189, 70);
}

#payment-form label {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

#card-element {
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  padding: 0.8rem 1rem;
  margin-bottom: 1.5rem;
}

#submitBtn {
  width: 100%;
  padding: 1rem;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

#payment-form input[type="text"], #payment-form input[type="number"] {
  width: 100%;
  padding: 0.8rem 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  font-size: 1.2rem;
}

.maketop-margin {
  margin-top: 6rem;
}

.makepadding-sides {
  padding: 2rem;
}