How to change the width of the left sidebar?

RemNote Learning RemNote
#1

There are several nice themes, but I cannot figure out how to make the left sidebar wider, so I can read of the title of the pages in the list of documents.

I tried playing with margin, width, and padding for this, but wasn’t successful.

#main #content,
#main #content #document-sidebar 
 {width: 40em !important;  }

Thanks for any suggestions.

#2

Here is what I’m using. Check the /*********** Document-Sidebar ***********/ Section

/*********** Top Logo and User ***********/
.document-sidebar_top { 
}

.document-sidebar_top__logo-and-user {
}

#document-sidebar_top #logo {
    display: none;
}

#document-sidebar__collapse-icon__container {
	filter: invert(1);
}

/*********** Sidebar Queue Text ***********/
#document-sidebar__link   {
 	padding: 		8px 10px 8px 15px;
 	margin: 		2.5px 2.5;
 	font-weight:	600;
	color:			yellow;				
 	font-size: 		20px;
}

#document-sidebar__hiden-link__container:hover {
    background-color: #44475a;
}

#document-sidebar__hiden-link__container {
     background-color: #6272a4;
}

/*********** Sidebar Queue Streak Indicator ***********/
#document-sidebar__link__queue-indicator .queue__streak-indicator  i {
	-webkit-filter: invert(1);
	filter: invert(1);
	color: #2fd9d9;
}

#document-sidebar__link__queue-indicator {
	background: #FF2600;
}

/*********** Document-Sidebar Edit later icon ***********/
#document-sidebar__link > span > i {
	-webkit-filter: invert(1);
	filter: invert(1);
}

/*********** Sidebar Documents Text ***********/
#main #content #document-sidebar a {
	color: #40E0D1;
	font-size: 125%;
	-webkit-filter: invert(1);
	filter: invert(1);
}

#main #content #document-sidebar a:hover {
	color: #FF2600 !important;
}

/*********** Sidebar Documents icon ***********/
#document-sidebar__document-buttons__document-link-container > span > i {
   -webkit-filter: invert(0);
   filter: invert(0);
}

/*********** Sidebar Queue icon, Search/Plus Symbol icons ***********/
#document-sidebar__link img, 
.document-sidebar__document-buttons__button img {
	-webkit-filter: invert(1);
	filter: invert(1);
}

/*********** Document-Sidebar ***********/
#homepage #content #document-sidebar, 
#main #content #document-sidebar {
 	border-width: thin;
 	color: #C7C7C7;
 	overflow: hidden;
 	background-color: #2B3137;
 	min-width: 260px;
 	margin-right: 7px;
 	display: flex;
 	height: auto;
 	flex-direction: column;
}

/*********** Document-list Header ***********/
.title.document-list-header {
	font-size: 16px;
	font-family: Sans-Serif Workhorse;
	padding-top: 0px !important;
	color: #2B3137;
	background-color: white;
}

#document-sidebar .dropdown.icon::before, 
#document-sidebar .caret.right.icon::before {
	zoom: 125%;
}

/*********** Document-list-item__folder-icon ***********/
#document-sidebar .document-list-item__folder-icon.document-list-item__folder-icon {
	filter: invert(1);
}

/*********** Power-up Symbols ***********/
#document-sidebar .rem-is-custom-rem-type {
	filter: invert(1);
}

/*********** Document-list-item ***********/
.document-list-item__container {
}

.document-list-item {
	font-size: 14px;
	font-weight: 500;
	line-height: 180%;
}

.document-list-item .rem-text {
}

#document-sidebar .quote {
	font-weight: 700;
	padding: ;
	border-radius: 5px;
	margin-left: 6px !important;
	zoom: 115%;
}

.document-list-item .highlight-color--red, 
.document-list-item .highlight-color--orange, 
.document-list-item .highlight-color--yellow, 
.document-list-item .highlight-color--green, 
.document-list-item .highlight-color--blue, 
.document-list-item .highlight-color--purple {
	padding-left: 3px;
	padding-right: 3px;
	margin-left: 3px;
}

/*********** Document-list-item Opened ***********/
#document-sidebar #DocumentationList .document-list-item--opened,
#document-sidebar #documentList .document-list-item--opened {
     font-weight: 700;
     background-color: #FFE000;		
     border-width: 15px;
     border-left-color: #FF2600;
     color: red;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
}

/*********** Document-list-item Hover ***********/
#document-sidebar #DocumentationList.documentListHeader:hover,
#document-sidebar #DocumentationList .document-list-item:hover,
#document-sidebar #documentList .documentListHeader:hover,
#document-sidebar #documentList .document-list-item:hover,
#document-sidebar #DocumentationList .documentListHeader:hover,
#document-sidebar #DocumentationList .document-list-item:hover,
#document-sidebar #documentList .documentListHeader:hover,
#document-sidebar #documentList .document-list-item:hover {
	color: #C1C2C2;
    background-color: #374354;
}

/*********** Document-Sidebar__Bottom-Buttons ***********/
.document-sidebar__buttons {
}

/* Darkmode - Sidebar Bottom buttons icons */
#document-sidebar__bottom-buttons .document-sidebar__bottom-buttons__button {
	-webkit-filter: invert(1);
	filter: invert(1);
}

/*********** Document-Sidebar Right Click Menu ***********/
.right-click-menu {
	background-color:#282a36;
	color: white;
}

.document-link__right-click-menu .icon {
	color: yellow;
}

.document-link__right-click-menu .item:hover {
    background-color: #7C82A4;
}

.document-sidebar-item__right-click-menu{
 	color: black;
 	background-color: #FF2600;
}
#3

Thanks Browneyedsoul! That did the trick, esp:

/*********** Document-Sidebar ***********/
#homepage #content #document-sidebar, 
#main #content #document-sidebar {
 	min-width: 260px;
}

I like several of your other edits. The no-logo gets me that much more screen real estate. Thanks again!