.navbar {

    padding: 15px 10px;

    background: #fff;

    border: none;

    border-radius: 0;

    margin-bottom: 40px;

    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);

}



.line {

    width: 100%;

    height: 1px;

    border-bottom: 1px dashed #ddd;

    margin: 40px 0;

}



i, span {

    display: inline-block;

}



/* ---------------------------------------------------

    SIDEBAR STYLE

----------------------------------------------------- */

.wrapper {

    display: flex;

    align-items: stretch;

}



.side-bar {

   

    background: #4b6cb7;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #182848, #4b6cb7);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #182848, #4b6cb7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


    color: #fff;

    transition: all 0.3s;

        -webkit-box-shadow: 0 0 6px rgba(3,3,3,0.6);

     box-shadow: 0 0 6px rgba(3,3,3,0.6); 

    position: fixed;

     left: 0;

    width: 330px;

    height: 100%;

    min-height: 100%;

    z-index: 100;


}

#dct-content{

        position: absolute;

    right: 18px;

    left: 350px;

    padding-left: 10px;

    padding-bottom: 800px;

    min-height: 100%;

    height: auto;

    z-index: 1;

 transition: all 0.5s ease-in-out;

}



.side-bar.active {

    min-width: 80px;

    max-width: 80px;

    text-align: center;

}



.side-bar.active .sidebar-header h3, .side-bar.active .CTAs {

    display: none;

}



.side-bar.active .sidebar-header strong {

    display: block;

}



.side-bar ul li a {

    text-align: left;

}



.side-bar.active ul li a {

    padding: 20px 10px;

    text-align: center;

    font-size: 0.85em;

}



.side-bar.active ul li a i {

    margin-right:  0;

    display: block;

    font-size: 1.8em;

    margin-bottom: 5px;

}



.side-bar.active ul ul a {

    padding: 10px !important;

}


    .side-bar .sidebar-header {

    padding: 20px;
    box-shadow: 0 0px 30px rgba(0,0,0,0.4);
}





.side-bar .sidebar-header strong {

    display: none;

    font-size: 1.8em;

}



.side-bar ul.dct-components-list {

    padding: 20px 0;

    border-bottom: 1px solid #375290;

}



.side-bar ul li a {

    padding:0px 25px;

    display: block;

}



.side-bar ul li a i {

    margin-right: 10px;

}



.side-bar ul li.active > a, a[aria-expanded="true"] {

    color:#fff;

    border-left:2px solid #fff;

    text-decoration: none;

}

nav li ul{

    display: none;

    transition: all 0.4s ease;

    -ms-transition: all 0.4s ease;

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

}

nav li.active ul{

    display: block;

    padding-bottom: 10px;

    transition: all 0.4s ease;

    -ms-transition: all 0.4s ease;

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

}

.side-bar ul li a:hover {

    color: #7386D5;

    background: #fff;

    text-decoration: none;

}



a[data-toggle="collapse"] {

    position: relative;

}



a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {

    content: '\e259';

    display: block;

    position: absolute;

    right: 20px;

    font-family: 'Glyphicons Halflings';

    font-size: 0.6em;

}

a[aria-expanded="true"]::before {

    content: '\e260';

}



.side-bar ul.dct-components-list ul li a{

font-size: 0.9em !important;

    padding:0 20px;

}







nav ul li {

    transition: all 0.4s ease;

    -ms-transition: all 0.4s ease;

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    padding: 0 20px;

    border-radius: 2px;

    list-style: none;

}

nav ul li a {

    display: block;

    line-height: 30px;

    font-weight: 500;

    font-size: 14px;

    color: white;

    transition: all 0.4s ease;

    -ms-transition: all 0.4s ease;

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

}





/* ---------------------------------------------------

    CONTENT STYLE

----------------------------------------------------- */

#content {

    padding: 20px;

    min-height: 100vh;

    transition: all 0.3s;

}
div#dct-content h2{
  font-size: 25px;
}
div#dct-content h3{
    font-size: 20px;
}
div#dct-content img{
    padding-bottom: 30px;
}




/* ---------------------------------------------------

    MEDIAQUERIES

----------------------------------------------------- */

@media (max-width: 768px) {

    .side-bar {

        min-width: 80px;

        max-width: 80px;

        text-align: center;

        margin-left: -80px !important ;

    }

    a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {

        top: auto;

        bottom: 5px;

        right: 50%;

        -webkit-transform: translateX(50%);

        -ms-transform: translateX(50%);

        transform: translateX(50%);

    }

    .side-bar.active {

        margin-left: 0 !important;

    }



    .side-bar .sidebar-header h3, .side-bar .CTAs {

        display: none;

    }



    .side-bar .sidebar-header strong {

        display: block;

    }



    .side-bar ul li a {

        padding: 20px 10px;

    }



    .side-bar ul li a span {

        font-size: 0.85em;

    }

    .side-bar ul li a i {

        margin-right:  0;

        display: block;

    }



    .side-bar ul ul a {

        padding: 10px !important;

    }



    .side-bar ul li a i {

        font-size: 1.3em;

    }

    .side-bar {

        margin-left: 0;

    }

    .side-barCollapse span {

        display: none;

    }

}