@import "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap";

:root {
/* General */
--lighter-shade:#23272f;
--darker-shade:#191b20;
--main-color:#ff6000;

--main-text:#ffffff;
--sub-text:#9b99ad;

--error:#e74c3c;
--success:#16c75e;
--warning:#f1c40f;

/* Button */
--button-gradient-start:#f12711;
--button-gradient-end:#d75a1c;

/* Tiers */
--rare:#149dcb;
--epic:#cc53cd;
--legendary:#f8972e;
}

/* Autofill Fix */
input:-webkit-autofill,
input:-internal-autofill-selected ,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #ffffff;
    box-shadow: inset 0 0 20px 20px #191b20;
   /* -webkit-background-clip: text;*/
}
	


body {
margin: 0; 
font-family: Roboto,sans-serif;
color: var(--main-text);
overflow-x:hidden;
background:var(--lighter-shade);
}

b {
font-weight:bold;
}

p {
margin:0;
padding:0;	
font-size: 12px;
line-height: 18px;
color: var(--sub-text);
}

input {
margin: 0;
border: 0;
padding: 0;
outline:0;	
}

input:-internal-autofill-selected,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

#popup-content > textarea {
font-family: Roboto,sans-serif;	
border: none;
background-color: transparent;
resize: none;
outline: none;
font-size: 12px;
color:var(--main-text) !important;
min-height:100px;
}

#popup-content > textarea::placeholder {
font-family: Roboto,sans-serif;
font-size: 12px;
color:var(--sub-text) !important;
display:flex;

line-height:80px;
}

::-webkit-input-placeholder {

}
:-moz-placeholder { /* Firefox 18- */

}
::-moz-placeholder {  /* Firefox 19+ */

}
:-ms-input-placeholder {  

}

/* General Styles*/
/* Colors */
.grayscale {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}

/* Button */
.button { 
position:relative;
background-image: linear-gradient(to right, var(--button-gradient-start), var(--button-gradient-end));
color:var(--main-text);
text-align:center;
padding:0px 15px;
font-size:14px;
font-weight:bold;
border-radius:5px;
text-transform:uppercase;
text-shadow: 1px 1px 0px rgba(0,0,0,0.5);

display:flex;
align-items:center;
justify-content:center;
z-index: 1;

cursor:pointer;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.button::before {
position: absolute;
content: "";
background-image: linear-gradient(to left, var(--button-gradient-start), var(--button-gradient-end));
color:var(--main-text);
text-align:center;
padding:inherit;
font-size:inherit;
font-weight:bold;
border-radius:5px;
text-transform:uppercase;

top: 0;
right: 0;
bottom: 0;
left: 0;

display:flex;
align-items:center;
justify-content:center;

will-change: opacity; 

z-index: -1;
opacity: 0;
transition: opacity 0.3s linear;
}
.button:hover::before {
opacity:1;
}

.alt-button {
position: relative;
display: block;
padding: 5px;
font-size: 12px;
line-height: 12px;
color: var(--sub-text);
border: 1px solid var(--sub-text);
margin: 0 10px 0 0;
transition: all 0.2s ease;	
text-transform:uppercase;
font-weight:bold;
box-sizing:border-box;

display:flex;
align-items:center;
justify-content:center;
}
	.alt-button:hover {
	cursor: pointer;
	color: var(--main-color);
	border: 1px solid var(--main-color);
	transition: all 0.2s ease;
	}
	
.disabled-button {
position:relative;
background:var(--darker-shade);
color:#5e5e5e;
text-align:center;
padding:0px 15px;
font-size:14px;
font-weight:bold;
border-radius:5px;
text-transform:uppercase;
text-shadow: 1px 1px 0px rgba(0,0,0,0.5);

display:flex;
align-items:center;
justify-content:center;
z-index: 1;

cursor:pointer;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}	

.button-loading-dots {
  display:none;
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.2);
  animation: buttonDot 0.7s infinite linear alternate;
  animation-delay: .35s;
}

.button-loading-dots::before, .button-loading-dots::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}

.button-loading-dots::before {
  left: -15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.2);
  animation: buttonDot 0.7s infinite alternate;
  animation-delay: 0s;
}

.button-loading-dots::after {
  left: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.2);
  animation: buttonDot 0.7s infinite alternate;
  animation-delay: 0.7s;
}

@keyframes buttonDot {
  0% {
    background-color: rgba(255,255,255,0.1);
  }
  50%,
  100% {
    background-color: var(--main-text);
  }
}

button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

::-webkit-input-placeholder {

}
:-moz-placeholder { /* Firefox 18- */

}
::-moz-placeholder {  /* Firefox 19+ */

}
:-ms-input-placeholder {  

}

/* Input */
.input {
background:rgba(155,153,175,.10);
border-radius:5px;
border:1px solid var(--lighter-shade);	
padding:10px;
box-sizing:border-box;
color:var(--main-text);

transition:all 0.2s ease;
}
.input::placeholder {
color:var(--sub-text);
text-align:center;	
font-weight:normal;
font-size:14px;
}
.input:focus {
border:1px solid var(--main-color);	

transition:all 0.2s ease;
}

/* Divider */
.divider {
position:relative;
display:flex;
align-items:center;
justify-content:Center;
width:100%;
height:30px;
}
.divider > span {
position:absolute;
display:inline-block;
padding:0 10px;
background:var(--lighter-shade);
text-transform:uppercase;
font-weight:bold;
}
.divider-line {
position:relative;
height:1px;
width:100%;
background:var(--sub-text);
opacity:0.25;
}

/*Content Layout */
.content-wrapper {
position:relative;
width:calc(100% - 100px);
min-height:calc(100vh - 150px);
left:0;
top:0;
margin:100px 50px 50px 50px;
background:;	
overflow:hidden;
}

.content-section-col {
position:relative;
display:flex;
flex-direction:column;
flex-wrap: wrap;

height:auto !important;
width:auto !important; 
}
.content-section-row {
position:relative;
display:flex;
flex-direction:row;
flex-wrap: wrap;

height:auto !important;
width:auto !important; 
}


.content-left-section {
position:relative;
float:left;
margin-right: 30px;
max-width: 527px;
width: 100%;
display:flex;
flex-direction:column;
}
.content-right-section {
position:relative;
float:left;
max-width: 527px;
width: 100%;	
display:flex;
flex-direction:column;
}

.content-title {
position:relative;	
width:100%;
font-size:24px;
font-weight:300;
text-transform:capitalize;
margin:0 0 50px 0;
}

.content-box {
width: 100%;	
display:flex;
flex-direction:column;
}

.content-box-header {
margin: 0 0 15px 0;
}
	.content-box-header-title {
	font-size:14px;
	font-weight:900;
	text-transform:uppercase;
	color:var(--main-text);
	}

.content-box-panel {
display:flex;
flex-direction:column;
margin:0 0 30px 0;
max-width: 528px;
width: 100%;	
background:var(--lighter-shade);
box-shadow: 0 0 15px rgba(0,0,0,.15);
border-radius: 5px;	
}
	.panel-content {
		display:flex;
		flex-direction:column;
		padding:30px;
	}
	.panel-content > p {
		margin:20px 0 0 0;
	}	
	
.content-box-form {
	display:flex;
	flex-direction:row;
	margin:0 0 0 0;
	width:100%;
}
	.content-box-form > input {
	width:70%;
	height:50px;
	margin:0 5% 0 0;
	}
	.content-box-form > .button {
	width:25%;
	height:50px;
	}

.row-wrapper {
display:flex;
flex-direction:row;
}
.col-wrapper {
display:flex;
flex-direction:column;
}	

/******* General styles END ******/

/* Login Page */
.notification-message {
position:absolute;	
width:100%;
box-sizing:border-box;
padding:20px;
font-size:14px;
line-height:16px;
font-weight:bold;
display:none;
align-items:center;
justify-content:Center;
bottom:0;
left:0;
z-index:3;
}
.notification-message  > svg {
height:30px;
width:30px;	
fill:white;
margin:0 30px 0 0;
flex-shrink:0;
}

.left-login-col {
position:relative;
width:500px;
height:100vh;
left:0;
top:0;
float:left;
padding:0px 100px;
background:var(--darker-shade);	
}

.login-box {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
}
.login-box > .input-message {
margin:0;	
}

.login-logo { 
position:relative;
width:200px;
height:34px;
background-image: url("/images/Nexwork.png");
background-size:100% 100%;
margin:0 0 30px 0;
left:0;
right:0;
}

.login-title {
position:relative;
width:100%;
margin:0 0 34px 0;
left:0;
right:0;
float:left;
color:var(--main-text);
font-weight:bold;
text-transform:capitalize;
font-size:40px;
line-height:40px;
}

.login-inputs {
position:relative;
margin:0 0 30px 0;
}
	.login-inputs > .input-message {
	margin:15px 0 0px 0;	
	}

.login-inputs input { 
position: relative;
border: 0;
width: 100%;
color: var(--main-text);
font-size:16px;
line-height: 16px;
font-weight:normal;
padding-bottom: 10px;
box-sizing: border-box;
background: transparent;
border-bottom: 1px solid #3b3d41;
margin:0 0 0 0;
opacity:1 !important;
text-indent:0px;
}

.login-labels {
position:absolute;
top:0;
left:0;	
font-size:16px;
color:var(--sub-text);
transition:all 0.5s ease;
pointer-events: none;
}

.login-inputs input:focus ~ .login-labels, .login-inputs input:valid ~ .login-labels {
top:-22px;	
font-size:14px;
left:0;
transition:all 0.5s ease;
color: #db6227;
}

.login-inputs input:focus { 
border-bottom: 1px solid #db6227 !important;
}

.login-labels-autofix {
top: -22px !important;
font-size: 14px !important;
left: 0 !important;
transition: all 0.5s ease !important;
color: #db6227 !important;
}

#login-button {
position:relative;
margin:10px 0 0 0;	
height:60px;
width:100%;
}
#login-button  > span {
font-size:18px;
}

#show-password, #hide-password {
position:absolute;
width:30px;
height:20px;	
padding:0 0 10px 0;
top:0px;
right:0px;
cursor:pointer;
display:flex;
-webkit-box-align:center;
        align-items:center;
		justify-content:center;
z-index:1;
}
#show-password svg, #hide-password svg {
width:20px;
height:20px;	
fill:var(--sub-text);
opacity:0.75;
}

.login-keep {
position:relative;	
color:var(--sub-text);	
width:140px;
font-size:16px;
margin: 0 0 20px 0;
}
label.checkbox input {
display: none; 
}
label.checkbox #checkbox-inactive {
height: 24px;
width: 24px;
display: inline-block;
position: relative;
background:rgba(255,255,255,0.1);
margin: 0 10px 0 0;
}
.checkbox {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
        align-items: center;
position: relative;
height: 24px;
cursor:pointer
}
[type=checkbox].checkbox:checked + #checkbox-inactive:after {
content:'';
position: absolute;
top: 4px;
left: 4px;
width: 16px;
height: 16px;
border-radius:2px;
background: #2ecc71;
font-weight: bold;
z-index:1;
}

#login-forgot, #login-remembered {
position:relative;
width:100%;
line-height:12px;
text-align:center;
font-size:12px;
color:var(--sub-text);	
margin:20px 0 0 0;
cursor:pointer;
}

#forgot-form > .login-title {
margin:0 0 20px 0;
}
#forgot-form > p {
margin:0 0 50px 0;	
}
#forgot-form > p > span{
color:var(--button-gradient-end);	
}
#forgot-form > .login-inputs {
margin:0 0 40px 0;	
}

#button-captcha-wrapper {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;	
}

#button-captcha-wrapper > .button {
margin:20px 0 0 0;
height:60px;
width:100%;
font-size:18px;
}

.google-captcha-error {
box-shadow: 0 0 0 2px var(--error) !important;	
}

.right-login-col {
position:relative;
width:calc(100% - 700px);
height:100vh;
right:0;
top:0;
float:left;
background-color:var(--lighter-shade);
}

/* Dashboard */
/* Popup */
.popup-blackout {
position:fixed;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:flex;
align-items:center;
justify-content:center;
z-index:3;
}

#submit-success {
display:flex;
align-items:center;
justify-content:center;
flex-direction :column;	
}
	#submit-success > svg {
		position: relative;
		width: 120px;
		height: 120px;
		fill: var(--success);
		margin: 0 -5px 0 0;
	}
	#submit-success > span {
		position: relative;
		font-size: 24px;
		color: var(--success);
		font-weight: 700;
		text-transform:uppercase;
		text-align:center;
		margin: 20px 0 0 0;
	}

.popup-box {
position:relative;
background:var(--lighter-shade);
padding:40px;
border-radius:5px;
display:flex;
flex-direction:column;	
}
.popup-close {
position:absolute;
width:20px;
height:20px;
right:20px;
top:20px;
font-weight:bold;	
font-size:14px;
line-height:20px;
text-transform:uppercase;
}
	.popup-close > svg {
	width:20px;
	height:20px;
	fill:var(--sub-text);
	
	transition:fill 0.2s ease;
	}
	.popup-close:hover, .popup-close:hover > svg {
	cursor:pointer;
	fill:var(--main-text);
	
	transition:fill 0.2s ease;
	}
	
.popup-content-wrapper {
position:relative;
display:flex;
flex-direction:column;		
justify-content:center;
align-items:center;
}
.popup-title {
position:relative;
color:var(--main-text);
width:100%;
text-align:center;	
font-size:18px;
line-height:18px;
font-weight:bold;
margin: 0 0 30px 0;
}
.popup-content {
position:relative;
display:flex;
flex-direction:row;		
justify-content:space-between;
align-items:center;	
}
.popup-currency-button {
position:relative;
padding:15px 15px 15px 15px;
display:flex;
flex-direction:row;	
align-items:center;
border:1px solid var(--lighter-shade);
margin:0 10px 0px 10px;

transition:all 0.2s ease;
}
	.popup-currency-button:hover {
	border:1px solid var(--sub-text);
	cursor:pointer;
	transition:all 0.2s ease;
	}
	
.popup-currency-button > svg {
position:relative;
margin:0 10px 0 0;	
width:30px;
height:30px;
}						
.popup-currency-button > span {
position:relative;
color:var(--main-text);
font-size:14px;
line-height:14px;	
font-weight:bold;
}			

#popup-launch {
display:flex;
width:450px;
}	
	#popup-launch > .popup-content {
		 flex-direction:column; 
		 align-items:start;
	}
	
.popup-launch-row {
display:flex; 
flex-direction:row; 
align-items:center;

line-height:16px; 
margin:25px 0 0px 0;	
}
	.popup-launch-row:nth-of-type(1) {
	margin:0 0 25px 0; 
	}
	.popup-launch-row > .button {
	height:50px; 
	width:140px; 
	margin:0 0 0 30px; 
	flex-shrink:0;	
	}
	.popup-content > p {
	margin:30px 0 0 0;	
	}
	#popup-launch-row-disabled-message {
	display:block;	
	position:relative;  
	width:100%; 
	margin:15px 0 0 0; 
	color:#e9412f;
	}
	
#popup-support > .popup-content, #popup-prize > .popup-content {
position: relative;
display: flex;
flex-direction: column;	
justify-content: start;
align-items: stretch;
}

#popup-support > .popup-content > p, #popup-prize > .popup-content > p {
margin: 0 0 20px 0;
max-width:450px;
}

#popup-support > .popup-content > .button, #popup-prize > .popup-content > .button {
height:50px;
margin:20px 0 0 0;
}

#popup-support > .popup-content > #support-title, #popup-prize > .popup-content > #prize-name {
margin:0 0 5px 0;
height:50px;
color:var(--main-text);
}

#popup-support > textarea {
min-height:100px;
}
	
/* Menu */
.left-dashboard-col {
position:fixed;
width:150px;
height:calc(100vh - 100px);
left:0;
top:0;
padding:50px 50px;
background:var(--lighter-shade);	

z-index:2;
box-shadow: 0 0 5px rgba(0,0,0,.15);
}

.dashboard-logo { 
position:relative;
width:150px;
height:82px;
background-image: url("/images/NexworkLarge.png");
background-size:100% 100%;
margin:0 0 50px 0;
left:0;
right:0;
}

.dashboard-menu {
position:fixed;
display: flex;
flex-direction: column;
height: 100%;
width: auto;
}

.dashboard-menu > ul {
list-style: none;	
display: flex;
flex-direction: column;
padding:0;
margin:0;
}
.dashboard-menu > ul  > li {
color:var(--main-text);
font-weight:bold;
margin:40px 0 40px 0px;
font-size:14px;
line-height:24px;
text-transform:uppercase;

display:flex;
flex-direction:row;
flex-wrap:wrap;

user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;

transition:all 0.2s ease;
}
.dashboard-menu:first-child > ul > li {
color:var(--main-text);
font-weight:bold;
margin:0 0 40px 0px;
}

.dashboard-menu > ul  > li > svg {
position:relative;
margin:0 15px 0 0;
width:24px;
height:24px;
fill:white;
-webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4)) drop-shadow(-1px -1px 1px rgba(0, 0, 0, 0.1));
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4)) drop-shadow(-1px -1px 1px rgba(0, 0, 0, 0.1));

transition:all 0.2s ease;
}

.dashboard-menu > ul  > li:hover, .dashboard-menu > ul  > li:hover > svg {
color:var(--main-color) !important;
fill:var(--main-color) !important;
cursor:pointer;
}

.menu-selected {
fill:var(--main-color) !important;
color:var(--main-color) !important;	
}

.dashboard-header-menu {
display: flex;
flex-direction: row;
flex-wrap:wrap;
height: 30px;
width: auto;
position:absolute;
top:0;
right:0;
padding:30px 30px 30px 30px;
z-index:2;
}

.dashboard-header-menu > div {
position:relative;
margin:0 0 0 20px;
color:var(--main-text);
font-size:16px;
line-height:24px;

transition:all 0.2s ease;
}

.dashboard-header-menu > div > svg {
width:24px;
height:24px;
fill:white;

transition:all 0.2s ease;
}

.dashboard-header-menu > div:hover, .dashboard-header-menu > div:hover > svg {
fill:var(--main-color);
color:var(--main-color);
cursor:pointer;	
}

.right-dashboard-col {
position:relative;
width:calc(100% - 250px);
height:auto;
left:250px;
right:0;
top:0;
float:left;
background:var(--darker-shade);
}

.content-box-currency {
position:relative;
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;	
}
.currency-select {
position:relative;
display:flex;
flex-direction:row;	
align-items:center;
}
	.currency-select > span {
	font-size:16px;
	line-height:16px;
	text-transform:uppercase;
	color:var(--main-text);
	font-weight:bold;
	}
	.currency-select > svg {
	position:relative;
	width:30px;
	height:30px;
	margin:0 15px 0 0;	
	}

.edit-button {
position:relative;
display:flex;
flex-direction:row;	
align-items: center;
}
	.edit-button:hover {
	cursor:pointer;
	}
	
	.edit-button > svg {
	position:relative;
	width:12px;
	height:12px;
	margin:0 7px 0 0;

	fill:var(--main-color);
	}

	.edit-button > span {
	font-size:12px;
	line-height:12px;	
	color:var(--main-color);
	text-transform:uppercase;
	font-weight:bold;
	}

/* Account */
.current-input {
position:relative;
width:100%;
margin:0 0 20px 0;
}
.valid-input {
border:1px solid #2ecc71 !important;	
}
.error-input {
border:1px solid #e9412f !important;	
}

.input-message {
position:relative;	
margin:20px 0 0 0;
width:100%;
box-sizing:border-box;
padding:10px;
font-size:12px;
line-height:15px;
font-weight:bold;
display:none;
flex-wrap:nowrap;
flex-direction:row;
align-items:center;
}
.input-message > svg {
position:relative;
margin:0 10px 0 0;
height:15px; 
width:15px;
fill:white;	
flex-shrink:0;
}

.error-message {
background:#e9412f;	
}
.success-message {
background:#2ecc71;	
}

#password-form {
display:flex;	
flex-wrap:wrap;
}
#password-form > input {
width:47.5%;
flex-grow:1;	
}
#password-form > input:nth-of-type(2) {
margin:0;
}

#password-form > .button {
margin:20px 0 0 0;
flex-grow:2;	
}

/* Payments */
.payment-upcoming-section, .payment-previous-section {
position:relative;
float:left;
width:100%;

display:flex;
flex-direction:column;	
}
	.payment-upcoming-section {
	margin:0 0 30px 0;	
	}

.payment-section-title {
position:relative;
width:100%;	
margin:0 0 10px 0;	
}

.payment-upcoming-row {
position:relative;
float:left;
max-width:600px;

display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;

background:var(--darker-shade);
border:1px solid rgba(155,153,173,.3);
border-radius:5px;

padding:20px 25px;
box-sizing: border-box;

margin:20px 0 0 0;
}
	.payment-upcoming-row:nth-of-type(2) {
	margin:0 0 0 0;
	}

.payment-row {
position:relative;
float:left;
max-width:600px;

display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;

background:var(--lighter-shade);
box-shadow: 0 0 15px rgba(0,0,0,.15);	
border-radius:5px;

padding:20px 25px;
box-sizing: border-box;

margin:0 0 20px 0;
}
	.payment-row:last-child {
	margin:0 0 0 0;
	}

.payment-left-info {
position:relative;
float:left;
width:75%;

display:flex;
flex-direction:column;
flex-wrap:wrap;	
}

.payment-left-amount {
position:relative;
float:left;
width:100%;

font-weight:bold;
font-size:16px;
line-height:16px;
color:var(--main-text);	

margin:0 0 7px 0;
}
.payment-left-date {
position:relative;
float:left;
width:100%;

font-size:12px;
line-height:12px;
color:var(--sub-text);		
}
.payment-right-status {
position:relative;
float:left;
font-size:14px;
line-height:14px;
font-weight:bold;
text-transform:uppercase;
}	
.status-paid {
color:var(--success);		
}
.status-pending, .status-checking {
color:var(--warning);		
}
.status-failed, .status-refunded , .status-held {
color:var(--error);	
}

/* Subscriptions */
.subscriptions-section, .subscriptions-history-section {
position:relative;
display:flex;
flex-direction:column;
flex-wrap:wrap;	

min-width:200px;
max-width:640px;
}

.subscriptions-all-time, .subscriptions-current {
position:relative;
display:flex;
flex-direction:row;
flex-wrap:wrap;		

gap: 20px;
}

.subscriptions-section {
position:relative;
display:flex;
flex-direction:row;
flex-wrap:wrap;	

margin:0 0 30px 0;	
}

.subscriptions-section-title {
position:relative;
width:100%;	
margin:0 0 15px 0;	

display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
}

.section-title-buttons {
position:relative;
display:flex;
flex-direction:row;	
}
.filter-button {
position:relative;
display:block;
padding:5px;
font-size:12px;
line-height:12px;
color:var(--sub-text);
border:1px solid var(--sub-text);
margin:0 10px 0 0;	

transition:all 0.2s ease;
}
	.filter-button:last-child {
	margin:0 0 0 0;	
	}
	.filter-button:hover {
	cursor:pointer;
	color:var(--main-color);
	border:1px solid var(--main-color);	
	
	transition:all 0.2s ease;
	}
	
.filter-selected {
color:var(--main-color);
border:1px solid var(--main-color);	
}
							
.subscriptions-card {
position:relative;	

width:200px;
height:130px;
background:var(--lighter-shade);
box-shadow: 0 0 15px rgba(0,0,0,.15);	
border-radius:10px;
padding:20px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

box-sizing:border-box;
}

.rare-card, .epic-card {
flex-grow:1;	
}
.legendary-card {
flex-grow:2;	
}
.subscriptions-card-tier {
position:relative;
margin:0 0 15px 0;
text-transform:uppercase;
font-weight:bold;	
display:block;
font-size:20px;
line-height:20px;
}
.tier-rare {
color:var(--rare); 
background:var(--lighter-shade);
}
.tier-epic {
color:var(--epic);
background:var(--lighter-shade);
}
.tier-legend {
color:var(--legendary);
background:var(--lighter-shade);
}

.subscriptions-card-total {
position:relative;
color:var(--main-text);
font-weight:;
font-size:20px;
line-height:20px;	
}

.subscription-history-rows {
display:flex;
flex-direction:row;	
flex-wrap:wrap;
gap: 20px;	
}

.subscriptions-month-card {
position:relative;	

width:calc(50% - 10px);
background:var(--lighter-shade);
box-shadow: 0 0 15px rgba(0,0,0,.15);	
border-radius:5px;
padding:15px;

display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;

box-sizing:border-box;	
}

.subscriptions-month {
position:relative;
color:var(--sub-text);	
font-size:14px;
line-height:14px;
}
.subscriptions-month-total {
position:relative;
color:var(--main-text);	
font-size:14px;
line-height:14px;
font-weight:bold;
}

/* Giveaways */
.content-full-section {
position:relative;	
}
.content-fade {
display:none;	
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(25,27,32,.89);
left: 0;
top: 0;
}

.giveaway-edit-panel {
display:none;
position:relative;
flex-direction:row;
max-width:560px;	
margin:0 0 50px 0;
}
.giveaway-edit-left-info {
position:relative;
display:flex;
flex-direction:column;	
align-items:center;
justify-content:center;	
}	
.giveaway-edit-box {
	width: 110px;
	height: 148px;
	/*box-shadow: 0 0 8px 3px rgba(0,0,0,.15);*/
	padding:15px;
	border: 5px solid var(--lighter-shade);		
}
	.giveaway-edit-box > img {
		border: 1px solid #000000;		
	}
	
.giveaway-edit-buttons {
position:relative;
display:flex;
flex-direction:row;	
margin:25px 0 25px 0;
}
	.giveaway-edit-buttons > .button {
	font-size:14px;
	height:50px;
	margin:0 20px 0 0;
	padding:0 30px;
	width:155px;
	box-sizing:border-box;
	}
	.giveaway-edit-buttons > .alt-button {
	font-size:14px;
	height:50px;
	padding:0 30px;
	margin:0;
	}	
	
.giveaway-edit-dropdown {
position: relative;
border: 0;
width: 100%;
color: var(--main-text);
font-size:16px;
line-height: 16px;
font-weight:bold;
padding: 10px 25px 10px 0;
box-sizing: border-box;
background: transparent;
border-bottom: 2px solid rgba(255,255,255,0.15);
margin:0 0 0px 0;
opacity:1 !important;
text-indent:0px;

display:flex;
align-items:center;

cursor:pointer;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.giveaway-edit-dropdown:after {
content:"▼";
right: 1px;
z-index: 2;
font-size:15px;
width: 15px;
height: 15px;
display: block;
position: absolute;
}
	.giveaway-edit-dropdown > ul {
	display: none;
	position:absolute;
	top:39px;
	width:100%;
	left:0;
	list-style: none;	
	padding:0;
	margin:0;
	z-index:3;
	background:var(--darker-shade);
	max-height:136px;
	box-shadow: 0 0 15px rgba(0,0,0,.15);	
	overflow-y:auto;
	overflow-x:hidden;
	scroll-snap-type: y mandatory;	
	}
	.giveaway-edit-dropdown > ul  > li {
	color:var(--main-text);
	font-weight:;
	padding:10px 10px 10px 10px;
	font-size:14px;
	line-height:14px;
	transition:all 0.2s ease;
	scroll-snap-align: start;
	scroll-margin: 0px;	
	}
	.giveaway-edit-dropdown > ul  > li:hover {
	background:var(--lighter-shade);
	cursor:pointer;
	transition:all 0.2s ease;
	}
	
.giveaway-section-wrapper {
margin:0px 0px 40px 0;	
}
	
.giveaway-dropdown-title {
position:relative;
font-size:12px;
line-height:12px;
color:var(--sub-text);	

display:flex;
flex-direction:row;
justify-content:space-between;
}

.giveaway-edit-right-info {
position:relative;
box-sizing:border-box;
margin:0 0 0 40px;
display:flex;
flex-direction:column;
justify-content:center;	
}
	.giveaway-edit-right-info > .edit-button {
	position:relative;
	display:flex;
	font-size:12px;
	line-height:12px;
	text-transform:none;
	
	align-items:center;
	justify-content:flex-end;
	}	
	.giveaway-edit-right-info > .input-message, .giveaway-right-info > .input-message {
		margin:25px 0 0 0;
	}
	
.giveaway-section {
position:relative;
margin:0 0 00px 0;
width:100%;
}

.giveaway-panel {
position:relative;
display:flex;
flex-direction:row;
padding:30px;
background:var(--lighter-shade);
border-radius:5px;	
box-shadow: 0 0 15px rgba(0,0,0,.15);	

box-sizing:border-box;
}

.giveaway-section-title {
position:relative;
width:100%;	
margin:0 0 25px 0;	
color:var(--sub-text);
}
.giveaway-section-sub-title {
position:relative;
width:100%;	
margin:0 0 10px 0;	
font-weight:900;
font-size:14px;
line-height:14px;
text-transform:uppercase;

display:flex;
flex-direction:row;
justify-content:space-between;

}
	.giveaway-section-sub-title-tag {
	display:flex;
	flex-direction:row;
	align-items:center;
	}
	.ready-tag {
	display:inline-block; 
	margin: 0 0 0 10px; 
	padding:3px 6px; 
	background:#2ecc71; 
	font-weight:900; 
	text-transform:uppercase; 
	font-size:12px; 
	color:var(--darker-shade);	
	}
	.giveaway-section-sub-title > .edit-button > span {
	font-size:12px;
	line-height:12px;	
	}
	.giveaway-section-sub-title > .edit-button > svg {
	height:14px;
	width:14px;	
	}
	
.giveaway-left-info {
position:relative;
display:flex;
flex-direction:column;	
align-items:center;
justify-content:center;	
}
	.giveaway-box {
	width: 110px;
	height: 148px;
	/*box-shadow: 0 0 8px 3px rgba(0,0,0,.15);*/
	border: 5px solid rgba(0,0,0,.3);		
	}
	
.giveaway-right-info {
position:relative;
box-sizing:border-box;
margin:0 0 0 40px;
display:flex;
flex-direction:column;
justify-content:center;

min-width:400px;
}

	.giveaway-right-info > .button {
	  font-size: 14px;
	  height: 50px;
	  margin: 25px 0 0 0;
	  padding: 0 30px;
	}

.giveaway-right-header {
position:relative;
width:100%;	
margin:0 0 25px 0;

display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
}
	.giveaway-name {
	position:relative;
	font-size:18px;
	line-height:18px;
	font-weight:bold;
	margin:0 50px 0 0;
	
	display:flex;
	flex-direction:row;
	align-items:center;
	}
		.giveaway-name > span {
		margin:0 10px 0 0;
		}
		.giveaway-name > svg {
		display:none;
		position:relative;
		width:20px;
		height:20px;
		fill:#2ecc71;
		}
	
	.giveaway-duration {
	position:relative;
	font-size:16px;
	line-height:16px;
	text-transform:uppercase;
	font-weight:bold;
	}
	
.giveaway-name-next-quantity {
position:relative;
width:100%;

font-size:14px;
line-height:14px;
margin:0 0 25px 0;

display:flex;
flex-direction:row;
justify-content: space-between;
}
	.giveaway-quantity {
	display:flex;
	flex-direction:column;
	width: auto;
	text-align:end;
	}
	
	.giveaway-name-next {
	display:flex;
	flex-direction:column;
	width: auto;
	margin: 0 40px 0 0;
	}
	.giveaway-name-next > div {
	display:flex;
	flex-direction:row;
	}
	.giveaway-name-next > div > span {
	margin:0 10px 0 0;
	}
	.giveaway-name-next > div > svg {
	display:none;
	position:relative;
	width:14px;
	height:14px;
	fill:#2ecc71;
	}
	
.giveaway-dates {
position:relative;
width:100%;
margin:0 0 0px 0;	

display:flex;
flex-direction:row;
justify-content: space-between;
}
	.giveaway-start {
	position:relative;
	width:auto;
	margin:0 50px 0 0;
	display:flex;
	flex-direction:column;
	}
	.giveaway-end {
	position:relative;
	width:auto;

	display:flex;
	flex-direction:column;
	text-align:end;
	}

.giveaway-name-next > span, .giveaway-end > span, .giveaway-start > span, .giveaway-quantity > span {
position:relative;
width:100%;
color:var(--sub-text);
font-size:12px;
line-height:12px;
margin:0 0 5px 0;
}
.giveaway-name-next > div, .giveaway-end > div, .giveaway-start > div, .giveaway-quantity > div {
position:relative;
width:100%;
color:var(--main-text);
font-size:14px;
line-height:16px;
}

/*---MEDIA QUERIES---*/
@media (max-width: 1164.98px) {
	/* Subscriptions */

}

@media (max-width: 999.98px) {
	/* Giveaways */
	.giveaway-right-info {
		min-width:0;
		width:100%;
	}
	
	/* Payments */
	#my-payment-content > .content-section-row {
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.payment-upcoming-row, .payment-row {
		flex-wrap: nowrap;
	}
	
	/* Account */
	.content-left-section {
		margin-right:0px;
	}
}

@media (max-width: 849.98px) {
	/* Menu */
	.left-dashboard-col {
		padding: 30px 20px;
		width:24px;
	}
	.right-dashboard-col {
		width: calc(100% - 64px);
		left: 64px;		
	}
	.dashboard-logo {
		display:none;
	}
	.dashboard-menu > ul  > li > span {
		display:none;
	}
	.dashboard-menu > ul > li > svg {
		margin:0;
	}
	
	/* Giveaways */
	.giveaway-edit-panel {
		width: 100%;
	}	
}

@media (max-width: 799.98px) {
	/* Login */
	.left-login-col {
		width: calc(100% - 80px);
		box-sizing: border-box;
		z-index: 2;
	}
	.right-login-col {
		position:absolute;
		width:100%;
	}
}

@media (max-width: 719.98px) {
	/* Menu */
	.left-dashboard-col {
		padding: 30px 20px;
		width:24px;
	}
	.right-dashboard-col {
		width: calc(100% - 64px);
		left: 64px;		
	}
	.dashboard-logo {
		display:none;
	}
	.dashboard-menu > ul  > li > span {
		display:none;
	}
	.dashboard-menu > ul > li > svg {
		margin:0;
	}
	
	/* Account */
	.content-box-form {
		flex-direction: column;	
	}
	
	#password-form > #password-input {
		margin: 0 0 5% 0;
		width:100%;
	}	
	#password-form > input {
		margin: 0 0 0 0;
		width:100%;
	}	
	
	.content-box-form > .input {
		margin: 0 0 20px 0;
		width:100%;
	}

	.content-box-form > .button {
		width:100%;
	}
	
	/* Giveaways */
	.giveaway-edit-panel {
		flex-direction:column;
	}
	.giveaway-edit-right-info {
		margin:30px 0 0 0;
		max-width:400px;
	}	
	.giveaway-panel {
		flex-direction:column;
	}
	.giveaway-right-info {
		margin:30px 0 0 0;
	}
}

@media (max-width: 599.98px) {
	/* Login */
	.left-login-col {
		padding:0 50px;
	}
	
	/* Popup */
	.popup-box {
		margin: 20px;	
	}
	
	#popup-currency > .popup-content {
		justify-content: center;
		flex-wrap: wrap;
	}
	
	#popup-launch {
		width:100%;
	}		
	
	/* Subscriptions */
	.subscription-history-rows {
		flex-direction:column;
	}
	.subscriptions-card {
		flex-grow:1;
	}	
	.subscriptions-month-card {
		width:auto;
		flex-grow:1;
	}		
	
	/* Account */
	.content-box-currency {
		flex-direction:column;
	}
	
	#change-currency-button {
		margin:20px 0 0 0;
	}	

	/* Giveaways */
	.giveaway-edit-right-info {
		width:100%;
	}		
}

@media (max-width: 449.98px) {
	/* General */
	.content-wrapper {
		width: calc(100% - 60px);
		margin: 100px 30px 50px 30px;		
	}
	
	/* Login */
	.left-login-col {
		height: 90vh;
		width:100%;
	}	

	/* Popup */
	.popup-launch-row {
		flex-direction:column;
	}
	.popup-launch-row > .button {
		width:100%;
		margin:30px 0 0 0;
	}
	
	/* Giveaways */
	.giveaway-edit-right-info {
		flex-direction:column;
	}		
	#update-prize-button {
		margin:0 0 20px 0;
		width:100%;
	}
	.giveaway-right-header {
		flex-direction:column;
	}
	.giveaway-name {
		margin:0 0 20px 0;
		text-align: center;
	}
}

@media (max-width: 399.98px) {
	/* Subscriptions */
	.subscriptions-section-title {
		flex-direction: column;
	}	
	.subscriptions-section-title > span {
		margin: 0 0 15px 0;
	}	
	
	/* Giveaways */
	.giveaway-section-sub-title {
		flex-direction: column;
	}
	.giveaway-section-sub-title > span, .giveaway-section-sub-title-tag {
		margin:0 0 15px 0;	
	}
	.giveaway-right-info {
		text-align:center;
	}
	.giveaway-name-next-quantity, .giveaway-dates {
		flex-direction:column;
	}
	.giveaway-name-next, .giveaway-start {
		margin:0 0 20px 0;
	}
	.giveaway-quantity, .giveaway-end {
		text-align: center;	
	}
}