html, body {
    height: 100%;
}

body {
    display: flex;
    max-height: 99vh;
    flex-direction: column;
}

.aladin-zoomControl {
    top: 80% !important;
}

#aladin{
    flex: 1 1 0;
}

#explain {
    padding: 4px;
    top: 30%;
}

#layersControl {
    padding: 4px;
    left: unset;
    right: 4px;
    top: 20%;
    max-height: 60%;
    overflow: scroll;
	text-wrap: nowrap;
}

#layersControl  input {
    margin-right: 5px;
}


.aladin-box {
    font-size: 12px !important;
}

.arrow {
	  cursor: pointer;
      float: right;
      right: 4px;
	  top: 8px;
      display: block;
      margin: 4px;
      transition: transform 0.3s;
      width: 24px;
      height: 24px;
}

.arrow.active {
      transform: rotate(180deg);
}

.mycontent {
      padding-left: 8px;
	  padding-right: 4px;
      transition: transform 0.3s;
}

.mycontent.active {
      display: none;
}