/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed');

@keyframes bgFade {
    0% {
        background-color: #00aaff; /* Azzurro */
    }    
    3% {
        background-color: darkolivegreen; /* Azzurro */
    }
    100% {
        background-color:darkolivegreen; /* Verde */
    }
}

.animated-bg {
    animation: bgFade 0.1s ease-in-out forwards;
}


	* {
		box-sizing: border-box;
	}
	
	html, body {
		margin:0px;
		padding:0px;
		background-color:#000;
		color:#FFF;
		/*background-image:url('https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6bae7033-2587-40f3-86e5-d4fa28adf6fc/horror-wallpaper25.jpg');*/
		background-size:cover;
	}

	body, td, th, input {
		font-family:Verdana, Geneva, sans-serif;
		font-family: 'Ubuntu Condensed', sans-serif;
		color:#FFF;
		/*text-shadow:.05em .05em .05em rgba(0,0,0,.5);*/
	}

    body {
        width:100vw;
        height:100vh;
        border:0px;
        padding:0px;
        margin:0px;
    }
	
	a {
		color:inherit;
		text-decoration:none;
	}
	
	h1,h2,h3,h4 {
		margin:0px;
		padding:0px;
	}
	
	#soundmenu {
		display:block;
		position:fixed;
		top:0px;
		right:0px;
		background-color:#000;
		vertical-align:top;
		z-index:101;
		height:50px;
		padding:5px;
		width:640px;
		max-width:100vw;
	}
	
	#soundtracks {
		display:block;
		position:fixed;
		bottom:0px;
		right:0px;
		background-color:#FFF;
		vertical-align:middle;
		z-index:101;
		padding:5px;
		font-size:20px;
		line-height:20px;
		max-height:90vh;
		min-width:640px;
		max-width:100vw;
	}
	#soundtracks audio {
		display:inline-block;
		width:100px;
		display:none;
	}
	#soundtracks input {
		vertical-align:top;
	}

	
	#playlist {
		display:inline-block;
		width:100%;
		height:0px;
		overflow:hidden;		
		z-index:100;
		max-height:50vh;
		overflow-y:auto;
        color:
	}
	
	#playlist a{
		padding:1%;
		margin:.2%;
		border:1px solid rgba(150,150,150,.3);
		margin-bottom:1%;
		background-color:#555;
		display:block;
		clear:both;
		color:white;
		overflow:hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height:20px;
		font-size:12px;
	}
	
	.open #playlist {
		height:auto !important;
	}
	
	#soundpad {
		position:fixed;
		top:0px;
		right:0;
		bottom:0px;
		overflow:scroll;
		border-left:1px solid #555;
		padding-top:50px;
		padding-bottom:40px;
		/*box-shadow:0 0 1em #000;*/
		z-index:100;
		background-color:#000;
        
		width:100vw;
		max-width:100vw;
	}
    .folder {
        display:inline;
        width: auto;
        clear: none;
    }

    #soundpad .title {
        display:inline;
        width: auto;
        clear: none;
        position: absolute;
        margin-top:-13px;
        margin-left:3px;
        border:1px solid white;
        padding:0px 4px;
        border-bottom: 0px;
        font-size:13px;
        background-color: white;
        color:black;
    }

	#home {
		top:0px;
		margin-right:auto;
		bottom:0px;
		overflow:scroll;
		border-left:1px solid #555;
		padding-top:50px;
		padding-bottom:40px;
		/*box-shadow:0 0 1em #000;*/
		z-index:100;
		background-color:#555;
        
		min-width:700px;
		width:100%;
	}

	.item {
		padding:.2%;
		margin:.2%;
		border:1px solid rgba(30,30,30,.3);
		margin-bottom:1%;
		background-color:#555;
        width:200px;
        display: inline-block;
        text-align: center;
        position: relative;
        color:#000;
        
	}
    .item .name {
        overflow-x: hidden;
    }
	.item *{
		vertical-align:middle;
	}
	.item label, .item input {
		height:32px;
		line-height:32px;
	}
	.item .name {
		 text-overflow: ellipsis;
		 white-space: nowrap;
        color:white;
        background-color: #000;
	}
.item label {
    text-align:left;
}
.item label small {
    display:inline-block;
    width:30px;
}

.item label small+input[type='range'] {
    display:inline-block;
    width:150px;
}

.lnk_play {
    opacity:.2;
}
.lnk_loop {
    opacity:.2;
    
}

.item .name {
    text-align: left;
    margin-top:-4px;
    margin-left:-4px;
    margin-right:-4px;
    padding-left:4px;
    background-color:dark-gray;
}

.playing {
    animation: bgFade 0.5s ease-in-out forwards;
    outline:2px solid green;
    color:white;
}
.lnk_stop {
    opacity:.2;
}
.playing .lnk_stop {
    opacity:1;
}

	input[type='text']:focus,input[type='number']:focus,textarea:focus {font-size:16px !important;}
	input[type='number'] {
		width:32px;
		height:32px;
		text-align:center;
		padding:0px;
		margin:0px;
		border:0px;
		font-size:16px;
		background-color:rgba(0,0,0,.1);
		border-radius:1em;
    -moz-appearance:textfield;
	}
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
			-webkit-appearance: none;
	}

	.range {
		width:100px;
	}
	.item .icon {
		display:inline-block;
		height:32px;
		/*width:32px;*/
		overflow:hidden;
	}
	.item label span {
		display:inline-block;
		font-size:50%;
		clear:both;
		left:-32px;
		color:#FFF;
		line-height:10px;
		text-align:right;
	}
	.item .timer {
		width:30px;
		height:15px;
		text-align:right;
		text-align:right;
		padding-right:15px;
		margin:0px;
		border:0px;
		font-size:12px;
		background-color:rgba(0,0,0,.1);
		float:right;
		margin-right:10px;
		text-align:right;
		background-image:url('/img/icons/arrow_rotate_clockwise.png');
		background-position:right center;
		background-size:10px;
		background-repeat:no-repeat;
		font-weight:bold;
        color:black;
        display: none;
	}

#home .item { text-align: left; vertical-align: middle;}
	
	
	
#preset_name { color:black;}
	


    .checkhide {
        display:none;
    }
    
    .checkhide + span {
        display: inline-block;
        border-radius: 100%;
        border:1px solid #333 !important;
        background-color:black;
        color:#333 !important;
        width:14px;
        height:14px;
        text-align:center !important;
        vertical-align: middle !important;
        font-size:12px !important;
        padding-top:1px;
        text-align: center;
    }
    .checkhide:checked + span {
        border:1px solid green !important;
        background-color:darkgreen !important;
        color:greenyellow !important;
    }
.rangeValue {display: none;}
@media screen and (max-width: 700px)  {
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* Evita scroll orizzontale */
        background-color: #f0f0f0; /* Sfondo per evidenziare il layout */
    }

    #framer {
        display: block;
        width:700px;
        min-width: 100%;
        margin: 0 auto; /* Centra il contenitore */
        background: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Leggera ombra per evidenziare il bordo */
    }

	#soundpad {
     
        width:700px;
        
    }
	
/*@media screen and (orientation: portrait) {*/
    .nomob {
        display:none !important;
    }
    
    .lnk_play {
        transform: rotate(0.25turn);
    }
    
    .item {
    display: block;
        clear: both;
        width:100%;
        text-align: left;
        vertical-align: top;
        background-color:#white !important;border-bottom:1ps solid gray;
    }
    
    .item>* {
        height:30px;
        vertical-align: top;
        display: inline-block;
    }
    
    .checks {
        position:absolute;
        margin-top:-20px;
        margin-right:60px;
    }
    
    .name {
        display:block;
        width:100px;
        margin:0px !important;
        vertical-align: middle;
        background-color:transparent !important;
        font-size: 12px;
        height:13px;
    }
    .item .btn {
        padding:3px;
        margin:0px;
    }
    
    .range {
        width:60px !important;
    }
    .panner {
        width:60px !important;
    }
    .volume_range {
        width:50px !important;
    }
    .item .btn img {
        height:24px;
    }

    
}