html, body, #background {
	background-color: #000;
}
body {
	
	font-family: "Fontana", sans-serif;
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
* {
	background-repeat: no-repeat;
	text-decoration: none;
}
.dialog, .hidden, #playing, #pause, #main {
	display: none;
}
.menu {
	display: none;
	position: absolute;
	top: 65px;
	margin: 0px;
	padding: 20px 5px 5px 5px;
}
.menu li {
	/*width: 180px;*/
	font-family: arial, sans-serif;
	font-size: 15px;
	line-height: 20px;
	list-style-type: none;
	margin: 5px 0px 4px 0px;
	padding: 2px 0px 2px 70px;
	border-radius: 8px;
	background-position: 15px center;
}
.menu li:hover {
	text-shadow: #000 1px 2px 2px;
}
.menu li:hover a {
	color: #00b6ff;
}
.menu li a {
	color: #eee;
}
.menu li a:hover {
	color: #00b6ff;
}
.menu li.selected a {
	color: #00b6ff;
	font-weight: bold;
	text-shadow: #000 1px 1px 3px;
}
#main {
	position: absolute;
	top: 0px;
	left: 0px;
	padding-top: 1px;
	background: url("/css/app/himnario/img/background.jpg") no-repeat scroll 0% 0% / 100% 100%;
	width: 100%;
	height: 100%;
}

#app_buttons {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 150px;
	z-index: 99999999; /*8*/
}
#app_buttons .button {
	display: block;
	width: 26px;
	height: 26px;
	margin-left: 8px;
	float: right;
}
#app_buttons .button span {
	display: none;
}

#title {  
  	background-image: url(img/title.png);
  	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: relative;
	padding-top: 1px;
	margin: 2% auto 2%;
	height: 17%;
	max-height: 140px;
}
#title h1 {
  display: none;
}

#searchbox {
  z-index: 100;
  position: absolute;
  padding-top: 1px;
  width: 96%;
  height: 69px;
  max-width: 758px;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 35%;
}

#search_results {
	z-index: 10;
	position: absolute;
	top: 76px;
	left: 64px;
	display: none;
	background-image: url(img/search_results_background.png);
	background-repeat: repeat;
	margin: 0px;
	padding: 5px 3px 5px 5px;
	width: calc(100% - 80px);
	max-width: 510px;
/*	clear: both;*/
	border-top: none;
	border-radius: 8px;
	box-shadow: #000 0px 3px 9px;
}
#search_results .viewport { 
	max-width: 500px; 
	width: calc(100% - 10px);
	height: 200px; 
	overflow: hidden; 
	position: relative; 
}
#search_results .overview { 
	list-style: none; 
	position: absolute; 
	left: 0; 
	top: 0; 
	width: 100%;
	margin: 0;
	padding: 0;
}
#search_results .thumb .end,
#search_results .thumb { 
	background-color: #1b5471; 
}
#search_results .scrollbar { 
	position: relative; 
	float: right; 
	width: 8px; 
}
#search_results .track { 
/*	background-color: #D8EEFD; */
	background-repeat: repeat;
	background-image: url(img/search_results_background.png);
	height: 100%; 
	width: 5px; 
	position: relative; 
	padding: 0 1px; 
	border-radius: 5px;
}
#search_results .thumb { 
	height: 20px; 
	width: 5px; 
	cursor: pointer; 
	overflow: hidden; 
	position: 
	absolute; 
	top: 0; 
	border-radius: 4px;
}
#search_results .thumb .end { 
	overflow: hidden; 
	height: 5px; 
	width: 5px;
	border-radius: 4px;
}
#search_results .disable{ 
	display: none;
}

#search_results .close {
/*	display: none;*/
  position: absolute;
  width: 30px;
  height: 30px;
  bottom: -20px;
  right: -15px;
	background-image: url(img/remove_item.png);
	background-position: left top;
	z-index: 100;
}
#search_results .item {
	position: relative;
	display: block;
	font-size: 18px;
	list-style: none;
	padding: 0px 5px;
	border-radius: 12px;
	background-repeat: repeat;
}
#search_results .item.selected  {
	box-shadow: inset #004c77 0px 0px 3px;
	background-color: #49c1ff;
}
#search_results .item:hover {
	background-color: #49c1ff;
}
#search_results .item input {
	outline: none;
	background-color: transparent;
	margin-right: 10px;
}
#search_results .item .to_playlist {
	position: absolute;
	display: none;
	right: 5px;
	top: 5px;
	width: 16px;
	height: 16px;
	background-image: url(img/add_to_playlist_small.png);
}
#search_results .item .to_playlist:hover {
	background-image: url(img/add_to_playlist_small_hover.png);
}

#search_results .item .to_playlist span {
	display: none;
}

#search_results .item .highlight {
	background-color: #bfdfff;
}

#searchbox .inner {
  z-index: 99999; /*6*/
  background-image: url(img/search_background.png);
  width: 77%;
  height: 69px;
  padding: 3px 5px 7px 5px;
  max-width: 758px;
}
#theme {
	float: left;
	display: block;
	width: 58px;
	height: 69px;
	background-position: center center;
	
}
#theme_menu {
	left: 0px;
	width: 267px;
	height: 344px;
  background-image: url(img/menu_theme.png);
}
#finder {
	position: relative;
	float: left;
	display: block;
	width: calc(100% - 65px);
	max-width: 519px;
	height: 63px;
	padding: 3px;
}
#finder input {
	font-family: "FontanaTitulo", sans-serif;
	margin: 10px 5px !important;
	padding: 1px 5px !important;
	background-color: transparent;
	border: none;
	font-size: 26px;
	text-align: center;
/*	text-shadow: #555 0px 0px 2px;*/
}
#finder input:focus {
	outline: none;
}
#finder #number_tbx {
	float: left;
	width: 50px; /* + 10 from padding */
	height: 45px; 
}
#finder #title_tbx {
	float: left;
	width: calc(100% - 90px);
	max-width: 428px;
	height: 45px; 
}
#finder .clear_find {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 25px;
	left: 490px;
	background-image: url(img/clear_field.png);
}
#finder .clear_find:hover {
	background-image: url(img/clear_field_hover.png);
}

#mode_and_play {
	position: relative;
	background-image: url(img/search_background_play.png);
	background-position: top right;
	position: absolute;
	top: 1px;
	right: 46px; /* -10 */
	width: 121px; /* 179 */
	height: 79px;
}

#mode {
	position: absolute;
	top: 1px;
	right: 62px;
	display: block;
	width: 58px;
	height: 69px;
	background-position: center center;
}
#mode_menu {
	right: -90px;
	width: 207px;
	height: 134px;
  background-image: url(img/menu_mode.png);
}
#play {
	position: absolute;
	top: 1px;
	right: 4px;
	display: block;
	width: 58px;
	height: 69px;
	background-image: url(img/go_to.png);
	background-position: center center;
}
#play:hover {
	background-image: url(img/go_to_hover.png);
}
#play.disabled, #play.disabled:hover {
	background-image: url(img/go_to_disabled.png);
	cursor: default;
}

#add_to_playlist {
	position: absolute;
	top: 3px;
	left: 0px;
	display: block;
	width: 58px;
	height: 69px;
	background-image: url(img/add_to_playlist.png);
	background-position: center center;
}
#add_to_playlist:hover {
	background-image: url(img/add_to_playlist_hover.png);
}

#logos {	
	background-image: url(img/logos.png);
	position: absolute;
	bottom: 30px;
	width: 100%;
	height: 10%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	max-height: 90px;
}
#playlist {
	z-index: 10;
  position: absolute;
  bottom: 0px;
	width: 100%;
	height: 25px;
	padding: 0px;
	background-image: url(img/playlist_background.png);
	background-repeat: repeat;
}

#playlist .move_button {
	display: block;
	position: absolute;
	top: 10px;
	width: 40px;
	height: 165px;
	background-repeat: no-repeat;
	background-position: center top;
	z-index: 99999;
}

#playlist .move_button.left {
	background-image: url(img/playlist_move_left.png);
	left: 0px;
}
#playlist .move_button.left:hover {
	background-image: url(img/playlist_move_left_hover.png);
}
#playlist .move_button.left.disabled {
	background-image: url(img/playlist_move_left_disabled.png);
	cursor: default;
}
#playlist .move_button.right {
	background-image: url(img/playlist_move_right.png);
	right: 0px;
}
#playlist .move_button.right:hover {
	background-image: url(img/playlist_move_right_hover.png);
}
#playlist .move_button.right.disabled {
	background-image: url(img/playlist_move_right_disabled.png);
	cursor: default;
}
#playlist .outer {
	position: absolute;
	left: 0px;
	top: 0px;
	overflow: hidden;
	width: 100%;
	height: 25px;
	z-index: 999;
}
#playlist .inner {
	position: absolute;
	top: 20px;
	left: 25px;
	height: 140px;
	width: 999999px;
	white-space: nowrap;
}
#playlist .actions {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 33px;
	padding-top: 10px;
	background-image: url(img/playlist_bar_background.png);
	background-repeat: repeat-x;
	z-index: 1010;
}
#playlist .actions .title {
	float: left;
	color: #004059;
	margin: 6px 0px 0px 10px;
	padding: 0px;
	font-size: 17px;
	text-shadow: black 0px 0px 3px;
}
#playlist .actions .button {
	float: right;
	display: block;
	position: relative;
	width: 25px;
	height: 25px;
	margin: 4px 25px 0px 0px;
	background-position: center center;
}
#playlist .actions .button span {
	display: block;
	position: absolute;
	top: -30px;
	left: -50%;
	padding: 3px 4px;
	font-size: 13px;
	color: #839cc0;
	text-align: center;
	background-image: url(img/playlist_item_background.png);
	background-repeat: repeat;
	border-width: 1px;
	border-style: solid;
	border-color: #687c99;
	border-radius: 3px;
	box-shadow: #000 0px 0px 3px;
	white-space: nowrap;
}
#playlist .item, #playlist .placeholder {
	white-space: normal;
	float: left;
	position: relative;
	background-repeat: repeat;
	border-radius: 12px;
	width: 110px;
	height: 90px;
	margin-left: 15px;
	padding: 10px;
}	
#playlist .placeholder {
	background-color: transparent;
	border: #0083c4 1px dashed;
}
#playlist .item {
	background-color: #062431;
	border: #062431 2px solid;
}
#playlist .item.current {
	background-color: #004159;
	border: #0083c4 2px solid;
	box-shadow: #000 1px 2px 2px, inset #000 0px 0px 2px;
}
#playlist .item.hover {
	background-color: #005270;
	border: #009be8 2px solid;
	box-shadow: #000 1px 2px 2px, inset #000 0px 0px 2px;
}
#playlist .item .playme {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 130px;
	height: 105px;
	background-image: url(img/item_playme.png);
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 10;
}
#playlist .item .mode {
	display: block;
  position: absolute;
	top: 10px;
	left: 10px;
	width: 20px;
	height: 15px;
}
#playlist .item .mode.lyrics {
	background-image: url(img/ico_mode_lyrics_small.png);
}
#playlist .item.hover .mode.lyrics {
	background-image: url(img/ico_mode_lyrics_small_hover.png);
}
#playlist .item .mode.instrumental {
	background-image: url(img/ico_mode_instrumental_small.png);
}
#playlist .item.hover .mode.instrumental {
	background-image: url(img/ico_mode_instrumental_small_hover.png);
}
#playlist .item .mode.voices {
	background-image: url(img/ico_mode_voices_small.png);
}
#playlist .item.hover .mode.voices {
	background-image: url(img/ico_mode_voices_small_hover.png);
}

#playlist .item .remove {
	display: none;
  position: absolute;
  width: 30px;
  height: 30px;
  top: -10px;
  right: -10px;
	background-image: url(img/remove_item.png);
	background-position: left top;
	z-index: 100;
}
#playlist .item .number, #playlist .item .title {
  display: block;
  text-align: center;
	text-shadow: black 0px 2px 3px;
}
#playlist .item .number {
	font-family: "FontanaTitulo", sans-serif;
	color: #a1c5f1;
  font-weight: normal;
  font-size: 50px;
	line-height: 50px;
}
#playlist .item .title {
	margin-top: 10px;
  font-size: 15px;
	line-height: 15px;
	color: #008ac1;
	font-style: normal;
  font-weight: bold;
}


/* Playing Mode */
#playing, #pause {
	z-index: 999; /*3*/
	position: absolute;
	background-color: #111;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
#pause #pause_spin {
	position: absolute;
	background-image: url(img/logo_iasd.png);
	background-position: center center;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 40px;
	padding-top: 160px;
	margin-left: -100px;
	margin-top: -100px;
	text-align: center;
	color: #fff;
/*	font-weight: bold;*/
	font-size: 22px;
/*	background-color: #444;*/
	border-radius: 10px;
}
#playing {
	z-index: 995; /*3*/
}
#playing #lyrics {
	position: absolute;
	background-color: #000;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
#playing .controls {
	position: absolute;
	bottom: 20px;
	left: 50%;
}
#playing .controls .button {
	position: absolute;
	display: block;
	background-repeat: no-repeat;
	height: 45px;
	bottom: 0px;
}
#playing .controls .button span {
	display: none;
}
#playing .controls .prev {
	width: 31px;
	left: 0px;
	background-image: url(img/playing_prev.png);
}
#playing .controls .prev:hover {
	background-image: url(img/playing_prev_hover.png);
}
#playing .controls .next {
	width: 31px;
	left: 50px;
	background-image: url(img/playing_next.png);
}	
#playing .controls .next:hover {
	background-image: url(img/playing_next_hover.png);
}
#playing .controls .home {
	width: 42px;
	left: -110px;
	background-image: url(img/playing_home.png);
}	
#playing .controls .home:hover {
	background-image: url(img/playing_home_hover.png);
}

.help_mode {
	position: absolute;
}
.help_mode.find_title {
	background-image: url(img/help_find_title.png);
	width: 267px;
	height: 42px;
	top: -45px;
	left: 30px;
}
.help_mode.find_number {
	background-image: url(img/help_find_number.png);
	width: 314px;
	height: 45px;
	top: 75px;
	left: 30px;
}

.help_mode.themes {
	background-image: url(img/help_themes.png);
	width: 188px;
	height: 125px;
	top: -59px;
	left: -120px;
}
.help_mode.modes {
	background-image: url(img/help_modes.png);
	width: 229px;
	height: 109px;
	top: -109px;
	right: -100px;
}
.help_mode.do_play {
	background-image: url(img/help_do_play.png);
	width: 228px;
	height: 98px;
	top: 33px;
	right: -140px;
}
.help_mode.add_to_playlist {
	background-image: url(img/help_add_to_playlist.png);
	width: 253px;
	height: 129px;
	top: 75px;
	left: -220px;
}
.help_mode.playlist {
	background-image: url(img/help_playlist.png);
	width: 487px;
	height: 90px;
	top: -120px;
	left: 30px;
}

.help_mode.playlist_icons {
	background-image: url(img/help_playlist_icons.png);
	width: 244px;
	height: 277px;
	top: -277px;
	right: 0px;
}

#info_credits {
	color: #222;
	background-color: #ddd;
}

#info_credits .credits_inner div {
	padding-top: 5px;
}
#info_credits h3, #info_credits h4 {
	color: #555;
}
#info_credits h3, #info_credits h4, #info_credits p, #info_credits li {
	font-family: "Fontana", sans-serif;
	text-shadow: white 0px 1px 1px;
}

/** Oculta flechas de input number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}