@font-face {
	font-family: 'Inter';
	src: url(Inter-VariableFont.ttf) format('truetype');
	font-weight: 100 900;
    font-style: normal;
}

 
 body {
	font: normal 15px Inter;
	font-family: 'Inter', sans-serif;
	font-size:15px;
	font-style: nornal;
	color: var(--Neutral900);
	background-color: var(--Neutral0);
}

svg {
	display: inline-block;
  vertical-align: middle;
}


/* Szerokość suwaka */
::-webkit-scrollbar {
  width: 12px;
}

/* Stylizacja toru suwaka (tło) */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  margin: 10px 0; /* Margines 10px od góry i dołu */
  border-radius: 10px; /* Zaokrąglone rogi toru */
}

/* Stylizacja uchwytu suwaka (thumb) */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px; /* Zaokrąglenie uchwytu suwaka */
  border: 3px solid #f1f1f1; /* Obwódka uchwytu dopasowana do tła */
}

/* Zmiana koloru uchwytu suwaka po najechaniu */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}


/* Kolor tła i uchwytu suwaka */
* {
  scrollbar-color: #888 #f1f1f1; /* Kolor uchwytu i tła (uchwyt, tło) */
  scrollbar-width: thin; /* Szerokość suwaka: thin, auto, none */
}


 /* Styl głównego kontenera */
        .containerNewLayout {
            display: flex;
            /*height: 100vh;*/
        }

        /* Styl dla lewej kolumny */
        .leftNewLayout {
			
            width: auto;
            
			padding-left: 10px;
			padding-right: 10px;
            flex-direction: column;
            position: relative; /* Aby sticky działał w kontekście lewej kolumny */
			border-right: 1px solid  var(--Neutral600);
			background-color: var(--Neutral0);
        }

        .leftNewLayout .topNewLayout {
            height: 72px;
			/*background: var(--Divider,  var(--Neutral600));*/
			background-color:  var(--Neutral0);
			position: sticky;top: 0px;width: 208px;
			
        }
		
		 .leftNewLayout .middleNewLayout {
            flex-grow: 1;
            background-color:  var(--Neutral0);

			position: sticky;
			top: 72px;
			padding-bottom:20px;
			/*margin-bottom: 72px;*/
			/*background-color: red;*/
        }
		
		.leftNewLayout .bottomLeftNewLayout {

            background-color:  var(--Neutral0);
			height: 72px;
			position: fixed;
			bottom: 0px;
			left: 10px;
			width: 200px;
			
			/*background: var(--Divider,  var(--Neutral600));*/
        }

       

        /* Styl dla prawej kolumny */
        .rightNewLayout {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
			
        }
		
		  /* Górny i środkowy div mają stałą wysokość i są przyklejone do góry */
        .rightNewLayout .topNewLayout {
            height: 72px;
            position: sticky;
			display: flex;
            top: 0px;
			justify-content: space-between;
			z-index: 120;
			background:  var(--Neutral0);
			border-bottom: 1px solid  var(--Neutral600);
        }
		.topNewLayout {
			z-index: 1;
		}
		
		.rightNewLayout .middleNewLayout {
            height: auto;
            position: sticky;
           
			background:  var(--Neutral0);
			border-bottom: 1px solid  var(--Neutral600);
        }

        .rightNewLayout .topNewLayout div {
            background-color:  var(--Neutral0);
            flex-grow:0;
            margin-right: 10px;
			
        }

        .rightNewLayout .topNewLayout .leftNewLayout {
            flex-grow: 1;
            margin-right: 10px;
        }

        .rightNewLayout .topNewLayout .centerNewLayout, .rightNewLayout .topNewLayout .rightNewLayout {
            width: auto;
        }


        .rightNewLayout .bottomNewLayout {
            flex-grow: 1;
            display: flex;
			/*border-top: 1px solid  var(--Neutral600);*/
			padding-top: 20px;
        }

        .rightNewLayout .bottomNewLayout .leftNewLayout {
            flex-grow: 1;
            background-color:  var(--Neutral0);
        }

        .rightNewLayout .bottomNewLayout .rightNewLayout {
            width: 208px;
			flex-grow: 0;
            display: none; /* Ukryty prawy div */
        }
		
		
		
		
		
		
		
/*menuNew*/

		.menuNewItem_1 {
			width: 200px;
			height: 48px;
			gap: 14px;
			border-radius: 8px;
			opacity: 0px;
			background-color: var(--Neutral0);
			color:  var(--Neutral800);

;
		}
		/* State=Hover, Size=Big */
		.menuNewItem_1:hover, .menuNewItem_1_active:hover{
		
			background:  var(--Neutral200);
			border-radius: 8px;
			color:  var(--Neutral800);
			/* Inside auto layout */
			flex: none;
			order: 1;
			flex-grow: 0;
		}
		.menuNewItem_1_active{
			width: 200px;
			height: 48px;
			background:  var(--Neutral200);
			border-radius: 8px;
			color:  var(--Neutral900);			
			/* Inside auto layout */
			flex: none;
			order: 1;
			flex-grow: 0;
		}

		
		.menuNewItem_1_txt {
			top:2px;
			left:0px;
			/*font-family: Inter;*/
			font-size: 16px;
			font-weight: 600;
			line-height: 28px;
			text-align: left;
			
			position: relative;

		}
		.menuNew_arrow {
			top:0px;
			right:0px;
			/*font-family: Inter;*/
		
			position: relative;

		}
		
		.menuNewGroup {
			padding-left:0px;
			padding-bottom: 8px;
			text-decoration:none;
		}
		
		.menuNewGroup a, .menuNewGroup a:visited{
			text-decoration:none;
			color: inherit;
		}
		
		.menuNewGroup div {
			padding-left:16px;	
			padding-right: 4px;			
			width: 180px;
			min-height: 20px;
			padding-bottom: 8px;			
			opacity: 0px;
			
			border-radius: 8px;
			/* Inside auto layout */
			flex: none;
			order: 3;
			flex-grow: 0;
			margin-top:1px;
			text-align:right;
			

		}
		
		.menuNewGroup div:hover{
			background:  var(--Neutral200);
			border-radius: 8px;
			/* Inside auto layout */
			flex: none;
			order: 4;
			flex-grow: 0;
			color:  var(--Neutral900);

		}
		
		
		.menuNewItem_2_active {
			width:200px;
			min-height: 20px;
			
			gap: 0px;
			opacity: 0px;
			padding-top: 8px;			
			background-color:  var(--Neutral200);			
			font-size: 14px;
			font-weight: 400;
			line-height: 18px;
			text-align: left;
			position: relative;
			color:  var(--Neutral900);
		}
		
		.menuNewItem_2  {
			width:200px;
			min-height: 20px;
			
			gap: 0px;
			opacity: 0px;
			padding-top: 8px;			
			background-color:  var(--Neutral0);			
			font-size: 14px;
			font-weight: 400;
			line-height: 18px;
			text-align: left;
			position: relative;
			color:  var(--Neutral900);
		}
		
/*menuNew L3*/

		.menuL3 {
			padding-left:0px;
			padding-bottom: 8px;
			padding-top: 4px;
			text-decoration:none;
			display:inline-flex;
			flex-wrap: wrap;
			width: inherit;
		}
		
		.menuL3 a, .menuL3 a:visited{
			text-decoration:none;
			color: inherit;
		}
		
		.menuL3 div {
			padding:8px 12px 8px 12px;		
			margin-top: 4px;			
			margin-right: 4px;			
			width:  max-content;
			height: 20px;		
			opacity: 0px;
			gap: 8px;
			border-radius: 4px;
			/* Inside auto layout */
			flex: none;
			order: 3;
			flex-grow: 0;
			

		}
		


		
		.menuL3 div:hover{
			background:  var(--Neutral200);
			border-radius: 8px;
			/* Inside auto layout */
			flex: none;
			order: 4;
			flex-grow: 0;
			color:  var(--Neutral800);

		}
		
		
		.menuNewItem_3_active {
			width:auto;
			height: 20px;
			left: 8px;
			gap: 0px;
			opacity: 0px;
			padding-top: 8px;			
			background-color:  var(--Neutral200);			
			font-size: 12px;
			font-weight: 600;
			line-height: 18px;
			text-align: left;
			position: relative;
			color:  var(--Neutral900);
		}
		
		.menuNewItem_3  {
			width:auto;
			height: 20px;
			left: 8px;
			gap: 0px;
			opacity: 0px;
			padding-top: 8px;			
			background-color:  var(--Neutral0);			
			font-size: 12px;
			font-weight: 400;
			line-height: 18px;
			text-align: left;
			position: relative;
			color:  var(--Neutral800);
		}
		
		
/* tooltip*/
		.ttBodyNew{
		
			padding: 8px 12px 8px 12px;
			gap: 8px;
			border-radius: 8px;
			opacity: 0px;
			background-color:  var(--Neutral900);
			color:  var(--Neutral0);
			font-size: 12px;

		}


/*Lista portfeli*/
	#selected-item-portfele {
	  margin-top: 12px;
	  margin-left: 24px;
	  padding-top:16px;
	  padding-left:16px;
	  padding-right:16px;
	  width: fit-content;
	  height:32px;
	  background-color:  var(--Neutral0);
	  border-radius: 8px;
	  border: 1px solid  var(--Neutral600);
	  color:  var(--Neutral900);
		
		font-size: 18px;
		font-weight: 400;
		line-height: 16px;
		text-align: left;
	  cursor: pointer;
	  min-width:280px;
	}
	
	#add-item-portfele {
	  margin-top: 12px;
	  margin-left: 24px;
	  padding-top:14px;
	  padding-left:16px;
	  padding-right:16px;
	  width: fit-content;
	  height:34px;
	  background-color:  var(--Neutral0);
	  border-radius: 8px;
	  border: 1px solid  var(--Neutral600);
	  color:  var(--Neutral900);
		
		font-size: 18px;
		font-weight: 400;
		line-height: 16px;
		text-align: left;
	  cursor: pointer;
	}
	#shortcuts-item-portfele {
	  margin-top: 12px;
	  margin-left: 24px;
	  padding-top:14px;
	  padding-left:16px;
	  padding-right:16px;
	  width: fit-content;
	  height:34px;
	  background-color:  var(--Neutral0);
	  border-radius: 8px;
	  border: 1px solid  var(--Neutral600);
	  color:  var(--Neutral900);
		
		font-size: 18px;
		font-weight: 400;
		line-height: 16px;
		text-align: left;
	  cursor: pointer;
	}

	#status-icon-portfele, #arrow-icon-portfele {
	  width: 20px;
	  height: 20px;
	  margin-left: 10px;
	}
	#arrow-icon-portfele {
	  float: right;
	}
	
	#popupListaPortfeli {
	  position: absolute;
	  top: 72px;
	  left: 24px;
	  width: 280px;
	  background-color:  var(--Neutral0);
	  border-radius: 8px;
	  border: 1px solid  var(--Neutral600);
	  padding: 20px 16px 20px 16px;
	  box-shadow: 0px 8px 16px 0px  var(--Shadow);
	  gap:16px;
	}
	#popupListaSkrotow {
	  position: absolute;
		top: 72px;
		left: 300px;
	  width: 280px;
	  background-color:  var(--Neutral0);
	  border-radius: 8px;
	  border: 1px solid  var(--Neutral600);
	  padding: 20px 16px 20px 16px;
	  box-shadow: 0px 8px 16px 0px  var(--Shadow);
	  gap:16px;
	   height: fit-content;
	}

	

	#search-box-portfele {
	  width: 248px;
	  height:40px;
	  border-radius: 8px;
	  border: 1px solid  var(--Neutral600);
	  background-color:  var(--Neutral0);
	  padding-left: 40px;
	}

	#names-list-portfele {
	  list-style: none;
	  padding: 0;
	  max-height: 453px;
	  overflow-y: scroll; /* Przewijanie */
	  scrollbar-width: thin; /* cieńszy pasek przewijania w Firefoksie */
	  scrollbar-color:  var(--Neutral600) transparent; /* kolor paska przewijania w Firefoksie */
	}
	
	/* Dla Webkit (Chrome, Safari) */
	#names-list-portfele::-webkit-scrollbar {
	  width: 8px; /* szerokość paska przewijania */
	}

	#names-list-portfele::-webkit-scrollbar-thumb {
	  background-color: var(--Neutral600); /* kolor paska przewijania */
	  border-radius: 4px; /* zaokrąglenie */
	}

	#names-list-portfele li {

		font-size: 14px;
		font-weight: 400;
		line-height: 16px;
		text-align: left;
		color:  var(--Neutral900);
	}
	#names-list-portfele a, #names-list-portfele a:visited{
			text-decoration:none;
			color: inherit;
			margin-right:4px;
		}
	#names-list-portfele a:hover{
			text-decoration:none;
			color:  var(--Accent700);
		}

	#names-list-portfele li img {
	  width: 15px;
	  height: 15px;
	  margin-right: 10px;
	}
	
	#names-list-shortcuts {
	  list-style: none;
	  padding: 0;
	  max-height: 453px;
	 
	 
	}
	
	#names-list-shortcuts li {

		font-size: 14px;
		font-weight: 400;
		line-height: 16px;
		text-align: left;
		color:  var(--Neutral900);
	}
	#names-list-shortcuts a, #names-list-shortcuts a:visited{
			text-decoration:none;
			color: inherit;
		}
	#names-list-shortcuts a:hover{
			text-decoration:none;
			color:  var(--Accent700);
		}

	#sort-options-portfele {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 10px;
	}

	#sort-options-portfele img {
	  width: 20px;
	  height: 20px;
	  cursor: pointer;
	}


/*lista dodatkowych opcji urzytkownika*/


#popupListaUser {
	  position: absolute;
	  top: 52px;
	  left: -200px;
	  width: 200px;
	  background-color:  var(--Neutral0);
	  border-radius: 8px;
	  border: 1px solid  var(--Neutral600);
	  padding: 20px 16px 20px 16px;
	  box-shadow: 0px 8px 16px 0px  var(--Shadow);
	  gap:16px;
	}
	
	.userMenuItem{
		font-family: Inter;
		font-size: 14px;
		font-weight: 400;
		line-height: 16px;
		text-align: left;
		color:  var(--Neutral900);
		padding-top: 8px;
		padding-bottom: 8px;
	}
	
	.userMenuItem a, .userMenuItem a:visited{
		text-decoration:none;
		color: inherit;
	}  
	.userMenuItem a:hover{
		text-decoration:none;
		color: var(--Accent700);
	}  
	
	
	
	.buttonDivNewLayout_small_black, .buttonDivNewLayout_small_black_input 
	{
		height: 16px;
		margin-top: 2px;
		margin-bottom: 2px;
		margin-left: 2px;
		margin-right: 2px;
		padding: 8px 4px 8px 4px;
		gap: 8px;
		border-radius: 6px;
		opacity: 0px;
		color: var(--Neutral0);
		background-color: var(--Neutral900) !important;
		font-size: 12px;
		font-weight: 600;
		line-height: 16px;
		text-align: center;
		cursor:pointer;

	}
	.buttonDivNewLayout_small_black_input 
	{
		position: relative;
		height: 32px;
		top: 0px;
		left: 0px;
		font-size: 12px;
		font-weight: 600;
		line-height: 16px;
		text-align: center;
		border: none;             /* Usuwa obramowanie */
		box-shadow: none; 
		font: inherit;            /* Dziedziczy font od rodzica */
		
		cursor:pointer;
		
		
	}
	
	.buttonDivNewLayout_small_black:hover, .buttonDivNewLayout_small_black_input:hover
	{
		background-color: var(--Neutral800) !important;;
		
		cursor:pointer;
	}
	.buttonDivNewLayout_small_black:active
	{
		position:relative;
		top:2px;
		left: 0px;		
		background-color: var(--Neutral700) !important;;
		
		cursor:pointer;
		
	}
	
	.buttonDivNewLayout_small_black_input:active, .buttonDivNewLayout_small_black_input:focus
	{
		position:relative;
		top:3px;
		left: 0px;		
		background-color: var(--Neutral700) !important;
		border: none;             /* Usuwa obramowanie */
		box-shadow: none; 
		
		cursor:pointer;
	}
	
	
	.buttonDivNewLayout_small_Light, .buttonDivNewLayout_small_Light_input 
	{
		height: 16px;
		margin-top: 2px;
		margin-bottom: 2px;
		margin-left: 2px;
		margin-right: 2px;
		padding: 8px 4px 8px 4px;
		gap: 8px;
		border-radius: 6px;
		border: 2px solid var(--Neutral800);
		opacity: 0px;
		color: var(--Neutral900);
		background-color: var(--Neutral0) !important;
		font-size: 12px;
		font-weight: 600;
		line-height: 16px;
		text-align: center;
		cursor:pointer;

	}
	.buttonDivNewLayout_small_Light_input 
	{
		position: relative;
		height: 32px;
		top: 0px;
		left: 0px;
		font-size: 12px;
		font-weight: 600;
		line-height: 16px;
		text-align: center;
		border: none;             /* Usuwa obramowanie */
		box-shadow: none; 
		font: inherit;            /* Dziedziczy font od rodzica */
		
		cursor:pointer;
		
		
	}
	
	.buttonDivNewLayout_small_Light:hover, .buttonDivNewLayout_small_Light_input:hover
	{
		background-color: var(--Neutral200) !important;;
		
		cursor:pointer;
	}
	.buttonDivNewLayout_small_Light:active
	{
		position:relative;
		top:2px;
		left: 0px;		
		background-color: var(--Neutral400) !important;;
		
		cursor:pointer;
		
	}
	
	.buttonDivNewLayout_small_Light_input:active, .buttonDivNewLayout_small_Light_input:focus
	{
		position:relative;
		top:3px;
		left: 0px;		
		background-color: var(--Neutral400) !important;
		border: none;             /* Usuwa obramowanie */
		box-shadow: none; 
		
		cursor:pointer;
	}
	
#popupListaAlerts {
	  position: absolute;
	  top: 40px;
      left: -150px;
	  width: 200px;
	  background-color:  var(--Neutral0);
	  border-radius: 8px;
	  border: 1px solid  var(--Neutral600);
	  padding: 20px 16px 20px 16px;
	  box-shadow: 0px 8px 16px 0px  var(--Shadow);
	  gap:16px;
	}
	
	.alertyItem{
		font-family: Inter;
		font-size: 14px;
		font-weight: 400;
		line-height: 16px;
		text-align: left;
		color:  var(--Neutral900);
		padding-top: 8px;
		padding-bottom: 8px;
	}
	
	.alertyItem a, .alertyItem a:visited{
		text-decoration:none;
		color: inherit;
	}  
	
	.alertyItem a:hover{
		text-decoration:none;
		color: var(--Accent700);
	} 
	
	.alertsNum {
		width: 16px;
		height: 16px;
		border: none;
		display:inline-block;
		border-radius: 50%;
		overflow: hidden;
		text-align: center !important;
		background-color: var(--Red400) !important; 
		color: var(--Neutral0);
		font-family: Inter;
		font-size: 10px;
		font-weight: 600;
		float:right;
		margin: 0px;

	}
	.alertsNumAll {
		width: 16px;
		height: 16px;
		border: none;
		display:inline-block;
		border-radius: 50%;
		overflow: hidden;
		text-align: center !important;
		background-color:var(--Red400) !important; 
		color: var(--Neutral0);
		font-family: Inter;
		font-size: 10px;
		font-weight: 600;
		float:right;
		margin: 0px;

	}
	
	.forumSVG_red{
	  filter: invert(28%) sepia(100%) saturate(7369%) hue-rotate(347deg) brightness(103%) contrast(107%);
	}
	
	.forumSVG_orange {
	  filter: invert(43%) sepia(96%) saturate(729%) hue-rotate(3deg) brightness(102%) contrast(99%);
	}
	
	
	.newLayout-actions{
		position: absolute;
		left:20px;
		display:flex;
	}
	
/*AlertPopUp*/

	.alertPopUpNewLayout {
		background-color:  var(--Neutral0);
		border-radius: 8px;
		border: 1px solid  var(--Neutral900);
		
		box-shadow: 0px 8px 16px 0px  var(--Shadow);
		gap:16px;
		overflow: hidden;
	}
	
	.NaglowekNewLayout {
		background-color:  var(--Neutral900);
		color: var(--Neutral0);
		padding: 10px;
		text-align: center;
		font-weight: 600;
	}
	
/* operacje popup */
	
	.operacjePopUpNewLayout {
		background-color:  var(--Neutral0);
		border-radius: 8px;
		border: 1px solid  var(--Neutral900);
		padding:32px;
		box-shadow: 0px 8px 16px 0px  var(--Shadow);
		gap:24px;
		overflow: visible;/*zmeniłem na visible bo ukryta była wystająca część pomocy kontektowej*/
		width:540px;
		margin-bottom: 20px;
		position:relative;
		
	}
	
	.operacjePopUpTitleNewLayout {
		
		font-family: Inter;
		font-size: 20px;
		font-weight: 600;
		line-height: 24px;
		text-align: left;
		width:540px;
		margin-bottom: 8px;
		color:var(--Neutral900);
		
	}
	
	#tableOperacjeNewLaytou{
		width:100%;
	}
	
	.operacjeDataTitle{
		font-family: Inter;
		font-size: 12px;
		font-weight: 600;
		line-height: 16px;
		text-align: left;
		margin-top: 8px;
		z-index: 1;
		position: relative;

	}
	
	.operacjeDataTitleGroup{
		font-family: Inter;
		font-size: 14px;
		font-weight: 800;
		line-height: 16px;
		text-align: left;
		margin-top: 8px;
	}
	
	.operacjeDataInput{
		/*width: 506px;*/
		height: 18.4px;
		padding: 8px 16px 8px 16px;
		margin-top:3px;
		font-size: 16px;
		gap: 0px;
		border-radius: 8px;
		border: 1px solid  var(--Neutral600);
		opacity: 0px;
		text-align: left;


	}
	
	.operacjeDataInputInfo{
		/*width: 506px;*/
		height: auto;
		/*padding: 8px 16px 8px 16px;*/
		margin-top:3px;
		font-size: 12px;
		gap: 0px;
		border-radius: 8px;
		border: 1px solid  var(--Neutral600);
		opacity: 0px;
		text-align: left;
		

	}
	.operacjeDataInputSpan{
		/*width: 506px;*/
		height: 18px;
		padding: 7px 16px 5px 16px;
		margin-top: 2px;
		font-size: 14px;
		gap: 0px;
		border-radius: 8px;
		border: 1px solid  var(--Neutral600);
		opacity: 0px;
		text-align: left;
		background: var(--Neutral600);
		color: var(--Neutral800); 

	}
	
	.operacjeDataInputNoBorder{
		/*width: 540px;*/
		position:relative;
		height: fit-content;
		top:0px;
		left:0px;
		/*height: 32px;*/	
		text-align: left;
		/*overflow:hidden;*/
		
	}
	
	
	
	.buttonsNewLayout {
		
		width:100%;
		padding:16px 8px 8px 8px;
		display: flex;
		justify-content: flex-end;
		box-sizing: border-box;
	}
	
	.errorNewLayoutRed {
		padding:16px;
		color: var(--Red400);
	}
	
	
	.commentNewLayuotBlack {
		margin-top:8px;
		margin-bottom:8px;
		padding: 8px 8px 8px 30px;
		font-size:12px;
		background-image: url('images/newLayout/light/info.png');
		background-position: 4px center;
		background-repeat: no-repeat;
		color: var(--Neutral900);
		background-color: var(--Neutral400);
		border-radius: 6px;
		width:100%;
		font-weight:400;
		text-align:left;
		box-sizing: border-box;
		/*margin: 8px;*/
	}
	
	.commentNewLayuotOrange {
		margin-top:8px;
		font-size:10px;
		padding: 8px 8px 8px 30px;
		background-image: url('images/newLayout/light/info.png');
		background-position: 4px 4px;
		background-repeat: no-repeat;
		background-color: var(--Neutral400);
		border-radius: 6px;
		color: var(--Accent700);
		width:100%;
		font-weight:400;
		box-sizing: border-box;
		text-align:left;
	}
	
	
/*file upload*/
.file-upload {
  display: flex;
  align-items: center;
}

.custom-file-upload {
  background-color: var(--Neutral900);
  color: var(--Neutral0);
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  margin-right: 10px;
  margin-top: 0px;
  text-align: center;
  width: 150px;
  min-width: 150px;
  font-size: 12px;
  font-weight: 600;
  height: 32px;
  box-sizing: border-box;

}

.custom-file-upload:hover {
  background:  var(--Neutral800);
  
}



#file-name {
  font-size: 14px;
  color: var(--Neutral900);
}

/*charts*/
 .chartCointainerDiv, .chartNewLauout{
	  
	  background-color:  var(--Neutral0);
	  border-radius: 8px;
	  border: 1px solid  var(--Neutral600);
	  padding: 4px 4px 4px 4px;
	  box-shadow: 0px 8px 16px 0px  var(--ShadowLight);
	  margin-bottom:4px;
	  margin-top:4px;
	  overflow: hidden;
	position: relative;
	}
.commentCointainerDiv{
	  
	  background-color:  var(--Neutral0);
	  border-radius: 8px;
	  border: 1px solid  var(--Neutral600);
	  padding: 14px;
	  box-shadow: 0px 8px 16px 0px  var(--ShadowLight);
	  margin-bottom:4px;
	  margin-top:4px;
	  overflow: hidden;
	  position: relative;

	}
	
	
/* memuSetings*/

.memuSetHeaderActive{
	color: var(--Accent700);
	margin:6px;font-size:16px
}

.memuSetHeaderInActive{
	color: var(--Neutral900);
	margin:6px;font-size:16px
}

.spacer {
    flex: 1; /* Wypełnia przestrzeń między elementami */
}

.colorOrange {
    color: var(--Accent800); /* Wypełnia przestrzeń między elementami */
}

/*Landing page*/
.aos-animate {
    transform: none !important;
}

.lp_head{
	width:400px;
	height:250px;
	background-color:  var(--Neutral0);
	border-radius: 8px;
	border: 1px solid  var(--Neutral600);
	padding: 14px;
	box-shadow: 0px 8px 16px 0px  var(--ShadowLight);
	margin: 64px auto 64px auto;

}

.lp_title{

	font-family: Inter;
	font-size: 44px;
	font-weight: 600;
	/*line-height: 76px;*/
	text-align: left;


}
.lp_button{

	margin-top:20px;
	float:right;
	margin-right:20px;

}

.lp_subtitle{

font-family: Inter;
font-size: 18px;
font-weight: 600;
/*line-height: 56px;*/
text-align: left;


}

.lp_image{
	width:400px;
	height:250px;
	background-color:  var(--Neutral0);
	border-radius: 8px;
	border: 1px solid  var(--Neutral600);
	padding: 14px;
	box-shadow: 0px 8px 16px 0px  var(--ShadowLight);
	margin: 64px auto 64px auto;
	display: flex;
    justify-content: center;
    align-items: center;
}

.lp_wave {
	position: relative;
	width: 100%;
	height: 40px;
    margin-top: -40px;
}


@keyframes waveAnimation {
   0% {
    d: path("M0,30 C400,10 800,50 1200,30 L1200,30 L1200,0 L0,0 Z");
  }
  50% {
    d: path("M0,30 C400,50 800,10 1200,40 L1200,40 L1200,0 L0,0 Z");
  }
  100% {
    d: path("M0,30 C400,10 800,50 1200,30 L1200,30 L1200,0 L0,0 Z");
  }
}

.rotaded {
	transform: rotate(-90deg); /* Obrót o 90 stopni przeciwnie do wskazówek zegara */
	transform-origin: center; /* Punkt obrotu ustawiony na środek */
	display: inline-block; /* Umożliwia stosowanie transformacji na poziomie bloku */
	text-align: center; /* Wyrównanie tekstu w środku div-a */
	white-space: nowrap; /* Zapobiega zawijaniu tekstu */
	width: 22px;
	font-family: Inter;
}


.notBox_nl{
	display: flex !important;
	padding:4px 4px 0px 4px;
	display: inline-flex;
    flex-wrap: wrap;
	width:auto !important;
}

.notBox_nl_ticker{
	display: flex;
	background:  var(--Neutral200);
	border-radius: 4px;
	color:  var(--Neutral800);
	margin-right:8px;
	padding:4px;
	margin-bottom: 4px;
	align-items: center; /* Wyśrodkowanie w pionie */
	justify-content: space-between; /* Rozmieszczenie elementów na całej szerokości */
}

.notBox_nl_ticker > div {
  display: flex;
  align-items: center; /* Wyśrodkowanie zawartości w pionie w wewnętrznych divach */
}

.notBox_nl_title{
	display: flex;
}

.notBox_nl_nazwa{
	padding: 4px;
}

.notBox_nl_wartosc{
	padding: 4px;
}

.notBox_nl_arrow{
	padding: 4px;
}

.notBox_nl_zmiana{
	padding: 4px;
}



.notBox_nl_wykres{
	cursor:pointer;
}


.circle-outer {
  width: 20px;
  height: 20px;
  background-color: var(--Green400);
  border-radius: 50%; /* Tworzy okrąg */
  position: relative; /* Kontekst dla elementu wewnętrznego */
  display: flex;
  align-items: center; /* Wyśrodkowanie wewnętrznego elementu w pionie */
  justify-content: center; /* Wyśrodkowanie wewnętrznego elementu w poziomie */
}

.circle-inner {
  width: 20px;
  height: 20px;
  background-color: var(--Red400);
  border-radius: 50%; /* Tworzy okrąg */
  
}

.hist_oper_table {
  margin-top: 5px;
  font-size:10px;max-height: 300px;overflow-y: auto;
}

.hist_oper_header {
  border-bottom:black 1px solid;font-weight:bold;text-align:center;
}

.hist_oper_tr {
  border-bottom:black 1px solid;
}



.hist_oper_td {
  padding: 3px 10px 3px 10px ;
  border-right:black 1px solid;
  text-align:center;
}

.hist_oper_td_c {
  padding: 3px 10px 3px 10px ;
  border-right:black 1px solid;
  text-align:center;
}

.hist_oper_td_l {
  padding: 3px 10px 3px 10px ;
  border-right:black 1px solid;
  text-align:left;
}



.hist_oper_td_r {
  padding: 3px 10px 3px 10px ;
  border-right:black 1px solid;
  text-align:right;
}


.kokpit_header {
	font-family: Inter;
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0%;
	vertical-align: middle;
	padding: 16px 8px 16px 8px;
	text-align: left;
}

.kokpit_kokpitContent {
	
}

.kokpit_summary_row {
	padding: 0px 8px 16px 8px;
	display: flex;
}

.kokpit_summary_card {
	width: 284px;
	height: 46px;
	gap: 8px;
	border-radius: 8px;
	border-width: 1px;
	padding: 6px;
	border: 1px solid var(--Neutral700);
	margin: 0px 8px 0px 8px;

}

.kokpit_summary_card_label {
	color: var(--Neutral900);
	font-family: Inter;
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0%;
	vertical-align: middle;
	text-align:left;
	padding: 0px 0px 2px 0px;
}

.kokpit_summary_card_val_neutral {
	color: var(--Neutral900);
	font-family: Inter;
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0%;
	vertical-align: middle;
	padding-left: 8px;
	text-align:left;
}

.kokpit_summary_card_val_green {
	color: var(--Green400);
	font-family: Inter;
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0%;
	vertical-align: middle;
	padding-left: 8px;
	text-align:left;
}

.kokpit_summary_card_val_red {
	color: var(--Red400);
	font-family: Inter;
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0%;
	vertical-align: middle;
	padding-left: 8px;
	text-align:left;
}


.kokpit_portfolios {
	padding: 0px 0px 16px 8px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.kokpit_portfolio_card {
	width: 268px;
	height: auto;
	gap: 8px;
	border-radius: 8px;
	border-width: 1px;
	padding: 8px;
	border: 1px solid var(--Neutral700);
	margin: 4px 8px 10px 6px;

}

.kokpit_portfolio_card_sum {
	position: absolute;
    top: -10px;
    left: 126px;
    background-color: var(--Neutral0);
    border: 1px solid var(--Neutral700);
    padding: 4px;
    border-radius: 4px;
}

.kokpit_portfolio_card_name {
	color: var(--Neutral900);
	font-family: Inter;
	font-weight: 600;
    font-size: 20px;
    line-height: 24px;
	letter-spacing: 0%;
	vertical-align: middle;
	text-align:left;
	padding: 0px 0px 2px 0px;
}

.kokpit_portfolio_card_wartosc {
	color: var(--Neutral900);
	font-family: Inter;
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0%;
	vertical-align: middle;
	padding-left: 4px;
	margin-top: 4px;
	text-align:left;
}

.kokpit_portfolio_card_zysk_div{
	padding-left: 4px;
    margin-top: 8px;
    display: flex;
    margin-bottom: 16px;
}

.kokpit_portfolio_card_stopa_neutral{
	width: 76px;
	gap: 8px;
	border-radius: 4px;
	padding-top: 4px;
	padding-right: 14px;
	padding-bottom: 4px;
	padding-left: 2px;
	background: var(--Neutral700);
	font-family: Inter;
	font-weight: 500;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0%;
	vertical-align: middle;
	color: var(--Neutral0);
	text-align:center;

}
.kokpit_portfolio_card_stopa_red{
	width: 76px;
	gap: 8px;
	border-radius: 4px;
	padding-top: 4px;
	padding-right: 14px;
	padding-bottom: 4px;
	padding-left: 2px;
	background: var(--Red400);
	font-family: Inter;
	font-weight: 500;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0%;
	vertical-align: middle;
	color: var(--Neutral0);
	text-align:center;

}
.kokpit_portfolio_card_stopa_green{
	width: 76px;
	gap: 8px;
	border-radius: 4px;
	padding-top: 4px;
	padding-right: 14px;
	padding-bottom: 4px;
	padding-left: 2px;
	background: var(--Green400);
	font-family: Inter;
	font-weight: 500;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0%;
	vertical-align: middle;
	color: var(--Neutral0);
	text-align:center;

}

.kokpit_summary_card_zysk_neutral {
	color: var(--Neutral900);
	text-align:left;
	font-family: Inter;
	font-weight: 500;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0%;
	vertical-align: middle;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 8px;
}


.kokpit_summary_card_zysk_red {
	color: var(--Red400);
	text-align:left;
	font-family: Inter;
	font-weight: 500;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0%;
	vertical-align: middle;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 8px;
}


.kokpit_summary_card_zysk_green {
	color: var(--Green400);
	font-family: Inter;
	text-align:left;
	font-weight: 500;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0%;
	vertical-align: middle;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 8px;
}



.kokpit_summary_card_label{
	color: var(--Neutral900);
	font-family: Inter;
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0%;
	vertical-align: left;
	text-align:center;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 8px;
	text-align: left;
}

.kokpit_portfolio_card_wartosc_div{
	margin-top: 8px;
	display: flex;
	justify-content: space-between;
}

.kokpit_portfolio_card_wartosc_neutral {
	color: var(--Neutral0);
	background: var(--Neutral700);
	border-radius: 4px;
	text-align:right;
	font-family: Inter;
	font-weight: 500;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0%;
	vertical-align: middle;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 4px;
	width: 76px;
}


.kokpit_portfolio_card_wartosc_red {
	color: var(--Neutral0);
	background: var(--Red400);
	border-radius: 4px;
	text-align:right;
	font-family: Inter;
	font-weight: 500;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0%;
	vertical-align: middle;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 4px;
	width: 76px;
}


.kokpit_portfolio_card_wartosc_green {
	color: var(--Neutral0);
	background: var(--Green400);
	border-radius: 4px;
	font-family: Inter;
	text-align:right;
	font-weight: 500;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0%;
	vertical-align: middle;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 4px;
	width: 76px;
}

.kokpit_portfolio_details{
	 position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); /* półprzeźroczyste tło */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150; /* upewnij się, że jest nad resztą strony */
}

.kokpit_portfolio_details_body{
	width: 604px;
	height: 636px;
	gap: 24px;
	border-radius: 8px;
	border-width: 1px;
	padding: 24px;
	background-color: var(--Neutral0);
	position: relative;

}

.kokpit_portfolio_details_nazwa{
	font-family: Inter;
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0%;
	vertical-align: middle;
	color: var(--Neutral900);
}

.kokpit_portfolio_details_group{
	font-family: Inter;
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0%;
	vertical-align: middle;
	color: var(--Neutral900);
}

.kokpit_portfolio_details_label{
	font-family: Inter;
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0%;
	vertical-align: middle;
	color: var(--Neutral900);
}

.kokpit_portfolio_details_wartosc_div{
	margin-top: 8px;
	display: flex;
	justify-content: space-between;
	width:600px;
}

.kokpit_summary_nazwa_label {
	color: var(--Neutral900);
	font-family: Inter;
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0%;
	vertical-align: middle;
	text-align:left;
	padding: 0px 0px 2px 0px;
    width: 460px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}