
@import 'def';

#settings {
    position:fixed;
    right:-400px;
    top:65px;
    z-index:999;
    width:380px;
    @include themify($themes) {
        background-color: themed('barbg');
    }
    min-height:100vh;
    transition: all 1s;
    padding:0 30px 0 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);
    }

    #accordion {
        overflow-x: hidden;
        overflow-y: auto;
        height: calc(100vh - 20px);
    }

    .dropdown-menu {
        width:280px;
        margin-left:-5px;
    }

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

    i {
        
        &.icon-theme {
            font-size:88%!important;
            transform: translateY(-1px);
        }

 
    }

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

    .collapse {
       
    }

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

        .card-body {
            padding:0px 0 30px 0;
            label:first-of-type {
                margin-top:0;
            }
        }

        label {
            margin-top:10px;
            margin-bottom:3px;
        }

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

        ul {
            padding-top:10px;
        }
        li {
            padding-left:30px;
            transition: all 0.4s;

            i {
                font-size:18px;
            }

            &:hover{
                transform:translateX(5px);
            } 
        }

        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 20px 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);
            }
        }
    }
}