.rg-zoom-ex{
      font-size: 12px;
      border: none;

    }
    
  
  
/* 

    the button that is used to open and close the collapsible content
*/
    
    .control-button-wrapper{
      display: flex;
      border: none;

    }
    .scrollll{
      overflow: auto;
      height: 100%;
      scrollbar-width: thin;
      }
    .collapsible {
      background-color: seashell;
      color: black;
      cursor: pointer;
      padding: 5px;
      width: 100%;
      border: none;
      text-align: left;
      outline: rgb(164, 163, 163) solid 1px;
      font-size: 14px;
    }
    .button-original-map {
      background-color: seashell;
      color: black;
      cursor: pointer;
      padding: 5px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 14px;
    }

    .button {
      background-color: seashell;
      color: black;
      cursor: pointer;
      padding: 5px;
      width: 40px;
      border: none;
      text-align: left;
      outline: none;
      font-size: 14px;
    }
    .button::after{
      content: "\2795";
      font-size: 15px;
      margin-left: 4px;
    }
    
    .active, .collapsible:hover, .button:hover, .list-button {
      background-color: rgb(237, 225, 220);
    }
  
    .collapsible:after {
      content: '\25BC';
      color: rgb(45, 70, 51);
      font-weight: bold;
      float: left;
      margin-left: 5px;
    }
    
    .active:after {
      content: "\25B2";
    }
    
    .content {
      padding: 0 10px;
      max-height: 0;
      overflow: auto;
      transition: max-height 0.2s ease-out;
      background-color: rgba(251, 236, 225, 0.018);
      scrollbar-width: thin ;
      border: none;

    }
    .plain{
      font-size: 16px;
      background-color: seashell;
      padding: 0px;
      display: block;
      border: none;
    }
    .list-button{
      background-color: rgb(237, 225, 220);
      color: black;
      padding: 2 10px;
      width: auto;
      border: none;
      text-align: left;
      outline:  none;
      font-size: 12px;
    }
    .list-button:hover{
      background-color: seashell;
    }
    .list-button:active{
      background-color: rgb(245, 108, 11);
    }
    .no-loc{
      font-size: 11px;
      background-color: seashell;
      width: 100%;
      border: none;

    }
    .list-region{
      font-size: 14px;
      margin: 5px 0px 0px 10px;  
    }
    
  @media (prefers-color-scheme: dark) {
    .rg-con-foot{
      background: rgba(251, 236, 225, 0.018);

    }
    .collapsible {
      background-color: rgba(251, 236, 225, 0.018);
      color: seashell;
    }    
    .button-original-map {
      background-color: rgba(251, 236, 225, 0.018);
      color: seashell;
    }    
    .button {
      background-color: rgba(251, 236, 225, 0.018);
      color: seashell;
    }
    .active, .collapsible:hover, .button:hover, .list-button {
      background-color: rgba(251, 236, 225, 0.018);
    }
    .collapsible:after {
      color: rgb(174, 205, 182);
    }
    .content {
      background-color: rgb(57, 54, 50);
    }
    .plain{
      font-size: 16px;
      background-color: rgb(57, 54, 50);
      color: seashell;
    }
    .list-button{
      background-color: rgba(20, 19, 18, 0.87);
      color: seashell;
    }
    .list-button:hover{
      background-color: rgba(251, 236, 225, 0.018);
    }
    .list-button:active{
      background-color: rgb(245, 108, 11);
    }
    .no-loc{
      background-color: rgba(251, 236, 225, 0.018);
    }
    
  }