@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css");

:root {
    --primary-color: #0D6FFA;
    --accent-color: #49CE95;
    --danger-color: #EC3582;
    --fore-color: rgba(0,0,0,0.65);
    --main-cast-shadow: 0px 3px 12px rgba(0, 0, 0, 0.08), 0px 3px 6px rgba(0, 0, 0, 0.12);
}

.sc-bottom-bar {
    position: fixed;
    display: flex;
    padding: 16px 25px;
    justify-content: space-between;
    width: calc(100% - 50px); /*overide by js*/
    /*width: 375px;*/
    margin: auto;
    /*top: 0;*/
    left: 0;
    bottom: 0;
    /*right: 0;*/
    height: 32px;
    font-size: 26px;
    background-image: radial-gradient(circle at 0px 0px,transparent 0px, #ffffff 0px);
    /*background-image: radial-gradient(circle at 36px 6px,transparent 36px, #ffffff 37px);*/
    filter: drop-shadow(0px -1px 6px rgba(0, 0, 0, 0.08)) drop-shadow(0px -2px 12px rgba(0, 0, 0, 0.12));
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    transition: cubic-bezier(0.57, 0.23, 0.08, 0.96) .45s;
}

.sc-nav-indicator {
    position: absolute;
    width: 56px;
    height: 56px;
    bottom: 28px;
    margin: auto;
    left: 0;
    background-color: #000000;
    box-shadow: var(--main-cast-shadow);
    border-radius: 50%;
    transition: cubic-bezier(0.45, 0.73, 0, 0.59) .3s;
}

.sc-menu-item {
    color: var(--fore-color);
    transition: ease-in-out .5s;
    cursor: pointer;
}

.sc-current {
    position: relative;
    color: #ffffff;
    z-index: 3;
    transform: translate3d(0px,-22px,0px);
}