
@charset "utf-8";

#wrap {

    /* header */
    #header {
        width: 100%;
        height: 4.4rem;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--secondary5);

        .logoArea {
            display: flex;
            align-items: center;

            .logo {
            width: 4.3rem;
            height: 4.4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: url(../assets/images/logo.svg) no-repeat center / contain;
            }

            .logoTxt {
            color: var(--white);
            font-weight: var(--fw-bold);
            }
        }

        aside {
            ul {
            display: flex;

            li {
                width: 3rem;
                height: 3rem;
                margin-right: .9rem;

                a {
                position: relative;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-repeat: no-repeat;
                background-position: center;
                background-size: 3rem;

                &.alram {
                    background-image: url(../assets/images/ico_alarm.svg);
                }

                &.set {
                    background-image: url(../assets/images/ico_set.svg);
                }

                &.user {
                    background-image: url(../assets/images/ico_user.svg);
                }
                }
            }
            }
        }

        .badge {
            position: absolute;
            top: .6rem;
            right: .8rem;
            display: block;
            width: .5rem;
            height: .6rem;
            border-radius: 50%;
            background-color: var(--alert);
        }
    }
}