.tab-container {
            display: flex;
            align-items: stretch;
            width: 100%;
            height: 3rem;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 9999;
            margin-bottom: -3px;
        }
        .side a {
                color: #181818;
                display: flex;
                flex-direction: column;
                line-height: 1.5;
                margin-top: 8px;
            }
        .nav-text{font-size:10px;}
        
        img.nav-img {
            width: 40px;
            padding-bottom: 18px;
        }
        .side a:hover {
            color: #df2928;
        }
        
        .side i {
            font-size: 18px;
        }

        .bar {
            z-index: 1;
            position: absolute;
            display: flex;
            align-items: stretch;
            filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.1)) drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.1));
            width: 100%;
            height: 100%;
        }

        .bar .middle {
            flex-grow: 1;
            position: relative;
            display: flex;
        }

        .bar .middle .circle {
            position: relative;
            top: -1.75rem;
            width: 5rem;
            height: 5.75rem;
            display:flex;
            justify-content: space-evenly;
            align-items: center;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='92' viewBox='0 0 156 106'%3E%3Ccircle cx='56' cy='36' r='40' fill='%23FFF'/%3E%3Cpath d='M104 35.2L104 35.2c0 26.3-20.9 48.3-47.2 48.8C29.9 84.4 8 62.8 8 36v-0.8c0-4-3.2-7.2-7.2-7.2H0v64h112V28h-0.8C107.2 28 104 31.2 104 35.2z' fill='%23FFF'/%3E%3C/svg%3E");
        }

        .bar .middle .side {
            flex-grow: 1;
            background: white;
            transition: 0.75s ease;
            text-align: center;
            font-size: 1.5rem;
            line-height: 3rem;
        }