
@import 'def';

#settings {
    position:fixed;
    right:-400px;
    top:65px;
    z-index:999999;
    width:380px;
    @include themify($themes) {
        background-color: themed('barbg');
    }
    min-height:100vh;
    transition: all 1s;
    padding:30px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);

    &.active {
        right:0;
        box-shadow: -5px 5px 10px rgba(0,0,0,0.2);
    }

    h3 {
        cursor:pointer;
        font-size: 20px;
        transition:transform 0.4s;
        &:hover{
            transform:translateX(5px);
        } 
    }

    .imageinput {
        width:300px;
        
        i {
        position: absolute;
        transform: translate(-28px, 5px);
        }
    }

    .card {
        background-color: transparent;
        border: none;
        margin:15px 0;

        .card-body {
            padding:10px 0 30px 0;
        }

        label {
            margin-top:20px;
        }

        .btn {
            width:280px;
            margin-top:20px;
        }

        input[type="text"], input[type="password"] {
            padding: 5px 10px;
            vertical-align: top;
            width: 280px;

            @include themify($themes) {
                background-color: themed('bodybg');
                border:1px solid themed('trBorderColor');
                color: themed('txtcolor100');
            }
        }
    }

    ul {
        margin:0 0 30px 0;
        padding:0;
        list-style-type: none;
        li {
            margin:0 0 10px 0;
            padding:0;
            cursor:pointer;

            i {
                font-size:24px;
                margin-right:5px;
                display:inline-block;
                vertical-align: baseline;
                transform: translateY(2px);
            }
        }
    }
}