
@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);
    }

    a {

        @include themify($themes) {
            color: themed('txtcolor1');
        }

    }

    #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: 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);
            }
        }
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 30px;
        height: 17px;
        margin-left:-5px;



        & + span {
            display:inline-block;
            transform: translateY(-3px);
            padding-left:7px;
        }

      }
      
      /* Hide default HTML checkbox */
      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }
      
      /* The slider */
      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        @include themify($themes) {
            background-color: themed('bodybg');
        }
        -webkit-transition: .4s;
        transition: .4s;
      }
      
      .slider:before {
        position: absolute;
        content: "";
        height: 13px;
        width: 13px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
      }
      
      input:checked + .slider {

        @include themify($themes) {
            background-color: themed('grassgreen');
        }
      }
      
      input:focus + .slider {
        //box-shadow: 0 0 1px #000;
      }
      
      input:checked + .slider:before {
        -webkit-transform: translateX(13px);
        -ms-transform: translateX(13px);
        transform: translateX(13px);
      }
      
      /* Rounded sliders */
      .slider.round {
        border-radius: 17px;
      }
      
      .slider.round:before {
        border-radius: 50%;
      }

      
}