/* =========================================================
   LISTENING ROOM
   ========================================================= */

#lr-wrapper {

    width: 90%;
    max-width: 1180px;

    margin: 60px auto 70px auto;
	
	scroll-margin-top: 80px;

    background: #fff;

    color: #555;
	
/*	border-radius: 12px;   */

    padding-left:  10px; 
	padding-right: 20px; 

    font-family:
        "Avenir Next",
        Avenir,
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-weight: 400;

    letter-spacing: .2px;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

#lr-header {

    border-top: 1px solid #dcdcdc;

    padding-top: 28px;

    margin-bottom: 48px;

}


#lr-title {

    margin: 0 0 13px 0;

    font-size: 38px;

    line-height: 1.2;

    font-weight: 300;

    letter-spacing: .6px;

    color: #444;
	
}


#lr-description {

    margin: 0;

    font-size: 15px;

    line-height: 1.6;

    font-weight: 300;

    color: #777;
	
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.10) !important;

}


/* ---------------------------------------------------------
   LIBRARY
   --------------------------------------------------------- */

#lr-library {

    display: grid;

    grid-template-columns: 280px 1px minmax(0, 1fr);

    column-gap: 0;

    position: relative;

}


/* ---------------------------------------------------------
   CATEGORIES
   --------------------------------------------------------- */

#lr-categories {

    padding-right: 34px;

}


.lr-category {

    min-height: 44px;

    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    color: #555;

    font-size: 15px;

    font-weight: 300;

    letter-spacing: .2px;

    transition:
        color 180ms ease,
        background-color 180ms ease;

    padding: 0 8px;

}


.lr-category:hover {

    background-color: #f7f7f7;

}


.lr-category.active {

    color: #3f3f3f;

}


.lr-arrow {

    display: inline-block;

    width: 13px;

    font-size: 20px !important;

    color: #888;
	
	margin-right: 8px;

}


.lr-category.active .lr-arrow {

    color: #444;

}


/* ---------------------------------------------------------
   SUB-CATEGORIES (nomi album)
   --------------------------------------------------------- */

   .lr-subcategory {
    text-align: left;
    padding-left: 25px;
	margin-bottom: 4px;
}

	.lr-sub-arrow {
    display: inline-block;
    width: 13px;
    font-size: 20px !important;
    color: #888;
	margin-right: 8px;
}	

.lr-subcategory-title {
    transition: color 0.2s ease;
}

.lr-subcategory:hover .lr-subcategory-title {
    background-color: #f7f7f7;
}

.lr-subcategory.active {
    background-color: #f0f0f0;
}

/* ---------------------------------------------------------
   LINEA VERTICALE PRINCIPALE
   --------------------------------------------------------- */

#lr-main-divider {

    width: 1px;

    background: #d8d8d8;

    margin-top: 18px;

    margin-bottom: 18px;

}


/* ---------------------------------------------------------
   PLAYLIST
   --------------------------------------------------------- */

#lr-tracks {

    min-width: 0;

    padding-left: 34px;

}


#lr-track-list {

    width: 100%;

}


/* ---------------------------------------------------------
   RIGA BRANO
   --------------------------------------------------------- */

.lr-track {

    min-height: 44px;

    display: grid;

    grid-template-columns:
        30px
        54px
        1px
        minmax(0, 1fr)
        52px;

    column-gap: 0;

    align-items: center;

    border-bottom: 1px solid #e3e3e3;

    color: #606060;

    cursor: pointer;

    transition:
        background-color 180ms ease,
        color 180ms ease;

}


.lr-track:first-child {

    border-top: 1px solid #e3e3e3;

}


.lr-track:hover {

    background-color: #f8f8f8;

}


.lr-track.playing {

    color: #444;

}


/* ---------------------------------------------------------
   PLAY
   --------------------------------------------------------- */

.lr-play {

    font-size: 12px;

    color: #666;

    text-align: left;

    user-select: none;

}


.lr-track.playing .lr-play {

    color: #333;

}


/* ---------------------------------------------------------
   TEMPO
   --------------------------------------------------------- */

.lr-current {

    font-size: 14px;

    color: #999;

    font-variant-numeric: tabular-nums;

    white-space: nowrap;

}


/* ---------------------------------------------------------
   LINEETTA VERTICALE
   --------------------------------------------------------- */

.lr-track-divider {

    width: 1px;

    height: 20px;

    background: #d8d8d8;

}


/* ---------------------------------------------------------
   TITOLO
   --------------------------------------------------------- */

.lr-track-title {

    min-width: 0;

    padding-left: 16px;

    padding-right: 18px;

    font-size: 15px;

    font-weight: 300;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
	
	text-align: left;

}


/* ---------------------------------------------------------
   DURATA
   --------------------------------------------------------- */

.lr-duration {

    font-size: 14px;

    color: #999;

    text-align: right;

    font-variant-numeric: tabular-nums;

    white-space: nowrap;

}


/* ---------------------------------------------------------
   TRANSPORT
   --------------------------------------------------------- */

#lr-transport {

    margin-top: 24px;

}


/* ---------------------------------------------------------
   PROGRESS AREA
   --------------------------------------------------------- */

#lr-progress-area {

    width: auto;

    padding: 8px 0;

    cursor: pointer;
	
	margin-left: 20px;
	
    margin-right: 20px;
	
	box-sizing: border-box;

}


#lr-progress-track {

    position: relative;

    width: 100%;

    height: 2px;

    background: #d8d8d8;

}


#lr-progress-loaded {

    position: absolute;

    left: 0;

    top: 0;

    height: 2px;

    width: 0;

    background: #c8c8c8;

}


#lr-progress-played {

    position: absolute;

    left: 0;

    top: 0;

    height: 2px;

    width: 0;

    background: #777;

}


#lr-progress-knob {

    position: absolute;

    top: 50%;

    left: 0;

    width: 10px;

    height: 10px;

    margin-left: -5px;

    margin-top: -5px;

    border-radius: 50%;

    background: #f4f4f4;

    border: 1px solid #999;

    box-sizing: border-box;

    transition:
        width 100ms ease,
        height 100ms ease,
        margin 100ms ease;

}


#lr-progress-area:hover #lr-progress-knob {

    width: 12px;

    height: 12px;

    margin-left: -6px;

    margin-top: -6px;

}


/* ---------------------------------------------------------
   CONTROLLI
   --------------------------------------------------------- */

#lr-controls {

    display: grid;

    grid-template-columns: 40px 40px 1fr;

    align-items: center;

    margin-top: 12px;

}


#lr-loop,
#lr-mute {

    border: 0;

    background: transparent;

    padding: 0;

    width: 32px;

    height: 32px;

    font-family: inherit;

    font-size: 17px;

    font-weight: 300;

    color: #777;

    cursor: pointer;

}

#lr-loop {
	font-size: 18px !important;
	transform: translateY(-0px) !important;
	color: #aaa;
}		

#lr-mute {
	transform: translateY(-2px) !important;
}	

#lr-loop:hover,
#lr-mute:hover {

    background-color: #f8f8f8;

}


#lr-loop.active {

    color: #444;

}


#lr-time {

    justify-self: end;

    font-size: 14px;

    color: #999;

    font-variant-numeric: tabular-nums;

    white-space: nowrap;

}



/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (orientation: portrait) {

    #lr-wrapper {

        width: 90%;

        margin-top: 55px;

        margin-bottom: 50px;

    }


    #lr-header {

        padding-top: 22px;

        margin-bottom: 34px;
		

    }


    #lr-title {

        font-size: 30px;
		
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);

    }


    #lr-description {

        font-size: 14px;

    }


    #lr-library {

        display: block;

    }


    #lr-categories {

        padding-right: 0;

    }


    .lr-category {

        min-height: 46px;

        padding: 0 4px;

        border-bottom: 1px solid #e3e3e3;

        line-height: 1.8;
		
		margin-bottom: 6px;

    }





    .lr-arrow {

        width: 18px;

        font-size: 13px;

    }


    .lr-subcategory {

        padding-left: 22px;

        line-height: 1.4;
		
		font-size: 17px;
		
		margin-bottom: 4px;

    }




	.lr-category-title {
		display: inline-block;
		font-family: inherit;
		font-size: 30px;
		font-weight: 500;
		line-height: 1.8;
		letter-spacing: .2px;
	}

	.lr-subcategory-title {
		display: inline-block;
		font-family: inherit;
		font-size: 30px;
		font-weight: 300;
		line-height: 1.8;
		letter-spacing: .2px;
	}


	.lr-subcategory:hover {
		background-color: #e2e2e2;
	}

	.lr-subcategory:hover .lr-subcategory-title {
		font-weight: 400;
		transform: translateX(4px);
	}

	.lr-subcategory.active {
		background-color: #e2e2e2;
	}

	.lr-subcategory.active .lr-subcategory-title {
		font-weight: 400;
		transform: translateX(4px);
	}

	
    .lr-sub-arrow {

        width: 18px;

        font-size: 13px;

    }
	
	.lr-category.active + .lr-subcategories {
    padding-bottom: 18px;
	}


    #lr-main-divider {

        display: none;

    }


    #lr-tracks {

        padding-left: 0;

        margin-top: 35px;

    }


    .lr-track {

        display: grid;

        grid-template-columns:
            30px
            54px
            1px
            minmax(0, 1fr)
            48px;

        min-height: 46px;

        font-size: 15px;

    }


    .lr-track-title {

        padding-left: 30px;

        padding-right: 8px;

        font-size: 25px;

    }


	.lr-current {
		font-size: 0 !important;
	}

	.lr-duration {
		font-size: 25px !important;
	}

	

    #lr-transport {

        margin-top: 25px;

    }
	
	
	#lr-title {
    font-size: 50px !important;
    font-weight: 700 !important;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) !important;
	}
	
	/* BARRA DI AVANZAMENTO */
	#lr-progress-track {
		height: 6px;
		border-radius: 3px;
	}

	#lr-progress-loaded,
	#lr-progress-played {
		height: 6px;
		border-radius: 3px;
	}

	#lr-progress-knob,	
	#lr-progress-knob:active,
	#lr-progress-knob:focus {
		width: 20px !important;
		height: 20px !important;
		background-color: #000 !important;
		border: none !important;
		border-radius: 50% !important;
		transform: translateY(-4px) !important;
	}

	/* CONTROLLI */
	#lr-controls {
		min-height: 44px;
		margin-top: 10px;
		display: flex;
        align-items: center;
	}

	#lr-loop,
	#lr-mute {
		width: 80px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 25px;
	}

	#lr-loop {
		font-size: 62px !important;
		margin-right: 12px !important;
		color: #aaa;
	}

	#lr-mute {
		font-size: 40px;
		transform: translateY(5px) !important;
	}
	
	#lr-loop.active {
    color: #444;
	}
	
	#lr-loop:focus:not(.active) {
    color: #aaa;
    outline: none;
}	


	/* TEMPI */
	#lr-time {
		font-size: 30px;
		margin-left: auto;
	}
	
	.lr-play {
    font-size: 22px !important;
	}
	


}