Template:Vilnius-Lithuania/styles/sideindex-mobile

@media (max-width: 1024px) {

 .index-container {
   position: fixed;
   display: flex;
   align-items: center;
   flex-direction: column;
   bottom: 100px;
   right: 100px;
   background-color: #FCCEC0;
   padding: 19px 17px 17px 17px;
   border-radius: 100%;
   width: 150px;
   height: 150px;
   z-index: 1;
 }

 .index-container:focus-within .index-header, .index-container:focus .index-header {
   height: 0;
   overflow: hidden;
 }

 .index-container:focus-within .index-content, .index-container:focus .index-content {
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
 }

 .index-container:focus-within, .index-container:focus {
   width: 350px;
   max-height: 500px;
   height: auto;
   border-radius: 25px;
   padding: 48px 48px;
   align-items: flex-start;
 }

 .index-header {
   width: 100%;
   height: 100%;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   text-align: center;
   font-family: var(--secondary-font);
   font-weight: 800;
   font-style: normal;
   font-size: 24px;
   color: rgba(13, 75, 94, 1);
   line-height: 24px;
   text-transform: uppercase;
 }

 .index-content {
   font-family: var(--main-font);
   font-size: 40px;
   font-style: normal;
   font-weight: 300;
   line-height: 40px;
   letter-spacing: 0em;
   text-align: left;
   color: #000000;
   width: 100%;
   padding-right: 25px;
 }

 .index-header > .vertical-breaker {
   display: none;
 }

 #figures-button {
   display: none;
 }

 #references-button {
   display: none;
 }

 .index-header > div {
   cursor: pointer;
 }

 .index-content {
   height: 0px;
   overflow: hidden;
 }

 .index-content > div {
   margin-bottom: 24px;
   padding-left: 18px;
   cursor: pointer;
 }

 .index-content > .active {
   border-left: 6px solid #0D4B5E;
   padding-left: 12px;
 }

}