/* Make this mobile first*/
/* Default styles, i.e. for mobile phones go here:*/

/* First, add the general website style */
:root {
	--green: #0f8a0f;
	--red: #b81414;
	--blue: #3030e8;
	--black: #29293d;
	--yellow: #ffcc00;
	--yellow-bg: #fff5cc;
	--section-bg: #47476b;
	--line: #33334d;
	--form-line: #c2c2d6;
	--background: #f0f0f5;
}

body {
	font: normal 1em Lato, Helvetica, sans-serif; 
	font-size: 100%;
	margin: 0;
	padding: 0;
	background-color:var(--background);
	color: var(--black);
	text-decoration-skip-ink: none;
	min-width: 360px;
}

* {
    box-sizing: border-box;
}

input:focus, select:focus,
textarea:focus, button:focus {
	outline: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

select { background-color: transparent; }

#whiteBg {
	background-color:white; 
	min-height: calc(100vh - 80px);
	padding-bottom: 40px
}

h1{
	letter-spacing: -0.2px;
	color: #1212a1;
	text-align:center;
	margin:0;
	padding-top: 20px;
}

h1 .black {color: var(--black); }

h2 {
	text-align: center;
	color: #3d3d5c;
	margin: 0;
	padding-top: 20px;
}

h1 + h2 {
	padding-top: 40px;
}

p + h2 {
	text-align: left;
}

img {
    max-width: 100%;
    height: auto;
}

a {color: var(--blue);}

a:link, a:visited { text-decoration:none; }

a:hover { 
	text-decoration:underline; 
	cursor: pointer;
}

.loneLink {
	margin: auto;
	text-align: center;
}

.loneLink a { 
	height: 30px; 
	display: block;
}

.loneLink .fal, .lonelink .fa-light { margin-right: 5px; }

.quickModal {
	display: none;
	z-index: 3;
  left: 0; top: 45px;
	position: fixed;
  width: 100%; height: 100%;
  background-color: white;
	overflow: auto;
	padding-bottom: 80px;
}

/* Forms */
.field {
	text-transform: uppercase;
	font-size: 65%;
	color: #7575a3; /*#666699;*/
	padding-top: 10px;
}

.inputBox, .formInput {
	width: 100%;
	border: 1px solid var(--form-line);
	border-radius: 4px;
}

.inputBox .field { padding: 5px 5px 0 5px;}

.inputBox input[type=text], input[type=number], .inputBox input[type=password], .inputBox textarea {
	width: 100%;
	padding: 5px;
	font-size: 105%;
	border: none;
	background-color: transparent;
}

.description, .note {
	font-size: 90%;
	color: var(--black);
	background-color: var(--background);
	border: 0.5px solid var(--form-line);
	border-style: solid none none none;
	padding: 5px;
}

/* For pages with Steps*/
.step {
	display: flex;
	padding-top: 20px; 
	justify-content: flex-start; 
	align-items: center;
}

.stepNumber, .step .number {
	font-size: 120%;
	font-weight: bold;
	color: #3d3d5c;
	border: 1px solid #3d3d5c;
	border-radius: 50%;
	width: 25px;
	height:25px;
	text-align: center;
}

.stepDescription, .step .descr {
	width: 80%;
	padding-left: 10px;
	font-weight: bold;
	font-size: 100%;
	color: #3d3d5c;
}
		


/* Useful */

.endrow::after {
    content: "";
    clear: both;
    display: block;
}

.margined {
	margin:auto;
	width:90%;
	min-width: 324px;
	padding: 20px 0 40px 0;
}

.headerRow { border-bottom: 1px solid #33334d; }

.flex {
	display: flex; 
	justify-content: space-between;
}

.fal, .fa-light { display: inline-block; }

.border { border: 0.5px solid var(--black); }

.p0 { padding-top: 0;}
.p5 { padding-top: 5px;}
.p10 { padding-top: 10px;}
.p15 {padding-top: 15px}
.p20 { padding-top: 20px;}
.p40 { padding-top: 40px;}
.p80 { padding-top: 80px;}

.f133 { font-size: 133%; }
.f120 { font-size: 120%; }
.f110 { font-size: 110%; }
.f105 { font-size: 105%; }
.f100 { font-size: 100%; }
.f90 { font-size: 90%; }
.f80 { font-size: 80% }
.f65 { font-size: 65% }

.b, .bold {font-weight: bold }
.u, .underline { text-decoration:underline; }
.i, .em { font-style:italic; }
.uc, .uppercase { text-transform: uppercase; }

.red { color: red; }
.deepRed {color: var(--red);}
.blue { color: var(--blue);}
.green { color: var(--green);}

.a-left { text-align: left;}
.a-right { text-align: right;}
.a-center { text-align: center;}

.w10 {	width: 10%;	}
.w20 {	width: 20%;	}
.w40 {	width: 40%;	}
.w50 {	width: 50%;	}
.w65 {	width: 65%;	}
.w80 {	width: 80%;	}
.w90 {	width: 90%;	}
.w100 {	width: 100%;	}

.bg-pink { background-color: pink;}
.bg-lime { background-color: lime;}

.f-left { float: left; }
.f-right { float: right; }

.center { margin-left: auto; margin-right: auto; }

.hide { display: none; }

.relative { position: relative; }

.line { border-bottom: 0.5px solid var(--line) }

/* Top navigation bar and side menu*/
.topnav {
  background-color: #29293d;
  padding: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index:1;
  height: 45px;
}

.topnav a {
  color:#FFCC00;
  text-decoration: none;
  font-size: 105%;
}

.topnav a.logo { margin-top: 3px; }

.hamburger {
	display: block;
  float: left;
  text-decoration: none;
  transition: all .2s ease-in-out;
  padding-left: 16px;
  padding-top: 14px;
	width: 65px;	
}

.hamburgerLine {
	width: 16px;
	height: 2px;
	background-color: #FFCC00;
	margin: 3px 18px 0 0;
}

#leftMenuBg {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 45px;
  z-index: 5;
}

#leftMenu {
  background-color: #33334d;
  padding: 10px 20px;
  width:220px;
  height: 100%;
}

#leftMenu a {
	padding-top: 10px;
	color: var(--yellow);
  text-decoration: none;
  font-size: 105%;
  display: block;
}

#mainContent { 
	width: 100%; 
	padding-top: 45px;
	background-color: var(--black);
}

#footerBg { background-color: var(--background)}

#noUser2, #hasUser2 {
  padding-right: 16px;
	float:right; 
	height: 100%;
	text-align: right;
}

#hasUser, #hasUser2,
#noUser, #noUser2 {
	/*display: none;*/
}

#hasUser .fal, #hasUser .fa-light, #noUser .fal, #noUser .fa-light, .loneLink .fal, .loneLink .fa-light	{
	width: 30px;
}

#userPhoto {
	width: 80px; 
	height: 80px; 
	margin:auto; 
	border-radius:40px; 
	background-size: cover;
}

.badge {
  font-size: 50%;
  position: absolute;
  top: -5px;
  right: -6px;
  line-height: 15px;
  text-align: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  color: #c2c2d6;
}

/* Alert messages at top of window */
.alertContainer {
	display: none;
	background-color: var(--yellow-bg);
	border-top: 0.5px solid #997a00;
	padding: 10px 0;
}

.alert {
	margin:auto;
	width:90%;
	min-width: 324px;
	max-width: 600px;
}
 
	/*Tooltip, without positioning*/
	.tooltip { position: relative; display: inline; }

	.tooltipText {
	  visibility: hidden;
	  width: 200px;
	  background-color: var(--blue);
	  color: var(--background);
	  font-size: 90%;
	  padding: 10px;
	  border-radius: 6px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  
	  z-index: 1;
	  position: absolute;
	}

	.tooltip:hover .tooltipText {
	  visibility: visible;
	}

	.tooltip .tooltipText::after {
	  content: "";
	  position: absolute;
	  border-style: solid; 
	  border-width: 5px;
	}

/* Section with Tabs*/

.section { background-color: #47476b; }

.section h1, .section h2 {
	letter-spacing:1px;
	font-size: 90%;
	text-transform: uppercase;
	padding: 10px 0 0 0;
	color: white;
}

.tabs {
	border-color:var(--background);
	height: 30px;;
	text-align: center;
	margin: 10px 0 0 0;
	padding: 0;
	background-color: ;
}

.tablinks, .tablinks a {
	width: 25%;
	max-width: 100px;
	text-transform: uppercase;
	background-color: #d1d1e0;
	border: 1px solid #c2c2d6;
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	height: 30px;
	line-height: 27px;
	display: inline-block;
	font-size: 90%;
	
}

.tablinks a:hover, .tablinks a:active {
	text-decoration: none;
}

.tablinks.tabSeparator, .tablinks.tabSides {
	width:10px; 
	background-color: #47476b;
	border-left: none;
	border-right: none;
	border-top-color: #47476b;
	display: inline-block;
	max-width: 100%;
	
}

/* In the Includes */
#buyButton, #sellButton, #sendButton {
  padding: 0;
	color: var(--black);
  width: 80px;
  height: 32px;
}

.bottomBar {
	text-align: center;
	border-top: 1px solid #b3b3cc;
	padding: 10px 0;
	background-color:white;
	height: 60px;
	width: 100%;
}	

.bottomBar button {
	background-color: var(--background);
	border: 0.1px solid #e0e0eb;
	padding: 0;
}

.stick {
  position: fixed; 
  bottom: 0; 
  left: 0;
  width: 100%;
}


/* Buy-sell modal boxes*/
.tradeModal {
  display: none;
  position: fixed;
  z-index: 3;
  left: 0; top: 45px;
  width: 100%; height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(31,31,46); /* Fallback color */
  background-color: rgba(31,31,46,0.8);
}

.tradeModal-content {
	margin-top: 0;
  width: 100%;
  height: 135%;
  background-color: var(--background);
}

.close {
  color: #ffffff;
  text-align: right;
  font-size: 48px;
  padding-right: 10px;
}

.close:hover {
	cursor: pointer;
}

#buySign, #sellSign { 
	font-size: 100%;
	padding: 8px 27px;
}

.tradeFormContainer { /* The <div>s that contain the form elements */
  width: 80%;
  max-width: 300px;
  margin: auto;
  text-align: left;
}

.submitButton  {
	background-color: var(--blue);
  border: 1px solid var(--blue); border-radius: 4px;
  cursor: pointer;
  font-size: 90%; font-weight: bold; 
  text-transform: uppercase;   text-align: center;
  color: white;
  padding: 10px 27px;
}

.amountLabel {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 0.8em;
}

.feeApplicable {
	 text-transform: uppercase;
	 font-size: 0.7em;
	 padding-top: 5px;
	 text-align: center;
	 color: #33334d;
}

/* Buy Queue and Sell Queue tables*/
.buyQueue div, .buyQueue a {
	color: var(--red);
}

.sellQueue div, .sellQueue a {
	color: var(--green);
}

.buyQueue a, .sellQueue a {
	text-decoration:underline
	
}

.colB, .colS {
	width: 30%;
	padding-right: 5px;
	padding-left: 5px;
}

.colG {
	width: 40%;
	padding-right: 5px;
}

.colR {
	width: 30%;
	padding-right: 5px;
}

.qRow { padding: 3px 0; }

.yellow { background-color: var(--yellow-bg) }
		
.buyIcon, .sellIcon {
	font-weight: bold;
	font-size: 90%;
	color: white;
	border-radius: 2px;
	width: 20px;
	height: 20px;
	text-align: center;
	display: inline-block;
	margin-right: 5px;
}

.buyIcon {
	background-color: var(--green);
}

.sellIcon {
	background-color: var(--red);
}

#trade_in_grams {
	display: none;
}

.for480, .for600, .for768, .for820, .for1080, .for1280 { display: none;}

@media only screen and (min-width: 480px) {
	/* Provides margin to the summarised buy and sell queues */
	.queuesContainer { 
		width:95%;
		margin:auto;
	}
	
	.margined, .alert {
		width: 80%;
		max-width: 600px;
	}
	
	.for480 { display: block;}
	.notFor480 { display: none;}
}


@media only screen and (min-width: 580px) {
  /* Styles specific for tablets go here: */

	#leftMenuBg { width: 220px; }

	.tradeModal { 
		justify-content: center;
		padding: 12px 0;
	}

	.tradeModal-content {
	  border: 0.5px solid #666699;
	  width: 90%;
	  height: auto;
		min-height: 780px;
		max-width:533px;
	  border-radius: 8px;
		box-shadow: 0px 16px 32px 0px rgba(31,31,46,0.2);
		background-color: var(--background);
	}
	
	#modalHeader {
	  border-top-left-radius: 8px;
	  border-top-right-radius: 8px;
	}

	.RM, .grams { padding-right: 10px; }

	.product, .user { padding-left:10px; }
	
	.for600 { display: inline}
	.notFor600 { display: none}
}

@media only screen and (min-width: 768px) {
  /* Styles specific for desktops go here: */
  
  .close{ padding-right: 5%;}
  
	.tradeModal-content { width: 80%;}

	.RM, .grams { padding-right: 16px; }

	.product, .user { padding-left:16px; }
	
	.for768 {display: block; }
	.notFor768 { display: none; }

}

@media only screen and (min-width: 820px) {

  /* At 820px, leftMenu is displayed by default */
	#leftMenuBg { display: block; }
	
	.hamburger {
		background-color: #33334d;
		width: 275px; 
	}
	
	.hamburger:hover { cursor: default; }
	
	#mainContent {
		margin-left: 220px;
		width: calc(100% - 220px);
	}
	
	.quickModal, .stick {
		left: 220px;
		width: calc(100% - 220px);
	}
	
	.for820 {display: block; }
	.notFor820 { display: none; }
	
}

@media only screen and (min-width: 1040px) {
  /* At 1040px, page is aligned at center */

	.for1080 {display: block; }
	.notFor1080 { display: none; }
}


@media only screen and (min-width: 1280px) {
  /* Styles specific for large desktops go here: */

	.margined, .alert { 
		width: 50%; 
	} 

	.for1280 {display: block; }
	.notFor1280 { display: none; }
}