/* .skladba_P {
    padding:  var(--padding_3) calc(var(--padding_3) + var(--padding_3));
    position: relative;
    overflow: hidden;
  } */

  /* skladba */

  .skladba_P {
    display: grid;
    grid-template-columns: 40% 60%;
    overflow: hidden;
  }

  .skladba_P_slika {
    position: absolute;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: start;
    width: 100%;
    /*padding: var(--padding_10);*/
  }
  .skladba_P_slika img {
    display: block;
    width: 100%;
    object-fit: contain;
  }

  .skladba_P_footer {
    display: flex;
    flex-direction: row;
    padding: var(--padding_5);
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }

  .skladba_P_podrobnosti{
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    padding-left: var(--padding_5);
  }
 
   .skladba_P_podrobnosti::-webkit-scrollbar{
    display: none;
  }  

  .skladba_P_podrobnosti h4 {
    padding: var(--padding_2) 0;
    position: relative;
  }

  .skladba_P_podrobnosti h4 i{
    position: absolute;
    left: 30%;
  }

  .skladba_P_podrobnosti h4:first-of-type{
    border: 0px solid var(--color_LunarGreen);
    padding-bottom: 0;
  }

  .skladba_P_podrobnost_omemba{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: end;
    right: 0;
    top: var(--padding_3);
    width: 6%;
    height: 3rem;

  }
  .skladba_P_podrobnost_izdaje svg:last-child use,
  .skladba_P_podrobnost_audio i svg:last-child,
  .skladba_P_podrobnost_video svg:last-child
  {
    /* transform: rotate(90deg);  */
  }
  
  .skladba_P_podrobnost_izdaja_seznam {
    display: grid;
    align-items: center;
    grid-template-columns: 30% 46% 18% 6%;
  }

  .skladba_P_podrobnost_izdaja_seznam H5 {
    color: var(--color_LunarGreen);
    padding-top: var(--padding_2);
  }

  .skladba_P_podrobnost_izdaja_seznam a H4{
    display: flex;
    align-items: center;
  }

  .skladba_P_podrobnost_izdaja_seznam span{
    display: flex;
    justify-content: right;
    align-items: end;
    padding-right: var(--padding_3);
    padding-top: var(--padding_2);
  }


  .skladba_P_podrobnost_izdaja_seznam a:last-child {
    display: flex;
    justify-content: right;
    align-items: center;
    width: 100%;  
    height: 100%;
  }

  .skladba_P_podrobnost_izdaja_podrobnost{
    padding: var(--padding_2) 0;
    display: none;
    background-color: var(--color_RockBlue25);
    border-bottom: 1px solid var(--color_LunarGreen);
  }

  .skladba_P_podrobnost_izdaja_podrobnost ul{
    width: 100%;
  }
  
  .skladba_P_podrobnost_izdaja_podrobnost ul li{
    position: relative;
    display: grid;
    grid-template-columns: 30% 45% 19% 6%;
    align-items: center;
    width: 100%;
    height: 100%;
    line-height: calc(var(--default_font_size)* 1.4);
  }

  .skladba_P_podrobnost_izdaja_podrobnost ul li:has(> div){
    height: calc(var(--padding_10) * 1.5);
    /* border: 1px solid red; */

  }

  .skladba_P_podrobnost_izdaja_podrobnost ul li:has(div) span{
    position: absolute;
    left: 80%;
  }

  .skladba_P_podrobnost_izdaja_podrobnost ul li:has(div) i{
    position: absolute;
    left: 30%;
  }

  .skladba_P_podrobnost_izdaja_podrobnost ul li:has(div) a{
    display: flex;
    align-items: start;
    justify-content: right;
    height: 100%;
    width: 100%;
    padding-right: var(--padding_5);
  }

  .skladba_P_podrobnost_izdaja_podrobnost ul li:has(div) h4{
    padding: 0;
  }

  .skladba_P_podrobnost_izdaja_podrobnost ul li i{
    position: absolute;
    display: flex;
    left: 30%;
    align-items: baseline;
  }

  .skladba_P_podrobnost_izdaja_podrobnost ul li i h5{
    padding-left: var(--padding_1);
    
  }

  .skladba_P_podrobnost_izdaja_podrobnost ul li div{
    padding: var(--padding_1) 0;
    height: inherit;

  }

   .skladba_P_podrobnost_izdaja_podrobnost ul li div img{
     aspect-ratio: 1;    
     height: 100%;
    }

  .skladba_P_podrobnost_izdaja_podrobnost ul li a:first-child{
    position: absolute;
    display: flex;
    left: 30%;
    align-items: center;
  }

  /* .skladba_P_podrobnost_izdaja_podrobnost ul li a{
    position: absolute;
    left: 80%;
  } */

  .skladba_P_podrobnost_izdaja_podrobnost ul li a h4{
    padding: 0;
  }
 
  .skladba_P_podrobnost_izdaja_podrobnost svg{
    fill: var(--color_Green);
  }

  .skladba_P_podrobnost_izdaja_podrobnost  ul  li  span a:only-child{
    padding-left: var(--padding_1);

  }

  .skladba_P_podrobnost_izdaja_podrobnost  ul  li  span:first-child {
    grid-column: 2 / span 3;
    display: flex;
    flex-direction: row;
  }

  .skladba_P_podrobnost_izdaja_podrobnost  ul  li  span:first-child a{
    position: relative;
    padding-right: var(--padding_2);
    left: 0;
  }

  .skladba_P_podrobnost_izdaja_podrobnost  ul  li  span:first-child a > h4{
    padding: 0;
    font-weight: 700; /*morda mora biti 400*/
  }

  .skladba_P_podrobnost_izdaja_podrobnost.active{
    display: block;
  }

  .skladba_P_podrobnost_audio_seznam{
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: 30% 46% 18% 6%;
  }
  
  .skladba_P_podrobnost_audio_seznam H4{
    border-bottom: 0px solid var(--color_LunarGreen);
  }

  .skladba_P_podrobnost_audio_seznam a {
    display: flex;
    justify-content: right;
    cursor: pointer;
  }

  .skladba_P_podrobnost_audio_podrobnost{
    background-color: var(--color_RockBlue25);
    border-bottom: 1px solid var(--color_LunarGreen);
    background-color: var(--color_RockBlue25);
    display: none;
  }
  .skladba_P_podrobnost_audio_podrobnost.active{
    display: block;
  }

  .skladba_P_podrobnost_audio_podrobnost ul li{
    display: grid;
    align-items: center;
    grid-template-columns: 30% 46% 18% 6%;
    position: relative;
    height: calc(var(--padding_10)*1.5);
  }

  .skladba_P_podrobnost_audio_podrobnost ul li div{
    padding: var(--padding_1);
    height: inherit;
  }

  .skladba_P_podrobnost_audio_podrobnost ul li span{
    text-align: right;
    padding-right: var(--padding_3);
    padding-top: var(--padding_4);
      }

   .skladba_P_podrobnost_audio_podrobnost ul li div img{
     aspect-ratio: 1/1;
      height: 100%;
    }

    .skladba_P_podrobnost_audio_podrobnost i H4 {
      font-weight: 700;
      position: absolute;
      margin: 0;
      padding: 0;
    }
    .skladba_P_podrobnost_audio_podrobnost i H5 {
      font-weight: 400;
      margin: 0;
      padding: 0;
  }
    .skladba_P_podrobnost_audio_podrobnost a:last-child {
      display: flex;
      justify-content: end;
      font-weight: 700;
    }
    .skladba_P_podrobnost_audio_podrobnost svg{
      fill: var(--color_Green);
    }

  .skladba_P_podrobnost_video_seznam{
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: 30% 50% 14% 6%;
  }

  .skladba_P_podrobnost_video_seznam a {
    display: flex;
    justify-content: right;
  }

  .skladba_P_podrobnost_video_podrobnost{
    background-color: var(--color_RockBlue25);
    border-bottom: 1px solid var(--color_LunarGreen);
    display: none;
    width: 100%;
  }
  .skladba_P_podrobnost_video_podrobnost.active{
    display: block;
  }

  .skladba_P_podrobnost_video_podrobnost ul li{
    display: grid;
    align-items: center;
    grid-template-columns: 30% 46% 18% 6%;
    position: relative;
    height: calc(var(--padding_10)*1.5);
  }

  .skladba_P_podrobnost_video_podrobnost ul li div{
    padding: var(--padding_1);
    height: inherit;
  }

  .skladba_P_podrobnost_video_podrobnost ul li span{
    text-align: right;
    padding-right: var(--padding_3);
    padding-top: var(--padding_4);
  }

   .skladba_P_podrobnost_video_podrobnost ul li div img{
      aspect-ratio: 1/1;
      height: 100%;
    }

    .skladba_P_podrobnost_video_podrobnost i H4 {
      font-weight: 700;
      position: absolute;
      margin: 0;
      padding: 0;
    }
    .skladba_P_podrobnost_video_podrobnost i H5 {
      font-weight: 400;
      margin: 0;
      padding: 0;
    }
    .skladba_P_podrobnost_video_podrobnost a:last-child {
      display: flex;
      justify-content: end;
      font-weight: 700;
    }
    .skladba_P_podrobnost_video_podrobnost svg{
      fill: var(--color_Green);
    }


  .skladba_P_podrobnost_besedilo_seznam{
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: 30% 50% 14% 6%;
  }

  .skladba_P_podrobnost_besedilo_seznam a {
    display: flex;
    justify-content: right;
  }
 
  .skladba_P_podrobnost_besedilo_podrobnost{
    display: none;
    padding: var(--padding_5) 0;
    background-color: var(--color_RockBlue25);
    border-bottom: 1px solid var(--color_LunarGreen);
  }

  .skladba_P_podrobnost_besedilo_podrobnost.active{
    display: block;
  }
        /* Bottom  


.skladba_P_bottom {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10;
  transition: all 500ms ease;
  display: block;
}

.skladba_P_bottom_close {
  top: 100vh;
}

.skladba_P_bottom_close svg:first-child{ display: block;} 
.skladba_P_bottom_close svg:last-child{ display: none;} 
.skladba_P_bottom_open { top: 0vh; }
.skladba_P_bottom_open svg:first-child{ display: none;} 
.skladba_P_bottom_open svg:last-child{ display: block;} 

.skladba_P_bottom_open .skladba_P_bottom_gumb{top: 0;}
.skladba_P_bottom_gumb {
  position: absolute;
  z-index: 10;
  display: flex;
  top: -25px;
  height: calc(var(--default_font_size) * 1.6);
  opacity: 0.80;
  justify-content: center;
  cursor: pointer;
  border-top-left-radius: 30%;
  border-top-right-radius: 30%;
  background-color: var(--color_RockBlue75);
  width: calc(var(--bar-width));
  right: calc(var(--bar-width) * 1.8);
  transition: all 200ms ease;
}

.skladba_P_bottom_gumb:hover {
  background-color: var(--color_LunarGreen);
}

.skladba_P_bottom_gumb:hover svg {
  fill: var(--color_RockBlue75);
}

.skladba_P_bottom_gumb svg{
  position: absolute;
  height: 90%;
  aspect-ratio: 1;
  bottom: 2px;
}

.skladba_P_bottom_vsebina {
  background-color: var(--color_RockBlue75);
  padding: calc(var(--hamburger-gap) * 4);
  padding-right: calc(var(--hamburger-gap) * 6);
  font-family: var(--font-Roboto);
  font-size: calc(var(--default_font_size)* 1.2);
  text-align: justify;
  opacity: 0.8;
  transform: all 2s ease;
  height: 100vh;
}
*/
@media only screen and (max-width: 64em) /*769-1024px*/ {

  .side_C:has(.skladba_P){
    overflow: scroll;
  }
  
  .skladba_P {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .skladba_P_bottom{
    display: none;
  }
}


@media only screen and (max-width: 48em) /*481-768px*/ {	
  .skladba_P_bottom{
    display: none;
  }

  .skladba_P_podrobnost_audio_podrobnost ul li,
  .skladba_P_podrobnost_video_podrobnost ul li{
    grid-template-columns: 30% 40% 24% 6%;
  }
  .skladba_P
  {
    padding: calc(var(--hamburger-gap) * 3);  
  }

}