conex.css

body, ul {
  color: black;
  margin: 0;
  padding: 0;
  font-family: Sans-Serif;
  background-color: white;
  overflow-x: hidden
}

#container-selector, #container-selector #main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#bookmarks li.tab span.icon, 
  #bookmarks span.toolbar, 
  #bookmarks span.tabs-count, 
  #container-selector span.icon, 
  #container-selector span.toolbar, 
  #container-selector span.tabs-count, 
  #history li.tab span.icon, 
  #history span.toolbar, 
  #history span.tabs-count, 
  .private span.toolbar {
  display: none !important;
}

#bookmarks .tab h2, #bookmarks .tab ul li, #history .tab h2, #history .tab ul li {
  width: 400px;
  margin: 0 0 0 3em;
  height: 2.5em;
}

#bookmarks .tab h2, #history .tab h2 {
  margin: 1em 0 0 0;
}

li.section .audible-true, #browseraction span.bookmark-marker, span.close-button {
  float: right;
  display: inherit;
}

.audible-undefined, .audible-false, li.tab:hover .audible-true {
  display: none;
}

span.close-button {
  padding: 3px;
  font-size: large;
  border-radius: 5%;
  display: none;
}

span.bookmark-marker {
  opacity: 0;
}

li.is-bookmark span.bookmark-marker {
  opacity: 1;
}

li.tab:hover span.close-button, li.tab:focus span.close-button {
  background-color: rgb(208, 208, 208);
  display: inherit;
  opacity: 0.7;
}

ul li {
  border-left: solid 5px rgb(235, 235, 236);
}

select.blue, select option.blue {
  color: rgb(55, 173, 255);
}

ul.blue li {
  border-left: solid 5px rgb(55, 173, 255);
}

select.turquoise, select option.turquoise {
  color: rgb(0, 199, 154);
}

ul.turquoise li {
  border-left: solid 5px rgb(0, 199, 154);
}

select.green, select option.green {
  color: rgb(81, 205, 0);
}

ul.green li {
  border-left: solid 5px rgb(81, 205, 0);
}

select.yellow, select option.yellow {
  color: rgb(255, 203, 0);
}

ul.yellow li {
  border-left: solid 5px rgb(255, 203, 0);
}

select.orange, select option.orange {
  color: rgb(255, 159, 0);
}

ul.orange li {
  border-left: solid 5px rgb(255, 159, 0);
}

.new-container #new-container {
  display: flex;
}

#new-container {
  margin-top: 10px;
  width: 495px;
  display: none;
  justify-content: space-around;
  align-items: baseline;
}

#new-container-name, select, #add-container-button {
  font-size: x-large;
}

select {
  text-align: center;
  height: 2em;
}

input[type=submit] {
  height: 3em;
  align-self: center;
  display:flex;
}

select.red, select option.red {
  color: rgb(255, 97, 61);
}

ul.red li {
  border-left: solid 5px rgb(255, 97, 61);
}

select.pink, select option.pink {
  color: rgb(255, 75, 218);
}

ul.pink li {
  border-left: solid 5px rgb(255, 75, 218);
}

select.purple, select option.purple {
  color: rgb(175, 81, 245);
}

ul.purple li {
  border-left: solid 5px rgb(175, 81, 245);
}

ul.default li {
  border-left: solid 5px rgb(0, 0, 0);
}

ul.private li {
  border-left: solid 5px rgb(141, 32, 174);
}

ul li.tab {
  border-left-width: 1px;
}

.icon-history {
  min-width: 1em;
  min-height: 1em;
  margin: 0 0 0 1em;
  display: inline-block;
  background-image: url('icons/clock.svg');
  float: left;
}

.arrow-right, .arrow-down {
  width: 0;
  height: 0;
  display: inline-block;
  margin-right: 0.5em;
  margin: 0.5em;
}

.arrow-right {
  border-bottom: 0.5em solid transparent;
  border-left: 0.5em solid black;
  border-top: 0.5em solid transparent;
}

.arrow-down {
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  border-top: 0.5em solid black;
}

body.new-container #search-form {
  display: none;
}

#search-form {
  width: 490px;
  margin: 10px 0px 0px 10px;
  background-color: rgb(252, 252, 252);
  padding-top: 10px;
  display: flex;
  justify-content: space-around;
}

#search-form #search {
  font-size: large;
  font-weight: lighter;
  width: 433px;
  border: 1px solid rgb(252, 252, 252);
}

#search-form a {
  width: 2em;
  font-size: x-large;
  color: #000;
  text-decoration: none;
  display: flex;
  justify-content: center;
}

#search-form a:hover {
  background-color: rgb(220, 220, 222);
}

li {
  font-size: smaller;
  font-weight: lighter;
  list-style-type: none;
  width: 500px;
}

li.section {
  background-color: rgb(235, 235, 236);
  border-bottom: 1px solid rgb(208, 208, 208);
  height: 3.5em;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  width: 495px;
}

li.section>span {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

li.section>span.icon {
  flex-basis: 2em;
  align-self: flex-start;
}

li.section>span.name {
  align-self: auto;
  justify-content: flex-start;
  flex-grow: 2;
  padding-left: 0.5em;
}

li.section>span.tabs-count {
  flex-basis: 5em;
}

li.section>span.toolbar {
  flex-basis: 1em;
  font-size: xx-large;
  font-weight: 100;
}

li.section:hover>span.tabs-count,
  li.section>span.toolbar,
  li.section.confirming:hover>span.toolbar  {
  display: none;
}

li.section>span.tabs-count, li.section:hover>span.toolbar {
  display: inherit;
}

li.section>span:hover, li.section:focus {
  background-color: rgb(220, 220, 222);
  cursor: pointer;
}

li.tab {
  background-color: rgb(252, 252, 252);
  border-bottom: 1px solid rgb(237, 237, 237);
  padding: 10px;
  width: 480px;
}

li.section.confirming span, li.section img {
  display:none; 
}

.confirming div.delete-container-confirmation {
  height: 100%;
  width: 100%;
  display: flex;
}

li.section.confirming .delete-container-confirmation span {
  display: inline-block;
  padding: 10px;
}

.delete-container-confirmation {
  display:none;
}

.delete-container-confirmation b {
  font-weight: 900;
}

.confirming .delete-container-confirmation .no, .confirming .delete-container-confirmation .yes {
  width: 2em;
  text-align: center;
  cursor: pointer;
}

.confirming .delete-container-confirmation .yes {
  background-color: rgba(81, 205, 0, 0.5);
}

.confirming .delete-container-confirmation .yes:hover {
  background-color: rgba(81, 205, 0, 1);
}


.confirming .delete-container-confirmation .no {
  background-color: rgb(255, 97, 61, 0.7);
}

.confirming .delete-container-confirmation .no:hover {
  background-color: rgb(255, 97, 61, 1);
}

li.tab:focus, li.tab:hover {
  background-color: rgb(232, 232, 232);
  cursor: pointer;
}

li.tab div {
  display: flex;
  align-items: center;
}

li.tab div.image {
  background-repeat: space !important;
  background-size: cover !important;
  height: 42px;
  text-align: center;
  vertical-align: middle;
  width: 56px;
  margin-right: 10px;
}

li.tab div.image img {
  width: 20px;
}

li.tab img.no-thumbnail {
  width: 20px;
  margin-right: 10px;
}

li.tab img.no-thumbnail+div.text {
  max-width: 436px;
}

li.tab img.no-thumbnail+div.text div {
  width: 416px;
}

li.tab img+div.text, li.tab span+div.text {
  max-width: 486px;
  height: 2.5em;
}

li.tab span+div.text div {
  width: 466px;
}

li.tab:hover span+div.text div {
  width: 436px;
}

li.tab div.text {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400px;
  overflow: hidden;
  display: block;
}

li.tab div.text div {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 380px;
  display: block !important;
}

.image {
  align-items: end !important;
  border: 1px solid rgb(192, 192, 192);
}

.tab-url {
  color: rgb(152, 152, 152);
}