@php
    use App\Http\Controllers\ModCronos;
    use Illuminate\Support\Facades\Crypt;


@endphp
<style>
    /******************************************************************************
    # REFERÊNCIAS
    [1] Tabs with CSS3 & HTML5 only
    https://codepen.io/CesarVMB/pen/nLhAa

    [2] Pure CSS Tabs With Indicator
    https://codepen.io/woranov/pen/NRqLWK

    [3] Featured Tabs
    https://codepen.io/RGonyeau/pen/Mvrzxx

    [4] No JS: Tabs that scale down to menu
    https://codepen.io/jakealbaugh/pen/KBsIo

    [5] Simple Tabs
    https://codepen.io/johndjameson/pen/ecmlu

    [6] Sliding tabs | CSS transitions only
    https://codepen.io/havardob/pen/ExVaELV

    [7] Tabs on desktop, accordion on mobile
    https://codepen.io/gsarig/pen/GWgNdx

    [8] Modern Tabs Design with pure CSS
    https://codepen.io/iprodev/pen/yygvPx

    [9] css tabs
    https://codepen.io/_massimo/pen/oYWbqL

    [10] Dynamic Tabs
    https://codepen.io/ehrenglaube/pen/KpvdPb

    [11] Responsive pure css tabs
    https://codepen.io/imprakash/pen/epZvbQ

    [12] Flexbox Tabs
    https://codepen.io/indyplanets/pen/qBuLi

    [13] Responsive Flex Layout With Tabs - Material Design
    https://codepen.io/kylelavery88/pen/wMQqar

    [14] Tabs
    https://codepen.io/axelaredz/pen/ipome

    [15] Responsive Full Width Tabs
    https://tympanus.net/codrops/2014/03/21/responsive-full-width-tabs/

    [16] Full page, folder tab navigation
    https://codepen.io/Octavector/pen/gadMGY

    [17] Stretchy Tab & Springy Content Slider w/bursts
    https://codepen.io/PointC/pen/rZZGRj

    [18] Tabs tab vertical admin panel
    https://codepen.io/GrandvincentMarion/pen/LGRxKo?editors=1010

    [19] Stupid-simple Tabs
    https://codepen.io/jexordexan/pen/myPogV
    ******************************************************************************/





    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");


    /*===============================================
    1. General
    ===============================================*/
    .switcher-box a {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-right: 10px;
        padding: 3px;
        cursor: pointer;
        background: #FFF;

        -webkit-border-radius: 50%;
        border-radius: 50%;

        -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
    }
    .switcher-box a span {
        display: block;
        width: 100%;
        height: 100%;

        -webkit-box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) inset, 0 5px 20px rgba(255, 255, 255, 0.4) inset;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15) inset, 0 5px 20px rgba(255, 255, 255, 0.4) inset;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        -webkit-border-radius: 50%;
        border-radius: 50%;
    }
    .switcher-box a.active {
        background: #000;
        -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) inset;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) inset;
    }
    .switcher-box a.active span {
        border-color: #BBB;
    }

    .switcher-box a.skin-turquoise span {
        background: #1ABC9C;
    }



    /*===============================================
    2. Tabbed Styles
    ===============================================*/

    .tabbed {
        width: 100%;
        min-width: 400px;
        margin: 0 auto;
        margin-bottom: 68px;
        border-bottom: 4px solid #000;
        overflow: hidden;
        transition: border 250ms ease;
    }
    .tabbed ul {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        float: left;
        padding-left: 48px;
        list-style-type: none;
    }
    .tabbed ul * {
        margin: 0px;
        padding: 0px;
    }
    .tabbed ul li {
        display: block;
        float: right;
        padding: 10px 24px 8px;
        background-color: #FFF;
        margin-right: 46px;
        z-index: 2;
        position: relative;
        cursor: pointer;
        color: #777;

        text-transform: uppercase;
        font: 600 13px/20px roboto, "Open Sans", Helvetica, sans-serif;

        transition: all 250ms ease;
    }
    .tabbed ul li:before,
    .tabbed ul li:after {
        display: block;
        content: " ";
        position: absolute;
        top: 0;
        height: 100%;
        width: 44px;
        background-color: #FFF;
        transition: all 250ms ease;
    }
    .tabbed ul li:before {
        right: -24px;
        transform: skew(30deg, 0deg);
        box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0;
    }
    .tabbed ul li:after {
        left: -24px;
        transform: skew(-30deg, 0deg);
        box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0;
    }
    .tabbed ul li:hover,
    .tabbed ul li:hover:before,
    .tabbed ul li:hover:after {
        background-color: #F4F7F9;
        color: #444;
    }
    .tabbed ul li.active {
        z-index: 3;
    }
    .tabbed ul li.active,
    .tabbed ul li.active:before,
    .tabbed ul li.active:after {
        background-color: #000;
        color: #fff;
    }


    /*----- Round Tabs -----*/
    .tabbed.tab-round ul li {
        border-radius: 8px 8px 0 0;
    }
    .tabbed.tab-round ul li:before {
        border-radius: 0 8px 0 0;
    }
    .tabbed.tab-round ul li:after {
        border-radius: 8px 0 0 0;
    }


    /*----- Skins -----*/
    .tabbed[class*="skin-"] ul li {
        color: #FFF;
        text-shadow: rgba(0,0,0,.1) 0 1px;
    }

    .tabbed.skin {
      /*  border-bottom-color: #1ABC9C;*/
        border-bottom-color: #1E88E5;
    }
    .tabbed.skin ul li,
    .tabbed.skin ul li:before,
    .tabbed.skin ul li:after {
        /*background-color: #34D6B6;*/
        background-color: #E0EDF9;;
        color: #1E88E5;
    }
    .tabbed.skin ul li:hover,
    .tabbed.skin ul li:hover:before,
    .tabbed.skin ul li:hover:after {
        background-color: #A7D1F7;
        color: #fff;
    }
    .tabbed.skin ul li.active,
    .tabbed.skin ul li.active:before,
    .tabbed.skin ul li.active:after {
        /*background-color: #1ABC9C;*/
        background-color: #1E88E5;
        color: #fff;
    }



    a.iprodev {
        line-height: normal;
        font-family: Varela Round, sans-serif;
        font-weight: 600;
        text-decoration: none;
        font-size: 13px;
        color: #A7AAAE;
        position: fixed;
        left: 20px;
        bottom: 20px;
        border: 1px solid #A7AAAE;
        padding: 12px 20px 10px;
        border-radius: 50px;
        transition: all .1s ease-in-out;
        text-transform: uppercase;
    }
    a.iprodev:hover {
        background: #A7AAAE;
        color: white;
    }



</style>

<h2>Colored version</h2>
<div class='tabbed skin tab-round' id='skinable'>
    <ul>
        <li>N:15</li>
        <li>N: 16 </li>
        <li class='active'>N: 14</li>
    </ul>
</div>

<a class='iprodev' href='https://codepen.io/iprodev/pen/yygvPx?editors=1000' target='_blank'>iprodev.com</a>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var tabs = document.querySelectorAll('.tabbed li');
        var switchers = document.querySelectorAll('.switcher-box a');
        var skinable = document.getElementById('skinable');

        for (var i = 0, len = tabs.length; i < len; i++) {
            tabs[i].addEventListener("click", function() {
                if (this.classList.contains('active'))
                    return;

                var parent = this.parentNode,
                    innerTabs = parent.querySelectorAll('li');

                for (var index = 0, iLen = innerTabs.length; index < iLen; index++) {
                    innerTabs[index].classList.remove('active');
                }

                this.classList.add('active');
            });
        }

        for (var i = 0, len = switchers.length; i < len; i++) {
            switchers[i].addEventListener("click", function() {
                if (this.classList.contains('active'))
                    return;

                var parent = this.parentNode,
                    innerSwitchers = parent.querySelectorAll('a'),
                    skinName = this.getAttribute('skin');

                for (var index = 0, iLen = innerSwitchers.length; index < iLen; index++) {
                    innerSwitchers[index].classList.remove('active');
                }

                this.classList.add('active');
                skinable.className = 'tabbed tab-round ' + skinName;
            });
        }
    });
</script>