@font-face {
	font-family: Manrope;
	src: url('./Manrope-Regular.ttf');
}

html, body {
	font-family: Manrope; 
    margin: 0px;
	width:100%;
	height:100%;
	border:none;
	background-color: #121212;
	color: #e0e0e0;
}

table {
	border-spacing:0;
	padding:0;
}

td {
	padding:0px;
	margin:0;
	white-space: nowrap;
}

p {
    word-break: normal;
    white-space: normal;
}

.smallgreytext{
	font-size : 10px;
	color: #888;
}

.smalltableheadertext{
	font-size : 12px;
	color: #b0b0b0;
}

.smalltabletext{
	font-size : 12px;
	color: #e0e0e0;
}

.alignright{
	text-align:right;
}

.fullwidthheight {
	width:100%;
	height:100%;
}

.blackout{
	position: absolute;
	width:100%;
	height:100%;
	background-color:rgba(0, 0, 0, 0.7);
	z-index: 10;
	display:none;
}

.centerdiv {    
	position: absolute;   
	top: 50%;   
 	left: 50%;  
  	transform: translate(-50%, -50%);
	
	width:500px;
	height:310px;
	
	z-index: 20;
	display:none;
}
		
.greyrounded {
	text-align:left;
	background-color: #1e1e2e;
  	border-radius: 8px;
  	border-color: #6c5ce7;
	padding:0px;
	margin:0px;
	width:100%;
	height:100%;
}

.paddedborder{
	padding:8px;
}

.buyorder {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.05) 100%);
  border-left: 3px solid var(--buy);
} 
.sellorder {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.05) 100%);
  border-left: 3px solid var(--sell);
} 
.otherorder {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2) 0%, rgba(251, 146, 60, 0.05) 100%);
  border-left: 3px solid var(--other);
} 

/*.buyorder{background-color: #1a4d1a;} 
.sellorder{background-color: #4d1a1a;} 
.otherorder{background-color: #1a1a4d;} 
*/

.chatroom{
	padding:4px;
	font-size:0.8em;
	border-radius: 8px;
	height:200px;
	overflow-y: auto;
	background:#252540;
	text-align:left;
}

/* Normal buttons */
.mybtn {
  background-color: #6c5ce7;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
  min-width:60px;
}

.mybtn:hover {
  background-color: #5b4cdb;
}

.mybtn:active {
  background-color: #4839a8;
}

.mybtn:disabled {
  background-color: #404040;
}

/* BUY/SELL Buttons with gradients */
#id_createorder_buy {
	background: linear-gradient(135deg, #00b894, #00a085);
	border: none;
}

#id_createorder_buy:hover {
	background: linear-gradient(135deg, #00a885, #009075);
}

#id_createorder_buy:active {
	background: linear-gradient(135deg, #009075, #008065);
}

#id_createorder_sell {
	background: linear-gradient(135deg, #e74c3c, #c0392b);
	border: none;
}

#id_createorder_sell:hover {
	background: linear-gradient(135deg, #d84333, #b02e22);
}

#id_createorder_sell:active {
	background: linear-gradient(135deg, #c0392b, #a52b21);
}

/* Chart Time buttons */
.chartbtn {
  background-color: #e17055;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 4px 4px;
  font-size: 10px;
  cursor: pointer;
  min-width:40px;
}

.chartbtn:hover {
  background-color: #d35d43;
}

.chartbtn:active {
  background-color: #b84d33;
}

.chartbtn:disabled {
  background-color: #404040;
}

/* Menu buttons */
.menubtn {
  background: linear-gradient(135deg, #1e3a5f, #0d2137);
  border: none;
  border-radius: 4px;
  color: white;
  padding: 6px 8px;
  font-size: 14px;
  cursor: pointer;
  min-width:80px;
}

.menubtn:hover {
  background: linear-gradient(135deg, #2a4d75, #1e3a5f);
}

.menubtn:active {
  background: linear-gradient(135deg, #152d4a, #0d1825);
}

.menubtn:disabled {
  background: linear-gradient(135deg, #2a4d75, #1e3a5f);
}

/* Form inputs and selects */
input[type="text"],
input[type="number"],
input[type="password"],
select,
textarea {
	background-color: #252540;
	color: #e0e0e0;
	border: 1px solid #404040;
	border-radius: 4px;
	padding: 4px 6px;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
	border-color: #6c5ce7;
	outline: none;
}

input[type="range"] {
	accent-color: #6c5ce7;
}

/* Links */
a {
	color: #00cec9;
}

a:hover {
	color: #00b5b0;
}

/* Table headers */
th {
	color: #b0b0b0;
	border-bottom: 1px solid #404040;
	padding: 4px;
	text-align: left;
}

/* Table cells */
td {
	color: #e0e0e0;
}

/* Checkbox styling */
input[type="checkbox"] {
	accent-color: #6c5ce7;
}