ul, #myUL {
/*  list-style-type: none;*/
}



#myUL {
  word-wrap: break-word;
  margin: 0;
  padding: 0;
  padding-bottom: 50px;
}

.container_main{
  display: inline-flex;
  align-items: center;
}

.charters
{
  overflow: scroll; /* Добавляем полосы прокрутки */
  /*width: 300px;  Ширина блока */
  /*height: 150px;  Высота блока */
  height: 70vh;
  max-width: 30vw;
  padding: 5px; /* Поля вокруг текста */
  border: solid 1px black; /* Параметры рамки */

}


.elements{
  overflow: scroll; /* Добавляем полосы прокрутки */
  width: 67vw;
  height: 70vh;
  padding: 5px; /* Поля вокруг текста */
  border: solid 1px black; /* Параметры рамки */
  position: relative; /* you'll need some position here for jQuery's position to work, otherwise it will be based on the document */
}


html { font-size: calc(1em + 1vw) }


#butt_sw_charters{
cursor: pointer;
padding: 0;
margin: 0;
width: 0.7vw;
height: 5vh;
background-color: #af5b62;
}

#myUL .active
{
  cursor: pointer;
  text-decoration: none;
/*   background-color: rgb(209, 209, 209);
 */  

}


#myUL .active>UL {
  display: block;
  
}
#myUL .active > a {
  background-color: #fff2d7;
}

#myUL .selected {
  background-color: #ffdcd7;
}

#myUL .collapsed>UL {
  display: none;
}

#myUL .collapsed::before {
  content: "\25B6";
  color: #af5b62;
  display: inline-block;
  margin-right: 6px;
}

#myUL .active::before {
  content: "\25B6";
  color: #af5b62;
  display: inline-block;
  margin-right: 6px;
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */
  transform: rotate(90deg);  
  
}

#myUL .collapsed {
  
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}