@extends('layouts.publicador.default')

@section('content')
    <div class="headerarea"
        style="background-image:url(https://www.assembleia.pr.leg.br/storage/imagens/1Ablbh2RYfgYdhi1DLyVJApU8a7Zk5bCf0CLMTp3.jpg)">
        <h2>Sessões DTI</h2>
        <P>Quem será o próximo?...</P>
    </div>

    <div class="calendario">
        <div id="calendar"><div class="box"><div class="header"><a class="prev" href="https://www.assembleia.pr.leg.br/publicador/sessoesdti?month=12&year=2025">Anterior</a><span class="title">Janeiro/2026</span><a class="next" href="https://www.assembleia.pr.leg.br/publicador/sessoesdti?month=02&year=2026">Próximo</a></div></div><div class="box-content"><ul class="label"><li class="start title title">Seg</li><li class="start title title">Ter</li><li class="start title title">Qua</li><li class="start title title">Qui</li><li class="start title title">Sex</li><li class="start title title">Sab</li><li class="start title title">Dom</li></ul><div class="clear"></div><ul class="dates"><li id="li-" class=" startmask"></li><li id="li-" class=" mask"></li><li id="li-" class=" mask"></li><li id="li-2026-01-01" class=" ">1</li><li id="li-2026-01-02" class=" ">2</li><li id="li-2026-01-03" class=" ">3</li><li id="li-2026-01-04" class=" end">4</li><li id="li-2026-01-05" class=" start">5 <div class="evento 2026-01-05 09-00-00" id="evento10506">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-06" class=" ">6 <div class="evento 2026-01-06 09-00-00" id="evento10507">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-07" class=" ">7 <div class="evento 2026-01-07 09-00-00" id="evento10508">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-08" class=" ">8 <div class="evento 2026-01-08 09-00-00" id="evento10509">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-09" class=" ">9 <div class="evento 2026-01-09 09-00-00" id="evento10510">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-10" class=" ">10</li><li id="li-2026-01-11" class=" end">11</li><li id="li-2026-01-12" class=" start">12 <div class="evento 2026-01-12 09-00-00" id="evento10511">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-13" class=" ">13 <div class="evento 2026-01-13 09-00-00" id="evento10512">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-14" class=" ">14 <div class="evento 2026-01-14 09-00-00" id="evento10513">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-15" class=" ">15 <div class="evento 2026-01-15 09-00-00" id="evento10514">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-16" class=" ">16 <div class="evento 2026-01-16 09-00-00" id="evento10515">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-17" class=" ">17</li><li id="li-2026-01-18" class=" end">18</li><li id="li-2026-01-19" class=" start">19 <div class="evento 2026-01-19 09-00-00" id="evento10516">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div> <div class="evento 2026-01-19 14-00-00" id="evento10923">14:00 | Reunião da Frente Parlamentar da População em Situação de Rua<div class="eventballon"><span class="horarioevento">14:00</span><br>Reunião da Frente Parlamentar da População em Situação de Rua</div></div></li><li id="li-2026-01-20" class=" ">20 <div class="evento 2026-01-20 08-30-00" id="evento10592">08:30 | ComunicaLab Paraná – "Gestão e análise de Tráfego e Audiência: * Analytics 4, News Consumer Insights SEO”<div class="eventballon"><span class="horarioevento">08:30</span><br>ComunicaLab Paraná – "Gestão e análise de Tráfego e Audiência: * Analytics 4, News Consumer Insights SEO”</div></div> <div class="evento 2026-01-20 09-00-00" id="evento10517">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-21" class=" ">21 <div class="evento 2026-01-21 09-00-00" id="evento10518">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-22" class=" ">22 <div class="evento 2026-01-22 09-00-00" id="evento10519">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-23" class=" ">23 <div class="evento 2026-01-23 09-00-00" id="evento10520">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div> <div class="evento 2026-01-23 19-00-00" id="evento10942">19:00 | "Solenidade em Homenagem às Famílias Italianas"<div class="eventballon"><span class="horarioevento">19:00</span><br>"Solenidade em Homenagem às Famílias Italianas"</div></div></li><li id="li-2026-01-24" class=" ">24</li><li id="li-2026-01-25" class=" end">25</li><li id="li-2026-01-26" class=" start">26 <div class="evento 2026-01-26 09-00-00" id="evento10521">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-27" class="todayistheday ">27 <div class="evento 2026-01-27 08-30-00" id="evento10593">08:30 | ComunicaLab Paraná –"Gestão de Receitas com Publicidade Online”<div class="eventballon"><span class="horarioevento">08:30</span><br>ComunicaLab Paraná –"Gestão de Receitas com Publicidade Online”</div></div> <div class="evento 2026-01-27 09-00-00" id="evento10522">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-28" class=" ">28 <div class="evento 2026-01-28 09-00-00" id="evento10523">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-29" class=" ">29 <div class="evento 2026-01-29 09-00-00" id="evento10524">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-30" class=" ">30 <div class="evento 2026-01-30 09-00-00" id="evento10525">09:00 | Exposição: Poty retrata o Paraná<div class="eventballon"><span class="horarioevento">09:00</span><br>Exposição: Poty retrata o Paraná</div></div></li><li id="li-2026-01-31" class=" ">31</li><li id="li-" class=" endmask"></li></ul><div class="clear"></div></div></div>    </div>
    <script>
        $(document).ready(function() {
            $('.evento').click(function() {
                var id = $(this).attr('id');
                var id = id.replace('evento', '');

                //codigo modal

                $.get('https://www.assembleia.pr.leg.br/publicador/configuracoes/getevent', {
                    id: id
                }, function(data) {
                    var informacoes = JSON.parse(data);
                    console.log(informacoes);
                    var modalhtml = '<div class="modalevent">\n';
                    modalhtml += '<div class="bgmodal">\n';
                    modalhtml += '<div class="modalsquare">\n';
                    modalhtml += '<div class="headermodal">\n';
                    modalhtml += '<h2>' + decodeURIComponent(escape(informacoes['evento'])) +
                        '</h2>\n';
                    modalhtml +=
                        '<a href="javascript:void(0)" class="closemodal" id="closemodal">&times;</a>\n';
                    modalhtml += '</div>\n';
                    modalhtml += '<input type="hidden" value="' + informacoes['id'] +
                        '" id="idevento">\n';
                    modalhtml += '<div class="bodymodal">\n';
                    modalhtml += '<div class="informations">\n';
                    modalhtml += '<p><span class="titulo eventodahora">Evento:</span> ' +
                        decodeURIComponent(escape(informacoes['evento'])).replace(/`/g, '"') +
                        '</p>\n';
                    modalhtml += '<p><span class="titulo local">Local:</span> ' +
                        decodeURIComponent(escape(informacoes['local'])) + '</p>\n';
                    if (informacoes['desc'] != '') {
                        modalhtml += '<p><span class="titulo descricao">Descrição:</span> ' +
                            decodeURIComponent(escape(informacoes['desc'])) + '</p>\n';
                    }
                    modalhtml += '</div>\n';
                    modalhtml += '<div class="responsavel">\n';
                    if (informacoes['responsavel'] != '') {
                        modalhtml += '<p class="nomeresponsavel">Responsável: ' + informacoes[
                            'responsavel'] + '</p>\n';
                    } else {
                        modalhtml +=
                            '<p class="nomeresponsavel natribuido">Responsável: Não informado</p>\n';
                    }
                    modalhtml += '</div>\n';
                    modalhtml += '<div class="coluna atrelar">\n';
                    modalhtml += '<select name="" id="usuarios" style="text-align:left">\n';
                    if (informacoes['responsavel'] != '') {
                        switch (informacoes['responsavel']) {
                            case 'Evandro':
                                modalhtml +=
                                    '<option value=""> -- Selecione o Responsável --</option><option value="Guilherme">Guilherme</option><option value="Milena">Milena</option><option value="Leniro">Leniro</option><option value="Deimon">Deimon</option><option value="Rodrigo">Rodrigo</option><option value="Eziquiel">Eziquiel</option><option value="Marcelo">Marcelo</option><option value="Evandro" selected>Evandro</option>\n';
                                break;
                            case 'Guilherme':
                                modalhtml +=
                                    '<option value=""> -- Selecione o Responsável --</option><option value="Guilherme" selected>Guilherme</option><option value="Milena">Milena</option><option value="Leniro">Leniro</option><option value="Deimon">Deimon</option><option value="Rodrigo">Rodrigo</option><option value="Eziquiel">Eziquiel</option><option value="Marcelo">Marcelo</option><option value="Evandro">Evandro</option>\n';
                                break;
                            case 'Milenea':
                                modalhtml +=
                                    '<option value=""> -- Selecione o Responsável --</option><option value="Guilherme">Guilherme</option><option value="Milena" selected>Milena</option><option value="Leniro">Leniro</option><option value="Deimon">Deimon</option><option value="Rodrigo">Rodrigo</option><option value="Eziquiel">Eziquiel</option><option value="Marcelo">Marcelo</option><option value="Evandro">Evandro</option>\n';
                                break;
                            case 'Leniro':
                                modalhtml +=
                                    '<option value=""> -- Selecione o Responsável --</option><option value="Guilherme">Guilherme</option><option value="Milena">Milena</option><option value="Leniro" selected>Leniro</option><option value="Deimon">Deimon</option><option value="Rodrigo">Rodrigo</option><option value="Eziquiel">Eziquiel</option><option value="Marcelo">Marcelo</option><option value="Evandro">Evandro</option>\n';
                                break;
                            case 'Eziquiel':
                                modalhtml +=
                                    '<option value=""> -- Selecione o Responsável --</option><option value="Guilherme">Guilherme</option><option value="Milena">Milena</option><option value="Leniro">Leniro</option><option value="Deimon">Deimon</option><option value="Rodrigo">Rodrigo</option><option value="Eziquiel" selected>Eziquiel</option><option value="Marcelo">Marcelo</option><option value="Evandro">Evandro</option>\n';
                                break;
                            case 'Deimon':
                                modalhtml +=
                                    '<option value=""> -- Selecione o Responsável --</option><option value="Guilherme">Guilherme</option><option value="Milena">Milena</option><option value="Leniro">Leniro</option><option value="Deimon" selected>Deimon</option><option value="Rodrigo">Rodrigo</option><option value="Eziquiel">Eziquiel</option><option value="Marcelo">Marcelo</option><option value="Evandro">Evandro</option>\n';
                                break;
                            case 'Rodrigo':
                                modalhtml +=
                                    '<option value=""> -- Selecione o Responsável --</option><option value="Guilherme">Guilherme</option><option value="Milena">Milena</option><option value="Leniro">Leniro</option><option value="Deimon">Deimon</option><option value="Rodrigo" selected>Rodrigo</option><option value="Eziquiel">Eziquiel</option><option value="Marcelo">Marcelo</option><option value="Evandro">Evandro</option>\n';
                                break;
                            case 'Marcelo':
                                modalhtml +=
                                    '<option value=""> -- Selecione o Responsável --</option><option value="Guilherme">Guilherme</option><option value="Milena">Milena</option><option value="Leniro">Leniro</option><option value="Deimon">Deimon</option><option value="Rodrigo">Rodrigo</option><option value="Eziquiel">Eziquiel</option><option value="Marcelo" selected>Marcelo</option><option value="Evandro">Evandro</option>\n';
                                break;
                            case 'Gabriel':
                                modalhtml +=
                                    '<option value=""> -- Selecione o Responsável --</option><option value="Guilherme">Guilherme</option><option value="Milena">Milena</option><option value="Leniro">Leniro</option><option value="Deimon">Deimon</option><option value="Rodrigo">Rodrigo</option><option value="Eziquiel">Eziquiel</option><option value="Marcelo">Marcelo</option><option value="Evandro">Evandro</option><option value="Gabriel" selected>Gabriel</option><option value="Marco">Marco</option><option value="Kelvin">Kelvin</option>\n';
                                break;
                            case 'Marco':
                                modalhtml +=
                                    '<option value=""> -- Selecione o Responsável --</option><option value="Guilherme">Guilherme</option><option value="Milena">Milena</option><option value="Leniro">Leniro</option><option value="Deimon">Deimon</option><option value="Rodrigo">Rodrigo</option><option value="Eziquiel">Eziquiel</option><option value="Marcelo">Marcelo</option><option value="Evandro">Evandro</option><option value="Gabriel">Gabriel</option><option value="Marco" selected>Marco</option><option value="Kelvin">Kelvin</option>\n';
                                break;
                            case 'Kelvin':
                                modalhtml +=
                                    '<option value=""> -- Selecione o Responsável --</option><option value="Guilherme">Guilherme</option><option value="Milena">Milena</option><option value="Leniro">Leniro</option><option value="Deimon">Deimon</option><option value="Rodrigo">Rodrigo</option><option value="Eziquiel">Eziquiel</option><option value="Marcelo">Marcelo</option><option value="Evandro">Evandro</option><option value="Gabriel">Gabriel</option><option value="Marco">Marco</option><option value="Kelvin" selected>Kelvin</option>\n';
                                break;
                        }
                    } else {
                        modalhtml +=
                            '<option value="" selected> -- Selecione o Responsável --</option><option value="Guilherme">Guilherme</option><option value="Milena">Milena</option><option value="Leniro">Leniro</option><option value="Deimon">Deimon</option><option value="Rodrigo">Rodrigo</option><option value="Eziquiel">Eziquiel</option><option value="Marcelo">Marcelo</option><option value="Evandro">Evandro</option><option value="Gabriel">Gabriel</option><option value="Marco">Marco</option><option value="Kelvin">Kelvin</option>\n';
                    }
                    modalhtml += '</select>\n';
                    modalhtml +=
                        '<input class="protocolosei" type="text" placeholder="N° protocolo sei..." id="protocolosei" value="' +
                        informacoes['nprocesso'] + '">\n';
                    modalhtml +=
                        '<button class="definirusuario" onClick="setuserevent()">Atribuir</button>\n';
                    modalhtml += '</div>\n';
                    modalhtml += '</div>\n';
                    modalhtml += '</div>\n';
                    modalhtml += '</div>\n';
                    modalhtml += '</div>';
                    document.querySelector('body').insertAdjacentHTML('beforeend', modalhtml);
                    document.querySelector('#closemodal').addEventListener('click', closemodal);
                });



            });

        });



        function closemodal() {
            document.querySelector('.modalevent').remove();
        }

        function setuserevent() {
            var idevento = document.querySelector('input#idevento').value;
            var nprocesso = document.querySelector('input#protocolosei').value;
            var responsavel = document.querySelector('select#usuarios').value;
            $.get('https://www.assembleia.pr.leg.br/publicador/configuracoes/setevent', {
                idsessao: idevento,
                responsavel: responsavel,
                nprocesso: nprocesso
            }, function(data) {
                if (data == 'ok') {
                    closemodal();
                    location.reload();
                } else {
                    alert('Erro ao atribuir usuário');
                }
            });
        }
    </script>


    <style>
        .bodymodal {
            min-height: 10vh;
            border: solid 1px #00000029;
            border-radius: 8px;
            padding: 1em;
        }

        .calendario {
            margin-top: 4em;
            overflow: hidden;
        }

        p.nomeresponsavel {
            background-color: #00ad73;
            border-radius: 5px;
            padding: 3px 15px;
            font-weight: 700;
            text-align: center;
            color: #ffffff;
        }

        p.nomeresponsavel.natribuido {
            background-color: #adadad;
            color: #464646;
        }

        span.titulo {
            font-weight: 800;
        }

        .modalsquare {
            width: 35vw;
            height: 60vh;
            background-color: #ffffff;
            border-radius: 10px;
            padding: 1em;
        }

        button.definirusuario {
            width: 50%;
            margin: 1em 0% 1em 70%;
            background-color: #00ad73;
            border: none;
            color: #ffffff;
            font-weight: 700;
            text-transform: uppercase;
            line-height: 2;
            border-radius: 7px;
        }

        .coluna.atrelar input {
            width: 57% !important;
            border-radius: 5px;
            border: solid 1px #00000030;
            padding: 7px;
            text-align: center;
        }

        .bgmodal {
            width: 100vw;
            height: 100vh;
            background-color: #00000075;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-content: center;
            flex-wrap: nowrap;
            align-items: center;
        }

        .modalevent {
            position: fixed;
            top: 0;
            left: 0;
        }

        .headermodal h2 {
            background-color: #002440;
            text-align: center;
            color: #ffffff;
            line-height: 1.5;
            border-radius: 7px;
            font-size: 15px;
            min-height: 3em;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .headermodal a {
            background-color: #d50049;
            color: #ffffff;
            height: 31px;
            font-size: 25px;
            position: absolute;
            top: 4.5em;
            right: 30vw;
            border-radius: 50px;
            margin: 0px;
            padding: 0px 0.3em;
            line-height: 1;
            font-weight: 900;
        }

        .filtros {
            margin: 2em 12% 1em;
            border-bottom: solid 1px #0000000d;
            padding-bottom: 2em;
        }

        .coluna.atrelar {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            max-width: 100%;
            border: solid 1px #0000001c;
            border-radius: 8px;
            overflow: hidden;
            padding: 1em;
            justify-content: space-between;
        }

        .coluna.atrelar select {
            max-width: 40%;
            width: 50%;
            border: none;
            border-radius: 5px;
            background-color: #004071;
            color: #ffffff;
            padding: 5px;
            text-align: center;
        }

        button#marcarusuario {
            border: none;
            width: 18%;
            border-radius: 5px;
            background-color: #02b793;
            color: #ffffff;
        }

        div#calendar {
            margin: 0px auto;
            padding: 0px;
            width: 76%;
            font-family: Helvetica, "Times New Roman", Times, serif;
            border-radius: 5px;
            overflow: hidden;
        }

        .atribuido {
            position: absolute;
            background-color: #02b793;
            padding: 0px 9px;
            min-width: 75px;
            text-align: center;
            font-size: 11px;
            border-radius: 24px;
            margin-left: 6em;
        }

        div#calendar div.box {
            position: relative;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 40px;
            background-color: #004071;
        }

        div#calendar div.header {
            line-height: 40px;
            vertical-align: middle;
            position: absolute;
            left: 11px;
            top: 0px;
            width: 98%;
            height: 40px;
            text-align: center;
        }

        div#calendar div.header a.prev,
        div#calendar div.header a.next {
            position: absolute;
            top: 0px;
            height: 17px;
            display: block;
            cursor: pointer;
            text-decoration: none;
            color: #FFF;
        }

        div#calendar div.header span.title {
            color: #FFF;
            font-size: 18px;
        }


        div#calendar div.header a.prev {
            left: 0px;
        }

        div#calendar div.header a.next {
            right: 0px;
        }




        /*******************************Calendar Content Cells*********************************/
        div#calendar div.box-content {
            border: 1px solid #004071;
            border-top: none;
        }



        div#calendar ul.label {
            float: left;
            margin: 0px;
            padding: 0px;
            margin-top: 5px;
            margin-left: 5px;
            width: 100%;
        }

        div#calendar ul.label li {
            margin: 0px;
            padding: 0px;
            margin-right: 5px;
            float: left;
            list-style-type: none;
            width: 13.8%;
            height: 40px;
            line-height: 40px;
            vertical-align: middle;
            text-align: center;
            color: #000;
            font-size: 15px;
            background-color: transparent;

        }


        div#calendar ul.dates {
            float: left;
            margin: 0px;
            padding: 0px;
            margin-left: 5px;
            margin-bottom: 5px;
            width: 100%;
        }

        /** overall width = width+padding-right**/
        div#calendar ul.dates li {
            margin: 0px;
            padding: 0px;
            margin-right: 5px;
            margin-top: 5px;
            vertical-align: middle;
            float: left;
            list-style-type: none;
            width: 13.8%;
            height: 220px;
            font-size: 25px;
            background-color: #e7f2fb;
            color: #004071;
            text-align: center;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            padding: 5px;
            cursor: pointer;

        }

        div#calendar ul.dates li:hover {
            background-color: #02b793 !important;
            box-shadow: 0px 2px 5px -2px #000000;
            margin-top: 0px;
            margin-bottom: 5px;
        }

        span.responsavel {
            position: absolute;
            background-color: #02b793;
            width: 80px;
            font-size: 10px;
            margin-left: 6em;
            border-radius: 50px;
        }

        span.responsavel a {
            color: #ffffff;
            background-color: #e91e63;
            position: absolute;
            border-radius: 50px;
            height: 17px;
            width: 17px;
            margin-top: -5px;
            margin-left: 7px;
            text-align: center;
            line-height: 17px;
            font-weight: 800;
        }

        li.todayistheday {
            background-color: #ffc107 !important;
        }

        .evento {
            font-size: 11px;
            max-width: 100%;
            width: 100%;
            height: 16px;
            overflow: hidden;
            background-color: #004071;
            color: #ffffff;
            margin-bottom: 4px;
            border-radius: 13px;
            padding-left: 10px;
            padding-right: 10px;
            text-align: left;
            transition: 0.3s;
            white-space: pre;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
        }

        .evento:hover {
            background-color: #002744;
            width: 110%;
            margin-left: -5%;
            margin-right: -5%;
            max-width: 200%;
            height: 26px;
            font-size: 13px;
        }

        :focus {
            outline: none;
        }

        div.clear {
            clear: both;
        }

        li.todayistheday {
            background-color: #ffc107 !important;
        }

        .evento:hover .eventballon {
            padding: 10px;
            max-width: 190px;
            height: 200px;
            font-size: 12px;
            z-index: 9999;
        }

        .eventballon {
            position: absolute;
            background-color: #f5efdd;
            margin-left: 7%;
            overflow: hidden;
            padding: 0px;
            border-radius: 10px;
            max-width: 0px;
            height: 0px;
            box-shadow: 2px 2px 8px -4px #000000;
            white-space: break-spaces;
            text-align: center;
            display: flex;
            align-items: center;
            color: #462d00;
            font-size: 0px;
            font-weight: 600;
            line-height: 18px;
            transition: 0.3s;
            flex-direction: column;
        }

        span.horarioevento {
            width: 100%;
            background-color: #0000003d;
            line-height: 2;
            font-size: 16px;
            border-radius: 36px 0px;
            color: #0000009e;
        }
    </style>
@endsection