/* Content */

#content {

margin-top: 20px;
margin-left: 75px;
margin-right: 15px;
margin-bottom: 25px;
float: left;
min-width: 90%;
}


/* SIDE LEFT (Navigatie) */

#side_left {
	
position: fixed;
z-index: 999;
left: 0;
top: 55px;
padding-top: 20px;
width: 45px;
height: 100vh;
transition: width 0.3s ease;
overflow: hidden;

background-color: #1c1c1c !important;
}

#side_left:hover {

width: 200px;	
}

#side_left #nav {

margin: 5px;
margin-top: 10px;
padding-right: 10px;
padding-left: 0px;
}

#side_left #nav a {

clear: both;
width: 170px;
display: block;
margin: 5px ;
color: #FFF;
min-height: 35px;
line-height: 35px;
text-decoration: none;
text-transform: uppercase;
opacity: 0.2;
}

#side_left #nav a img {
	
filter: invert(1) brightness(2);
}

#side_left #nav a img.icon-moneybird {
filter: brightness(0) invert(1) brightness(2);
}

#side_left #nav a.active {
margin-left: -5px;
padding-left: 10px;
width: 180px;
opacity: 1.0;
}

#side_left #nav a.active img {
	
filter: invert(1) brightness(2);
}

#side_left #nav a:hover {

opacity: 1.0;	
}

#side_left img {

float: left;
margin-top: 5px;
width: 25px;
height: 25px;
margin-right: 15px;
filter: invert(1) brightness(2);| /* Zwarte icon inverten zodat die wit wordt */
}

/* SIDE RIGHT (Todos) */

#side_right {
	
position: fixed;
right: -450px;    /* verscholen */
top: 55px;
width: 450px;
height: calc(100vh - 45px);
transition: right 0.3s ease;
overflow-y: auto;
scrollbar-width: none;  /* Firefox */
-ms-overflow-style: none;  /* IE and Edge */
z-index: 200;
padding-top: 10px;
background-color:#252525;
}

#sideRightBackdrop {
position: fixed;
left: 0;
right: 0;
top: 55px;
bottom: 0;
background: rgba(0, 0, 0, 0.55);
display: none;
z-index: 150;
}

#side_right.open + #sideRightBackdrop {
display: block;
}

.side-right-header {
padding: 10px 15px 10px 15px;
display: flex;
gap: 15px;
align-items: center;
background-color: #00000025;
margin-left: -10px;
}

#side_right::-webkit-scrollbar {
  display: none;
}

#side_right.open {
	
right: 0;         /* zichtbaar */
}

#side_right .sr-tab {
font-size: 13px;
color: #7F7F7F;
text-decoration: none;
text-transform: uppercase;
}

#side_right .sr-tab.active {
color: #F7F7F7;
}

.item.voldaan {
opacity: 0.5;
}

.item.voldaan .sr-note-subject .sr-main {
text-decoration: line-through;
}

#side_right .sr-main {
color: #c4c4c4;
max-width: 40ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

#side_right .sr-sub {
font-size: 12px;
color: #999;
margin-top: 2px;
}

#side_right .sr-list .item {
display:flex;
gap:8px;
padding:15px 20px;
border-bottom:1px solid #33333350;
align-items:center;

transition: background-color 0.1s ease-out;
}

#side_right .sr-list .item {

font-size: 14px;
}

#side_right .sr-list .item:hover {

background-color: #ff572260;
}