body { height: 100dvh; }
.h-100 { height: 100%; }
.of { overflow:auto; }
.box { box-sizing: border-box; }
.z-1 { z-index: 1; }
.bdr-b { border-bottom: 1px solid var(--clr-bg-l2); }
.flx-shrnk-0 { flex-shrink: 0 }
.min-h-0 { min-height: 0 }

.box-shdw {
    /* shadow bottom */
    box-shadow: 0px 4px 10px 0px var(--clr-shdw);
}

.app-logo {
    height:60px;
    width:60px;
    background: var(--clr-bg-l2);
    flex-shrink:0;
    border-radius: 5px;
}
.app-logo.small {
    height: 40px;
    width: 40px;
    overflow:hidden;
}
.app-logo > img {
    width: 100%;
    height:100%;
    border-radius:5px;
    object-fit:cover;
}

.app-img {
    display: block;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    background: var(--clr-bg-l2);
    border-radius: 5px;
}
.app-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.app-card {
  width: 350px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.app-link {
  display: flex;
  gap: 14px;
  min-height: 108px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--clr-bg-l2);
  background: var(--clr-bg-l1);
  text-decoration: none;
  box-sizing: border-box;
}

.app-link:hover {
  border-color: var(--clr-txt-py);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
}
.app-link .app-detail {
    min-height:85px;
}

.slider-nav {
    padding: 10px;
    display:flex;
    transform: translate(0%, 14px);
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--clr-txt);
    color: var(--clr-bg);
    display: none;
}

.slider-nav.next {
    transform: translate(0%, 14px);
}

aalam-slider:hover .slider-nav {
    display:flex;
}

.image-slide {
    width:50%;
    aspect-ratio:4/3;
}
.slider-track {
    display:flex;
    align-items: stretch;
}
.spinner {
    width: 1em;
    height: 1em;
    border: 1px solid var(--clr-txt);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: spinner-rotation 1s linear infinite;
    vertical-align: baseline;
    margin-right: 6px;
}

@keyframes spinner-rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 640px) {
    .image-slide { aspect-ratio: 3/4; }
}

/* for app.template remove grid for mobile screen detail page */
@media (max-width:959px) {
    .details-section {
        display: block !important;
    }
}

@media screen and (min-width:960px) {
    .of-l { overflow: auto; }
    .search-form { max-width: 320px; }
}


/* installing page overlay aalam-tab-styles */
aalam-tabs::part(tab-root) {
    min-height: 0;
    flex-grow: 1;
}

aalam-tabs[data-fashion=overlay]::part(tab-title) {
    padding: 10px;
}
aalam-tabs[data-fashion=overlay]::part(tab-body-holder) {
    height: unset;
    bottom: 0;
}

/* Installing badge spinner */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}