@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  font-style: normal;
  margin: 0px;
  padding: 0px;
}

canvas {
    touch-action: none;
}

a {
    text-decoration: none; /* Remove default underline */
    color: inherit;
}
#header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0px;
	background-color: #FFF;
	height: 60px;
	border-bottom: 1px solid #CCC;
}

/* Portfolio content styling */
#container {
	margin: 5px;
	padding: 0px;
}


.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24;
	cursor: pointer;
	color: #555;
	font-size: 35px;
}

.footer{	width 100%;	text-align: right;	color: #CCC;	position: fixed;    bottom: 0;    right: 0;    left: 0;}/* Full-page overlay with spinner */
#loadingSpinner {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Spinner styling */
.spinner {
	width: 50px;
	height: 50px;
	border: 5px solid #ccc;
	border-top: 5px solid #000;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}



#row {
	display: flex;
	align-items: center; /* Align items vertically centered */
	margin-bottom: 0px; /* Add some space between rows */
	padding: 5px 0px 5px 0px; /* Add some padding for better spacing */
	border-bottom: 1px solid #ccc; /* Optional: add a bottom border for each row */
	min-height: 35px;
}

.table_header {
	display: flex;
	align-items: center; /* Align items vertically centered */
	margin-bottom: 0px; /* Add some space between rows */
	padding: 5px 0px 5px 0px; /* Add some padding for better spacing */
	border-bottom: 1px solid #ccc; /* Optional: add a bottom border for each row */
	min-height: 20px;
	position: sticky;
	top: 61px;
	background: #EEE;
	color: #555;
}


.row_share{

}

.row_share:hover{
	background-color: #f5f5f5;
	cursor: pointer;
	
}

/* Style for each column */
.col_bank, .col_name, .symbol, .col_price, .col_priceEUR, .col_rowvalue, .col_rowpercent, .col_quantity, col_buyprice {
	flex: 1; /* Allow columns to take equal space */
	padding: 0px; /* Add some padding inside each column */
	text-align: right;
}

/* Optional: Different width for specific columns */
.col_bank, .col_name{
	flex: 2; /* Make the bank column take twice the space */
}

.col_name {
	text-align: left;
}

.col_symbol, .col_quantity, .col_rowpercent  {
	flex: 0.5; /* Make the name column take twice the space */
	text-align: center;
}

.col_price, .col_buyprice, .col_priceEUR, .col_rowvalue {
	flex: 1.5; /* Make these columns a bit wider */
}
.col_buyprice, .col_rowpercent{
	color: initial;
}
/* Optional: Add some text alignment */
.col_price, .col_buyprice, .col_priceEUR, .col_rowvalue, .col_rowpercent {
	text-align: right; /* Right-align the price columns */
}

.col_priceEUR, .col_bank {
	display: none;
}	

.var_more {
	color: #34ba2b;
}
.var_less {
	color: red;
}
.var_equal {
	color: black;
}

.delbutt{
	display: none;
}

.sep_bank {
	display: flex;
	height: 30px;
	background: #FFF;
	background-image: linear-gradient(to right, #CCC , #FFF);
	padding: 5px 5px 5px 5px;
	color: #555;
	font-weight: bold;
	position: sticky;
	top: 61px;
}

.portfolio_total {
	display: flex;
	text-align: left;
	padding: 0px;
	font-size: 120%;
	justify-content: space-between;
	align-items: center;
}

.ticker {
	font-size: 70%;
	color: #999;
}	

form {
	width: 300px;
	margin: 0 auto;
}
label {
	display: block;
	margin: 10px 0 5px;
}
input, select {
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
}
button {
	margin-top: 20px;
	width: 100%;
	padding: 10px;
	background-color: #28a745;
	color: white;
	border: none;
	cursor: pointer;
}
button:hover {
	background-color: #218838;
}







.error {
    color: red;
    display: flex;
    gap: 20px;
    padding: 10px;
    width: 100%;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
	align-items: center;
}

pre {
    margin: 0; /* Remove default margin */
}













/* The navigation menu */
.sidenav {
  height: 0; 
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 61px; /* Stay at the top */
  background-color: #FFF; /* Black*/
  overflow: hidden;
  transition: height 0.3s ease; /* 0.5 second transition effect to slide in the sidenav */
  padding: 0px;
  -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 20px;
  text-decoration: none;
  font-size: 180%;
  color: #555;
  display: flex;
  transition: 0.3s;
  align-items: center; /* Centers vertically */
  text-indent: 10px;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .sidenav a:hover span {
  color: #000;
}


@media only screen and (max-width: 600px) {
    body {
        font-size: 0.8rem;
    }
}

#searchBox, #searchBox:focus{
	border: 0px solid #555;
	font-size: 1.3rem;
	outline: 0px solid #555;
}