@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{ margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline }
select, input, textarea { resize:none; -webkit-appearance:none; border-radius:0 }
* { outline:none; font-family:'Roboto Condensed', sans-serif }
*:hover { transition:all 0.7s ease }
textarea { overflow:auto }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }
body { line-height:1; overflow-x:hidden }
html { overflow-x:hidden }
ol, ul { list-style:none }
blockquote, q { quotes:none }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none }
.clear { clear:both; font-size:1px; height:1px; line-height:1px; display:block }
.none { display:none !important }
.left { float:left }
.right { float:right }
.centro { text-align:center !important }
.esquerda { text-align:left !important }
.mr0 { margin-right:0 !important }
.mr10 { margin-right:10px !important }
.mr20 { margin-right:20px !important }
.mt20 { margin-top:20px !important }
.mt28 { margin-top:28px !important }
.mt0 { margin-top:0 !important }
.borderno { border:none !important }
.hidden { display:none; visibility:hidden }
.msg_erro { color:#5A1F83; font-size:13px; margin:10px }
.capitalize { text-transform:capitalize !important }
.maiusculo { text-transform:uppercase !important }

.f_data { }
.btnCarregando, .ddlCarregando { }
.loading { position:fixed; z-index:99999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.75) }
.cssload-wrap { position:fixed; border:1px solid #CCC; width:270px; height:130px; background-color:#FFF; top:50%; left:50%; opacity:0.9; -moz-opacity:0.9; -khtml-opacity:0.9; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter:alpha(opacity=90); margin:-65px 0 0 -135px; z-index:999; text-align:center }
.cssload-wrap p { display:block; text-align:center; font-size:14px; color:#000; font-weight:600; padding:0 }
.loader { width: 50px; aspect-ratio: 1; display: grid; margin:20px auto }
.loader::before, .loader::after{ content: ""; grid-area: 1/1; border-radius: 50%; 
    background: repeating-conic-gradient(#0000,#5A1F83 1deg 18deg,#0000 20deg 36deg);
    -webkit-mask:repeating-radial-gradient(farthest-side,#5A1F83 0 10%,#0000 0 20%); animation: l10 14s infinite linear }
.loader::after{ -webkit-mask:repeating-radial-gradient(farthest-side,#0000 0 10%,#5A1F83 0 20%); animation-direction: reverse }
@keyframes l10 { 100% {transform:rotate(.5turn)} }


.select { position:relative; display:block; border:1px solid #999; height:34px; vertical-align:middle; margin-bottom:20px }
.select select { cursor:pointer; width:100%; background:none; border:1px solid transparent; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; outline:none; 
                    box-sizing:border-box; appearance:none; -webkit-appearance:none; color:#000; padding:0 5px; background-color:#FFF; height:32px; line-height:32px; font-size:16px }
.select::after { content:""; position:absolute; width:12px; height:7px; top:13px; right:10px; margin-top:0; background:url("../imagens/arrow-select.svg") no-repeat; background-size:9px; z-index:2; pointer-events:none }
.select option { font-weight:normal }
x:-o-prefocus, .select::after { display:none }
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) { .select select::-ms-expand { display:none } .select select:focus::-ms-value { background:transparent; color:#000 } }
@-moz-document url-prefix() { .select { overflow:hidden }  .select select { width:100%; width:-moz-calc(100% + 4em); width:calc(100% + em) } }
@media screen and (-webkit-min-device-pixel-ratio:0) { .select { font-size:1px } }
.select select:-moz-focusring { color:transparent; text-shadow:0 0 0 #000 }

.checkbox { margin:28px 0 20px 0; text-align:left }
.checkbox input[type="radio"], .checkbox input[type="checkbox"] { display:none }
.checkbox input[type="radio"]+label, .checkbox input[type="checkbox"]+label 
{ background:url("../imagens/checkbox.svg") no-repeat 0 0; cursor:pointer; line-height:18px; margin:0 20px 0 0; padding-left:25px; display:inline-block }
.checkbox input[type="radio"]:checked + label, .checkbox input[type="checkbox"]:checked + label 
{ background:url("../imagens/checkbox.svg") no-repeat 0 -18px }

input[type="button"] { border:none; font-size:16px; background:#3C2181; color:#FFF; padding:0 30px; height:42px; line-height:42px; text-transform:uppercase; cursor:pointer; margin-right:20px }

input[readonly="readonly"], textarea[readonly="readonly"] { background:#F0F0F0; color:#777 }
label, p.label { display:block; text-align:left; font-weight:600; font-size:16px; margin-bottom:5px }
input[type="text"], input[type="tel"], textarea,
input[type="password"] { font-size:16px; border:1px solid #999; padding:7px 5px; height:20px; margin-bottom:20px }
textarea { width:calc(100% - 12px); height:300px }

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

table { border:1px solid #DDD; border-collapse:collapse; border-spacing:0px; background:#FFF; width:100% }
table thead th { border-collapse:collapse; border-top:1px solid #DDD; border-left:1px solid #DDD; background:#000;
font-size:13px; font-weight:600; padding:10px; color:#FFF; display:table-cell; text-align:center; vertical-align:middle; text-transform:uppercase }
table tbody td { border-collapse:collapse; border-bottom:1px solid #DDD; border-left:1px solid #DDD; font-size:13px; 
font-weight:normal; padding:7px 10px; display:table-cell; color:#333; min-height:16px; text-align:center; vertical-align:middle }
table tbody th:last-child, table tbody td:last-child { border-right:1px solid #DDD }
table tr:nth-child(odd) { background:#F3F3F3 }
table tr:nth-child(even) { background:#FFF }
table tbody tr:hover, table tbody tr .hover { background:#F1EFBC }
table tbody td img { width:48px }
table td a.editar, table td a.tocada, table td a.letra, table td a.subir, table td a.descer, table td a.voltar, 
table td input.excluir { filter:invert(13%) sepia(41%) saturate(4617%) hue-rotate(248deg) brightness(95%) contrast(99%); padding:0; background:transparent url("../imagens/editar.svg") no-repeat; background-size:16px; width:16px; height:16px; display:inline-block; margin:0; font-size:1px }
table td input.excluir { background:transparent url("../imagens/excluir.svg") no-repeat; background-size:16px }
table td a.tocada { background:transparent url("../imagens/tocada.svg") no-repeat; background-size:16px }
table td a.letra { background:transparent url("../imagens/letra.svg") no-repeat; background-size:16px }
table td a.subir { background:transparent url("../imagens/subir.svg") no-repeat; background-size:16px }
table td a.descer { background:transparent url("../imagens/subir.svg") no-repeat; transform:rotate(180deg); background-size:16px }
table td a.voltar { background:transparent url("../imagens/voltar.svg") no-repeat; background-size:16px }
table td a.editar:hover, table td a.tocada:hover, table td a.letra:hover,
table td input.excluir:hover, table td a.subir:hover, table td a.descer:hover { opacity:0.5 }
table p { margin:10px 0 }
table .l5p { width:5% !important; min-width:5% }
table .l10p { width:10% !important; min-width:10% }
table .l20 { width:20px !important; min-width:20px }
table .l30 { width:30px !important; min-width:30px }
table .l50 { width:50px !important; min-width:50px }
table tr.tocada_sim td { color:#E10025 }
table tbody td.letra_lista { background:#CCC; font-weight:600; font-size:16px; padding:5px 0 !important }

.alert_message { text-align:center; padding:20px }
.alert_message p { font-size:18px; font-weight:500; padding:20px 0; line-height:24px }
.alert_message input[type="button"] { margin:10px 10px 0 0; outline:none; color:#FFF; cursor:pointer; border:none; background:#5A1F83; vertical-align:middle; font-weight:500; font-size:16px; text-align:center; padding:0 30px }

#menu-adm { margin:40px auto 0 auto; text-align:center }
#menu-adm li { display:inline-block; vertical-align:top; text-align:center; margin:20px; width:128px; height:128px; border:1px solid #666 }
#menu-adm li:hover { border:1px solid #5A1F83 }
#menu-adm li a { display:block; vertical-align:top; width:128px; height:128px; text-decoration:none; color:#666 }
#menu-adm li:hover a { color:#5A1F83 }
#menu-adm li a img { padding:20px 0; margin:0 auto; display:block; height:68px }

.adm h1.tit-adm { text-align:left; float:left; margin:0 }
.adm .left { float:left }
.adm .mr20 { margin-right:20px }
.adm cite { font-size:11px; vertical-align:middle; display:inline-block; font-weight:normal; margin-left:5px }
.adm .criareditar h1 { text-align:left }
.adm .criareditar h2 { text-align:left; font-size:18px; text-transform:uppercase; color:#5A1F83; margin:0 0 20px 0; padding-top:25px; border-top:1px dotted #AAA }
.adm .criareditar div.left { margin-bottom:10px }
.adm .logado { margin:20px auto; padding:0 20px }
.adm #upCardapio h4 { text-align:right; margin:10px 3px 10px 0 }

.cardapio table tbody td a { text-decoration:none; font-size:13px; color:#000 }
.cardapio .busca-home { text-align:center }
.cardapio .busca-home .logos { position:relative; height:205px; text-align:center }
.cardapio .busca-home .logos img.logo1 { position:absolute; zoom:0.8; z-index:1; top:10px; left:50%; margin-left:-115px }
.cardapio .busca-home .logos img.logo2 { position:absolute; zoom:0.8; z-index:3; top:196px; left:50%; margin-left:-124px }

.cardapio .busca-home p { margin:10px 20px; font-size:15px }
.cardapio .busca-home label { text-align:center; margin-top:30px }
.cardapio .busca-home input[type="text"] { width:250px; margin-bottom:10px }
.cardapio .busca-home input[type="button"] { margin:0 0 20px 0; height:36px; line-height:36px; padding:0 15px }
.cardapio .cabecalho-escolha { background:#F0F0F0; padding:15px; position:relative }
.cardapio .cabecalho-escolha input[type="text"] { width:185px; margin-bottom:10px }
.cardapio .cabecalho-escolha #txtNomeSobrenome { text-transform:uppercase }
.cardapio .cabecalho-escolha #txtSenhaCliente { width:90px }
.cardapio .cabecalho-escolha h3 { font-size:20px; color:#5A1F83; margin-bottom:20px }
.cardapio .cabecalho-escolha img { position:absolute; top:0; right:10px; width:48px }
.cardapio .musica { border:1px solid #CCC; padding:15px; margin-top:10px; text-align:left }
.cardapio .musica p { margin:10px 0; font-size:16px }
.cardapio .musica h4 { font-size:14px; color:#999; margin:5px 0 20px 0 }
.cardapio .musica h5 { display:none }

.mensagem { background:#c30000; padding:10px 0; text-align:center; margin:-20px -20px 10px -20px }
.mensagem span { color:#FFF }

.letra { text-align:center; padding:31px 15px 20px 15px }
.letra a { position:absolute; top:0; left:0; text-decoration:none; display:inline-block; height:32px; line-height:32px; font-size:14px; padding:0 15px; background:#3C2181; color:#FFF; text-transform:uppercase }
.letra h1 { font-size:20px }
.letra h2 { font-size:14px; font-weight:normal; font-style:italic; margin:5px 0 20px 0; color:#999 }
.letra p { font-size:18px; line-height:24px }

.animacao { position:relative; width:184px; margin:0 auto;
    &:before, &:after { content:""; position:absolute; z-index:2; margin:7px 0 0 0; border-radius:50%;
    animation-duration:2s; animation-iteration-count:infinite; animation-timing-function:ease-in-out;
    filter:drop-shadow(0 0 184px rgba(#FFF, 0.75)) }
  &:before { width:100%; padding-bottom:100%; box-shadow:inset 0 0 0 30px #F00; display:block; animation-name:pulsA } }
@keyframes pulsA { 0% { box-shadow:inset 0 0 0 30px #FFF; opacity:1 } 50%,100% { box-shadow:inset 0 0 0 0 #FFF; opacity:0 }}


@media screen and (orientation:landscape) {
    .alert_message { width:350px }
    .alert_message input[type="button"]:hover { background:#51B29B }

    .topo { height:30px; background-image:linear-gradient(to right, #FFF, #F2F2F2) }
    .topo ul { float:right; margin:4px 10px 0 0 }
    .topo ul li { display:inline-block; font-size:12px; height:16px; line-height:16px; padding-right:10px; padding-left:20px }
    .topo ul li a { color:#232323; text-decoration:none }
    .topo ul li a:hover { text-decoration:underline }
    .topo ul li#liHome { display:inline-block; border-right:2px solid #666; background:url('../imagens/topo-cardapio.svg') no-repeat; margin-right:10px }
    .topo ul li#liAdm { display:inline-block; border-right:2px solid #666; background:url('../imagens/topo-adm.svg') no-repeat; margin-right:10px }
    .topo ul li#liSair { display:inline-block; border-right:2px solid #666; background:url('../imagens/topo-sair.svg') no-repeat; margin-right:10px }

    .adm .login { margin:20px auto; padding:40px 0 0 40px; max-width:550px; border:1px solid #CCC }
    .adm .criareditar { margin:20px auto; padding:10px 30px 30px 30px; width:780px; border:1px solid #CCC }
    .adm h1 { text-align:center; margin:20px 0; font-size:18px; text-transform:uppercase; color:#3C2181 }
    .adm div.logo { float:left }
    .adm div.logo img { width:204px }    
    .adm div.form { float:left; margin:0 0 0 40px }
    .adm input[type="button"]:hover { background:#5A1F83 }
    .adm .mr20_desktop { margin-right:20px }
    .adm .left_desktop { float:left }
    .adm #txtUsu, .adm #txtSen { width:263px }
    .adm #txtTitulo, .adm #txtArtista, .adm #rblNacional { width:290px }
    .adm #pnlddlGenero { width:134px }
    .adm #lblLetra { margin-top:20px }
    .adm #rblNacional { display:block; margin-right:12px }
    .adm #txtDataEvento, .adm #txtQtdMusicas, .adm #txtIntervaloEscolha { width:170px }
    .adm #pnlCabecalho input[type="button"] { text-transform:uppercase; height:32px; line-height:32px; font-size:11px; padding:0 15px; float:right; margin:0 0 0 10px }

    .cardapio { margin:0 auto; padding:20px }
}



@media screen and (orientation:portrait) {
    .alert_message { width:300px }   
    .checkbox { margin:0 0 20px 0 }

    .topo { height:36px; background-image:linear-gradient(to right, #FFF, #F2F2F2) }
    .topo ul { float:right; margin:0 }
    .topo ul li { display:inline-block; vertical-align:top; margin:13px 10px 0 0; font-size:13px; height:16px; line-height:16px; background-repeat:no-repeat; background-position:left center; padding:0 10px 0 20px; background-size:16px }
    .topo ul li a { color:#232323; text-decoration:none; vertical-align:top }
    .topo ul li#liHome { border-right:2px solid #666; background-image:url('../imagens/topo-cardapio.svg') }
    .topo ul li#liAdm { border-right:2px solid #666; background-image:url('../imagens/topo-adm.svg') }
    .topo ul li#liSair { background-image:url('../imagens/topo-sair.svg') }

    .adm { margin:0 auto; text-align:center; padding:10px }
    .adm .criareditar { margin:0 auto; padding:10px }
    .adm #pnlDeslogado { padding:0 10px }
    .adm div.logo img { width:150px }    
    .adm h1 { text-align:center; margin:20px 0; font-size:22px; text-transform:uppercase; color:#3C2181 }
    .adm .login p { margin-bottom:20px }
    .adm .login label { display:block; font-weight:600; font-size:16px; margin-bottom:5px }
    .adm .login input[type="text"], .adm .login input[type="password"] { font-size:16px; border:1px solid #999; padding:7px 5px; height:20px; width:200px; margin-bottom:20px }
    .adm .login input[type="button"] { border:none; font-size:16px; background:#3C2181; color:#FFF; padding:0 30px; height:42px; margin-top:10px; text-transform:uppercase; cursor:pointer; margin-right:20px }
    .adm .login input[type="button"]:hover { background:#5A1F83 }
    .adm #pnlCabecalho input[type="button"] { float:none; margin:0 7px 20px 7px }
    .adm .logado { margin:0 auto 10px auto; padding:0 }
    .adm .logado table thead th { font-size:11px; font-weight:600; padding:7px 5px }
    .adm .logado table tbody td { font-size:11px; padding:7px }

    .adm .logado table.grande thead th { font-size:16px } 
    .adm .logado table.grande tbody td { font-size:16px; padding:12px 7px }
    .adm .logado table.grande td a.editar, .adm .logado table.grande td a.tocada, 
    .adm .logado table.grande td a.letra, .adm .logado table.grande td a.subir, .adm .logado table.grande td a.descer, 
    .adm .logado table.grande td input.excluir { background-size:22px; width:22px; height:22px }


    .adm #txtUsu, .adm #txtSen { width:calc(100% - 12px) }
    .adm input[type="text"], .adm input[type="tel"] { width:calc(100% - 12px) }
    .adm .select { width:100% }
    .adm #rblNacional, .adm #rblAtiva { display:block; margin:0 0 20px 0; text-align:left }
    .adm #rblNacional label, .adm #rblAtiva label { width:100px }

    .cardapio { margin:0 auto; padding:20px 10px }
    .cardapio table thead th { padding:7px 10px }
    .cardapio table tbody td { padding:12px 10px }
}