/*
    DEMO STYLE
*/

 
/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
#fsidebar.none{ min-height:0px; padding:0px;} 
#fsidebar.active{ padding:10px;}
#fsidebar { min-height: 70px; max-height: 70px; background: #dddddd; padding:10px; border-top:solid 5px #0059ab; color: #989898; transition: all 0.3s; width:100%; position:fixed; bottom:0; z-index:999; font-family:"Libre Franklin", sans-serif; }
#fsidebar p{color:#fff;}
#fsidebar.active { min-height: auto; max-height: 220px; }
#fsidebar .sidebar-header,
#fsidebar .CTAs { display: none;}
#fsidebar .sidebar-header h3{color:#000; margin:5px 0 15px 0;}
#fsidebar.active .sidebar-header,
#fsidebar.active .CTAs { display: block;}
#fsidebar.active .sidebar-header strong { display: block;}
#fsidebar ul li a { text-align: left;}
#fsidebar.active ul li a { padding: 20px 10px; text-align: center; font-size: 0.85em;}
#fsidebar.active ul li a i{ margin-right: 0; display: block; font-size: 1.8em; margin-bottom: 5px;}
#fsidebar.active ul ul a { padding: 10px !important; }

#fsidebar.active .dropdown-toggle::after { top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}

#fsidebar .sidebar-header {
   /* padding: 10px;
    background: #005dac;*/
}

#fsidebar .sidebar-header strong {
    display: none;
    font-size: 1.8em;
}

#fsidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#fsidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#fsidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#fsidebar ul li a i {
    margin-right: 10px;
}

#fsidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

 
/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

 

@media (max-width: 768px) {
    #fsidebar {
        min-height: 80px;
        max-height: 80px; 
		width:100%; 
         
    }
    .dropdown-toggle::after {
        top: auto;
        bottom: 10px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }
    #fsidebar.active {
        margin-left: 0 !important;
    }
     
    #fsidebar .sidebar-header strong {
        display: block;
    }
    #fsidebar ul li a {
        padding: 20px 10px;
    }
    #fsidebar ul li a span {
        font-size: 0.85em;
    }
    #fsidebar ul li a i {
        margin-right: 0;
        display: block;
    }
    #fsidebar ul ul a {
        padding: 10px !important;
    }
    #fsidebar ul li a i {
        font-size: 1.3em;
    }
    #fsidebar {
        margin-left: 0;
    }
    #fsidebarCollapse span {
        display: none;
    }
}

#fsidebarCollapse{float:right;}


.none #fsidebarCollapse { margin:-60px 30px 0 0; }

.none.active #fsidebarCollapse,#fsidebarCollapse {
 background-color: rgba(0, 0, 0, 0);
 border: 0px solid rgba(0, 0, 0, 0);
 cursor: pointer;
 height: inherit;
 margin:-70px 30px 0 0;
 width: 50px;
 background: #222b4e;
    padding: 5px;
	border-radius: 8px 8px 0 0;
	text-align:center;
}

#fsidebarCollapse div {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 background-color: #fff;
 height: 5px;
 margin: 10px auto;
 -webkit-transition: all 0.3s;
 transition: all 0.3s;
 width: 100%;
}

#fsidebarCollapse.on .one {
 -ms-transform: rotate(45deg) translate(12px, 13px);
 -webkit-transform: rotate(45deg) translate(12px, 13px);
 transform: rotate(45deg) transform-origin: 20% 40%;
}

#fsidebarCollapse.on .two {
 opacity: 0;
}

#fsidebarCollapse.on .three {
 -ms-transform: rotate(-45deg) translate(7px, -10px);
 -webkit-transform: rotate(-45deg) translate(7px, -10px);
 transform: rotate(-45deg) translate(7px, -10px);
}
#fsidebar .media-heading{margin-bottom:0;}
#fsidebar .media-heading a{color:#000; text-decoration:none; font-weight:400;
display: -webkit-box;
height: 40px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; 
}
#fsidebar .media-left img{border-radius:5px;}
#fsidebar .media-heading a:hover{ color: #0175dd;}
#fsidebar .media{ height:50px; margin-bottom:10px;}
#fsidebar .media-body{vertical-align:middle;}
.icofont-thin-down{display:none;}
.on .icofont-thin-up{display:none;}
.on .icofont-thin-down{display:inline-block;}
#fsidebarCollapse .icofont{font-size:27px;}

.none .faction { margin:-30px 30px 0 0; }
.none.active .faction,.faction { 
 margin:-40px 30px 0 0;
 width: 50px;
 background:#0059ab; 
 text-align:center; float:right;
 z-index:1050;
}
.faction a{ color: #fff;
    display: block;
    padding: 3px 0;}
	.faction a:hover{text-decoration:none;}
.dropup .dropdown-menu{
right: 0!important;
left: inherit !important;	
}
.faction .dropup .caret{display:none;}