@media screen and (min-width:768px) {
    .default-sidebar {
        position: fixed;
        right: 0;
        top: 60px;
        height: 100%;
        display: flex;
        align-items: center;
        z-index: 0;
        pointer-events: none;
        transition: all .15s ease-out
    }

        .default-sidebar.hidden {
            opacity: 0;
            right: -100px
        }

            .default-sidebar.hidden * {
                pointer-events: none !important
            }

    .sidebar-inner {
        position: relative
    }

        .sidebar-inner .sidebar-item {
            right: 0;
            pointer-events: all;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: .5rem;
            aspect-ratio: 1/1;
            width: 5.5rem;
            transition: all .25s ease-out;
            text-decoration: none;
            cursor: pointer
        }

        .sidebar-inner .sidebar-item-img {
            width: 2.5rem;
            aspect-ratio: 1/1;
            pointer-events: none;
            filter: brightness(0) invert(1)
        }

        .sidebar-inner .sidebar-item-text {
            color: white;
            opacity: 1;
            transition: all .1s linear;
            font-size: .75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            line-height: 1.25;
            margin-top: .5rem;
            pointer-events: none
        }

        .sidebar-inner .sidebar-item:hover .sidebar-item-text {
            opacity: 1;
            transition: all .15s ease-in
        }

        .sidebar-inner .sidebar-item:hover.doctor {
            background-color: rgb(28,100,124)
        }

        .sidebar-inner .sidebar-item:hover.appointment {
            background-color: #af3b39
        }

        .sidebar-inner .sidebar-item:hover.international {
            background-color: #ea9724
        }

        .sidebar-inner .sidebar-item:hover.emergency {
            background-color: #0f9a9f
        }

        .sidebar-inner .sidebar-item.doctor {
            background-color: #487E8F;
            top: -14.5rem
        }

        .sidebar-inner .sidebar-item.appointment {
            background-color: #AC5B5A;
            top: -7.25rem
        }

        .sidebar-inner .sidebar-item.international {
            background-color: #E0A047;
            top: 0
        }

        .sidebar-inner .sidebar-item.emergency {
            background-color: #3EAAAD;
            top: 7.25rem
        }
}

@media screen and (max-width:767px) {
    .default-sidebar {
        position: fixed;
        bottom: -4px;
        width: 100%;
        z-index: 31;
        transition: all .15s ease-out
    }

        .default-sidebar.hidden {
            opacity: 0;
            bottom: -100px
        }

            .default-sidebar.hidden * {
                pointer-events: none !important
            }

    .sidebar-inner {
        display: flex;
        width: 100%;
        background-color: white;
        height: 72px
    }

        .sidebar-inner .sidebar-item {
            flex-basis: 20%;
            min-width: calc(20% - 1.5rem);
            padding: .75rem 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-decoration: none;
            cursor: pointer;
            transition: all .25s ease-in-out;
            overflow: hidden
        }

        .sidebar-inner .sidebar-item-img {
            width: 2rem;
            filter: brightness(0) invert(1)
        }

        .sidebar-inner .sidebar-item-text {
            line-height: 1;
            margin-left: 0;
            width: 0;
            opacity: 0;
            transition: width .25s ease-in-out
        }

        .sidebar-inner .sidebar-item.token {
            flex-basis: 40%
        }

            .sidebar-inner .sidebar-item.token .sidebar-item-text {
                display: block;
                font-size: .8rem;
                margin-left: .75rem;
                width: 100px;
                opacity: 1;
                overflow: hidden;
                transition: opacity .1s ease-in-out .25s
            }

        .sidebar-inner .sidebar-item.doctor {
            background-color: #6699a9
        }

        .sidebar-inner .sidebar-item.appointment {
            background-color: #ca807f
        }

        .sidebar-inner .sidebar-item.international {
            background-color: #f4b966
        }

        .sidebar-inner .sidebar-item.emergency {
            background-color: #66c8cb
        }
}