/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

.new-login-button-text {
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%); 
	color: #e3a471; 
	font-size: 18px; 
	font-weight: bold;
	font-family: 'Marcellus SC' !important;
}

span.checkbox.on {
    background-color: #000000 !important;
}

.login .message, .login .notice, .login .success {
    background-color: #980d0d !important;
}

.new-login-button-container {
	display: flex !important; 
	justify-content: center !important; 
	align-items: center !important; 
	padding-top: 50px !important;
	width: 100% !important; 
}

.new-login-button {
	border: none !important; 
	background: none !important; 
	outline: none !important; 
	cursor: pointer !important; 
	padding: 0 !important; 
	text-align: center !important; 
	position: relative !important;
}

.new-login-button:hover {
	border: none !important; 
	background: none !important; 
	outline: none !important; 
}

.login form#loginform input {
	padding: 10px 10px 10px 40px;
    border-image-source: linear-gradient(to right, #b37a36, #503614) !important;
    border-width: 1pt;
    border-image-slice: 1;
}

.bb-signup-field input {
	padding: 10px 10px 10px 40px !important;
    border-image-source: linear-gradient(to right, #b37a36, #503614) !important;
    border-width: 1pt !important;
    border-image-slice: 1 !important;
}

.mepr-form-input {
	padding: 0px 10px 2px 10px !important;
    border-image-source: linear-gradient(to right, #b37a36, #503614) !important;
    border-width: 1pt !important;
    border-image-slice: 1 !important;
	border-radius: 0 !important
}

.register-section div fieldset input {
	padding: 10px 10px 10px 40px !important;
    border-image-source: linear-gradient(to right, #b37a36, #503614) !important;
    border-width: 1pt !important;
    border-image-slice: 1 !important;
}

.entry-title {
	color: white !important;
}

.mepr_payment_method-wrapper {
	display: flex !important;
    grid-column: span 2 !important;
}

.mp_wrapper.mp_invoice {
    background: #010101 !important;
    margin-top: 30px;
}

.site-header .sub-menu .current-menu-ancestor>a, .site-header .sub-menu .current-menu-item>a, .site-header .sub-menu .current-menu-parent>a, .site-header .sub-menu li:hover>a {
	background: none !important;
}

.gamipress-achievement:not(.gamipress-layout-none), .gamipress-rank:not(.gamipress-layout-none), .single-achievement.achievement-wrap:not(.gamipress-layout-none), .single-rank.rank-wrap:not(.gamipress-layout-none), .gamipress-user-points:not(.gamipress-layout-none) {
	display: block !important;
}

.mepr-login-link { display: none; }

.new-label {
    color: white;
    font-weight: bold;
    margin-left: 0.6rem;
    background: red;
    border-radius: 1rem;
    padding: 10px 11px;
    height: 17px;
    display: inline-block;
    line-height: 0px;
}

.mepr-loading-gif {
	filter: invert(1) !important;
}

.login .message, .login .notice {
	 background-color: #161616 !important;
}


/* Progress bar CSS */

.progress-bar {
  height: 18px;
  background-color: #f7f7f7;
  border-radius: 5px;
}

.progress-bar .bar {
  height: 18px;
  background-color: #ff4d3b;
  border-radius: 5px;
}


/* End Progress bar CSS */

/* Define the animation */
@keyframes lineAnimation {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

/* Apply the animation to the lines */
.lines {
  height: 2px;
  background: linear-gradient(to right, transparent 50%, #223049 50%);
  background-size: 16px 2px, 100% 2px;
  width: 100%;

  /* Animation properties */
  animation: lineAnimation 60s linear infinite; /* Adjust timing as needed */
}

/* Chevron Animated */

.chevron-animated {
  position: absolute;
  width: 28px;
  height: 8px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.chevron-animated:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron-animated:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron-animated:before,
.chevron-animated:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
}

.chevron-animated:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevron-animated:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

.chevron-container {
    position: relative;
    height: 24px;
    width: 24px;
}

.chevron-text {
  position: fixed;
  margin-top: 65px;
  margin-left: -38px;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 0.85em;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .8;
  animation: pulse 2s linear alternate infinite;
}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}

/* NEW WIDGETS */

.scg-button {
   transition: transform 0.2s ease;
}

.scg-button:active {
	transform: scale(0.9);
}

div.elementor-widget-svg-buttons:not([data-selected="true"]) .scg-button path {
    transition: all 0.3s ease;
}

.scg-button text {
    pointer-events: none;
}

div.elementor-widget-svg-buttons:not([data-selected="true"]):not([button-action]) .scg-button path:hover {
    fill: #a80909;
}

.scg-button-black-trans rect {
    transition: fill 0.3s ease;
}

.scg-button-red-trans radialGradient stop {
    transition: stop-color 0.3s ease;
}

.scg-button-black-trans:hover rect {
    fill: #313131;
}

.scg-button-red-trans:hover radialGradient stop {
    stop-color: #a80909;
}