@import url('./roboto.css');

*{padding: 0px; border: 0px; outline: 0px; font-family: roboto, verdana; text-decoration:none; /*transition: 1s;*/}

body{background: linear-gradient(#320820,#b20066); background-attachment: fixed; color: #fff; overflow-x: hidden; margin: 0px !important;}
a{color: var(--amarelo); cursor: pointer;}
br {margin-top: 10px;}
h1{display:block; margin: 0px;}
h2{margin: 0px;}
hr{border-bottom: 1px dotted #fff; margin: 10px auto;}
audio{width: 100%;}

input[type="text"]{min-width: 30%; padding: 8px 3px; border-radius: 3px; margin-bottom: 5px;}
input[type="number"]{min-width: 30%; padding: 8px 3px; border-radius: 3px; margin-bottom: 5px;}
input[type="password"]{min-width: 30%; padding: 8px 3px; border-radius: 3px; margin-bottom: 5px;}
input[type="submit"]{padding: 8px 3px; border-radius: 3px; margin-bottom: 5px;}
input[type="button"]{padding: 8px 3px; border-radius: 3px; margin-bottom: 5px;}

::-webkit-input-placeholder {color: var(--rosa); letter-spacing: 0.5px; text-transform: uppercase;}
:-ms-input-placeholder {color: var(--rosa); letter-spacing: 0.5px; text-transform: uppercase;}
:-moz-placeholder{color: var(--rosa); letter-spacing: 0.5px; text-transform: uppercase;}
::-moz-placeholder{color: var(--rosa); letter-spacing: 0.5px; text-transform: uppercase;}

#dotAbertura{position: fixed; left: 0px; top: 0px; padding-top: 34px; width: 100%; height: 100%; background: url("imgSite/logoDotSessionsAbertura.png"), rgba(0, 0, 0, 0.90)/**/; background-repeat: no-repeat; background-position: center; background-size: 200px; z-index:800;}

.clear{clear: both;}

.msgBox{background: var(--branco); padding: 3px; margin-top: 5px; border-radius: 8px;}
.txtAmarelo{color: var(--amarelo);}
.txtTresPontos{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.tamanhoHome{width: 1000px;}

.conteiner{position: relative; margin: 0px auto; margin-top: 10px;}

.topAcesso{position: relative; margin: 0 auto; background: var(--gray-90); height: 30px;}
		.topAcessoBt{height: 24px; width: 100px; margin: 0 auto; padding-top: 6px;}

.topBar{position: fixed; width: 100%; margin-bottom: 20px; left: 0px; top: 0px; height: 3px; background: linear-gradient(90deg, #e64b4b, #f3795e 18.75%, #e4bc5c 35.94%, #39d68d 52.6%, #37b1e4 68.23%, #874fc6 84.38%, #f05576); z-index:999;}

.topoAssinatura{position: relative; margin: 0 auto; padding: 10px 0px; padding-top: 30px; width: 1000px; display: flex; justify-content: center; border-bottom: 3px solid #fff;}
	.topoAssinatura img{width: 300px; margin-bottom: -4px;}

.topoDotLovers{position: relative; margin: 0 auto;}
	.topoDotLoversImg{position: absolute; left: 0px; bottom: 5px; width: 120px;}
		.topoDotLoversImg img{margin-bottom: -5px;}
		.topoDotLoversColor{animation: animaDotLovers 5s infinite; cursor: pointer;}
		@keyframes animaDotLovers {
			0%, 100%  {color: var(--rosa);}
			25% {color: #fff;}
			50% {color: var(--rosa)}
			75% {color: #fff;}
		}
		.inputDotlovers{text-align: center; letter-spacing: 0.3px; font-weight: 500; font-size: 14px;}
		.btCadastro{background: var(--rosa); color: #fff; padding: 10px !important; margin-top: 10px; cursor: pointer;}
		.btCadastro:active{background: #fff; color: var(--rosa);}

.topoMidias{position: relative; margin: 0 auto;}
	.topoMidiasImg{position: absolute; right: 0px; bottom: 5px; width: 55px;}
		.topoMidiasImg img{margin-left: 5px;}

#topBarPlay{transition: height 200ms;}
#imgCapa{border-radius: 10%; border: 1x solid #fff;}

	#dotmag{position: relative; z-index:5;}

	#modal{display: none; position: fixed; left: 0px; top: 0px; padding-top: 34px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.98); z-index:800;}
		#modalContent{display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; padding-top: 10px; margin: 0px auto; z-index:900; background: rgba(0, 0, 0, 0.9);}
		.close{position: absolute; right: 5px; top: 5px; width: 12px; padding: 5px; padding-left: 9px; font-size: 12px; background: #fff; color: #ff0000; border-radius: 50%; overflow: hidden; cursor: pointer; z-index:7;}

		#cabecalho{position: relative; width: 1000px; height: 100px; margin: 0px auto; text-align: center; color: #fff;}

		#cabecalho img{width: 90px; padding-top: 10px;}

			.menuUsuario{background: #000; padding: 5px 0px;}
				.menuUsuarioBox{position: relative; margin: 0px auto; font-size: 13px; font-weight: 500;}
					.menuUsuarioBox div{background: var(--rosa); border-radius: 3px; padding:3px 8px;}

			.menuBox{}
				.menuTopo{position: absolute; top: 63px; left: 180px; display: flex; gap: 30px; justify-content: left;}
					.itemMenu{display: flex; align-items: center; justify-content: center; padding: 10px; 0px; text-align: center; color: #fff !important; cursor: pointer;}
					.conta{background: rgba(0,0,0,0.5); color: #fff !important; border: 1px solid #fff; border-radius: 8px;}

		#servicos{margin: 0 auto;}
			.txtServicosCapaTiulo{padding: 5px; margin-top: 30px; width: 100%; height: 30px; font-size: 25px; color: #fff; border-bottom: 1px solid #fff; overflow: hidden; margin-bottom: 20px;}
			.servicosFlexBox{display: flex; gap: 10px; justify-content: center; width: 1010px; cursor: pointer;}
				.btServicos{width: 300px; padding: 10px; background: var(--branco); border-radius: 3px; color: var(--preto);}
					.imgServico{width: 300px; height: 125px; margin-bottom: 5px;}
					.servicoTitulo{font-size: 16px;}
					.servicoChamada{}

		#destaque{position: relative; width: 700px; height: 390px; overflow: hidden;}
			.imgDestaque{width:700px; height: 350px; margin: 0px auto;}
				.imgDestaque img{width: 700px; height: 350px;}

			.txtDestaqueTiulo{position: absolute; display: flex; justify-content: center; align-items: center; bottom: -40px; padding: 5px; background: #ff0376; width: 690px; height: 30px; font-size: 25px; text-align: center; color: #fff; border-top: 3px solid #fff; border-radius: 0 0 5px 5px; overflow: hidden;}

			.bx-viewport{height: 390px !important;}
			.bx-wrapper{margin-bottom: 0px;}
			.bx-wrapper .bx-pager,.bx-wrapper .bx-controls-auto{width: 30%;}
			.bx-pager{position: absolute; top: 10px; left: 10px; height: 30px; padding-top: 0px !important; text-align: left !important;}
			.bx-wrapper .bx-pager.bx-default-pager a{border-radius: 50% !important;}
			.active{background: var(--rosa) !important; width: 15px !important; height: 15px !important; border-radius: 50% !important;}


		#agendaCapa{position: absolute; right: 0px; top: 0px; width: 270px; height: 350px;}
			.txtAgendaCapaTiulo{padding: 5px; width: 260px; height: 30px; font-size: 20px; color: #fff; border-bottom: 1px solid #fff; overflow: hidden;}

			.agendaCapaBtUF{z-index: 1; position:relative; width: 280px; height:auto; overflow: hidden;}
				.agendaCapaUF{width: 280px; padding: 3px 5px; background: #fff; display: none;}
				.agendaCapaUF:first-child{margin-top: 46px;}

			.txtAgendaCapaData{font-size: 14px; margin: 7px 0px; color: var(--amarelo); margin-top: 5px !important;}
			.txtAgendaCapaData:first-child{margin-top: 3px !important;}

			.agendaBox{position: relative; width: 280px; margin-bottom: 10px;}
				.imgAgendaCapa{width: 50px; height: 50px; background-size: cover; background-position: center; background-repeat: no-repeat;}
				.agendaConteudo{position: absolute; width: 220px; right: 0px; top: 0px;}
					.txtAgendaUF{font-size: 16px; color: #fff;}
					.txtAgendaUFAtivo{font-size: 18px; color: #ec008c;}
					.txtAgendaTitulo{font-size: 16px; color: #fff; width: 200px;}
					.txtAgendaLocal{font-size: 12px; color: #666; width: 200px;}
					.txtAgendaEndereco{font-size: 12px; color: #fff; width: 200px;}

					.agendaBoxOpen{background: #7400fb; max-width: 500px; position: relative; margin: 0 auto;}
						.agendaOpenTitulo{background: #1a1c21; color: #fff; text-align: center; padding: 20px 0px; font-size: 22px;}

					.agendaBoxPromoters{display: flex; gap: 20px; justify-content: center; flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: flex-start;}
						.agendaTituloPromoters{width: 100%; font-size: 14px; font-weight: 500;}
							.btAgendaLink{width: 180px; background: #ec008c; border-radius: 3px; color: #fff; padding: 5px 10px; margin-bottom: 5px;}

							.msgPromoter{width: 300px; background: #ec008c; border-radius: 3px; color: #fff; padding: 5px 10px; margin-bottom: 5px;}

					.voucherLista{text-align: center; width: 320px; position: relative; margin: 0 auto;}
						.voucherCampoTexto{width: 300px; padding: 10px; font-size: 24px; border-radius: 5px;}

						.boxValidaVoucher{display: none;}
						.voucherCampoTextoCelular{width: 300px; padding: 10px; font-size: 24px; border-radius: 5px;}
						.voucherBt{width: 100% !important; background: #ec008c; border-radius: 3px; color: #fff; padding: 5px 10px; text-align: left; font-size: 16px;}
						.voucherBtOn{width: 100% !important; background: var(--verde); border-radius: 3px; color: #fff; padding: 5px 10px; text-align: left; font-size: 16px;}

		#podcast{position: relative;}
			.txtPodcastCapaTiulo{position: relative; padding: 5px; margin-top: 30px; width: 990px; height: 33px; font-size: 25px; color: #fff; border-bottom: 1px solid #fff;}

			.podcastBox{display: flex; gap: 20px; justify-content: center; flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: flex-start;}
				.podcastDJ{position: relative; width: 125px; height: 125px; background-size: cover; border-radius: 5px;}
					.podcastInfoCapa{z-index: 1; position: absolute; width: 115px; bottom: 0px; left: 0px; padding: 0px 5px; color:#fff; background: #000000c7;}
						.podcastInfoCapa i{font-size: 10px; position: relative; top: -5px; color: var(--amarelo);}

			#btCarregarPodcast{display: block; margin: 20px auto; padding: 10px 20px; background: #333; color: #fff; cursor: pointer; text-align: center; border: none; border-radius: 5px;}


				#podcastDadosAtista{position: relative; width: 960px; margin: 0 auto; padding: 5px;}
				.areaPodcast{position: relative;}
				.dadosDJ{z-index: 1; position: absolute; top: 46px; left: 0px; width: 980px; height: 98%; padding: 10px; background: rgba(0,0,0,0.9); display: none;}

					.btFecharCapaPodcast{position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; background-image: url('imgSite/btFechar.png');  background-size: cover; cursor: pointer;}

					.dadosDJImg{float: left; margin-right: 10px; border: 1px solid #fff;}

					.podcastAgenciado{color: #13d908; font-size: 12px;}
					.podcastNaoAgenciado{color: #e10106; font-size: 12px;}

					.podcastStar{font-size: 23px; margin-right: 5px;}

					.podcastTitulo1{color: #fff; font-size: 24px;}
					.podcastTitulo2{color: var(--amarelo); font-size: 14px;}
					.podcastTitulo3{color: var(--amarelo); font-size: 14px; clear: both;}

					.podcastBtContato{position: absolute; top: 90px; left: 220px; font-size: 50px;}

					.podcastPlayer{position: relative; margin-top: 10px; width: 100%; height:55px; display: none; border-radius: 3px;}
						.pdControlsDownload{position: relative; padding:5px 6px; margin: 5px 0px; float: left; font-size: 14px;}
						.pdControlsDownload:first-child{padding:0px;}

					#podcastFotosBox{text-align: center;}
					#podcastFotosBox img{width: 150px;}

			#agendamento{position: relative; width: 981px;  margin: 0 auto; overflow: hidden; text-align: center; border-top: 1px solid #fff;}
				#agendamento select{border-radius: 8px; padding: 5px; width: 134px; text-align: center; font-size: 18px;}
				#agendamento input{border-radius: 8px; padding: 5px; width: 290px; font-size: 18px; text-align: center;}
				#agendamento input[type="time"]{width: 122px;}
				#agendamento h1{margin: 10px 0;}
				#agendamento .info{color: var(--amarelo); font-size: 13px; font-weight: 600 !important; letter-spacing: 1px; padding: 8px;}

				#agendamentoRegras{max-width: 300px; margin: 0 auto; display: none; text-align: left;}
				#cena1{max-width: 300px; margin: 0 auto;}
				#cena2{max-width: 300px; display: none;}


			#rodape{width: 981px; padding: 20px 10px; margin-top: 5px; position: relative; height: 100px; font-size: 12px; border-top: 1px solid #fff;}

		.bx-wrapper{background: transparent !important;}

		/* VOUCHER */
		.inputBoxVoucher{position: relative; width: 300px; padding:3px; margin: 0 auto; margin-bottom: 20px; border: 1px dotted #fff;}
		.inputBoxVoucher input{width: 100%;font-size: 24px; background: transparent; color: #fff;}
			.inputBoxLabelVoucher{position: absolute; left: 0px; top: -15px; font-size: 10px; color: var(--amarelo);}

		/* ADM */
		.admTableLoginForm{width: 240px; position:relative; margin: 0px auto; border-radius: 3px; background: rgba(0,0,0,0.5); /*background: linear-gradient(0deg, rgba(0,50,101,0) 0%, rgba(0,0,0,0.38139005602240894) 100%);*/ }
		.admTableLoginForm td {text-align: center;}
		.admTableLoginForm td input[type="text"]{width: 95%; padding: 5px 3px; border-radius: 3px; margin-bottom: 5px;}
		.admTableLoginForm td input[type="password"]{width: 95%; padding: 5px 3px; border-radius: 3px; margin-bottom: 5px;}
		.admTableLoginForm td input[type="submit"]{width: 30%; padding: 5px 3px; border-radius: 3px; margin-bottom: 5px;}

		.admTableConsulta{width: 80%; position:relative; margin: 0px auto; border-radius: 3px; background: rgb(0,50,101); background: rgba(0,0,0,0.5); /*background: linear-gradient(0deg, rgba(0,50,101,0) 0%, rgba(0,0,0,0.38139005602240894) 100%);*/}
			.admTableConsulta tr:hover{background: #000;}
			.admTableConsulta th{text-align: center; border-bottom: double #fff; padding: 5px 0px; font-size: 12px;}
			.admTableConsulta td{padding: 5px; border-right: 1px dotted #fff; border-bottom: 1px dotted #fff;}
			.admTableConsulta td:last-child{text-align: center; padding: 3px; border-right: 0;}
			.admTableConsulta td i{font-size: 12px;}
			.admTableConsulta td a{font-size: 12px;}

		.admTableForm{width: 610px; position:relative; margin: 0px auto; border-radius: 3px; background: rgba(0,0,0,0.5); /*background: linear-gradient(0deg, rgba(0,50,101,0) 0%, rgba(0,0,0,0.38139005602240894) 100%);*/ }
			.admTableForm th{padding: 5px; text-align: left; font-size: 13px;}
			.admTableForm td{padding: 5px;}
			.admTableForm td select{width: 97%; padding: 5px 3px; border-radius: 3px;}
			.admTableForm td textarea{padding: 5px 3px; border-radius: 3px;}
			.admTableForm td input[type="text"]{width: 95%; padding: 5px 3px; border-radius: 3px;}
			.admTableForm td input[type="number"]{width: 95%; padding: 5px 3px; border-radius: 3px;}
			.admTableForm td input[type="password"]{width: 95%; padding: 5px 3px; border-radius: 3px;}
			.admTableForm td input[type="file"]{width: 98%; padding: 5px 3px; border-radius: 3px;}
			.admTableForm td input[type="datetime-local"]{width: 95%; padding: 5px 3px; border-radius: 3px;}
			.admTableForm td input[type="submit"]{padding: 5px 10px; border-radius: 3px; cursor: pointer;}
			.comAgencia{color: #fff !important;}
			.semAgencia{color: #999 !important;}
			.online{color: var(--verde); font-size: 20px;}
			.offline{color: var(--vermelho); font-size: 20px;}
			.btAddDireita{text-align: right !important;}

		#admPodcastAddSet{display: flex; gap: 30px; justify-content: left;}

		#dtPromoter{display: none; position: fixed; left: 0px; top: 0px; padding-top: 34px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.90); z-index:800;}
		#dtPromoterContent{position: relative; width: 200px; height: 100%; padding-top: 10px; margin: 0px auto; z-index:900; text-align: center;}
			.dtInput{width: 190px; padding: 5px 3px; margin-bottom: 5px; border-radius: 3px;}

		/* CARRINHO */
		#carrinho{position: fixed; bottom: 0px; width: 100%; min-height: 80px; margin: 0 auto; background: rgba(0,0,0,0.95); z-index: 10; border-top: 1px solid #555;}
			#carrinhoCorpo{position: relative; width: 300px; margin: 0 auto; padding-top: 30px; background: rgba(0,0,0,0.95); z-index: 11;}
				.pedidoProduto{display: none;}
					.pedidoProduto td{font-size: 14px; line-height: 25px; border-top: 1px dotted #333;}

			.listarCarrinho{position: absolute; right: 0px; top: 5px; color: var(--amarelo) !important;}
			.listarCarrinho a{color: var(--amarelo) !important; font-weight: 500;}

			.zerarCarrinho{position: absolute; left: 0px; top: 5px; color: var(--vermelho) !important;}
			.zerarCarrinho a{color: var(--vermelho) !important; font-weight: 500;}

			.fazerPedido{display: none; text-align: center; padding: 10px; margin-bottom: 30px; background: var(--verde); border-radius: 3px; font-weight: 500; color: #000 !important;}

			.totalCarrinho{border-top: 1px solid #666; padding: 3px 0px;}

		#clienteMenu{position: relative; margin: 0 auto; margin-top: 5px; margin-bottom: 0px; max-width: 300px; display: flex; gap: 20px; justify-content: center; flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: flex-start;}
			.agendaNome{width: (100%+100px); font-size: 20px; text-align: center; font-weight: 500;}
			.nomeCliente{font-size: 14px; color: var(--amarelo);}
				.pontoVenda{width: 100%; font-size: 18px; text-align: center; font-weight: 400; margin-top: 20px; padding: 5px 0; border-top: double #fff; border-bottom: double #fff; cursor: pointer;}
					.cardapio{width: 100%; font-size: 16px; text-align: left; font-weight: 300; border-bottom: 1px solid #fff; margin: 5px 0; text-transform: uppercase; cursor: pointer;}
						.produto{display: none; position: relative; width:125px; height: 70px; padding: 5px; overflow: hidden; background: var(--gray-00); color: #000; font-weight: 600; border-radius: 5px; text-align: center; text-transform: uppercase; font-size: 12px; cursor: pointer;}
							.produtoNome{position: absolute; top: 20%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%);}
							.produtoValor{position: absolute; left: -5px; bottom: -12px; width: 140px; padding: 3px 0; text-align: center; background: var(--gray-20);}

		.cardapioTipoPagamento{position: absolute; top: -189px; left: 0px; width: 100%; display:none;}
			.cardapioTipoPagamentoBt{padding: 10px 0; margin-bottom: 1px; text-align: center; background: var(--vermelho); color: #fff; border-radius: 3px;}
			.cardapioTipoPagamentoBt:active{background: var(--verde); color: #000;}
			.cardapioTipoPagamentoBt:hover{background: var(--verde); color: #000;}
		.fecharTipoPagamento{margin-top: 5px; text-align: center; width: 100%;}

		#tempoFesta{color: var(--amarelo); font-size: 14px;}
		#tempoFinalFesta{display: none;}

		.modalCliente{display: none; position: fixed; margin:0 auto; margin-top: -20px; bottom: 0px; width: 360px; height: 1000px; background: rgba(0,0,0,0.70); z-index: 5;}

		#pedidoAberto{position: relative; background: var(--rosa); width: 300px; margin: 0px auto; padding: 8px; border-radius: 5px;}
			#pedidoAberto td{padding: 5px 0px;}



.textShadow{text-shadow: -1px 0 #ec008c, 0 1px #ec008c, 1px 0 #ec008c, 0 -1px #ec008c;}
.filter8{-webkit-filter: url(#svg-blur); filter: url(#svg-blur);}
.shadow{box-shadow: 2px 6px 20px 3px #000000; -webkit-box-shadow: 2px 6px 20px 3px #000000;}

.dots{position: fixed; top: 0px; left: 0px; width:100%; height: 100%; background-image: url('imgSite/bg-dots.png?a'); background-position: center; z-index:4; box-shadow: 0px 5px 8px -3px #000 inset;}
.dotscolor{animation: bg 20s infinite;}

@keyframes bg {
	0%, 100%  {background: #ec008c;}
	35% {background: #510ca7;}
	65% {background: #1e90ff;}
	80% {background: #5bc3c6;}
}

.fontColor{animation: colorFont 10s infinite;}
@keyframes colorFont {
	0%, 100%  {color: #ec008c;}
	25% {color: #510ca7;}
	50% {color: #5bc3c6;}
	75% {color: #1e90ff;}
}

:root {
	--tamanhoHome: 1000px;
	--branco: #fff;
	--preto: #000;
	--amarelo: #f1ce46;
	--vermelho: #e10106;
	--verde: #13d908;
	--rosa: #ff0376;

	--gray-00: #F5F6F7;
	--gray-05: #F2F3F5;
	--gray-10: #EBEDF0;
	--gray-20: #DADDE1;
	--gray-25: #CCD0D5;
	--gray-30: #BEC3C9;
	--gray-45: #8D949E;
	--gray-70: #606770;
	--gray-80: #444950;
	--gray-90: #303338;
}