/*Offset for the fixed navbar and color*/
body {
	background-color: #FFF;
}

/*SCROLLBAR*/
::-webkit-scrollbar {
	width: 5px;
}
::-webkit-scrollbar-track {
	background: #d8d8d8; 
}
::-webkit-scrollbar-thumb {
	background: #737373; 
}
::-webkit-scrollbar-thumb:hover {
	background: #555; 
}
/*END SCROLLBAR*/

/*MAIN TEXT*/
.main-subtext {
	color: #5C5C5C;
	font-size: 14px
}

.main-error-text {
	color: #DF0024;
}
/*END MAIN TEXT*/

/*FONT AWESOME ICON STACK*/
.icon-stack {
	position: relative;
	display: inline-block;
	width: 2em;
	height: 2em;
	line-height: 2em;
	vertical-align: middle;
}
.icon-stack-1x,
.icon-stack-2x,
.icon-stack-3x {
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
}
.icon-stack-1x {
	line-height: 2em;
}
.icon-stack-2x {
	font-size: 2em;
}
.icon-stack-3x {
	font-size: 2em;
}
/*FONT AWESOME ICON STACK*/

/*FOLDER STRUCTURE*/
#folderManagementContainer {
	height: calc(100vh - 81px);
}

#folderManagementContainer .fa-folder, #folderManagementContainer .fa-folder-plus, 
#folderManagementContainer .fa-folder-minus {
	color: #F6DF8F;
}

#folderManagementContainer .fa-file {
	color: black;
}

#folderManagementContainer .fa-upload {
	color: #4DC8E9;

}

#folderTreeContainer {
	background-color: #F5F5F5;
	height: 100%;
}

.folder-collapse-button {
	top: 0px;
	position: relative;
	left: 16px;
	margin-left: -32px;
	z-index: 999;
	float: right;
	color: #5C5C5C;
	transition: all 0.3s;
}

.folder-collapse-button .fa.fa-circle {
	color: #E0E0E0;
}

.folder-collapse-button:hover {
	filter: drop-shadow(0px 0px 3px #5C5C5C);
	cursor: ew-resize;
}

#folderTree {
	height: 100%;
	overflow-y: auto;
}

#folderTree > ul {
	padding-left: 0px !important;
}

#folderTree ul {
	padding-left: 24px;
}

#folderTree li {
	text-overflow: ellipsis;
	overflow: hidden;	
	white-space: nowrap;
}

#folderTree div:hover {
	background-color: #dcedc8;
}

#folderTree div.active {
	background-color: #aed581 !important;
}

#folderTree div {
	padding-left: calc(5px + 20px * var(--depth));
	cursor: default;
}

#folderTree div span {
		pointer-events: none;
}

#folderTree ul {
		padding: 0;
		list-style-type: none;
}

#folderTree .fa-caret-right:hover, #folderTree .fa-caret-down:hover {
	cursor: pointer;
}

#folderTableInfo {
	height: 100%;
}

#folderPath {
	background-color: #FFF;
	height: 5%;
}

#folderPath a, #folderPath .fa-angle-right {
	cursor: pointer;
	color: #666 !important;
}

#folderTable .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
	 background-color: #FAFAFA;
}
/*END FOLDER STRUCTURE*/

/*NAVBAR*/
.navbar {
	background-color: #E0E0E0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
}

.scrolled-down {
	transform: translateY(-100%);
	transition: all 0.3s ease-in-out;
}
.scrolled-up {
	transform: translateY(0);
	transition: all 0.3s ease-in-out;
}

/*Small device menu*/
#navbarMenu {
	overflow-y: scroll;
	max-height: 50vh;
}
/*Border between buttons on menu*/
.navbar-collapse > .navbar-nav > .nav-item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.125); 
}
/*Remove default submenu icon*/
.navbar-collapse > .navbar-nav > .dropdown > .dropdown-toggle::after {
	display: none; 
}
/*Closed submenu icon*/
.navbar-collapse > .navbar-nav > .dropdown > .dropdown-toggle[aria-expanded="false"] > .submenu-icon::after {
	content: " \f0d7"; 
	font-family: FontAwesome;
	display: inline;
	text-align: right;
	padding-left: 10px;
	margin-right: 10px;
}
/*Opened submenu icon*/
.navbar-collapse > .navbar-nav > .dropdown > .dropdown-toggle[aria-expanded="true"] > .submenu-icon::after {
	content: " \f0da";
	font-family: FontAwesome;
	display: inline;
	text-align: right;
	padding-left: 10px;
	margin-right: 10px;
}
/*end small device menu*/

/*The div holding the logo*/
.navbar-brand {
	height: 45px;
}
/*The image of the logo*/
.navbar-brand > .img-fluid {
	max-height: 100%; 
	max-width: 250px;
}
/*END NAVBAR*/

/*WRAPPER sidebar and content*/
.wrapper {
	display: flex;
	align-items: stretch;
	flex-direction: column;
	margin-top: 53px;
}
/*END WRAPPER*/

/*SIDEBAR*/
#sidebar-container {
	position: fixed;
	width: 250px;
	height: 100vh;
	top: 0;
	overflow-y: auto; 
	background-color: #E0E0E0;
	transition: all 0.3s;
}

#sidebar-container.active {
	width: 20px;
}

#sidebar-container.active ul {
	display: none;
}

/*Sidebar item*/
#sidebar-container .list-group a {
	background-color: #E0E0E0;
	color: #5C5C5C;
}
/*Sidbar Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
	background-color: #F8F8F8;
	color: #5C5C5C;
	font-size: 0.9rem;
	padding-left: 30px;
}
/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
	content: " \f0da";
	font-family: FontAwesome;
	display: inline;
	text-align: right;
	padding-left: 10px;
}
/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
	content: " \f0d7";
	font-family: FontAwesome;
	display: inline;
	text-align: right;
	padding-left: 10px;
}
/*END SIDEBAR*/

/*ADMIN SIDEBAR*/
#sidebar-admin-container {
	position: fixed;
	width: 400px;
	height: calc(100vh - 53px);
	top: 53px;
	overflow-y: auto; 
	background-color: #E0E0E0;
}

/*Sidebar item*/
#sidebar-admin-container .list-group a {
	background-color: #E0E0E0;
	color: #5C5C5C;
}
/*Sidbar Submenu item*/
#sidebar-admin-container .list-group .sidebar-submenu a {
	background-color: #F8F8F8;
	color: #5C5C5C;
	font-size: 0.9rem;
	padding-left: 30px;
}
/* Closed submenu icon */
#sidebar-admin-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
	content: " \f0da";
	font-family: FontAwesome;
	display: inline;
	text-align: right;
	padding-left: 10px;
}
/* Opened submenu icon */
#sidebar-admin-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
	content: " \f0d7";
	font-family: FontAwesome;
	display: inline;
	text-align: right;
	padding-left: 10px;
}
/*END ADMIN SIDEBAR*/

/*SIDEBAR COLLAPSE BUTTON*/
.sidebarCollapseButton {
	top: 62px;
	position: fixed;
	left: 230px;
	z-index: 999;
	float: right;
	color: #5C5C5C;
	transition: all 0.3s;
}

.sidebarCollapseButton.active {
	left: 0px;
}

.sidebarCollapseButton:hover {
	filter: drop-shadow(0px 0px 3px #5C5C5C);
	cursor: pointer;
}

.sidebarCollapseButton .icon-background {
	color: #E0E0E0;
	z-index: -1
}
/*END SIDEBAR COLLAPSE BUTTON*/

/*CONTENT*/
#content {
	width: calc(100% - 250px);
	transition: all 0.3s;	
	position: absolute;
	left: 250px;
}

#content.active {
	width: calc(100% - 30px);
	left: 20px;
}

#infoPanel {
	width: calc(100% - 400px);
	position: absolute;
	left: 400px;
	padding-top: 53px;
}

@media (max-width: 992px) {
	#content {
		width: 100% !important;
		left: 0px !important;
	}
}
/*END CONTENT*/

/*INPUT*/
.main-checkbox-lg {
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
}

input[disabled] {
	background-color: #E0E0E0 !important;
	border-color: #A9A9A9 !important;
}
.main-form-control:focus {
	border-color: #A9A9A9;
	box-shadow: rgba(112, 112, 112, 0.3) 0px 0px 0px 3.2px;
}
/*END INPUT*/

/*TABLE*/
table.last-row-bold tr:last-child {
	font-weight: bold;  
}

.table > tbody > tr > td	{
	 vertical-align: middle;
}

.table td.td-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 0;
}

 /*Show a cursor when over row which can be expanded*/
.main-expandRow {
	cursor: pointer; 
}

/*Borders for a bordered table*/
table.table-bordered{
	border:1px solid #B8B8B8;
}
table.table-bordered > tbody {
	border:1px solid #B8B8B8;
}
table.table-bordered > thead > tr > th{
	border:1px solid #B8B8B8;
}
table.table-bordered > tbody > tr > td{
	border:1px solid #B8B8B8;
}

/*Color for even expandable rows*/
table > tbody > tr.main-row-even > td, 
table > tbody > tr.main-row-even > th {
	 background-color: #E0E0E0;
 }
 /*Color for odd expandable rows*/
table > tbody > tr.main-row-odd > td, 
table > tbody > tr.main-row-odd > th {
	 background-color: #E8E8E8;
 }
 /*Color and size for hidden rows*/
.hiddenRow {
	padding: 0 4px !important; /*makes the hidden rows shorter*/
	cursor: default;
	background-color: #F8F8F8
}

/*Colors for hovering over the 3 different kind of rows*/
.table-hover > tbody > tr.main-row-even:hover > td, .table-hover > tbody > tr.main-row-even:hover > th {
	background-color: #c9c9c9;
}
.table-hover > tbody > tr.main-row-odd:hover > td, .table-hover > tbody > tr.main-row-odd:hover > th {
	background-color: #d0d0d0;
}
.table-hover > tbody > tr:hover > td.hiddenRow, .table-hover > tbody > tr:hover > th {
	background-color: #dfdfdf;
}

/*Color for the minus and plus character in the expandable table*/
.main-table-expand .fa-plus, .fa-minus {
	color: #808080;
}

.table-fixed-head thead th { 
	position: -webkit-sticky;
	position: sticky;
	background-color: inherit;
	top: 0px;
	border-top: 0px !important;
}

.upravljanje-table-sticky {
	border-collapse: separate; 
	border-spacing: 0;
}

.upravljanje-table-sticky > thead > tr > th {
	position: sticky; 
	top: 0; 
	z-index: 999; 
	background-color: white;
	border-top: 1px solid #B8B8B8;
	border-bottom: 1px solid #B8B8B8;
	border-right: 1px solid #B8B8B8;
}

.upravljanje-table-sticky td {
  border-bottom: 1px solid #B8B8B8;
  border-right: 1px solid #B8B8B8;
}

.upravljanje-table-sticky th:first-child,
.upravljanje-table-sticky td:first-child {
  border-left: 1px solid #B8B8B8;
}

.upravljanje-table-sticky > tbody > tr.main-row-even:hover > td, .upravljanje-table-sticky > tbody > tr.main-row-even:hover > th {
  background-color: #c9c9c9;
}
.upravljanje-table-sticky > tbody > tr.main-row-odd:hover > td, .upravljanje-table-sticky > tbody > tr.main-row-odd:hover > th {
  background-color: #d0d0d0;
}
.upravljanje-table-sticky > tbody > tr:hover > td.hiddenRow, .upravljanje-table-sticky > tbody > tr:hover > th {
  background-color: #dfdfdf;
}

/*END TABLE*/

/*BUTTONS*/
.main-btn-outline {
	border-color: #A9A9A9;
	background-color: transparent;
}
.main-btn-outline:hover {
	color: #FFF;
	background-color: #A9A9A9;
}
.main-btn-outline:focus {
	box-shadow: rgba(112, 112, 112, 0.3) 0px 0px 0px 3.2px;
}

.main-btn-dark {
	color: #FFF;
	background-color: #A9A9A9;
}
.main-btn-dark:hover {
	color: #FFF;
	background-color: #7e7e7e;
}
.main-btn-dark:focus {
	box-shadow: rgba(112, 112, 112, 0.3) 0px 0px 0px 3.2px;
}

.main-btn-special {
	background-color: #115b74;
	color: #FFF;
}
.main-btn-special:hover {
	background-color: #0d485c;
	color: #FFF;
}
.main-btn-special:focus {
	box-shadow: rgba(7, 36, 45, 0.3) 0px 0px 0px 3.2px;
}

.main-action-icon {
	color: #5C5C5C; 
	font-size: 24px;
}

.main-file-icon {
	color: #5C5C5C; 
	font-size: 30px;	
}

/*END BUTTONS*/

/*RADIO BUTTONS*/
.main-radio-btn-outline {
	border-color: #A9A9A9;
}
.main-radio-btn-outline:hover {
	color: #FFF;
	background-color: #A9A9A9;
}
.main-radio-btn-outline.active {
	color: #FFF;
	background-color: #A9A9A9;
}
.main-radio-btn-outline.focus {
	box-shadow: rgba(169, 169, 169, 0.5) 0px 0px 0px 3.2px;
}
/*END RADIO BUTTONS*/

/*SELECT DROPDOWN*/
.bootstrap-select .dropdown-menu {
	padding-top: 0px;
	padding-bottom: 0px;
	z-index: 9999;
}
.bootstrap-select .dropdown-menu > li > a:hover {
	color: #FFF;
	background-color: #A9A9A9;	
}
.bootstrap-select .dropdown-menu > li > a:focus {
	color: #FFF;
	background-color: #A9A9A9;
	outline-width: 0px;
}
.bootstrap-select .dropdown-menu > li > a.selected {
	color: #FFF;
	background-color: #A9A9A9;
}

.bootstrap-select > .dropdown-toggle {
	border-color: #A9A9A9;
	background-color: transparent !important;	
	outline-width: 0px !important;
}
.bootstrap-select .dropdown-toggle:focus,.bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
	outline-width: 0px !important;	
}
.bootstrap-select > .dropdown-toggle:hover {
	border-color: #A9A9A9;
	box-shadow: rgba(169, 169, 169, 0.5) 0px 0px 0px 3.2px;
}
/*END SELECT DROPDOWN*/

/*TEMPUS DOMINUS*/
.day.active, .month.active, .year.active, .decade.active {
	color: #FFF !important;
	background-color: #A9A9A9 !important;
}
.day:hover, .month:hover, .year:hover, .decade:hover {
	color: #FFF !important;
	background-color: #A9A9A9 !important;
}
.day.today::before {
	border-bottom-color: #A9A9A9 !important;
}
.day.active.today::before, .day.today:hover:before {
	border-bottom-color: #FFF !important;
}

.bootstrap-datetimepicker-widget {
	z-index: 9999;
}

.datepicker .picker-switch:hover, .datepicker .prev:hover, .datepicker .next:hover {
	background-color: #E8E8E8 !important;
}
/*END TEMPUS DOMINUS*/

/*REGULAR DROPDOWN*/
.dropdown.main-dropdown > .dropdown-menu > .dropdown-item:hover {
	color: #FFF;
	background-color: #A9A9A9;
}

.dropdown.main-dropdown > .dropdown-menu > .dropdown-item:focus {
	color: #FFF;
	background-color: #A9A9A9;
	outline-width: 0px;
	box-shadow: rgba(169, 169, 169, 0.5) 0px 0px 0px 3.2px;
}

/*END REGULAR DROPDOWN*/

/*COLORS*/
.main-bg-neutral-dark {
	background-color: #A9A9A9 !important;
	color: white !important;
}

.main-bg-neutral {
	background-color: #E8E8E8 !important;
	color: white !important;
}

.main-profit {
	background-color: #115b74 !important;
	color: #D9D9D9 !important;
}

.main-loss {
	background-color: #951f4e !important;
	color: #D9D9D9 !important;
}

.main-neutral {
	background-color: #e49602 !important;
	color: #D9D9D9 !important;
}

.main-a-tag {
	color: black;
}
/*END COLORS*/

/*MISC*/
/*Remove the underline of the a element*/
.main-no-underline a {
	text-decoration: none;
}

/*For images which need to have a transparent background*/
.main-transparent {
	background: none;
}

/*The color of the exclamation mark*/
.fa-exclamation {
	color: white;
	font-size: 12px;
}

/*Mark something as clickable and show cursor*/
.main-clickable {
	cursor: pointer;
	color: gray;
}

.main-clickable:hover {
	filter: brightness(75%);
}

/*Draws a shadow around object when hovered over*/
.main-hover-shadow:hover {
	border-color: #A9A9A9;
	box-shadow: rgba(169, 169, 169, 0.5) 0px 0px 0px 3.2px;
}

/*Draws a shadow around object when focused*/
.main-focus-shadow:focus {
	border-color: #A9A9A9;
	box-shadow: rgba(169, 169, 169, 0.5) 0px 0px 0px 3.2px;
}

/*Dropdows will be the same width as the content*/
.dropdown-menu {
	min-width: 1rem;
}

.main-bg-depth-0 {
	background-color: #3897c0;
	font-weight: bold;
}

.main-bg-depth-1 {
	background-color: #91BBD1;
}

.main-bg-depth-2 {
	background-color: #DCE9EF;
}

.main-bg-depth-3 {
	background-color: #FAFBFD;
}

.number-circle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}

/*END MISC*/