/*

*Project Name: Thema Admin Bootstrap Template;
*Author: Lancecoder Theme;
*Website: lancecoder.com/themes;

Content
 - Heading
 - Header Section
 - Left Sidebar Section
 - Right Sidebar Section
 - Content Section
 - Footer Section
 - Progress Bar
 - Small box
 - Tiles
 - Hover Plugin
 - Panels
 - Sparkline
 - Daterange picker 
 - Thumbnail
 - Table styling country lists
 - Chart Styles
 - Dashboard widgets
 - Pogo Slider
 - Form
 - Grid Menu
 - Switcher
 - Boxed Page
 - Page Title ang breadcrumbs
 - Right Sidebar
 - Mail
 - Heading Styles
 - Tabs
 - Accordion
 - Buttons
 - Labels and badges
 - Modal
 - Checkbox input
 - Radio button
 - Datepicker
 - Timepicker
 - Colorpicker
 - Bootstrap tagsinput
 - Wysiwyg
 - Textarea expandable
 - Form Tooltips
 - Typeahead
 - Select2
 - UI Slider section
 - Button Pager
 - Dropzone
 - Media Gallery
 - Pricing Table
 - Timeline
 - Responsive video
 - Carousel
 - Boxed Content
 - Animated Hover Boxed Content
 - One half Boxed Content
 - Owl Carousel
 - Profile
 - Projects
 - View Project
 - Users
 - User Overlay
 - Fullcalendar
 - Forum
 - Registration
 - Lockscreen
 - Coming Soon
 - Search Results
 - People directory/Contacts
 - Email Template
 - eCommerce
 - Contact Form
 - Google Map
 - Widgets
 - Chartjs
 - VideoJs
 - Ricksaw
 - Hover CSS
 - Tooltipster
 - Hover Ideas
 - Sweet Alert
 - Wow Animations
 - GMAP3
 - iCon 7 Stroke
 - Simple Line Icons
 - iCheck
 - Theme Sidebar 2
 - Theme Dark 1
*/


/* ============================================================
GLOBAL SECTION
============================================================ */

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}
body {
    color:#767676;
    background:#F1F2F2;
    font-family:'Open Sans',sans-serif;
    padding:0px !important;
    margin:0px !important;
    font-size:13px;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
}

ul, .list-unstyled {
    padding-left: 30px;
}
ul li {
    /*list-style:none;*/
}

a,a:hover,a:focus {
    text-decoration:none;
    outline:none;
}

/*Headings*/
h1 {
  font-size: 28px;
  line-height: 35px;
}
h2 {
  font-size: 24px;
  line-height: 33px;
}
h3 {
  font-size: 20px;
  line-height: 27px;
}
h4 {
  /* line-height: 25px; */
}
h5 {
  line-height: 20px;
}
h6 {
  line-height: 18px;
}

h1, h2, h3, h4, h5, h6 {
  color: #555;    
  margin-top: 5px;
  text-shadow: none; 
  font-weight: normal; 
  font-family: "Open Sans", Arial, sans-serif;
} 

h1 i, h2 i, h3 i, h4 i, h5 i, h6 i {
   margin-right: 5px;
}

/*.row {
    margin-right: -18px;
    margin-left: -18px;
}
*/
.h1,
.h2,
.h3 {
    margin-top: 10px;
    margin-bottom: 10px;
}

h3.degrees {
    font-size: 22px;
    font-weight: 400;
    text-align: center;
}

h3.degrees:after {
    content: "o";
    position: relative;
    top: -12px;
    font-size: 13px;
    font-weight: 300;
}

#container {
    width:100%;
    height:100%;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9  {
    padding-right: 13px;
    padding-left: 13px;
}

.c_panel, .widget-content {
    margin-bottom: 20px !important;
}

/* ============================================================
SIDEBARD NAV SECTION
============================================================ */
#sidebar {
    width:240px;
    height:100%;
    position:fixed;
    background:#ffffff;
    color: grey;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
    border-right:0px solid #F5EFF5;
    /*box-shadow: 1px 0 3px rgba(0,0,0,.15);*/
}
#sidebar ul li {
    position: relative;
}

.leftside-navigation,.right-stat-bar{
    height: 100%;
    margin-top: -18px;
}

.right-stat-bar ul {
    list-style-type: none;
    padding-left: 0;
}

/*** Boxed unfixed header ***/
body.fixed-width-unfixed-header .leftside-navigation, .right-stat-bar {
    margin-top: -20px;
}

/* ============================================================
LEFT NAVIGATION ICON SECTION
============================================================ */
.dcjq-icon {
    height:17px;
    width:17px;
    display:inline-block;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    position:absolute;
    right:10px;
    top: 20px;
}

.dcjq-icon:after {
    content: "\f104";
}

.active .dcjq-icon {
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

.active .dcjq-icon:after {
    content: "\f107";
}

.right-side-accordion li:nth-child(2) ul li .prog-row {
    border: none;
}

.nav-collapse.collapse {
    display:inline;
}
ul.sidebar-menu,ul.sidebar-menu li ul.sub {
    margin:-2px 0 0;
    padding:0;
}
ul.sidebar-menu {
    padding-top:80px;
    /*background-color: #fff;*/
}

.fixed-width-unfixed-header #sidebar > .leftside-navigation  > ul {
    padding-top:20px !important;
}

#sidebar>ul>li>ul.sub {
    display:none;
}
#sidebar .sub-menu>.sub li a {
    padding-left:46px;
}
#sidebar>ul>li.active>ul.sub,#sidebar>ul>li>ul.sub>li>a {
    display:block;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
    transition:all 0.3s ease;
}
ul.sidebar-menu li ul.sub li {
    background:#F0F0F0;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
}

ul.sidebar-menu li ul.sub li a {
    margin-left: 25px;
    border-left: 1px solid #ddd;
    margin-left: 40px;
}

/*ul.sidebar-menu li ul.sub li:before {
    content: "";
	top: -1px;
	bottom: -1px;
	position: absolute;
	width: 1px;
	border-left: 1px dashed rgba(12, 12, 12, 0.3);
	z-index: 1;
	margin-left:40px;
}*/

ul.sidebar-menu li ul.sub li a:before {
    content: "";
	left: 40px; 
	top: 20px;
	position: absolute;
	display: block;
	width: 21px;
	border-bottom: 1px solid #ddd;
	z-index: 1;
}




/* ============================================================
FOR SECOND LEVEL SUB MENU SECTION
============================================================ */
ul.sidebar-menu li ul.sub li ul.sub li a:before {
    content: "";
    left: 40px; 
    top: 20px;
    position: absolute;
    display: block;
    width: 34px;
    border-bottom: 1px solid #ddd;
    z-index: 1;
}

ul.sidebar-menu li ul.sub li > ul.sub li a {
    padding-left: 60px !important;
}

ul.sidebar-menu li ul.sub li a {
    font-size:12px;
    padding-top:13px;
    padding-bottom:13px;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
    transition:all 0.3s ease;
    color:#738699;
}

ul.sidebar-menu li ul.sub li a:hover,ul.sidebar-menu li ul.sub li.active a {
    color:#ffffff;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
    transition:all 0.3s ease;
    display:block;
    background:#C4C4C4;
}

/*ul.sidebar-menu li {
    border-bottom:1px solid rgba(255,255,255,0.05);
}
*/
ul.sidebar-menu li.sub-menu {
    line-height:15px;
}
ul.sidebar-menu ul.sub li {
    border-bottom:none;
}
ul.sidebar-menu li a span {
    display:inline-block;
}



ul.sidebar-menu li a {
    color:#84888D;
    text-decoration:none;
    display:block;
    padding:8px 0 8px 25px;
    font-size:12px;
    outline:none;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
    transition:all 0.3s ease;
}

ul.sidebar-menu li a.active,ul.sidebar-menu li a:focus {
	background-color: #eee;
    font-weight: bold;
	-webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
    transition:all 0.3s ease;
}

ul.sidebar-menu li ul.sub li a.active {
    font-weight: bold;
}   

ul.sidebar-menu li a span:first-child {
	padding: 5px;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
    transition:all 0.3s ease;
}

ul.sidebar-menu li a span.icon-sidebar:first-child {
    border-radius: 100%;

}

ul.sidebar-menu li a.active span.icon-sidebar:first-child,
ul.sidebar-menu > li a:hover span.icon-sidebar:first-child,
ul.sidebar-menu > li a:focus span.icon-sidebar:first-child {
    background:#76CF1C;
    color:#ffffff;
    padding: 5px;
    -webkit-transition:all 0.8s ease;
    -moz-transition:all 0.8s ease;
    -o-transition:all 0.8s ease;
    -ms-transition:all 0.8s ease;
    transition:all 0.8s ease;
    -webkit-transform:scale(.8);
    transform:scale(.8);
    border-radius: 100%;
    box-shadow: 0 1px 4px rgba(0,0,0,-0.84),0 1px 4px rgba(0,0,0,.20);
    /*webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);*/
}

ul.sidebar-menu > li a:hover span.icon-sidebar:first-child:after {

}

ul.sidebar-menu li a i {
    font-size:15px;
    padding-right:6px;
}
ul.sidebar-menu li a:hover i,ul.sidebar-menu li a:focus i {
    color:#ffffff;
}
ul.sidebar-menu li a.active i {
    color:#ffffff;
}
ul.sidebar-menu li ul li span.fa.dcjq-icon:after {
    position: absolute;
    top: -4px;
}
.mail-info,.mail-info:hover {
    margin:-3px 6px 0 0;
    font-size: 11px;
}


/* ============================================================
PROFILE SIDEBAR SECTION
============================================================ */
ul.sidebar-menu li.sidebar-profile {
	background-color: #3A434D;
	padding: 10px;
	color: #fff;
	text-align: center;
	border-bottom: 10px solid #76CF1C;
}
ul.sidebar-menu li.sidebar-profile .name {
	margin-top: 10px;
    font-weight: bold;
}

ul.sidebar-menu li.sidebar-profile .image img {
	border-radius: 60%;
}

ul.sidebar-menu li.sidebar-profile .status {
	margin-top: -10px;
	font-size: 7;
    margin-left: -9px;
}

ul.sidebar-menu li.sidebar-profile .status small i {
	color: #76CF1C;
}	

ul.sidebar-menu li.sidebar-profile .profile-options {
    margin-top: 10px;
    position: absolute;
    width: 100%;
    margin-right: 10px;
    right: -5px;
    top: 3px;
}  

ul.sidebar-menu li.sidebar-profile .profile-options-close, 
ul.sidebar-menu li.sidebar-profile .profile-options-open {
    cursor: pointer;
    color: #999;
}

ul.sidebar-menu li.sidebar-profile .profile-options-close:hover, 
ul.sidebar-menu li.sidebar-profile .profile-options-open:hover {
    color: #fff;
}

ul.sidebar-menu li.sidebar-profile .profile-options-close {
    margin-top: -8px;
}

ul.sidebar-menu li.sidebar-profile .profile-options-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    margin-top: 0px;
    background : rgba(29, 34, 38, .9);
    z-index: 9;
    display: none;
    color: white;
} 

ul.sidebar-menu li.sidebar-profile .profile-options-container .profile-options-list {
    margin-top: 33px;
}

ul.sidebar-menu li.sidebar-profile .profile-options-container .profile-options-list  p a {
    font-weight: bold;
    color: white;
    text-align: center;
    padding:0px;
}

ul.sidebar-menu li.sidebar-profile .profile-options-container .profile-options-list  p a:hover, 
ul.sidebar-menu li.sidebar-profile .profile-options-container .profile-options-list  p a:active {
    background: transparent;
}


ul.sidebar-menu li.sidebar-profile .profile-main {
    margin-top: 8px;
}



/* ============================================================
RIGHT SIDEBAR SECTION
============================================================ */
    #right-sidebar {
        background:#fff;
        width:240px;
        position:fixed;
        height:100%;
        z-index:1000;
        right:0px;
        top:0;
        margin-top: 60px;
        -webkit-transition:all .5s ease-in-out;
        -moz-transition:all .5s ease-in-out;
        -o-transition:all .5s ease-in-out;
        transition:all .5s ease-in-out;
    }

    .hide-right-sidebar {
        /*right:-240px !important;*/
        margin-right:-240px;
    }

    #right-sidebar > .rightside-navigation  {
        height: 100%;
        margin-top: -78px;
    }


    #right-sidebar ul.sidebar-menu,ul.sidebar-menu li ul.sub {
        margin:-2px 0 0;
        padding:0;
    }
    #right-sidebar ul.sidebar-menu {
        padding-top:80px;
        list-style: none;
        /*background-color: #fff;*/
    }

    .fixed-width-unfixed-header #right-sidebar > .rightside-navigation  > ul {
        padding-top:20px !important;
    }

    #right-sidebar>ul>li>ul.sub {
        display:none;
    }
    #right-sidebar .sub-menu>.sub li a {
        padding-left:46px;
    }
    #right-sidebar>ul>li.active>ul.sub,#sidebar>ul>li>ul.sub>li>a {
        display:block;
    }
    #right-sidebar ul.sidebar-menu li ul.sub li {
        background:#F0F0F0;
        margin-bottom:0;
        margin-left:0;
        margin-right:0;
        list-style: none;
    }

    #right-sidebar ul.sidebar-menu li ul.sub li a {
        margin-left: 25px;
    }

    #right-sidebar ul.sidebar-menu li ul.sub li:before {
        content: "";
        top: -1px;
        bottom: -1px;
        position: absolute;
        width: 1px;
        border-left: 0px dashed rgba(12, 12, 12, 0.3);
        z-index: 1;
        margin-left:40px;
    }

    #right-sidebar ul.sidebar-menu li ul.sub li a:before {
        content: "";
        left: 40px; 
        top: 20px;
        position: absolute;
        display: block;
        width: 21px;
        border-bottom: 0px dashed rgba(12, 12, 12, 0.3);
        z-index: 1;
    }

    /** For second level sub menu **/
    #right-sidebar ul.sidebar-menu li ul.sub li ul.sub li a:before {
        content: "";
        left: 40px; 
        top: 20px;
        position: absolute;
        display: block;
        width: 34px;
        border-bottom: 0px dashed rgba(12, 12, 12, 0.3);
        z-index: 1;
    }

    #right-sidebar ul.sidebar-menu li ul.sub li > ul.sub li a {
        padding-left: 60px !important;
    }

    #right-sidebar ul.sidebar-menu li ul.sub li a {
        font-size:12px;
        padding-top:13px;
        padding-bottom:13px;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
        color:#738699;
        position:relative;
    }

    #right-sidebar ul.sidebar-menu li ul.sub li a:hover,#right-sidebar ul.sidebar-menu li ul.sub li.active a {
        color:#ffffff;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
        display:block;
        background:#C4C4C4;
    }
    #right-sidebar ul.sidebar-menu li {
        border-bottom:1px solid rgba(255,255,255,0.05);
    }
    #right-sidebar ul.sidebar-menu li.sub-menu {
        line-height:15px;
    }
    #right-sidebar ul.sidebar-menu ul.sub li {
        border-bottom:none;
    }
    #right-sidebar ul.sidebar-menu li a span {
        display:inline-block;
    }



    #right-sidebar ul.sidebar-menu li a {
        color:#aeb2b7;
        text-decoration:none;
        display:block;
        padding:8px 0 8px 25px;
        font-size:12px;
        outline:none;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }

    #right-sidebar ul.sidebar-menu li a.active,#right-sidebar ul.sidebar-menu li a:focus {
        background-color: #eee;
        font-weight: bold;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }   

    #right-sidebar ul.sidebar-menu li ul.sub li a.active {
        font-weight: bold;
    }   

    #right-sidebar ul.sidebar-menu li a i.fa {
        padding: 10px;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }


    #right-sidebar ul.sidebar-menu li a.active i.fa,ul.sidebar-menu li a:hover i.fa,ul.sidebar-menu li a:focus i.fa {
        background:#76CF1C;
        color:#ffffff;
        padding: 10px;
        -webkit-transition:all 0.8s ease;
        -moz-transition:all 0.8s ease;
        -o-transition:all 0.8s ease;
        -ms-transition:all 0.8s ease;
        transition:all 0.8s ease;

        webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }

    #right-sidebar ul.sidebar-menu li a i {
        font-size:15px;
        padding-right:6px;
    }
    #right-sidebar ul.sidebar-menu li a:hover i,ul.sidebar-menu li a:focus i {
        color:#ffffff;
    }
    #right-sidebar ul.sidebar-menu li a.active i {
        color:#ffffff;
    }
    .mail-info,.mail-info:hover {
        margin:-3px 6px 0 0;
        font-size: 11px;
    }


    /** Profile Sidebar **/
    #right-sidebar ul.sidebar-menu li.sidebar-profile {
        background-color: #3A434D;
        padding: 10px;
        color: #fff;
        text-align: center;
        border-bottom: 10px solid #76CF1C;
    }
    #right-sidebar ul.sidebar-menu li.sidebar-profile .name {
        margin-top: 10px;
    }

    #right-sidebar ul.sidebar-menu li.sidebar-profile .image img {
        border-radius: 60%;
    }

    #right-sidebar ul.sidebar-menu li.sidebar-profile .status {
        margin-top: -10px;
        font-size: 7;
    }

    #right-sidebar ul.sidebar-menu li.sidebar-profile .status small i {
        color: #76CF1C;
    } 






/* ============================================================
MAIN CONTENT SECTION
============================================================ */
#main-content {
    margin-left:240px;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

.merge-right-sidebar {
    margin-right: 300px;
}

.merge-right-sidebar-notifications {
    margin-right: 288.9px;
}

#main-content-right {
    margin-right:240px;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}
.footer {
    min-height:60px;
    padding:0 15px;
}
.header {
    left:0;
    right:0;
    z-index:1061;
    background:#fff;
    height: 60px;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
    box-shadow: 0 1px 4px rgba(0,0,0,-0.84),0 1px 4px rgba(0,0,0,.20)
}
.merge-header {
    margin-right:240px;
}
.fixed-top {
    position:fixed;
    /*box-shadow:1px 0 3px rgba(0,0,0,.15);*/
    border-bottom: 1px solid #F5EFF5;
}

.fixed-width-unfixed-header section.wrapper {
    display:inline-block;
    margin-top:0px;
    padding:27px;
    width:100%;
}

.wrapper {
    display:inline-block;
    margin-top:0px;
    padding:27px;
    width:100%;
}

/*** Boxed page + fixed header + no sidebar ***/
body.fixed-width.no-sidebar .wrapper { 
    margin-top: 57px;
}

/*** Full width content + fixed header ***/
body.full-content-fixed-header .wrapper {
    margin-top: 58px;
}

/*** Right Sidebar ***/
#main-content-right .wrapper {
    margin-top: 58px;
}

/*** Boxed Fixed Header ***/
.boxed-page-fixed-header .wrapper {
    margin-top: 58px;
}

.brand {
    background:#ffffff;
    float:left;
    width:240px;
    height:60px;
    position:relative;
    border-bottom: 1px solid #F5EFF5;
}

/*** Boxed page + unfixed header ***/
body.fixed-width-unfixed-header .brand {
    background:#ffffff;
    float:left;
    width:240px;
    height:60px;
    position:relative;
    border-bottom: 1px solid #fff;
}

/*** Full width content + unfixed header ***/
body.full-content-unfixed-header .brand {
    border-bottom: 1px solid #fff;
}

a.logo {
    font-size:21px;
    color:#738699;
    float:left;
    margin: 8px 0 0 10px;
    text-transform:uppercase;
}
a.logo:hover,a.logo:focus {
    text-decoration:none;
    outline:none;
}
a.logo span {
    color: #FF6C60;
}

/* ============================================================
NOTIFICATIONS SECTION
============================================================ */
#top_menu .nav>li,ul.top-menu>li {
    float:left;
}
.notify-row {
    float:right;
    margin-top:23px;
    margin-left:25px;
}
ul.top-menu {
    margin-right:15px;
    margin-top: 0;
}
ul.top-menu > li > a {
    color:#666666;
    font-size:16px;
    background:transparent;
    padding:4px 8px;
    margin-right:15px;
    padding-right:8px !important;
}
ul.top-menu>li>a:hover,ul.top-menu>li>a:focus {
    background:#32D2C9;
    text-decoration:none;
    color:rgba(0,0,0,0.3) !important;
    padding-right:8px !important;
}
.notify-row .badge {
    position:absolute;
    right:-10px;
    top:-10px;
    z-index:100;
}

.top-notifications {
    margin-top: 12px;
}

.badge-notify {
    margin-top:-10px;
}



/* ============================================================
CUSTOM DROPDOWN SECTION
============================================================ */
.dropdown-menu>li>a {
    color: gray;
    padding: 10px;
    padding-left: 20px;
}

.dropdown-menu>li>a:hover {
    background: #fff;
    color: gray;
}    

.navbar-nav .open .dropdown-menu {
    position: absolute;
    background: #fff;
    margin-top: 0;
    border: 1px solid #D9DEE4;
    -webkit-box-shadow: none;
}

.dropdown-menu.extended {
    max-width:320px !important;
    min-width:160px !important;
    top:42px;
    width:300px !important;
    padding:0 10px;
    box-shadow:0 0px 0px rgba(0,0,0,0.1) !important;
    border-radius:0px;
    -webkit-border-radius:0px;
    background:#fff;
    border:none;
    left:-10px;
}
.notify-row .notification span.label {
    display:inline-block;
    height:21px;
    padding:5px;
    width:22px;
    font-size:12px;
    margin-right:10px;
}
.dropdown-menu.extended .alert-icon,.noti-info {
    float:left;
}
.noti-info {
    padding-left:10px;
    padding-top:6px;
    color:#414147;
}
.dropdown-menu.extended .alert {
    margin-bottom:10px;
}
.dropdown-menu.extended .alert-icon {
    border-radius:100%;
    display:inline-block;
    height:35px;
    width:35px;
}
.dropdown-menu.extended .alert-icon i {
    font-size:16px;
    width:35px;
    line-height:35px;
    height:35px;
}
.dropdown-menu.extended.inbox li a,.dropdown-menu.extended.tasks-bar li a {
    background:#f1f2f7;
    border-radius:5px;
    -webkit-border-radius:5px;
    padding:10px;
    margin-bottom:10px;
    float:left;
    width:100%;
}
.dropdown-menu.extended li p {
    margin:0;
    padding:10px 0;
    border-radius:0px;
    -webkit-border-radius:0px;
}
.dropdown-menu.extended li a {
    font-size:12px;
    list-style:none;
}
.dropdown-menu.extended.logout {
    padding:10px;
}
.dropdown-menu.extended.logout li a {
    padding:10px;
}
.dropdown-menu.extended li a:hover {
    color:#32323a;
}
.dropdown-menu.tasks-bar .task-info .desc {
    font-size:13px;
    font-weight:normal;
    float:left;
    width:80%;
}
.dropdown-menu.tasks-bar .task-info .desc h5 {
    color:#32323a;
    text-transform:uppercase;
    font-size:12px;
    font-weight:600;
    margin-bottom:5px;
    margin-top:0;
}
.dropdown-menu.tasks-bar .task-info .desc p {
    padding-top:0;
    color:#8f8f9b;
    font-weight:300;
}
.dropdown-menu.tasks-bar .task-info .percent {
    width:20%;
    float:right;
    font-size:13px;
    font-weight:600;
    padding-left:10px;
    line-height:normal;
}
.dropdown-menu.tasks-bar .progress {
    background:#fff;
}
.dropdown-menu.extended .progress {
    margin-bottom:0 !important;
    height:10px;
}
.dropdown-menu.inbox li a .photo img {
    border-radius:2px 2px 2px 2px;
    -webkit-border-radius:2px 2px 2px 2px;
    float:left;
    height:40px;
    margin-right:10px;
    width:40px;
}
.dropdown-menu.inbox li a .subject {
    display:block;
}
.dropdown-menu.inbox li a .subject .from {
    font-size:12px;
    font-weight:600;
}
.dropdown-menu.inbox li a .subject .time {
    font-size:11px;
    font-style:italic;
    font-weight:bold;
    position:absolute;
    right:20px;
}
.dropdown-menu.inbox li a .message {
    display:block !important;
    font-size:11px;
}


/* ============================================================
TOP NAVBAR SECTION
============================================================ */
.top-nav {
    margin-top:0px;
}

/* ============================================================
NAV LEFT SECTION
============================================================ */
.top-nav .navbar-left li{
    padding-top:18.8px; 
    padding-bottom:17.6px; 
    padding-left: 10px;
    padding-right: 10px;
}
    
.top-nav .navbar-left li.dropdown > a {
    font-weight: bolder;
    color: gray;
}

.top-nav .navbar-left > li > a > span {
    color: gray;
    font-size: 1.5em;
    padding-top: 10px;
}

.top-nav .navbar-left li.dropdown{
    position: relative;
    padding-top: 15px !important;
    padding-bottom: 17.8px !important;
}    

.top-nav .navbar-left ul.dropdown-menu li {
    padding: 0px !important;
}


/* ============================================================
NAV RIGHT SECTION
============================================================ */
.top-nav .navbar-right {
    margin-right:0px !important;
}

.top-nav .navbar-right li {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 10px;
    background-color: #fff;
}

.top-nav .navbar-right > li {
    background: transparent;
}

.top-nav .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color: #ffffff;
}

.top-nav .navbar-nav li.dropdown {
    padding-top: 3px;
    padding-bottom: 12px;
    padding-top: 13.6px;
}

.top-nav .navbar-nav li a.info-number {
    margin-top: 7.3px;
}    

.top-nav .navbar-nav li.search-box {
    padding-top: 12.7px;
    padding-bottom: 12.5px;
    padding-left: 12.5px;
    padding-right: 12.5px;
}

.top-nav img {
    margin-right: 10px;
    border-radius:50%;
    -webkit-border-radius:50%;
    width:33px;
}
.top-nav .icon-user i {
    height: 33px;
    width:33px;
    line-height: 33px;
    display: inline-block;
    font-size: 1.7em;
    padding-left: 10px;
}

.top-nav .icon-user .username {
    color: #555555;
    font-size: 13px;
    position: relative;
    top: -5px;
}

.top-nav .icon-user .caret {
    position: relative;
    top: -4px;
}

.top-nav ul.top-menu>li .dropdown-menu.logout {
    width:170px !important;
}
.top-nav li.dropdown .dropdown-menu {
    float:right;
    right:0;
    left:auto;
}

.dropdown-menu {
    display: none;
    float: left;
    font-size: 12px;
    left: 0;
    list-style: none outside none;
    padding: 0;
    position: absolute;
    text-shadow: none;
    top: 100%;
    z-index: 1000;
    border: 1px solid rgba(155, 155, 155);
    border-radius:0px;
    webkit-box-shadow: 0 0 0 rgba(0,0,0,.175);
    box-shadow: 0 0 0 rgba(0,0,0,.175); 
}


ul.msg_list li {
    background: #f7f7f7;
    padding: 5px;
    display: flex;
    margin: 6px 6px 0;
    width: 96% !important;
}



.top-nav .dropdown-menu li a {
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
}

.top-nav .dropdown-menu li a:hover, .top-nav .dropdown-menu li a:focus  {
    background-color: white;
    color: gray;
}

.top-nav .navbar-right li ul.dropdown-usermenu li {
    padding: 0px !important;
}


/* ============================================================
HOVER PLUGIN FOR TO NAV SECTION
============================================================ */
.top-nav .hvr-bounce-to-right:before {
    background: #F5EFF5 !important;
}

.top-nav .navbar-right li ul.msg_list li {
    border-left: 0px solid #ffffff !important;
}

ul.msg_list li:last-child {
    margin-bottom: 6px;
    padding: 10px;
}

ul.msg_list li.top-nav-li-see-all-alerts a:hover {
    background-color: transparent !important;
    color: inherit !important;
    text-decoration: none;
}


ul.msg_list li a {
    padding: 3px 5px !important;
}

ul.msg_list li a .image img {
    border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    float: left;
    margin-right: 10px;
    width: 11%;
}

ul.msg_list li a .time {
    font-size: 11px;
    font-style: italic;
    font-weight: bold;
    position: absolute;
    right: 35px;
}

ul.msg_list li a .message {
    display: block;
    font-size: 11px;
}

.dropdown-menu.msg_list {
    width: 300px !important;
}

.dropdown-menu.msg_list span {
    white-space: normal;
}

.top-nav .navbar-nav .open .dropdown-menu {
    position: absolute;
    background: #fff;
    margin-top: 2px;
    border: 1px solid #F5EFF5;
    -webkit-box-shadow: none;
    margin-right: -1px;
}

.top-nav .info-number .badge {
    font-size: 10px;
    font-weight: normal;
    line-height: 13px;
    padding: 2px 6px;
    position: absolute;
    right: 7px;
    top: -7px;
}

.dropdown-menu.extended.logout>li {
    float:left;
    width:100%;
}
.log-arrow-up {
    background:url("../images/top-arrow.png") no-repeat;
    width:18px;
    height:10px;
    margin-top:-20px;
    float:right;
    margin-right:15px;
}
.dropdown-menu.extended.logout>li>a {
    border-bottom:none !important;
}
.full-width .dropdown-menu.extended.logout>li>a:hover {
    background:#F1F2F7 !important;
    color:#32323a !important;
}
.dropdown-menu.extended.logout>li>a:hover {
    background:#F1F2F7 !important;
    border-radius:5px;
}
.dropdown-menu.extended.logout>li>a:hover i {
    color:#32D2C9;
}
.dropdown-menu.extended.logout>li>a i {
    font-size:17px;
}
.dropdown-menu.extended.logout>li>a>i {
    padding-right:10px;
}


/*form*/
.position-center {
    width:62%;
    margin: 0 auto;
}
/*----*/
.notify-arrow {
    background:url("../images/top-arrow.png") no-repeat;
    width:18px;
    height:10px;
    margin-top:0;
    opacity:0;
    position:absolute;
    left:16px;
    top:-20px;
    transition:all 0.25s ease 0s;
    z-index:10;
    margin-top:10px;
    opacity: 1;
}
/*search*/
.search {
    width:20px;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease;
    border-radius:0% !important;
    -webkit-border-radius:0% !important;
    border:1px solid #fff !important;
    box-shadow:none;
    background:#f6f6f6 url("../images/search-icon.png") no-repeat 10px 8px;
    padding:0 5px 0 30px;
    color:#fff;
    border-radius:100px;
    -webkit-border-radius:100px;
}
.search:focus {
    width:180px;
    border:1px solid #f6f6f6;
    box-shadow:none;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    -ms-transition:all .3s ease;
    -o-transition:all .3s ease;
    transition:all .3s ease;
    color:#c8c8c8;
    font-weight: 300;
}
.todo-search:focus{
    width:100% !important;
}
/*--left sidebar toggle---*/
.sidebar-toggle-box {
    float:left;
    margin-top:23px;
    margin-left:-15px;
    background:#61B4E7;
    border-radius:100%;
    -webkit-border-radius:100%;
    width:32px;
    height:32px;
    position:absolute;
    right:-15px;
    box-shadow: 0 1px 4px rgba(0,0,0,-0.84),0 1px 4px rgba(0,0,0,.20);
}
.sidebar-toggle-box .fa-bars {
    cursor:pointer;
    display:inline-block;
    font-size:15px;
    padding:8px 8px 8px 9px;
    color:white;
}
.sidebar-toggle-box:hover {
    background:#F6F6F6;
}

/*--right sidebar toggle---*/
.right-sidebar-toggle-box {
    float:left;
    margin-top:23px;
    margin-left:-15px;
    background:#76CF1C;
    border-radius:100%;
    -webkit-border-radius:100%;
    width:32px;
    height:32px;
    position:absolute;
    right:-15px;
    box-shadow: 0 1px 4px rgba(0,0,0,-0.84),0 1px 4px rgba(0,0,0,.20);
}
.right-sidebar-toggle-box .fa-bars {
    cursor:pointer;
    display:inline-block;
    font-size:15px;
    padding:8px 8px 8px 9px;
    color:white;
}
.right-sidebar-toggle-box:hover {
    background:#F6F6F6;
}


/* ============================================================
RIGHT SIDEBAR TOGGLE SECTION
============================================================ */
.btn-bottom-right-sidebar-close {
    width: 32px;
    height: 32px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: #E74C3C !important;
    font-size: 15px;
    padding: 6px 8px 8px 10px;
    border-radius: 100%;
    color: #fff;
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.35);
    opacity: 0.8;
    cursor: pointer;
    display: none;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
    transition:all 0.3s ease;
}

/*.hide-right-bar-notifications .right-sidebar-close {
    display: none;
}*/

.right-sidebar-close:hover {
    opacity: 0.6;
    -webkit-transform:scale(1.3);
    transform:scale(1.3);
}
.right-sidebar-toggle-box {
    float:left;
    margin-top:23px;
    margin-left:-15px;
    background:#76CF1C;
    border-radius:2%;
    -webkit-border-radius:2%;
    width:32px;
    height:32px;
    position:absolute;
    right:-15px;
}
.right-sidebar-toggle-box .fa-bars {
    cursor:pointer;
    display:inline-block;
    font-size:15px;
    padding:8px 8px 8px 9px;
    color:white;
}
.right-sidebar-toggle-box:hover {
    background:#F6F6F6;
}

.hide-left-bar {
    margin-left:-240px !important;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}
.open-right-bar {
    right:0px !important;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}
.merge-right {
    margin-right:0px !important;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}
.merge-left {
    margin-left:0px !important;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}
.hide-right-bar {
    margin-right:-240px !important;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}
.hide-right-bar-notifications {
    margin-right:-300px !important;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}
.toggle-right-box {
    float:left;
    background:#f6f6f6;
    border-radius:50%;
    -webkit-border-radius:50%;
    width:35px;
    height:35px;
}
.toggle-right-box:hover {
    background:#32D2C9;
}
.toggle-right-box:hover .fa-bars {
    color:rgba(0,0,0,0.3);
}
.toggle-right-box .fa-bars {
    cursor:pointer;
    display:inline-block;
    font-size:15px;
    padding:10px;
    color: #bfbfc1;
}

/* ============================================================
SIDEBAR FOOTER SECTION
============================================================ */
.sidebar-footer {
    bottom: 0px;
    clear: both;
    display: block;
    padding: 0px 0 0 0;
    position: fixed;
    width: 240px;
    z-index: 1000;
    background: #313534;
}

.sidebar-footer a {
    padding: 10px 0 5px;
    text-align: center;
    width: 25%;
    font-size: 17px;
    display: block;
    float: left;
    background: #3A434D;
    color:#ffffff;
    cursor: pointer;
}

.sidebar-footer a:hover {
    background: #425567;
}


/* ============================================================
SMALL BOX SECTION
============================================================ */
.small-box {
    /*border-radius: 2px;*/
    position: relative;
    display: block;
    margin-bottom: 20px;
    /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border:3px solid rgba(155, 155, 155, 0.1);*/
    -webkit-transition:all 0.8s ease;
    -moz-transition:all 0.8s ease;
    -o-transition:all 0.8s ease;
    -ms-transition:all 0.8s ease;
    transition:all 0.8s ease;
}

.small-box.bordered {
    border:1px solid #eee;
}

.small-box > .inner {
  padding: 10px;
}

.small-box > .inner > .left {
    float: left;
}

.small-box > .inner > .right {
    float: right;
}

.small-box > .small-box-footer {
  position: relative;
  text-align: center;
  padding: 4px;
  color: #fff;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  z-index: 10;
  background: rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
.small-box > .small-box-footer:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.15);
}
.small-box h3 {
  font-size: 38px;
  font-weight: bold;
  margin: 0 0 10px 0;
  white-space: nowrap;
  padding: 0;
}
.small-box p {
  font-size: 15px;
}
.small-box p > small {
  display: block;
  color: #f9f9f9;
  font-size: 13px;
  margin-top: 5px;
}
.small-box h3,
.small-box p {
  z-index: 5px;
}
.small-box .icon {
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
  position: absolute;
  top: -10px;
  right: 10px;
  z-index: 0;
  font-size: 90px;
  color: rgba(0, 0, 0, 0.15);
}
.small-box:hover {
  text-decoration: none;
  color: #f9f9f9;
}
.small-box:hover .icon {
  font-size: 95px;
}

.small-box .progress {
    margin-bottom: 8px;
}

@media (max-width: 767px) {
  .small-box {
    text-align: center;
  }
  .small-box .icon {
    display: none;
  }
  .small-box p {
    font-size: 12px;
  }
}



/* ============================================================
TILES SECTION
============================================================ */
.tile {
  display: block;
  cursor: pointer;
  -webkit-perspective: 0;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.2s;
  float: left;
  min-width: 75px;
  min-height: 75px;
  text-align: center;
  opacity: 0.75;
  background-color: #2e8bcc;
  z-index: 1;
  border: 4px #ffffff solid;
  color: #ffffff;
}
.tile h1,
.tile h2,
.tile h3,
.tile h4,
.tile h5,
.tile h6 {
  color: #ffffff;
  -webkit-user-select: none;
}
.tile h2 {
  font-size: 1.75em;
  margin-top: -20px;
  margin-left: 0px;
}
.tile h3,
.tile h4 {
  margin-top: -15px;
}
.tile h1.tile-text,
.tile h2.tile-text,
.tile h3.tile-text,
.tile h4.tile-text {
  margin-top: 20px;
}
.tile a:hover {
  text-decoration: none;
}
.tile img {
  border: 0;
}
.tile:hover {
  opacity: 1;
}
.tile .tile-label {
  position: absolute;
  bottom: 10px;
  left: 20px;
  font-size: 14px;
  color: #ffffff;
}
.tile .tile-content .tile-icon-large {
  margin-left: 0px;
  vertical-align: middle !important;
  text-align: center;
}
.tile .tile-content {
  padding-top: 20px;
  line-height: normal;
  position: relative;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.tile.tile-blue {
  background-color: #2e8bcc;
}
.tile.tile-green {
  background-color: #339933;
}
.tile.tile-red {
  background-color: #e51400;
}
.tile.tile-yellow {
  background-color: #ffc40d;
}
.tile.tile-orange {
  background-color: #f39c12;
}
.tile.tile-pink {
  background-color: #e671b8;
}
.tile.tile-purple {
  background-color: #7b4f9d;
}
.tile.tile-lime {
  background-color: #8cbf26;
}
.tile.tile-magenta {
  background-color: #ff0097;
}
.tile.tile-teal {
  background-color: #00aba9;
}
.tile.tile-turquoise {
  background-color: #1abc9c;
}
.tile.tile-green-sea {
  background-color: #16a085;
}
.tile.tile-emerald {
  background-color: #2ecc71;
}
.tile.tile-nephritis {
  background-color: #27ae60;
}
.tile.tile-peter-river {
  background-color: #3498db;
}
.tile.tile-belize-hole {
  background-color: #2980b9;
}
.tile.tile-amethyst {
  background-color: #9b59b6;
}
.tile.tile-wisteria {
  background-color: #8e44ad;
}
.tile.tile-wet-asphalt {
  background-color: #34495e;
}
.tile.tile-midnight-blue {
  background-color: #2c3e50;
}
.tile.tile-sun-flower {
  background-color: #f1c40f;
}
.tile.tile-carrot {
  background-color: #e67e22;
}
.tile.tile-pumpkin {
  background-color: #d35400;
}
.tile.tile-alizarin {
  background-color: #e74c3c;
}
.tile.tile-pomegranate {
  background-color: #c0392b;
}
.tile.tile-clouds {
  background-color: #ecf0f1;
}
.tile.tile-clouds h1,
.tile.tile-clouds h2,
.tile.tile-clouds h3,
.tile.tile-clouds h4,
.tile.tile-clouds h5,
.tile.tile-clouds h6 {
  color: #34495e;
}
.tile.tile-clouds .tile-label {
  color: #34495e;
}
.tile.tile-silver {
  background-color: #bdc3c7;
}
.tile.tile-concrete {
  background-color: #95a5a6;
}
.tile.tile-asbestos {
  background-color: #7f8c8d;
}
.tile.tile-info {
  background-color: #3498db;
}
.tile.tile-danger {
  background-color: #e74c3c;
}
.tile.tile-warning {
  background-color: #f1c40f;
}
.tile.tile-success {
  background-color: #2ecc71;
}
a.fa-links {
  color: #ffffff;
}
a.fa-links:hover,
a.fa-links:focus {
  color: #ffffff;
}
.tile.tile-small {
  height: 70px;
  width: 70px;
}
.tile.tile-small-auto-height {
  width: 70px;
}

.tile.tile-medium {
  height: 150px;
  width: 150px;
}

.tile.tile-medium-auto-height {
  width: 150px;
}

.tile.tile-wide,
.tile.tile-double {
  height: 150px;
  width: 310px;
}
.tile.tile-large {
  height: 310px;
  width: 310px;
}


/* ============================================================
HOVER PLUGIN SECTION
============================================================ */
/* Underline From Center */
.hvr-underline-from-center-global {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center-global:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: #fafafa;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center-global:hover:before, 
.hvr-underline-from-center-global:focus:before, 
.hvr-underline-from-center-global:active:before {
  left: 0;
  right: 0;
}


/* ============================================================
HOVER BOUNCE TO RIGHT FOR GLOBAL SECTION
============================================================ */
.hvr-bounce-to-right-global-parent {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.7s;
  transition-duration: 0.7s;
}
.hvr-bounce-to-right-global-parent:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #eee;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.7s;
  transition-duration: 0.7s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-bounce-to-right-global-parent:hover,
.hvr-bounce-to-right-global-parent:focus, .hvr-bounce-to-right-global-parent:active {
  color: #aeb2b7;
}
.hvr-bounce-to-right-global-parent:hover:before, 
.hvr-bounce-to-right-global-parent:focus:before, 
.hvr-bounce-to-right-global-parent:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}


/* ============================================================
HOVER BOUNCE TO RIGHT SECTION
============================================================ */
.hvr-bounce-to-right-sidebar-parent {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.7s;
  transition-duration: 0.7s;
}
.hvr-bounce-to-right-sidebar-parent:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #eee;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.7s;
  transition-duration: 0.7s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-bounce-to-right-sidebar-parent:hover,
.hvr-bounce-to-right-sidebar-parent:focus, .hvr-bounce-to-right-sidebar-parent:active {
  color: #aeb2b7;
}
.hvr-bounce-to-right-sidebar-parent:hover:before, 
.hvr-bounce-to-right-sidebar-parent:focus:before, 
.hvr-bounce-to-right-sidebar-parent:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}



/* ============================================================
PROGRESS BAR SECTION
============================================================ */
.progress {
    border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
}

.progress-5 {
    height: 5px;
    border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
}


/* ============================================================
THEMA PANELS SECTION
============================================================ */

/*Bootstrap Panel*/
.panel .panel-body {
    padding: 20px;
}

.c_panel {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    /*padding: 10px 17px;*/
    display: inline-block;
    background: #fff;
    /*border:1px solid rgba(155, 155, 155, 0.1);*/
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    opacity: 1;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    -ms-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}

.c_panel .loading-overlay {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -25px;
}

.c_panel .scroller {
    padding: 25px;
}

.c_panel .content-top-unpadding {
    margin-top: -11px;
}

.c_panel .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(246, 243, 243, 0.5);
}
.c_panel .overlay > .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    color: #000;
    font-size: 30px;
}

.panel-placeholder{
    background: #f0f0f0;
    border:1px dashed #ddd;
}


.unpaddinglr {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.paddinglr {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.c_panel .panel_options li a {
    cursor: pointer;
}


.c_title {
    border-bottom: 1px solid rgba(155, 155, 155, 0.1);
    padding-left: 20px;
    padding-top: 8px;
    padding-bottom: 3px;
}


/* ============================================================
PANEL DEFAULT COLOR SECTION
============================================================ */
.c_panel_default .c_title {
    background: #aab2bd;
    color: #fff;
}

.c_panel_default .c_title .panel_options{
    background: transparent;
    color: #fff;
    border-left: 1px solid #848D9A;
}    

.c_panel_default .c_title .panel_options > li > a {
    color: #fff;
}

.c_panel_default .c_title .panel_options > li > a:hover {
    color: #fff;
    background-color: inherit;
}

.c_panel_default .c_title .panel_options span {
    color: #fff;
}


.c_panel_default .c_title h2, .c_panel_default .c_title h2 small {
    color: #fff;
}   


/* ============================================================
PANEL DEFAULT TOP BORDERED COLOR SECTION
============================================================ */
.c_panel.top_bordered_default .c_title {
    border-top: 3px solid #aab2bd;
    color: inherit;
}


/* ============================================================
PANEL PRIMARY BACKGROUND SECTION
============================================================ */
.c_panel_primary .c_title {
    background: #337ab7;
    color: #fff;
}

.c_panel_primary .c_title .panel_options{
    background: transparent;
    color: #fff;
    border-left: 1px solid #286090;
}    

.c_panel_primary .c_title .panel_options > li > a {
    color: #fff;
}


.c_panel_primary .c_title .panel_options > li > a:hover {
    color: #fff;
    background-color: inherit;
}

.c_panel_primary .c_title .panel_options span {
    color: #fff;
}

.c_panel_primary .c_title h2, .c_panel_primary .c_title h2 small {
    color: #fff;
} 


/* ============================================================
PANEL PRIMARY TOP BORDERED COLOR SECTION
============================================================ */
.c_panel.top_bordered_primary .c_title {
    border-top: 3px solid #337ab7;
    color: inherit;
}


/* ============================================================
PANEL INFO BACKGROUND SECTION
============================================================ */
.c_panel_info .c_title {
    background: #5bc0de;
    color: #fff;
}

.c_panel_info .c_title .panel_options{
    background: transparent;
    color: #fff;
    border-left: 1px solid #31b0d5;
}    

.c_panel_info .c_title .panel_options > li > a {
    color: #fff;
}


.c_panel_info .c_title .panel_options > li > a:hover {
    color: #fff;
    background-color: inherit;
}

.c_panel_info .c_title .panel_options span {
    color: #fff;
}

.c_panel_info .c_title h2, .c_panel_info .c_title h2 small {
    color: #fff;
} 


/* ============================================================
PANEL INFO TOP BORDERED COLOR SECTION
============================================================ */
.c_panel.top_bordered_info .c_title {
    border-top: 3px solid #5bc0de;
    color: inherit;
}


/* ============================================================
PANEL SUCCESS BACKGROUND SECTION
============================================================ */
.c_panel_success .c_title {
    background: #5cb85c;
    color: #fff;
}

.c_panel_success .c_title .panel_options{
    background: transparent;
    color: #fff;
    border-left: 1px solid #449d44;
}    

.c_panel_success .c_title .panel_options > li > a {
    color: #fff;
}


.c_panel_success .c_title .panel_options > li > a:hover {
    color: #fff;
    background-color: inherit;
}

.c_panel_success .c_title .panel_options span {
    color: #fff;
}

.c_panel_success .c_title h2,.c_panel_success .c_title h2 small {
    color: #fff;
} 


/* ============================================================
PANEL SUCCESS TOP BORDERED SECTION
============================================================ */
.c_panel.top_bordered_success .c_title {
    border-top: 3px solid #5cb85c;
    color: inherit;
}


/* ============================================================
PANEL WARNING BACKGROUND SECTION
============================================================ */
.c_panel_warning .c_title {
    background: #f0ad4e;
    color: #fff;
}

.c_panel_warning .c_title .panel_options{
    background: transparent;
    color: #fff;
    border-left: 1px solid #ec971f;
}    

.c_panel_warning .c_title .panel_options > li > a {
    color: #fff;
}


.c_panel_warning .c_title .panel_options > li > a:hover {
    color: #fff;
    background-color: inherit;
}

.c_panel_warning .c_title .panel_options span {
    color: #fff;
}

.c_panel_warning .c_title h2,.c_panel_warning .c_title h2 small {
    color: #fff;
} 


/* ============================================================
PANEL WARNING TOP BORDERED COLOR SECTION
============================================================ */
.c_panel.top_bordered_warning .c_title {
    border-top: 3px solid #f0ad4e;
    color: inherit;
}


/* ============================================================
PANEL DANGER BACKGROUND SECTION
============================================================ */
.c_panel_danger .c_title {
    background: #d9534f;
    color: #fff;
}

.c_panel_danger .c_title .panel_options{
    background: transparent;
    color: #fff;
    border-left: 1px solid #c9302c;
}    

.c_panel_danger .c_title .panel_options > li > a {
    color: #fff;
}


.c_panel_danger .c_title .panel_options > li > a:hover {
    color: #fff;
    background-color: inherit;
}

.c_panel_danger .c_title .panel_options span {
    color: #fff;
}

.c_panel_danger .c_title h2,.c_panel_danger .c_title h2 small {
    color: #fff;
} 


/* ============================================================
PANEL DANGER TOP BORDERED COLOR SECTION
============================================================ */
.c_panel.top_bordered_danger .c_title {
    border-top: 3px solid #d9534f;
    color: inherit;
}

.c_panel .list-group .list-group-item:first-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.c_panel .list-group .list-group-item:last-child {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.c_panel .list-group .list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-top: 1px solid rgba(155, 155, 155, 0.1);
    border-bottom: 1px solid rgba(155, 155, 155, 0.1);
}

.c_panel .c_title a.full-screen {
    font-size: 12px;
    top: 3px;
}

.c_title .filter {
    width: 40%;
    float: right;
}

.c_title h1 {
    float: left;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 20px;
    padding-left: 12px;
    padding-top: 10px;
    padding-bottom: 7px;
}

.c_title h2 {
    margin: 5px 0 6px;
    float: left;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 18px;
}

.c_title h3 {
    margin: 5px 0 6px;
    float: left;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
    padding-bottom: 7px;
}

.c_title h1 small {
    margin-left: 10px;
    white-space: normal;
}

.c_title h2 small {
    white-space: normal;
}

.c_title h3 small {
    margin-left: 10px;
    white-space: normal;
}


.c_title span {
    /*color: #BDBDBD;*/
}

.c_content {
    padding: 20px;
    position: relative;
    width: 100%;
    float: left;
    clear: both;
}


.c_panel .c_footer {
    position: relative;
    border-top: 1px solid rgba(155, 155, 155, 0.1);
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
    background: #fff;
    clear: both;
}

/* ============================================================
PANEL TABS SECTION
============================================================ */
.c_panel .line-tabs.bottom .active a {
    border-bottom: none !important;
    padding-top:10px;
    padding-bottom:11px;
    font-weight: bold;
}

.c_title .line-tabs.bottom {
    border-bottom: 1px solid #fff
}

.c_panel .line-tabs ul>li {
    float: left;
    padding-top:7px;
    padding-bottom:0px;
}

.c_panel .tab-content.unpadding {
    padding: 0px !important;
}

/* ============================================================
PANEL DROPDOWN SECTION
============================================================ */
.c_panel .c_title .panel_options li a .dropdown-menu ul li a{
    color: gray;
}

.c_panel .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color: inherit;
    color: gray;
}

.c_panel .dropdown-menu>li {
    width: 100%;
}

.c_panel .dropdown-menu>li>a:hover {
    background: transparent;
} 


legend {
    padding-bottom: 7px;
}

.panel_options {
    float: right;
    min-width: 70px;
    padding-left: 12px;
    padding-top: 4px;
    padding-bottom: 7px;
    padding-right: 10px;
    background-color: #fff;
    margin-right: 0px;
    border-left: 1px solid rgba(155, 155, 155, 0.1);
}

.panel_options>li {
    float: left;
}

.panel_options>li>a {
    padding: 5px;
    color: #C5C7CB;
    font-size: 14px;
}

.panel_options>li>a:hover {
    background: transparent !important;
}

.modal-title {
    margin: 0;
    line-height: 1.42857143;
}

.demo-placeholder {
    height: 280px;
}



/* ============================================================
SPARKLINE TOOLTIP SECTION
============================================================ */
.jqstooltip {
    background: #34495E !important;
    width: auto !important;
    height: auto !important;
    text-decoration: none;
}

/* ============================================================
DATERANGE PICKER SECTION
============================================================ */
.daterangepicker.dropdown-menu {
    margin-top: 10px;
    padding-left: 4px;
}

.daterangepicker .calendar-table {
    border-radius: 0px;
}

.daterangepicker input[name="daterangepicker_start"] {
    border-radius: 0px;
}

.daterangepicker input[name="daterangepicker_end"] {
    border-radius: 0px;
}

.daterangepicker .input-mini.active {
    border: 1px solid #ddd;
}

.daterangepicker td.start-date {
    border-radius: 0px;
}

.daterangepicker td.end-date {
    border-radius: 0px;
}

.daterangepicker td, .daterangepicker th {
    border-radius: 0px;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

.daterangepicker td.start-date.end-date {
    border-radius: 0px;
}

/* ============================================================
TOP PROFILES SECTION
============================================================ */
.top-profile-heading {
    margin-top: -20px;
    margin-bottom: 10px;
}

.top-profiles-wrapper {
    height: 380px;
    white-space: normal;
    border: 0px solid gray;
    position: relative;
    overflow: hidden;
    margin-top: -10px;
}


ul.top_profiles {
    width: 100%;
}

ul.top_profiles li {
    margin: 0;
    padding: 3px 5px;
    margin-left: -30px;
}

ul.top_profiles li:nth-child(odd) {
    background-color: #f7f7f7;
}

.media .profile_thumb {
    border: 1px solid;
    width: 50px;
    height: 50px;
    margin: 5px 10px 5px 0;
    border-radius: 50%;
    padding: 9px 12px;
}

.media .profile_thumb i {
    font-size: 30px;
}

.media .date {
    background: #ccc;
    width: 52px;
    margin-right: 10px;
    border-radius: 10px;
    padding: 5px;
}

.media .date .month {
    margin: 0;
    text-align: center;
    color: #fff;
}

.media .date .day {
    text-align: center;
    color: #fff;
    font-size: 27px;
    margin: 0;
    line-height: 27px;
    font-weight: bold;
}

.event a img {
    margin-left: -1px;
}

.event .media-body a.title {
    font-weight: bold;
}

.event .media-body p {
    margin-bottom: 0;
}

/* ============================================================
THUMBNAIL SECTION
============================================================ */
a.thumbnail {
    padding: 0;
    border: none;
    margin-bottom: 15px;
}

.thumbnail-style { 
    padding: 7px;
    margin-bottom: 20px; 
}
.thumbnail-style:hover { 
    box-shadow: 0 0 8px #ddd; 
    -webkit-transition: box-shadow 0.2s ease-in-out;
    -moz-transition: box-shadow 0.2s ease-in-out;
    -o-transition: box-shadow 0.2s ease-in-out;
    transition: box-shadow 0.2s ease-in-out;
}

.thumbnail h3,
.thumbnail-style h3 {
    margin: 6px 0 8px 0;
}

.thumbnail h3 a,
.thumbnail-style h3 a {
    color: #585f69;
    font-size: 18px;
}

.thumbnail h3 a:hover,
.thumbnail-style h3 a:hover {
    color: #72c02c;
    text-decoration: none;
}

.thumbnail-style .thumbnail-img {
    position: relative;
    margin-bottom: 11px;
}

.thumbnail-style a.btn-more {
    right: -10px;
    bottom: 10px;
    color: #fff;
    padding: 1px 6px;
    position: absolute;
    background: #72c02c;
    display: inline-block; 
}
.thumbnail-style a.btn-more:hover {
    text-decoration: none;
    box-shadow: 0 0 0 2px #5fb611;
}
.thumbnail-style:hover a.btn-more {
    right: 10px;
}

.thumbnail-hover img {
    position: relative;
   -webkit-transition: all 0.8s ease-in-out;
   -moz-transition: all 0.8s ease-in-out;
   -o-transition: all 0.8s ease-in-out;
   -ms-transition: all 0.8s ease-in-out;
   transition: all 0.8s ease-in-out;
}
.thumbnail-hover:hover img {
   -webkit-transform: scale(1.2) rotate(2deg);
   -moz-transform: scale(1.2) rotate(2deg);
   -o-transform: scale(1.2) rotate(2deg);
   -ms-transform: scale(1.2) rotate(2deg);
   transform: scale(1.2) rotate(2deg);
}
 

 /*** Country List Table styling ***/
table.countries_list {
    width: 100%;
}

table.countries_list td {
    padding: 0 10px;
    line-height: 30px;
    border-top: 1px solid #eeeeee;
}


/* ============================================================
CHART STYLES SECTION
============================================================ */

    /** easy chart **/
    .percent {
        display: inline-block;
        line-height: 96px;
        z-index: 2;
        font-size: 18px;
    }

    .percent:after {
        content: '%';
        margin-left: 0.1em;
        font-size: .8em;
    }

    .chart {
        position: relative;
        display: inline-block;
        width: 100px;
        height: 100px;
        margin-top: 5px;
        margin-bottom: 5px;
        text-align: center;
    }

    .chart canvas {
        position: absolute;
        top: 0; 
        left: 0; 
    }



/* ============================================================
DASHBOARD WIDGETS  SECTION
============================================================ */
    .daily-weather .day {
        font-size: 14px;
        border-top: 2px solid rgba(115, 135, 156, 0.36);
        text-align: center;
        border-bottom: 2px solid rgba(115, 135, 156, 0.36);
        padding: 5px 0;
    }

    .weather-days .col-sm-2 {
        overflow: hidden;
        width: 16.66666667%;
    }

    .weather .row {
        margin-bottom: 0
    }

    /**Earning Graph**/
    .global-stats .global-earning-stats  {
        font-size: 20px;
        text-align: center;
    }

    .global-stats .contenent-earning-stats li{
        list-style: none;
    }   

    .global-stats p.country-breakdown {
        text-align: center;
        font-size: 12px;
        font-weight: bold;
    }

    .global-stats .map-country-earnings {
        height: 200px;
        margin-top: 120px;
    }

    #graph-earnings {
        overflow: hidden;
    }
    

/* ============================================================
TODO LISTS  SECTION
============================================================ */
    .todo-title {
        margin-right:70px;
    }
    .to-do-list {
        padding-left: 0;
    }

    
    .to-do-list li {
        background:#eee;
        position:relative;
        margin-bottom:5px;
        cursor:move;
        list-style: none;
    }

    .to-do-list li hr {
        width: 80%;
        border-bottom: 2px solid #eee;
        float: left;
    }

    .to-do-list li .todo-assignee img {
        -webkit-border-radius: 50%;
        border-radius: 50%;
        width: 40px;
    }

    .to-do-list li p {
        padding-top: 28px;
    }
    .todo-actionlist {
        position:absolute;
        right:15px;
        top:23px;
    }
    .todo-actionlist a {
        height:24px;
        width:24px;
        display:inline-block;
        float:left;
    }
    .todo-actionlist a i {
        height:24px;
        width:24px;
        display:inline-block;
        text-align:center;
        line-height:24px;
        color:#ccc;
    }
    .todo-actionlist a:hover i {
        color:#666;
    }
    .todo-done i {
        font-size:14px;
    }
    .todo-remove i {
        font-size:10px;
    }
    .line-through {
        text-decoration:line-through;
    }
    .todo-action-bar {
        margin-top:20px;
    }
    .drag-marker {
        height:17px;
        display:block;
        float:left;
        width:7px;
        position:relative;
        top:2px;
    }
    .drag-marker i {
        height:2px;
        width:2px;
        display:block;
        background:#ccc;
        box-shadow:5px 0 0 0px #ccc,0px 5px 0 0px #ccc,5px 5px 0 0px #ccc,0px 10px 0 0px #ccc,5px 10px 0 0px #ccc,0px 15px 0 0px #ccc,5px 15px 0 0px #ccc;
        -webkit-box-shadow:5px 0 0 0px #ccc,0px 5px 0 0px #ccc,5px 5px 0 0px #ccc,0px 10px 0 0px #ccc,5px 10px 0 0px #ccc,0px 15px 0 0px #ccc,5px 15px 0 0px #ccc;
        -moz-box-shadow: 5px 0 0 0px #ccc,0px 5px 0 0px #ccc,5px 5px 0 0px #ccc,0px 10px 0 0px #ccc,5px 10px 0 0px #ccc,0px 15px 0 0px #ccc,5px 15px 0 0px #ccc;
    }
    /* To-Do Check*/
    .to-do-list li .todo-check input[type=checkbox] {
        visibility:hidden;
    }
    .todo-check {
        width:20px;
        position:relative;
        margin-right:10px;
        margin-left:12px;
        margin-top: 26.2px;
    }
    .todo-check label {
        cursor:pointer;
        position:absolute;
        width:20px;
        height:20px;
        top:0;
        left:0px;
        -webkit-border-radius:2px;
        border-radius:2px;
        border:#ccc 1px solid;
    }
    .todo-check label:after {
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter:alpha(opacity=0);
        opacity:0;
        content:'';
        position:absolute;
        width:13px;
        height:8px;
        background:transparent;
        top:3px;
        left:3px;
        border:3px solid #cfcfcf;
        border-top:none;
        border-right:none;
        -webkit-transform:rotate(-45deg);
        -moz-transform:rotate(-45deg);
        -o-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
        transform:rotate(-45deg);
    }
    .todo-checklabel:hover::after {
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
        filter:alpha(opacity=30);
        opacity:0.3;
    }
    .todo-check input[type=checkbox]:checked+label:after {
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter:alpha(opacity=100);
        opacity:1;
    }
    .btn-todo-select button,.btn-add-task button {
        width:100%;
        font-size: 12px;
    }
    .todo-search-wrap {
        padding:0px;
    }
    .todo-search {
        -moz-border-radius:3px !important;
        -webkit-border-radius:3px !important;
        border-radius:3px !important;
    }


/* ============================================================
POGO SLIDER  SECTION
============================================================ */
    .pogoSlider > .pogoSlider-slide > .small-box > .inner >.row  {
        margin-top: -60px;
    }


/* ============================================================
FORM  SECTION
============================================================ */
    .form-control {
        border: 1px solid #e2e2e4;
        color: #3d3d3d !important;
        border-radius: 0px;
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    .form-control:focus, .focused[type='text'] {
        border: 1px solid #ccc;
        box-shadow: none;
    }

    .btn-escape {
        display: none;
    }

    .input-rounded[type='text'] {
        border-radius: 60px;
        -moz-border-radius: 60px;
       -webkit-border-radius: 60px;
    }

    /**Adding input icon left and right**/
    .inner-addon {
      position: relative;
    }
    
    .inner-addon>i, .inner-addon>span {
      position: absolute;
      padding: 10px;
      pointer-events: none;
    }
   
    .left-addon>i, .left-addon>span { left:  0px;}
    .right-addon>i, .right-addon>span { right: 0px;}

    .left-addon input  { padding-left:  30px; }
    .right-addon input { padding-right: 30px; }

    .tabular-form .form-group {
        border-top: 1px solid #fafafa;
        padding: 16px 0px;
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: 0;
    }

    .tabular-form .form-group > .tabular-border {
        border-left: 1px solid #fafafa;
        margin: -16px 0;
         padding: 16px;
    }

    @media (max-width: 768px) {
        .tabular-form .form-group .tabular-border {
            border-left: none;
        }
    }

    .tabular-form .form-group:first-child {
        border-top: none;
        padding-top: 0;
    }

    .tabular-form .form-group:last-child {
        padding-bottom: 0;
    }
    



/* ============================================================
GRID MENU  SECTION
============================================================ */


    #grid-menu {
        margin-left: -27px;
        margin-right: -27px;
        background-image:url("../../assets/images/timelines/img2.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        display: none;
        margin-bottom: -37px;
        z-index: 0;
        -webkit-transition: width 2s ease, height 2s ease;
        -moz-transition: width 2s ease, height 2s ease;
        -o-transition: width 2s ease, height 2s ease;
        transition: width 2s ease, height 2s ease;
    }

    /*#grid-menu.clicked {
        display: block;
    }*/


    #grid-menu .grid-menu-overlay {
        padding-top: 25px;
    }

    .grid-icon-wrap {
        text-align: center;
        margin: 0 auto;
        padding: 37px 0 57px;
    }

    .grid-icon {
        display: inline-block;
        font-size: 0px;
        cursor: pointer;
        /*margin: 15px 30px;*/
        margin-left: 10px;
        margin-right: 10px;
        width: 90px;
        height: 90px;
        border-radius: 60%;
        text-align: center;
        position: relative;
        z-index: 1;
        color: #fff;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    }

    .grid-icon:after {
        pointer-events: none;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        content: '';
        -webkit-box-sizing: content-box; 
        -moz-box-sizing: content-box; 
        box-sizing: content-box;
    }

    .grid-icon:before {
        font-size: 48px;
        line-height: 90px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        display: block;
        -webkit-font-smoothing: antialiased;
    }

    /* Effect 8 */


    .grid-icon-effect-8 .grid-icon {
        background: rgba(255,255,255,0.1);
        -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
        -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
        transition: transform ease-out 0.1s, background 0.2s;
    }

    .grid-icon-effect-8 .grid-icon.turquoise {
        background: rgba(26, 188, 156, 1);
    }

    .grid-icon-effect-8 .grid-icon.teal {
        background: rgba(46, 204, 113, 1);
    }

    .grid-icon-effect-8 .grid-icon.peter-river {
        background: rgba(52, 152, 219, 1);
    }

    .grid-icon-effect-8 .grid-icon.light-blue {
        background: rgba(51, 204, 255, 1);
    }

    .grid-icon-effect-8 .grid-icon.orange {
        background: rgba(241, 196, 15, 1);
    }

    .grid-icon-effect-8 .grid-icon.light-orange {
        background: rgba(255, 229, 126, 1);
    }

    .grid-icon-effect-8 .grid-icon:after {
        top: 0;
        left: 0;
        padding: 0;
        z-index: -1;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
        opacity: 0;
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }

    .grid-icon-effect-8 .grid-icon.turquoise:after {
        box-shadow: 0 0 0 2px rgba(26, 188, 156, .1);
    }

    .grid-icon-effect-8 .grid-icon.teal:after {
        box-shadow: 0 0 0 2px rgba(46, 204, 113, .1);
    }

    .grid-icon-effect-8 .grid-icon.peter-river:after {
        box-shadow: 0 0 0 2px rgba(52, 152, 219, .1);
    }

    .grid-icon-effect-8 .grid-icon.light-blue:after {
        box-shadow: 0 0 0 2px rgba(51, 204, 255, .1);
    }

    .grid-icon-effect-8 .grid-icon.light-blue:after {
        box-shadow: 0 0 0 2px rgba(241, 196, 15, .1);
    }

    .grid-icon-effect-8 .grid-icon.light-blue:after {
        box-shadow: 0 0 0 2px rgba(255, 229, 126, .1);
    }

    .grid-icon-effect-8 .grid-icon:hover {
        background: rgba(255,255,255,0.05);
        -webkit-transform: scale(0.93);
        -moz-transform: scale(0.93);
        -ms-transform: scale(0.93);
        transform: scale(0.93);
        color: #fff;
    }

    .grid-icon-effect-8 .grid-icon.turquoise:hover {
        background: rgba(26, 188, 156, .2);
    }

    .grid-icon-effect-8 .grid-icon.teal:hover {
        background: rgba(46, 204, 113, .2);
    }

    .grid-icon-effect-8 .grid-icon.peter-river:hover {
        background: rgba(52, 152, 219, .2);
    }

    .grid-icon-effect-8 .grid-icon.light-blue:hover {
        background: rgba(51, 204, 255, .2);
    }

    .grid-icon-effect-8 .grid-icon.orange:hover {
        background: rgba(241, 196, 15, .2);
    }

    .grid-icon-effect-8 .grid-icon.light-orange:hover {
        background: rgba(255, 229, 126, .2);
    }



    .grid-icon-effect-8 .grid-icon.turquoise:hover:after {
        -webkit-animation: sonarEffectTurquoise 1.3s ease-out 75ms;
        -moz-animation: sonarEffectTurquoise 1.3s ease-out 75ms;
        animation: sonarEffectTurquoise 1.3s ease-out 75ms;
    }

    .grid-icon-effect-8 .grid-icon.teal:hover:after {
        -webkit-animation: sonarEffectTeal 1.3s ease-out 75ms;
        -moz-animation: sonarEffectTeal 1.3s ease-out 75ms;
        animation: sonarEffectTeal 1.3s ease-out 75ms;
    }

    .grid-icon-effect-8 .grid-icon.peter-river:hover:after {
        -webkit-animation: sonarEffectPeterRiver 1.3s ease-out 75ms;
        -moz-animation: sonarEffectPeterRiver 1.3s ease-out 75ms;
        animation: sonarEffectPeterRiver 1.3s ease-out 75ms;
    }

    .grid-icon-effect-8 .grid-icon.light-blue:hover:after {
        -webkit-animation: sonarEffectLightBlue 1.3s ease-out 75ms;
        -moz-animation: sonarEffectLightBlue 1.3s ease-out 75ms;
        animation: sonarEffectLightBlue 1.3s ease-out 75ms;
    }

    .grid-icon-effect-8 .grid-icon.orange:hover:after {
        -webkit-animation: sonarEffectOrange 1.3s ease-out 75ms;
        -moz-animation: sonarEffectOrange 1.3s ease-out 75ms;
        animation: sonarEffectOrange 1.3s ease-out 75ms;
    }

    .grid-icon-effect-8 .grid-icon.light-orange:hover:after {
        -webkit-animation: sonarEffectLightOrange 1.3s ease-out 75ms;
        -moz-animation: sonarEffectLightOrange 1.3s ease-out 75ms;
        animation: sonarEffectLightOrange 1.3s ease-out 75ms;
    }

    /*** For Turquoise  ***/
    @-webkit-keyframes sonarEffectTurquoise {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(26, 188, 156, 0.1), 0 0 10px 10px rgba(26, 188, 156, 1), 0 0 0 10px rgba(26, 188, 156, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(26, 188, 156,0.1), 0 0 10px 10px rgba(26, 188, 156, 1), 0 0 0 10px rgba(26, 188, 156,0.5);
            -webkit-transform: scale(1.5);
            opacity: 0;
        }
    }
    @-moz-keyframes sonarEffectTurquoise {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(26, 188, 156, 0.1), 0 0 10px 10px rgba(26, 188, 156, 1), 0 0 0 10px rgba(26, 188, 156, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(26, 188, 156,0.1), 0 0 10px 10px rgba(26, 188, 156, 1), 0 0 0 10px rgba(26, 188, 156,0.5);
            -moz-transform: scale(1.5);
            opacity: 0;
        }
    }
    @keyframes sonarEffectTurquoise {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(26, 188, 156, 0.1), 0 0 10px 10px rgba(26, 188, 156, 1), 0 0 0 10px rgba(26, 188, 156, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(26, 188, 156,0.1), 0 0 10px 10px rgba(26, 188, 156, 1), 0 0 0 10px rgba(26, 188, 156,0.5);
            transform: scale(1.5);
            opacity: 0;
        }
    }




    /*** For Teal  ***/
    @-webkit-keyframes sonarEffectTeal {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.1), 0 0 10px 10px rgba(46, 204, 113, 1), 0 0 0 10px rgba(46, 204, 113, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(46, 204, 113,0.1), 0 0 10px 10px rgba(46, 204, 113, 1), 0 0 0 10px rgba(46, 204, 113,0.5);
            -webkit-transform: scale(1.5);
            opacity: 0;
        }
    }
    @-moz-keyframes sonarEffectTeal {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.1), 0 0 10px 10px rgba(46, 204, 113, 1), 0 0 0 10px rgba(26, 188, 156, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(46, 204, 113,0.1), 0 0 10px 10px rgba(46, 204, 113, 1), 0 0 0 10px rgba(46, 204, 113,0.5);
            -moz-transform: scale(1.5);
            opacity: 0;
        }
    }
    @keyframes sonarEffectTeal {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.1), 0 0 10px 10px rgba(46, 204, 113, 1), 0 0 0 10px rgba(46, 204, 113, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(46, 204, 113,0.1), 0 0 10px 10px rgba(46, 204, 113, 1), 0 0 0 10px rgba(46, 204, 113,0.5);
            transform: scale(1.5);
            opacity: 0;
        }
    }

    /*** For Peter River  ***/
    @-webkit-keyframes sonarEffectPeterRiver {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1), 0 0 10px 10px rgba(52, 152, 219, 1), 0 0 0 10px rgba(52, 152, 219, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(52, 152, 219,0.1), 0 0 10px 10px rgba(52, 152, 219, 1), 0 0 0 10px rgba(52, 152, 219,0.5);
            -webkit-transform: scale(1.5);
            opacity: 0;
        }
    }
    @-moz-keyframes sonarEffectPeterRiver {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1), 0 0 10px 10px rgba(52, 152, 219, 1), 0 0 0 10px rgba(52, 152, 219, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(52, 152, 219,0.1), 0 0 10px 10px rgba(52, 152, 219, 1), 0 0 0 10px rgba(52, 152, 219,0.5);
            -moz-transform: scale(1.5);
            opacity: 0;
        }
    }
    @keyframes sonarEffectPeterRiver {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1), 0 0 10px 10px rgba(52, 152, 219, 1), 0 0 0 10px rgba(52, 152, 219, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(52, 152, 219,0.1), 0 0 10px 10px rgba(52, 152, 219, 1), 0 0 0 10px rgba(52, 152, 219,0.5);
            transform: scale(1.5);
            opacity: 0;
        }
    }


    /*** For Peter River  ***/
    @-webkit-keyframes sonarEffectLightBlue {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(51, 204, 255, 0.1), 0 0 10px 10px rgba(51, 204, 255, 1), 0 0 0 10px rgba(51, 204, 255, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(51, 204, 255,0.1), 0 0 10px 10px rgba(51, 204, 255, 1), 0 0 0 10px rgba(51, 204, 255,0.5);
            -webkit-transform: scale(1.5);
            opacity: 0;
        }
    }
    @-moz-keyframes sonarEffectLightBlue {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(51, 204, 255, 0.1), 0 0 10px 10px rgba(51, 204, 255, 1), 0 0 0 10px rgba(51, 204, 255, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(51, 204, 255,0.1), 0 0 10px 10px rgba(51, 204, 255, 1), 0 0 0 10px rgba(51, 204, 255,0.5);
            -moz-transform: scale(1.5);
            opacity: 0;
        }
    }
    @keyframes sonarEffectLightBlue {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(51, 204, 255, 0.1), 0 0 10px 10px rgba(51, 204, 255, 1), 0 0 0 10px rgba(51, 204, 255, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(51, 204, 255,0.1), 0 0 10px 10px rgba(51, 204, 255, 1), 0 0 0 10px rgba(51, 204, 255,0.5);
            transform: scale(1.5);
            opacity: 0;
        }
    }



    /*** For Orange  ***/
    @-webkit-keyframes sonarEffectOrange {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.1), 0 0 10px 10px rgba(241, 196, 15, 1), 0 0 0 10px rgba(241, 196, 15, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(241, 196, 15,0.1), 0 0 10px 10px rgba(241, 196, 15, 1), 0 0 0 10px rgba(241, 196, 15,0.5);
            -webkit-transform: scale(1.5);
            opacity: 0;
        }
    }
    @-moz-keyframes sonarEffectOrange {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.1), 0 0 10px 10px rgba(241, 196, 15, 1), 0 0 0 10px rgba(241, 196, 15, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(241, 196, 15,0.1), 0 0 10px 10px rgba(241, 196, 15, 1), 0 0 0 10px rgba(241, 196, 15,0.5);
            -moz-transform: scale(1.5);
            opacity: 0;
        }
    }
    @keyframes sonarEffectOrange {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.1), 0 0 10px 10px rgba(241, 196, 15, 1), 0 0 0 10px rgba(241, 196, 15, 0.5);
        }
        100% {
             box-shadow: 0 0 0 2px rgba(241, 196, 15,0.1), 0 0 10px 10px rgba(241, 196, 15, 1), 0 0 0 10px rgba(241, 196, 15,0.5);
            transform: scale(1.5);
            opacity: 0;
        }
    }




    /*** For Light Orange  ***/
    @-webkit-keyframes sonarEffectLightOrange {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(255, 229, 126, 0.1), 0 0 10px 10px rgba(255, 229, 126, 1), 0 0 0 10px rgba(255, 229, 126, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(255, 229, 126,0.1), 0 0 10px 10px rgba(255, 229, 126, 1), 0 0 0 10px rgba(255, 229, 126,0.5);
            -webkit-transform: scale(1.5);
            opacity: 0;
        }
    }
    @-moz-keyframes sonarEffectLightOrange {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(255, 229, 126, 0.1), 0 0 10px 10px rgba(255, 229, 126, 1), 0 0 0 10px rgba(255, 229, 126, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(255, 229, 126,0.1), 0 0 10px 10px rgba(255, 229, 126, 1), 0 0 0 10px rgba(255, 229, 126,0.5);
            -moz-transform: scale(1.5);
            opacity: 0;
        }
    }
    @keyframes sonarEffectLightOrange {
        0% {
            opacity: 0.3;
        }
        40% {
            opacity: 0.5;
            box-shadow: 0 0 0 2px rgba(255, 229, 126, 0.1), 0 0 10px 10px rgba(255, 229, 126, 1), 0 0 0 10px rgba(255, 229, 126, 0.5);
        }
        100% {
            box-shadow: 0 0 0 2px rgba(255, 229, 126,0.1), 0 0 10px 10px rgba(255, 229, 126, 1), 0 0 0 10px rgba(255, 229, 126,0.5);
            transform: scale(1.5);
            opacity: 0;
        }
    }

    
/* ============================================================
STYLE SWITCHER  SECTION
============================================================ */
    i.style-switcher-btn {
       right: 0;
       top:  180px;
       color: #999;
       font-size: 18px;
       cursor: pointer;
       z-index: 555555;
       position: fixed;
       padding: 9px 10px;
       background: #3A434D;
       border-left: 3px solid #3A434D;
       border-top: 1px solid #3A434D;
       border-bottom: 1px solid #3A434D;
    }

    i.style-switcher-btn:hover {
        color:white;
    }

    i.style-switcher-btn-option {
       top: 38px;
       background: #9097a0;
    }

    i.style-switcher-btn-option:hover {
       background: #707985;
    }

    .style-switcher {
       right: 0;
       top:  180px;
       color: gray;
       width: 235px;
       display: none;
       z-index: 555555;
       position: fixed;
       background: #fff;
       border-left: 1px solid gray;
       border-top: 1px solid gray;
       border-bottom: 1px solid gray;
    }

    /*Others*/
    .style-switcher .style-switcher-heading {
       color: gray;
       font-size: 15px;
       margin-bottom: 10px;
       font-weight: bold;
    }

    .style-switcher-logo  {
       margin-top: 10px;
       padding-top: 15px;
       border-top: solid 1px #4c5159;
    }

    .style-switcher-logo a {
       display: block;
       text-align: center;
    }

    .style-switcher .btn-u {
      color: #fff;
      font-weight: 200;
      border: solid 1px #555;
      border-radius: 2px !important;
    }

    .style-switcher .btn-u.active-switcher-btn,
    .style-switcher .btn-u.active-switcher-btn {
       border: solid 1px #bbb;
    }

    /*Style Swticher Header*/
    .style-swticher-header {
      background: #3A434D;
      padding: 9px 10px 5px 15px;
      border-bottom: solid 1px #222; 
    }

    .style-swticher-header .style-switcher-heading {
      margin: 0;
      font-size: 16px;
      text-transform: uppercase;
    }

    .style-swticher-header .theme-close {
       top: 9px;
       right: 6px;
       position: absolute;
    }

    .style-swticher-header .theme-close i {
       color: #999;
       padding: 5px;
       cursor: pointer;
       font-size: 22px;
    }

    .style-swticher-header .theme-close i:hover {
       color: #fff;
     }

    /*Style Swticher Body*/
    .style-swticher-body .no-col-space {
      padding: 0 10px;
      text-align: center;
    }

    .style-swticher-body hr {
      margin: 11px 0;
      border-color: #454545;
    }

    .style-swticher-body .no-col-space .col-xs-6 {
      padding-left: 5px;
      padding-right: 5px;
    }

    .style-swticher-body {
       padding: 15px 10px 15px 15px;
    }

    /*Theme Colors*/
    .style-switcher li {
       width: 26px;
       height: 26px;
       cursor: pointer;
       background: #c00;
       margin: 0 6px 6px 0;
       display: inline-block;
       border-radius: 10% !important;
       -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
       transition: all 0.2s ease-in-out;
    }

    .style-switcher li.last {
       margin-right: 0;
    }

    .style-switcher li:hover,
    .style-switcher li.theme-active {
       border: solid 2px #fff;
       -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
       -o-transform: scale(1.1);
       transform: scale(1.1);
    }

    .style-switcher li.theme-default {
       background: #2ECC71;
    }
    .style-switcher li.theme-turquoise {
       background: #1ABC9C;
    }
    .style-switcher li.theme-blue {
       background: #3498DB;
    }
    .style-switcher li.theme-amethyst {
       background: #9B59B6;
    }
    .style-switcher li.theme-cloud {
       background: #ECF0F1;
    }
    .style-switcher li.theme-sun-flower {
       background: #F1C40F;
    }
    .style-switcher li.theme-carrot {
       background: #E67E22;
    }
    .style-switcher li.theme-alizarin {
       background: #E74C3C;
    }
    .style-switcher li.theme-concrete {
       background: #95A5A6;
    }
    .style-switcher li.theme-wet-ashphalt {
       background: #34495E;
    }

    
    
/* ============================================================
BOXED PAGE  SECTION
============================================================ */
    .fixed-width-unfixed-header{
        background: #aeaeae;
    }


    .fixed-width-unfixed-header #container{
        width: 90%;
        margin: auto;
        overflow: hidden !important;
        position: relative;
    }


    .fixed-width-unfixed-header #container .header{
        width: 100%;
        left: auto;
        right: auto;
    }


    .fixed-width-unfixed-header #main-content{ background: #F9F9F9;}

    .fixed-width-unfixed-header #container #sidebar{
        position: absolute;
    }

    .fixed-width{
        background: #aeaeae;
    }


    .fixed-width #container{
        width: 90%;
        margin: auto;
        overflow: hidden !important;
        position: relative;
    }


    .fixed-width #container .header{
        width: 90%;
        left: auto;
        right: auto;
    }


    .fixed-width #main-content{ background: #F9F9F9;}

    .fixed-width #container #sidebar{
        position: absolute;
    }


/* ============================================================
PAGE TITLE  SECTION
============================================================ */
    .top-page-header {
        background: white;
        margin-top: 54px;
        margin-left: -3px;
        margin-right: -3px;
        margin-bottom: 22px !important;
        padding-top: 7px;
        padding-left: 20px;
        padding-bottom: 20px;
        padding-right: 11px;
    }

    /*** Full width content + unfixed header ***/
    body.full-content-unfixed-header .top-page-header {
        margin-top:0px;
        margin-bottom: 27px;
    }

    .top-page-header .page-title {
        line-height: 0px;
    }

    .top-page-header .page-title small {
        
    }

    .top-page-header .page-breadcrumb {
        padding-top:10px;
        /*padding-left: 12px;*/
    }

    .top-page-header .right-menu {
        margin-top: -55px;
        font-weight: bold;
        padding-right: 50px;
    }

    .top-page-header .right-menu .btn-group .btn-default{
        background: #fff;
        color: gray;
        border-radius: 0px;
    }

    .top-page-header .right-menu .btn-group .dropdown-menu > li > input:checked ~ label,
    .top-page-header .right-menu .btn-group .dropdown-menu > li > input:checked ~ label:hover,
    .top-page-header .right-menu .btn-group .dropdown-menu > li > input:checked ~ label:focus,
    .top-page-header .right-menu .btn-group .dropdown-menu > .active > label,
    .top-page-header .right-menu .btn-group .dropdown-menu > .active > label:hover,
    .top-page-header .right-menu .btn-group .dropdown-menu > .active > label:focus {
      color: #ffffff;
      text-decoration: none;
      outline: 0;
      background-color: #BABBBB;
    }

    .top-page-header .toggle-right-sidebar {
        margin-top:-50px; 
        margin-left:20px; 
        padding-right:12px; 
        cursor:pointer
    }

/* ============================================================
BREADCRUMS SECTION
============================================================ */
    .c_breadcrumbs {
      margin-top:6.6px;
    }
    .c_breadcrumbs ul {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: hidden;
      width: 100%;
    }
    
    .c_breadcrumbs ul li:first-child {
      margin-left: 0 !important;
    }
    .c_breadcrumbs ul li:first-child a:before {
      content: normal;
    }
    .c_breadcrumbs ul li:last-child {
      background: none;
    }
    .c_breadcrumbs ul li:last-child a {
      /*color: #1d1d1d;*/
    }
    .c_breadcrumbs ul li:last-child:after,
    .c_breadcrumbs ul li:last-child:before {
      content: normal;
    }
    
    .c_breadcrumbs ul a:hover {
      color: gray;
    }
    .c_breadcrumbs ul a:hover:before {
      border-color: #ddd #ddd #ddd transparent;
    }
    .c_breadcrumbs ul a:hover:after {
      border-left-color: #ddd;
    }

    @media only screen and (max-width: 767px) {
        .c_breadcrumbs li::after {
            /* this is the separator between items */
            display: inline-block;
            content: '\00bb';
            font-size: 14px;
            color: #959fa5;
            margin-top: 3px;
            margin-left: 9px;
            margin-right: 10px;
        }

        .c_breadcrumbs ul a {
            padding: .3em .1em;
            float: left;
            text-decoration: none;
            position: relative;
        }

        .c_breadcrumbs ul li {
            float: left;
            /*margin: 0 .1em 0 1em;*/
        }

        .c_breadcrumbs ul .active:hover a {
          color: #ddd;
        }
    }

    @media only screen and (min-width: 768px) {
        .c_breadcrumbs ul li {
            float: left;
            margin: 0 .2em 0 1em;
        }

        .c_breadcrumbs ul a {
          background: #F5F5F5;
          padding: .3em 1em;
          float: left;
          text-decoration: none;
          position: relative;
        }
        .c_breadcrumbs ul a:hover {
          background: #ddd;
          color: gray;
        }
        .c_breadcrumbs ul a:before {
          content: "";
          position: absolute;
          top: 50%;
          margin-top: -1.5em;
          border-width: 1.5em 0 1.5em 1em;
          border-style: solid;
          border-color: #F5F5F5 #F5F5F5 #F5F5F5 transparent;
          left: -1em;
          margin-left: 1px;
        }
        .c_breadcrumbs ul a:after {
          content: "";
          position: absolute;
          top: 50%;
          margin-top: -1.5em;
          border-top: 1.5em solid transparent;
          border-bottom: 1.5em solid transparent;
          border-left: 1em solid #F5F5F5;
          right: -1em;
          margin-right: 1px;
        }
        .c_breadcrumbs ul .active:hover a {
          color: #ffffff;
        }
    }
    .c_breadcrumbs ul .active,
    .c_breadcrumbs ul .active:hover {
      background: none;
      font-weight: bold;
    }
    .c_breadcrumbs ul .active a,
    .c_breadcrumbs ul .active:hover a {
      color: gray;
    }
    
    .c_breadcrumbs ul .active:after,
    .c_breadcrumbs ul .active:before {
      content: normal;
    }
    .c_breadcrumbs.small li {
      margin: 0 .2em 0 .8em;
    }
    .c_breadcrumbs.small a {
      padding: .2em 1em;
      font-size: 11.9px;
    }
    .c_breadcrumbs.mini li {
      margin: 0 .2em 0 .6em;
    }
    .c_breadcrumbs.mini a {
      padding: .1em 1em;
      font-size: 10.5px;
    }


/* ============================================================
RIGHT SIDEBAR SECTION
============================================================ */
    #right-sidebar {
        background:#fff;
        width:240px;
        position:fixed;
        height:100%;
        z-index:1000;
        right:0px;
        top:0;
        margin-top: 60px;
        -webkit-transition:all .5s ease-in-out;
        -moz-transition:all .5s ease-in-out;
        -o-transition:all .5s ease-in-out;
        transition:all .5s ease-in-out;
    }

    .right-sidebar-notifcations {
        width:288.9px !important;
    }   

    .right-sidebar-notifcations #right-sidebar-tabs {
        background: #3A434D;
    }
    
    .right-sidebar-notifcations .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus {
        background-color: #ffffff !important;
        color: gray !important;
    } 

    .right-sidebar-notifcations #right-sidebar-tabs li {
        width:33.3333%;
    }    

    .right-sidebar-notifcations #right-sidebar-tabs li a {
        color: white;
        font-weight: bold;
        text-align: center;
    }

    .right-sidebar-notifcations .nav-tabs {
        border-bottom: 0px solid #ddd;
    }

    .right-sidebar-notifcations .nav-tabs>li>a {
        border-radius: 0 0 0 0 !important;
        border: 0 solid transparent !important; 
        margin-right: 0 !important;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }

    .right-sidebar-notifcations .nav-tabs>li.active>a:hover {
        background-color: white !important; 
        color: gray !important;
    }

    .right-sidebar-notifcations .nav>li>a:focus, .nav>li>a:hover {
        background-color: #fff; 
        color: gray !important;

    }

    .right-sidebar-notifcations .tab-content {
        padding: 0px;
    }

    .right-sidebar-notifcations .tab-content .right-sidebar-list {
        padding-left: 0  !important;
        padding-right: 0 !important;
    }
    
    .right-sidebar-notifcations .tab-content .right-sidebar-list li {
        padding-left: 15px !important;
        padding-right: 15px  !important;
    }
    
    #right-sidebar #right-sidebar-tab-content .right-sidebar-panel-content-heading {
        padding: 15px !important;
    }

   
    /** Right Sidebar Tabs Content **/
    #right-sidebar #right-sidebar-tab-content .tab-pane {
    }

    #right-sidebar #right-sidebar-tab-content .right-sidebar-panel-content-heading {
        padding: 10px;
        border-bottom: 1px solid #F5EFF5;
        font-family: arial;
        background-color: #ffffff;
    }

    #right-sidebar #right-sidebar-tab-content .right-sidebar-panel-content-heading h4 {
        /*line-height: 1px;*/
        text-transform: uppercase;
    }    

    #right-sidebar #right-sidebar-tab-content .right-sidebar-panel-content {
        padding: 0px;
        height: 492px;
    }

    .right-sidebar-notifcations .right-sidebar-tab-notification {
        height: 670px;
    }

    /* Right Sidebar Latest Activities */
    #right-sidebar #right-sidebar-tab-content .right-sidebar-list {
        list-style: none;
        padding-left: 10px;
        padding-right: 10px;
        height: 513px;
    }

    #right-sidebar #right-sidebar-tab-content .right-sidebar-list li {
       border-bottom: 1px solid #F5EFF5;
       padding-left: 5px;
       padding-right: 5px;
       padding-bottom: 6px;
    }

    #right-sidebar #right-sidebar-tab-content .right-sidebar-list li img {
        border-radius:50%;
        -webkit-border-radius:50%;
        width: 80%;
    }

    #right-sidebar #right-sidebar-tab-content .right-sidebar-list li div.pull-left {
        width: 46px;
    }



    #right-sidebar #right-sidebar-tab-content .right-sidebar-list li p {
        line-height: 5px;
    }    

    #right-sidebar #right-sidebar-tab-content .right-sidebar-list li h5{
        font-weight: bold;
        margin-top: 8px;
    }    

    #right-sidebar #right-sidebar-tab-content .right-sidebar-list li:nth-child(even) {
        background-color: #FCFBFB;
        padding-top: 5px;
        margin-top: 1px;
    }

    #right-sidebar #right-sidebar-tab-content .right-sidebar-list li:nth-child(even) div.pull-left {
        margin-top: 2px;
    }    

    #right-sidebar #right-sidebar-tab-content .right-sidebar-list li:nth-child(even) > div {
        margin-top: -8px;
    }

    .hide-right-sidebar {
        /*right:-240px !important;*/
        margin-right:-240px;
    }

    #right-sidebar > .rightside-navigation  {
        height: 100%;
        margin-top: -78px;
    }


    #right-sidebar ul.sidebar-menu,ul.sidebar-menu li ul.sub {
        margin:-2px 0 0;
        padding:0;
    }
    #right-sidebar ul.sidebar-menu {
        padding-top:80px;
        list-style: none;
        /*background-color: #fff;*/
    }

    .fixed-width-unfixed-header #right-sidebar > .rightside-navigation  > ul {
        padding-top:20px !important;
    }

    #right-sidebar>ul>li>ul.sub {
        display:none;
    }
    #right-sidebar .sub-menu>.sub li a {
        padding-left:46px;
    }
    #right-sidebar>ul>li.active>ul.sub,#sidebar>ul>li>ul.sub>li>a {
        display:block;
    }
    #right-sidebar ul.sidebar-menu li ul.sub li {
        background:#F0F0F0;
        margin-bottom:0;
        margin-left:0;
        margin-right:0;
        list-style: none;
    }

    #right-sidebar ul.sidebar-menu li ul.sub li a {
        margin-left: 25px;
    }

    #right-sidebar ul.sidebar-menu li ul.sub li:before {
        content: "";
        top: -1px;
        bottom: -1px;
        position: absolute;
        width: 1px;
        border-left: 0px dashed rgba(12, 12, 12, 0.3);
        z-index: 1;
        margin-left:40px;
    }

    #right-sidebar ul.sidebar-menu li ul.sub li a:before {
        content: "";
        left: 40px; 
        top: 20px;
        position: absolute;
        display: block;
        width: 21px;
        border-bottom: 0px dashed rgba(12, 12, 12, 0.3);
        z-index: 1;
    }

    /** For second level sub menu **/
    #right-sidebar ul.sidebar-menu li ul.sub li ul.sub li a:before {
        content: "";
        left: 40px; 
        top: 20px;
        position: absolute;
        display: block;
        width: 34px;
        border-bottom: 0px dashed rgba(12, 12, 12, 0.3);
        z-index: 1;
    }

    #right-sidebar ul.sidebar-menu li ul.sub li > ul.sub li a {
        padding-left: 60px !important;
    }

    #right-sidebar ul.sidebar-menu li ul.sub li a {
        font-size:12px;
        padding-top:13px;
        padding-bottom:13px;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
        color:#738699;
        position:relative;
    }

    #right-sidebar ul.sidebar-menu li ul.sub li a:hover,#right-sidebar ul.sidebar-menu li ul.sub li.active a {
        color:#ffffff;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
        display:block;
        background:#C4C4C4;
    }
    #right-sidebar ul.sidebar-menu li {
        border-bottom:1px solid rgba(255,255,255,0.05);
    }
    #right-sidebar ul.sidebar-menu li.sub-menu {
        line-height:15px;
    }
    #right-sidebar ul.sidebar-menu ul.sub li {
        border-bottom:none;
    }
    #right-sidebar ul.sidebar-menu li a span {
        display:inline-block;
    }



    #right-sidebar ul.sidebar-menu li a {
        color:#84888D;
        text-decoration:none;
        display:block;
        padding:8px 0 8px 25px;
        font-size:12px;
        outline:none;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }

    #right-sidebar ul.sidebar-menu li a.active,#right-sidebar ul.sidebar-menu li a:focus {
        background-color: #eee;
        font-weight: bold;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }   

    #right-sidebar ul.sidebar-menu li ul.sub li a.active {
        font-weight: bold;
    }   

    #right-sidebar ul.sidebar-menu li a i.fa {
        padding: 10px;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }


    #right-sidebar ul.sidebar-menu li a.active i.fa,ul.sidebar-menu li a:hover i.fa,ul.sidebar-menu li a:focus i.fa {
        background:#76CF1C;
        color:#ffffff;
        padding: 10px;
        -webkit-transition:all 0.8s ease;
        -moz-transition:all 0.8s ease;
        -o-transition:all 0.8s ease;
        -ms-transition:all 0.8s ease;
        transition:all 0.8s ease;
        webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }

    #right-sidebar ul.sidebar-menu li a i {
        font-size:15px;
        padding-right:6px;
    }
    #right-sidebar ul.sidebar-menu li a:hover i,ul.sidebar-menu li a:focus i {
        color:#ffffff;
    }
    #right-sidebar ul.sidebar-menu li a.active i {
        color:#ffffff;
    }
    .mail-info,.mail-info:hover {
        margin:-3px 6px 0 0;
        font-size: 11px;
    }


    /** Profile Sidebar **/
    #right-sidebar ul.sidebar-menu li.sidebar-profile {
        background-color: #3A434D;
        padding: 10px;
        color: #fff;
        text-align: center;
        border-bottom: 10px solid #76CF1C;
    }
    #right-sidebar ul.sidebar-menu li.sidebar-profile .name {
        margin-top: 10px;
    }

    #right-sidebar ul.sidebar-menu li.sidebar-profile .image img {
        border-radius: 60%;
    }

    #right-sidebar ul.sidebar-menu li.sidebar-profile .status {
        margin-top: -10px;
        font-size: 7;
    }

    #right-sidebar ul.sidebar-menu li.sidebar-profile .status small i {
        color: #76CF1C;
    }



/* ============================================================
MAII SECTION
============================================================ */
    .email-page .mail-nav {
        margin:15px -15px 0 -15px;
    }
    .email-page .mail-nav li a {
        border-radius:0;
        -webkit-border-radius:0;
        padding:15px;
    }
    .email-page .mail-nav>li>a:hover, .mail-nav>li>a:focus {
        background:transparent;
        color:#1fb5ad;
    }
    .email-page .mail-nav>li.active>a,.mail-nav>li.active>a:hover,.mail-nav>li.active>a:focus {
        background:transparent;
        font-weight: bold;
        color: gray;
    }
    .email-page .mail-nav>li+li {
        margin-left:0;
        margin-top:0px;
    }
    .email-page .mail-nav i {
        font-size:16px;
        margin-right:10px;
    }
    .email-page .inbox-notification {
        margin-top:-2px;
    }
    .email-page .user-head .inbox-avatar {
        width:65px;
        float:left;
    }
    .email-page .user-head .inbox-avatar img {
        border-radius:4px;
        -webkit-border-radius:4px;
    }
    .email-page .user-head .user-name {
        display:inline-block;
        margin:0 0 0 10px;
    }
    .email-page .user-head .user-name h5 {
        font-size:14px;
        margin-top:15px;
        margin-bottom:0;
        font-weight:300;
    }
    .email-page .user-head .user-name h5 a {
        color:#fff;
    }
    .user-head .user-name span a {
        font-size:12px;
        color:#87e2e7;
    }
    .email-page a.mail-dropdown {
        background:#80d3d9;
        padding:3px 5px;
        font-size:10px;
        color:#01a7b3;
        border-radius:2px;
        margin-top:20px;
    }
    .email-page .inbox-body {
        padding:20px;
    }
    .email-page .btn-compose {
        background:#1fb5ad;
        padding:12px 0;
        text-align:center;
        width:100%;
        color:#fff;
    }
    .email-page .btn-compose:hover,.btn-compose:focus {
        background:#1ca59e;
        color:#fff;
    }
    .email-page ul.inbox-nav {
        display:inline-block;
        width:100%;
        margin:0;
        padding:0;
    }
    .email-page .inbox-divider {
        border-bottom:1px solid #d5d8df;
    }
    .email-page .inbox-action {
        margin-top:50px;
    }
    .email-page .src-position {
        margin-top:-7px;
    }
    .email-page .mail-src-position {
        margin-top:-3px;
    }
    .email-page ul.labels-info {
        margin-bottom:10px;
    }
    .email-page ul.inbox-nav li {
        display:inline-block;
        line-height:45px;
        width:100%;
    }
    .email-page ul.inbox-nav li a {
        color:#6a6a6a;
        line-height:45px;
        width:100%;
        display:inline-block;
        padding:0 20px;
    }
    .email-page ul.inbox-nav li a:hover,ul.inbox-nav li.active a,ul.inbox-nav li a:focus {
        color:#6a6a6a;
        background:#d5d7de;
    }
    .email-page ul.inbox-nav li a i {
        padding-right:10px;
        font-size:16px;
        color:#6a6a6a;
    }
    .email-page ul.inbox-nav li a span.label {
        margin-top:13px;
    }
    .email-page ul.labels-info li h4 {
        padding-top:5px;
        color:#5c5c5e;
        font-size:15px;
        text-transform:uppercase;
    }
    .email-page ul.labels-info li {
        margin:0;
    }
    .email-page ul.labels-info li a {
        color:#6a6a6a;
        border-radius:0;
        padding-left:0;
        padding-right:0;
    }
    .email-page ul.labels-info li a:hover,ul.labels-info li a:focus {
        color:#6a6a6a;
        background:none;
    }
    .email-page ul.labels-info li a i {
        padding-right:10px;
    }
    .email-page .nav.nav-pills.nav-stacked.labels-info p {
        margin-bottom:0;
        padding:0 22px;
        color:#9d9f9e;
        font-size:11px;
    }

    .email-page .nav.nav-pills > li > a {
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }

    .email-page .nav.nav-pills > li > a:hover {
        color: #D13E36 !important;
        opacity: 0.8;
    }

    .email-page .nav.nav-pills > li.active > a, 
    .email-page .nav.nav-pills > li.active > a:hover, 
    .email-page .nav.nav-pills > li.active > a:focus {
        color: #fff !important;
        background-color: #E74C3C !important;
    }

    .email-page .nav.nav-pills > li.active > a span.label {
        background: #E5312A !important;
    }

    .email-page .btn-compose-email {
        background-color: #E74C3C !important;
        color: white;
        font-weight: bold;
        margin-top: -2px;
        border-radius: 0px;
    }
    .email-page .inbox-head {
        padding:20px;
        background:#41cac0;
        color:#fff;
        border-radius:0 4px 0 0;
        -webkit-border-radius:0 4px 0 0;
        min-height:80px;
    }
    .email-page .inbox-head h3 {
        margin:0;
        display:inline-block;
        padding-top:6px;
        font-weight:300;
    }
    .email-page .inbox-head .sr-input {
        height:40px;
        border:none;
        box-shadow:none;
        padding:0 10px;
        float:left;
        border-radius:4px 0 0 4px;
        color:#8a8a8a;
    }
    .email-page .inbox-head .sr-btn {
        height:40px;
        border:none;
        background:#00a6b2;
        color:#fff;
        padding:0 20px;
        border-radius:0 4px 4px 0;
        -webkit-border-radius:0 4px 4px 0;
    }
    .email-page .wht-bg {
        background:#fff;
    }
    .email-page .wht-bg h4 {
        font-size:24px;
        color:#a2a2a2;
        font-weight:300;
    }
    .email-page .email-list {
        margin:0 6px;
    }

    .email-page .email-list .table>tbody>tr>td, 
    .email-page .email-list .table>tbody>tr>th, 
    .email-list .table>tfoot>tr>td, 
    .email-page .email-list .table>tfoot>tr>th, 
    .email-page .email-list .table>thead>tr>td, 
    .email-page .email-list .table>thead>tr>th {
        border-top: 0px solid #ddd;
    }
    .email-page .mail-checkbox {
        margin-right:10px;
    }
    .email-page .email-list .table tr.unread td {
        font-weight:600;
        background:#f7f7f7;
    }

    .email-page .email-list .table .star input[type=checkbox] {
        display: none;
    }

    .email-page .email-list .table .star input[type=checkbox]:checked+label:before {
      color: #ffd200;
    }

    .email-page .email-list .table .star label{
        display:inline-block;
        cursor:pointer;
        position:relative;
        font-size:18px;
        transition:border 0.2s linear 0s,color 0.2s linear 0s;
        margin-bottom:10px;
    }

    .email-page .email-list .table .star label:before {
        font-family: 'FontAwesome';
        content: "\F005";
        display: inline-block;
        margin-right: 10px;
        position: absolute;
        left: 0px;
        top: -4px;
        font-size: 18px;
        color: #97a3b3;
        transition: border 0.2s linear 0s,color 0.2s linear 0s;
    }

    .email-page ul.inbox-pagination {
        float:right;
        list-style-type: none;
    }
    .email-page ul.inbox-pagination li {
        float:left;
    }

    .email-page .pagination li a {
        color: #32323a;
    }
    .email-page .mail-option {
        display:inline-block;
        margin-bottom:10px; 
        width:100%; 
        padding-right: 5px;
        padding-left: 5px;
        color: gray;
        border-bottom: 1px solid rgba(155, 155, 155, 0.1);
    }
    .email-page .mail-option .chk-all {
        float:left;
    }

    .email-page .mail-option .btn-group {
        margin-right:5px;
    }

    .email-page .mail-option .btn-group .btn {
        background: #fff;
        border: 1px solid rgba(155, 155, 155, 0.1);
        border-radius:0px;
    }    


    .email-page .mail-option .btn-group a.btn {
        border:1px solid #e7e7e7;
        padding:5px 10px;
        display:inline-block;
        background:#ffffff;
        color:#afafaf;
        border-radius:3px !important;
        -webkit-border-radius:3px !important;
    }
    .email-page .inbox-pagination a.np-btn {
        border:1px solid #e7e7e7;
        padding:5px 15px;
        display:inline-block;
        background:#fcfcfc;
        color:#afafaf;
        border-radius:3px !important;
        -webkit-border-radius:3px !important;
    }

    .email-page .mail-option .mail-check-all {
        margin-left: 12px;
    }


    .email-page .inbox-pagination li span {
        display:inline-block;
        margin-top:7px;
        margin-right:5px;
    }
    .email-page .fileinput-button {
        border:1px solid #e6e6e6;
        background:#eeeeee;
    }
    .email-page .inbox-body .modal .modal-body input,.inbox-body .modal .modal-body textarea {
        border:1px solid #e6e6e6;
        box-shadow:none;
    }
    .email-page .btn-send,.btn-send:hover {
        background:#00A8B3;
        color:#fff;
    }
    .email-page .btn-send:hover {
        background:#009da7;
    }
    .email-page .modal-header h4.modal-title {
        font-weight:300;
        font-family:'Open Sans',sans-serif;
    }
    .email-page .modal-body label {
        font-weight:400;
        font-family: 'Open Sans',sans-serif;
    }

    .email-page .compose-mail {
        width: 100%;
        display: inline-block;
        position: relative;
        margin-left: -10px;
    }


    .email-page .compose-mail .btn-group .btn {
        background: #fff;
        border: 1px solid rgba(155, 155, 155, 0.1);
        border-radius:0px;
    } 


    .email-page .compose-mail .compose-options {
        color: #979797;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        position: absolute;
        right: 10px;
        top: 7px;
    }

    .email-page .compose-mail .input-unbordered {
        border:none;
        padding: 0;
        width: 80%;
        float: left;
    }
    .email-page .compose-mail .form-group {
        display: inline-block;
        width: 100%;
        margin-bottom: 0;
        margin-left: 10px;
    }

    .email-page .compose-mail .bordered {
        border:1px solid #F2F3F6;
    }

    .email-page .compose-mail .form-group label {
        line-height: 34px;
        width: 10%;
        float: left;
        padding-left: 5px;
        margin-bottom: 0;
    }

    .email-page .compose-mail .btn-group .btn:focus {
        background: #ddd;
    }

    .email-page .compose-editor input {
        margin-top: 15px;
    }

    .email-page .compose-editor {
        margin-bottom: 15px;
        display: inline-block;
        width: 100%;
    }

    .email-page .compose-btn {
        float: left;
        margin-top: 6px;
    }

    .email-page .mail-header h4 {
        font-weight: 300;
    }

    .email-page .viewing-mail .btn-group .btn {
        background: #fff;
        border: 1px solid rgba(155, 155, 155, 0.1);
        border-radius:0px;
    } 

    .email-page .viewing-mail .subject {
        height: 30px;
    }

    .email-page .viewing-mail .subject h4 {
        margin-top: -2px;
        margin-bottom: 20px;
    }

   .email-page  .mail-sender, .attachment-mail {
        width: 100%;
        display: inline-block;
        border-bottom:1px solid #EFF2F7 ;
        padding: 10px 0;

    }

    .email-page .mail-sender img {
        width: 30px;
        border-radius: 3px;
        -webkit-border-radius: 3px;
    }

    .email-page .mail-sender .sender-info {
        margin-top: -10px;
        margin-left: 40px;
    }

    .email-page .mail-sender .sender-info h5 {
        font-weight: bold;
        line-height: 1px;
        margin-top: 14px;
    }

    .email-page .mail-sender .date {
        line-height: 30px;
        margin-bottom: 0;
        text-align: right;
    }

    .email-page .sender-message {
        border-bottom: 1px solid #EFF2F7;
    }

    .email-page .sender-attachement {
        margin-top: 10px;
    }

    .email-page .sender-attachement a:hover {
        color: gray;
    }

    .email-page .sender-attachement a{
        color: #32323a;
    }

    .email-page .sender-attachement ul li  {
        float: left;
        width: 200px;
        margin-right: 15px;
        margin-top: 15px;
        list-style: none;
    }

    .email-page .sender-attachement ul li a.atch-thumb img {
        width: 200px;
        height: 180px;
        margin-bottom: 10px;
    }

    .email-page .sender-attachement ul li a.name span {
        float: right;
        color: #767676;
    }

    .email-page .reply-form {
        margin-top: 10px;
        border-top: 1px solid #EFF2F7;
    }

    .email-page .email-create .btn-group input[type=button]:focus {
        color: red;
    }


/* ============================================================
HEADING STYLE SECTION
============================================================ */
    /*** START STYLE 1 ***/
    h1.head-style-1 {
        border-bottom: 1px dotted #ccc;
        padding-bottom: 7px;
    }
    h2.head-style-1 {
        border-bottom: 1px dotted #ccc;
        padding-bottom: 6px;
    }
    h3.head-style-1 {
        border-bottom: 1px dotted #ccc;
        padding-bottom: 6px;
    }
    h4.head-style-1 {
        border-bottom: 1px dotted #ccc;
        padding-bottom: 8px;
    }
    h5.head-style-1 {
        border-bottom: 1px dotted #ccc;
        padding-bottom: 5px;
    }
    h6.head-style-1 {
        border-bottom: 1px dotted #ccc;
        padding-bottom: 5px;
    }
    .head-text-green {
        border-bottom: 3px solid #2ECC71;
        padding-bottom: 5px;
    }
    .head-text-turquoise {
        border-bottom: 3px solid #1ABC9C;
        padding-bottom: 5px;
    }
    .head-text-blue {
        border-bottom: 3px solid #3498DB;
        padding-bottom: 5px;
    }
    .head-text-amethyst {
        border-bottom: 3px solid #9B59B6;
        padding-bottom: 5px;
    }
    .head-text-light-brow {
        border-bottom: 3px solid #B2B1BA;
        padding-bottom: 5px;
    }
    .head-text-orange {
        border-bottom: 3px solid #F1C40F;
        padding-bottom: 5px;
    }
    .head-text-carrot {
        border-bottom: 3px solid #E67E22;
        padding-bottom: 5px;
    }
    .head-text-alizarin {
        border-bottom: 3px solid #E74C3C;
        padding-bottom: 5px;
    }
    .head-text-concrete {
        border-bottom: 3px solid #95A5A6;
        padding-bottom: 5px;
    }
    .head-text-blue-green {
        border-bottom: 3px solid #5AD1AD;
        padding-bottom: 5px;
    }
    
    /*** END STYLE 1 ***/

    /*** START STYLE 2 ***/
    h1.head-style-2 {
        border-bottom: 1px solid #ccc;
        padding-bottom: 4px;
    }
    h2.head-style-2 {
        border-bottom: 1px solid #ccc;
        padding-bottom: 3px;
    }
    h3.head-style-2 {
        border-bottom: 1px solid #ccc;
        padding-bottom: 3px;
    }
    h4.head-style-2 {
        border-bottom: 1px solid #ccc;
        padding-bottom: 6px;
    }
    h5.head-style-2 {
        border-bottom: 1px solid #ccc;
        padding-bottom: 4px;
    }
    h6.head-style-2 {
        border-bottom: 1px solid #ccc;
        padding-bottom: 4px;
    }
    /*** END STYLE 2 ***/

    /*** START STYLE 3 ***/
    h1.head-style-3 {
        color: #000; 
        font-size: 15px;
        font-weight: 700;
        font-style: normal; 
        margin: 0 0 20px;
        padding-bottom: 10px; 
        position: relative; 
        text-transform: uppercase;
        overflow: hidden;
        vertical-align: middle;
        font-family: 'Raleway', sans-serif;
    }

    h1.head-style-3:after {
        position: relative;
        left: 18px;
        content: "";
        display: inline-block;
        width: 200%;
        vertical-align: middle;
        height: .50em;
        margin: 0 -200% 0 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    h2.head-style-3 {
        color: #000; 
        font-size: 15px;
        font-weight: 700;
        font-style: normal; 
        margin: 0 0 20px;
        padding-bottom: 10px; 
        position: relative; 
        text-transform: uppercase;
        overflow: hidden;
        vertical-align: middle;
        font-family: 'Raleway', sans-serif;
    }

    h2.head-style-3:after {
        position: relative;
        left: 18px;
        content: "";
        display: inline-block;
        width: 200%;
        vertical-align: middle;
        height: .50em;
        margin: 0 -200% 0 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    h3.head-style-3 {
        color: #000; 
        font-size: 15px;
        font-weight: 700;
        font-style: normal; 
        margin: 0 0 20px;
        padding-bottom: 10px; 
        position: relative; 
        text-transform: uppercase;
        overflow: hidden;
        vertical-align: middle;
        font-family: 'Raleway', sans-serif;
    }

    h3.head-style-3:after {
        position: relative;
        left: 18px;
        content: "";
        display: inline-block;
        width: 200%;
        vertical-align: middle;
        height: .50em;
        margin: 0 -200% 0 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    h4.head-style-3 {
        color: #000; 
        font-size: 15px;
        font-weight: 700;
        font-style: normal; 
        margin: 0 0 20px;
        padding-bottom: 10px; 
        position: relative; 
        text-transform: uppercase;
        overflow: hidden;
        vertical-align: middle;
        font-family: 'Raleway', sans-serif;
    }

    h4.head-style-3:after {
        position: relative;
        left: 18px;
        content: "";
        display: inline-block;
        width: 200%;
        vertical-align: middle;
        height: .50em;
        margin: 0 -200% 0 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    h5.head-style-3 {
        color: #000; 
        font-size: 15px;
        font-weight: 700;
        font-style: normal; 
        margin: 0 0 20px;
        padding-bottom: 10px; 
        position: relative; 
        text-transform: uppercase;
        overflow: hidden;
        vertical-align: middle;
        font-family: 'Raleway', sans-serif;
    }

    h5.head-style-3:after {
        position: relative;
        left: 18px;
        content: "";
        display: inline-block;
        width: 200%;
        vertical-align: middle;
        height: .50em;
        margin: 0 -200% 0 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    h6.head-style-3 {
        color: #000; 
        font-size: 15px;
        font-weight: 700;
        font-style: normal; 
        margin: 0 0 20px;
        padding-bottom: 10px; 
        position: relative; 
        text-transform: uppercase;
        overflow: hidden;
        vertical-align: middle;
        font-family: 'Raleway', sans-serif;
    }

    h6.head-style-3:after {
        position: relative;
        left: 18px;
        content: "";
        display: inline-block;
        width: 200%;
        vertical-align: middle;
        height: .50em;
        margin: 0 -200% 0 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    /*** END STYLE 3 ***/

    /*** START STYLE 4 ***/
    h1.head-style-4:after {
        display: block;
        content: '......';
        color: #406da4;
        font-weight: 300;
    }
    h2.head-style-4:after {
        display: block;
        content: '......';
        color: #406da4;
        font-weight: 300;
    }
    h3.head-style-4:after {
        display: block;
        content: '......';
        color: #406da4;
        font-weight: 300;
    }
    h4.head-style-4:after {
        display: block;
        content: '......';
        color: #406da4;
        font-weight: 300;
    }
    h5.head-style-4:after {
        display: block;
        content: '......';
        color: #406da4;
        font-weight: 300;
    }
    h6.head-style-4:after {
        display: block;
        content: '......';
        color: #406da4;
        font-weight: 300;
    }
    /*** END STYLE 4 ***/

        

/* ============================================================
CUSTOM TABS SECTIONS
============================================================ */
    .tab-content {
        padding: 20px;
        background: #fff;
        
    }

    .nav.nav-tabs .open>a, .nav .open>a:focus, .nav .open>a:hover {
        /*background: #eee !important;*/
        border-color: transparent !important;
    }

    .nav.nav-tabs .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
        color: inherit;
        text-decoration: none;
        background-color: transparent;
        outline: 0;
    }

    .nav.nav-tabs.nav-justified li:last-child > a:hover, .nav.nav-tabs.nav-justified li.active:last-child > a {
        border-radius: 0 0 0 0 !important;
        -webkit-border-radius: 0 0 0 0 !important;
    }

    .nav-tabs > li > a {
        border-radius: 0!important;
        color: #777;
        border-bottom: 1px solid #DDDDDD;
    }

    .nav-tabs > li > a:hover {
        background: #f1f1f1;
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        color: #555;
        cursor: default;
        background-color: #fff;
        border-bottom-color: #fff;
    }

    .tabs-left > .nav-tabs > li,
    .tabs-right > .nav-tabs > li {
        float: none;
    }

    .tabs-left > .nav-tabs > li > a,
    .tabs-right > .nav-tabs > li > a {
        min-width: 74px;
        margin-right: 0;
        margin-bottom: 3px;
        border-bottom: 0;
    }

    .tabs-left > .nav-tabs {
        float: left;
        margin-right: 19px;
        border-right: 1px solid #ddd;
    }

    .tabs-left > .nav-tabs > li > a {
        margin-right: -1px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .tabs-left > .nav-tabs > li > a:hover,
    .tabs-left > .nav-tabs > li > a:focus {
        border-color: #eeeeee #dddddd #eeeeee #eeeeee;
    }

    .tabs-left > .nav-tabs .active > a,
    .tabs-left > .nav-tabs .active > a:hover,
    .tabs-left > .nav-tabs .active > a:focus {
        border-color: #ddd transparent #ddd #ddd;
        border-right-color: #ffffff;
        border-bottom: 1px solid #DDDDDD;
    }

    .tabs-right > .nav-tabs {
        float: right;
        margin-left: 19px;
        border-left: 1px solid #ddd;
    }

    .tabs-right > .nav-tabs > li > a {
        margin-left: -1px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .tabs-right > .nav-tabs > li > a:hover,
    .tabs-right > .nav-tabs > li > a:focus {
        border-color: #eeeeee #eeeeee #eeeeee #dddddd;
    }

    .tabs-right > .nav-tabs .active > a,
    .tabs-right > .nav-tabs .active > a:hover,
    .tabs-right > .nav-tabs .active > a:focus {
        border-color: #ddd #ddd #ddd transparent;
        border-left-color: #ffffff;
        border-bottom: 1px solid #DDDDDD;
    }


    .line-tabs {
        text-align: center;
    }
    

    .line-tabs ul>li {
        float: left
    }
    .line-tabs ul>li a {
        color: #707070;
    }
    .line-tabs ul>li a:hover,
    .line-tabs ul>li a:focus {
        color: #4a4a4a;
        background-color: transparent;
    }

    .line-tabs.bottom {
        border-bottom: 1px solid #ccc;
    }
    .line-tabs.bottom ul>li {
        margin-bottom: -1px;
    }
    .line-tabs.bottom a {
        border-bottom: 1px solid transparent;
    }

    .line-tabs.bottom .active a {
        border-bottom: 1px solid #2ECC71;
    }

    .nav.nav-pills > li > a {
        color: #777;
        border-radius: 0!important;
        margin-right: 10px;
        margin-left: 10px;
    }

    .nav.nav-pills > li.active > a, 
    .nav.nav-pills > li.active > a:hover,
    .nav.nav-pills > li.active > a:focus {
        color: #fff !important;
        background-color: #2ECC71 !important;

    }

    .tabs-below > .nav-tabs,
    .tabs-right > .nav-tabs,
    .tabs-left > .nav-tabs {
        border-bottom: 0;
    }

    .tab-content > .tab-pane,
    .pill-content > .pill-pane {
        display: none;
    }

    .tab-content > .active,
    .pill-content > .active {
        display: block;
    }


/* ============================================================
ACCORDION SECTIONS
============================================================ */
    .toggle-carret .panel-heading [data-toggle="collapse"]:after
    {
        font-family: 'FontAwesome';
        content: "\f106"; 
        float: right;
        color: #b0c5d8;
        font-size: 18px;
        line-height: 22px;

        /* rotate "play" icon from > (right arrow) to down arrow */
        -webkit-transform: rotate(-270deg)
        -moz-transform:    rotate(-270deg);
        -ms-transform:     rotate(-270deg);
        -o-transform:      rotate(-270deg);
        transform:         rotate(-270deg);

        -webkit-transition:all .3s ease;
        -moz-transition:all .3s ease;
        -ms-transition:all .3s ease;
        -o-transition:all .3s ease;
        transition:all .3s ease;
    }
    .toggle-carret .panel-heading [data-toggle="collapse"].collapsed:after
    {
       
        -webkit-transform: rotate(180deg);
        -moz-transform:    rotate(180deg);
        -ms-transform:     rotate(180deg);
        -o-transform:      rotate(180deg);
        transform:         rotate(180deg);

        -webkit-transition:all .3s ease;
        -moz-transition:all .3s ease;
        -ms-transition:all .3s ease;
        -o-transition:all .3s ease;
        transition:all .3s ease;
    }

    .panel-group .panel-heading {
        padding: 0px;
    }

    .panel-group .panel-heading [data-toggle='collapse']{
        width: 100%;
        display: block;
        height: 100%;
        padding: 15px 15px;
    }

    .panel-group .panel-body { 
        padding: 20px;
    }

    .panel-group .panel-default>.panel-heading {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .panel-group .panel-primary>.panel-heading {
        background-color: #337ab7;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        
    }

    .panel-group .panel-primary>.panel-heading a {
        color: #fff;
    }

    .panel-group .panel-success>.panel-heading {
        background-color: #5cb85c;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        
    }

    .panel-group .panel-success>.panel-heading a {
        color: #fff;
    }

    .panel-group .panel-info>.panel-heading {
        background-color: #5bc0de;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        
    }

    .panel-group .panel-info>.panel-heading a {
        color: #fff;
    }

    .panel-group .panel-warning>.panel-heading {
        background-color: #f0ad4e;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        
    }

    .panel-group .panel-warning>.panel-heading a {
        color: #fff;
    }

    .panel-group .panel-danger>.panel-heading {
        background-color: #d9534f;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        
    }

    .panel-group .panel-danger>.panel-heading a {
        color: #fff;
    }

/* ============================================================
BUTTONS SECTIONS
============================================================ */
    .btn-flat {
        border-radius: 0px;
        border-color:transparent;
    }

    .btn-flat:hover, .btn-flat:active {
        border-radius: 0px;
        border-color:transparent;
    }

    .btn-bordered { 
        background-color: #fff;
    }

    .btn-float {
        margin: 0;
        padding: 15px;
        font-size: 20px;
        width: 56px;
        height: 56px;
        border-radius: 100% !important;
    }

    .btn-bordered.btn-default {
        color: #b0b5b9;
        border: 1px solid #b0b5b9;
    }

    .btn-bordered.btn-default.active, 
    .btn-bordered.btn-default:active, 
    .btn-bordered.btn-default:focus, 
    .btn-bordered.btn-default:hover, 
    .open>.dropdown-toggle.btn-outline.btn-default {
        color: #fff;
    }

    .btn-bordered.btn-success {
        color: #5cb85c;
        border: 1px solid #5cb85c;
    }
        
    .btn-bordered.btn-primary {
        color: #337ab7;
        border: 1px solid #337ab7;
    }

    .btn-bordered.btn-primary.active, 
    .btn-bordered.btn-primary:active, 
    .btn-bordered.btn-primary:focus, 
    .btn-bordered.btn-primary:hover, 
    .open>.dropdown-toggle.btn-outline.btn-primary {
        color: #fff;
    }

    .btn-bordered.btn-success {
        color: #5cb85c;
        border: 1px solid #5cb85c;
    }

    .btn-bordered.btn-success.active, 
    .btn-bordered.btn-success:active, 
    .btn-bordered.btn-success:focus, 
    .btn-bordered.btn-success:hover, 
    .open>.dropdown-toggle.btn-outline.btn-success {
        color: #fff;
    }

    .btn-bordered.btn-info {
        color: #5bc0de;
        border: 1px solid #5bc0de;
    }

    .btn-bordered.btn-info.active, 
    .btn-bordered.btn-info:active, 
    .btn-bordered.btn-info:focus, 
    .btn-bordered.btn-info:hover, 
    .open>.dropdown-toggle.btn-outline.btn-info {
        color: #fff;
    }

    .btn-bordered.btn-warning {
        color: #f0ad4e;
        border: 1px solid #f0ad4e;
    }

    .btn-bordered.btn-warning.active, 
    .btn-bordered.btn-warning:active, 
    .btn-bordered.btn-warning:focus, 
    .btn-bordered.btn-warning:hover, 
    .open>.dropdown-toggle.btn-outline.btn-warning {
        color: #fff;
    }

    .btn-bordered.btn-danger {
        color: #d9534f;
        border: 1px solid #d9534f;
    }

    .btn-bordered.btn-danger.active, 
    .btn-bordered.btn-danger:active, 
    .btn-bordered.btn-danger:focus, 
    .btn-bordered.btn-danger:hover, 
    .open>.dropdown-toggle.btn-outline.btn-danger {
        color: #fff;
    }

    .btn.btn-raised{
        box-shadow:0 1px 6px 0 rgba(0,0,0,.12),0 1px 6px 0 rgba(0,0,0,.12);
        transition:box-shadow .28s cubic-bezier(.4,0,.2,1);
        border-color: transparent;
        border-radius: 2px;
    }
    .btn.btn-raised:active:not(.btn-link){
        box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15)
    }

    /*** Start button colors ***/
    .btn.btn-green {
        background-color: #2ECC71;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-green:hover {
        opacity: .8;
    }
    .btn.btn-green-sea {
        background-color: #16A085;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-green-sea:hover {
        opacity: .8;
    }
    .btn.btn-emerald {
        background-color: #2ECC71;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-emerald:hover {
        opacity: .8;
    }
    .btn.btn-nephritis {
        background-color: #27AE60;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-nephritis:hover {
        opacity: .8;
    }
    .btn.btn-peter-river {
        background-color: #3498DB;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-peter-river:hover {
        opacity: .8;
    }
    .btn.btn-belize-hole {
        background-color: #2980B9;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-belize-hole:hover {
        opacity: .8;
    }
    .btn.btn-amethyst {
        background-color: #9B59B6;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-amethyst:hover {
        opacity: .8;
    }
    .btn.btn-wisteria {
        background-color: #8E44AD;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-wisteria:hover {
        opacity: .8;
    }
    .btn.btn-wet-asphalt {
        background-color: #34495E;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-wet-asphalt:hover {
        opacity: .8;
    }
    .btn.btn-midnight-blue {
        background-color: #2C3E50;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-midnight-blue:hover {
        opacity: .8;
    }
    .btn.btn-sun-flower {
        background-color: #F1C40F;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-sun-flower:hover {
        opacity: .8;
    }
    .btn.btn-orange {
        background-color: #F39C12;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-orange:hover {
        opacity: .8;
    }
    .btn.btn-carrot {
        background-color: #E67E22;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-carrot:hover {
        opacity: .8;
    }
    .btn.btn-pumpkin {
        background-color: #D35400;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-pumpkin:hover {
        opacity: .8;
    }
    .btn.btn-alizarin {
        background-color: #E74C3C;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-alizarin:hover {
        opacity: .8;
    }
    .btn.btn-pomegranate {
        background-color: #C0392B;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-pomegranate:hover {
        opacity: .8;
    }
    .btn.btn-clouds {
        background-color: #ECF0F1;
        color: gray;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-pomegranate:hover {
        opacity: .8;
    }
    .btn.btn-silver {
        background-color: #BDC3C7;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-silver:hover {
        opacity: .8;
    }
    .btn.btn-concrete {
        background-color: #95A5A6;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-concrete:hover {
        opacity: .8;
    }
    .btn.btn-asbestos {
        background-color: #7F8C8D;
        color: #ffffff;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        transition:all 0.5s ease;
    }
    .btn.btn-asbestos:hover {
        opacity: .8;
    }
    /*** End button colors ***/

/* ============================================================
LABLES AND BADGES
============================================================ */
    /*Labels*/
    .label-green-sea {
        background-color: #16A085;
    }

    .label-emerald {
        background-color: #2ECC71;
    }

    .label-nephritis {
        background-color: #27AE60;
    }

    .label-peter-river {
        background-color: #3498DB;
    }

    .label-belize-hole {
        background-color: #2980B9;
    }

    .label-amethyst {
        background-color: #9B59B6;
    }

    .label-wisteria {
        background-color: #8E44AD;
    }

    .label-wet-asphalt {
        background-color: #34495E;
    }

    .label-midnight-blue {
        background-color: #2C3E50;
    }

    .label-night-shade {
        background-color: #2C3E50;
    }

    .label-sun-flower {
        background-color: #F1C40F;
    }

    .label-carrot {
        background-color: #F39C12;
    }

    .label-pumpkin {
        background-color: #D35400;
    }

    .label-alizarin {
        background-color: #E74C3C;
    }

    .label-pomegranate {
        background-color: #C0392B;
    }

    .label-clouds {
        background-color: #ECF0F1;
        color: gray;
    }

    .label-silver {
        background-color: #BDC3C7;
    }

    .label-concrete {
        background-color: #95A5A6;
    }

    .label-asbestos {
        background-color: #7F8C8D;
    }   

    /*Badges*/
    .badge-green-sea {
        background-color: #16A085;
    }

    .badge-emerald {
        background-color: #2ECC71;
    }

    .badge-nephritis {
        background-color: #27AE60;
    }

    .badge-peter-river {
        background-color: #3498DB;
    }

    .badge-belize-hole {
        background-color: #2980B9;
    }

    .badge-amethyst {
        background-color: #9B59B6;
    }

    .badge-wisteria {
        background-color: #8E44AD;
    }

    .badge-wet-asphalt {
        background-color: #34495E;
    }

    .badge-midnight-blue {
        background-color: #2C3E50;
    }

    .badge-night-shade {
        background-color: #2C3E50;
    }

    .badge-sun-flower {
        background-color: #F1C40F;
    }

    .badge-carrot {
        background-color: #F39C12;
    }

    .badge-pumpkin {
        background-color: #D35400;
    }

    .badge-alizarin {
        background-color: #E74C3C;
    }

    .badge-pomegranate {
        background-color: #C0392B;
    }

    .badge-clouds {
        background-color: #ECF0F1;
        color: gray;
    }

    .badge-silver {
        background-color: #BDC3C7;
    }

    .badge-concrete {
        background-color: #95A5A6;
    }

    .badge-asbestos {
        background-color: #7F8C8D;
    }   


/* ============================================================
MODAL SECTION
============================================================ */
    .modal-open .modal {
      z-index: 2000;
    }
    .modal-full {
      width: 98%;
    }
    .modal-footer.text-center {
      text-align: center;
    }
    .modal-panel .btn {
      margin-bottom: 10px;
    }
    ul.list-unstyled {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nv-axisMaxMin {
      color: red !important;
    }
    .modal-content {
      border-radius: 0px;
      border: none;
    }
    .modal-dialog {
      margin-top: 5%;
      z-index: 10000;
    }
    .modal-header {
        border-bottom: none;
        text-transform: uppercase;
        border-radius: 0px 0px 0 0;
        -webkit-border-radius: 0px 0px 0 0;
        border-bottom: none; 
    }
    .modal-header .modal-title {
      font-size: 15px;
    }
    .modal-header .close {
      opacity: .3;
      text-shadow: none;
    }
    .modal-header i {
      font-size: 12px;
    }
    .modal-header[class*="bg-"].close {
      color: #ffffff;
      opacity: .4;
    }
    .modal-footer {
      border-top: none;
    }
    .modal h2 {
      font-size: 20px;
    }
    .modal-pull-top {
        margin-top: 0;
        width: 100%;
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .modal-pull-top .modal-content {
      border-left: none;
      border-right: none;
      border-top: none;
    }
    .modal.modal-pull-top {
      padding-right: 0 !important;
    }
    .modal-pull-bottom .modal-content {
      border-bottom: none;
      border-left: none;
      border-right: none;
    }
    .modal-pull-bottom .modal-dialog {
      bottom: 0;
      left: 0;
      margin-bottom: 0;
      margin-top: auto;
      position: absolute;
      right: 0;
      width: 100%;
      padding: 0px;
    }
    .modal.fade.in.modal-pull-bottom .modal-dialog {
      -o-transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      transition: transform 0.3s ease-out;
      position: fixed;
    }
    .modal.fade.modal-pull-bottom .modal-dialog {
      -o-transform: translate3d(0, 25%, 0);
      -webkit-transform: translate3d(0, 25%, 0);
      transform: translate3d(0, 25%, 0);
      transition: transform 0.3s ease-out;
    }
    .modal-pull-right .modal-dialog {
        bottom: 0;
        height: 100%;
        left: auto;
        margin-bottom: 0;
        margin-top: 0;
        max-width: 300px;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        padding:0px;
    }
    .modal-pull-right .modal-dialog .modal-content {
      border: none;
      height: 100%;
    }
    .modal-pull-right .modal-dialog .modal-body {
        background-color: white;
        padding: 10px;
      /*border-collapse: collapse;
      display: table;
      height: 100% !important;
      padding-left: 0px;
      padding-right: 0px;
      table-layout: fixed;
      vertical-align: middle;
      width: 100%;*/
    }
    /*.modal-pull-right .modal-dialog .modal-body .row {
      display: table-row;
    }*/

    .modal-pull-left .modal-dialog {
      bottom: 0;
      height: 100%;
      left: 0;
      margin-bottom: 0;
      margin-top: 0;
      max-width: 300px;
      position: absolute;
      right: auto;
      top: 0;
      width: 100%;
      padding: 0px;
    }

    .modal-pull-right .modal-close {
        width: 100%;
        margin-left: 0px;
    }
        

    .modal-pull-left .modal-dialog .modal-content {
      border: none;
      height: 100%;
    }
    .modal-pull-left .modal-dialog .modal-body {
      border-collapse: collapse;
      display: table;
      height: 100% !important;
      padding-left: 0px;
      padding-right: 0px;
      table-layout: fixed;
      vertical-align: middle;
      width: 100%;
    }
    .modal-pull-left .modal-dialog .modal-body .row {
      display: table-row;
    }
    .modal-pull-left .modal-dialog .modal-body .row .col-md-12 {
      display: table-cell;
      float: none;
      text-align: center;
      top: -20%;
      vertical-align: middle;
    }
    .modal.fade.modal-pull-right .modal-dialog {
      -o-transform: translate3d(25%, 0, 0);
      -webkit-transform: translate3d(25%, 0, 0);
      transform: translate3d(25%, 0, 0);
      transition: transform 0.3s ease-out;
    }
    .modal.fade.modal-pull-left .modal-dialog {
      -o-transform: translate3d(-25%, 0, 0);
      -webkit-transform: translate3d(-25%, 0, 0);
      transform: translate3d(-25%, 0, 0);
      transition: transform 0.3s ease-out;
      position: fixed;
    }
    .modal.fade.in.modal-pull-right .modal-dialog {
      -o-transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      transition: transform 0.3s ease-out;
    }
    .modal.fade.in.modal-pull-left .modal-dialog {
      -o-transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      transition: transform 0.3s ease-out;
    }
    .modal-container {
      -moz-transition: all 0.2s ease-out 0;
      -webkit-transition: all 0.2s ease-out 0;
      background: #E6E6E6;
      cursor: pointer;
      height: 250px;
      padding-top: 50px;
      position: relative;
      text-align: center;
      transition: all 0.2s ease-out 0;
    }
    .modal-container:hover {
      background: #3C3C3C;
    }
    .basic-modal-img {
      width: 60%;
    }
    .large-modal-img {
      width: 60%;
    }
    .full-modal-img {
      width: 95%;
    }
    .top-modal-img {
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      width: 100%;
    }
    .bottom-modal-img {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      width: 100%;
    }
    .left-modal-img {
      bottom: 0;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: auto;
    }
    .right-modal-img {
      bottom: 0;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      width: auto;
    }
    @media (min-width: 1600px) {
      .basic-modal-img {
        width: 40%;
      }
    }

/* ============================================================
FLAT CHECKBOX
============================================================ */
    /** START fcheck default **/
    .fcheck[type="checkbox"] {
      margin-left: 0px;
    }  
    .fcheck[type="checkbox"]:not(:checked),
    .fcheck[type="checkbox"]:checked  {
      position: relative;
      padding-left: 25px;
      cursor: pointer;
      margin-right: 2px;
    }


    /* checkbox aspect */
    .fcheck[type="checkbox"]:not(:checked):before,
    .fcheck[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #e2e2e4;
        background: #f8f8f8;
    }
    /* checked mark aspect */
    .fcheck[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: gray;
        transition: all .2s;
    }
    /* checked mark aspect changes */
    .fcheck[type="checkbox"]:not(:checked):after {
      opacity: 0;
      transform: scale(0);
    }
    .fcheck[type="checkbox"]:checked:after {
      opacity: 1;
      transform: scale(1);
    }
    /* disabled checkbox */
    .fcheck[type="checkbox"]:disabled:not(:checked):before,
    .fcheck[type="checkbox"]:disabled:checked:before {
      box-shadow: none;
      border-color: #bbb;
      background-color: #ddd;
    }
    .fcheck[type="checkbox"]:disabled:checked:after {
      color: #999;
    }
    .fcheck[type="checkbox"]:disabled {
      color: #aaa;
    }
    /** END fcheck default **/

    /** START fcheck primary **/
    .fcheck.primary[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #337ab7;
        transition: all .2s;
    }
    .fcheck.primary[type="checkbox"]:not(:checked):before,
    .fcheck.primary[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #204d74;
        background: #f8f8f8;
    }
    /**for bg primary **/
    .fcheck.bg-primary[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-primary[type="checkbox"]:not(:checked):before,
    .fcheck.bg-primary[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #337ab7;
        background: #337ab7;
    }

    /** END fcheck primary **/

    /** START fcheck info **/
    .fcheck.info[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #5bc0de;
        transition: all .2s;
    }
    .fcheck.info[type="checkbox"]:not(:checked):before,
    .fcheck.info[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #46b8da;
        background: #f8f8f8;
    }

    /**for bg info**/
    .fcheck.bg-info[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-info[type="checkbox"]:not(:checked):before,
    .fcheck.bg-info[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #5bc0de;
        background: #5bc0de;
    }
    /** END fcheck info **/

    /** START fcheck success **/
    .fcheck.success[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #5cb85c;
        transition: all .2s;
    }
    .fcheck.success[type="checkbox"]:not(:checked):before,
    .fcheck.success[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #4cae4c;
        background: #f8f8f8;
    }

    /**for bg success**/
    .fcheck.bg-success[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-success[type="checkbox"]:not(:checked):before,
    .fcheck.bg-success[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #5cb85c;
        background: #5cb85c;
    }
    /** END fcheck success **/

    /** START fcheck danger **/
    .fcheck.danger[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #d9534f;
        transition: all .2s;
    }
    .fcheck.danger[type="checkbox"]:not(:checked):before,
    .fcheck.danger[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #d43f3a;
        background: #f8f8f8;
    }

    /**for bg warning**/
    .fcheck.bg-danger[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-danger[type="checkbox"]:not(:checked):before,
    .fcheck.bg-danger[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #d9534f;
        background: #d9534f;
    }
    /** END fcheck danger **/

    /** START fcheck warning **/
    .fcheck.warning[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #f0ad4e;
        transition: all .2s;
    }
    .fcheck.warning[type="checkbox"]:not(:checked):before,
    .fcheck.warning[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #eea236;
        background: #f8f8f8;
    }

    /**for bg warning**/
    .fcheck.bg-warning[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-warning[type="checkbox"]:not(:checked):before,
    .fcheck.bg-warning[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #f0ad4e;
        background: #f0ad4e;
    }
    /** END fcheck warning **/

    /** START fcheck green **/
    .fcheck.green[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #2ECC71;
        transition: all .2s;
    }
    .fcheck.green[type="checkbox"]:not(:checked):before,
    .fcheck.green[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #2ECC71;
        background: #f8f8f8;
    }

    /**for bg green**/
    .fcheck.bg-green[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-green[type="checkbox"]:not(:checked):before,
    .fcheck.bg-green[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #2ECC71;
        background: #2ECC71;
    }
    /** END fcheck green **/

    /** START fcheck green-sea **/
    .fcheck.green-sea[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #16A085;
        transition: all .2s;
    }
    .fcheck.green-sea[type="checkbox"]:not(:checked):before,
    .fcheck.green-sea[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #16A085;
        background: #f8f8f8;
    }

    /**for bg green-sea**/
    .fcheck.bg-green-sea[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-green-sea[type="checkbox"]:not(:checked):before,
    .fcheck.bg-green-sea[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #16A085;
        background: #16A085;
    }
    /** END fcheck green-sea **/

    /** START fcheck emerald **/
    .fcheck.emerald[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #2ECC71;
        transition: all .2s;
    }
    .fcheck.emerald[type="checkbox"]:not(:checked):before,
    .fcheck.emerald[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #2ECC71;
        background: #f8f8f8;
    }

    /**for bg emerald**/
    .fcheck.bg-emerald[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-emerald[type="checkbox"]:not(:checked):before,
    .fcheck.bg-emerald[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #2ECC71;
        background: #2ECC71;
    }
    /** END fcheck emerald **/

    /** START fcheck nephritis **/
    .fcheck.nephritis[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #27AE60;
        transition: all .2s;
    }
    .fcheck.nephritis[type="checkbox"]:not(:checked):before,
    .fcheck.nephritis[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #27AE60;
        background: #f8f8f8;
    }

    /**for bg nephritis**/
    .fcheck.bg-nephritis[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-nephritis[type="checkbox"]:not(:checked):before,
    .fcheck.bg-nephritis[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #27AE60;
        background: #27AE60;
    }
    /** END fcheck nephritis **/

    /** START fcheck peter-river **/
    .fcheck.peter-river[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #3498DB;
        transition: all .2s;
    }
    .fcheck.peter-river[type="checkbox"]:not(:checked):before,
    .fcheck.peter-river[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #3498DB;
        background: #f8f8f8;
    }

    /**for bg peter-river**/
    .fcheck.bg-peter-river[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-peter-river[type="checkbox"]:not(:checked):before,
    .fcheck.bg-peter-river[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #3498DB;
        background: #3498DB;
    }
    /** END fcheck peter-river **/

    /** START fcheck belize-hole **/
    .fcheck.belize-hole[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #2980B9;
        transition: all .2s;
    }
    .fcheck.belize-hole[type="checkbox"]:not(:checked):before,
    .fcheck.belize-hole[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #2980B9;
        background: #f8f8f8;
    }

    /**for bg belize-hole**/
    .fcheck.bg-belize-hole[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-belize-hole[type="checkbox"]:not(:checked):before,
    .fcheck.bg-belize-hole[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #2980B9;
        background: #2980B9;
    }
    /** END fcheck belize-hole **/

    /** START fcheck amethyst **/
    .fcheck.amethyst[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #9B59B6;
        transition: all .2s;
    }
    .fcheck.amethyst[type="checkbox"]:not(:checked):before,
    .fcheck.amethyst[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #9B59B6;
        background: #f8f8f8;
    }

    /**for bg amethyst**/
    .fcheck.bg-amethyst[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-amethyst[type="checkbox"]:not(:checked):before,
    .fcheck.bg-amethyst[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #9B59B6;
        background: #9B59B6;
    }
    /** END fcheck amethyst **/

    /** START fcheck wisteria **/
    .fcheck.wisteria[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #8E44AD;
        transition: all .2s;
    }
    .fcheck.wisteria[type="checkbox"]:not(:checked):before,
    .fcheck.wisteria[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #8E44AD;
        background: #f8f8f8;
    }

    /**for bg wisteria**/
    .fcheck.bg-wisteria[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-wisteria[type="checkbox"]:not(:checked):before,
    .fcheck.bg-wisteria[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #8E44AD;
        background: #8E44AD;
    }
    /** END fcheck wisteria **/

    /** START fcheck wet-asphalt **/
    .fcheck.wet-asphalt[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #34495E;
        transition: all .2s;
    }
    .fcheck.wet-asphalt[type="checkbox"]:not(:checked):before,
    .fcheck.wet-asphalt[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #34495E;
        background: #f8f8f8;
    }

    /**for bg wet-asphalt**/
    .fcheck.bg-wet-asphalt[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-wet-asphalt[type="checkbox"]:not(:checked):before,
    .fcheck.bg-wet-asphalt[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #34495E;
        background: #34495E;
    }
    /** END fcheck wet-asphalt **/

    /** START fcheck midnight-blue **/
    .fcheck.midnight-blue[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #2C3E50;
        transition: all .2s;
    }
    .fcheck.midnight-blue[type="checkbox"]:not(:checked):before,
    .fcheck.midnight-blue[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #2C3E50;
        background: #f8f8f8;
    }

    /**for bg midnight-blue**/
    .fcheck.bg-midnight-blue[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-midnight-blue[type="checkbox"]:not(:checked):before,
    .fcheck.bg-midnight-blue[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #2C3E50;
        background: #2C3E50;
    }
    /** END fcheck midnight-blue **/


    /** START fcheck sun-flower **/
    .fcheck.sun-flower[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #F1C40F;
        transition: all .2s;
    }
    .fcheck.sun-flower[type="checkbox"]:not(:checked):before,
    .fcheck.sun-flower[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #F1C40F;
        background: #f8f8f8;
    }

    /**for bg sun-flower**/
    .fcheck.bg-sun-flower[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-sun-flower[type="checkbox"]:not(:checked):before,
    .fcheck.bg-sun-flower[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #F1C40F;
        background: #F1C40F;
    }
    /** END fcheck sun-flower **/

    /** START fcheck orange **/
    .fcheck.orange[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #F39C12;
        transition: all .2s;
    }
    .fcheck.orange[type="checkbox"]:not(:checked):before,
    .fcheck.orange[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #F39C12;
        background: #f8f8f8;
    }

    /**for bg orange**/
    .fcheck.bg-orange[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-orange[type="checkbox"]:not(:checked):before,
    .fcheck.bg-orange[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #F39C12;
        background: #F39C12;
    }
    /** END fcheck orange **/

    /** START fcheck carrot **/
    .fcheck.carrot[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #E67E22;
        transition: all .2s;
    }
    .fcheck.carrot[type="checkbox"]:not(:checked):before,
    .fcheck.carrot[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #E67E22;
        background: #f8f8f8;
    }

    /**for bg carrot**/
    .fcheck.bg-carrot[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-carrot[type="checkbox"]:not(:checked):before,
    .fcheck.bg-carrot[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #E67E22;
        background: #E67E22;
    }
    /** END fcheck carrot **/

    /** START fcheck pumpkin **/
    .fcheck.pumpkin[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #D35400;
        transition: all .2s;
    }
    .fcheck.pumpkin[type="checkbox"]:not(:checked):before,
    .fcheck.pumpkin[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #D35400;
        background: #f8f8f8;
    }

    /**for bg pumpkin **/
    .fcheck.bg-pumpkin[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-pumpkin[type="checkbox"]:not(:checked):before,
    .fcheck.bg-pumpkin[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #D35400;
        background: #D35400;
    }
    /** END fcheck pumpkin  **/

    /** START fcheck alizarin **/
    .fcheck.alizarin[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #E74C3C;
        transition: all .2s;
    }
    .fcheck.alizarin[type="checkbox"]:not(:checked):before,
    .fcheck.alizarin[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #E74C3C;
        background: #f8f8f8;
    }

    /**for bg alizarin  **/
    .fcheck.bg-alizarin[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-alizarin[type="checkbox"]:not(:checked):before,
    .fcheck.bg-alizarin[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #E74C3C;
        background: #E74C3C;
    }
    /** END fcheck alizarin   **/

    /** START fcheck pomegranate **/
    .fcheck.pomegranate[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #C0392B;
        transition: all .2s;
    }
    .fcheck.pomegranate[type="checkbox"]:not(:checked):before,
    .fcheck.pomegranate[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #C0392B;
        background: #f8f8f8;
    }

    /**for bg pomegranate  **/
    .fcheck.bg-pomegranate[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-pomegranate[type="checkbox"]:not(:checked):before,
    .fcheck.bg-pomegranate[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #C0392B;
        background: #C0392B;
    }
    /** END fcheck pomegranate   **/

    /** START fcheck clouds **/
    .fcheck.clouds[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #ECF0F1;
        transition: all .2s;
    }
    .fcheck.clouds[type="checkbox"]:not(:checked):before,
    .fcheck.clouds[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #ECF0F1;
        background: #f8f8f8;
    }

    /**for bg clouds  **/
    .fcheck.bg-clouds[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-clouds[type="checkbox"]:not(:checked):before,
    .fcheck.bg-clouds[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #ECF0F1;
        background: #ECF0F1;
    }
    /** END fcheck clouds   **/

    /** START fcheck silver **/
    .fcheck.silver[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #BDC3C7;
        transition: all .2s;
    }
    .fcheck.silver[type="checkbox"]:not(:checked):before,
    .fcheck.silver[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #BDC3C7;
        background: #f8f8f8;
    }

    /**for bg silver  **/
    .fcheck.bg-silver[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-silver[type="checkbox"]:not(:checked):before,
    .fcheck.bg-silver[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #BDC3C7;
        background: #BDC3C7;
    }
    /** END fcheck silver   **/

    /** START fcheck concrete **/
    .fcheck.concrete[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #95A5A6;
        transition: all .2s;
    }
    .fcheck.concrete[type="checkbox"]:not(:checked):before,
    .fcheck.concrete[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #95A5A6;
        background: #f8f8f8;
    }

    /**for bg concrete  **/
    .fcheck.bg-concrete[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-concrete[type="checkbox"]:not(:checked):before,
    .fcheck.bg-concrete[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #95A5A6;
        background: #95A5A6;
    }
    /** END fcheck concrete   **/

    /** START fcheck asbestos **/
    .fcheck.asbestos[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #7F8C8D;
        transition: all .2s;
    }
    .fcheck.asbestos[type="checkbox"]:not(:checked):before,
    .fcheck.asbestos[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #7F8C8D;
        background: #f8f8f8;
    }

    /**for bg asbestos  **/
    .fcheck.bg-asbestos[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 2px;
        left: 1.5px;
        font-size: 12px;
        color: #fff;
        transition: all .2s;
    }
    .fcheck.bg-asbestos[type="checkbox"]:not(:checked):before,
    .fcheck.bg-asbestos[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 15px;
        height: 15px;
        border: 1px solid #7F8C8D;
        background: #7F8C8D;
    }
    /** END fcheck asbestos   **/


    /** START fcheck small **/
    .fcheck.sm[type="checkbox"]:not(:checked), 
    .fcheck.sm[type="checkbox"]:checked {
        position: relative;
        padding-left: 25px;
        cursor: pointer;
        margin-right: 0px;
    }
    .fcheck.sm[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 1.6px;
        left: 1.5px;
        font-size: 8px;
        transition: all .2s;
    }
    .fcheck.sm[type="checkbox"]:not(:checked):before,
    .fcheck.sm[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 12px;
        height: 12px;
    }
    /** END fcheck small **/

    /** START fcheck medium **/
    .fcheck.md[type="checkbox"]:not(:checked), 
    .fcheck.md[type="checkbox"]:checked {
        position: relative;
        padding-left: 25px;
        cursor: pointer;
        margin-right: 5px;
    }
    .fcheck.md[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 1.6px;
        left: 1.5px;
        font-size: 15px;
        transition: all .2s;
    }
    .fcheck.md[type="checkbox"]:not(:checked):before,
    .fcheck.md[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 18px;
        height: 18px;
    }
    /** END fcheck medium **/

    /** START fcheck large **/
    .fcheck.lg[type="checkbox"]:not(:checked), 
    .fcheck.lg[type="checkbox"]:checked {
        position: relative;
        padding-left: 25px;
        cursor: pointer;
        margin-right: 7px;
        top: -2px;
    }
    .fcheck.lg[type="checkbox"]:checked:after {
        font-family: "FontAwesome";
        content: "\f00c";
        position: absolute;
        top: 1px;
        left: 1.5px;
        font-size: 18px;
        transition: all .2s;
    }
    .fcheck.lg[type="checkbox"]:not(:checked):before,
    .fcheck.lg[type="checkbox"]:checked:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0px;
        width: 20px;
        height: 20px;
    }
    /** END fcheck large **/

    .fcheck.curved[type="checkbox"]:not(:checked):before, 
    .fcheck.curved[type="checkbox"]:checked:before {
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
    }



/******* Flat Radio Button *********/
    /** START fcheck default **/
    .fradio[type="radio"] {
      margin-left: 0px;
    }  
    .fradio[type="radio"]:not(:checked),
    .fradio[type="radio"]:checked  {
      position: relative;
      padding-left: 25px;
      cursor: pointer;
      margin-right: 2px;
    }


    /* fradio aspect */
    .fradio[type="radio"]:not(:checked):before, 
    .fradio[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #e2e2e4;
        background: #f8f8f8;
        border-radius: 120px;
    }
    /* checked mark aspect */
    .fradio[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #B9B8B8;
        transition: all .2s;
    }
    /* checked mark aspect changes */
    .fradio[type="radio"]:not(:checked):after {
      opacity: 0;
      transform: scale(0);
    }
    .fradio[type="radio"]:checked:after {
      opacity: 1;
      transform: scale(1);
    }
    /* disabled radio */
    .fradio[type="radio"]:disabled:not(:checked):before,
    .fradio[type="radio"]:disabled:checked:before {
      box-shadow: none;
      border-color: #bbb;
      background-color: #ddd;
    }
    .fradio[type="radio"]:disabled:checked:after {
      color: #999;
    }
    .fradio[type="radio"]:disabled {
      color: #aaa;
    }
    /** END fradio default **/

    /** START fradio primary **/
    .fradio.primary[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #337ab7;
        transition: all .2s;
    }
    .fradio.primary[type="radio"]:not(:checked):before,
    .fradio.primary[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #337ab7;
        background: #f8f8f8;
        border-radius: 120px;
    }
    /**for bg primary **/
    .fradio.bg-primary[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-primary[type="radio"]:not(:checked):before,
    .fradio.bg-primary[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #337ab7;
        background: #337ab7;
    }

    /** END fradio primary **/

    /** START fradio info **/
    .fradio.info[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #5bc0de;
        transition: all .2s;
    }
    .fradio.info[type="radio"]:not(:checked):before,
    .fradio.info[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #46b8da;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg info**/
    .fradio.bg-info[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-info[type="radio"]:not(:checked):before,
    .fradio.bg-info[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #5bc0de;
        background: #5bc0de;
    }
    /** END fradio info **/

    /** START fradio success **/
    .fradio.success[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #5cb85c;
        transition: all .2s;
    }
    .fradio.success[type="radio"]:not(:checked):before,
    .fradio.success[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #4cae4c;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg success**/
    .fradio.bg-success[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-success[type="radio"]:not(:checked):before,
    .fradio.bg-success[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #5cb85c;
        background: #5cb85c;
    }
    /** END fradio success **/

    /** START fradio danger **/
    .fradio.danger[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #d9534f;
        transition: all .2s;
    }
    .fradio.danger[type="radio"]:not(:checked):before,
    .fradio.danger[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #d43f3a;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg warning**/
    .fradio.bg-danger[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-danger[type="radio"]:not(:checked):before,
    .fradio.bg-danger[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #d9534f;
        background: #d9534f;
    }
    /** END fradio danger **/

    /** START fradio warning **/
    .fradio.warning[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #f0ad4e;
        transition: all .2s;
    }
    .fradio.warning[type="radio"]:not(:checked):before,
    .fradio.warning[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #eea236;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg warning**/
    .fradio.bg-warning[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-warning[type="radio"]:not(:checked):before,
    .fradio.bg-warning[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #f0ad4e;
        background: #f0ad4e;
    }
    /** END fradio warning **/

    /** START fradio green **/
    .fradio.green[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #2ECC71;
        transition: all .2s;
    }
    .fradio.green[type="radio"]:not(:checked):before,
    .fradio.green[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #2ECC71;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg green**/
    .fradio.bg-green[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-green[type="radio"]:not(:checked):before,
    .fradio.bg-green[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #2ECC71;
        background: #2ECC71;
    }
    /** END fradio green **/

    /** START fradio green-sea **/
    .fradio.green-sea[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #16A085;
        transition: all .2s;
    }
    .fradio.green-sea[type="radio"]:not(:checked):before,
    .fradio.green-sea[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #16A085;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg green-sea**/
    .fradio.bg-green-sea[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-green-sea[type="radio"]:not(:checked):before,
    .fradio.bg-green-sea[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #16A085;
        background: #16A085;
    }
    /** END fradio green-sea **/

    /** START fradio emerald **/
    .fradio.emerald[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #2ECC71;
        transition: all .2s;
    }
    .fradio.emerald[type="radio"]:not(:checked):before,
    .fradio.emerald[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #2ECC71;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg emerald**/
    .fradio.bg-emerald[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-emerald[type="radio"]:not(:checked):before,
    .fradio.bg-emerald[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #2ECC71;
        background: #2ECC71;
    }
    /** END fradio emerald **/

    /** START fradio nephritis **/
    .fradio.nephritis[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #27AE60;
        transition: all .2s;
    }
    .fradio.nephritis[type="radio"]:not(:checked):before,
    .fradio.nephritis[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #27AE60;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg nephritis**/
    .fradio.bg-nephritis[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-nephritis[type="radio"]:not(:checked):before,
    .fradio.bg-nephritis[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #27AE60;
        background: #27AE60;
    }
    /** END fradio nephritis **/

    /** START fradio peter-river **/
    .fradio.peter-river[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #3498DB;
        transition: all .2s;
    }
    .fradio.peter-river[type="radio"]:not(:checked):before,
    .fradio.peter-river[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #3498DB;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg peter-river**/
    .fradio.bg-peter-river[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-peter-river[type="radio"]:not(:checked):before,
    .fradio.bg-peter-river[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #3498DB;
        background: #3498DB;
    }
    /** END fradio peter-river **/

    /** START fradio belize-hole **/
    .fradio.belize-hole[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #2980B9;
        transition: all .2s;
    }
    .fradio.belize-hole[type="radio"]:not(:checked):before,
    .fradio.belize-hole[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #2980B9;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg belize-hole**/
    .fradio.bg-belize-hole[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-belize-hole[type="radio"]:not(:checked):before,
    .fradio.bg-belize-hole[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #2980B9;
        background: #2980B9;
    }
    /** END fradio belize-hole **/

    /** START fradio amethyst **/
    .fradio.amethyst[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #9B59B6;
        transition: all .2s;
    }
    .fradio.amethyst[type="radio"]:not(:checked):before,
    .fradio.amethyst[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #9B59B6;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg amethyst**/
    .fradio.bg-amethyst[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-amethyst[type="radio"]:not(:checked):before,
    .fradio.bg-amethyst[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #9B59B6;
        background: #9B59B6;
    }
    /** END fradio amethyst **/

    /** START fradio wisteria **/
    .fradio.wisteria[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #8E44AD;
        transition: all .2s;
    }
    .fradio.wisteria[type="radio"]:not(:checked):before,
    .fradio.wisteria[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #8E44AD;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg wisteria**/
    .fradio.bg-wisteria[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-wisteria[type="radio"]:not(:checked):before,
    .fradio.bg-wisteria[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #8E44AD;
        background: #8E44AD;
    }
    /** END fradio wisteria **/

    /** START fradio wet-asphalt **/
    .fradio.wet-asphalt[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #34495E;
        transition: all .2s;
    }
    .fradio.wet-asphalt[type="radio"]:not(:checked):before,
    .fradio.wet-asphalt[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #34495E;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg wet-asphalt**/
    .fradio.bg-wet-asphalt[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-wet-asphalt[type="radio"]:not(:checked):before,
    .fradio.bg-wet-asphalt[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #34495E;
        background: #34495E;
    }
    /** END fradio wet-asphalt **/

    /** START fradio midnight-blue **/
    .fradio.midnight-blue[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #2C3E50;
        transition: all .2s;
    }
    .fradio.midnight-blue[type="radio"]:not(:checked):before,
    .fradio.midnight-blue[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #2C3E50;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg midnight-blue**/
    .fradio.bg-midnight-blue[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-midnight-blue[type="radio"]:not(:checked):before,
    .fradio.bg-midnight-blue[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #2C3E50;
        background: #2C3E50;
    }
    /** END fradio midnight-blue **/


    /** START fradio sun-flower **/
    .fradio.sun-flower[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #F1C40F;
        transition: all .2s;
    }
    .fradio.sun-flower[type="radio"]:not(:checked):before,
    .fradio.sun-flower[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #F1C40F;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg sun-flower**/
    .fradio.bg-sun-flower[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-sun-flower[type="radio"]:not(:checked):before,
    .fradio.bg-sun-flower[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #F1C40F;
        background: #F1C40F;
    }
    /** END fradio sun-flower **/

    /** START fradio orange **/
    .fradio.orange[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #F39C12;
        transition: all .2s;
    }
    .fradio.orange[type="radio"]:not(:checked):before,
    .fradio.orange[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #F39C12;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg orange**/
    .fradio.bg-orange[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-orange[type="radio"]:not(:checked):before,
    .fradio.bg-orange[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #F39C12;
        background: #F39C12;
    }
    /** END fradio orange **/

    /** START fradio carrot **/
    .fradio.carrot[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #E67E22;
        transition: all .2s;
    }
    .fradio.carrot[type="radio"]:not(:checked):before,
    .fradio.carrot[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #E67E22;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg carrot**/
    .fradio.bg-carrot[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-carrot[type="radio"]:not(:checked):before,
    .fradio.bg-carrot[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #E67E22;
        background: #E67E22;
    }
    /** END fradio carrot **/

    /** START fradio pumpkin **/
    .fradio.pumpkin[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #D35400;
        transition: all .2s;
    }
    .fradio.pumpkin[type="radio"]:not(:checked):before,
    .fradio.pumpkin[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #D35400;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg pumpkin **/
    .fradio.bg-pumpkin[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-pumpkin[type="radio"]:not(:checked):before,
    .fradio.bg-pumpkin[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #D35400;
        background: #D35400;
    }
    /** END fradio pumpkin  **/

    /** START fradio alizarin **/
    .fradio.alizarin[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #E74C3C;
        transition: all .2s;
    }
    .fradio.alizarin[type="radio"]:not(:checked):before,
    .fradio.alizarin[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #E74C3C;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg alizarin  **/
    .fradio.bg-alizarin[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-alizarin[type="radio"]:not(:checked):before,
    .fradio.bg-alizarin[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #E74C3C;
        background: #E74C3C;
    }
    /** END fradio alizarin   **/

    /** START fradio pomegranate **/
    .fradio.pomegranate[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #C0392B;
        transition: all .2s;
    }
    .fradio.pomegranate[type="radio"]:not(:checked):before,
    .fradio.pomegranate[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #C0392B;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg pomegranate  **/
    .fradio.bg-pomegranate[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-pomegranate[type="radio"]:not(:checked):before,
    .fradio.bg-pomegranate[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #C0392B;
        background: #C0392B;
    }
    /** END fradio pomegranate   **/

    /** START fradio clouds **/
    .fradio.clouds[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #ECF0F1;
        transition: all .2s;
    }
    .fradio.clouds[type="radio"]:not(:checked):before,
    .fradio.clouds[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #ECF0F1;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg clouds  **/
    .fradio.bg-clouds[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-clouds[type="radio"]:not(:checked):before,
    .fradio.bg-clouds[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #ECF0F1;
        background: #ECF0F1;
    }
    /** END fradio clouds   **/

    /** START fradio silver **/
    .fradio.silver[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #BDC3C7;
        transition: all .2s;
    }
    .fradio.silver[type="radio"]:not(:checked):before,
    .fradio.silver[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #BDC3C7;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg silver  **/
    .fradio.bg-silver[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-silver[type="radio"]:not(:checked):before,
    .fradio.bg-silver[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #BDC3C7;
        background: #BDC3C7;
    }
    /** END fradio silver   **/

    /** START fradio concrete **/
    .fradio.concrete[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #95A5A6;
        transition: all .2s;
    }
    .fradio.concrete[type="radio"]:not(:checked):before,
    .fradio.concrete[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #95A5A6;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg concrete  **/
    .fradio.bg-concrete[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-concrete[type="radio"]:not(:checked):before,
    .fradio.bg-concrete[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #95A5A6;
        background: #95A5A6;
    }
    /** END fradio concrete   **/

    /** START fradio asbestos **/
    .fradio.asbestos[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -2.7px;
        font-size: 8px;
        color: #7F8C8D;
        transition: all .2s;
    }
    .fradio.asbestos[type="radio"]:not(:checked):before,
    .fradio.asbestos[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #7F8C8D;
        background: #f8f8f8;
        border-radius: 120px;
    }

    /**for bg asbestos  **/
    .fradio.bg-asbestos[type="radio"]:checked:after {
        font-family: "FontAwesome";
        content: "\f111";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -3.3px;
        font-size: 8px;
        color: #fff;
        transition: all .2s;
    }
    .fradio.bg-asbestos[type="radio"]:not(:checked):before,
    .fradio.bg-asbestos[type="radio"]:checked:before {
        content: '';
        position: absolute;
        left: -1px;
        top: -1px;
        width: 16px;
        height: 16px;
        border: 2px solid #7F8C8D;
        background: #7F8C8D;
    }
    /** END fradio asbestos   **/


/* ============================================================
DATEPICKER SECTION
============================================================ */
    .datepicker {
        padding: 10px!important;
        border: 1px solid #e0e0e0!important;
        border-radius: 0!important;
        -webkit-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1)!important;
        -moz-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1)!important;
        box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1)!important;
    }

    .datepicker table tr td,
    .datepicker table tr th, 
    .datepicker table tr td span {
        border-radius: 0!important;
    }

    .datepicker table tr td.active:hover,
    .datepicker table tr td.active:hover:hover,
    .datepicker table tr td.active.disabled:hover,
    .datepicker table tr td.active.disabled:hover:hover,
    .datepicker table tr td.active:focus,
    .datepicker table tr td.active:hover:focus,
    .datepicker table tr td.active.disabled:focus,
    .datepicker table tr td.active.disabled:hover:focus,
    .datepicker table tr td.active:active,
    .datepicker table tr td.active:hover:active,
    .datepicker table tr td.active.disabled:active,
    .datepicker table tr td.active.disabled:hover:active,
    .datepicker table tr td.active.active,
    .datepicker table tr td.active:hover.active,
    .datepicker table tr td.active.disabled.active,
    .datepicker table tr td.active.disabled:hover.active,
    .open .dropdown-toggle.datepicker table tr td.active,
    .open .dropdown-toggle.datepicker table tr td.active:hover,
    .open .dropdown-toggle.datepicker table tr td.active.disabled,
    .open .dropdown-toggle.datepicker table tr td.active.disabled:hover {
        color: #ffffff;
        background-color: #31b0d5;
        border: 0;
    }

    .datepicker table tr td span.active:hover,
    .datepicker table tr td span.active:hover:hover,
    .datepicker table tr td span.active.disabled:hover,
    .datepicker table tr td span.active.disabled:hover:hover,
    .datepicker table tr td span.active:focus,
    .datepicker table tr td span.active:hover:focus,
    .datepicker table tr td span.active.disabled:focus,
    .datepicker table tr td span.active.disabled:hover:focus,
    .datepicker table tr td span.active:active,
    .datepicker table tr td span.active:hover:active,
    .datepicker table tr td span.active.disabled:active, 
    .datepicker table tr td span.active.disabled:hover:active, 
    .datepicker table tr td span.active.active,
    .datepicker table tr td span.active:hover.active, 
    .datepicker table tr td span.active.disabled.active, 
    .datepicker table tr td span.active.disabled:hover.active, 
    .open .dropdown-toggle.datepicker table tr td span.active, 
    .open .dropdown-toggle.datepicker table tr td span.active:hover,
    .open .dropdown-toggle.datepicker table tr td span.active.disabled,
    .open .dropdown-toggle.datepicker table tr td span.active.disabled:hover {
        color: #ffffff;
        background-color: #31b0d5;
        border: 0;
    }


/* ============================================================
BOOTSTRAP TIME PICKER SECTION
============================================================ */
    .bootstrap-timepicker-widget input {
        background: #fff;
        border-radius: 0;
        border: 1px solid #dce1e4;
        box-shadow: none!important;
        font-size: 13px;
        padding: 6px 10px!important;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        width: 45px!important;
    }

    .bootstrap-timepicker-widget input:focus {
        border: 1px solid #bdc5c9;
        background: #fff;
    }

    .bootstrap-timepicker-widget .icon-chevron-up:before {
        font-family: FontAwesome;
        content: "\f106";
        font-style: normal;
    }

    .bootstrap-timepicker-widget .icon-chevron-down:before {
        font-family: FontAwesome;
        content: "\f107";
        font-style: normal;
    }

    .bootstrap-timepicker-widget a {
        text-decoration: none;
    }

    .bootstrap-timepicker-widget.dropdown-menu.open {
        margin-top: 10px;
    }


/* ============================================================
COLOR PICKER
============================================================ */
    .colorpicker.dropdown-menu {
        margin-top: 10px;
        padding: 10px;
    }

/* ============================================================
BOOTSTRAP INPUTAG SECTION
============================================================ */
    .bootstrap-tagsinput {
        background: #fff;
        border-radius: 0;
        border: 1px solid #dce1e4;
        box-shadow: none!important;
        font-size: 13px;
        padding: 6px 10px!important;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        width: 100%;
        margin: 0;
    }

    .bootstrap-tagsinput .tag {
        line-height: inherit !important;
    }


/* ============================================================
WYSIWYG SECTION
============================================================ */
    .note-editor {
        border: 1px solid #DCE1E4;
        border-radius: 0;
    }

    .note-dialog .note-modal-form {
        margin: 0 15px 0 15px;
    }

    .note-editor .note-toolbar {
        border-bottom: 0;
        background: #fff;
        padding: 10px;
    }

    .note-popover .popover .popover-content>.btn-group, .note-toolbar>.btn-group {
        margin-top: 0;
    }

    .note-editor .note-editable {
        padding: 15px;
        padding-top: 10px;
        overflow: auto;
        outline: 0;
    }

    .note-editor .note-statusbar {
        background: transparent;
    }

    .note-editor .note-statusbar .note-resizebar {
        border: 0;
    }


/* ============================================================
TEXTAREA EXPANDABLE
============================================================ */
    textarea.textarea-expandable {
        height: 3em;
        padding: 3px;
    }

/* ============================================================
TEXTAREA AUTOSIZE
============================================================ */
    textarea.autosize-animated {
        vertical-align: top;
        -webkit-transition: height 0.2s;
        -moz-transition: height 0.2s;
        transition: height 0.2s;
    }


/* ============================================================
FORM TOOLTIPS
============================================================ */
    .form-tooltip {
        position: relative;
    }

    .form-tooltip .tooltip {
        position: absolute;
        z-index: 1;
        left: -9999px;
        padding: 2px 8px 3px;
        font-size: 11px;
        line-height: 16px;
        font-weight: 400;
        background: #3A434D;
        color: #fff;
        opacity: 1;
        filter: alpha(opacity=1);
        -ms-transition: margin 0.7s, opacity 0.7s;
        -moz-transition: margin 0.7s, opacity 0.7s;
        -webkit-transition: margin 0.7s, opacity 0.7s;
    }
    .form-tooltip .tooltip:after {
        content: '';
        position: absolute;
    }
    .form-tooltip input:focus + .tooltip,
    .form-tooltip textarea:focus + .tooltip {
        opacity: 1 !important; 
        filter: opacity(1) !important;
    }

    .form-tooltip .tooltip.top-right {
        bottom: 100%;
        margin-bottom: 15px;
    }
    .form-tooltip .tooltip.top-right:after {
        top: 100%;
        right: 16px;    
        border-top: 4px solid #3A434D;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }
    .form-tooltip input:focus + .tooltip.top-right,
    .form-tooltip textarea:focus + .tooltip.top-right {
        right: 0;
        left: auto;
        margin-bottom: 5px;
    }

    .form-tooltip .tooltip.top-left {
        bottom: 100%;
        margin-bottom: 15px;
    }
    .form-tooltip .tooltip.top-left:after {
        top: 100%;
        left: 16px;
        border-top: 4px solid #3A434D;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }
    .form-tooltip input:focus + .tooltip.top-left,
    .form-tooltip textarea:focus + .tooltip.top-left {
        right: auto;
        left: 0;
        margin-bottom: 5px;
    }

    .form-tooltip .tooltip.right {
        top: 9px;
        white-space: nowrap;
        margin-left: 15px;
    }
    .form-tooltip .tooltip.right:after {
        top: 6px;
        right: 100%;
        border-top: 4px solid transparent;
        border-right: 4px solid #3A434D;
        border-bottom: 4px solid transparent;
    }
    .form-tooltip input:focus + .tooltip.right,
    .form-tooltip textarea:focus + .tooltip.right {
        left: 100%;
        margin-left: 5px;
    }

    .form-tooltip .tooltip.left {
        top: 9px;
        white-space: nowrap;
        margin-right: 15px;
    }
    .form-tooltip .tooltip.left:after {
        top: 6px;
        left: 100%;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 4px solid #3A434D;
    }
    .form-tooltip input:focus + .tooltip.left,
    .form-tooltip textarea:focus + .tooltip.left {
        right: 100%;
        left: auto;
        margin-right: 5px;
    }

    .form-tooltip .tooltip.bottom-right {
        top: 100%;
        margin-top: 15px;
    }
    .form-tooltip .tooltip.bottom-right:after {
        bottom: 100%;
        right: 16px;    
        border-right: 4px solid transparent;
        border-bottom: 4px solid #3A434D;
        border-left: 4px solid transparent;
    }
    .form-tooltip input:focus + .tooltip.bottom-right,
    .form-tooltip textarea:focus + .tooltip.bottom-right {
        right: 0;
        left: auto;
        margin-top: 5px;
    }

    .form-tooltip .tooltip.bottom-left {
        top: 100%;
        margin-top: 15px;
    }
    .form-tooltip .tooltip.bottom-left:after {
        bottom: 100%;
        left: 16px;
        border-right: 4px solid transparent;
        border-bottom: 4px solid #3A434D;
        border-left: 4px solid transparent;
    }
    .form-tooltip input:focus + .tooltip.bottom-left,
    .form-tooltip textarea:focus + .tooltip.bottom-left {
        right: auto;
        left: 0;
        margin-top: 5px;
    }

/* ============================================================
FORM TOGGLE
============================================================ */
    .form-toggle .toggle {
        margin-bottom: 4px;
        padding-right: 61px;
        font-size: 15px;
        line-height: 27px;
        color: #404040;
        cursor: pointer;
    }
    .form-toggle .toggle:last-child {
        margin-bottom: 0;
    }
    .form-toggle .toggle input {
        position: absolute;
        left: -9999px;
    }
    .form-toggle .toggle i {
        content: '';
        position: absolute;
        top: 4px;
        right: 0;
        display: block;
        width: 49px;
        height: 17px;
        border-width: 2px;
        border-style: solid;
        border-radius: 12px;
        background: #fff;
    }
    .form-toggle .toggle i:after {
        content: 'OFF';
        position: absolute;
        top: 2px;
        right: 8px;
        left: 8px;
        font-style: normal;
        font-size: 9px;
        line-height: 13px;
        font-weight: 700;
        text-align: left;
        color: #5f5f5f;
    }
    .form-toggle .toggle i:before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 4px;
        right: 4px;
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        opacity: 1;
        -ms-transition: right 0.2s;
        -moz-transition: right 0.2s;
        -webkit-transition: right 0.2s;
    }
    .form-toggle .toggle input:checked + i:after {
        content: 'ON';
        text-align: right;
    }
    .form-toggle .toggle input:checked + i:before {
        right: 36px;
    }


/* ============================================================
TYPEAHEAD SUGGESTIONS
============================================================ */
    .twitter-typeahead {
        width: 100%;
        vertical-align: top;
    }

    .bootstrap-tagsinput  .twitter-typeahead {
        display: inline !important;
    }
   
   .bootstrap-tagsinput  .twitter-typeahead .tt-dropdown-menu {
        width: 200px;
        white-space: nowrap;
   }




/* ============================================================
SELECT2 SECTION
============================================================ */
    .select2-container-multi .select2-choices {
        padding-bottom: 3.5px;
    }

    #s2id_autogen1_search {
        margin-top: 5px;
    }

    input[aria-autocomplete='list'] {
        margin-top: 5px;
    }
/* ============================================================
FORM TOGGLE SWITCH SECTIOn
============================================================ */
    .form-toggle {
        position: absolute;
        margin-left: -9999px;
        visibility: hidden;
    }
    .form-toggle + label {
        display: block;
        position: relative;
        cursor: pointer;
        outline: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    input.form-flip-toggle + label {
        padding: 2px;
        width: 55px;
        height: 24px;
    }

    input.form-flip-toggle + label:before, input.form-flip-toggle + label:after {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        color: #fff;
        font-size: 13px;
        text-align: center;
        padding-top: 2px;
    }
    input.form-flip-toggle + label:before {
        border: 2px solid #ccc;
        color: #ccc;
        content: attr(data-off);
        -webkit-transition: -webkit-transform 0.5s;
        -moz-transition: -moz-transform 0.5s;
        -o-transition: -o-transform 0.5s;
        transition: transform 0.5s;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    input.form-flip-toggle + label:after {
        border: 2px solid #8ce196;
        color: #8ce196;
        content: attr(data-on);
        -webkit-transition: -webkit-transform 0.5s;
        -moz-transition: -moz-transform 0.5s;
        -o-transition: -o-transform 0.5s;
        transition: transform 0.5s;
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    input.form-flip-toggle:checked + label:before {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    input.form-flip-toggle:checked + label:after {
        -webkit-transform: rotateY(0);
        -moz-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
    }

    /*** Small form flip toggle ***/
    input.sm.form-flip-toggle + label {
        width: 45px;
        height: 22px;
    }

    input.sm.form-flip-toggle + label:before, input.sm.form-flip-toggle + label:after {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        color: #fff;
        font-size: 10px;
        text-align: center;
        padding-top: 2.3px;
    }

    input.sm.form-flip-toggle + label:before {
        border: 2px solid #ccc;
        color: #ccc;
        content: attr(data-off);
        -webkit-transition: -webkit-transform 0.5s;
        -moz-transition: -moz-transform 0.5s;
        -o-transition: -o-transform 0.5s;
        transition: transform 0.5s;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    input.sm.form-flip-toggle + label:after {
        border: 2px solid #8ce196;
        color: #8ce196;
        content: attr(data-on);
        -webkit-transition: -webkit-transform 0.5s;
        -moz-transition: -moz-transform 0.5s;
        -o-transition: -o-transform 0.5s;
        transition: transform 0.5s;
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    input.sm.form-flip-toggle:checked + label:before {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    input.sm.form-flip-toggle:checked + label:after {
        -webkit-transform: rotateY(0);
        -moz-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
    }

    /*** Large form flip toggle ***/
    input.lg.form-flip-toggle + label {
        width: 65px;
        height: 26px;
    }

    input.lg.form-flip-toggle + label:before, input.lg.form-flip-toggle + label:after {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        color: #fff;
        font-size: 14px;
        text-align: center;
        padding-top: 1.4px;
    }

    input.lg.form-flip-toggle + label:before {
        border: 2px solid #ccc;
        color: #ccc;
        content: attr(data-off);
        -webkit-transition: -webkit-transform 0.5s;
        -moz-transition: -moz-transform 0.5s;
        -o-transition: -o-transform 0.5s;
        transition: transform 0.5s;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    input.lg.form-flip-toggle + label:after {
        border: 2px solid #8ce196;
        color: #8ce196;
        content: attr(data-on);
        -webkit-transition: -webkit-transform 0.5s;
        -moz-transition: -moz-transform 0.5s;
        -o-transition: -o-transform 0.5s;
        transition: transform 0.5s;
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    input.lg.form-flip-toggle:checked + label:before {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    input.lg.form-flip-toggle:checked + label:after {
        -webkit-transform: rotateY(0);
        -moz-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
    }

    /*** Form Flip Toggle ***/
    input.primary.form-flip-toggle + label:after {
        border: 2px solid #337ab7;
        color: #337ab7;
    }

    input.info.form-flip-toggle + label:after {
        border: 2px solid #5bc0de;
        color: #5bc0de;
    }

    input.success.form-flip-toggle + label:after {
        border: 2px solid #5cb85c;
        color: #5cb85c;
    }

    input.warning.form-flip-toggle + label:after {
        border: 2px solid #f0ad4e;
        color: #f0ad4e;
    }

    input.danger.form-flip-toggle + label:after {
        border: 2px solid #d9534f;
        color: #d9534f;
    }

    /*** Iconic form flip toggle ***/

    input.iconic.form-flip-toggle + label:before {
        font-family: "FontAwesome";
        content: attr(data-off);
    }
    input.iconic.form-flip-toggle + label:after {
        font-family: "FontAwesome";
        content: attr(data-on);
    }

    /*** Other Toggle Switch ***/
    .switch-input {
        display: block;
        position: relative;
        line-height: 1;
        margin-bottom: 4px;
        padding: 10px 60px 0 0;
        cursor: pointer
    }
    .switch-input input {
        position: absolute;
        left: -9999px
    }
    .switch-input input:checked+i {
        border-color: #ddd
    }
    .switch-input input:checked+i:before {
        right: 33px
    }
    .switch-input input:checked+i:after {
        content: attr(data-on);
        text-align: right;
        color: #777
    }
    .switch-input i {
        content: '';
        display: block;
        position: absolute;
        top: 6px;
        right: 0;
        width: 50px;
        height: 20px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc;
        background: #fff;
        font-style: normal
    }
    .switch-input i:before {
        -moz-transition-property: right;
        -o-transition-property: right;
        -webkit-transition-property: right;
        transition-property: right;
        -moz-transition-duration: 0.1s;
        -o-transition-duration: 0.1s;
        -webkit-transition-duration: 0.1s;
        transition-duration: 0.1s;
        -moz-transition-timing-function: ease-in;
        -o-transition-timing-function: ease-in;
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        content: '';
        display: block;
        position: absolute;
        top: 4px;
        right: 4px;
        width: 10px;
        height: 10px;
        background-color: #ddd
    }
    .switch-input i:after {
        content: attr(data-off);
        position: absolute;
        top: 2px;
        right: 8px;
        left: 8px;
        font-weight: 700;
        font-size: 10px;
        line-height: 15px;
        color: #aaa
    }

    /*** Colors ***/
    .switch-input.primary input:checked+i:after {
        content: attr(data-on);
        text-align: right;
        color: #337ab7
    }

    .switch-input.primary input:checked+i:before {
        background-color: #337ab7;
    }

    .switch-input.primary input:checked+i {
        border: 1px solid #337ab7;
    }

    .switch-input.info input:checked+i:after {
        content: attr(data-on);
        text-align: right;
        color: #5bc0de
    }

    .switch-input.info input:checked+i:before {
        background-color: #5bc0de;
    }

    .switch-input.info input:checked+i {
        border: 1px solid #5bc0de;
    }

    .switch-input.success input:checked+i:after {
        content: attr(data-on);
        text-align: right;
        color: #5cb85c
    }

    .switch-input.success input:checked+i:before {
        background-color: #5cb85c;
    }

    .switch-input.success input:checked+i {
        border: 1px solid #5cb85c;
    }

    .switch-input.warning input:checked+i:after {
        content: attr(data-on);
        text-align: right;
        color: #f0ad4e
    }

    .switch-input.warning input:checked+i:before {
        background-color: #f0ad4e;
    }

    .switch-input.warning input:checked+i {
        border: 1px solid #f0ad4e;
    }

    .switch-input.danger input:checked+i:after {
        content: attr(data-on);
        text-align: right;
        color: #d9534f
    }

    .switch-input.danger input:checked+i:before {
        background-color: #d9534f;
    }

    .switch-input.danger input:checked+i {
        border: 1px solid #d9534f;
    }


    /* ============================================================
    UI SLIDER INPUT
    ============================================================ */
    .ui-slider {
        position: relative;
        height: 3px;
        border: 2px solid #e5e5e5;
        background: #fff;
        margin: 12px 6px 26px;
    }

    .ui-slider-handle:hover {
        border-color: #8dc9e5;
    }

    .ui-slider-handle {
        position: absolute;
        width: 15px;
        height: 15px;
        margin: -8px 0 0 -8px;
        border: 2px solid #e5e5e5 !important;
        outline: none;
        background: #fff;
        border-radius: 0px;
        top:10px;
        cursor: pointer;
        -ms-transition: border-color 0.3s;
        -moz-transition: border-color 0.3s;
        -webkit-transition: border-color 0.3s;
    }

    .ui-slider-handle:hover, .ui-slider-handle:focus {
        border: 2px solid gray !important;
    }

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        background: #fff !important;
    }

    .ui-slider-horizontal .ui-slider-handle {
        top: -0.1em;
    }


    .rounded-slider .ui-slider-handle {
      border-radius: 50% !important;
    }

    /* ============================================================
    FORM VALIDATIONS
    ============================================================ */
    .validator .form-group label.error {
        display:inline;
        margin:5px 0;
        color:#B94A48;
        font-weight:400;
    }
    input:focus:invalid:focus,textarea:focus:invalid:focus,select:focus:invalid:focus,.validator .form-group input.error,.validator .form-group textarea.error {
        border-color:#B94A48 !important;
    }
    #signupForm label.error {
        display:inline;
        margin:5px 0px;
        width:auto;
        color:#B94A48;
    }
    .checkbox,.checkbox:hover,.checkbox:focus {
        border: none;
    }

    /* ============================================================
    BUTTON PAGER
    ============================================================ */
    .pager .next>a, .pager .next>span {
        color: inherit;
    }

    .pager .previous>a, .pager .previous>span {
        color: inherit;
    }

    /* ============================================================
    DROPZONE UPLOAD
    ============================================================ */
    .dropzone {
        border: 1px solid #f1f1f1;
        border-radius: 0;
        background: #f9f9f9;
    }

    /* ============================================================
    MEDIA GALLERY
    ============================================================ */
    .media-filter {
        float: left;
        margin: 10px 0;
        padding-left: 0;
    }

    .media-filter li{
        float: left;
        margin-right: 10px;
        list-style: none;
    }

    .media-filter li a{
        background: #e6e6e6;
        padding: 5px 10px;
        -webkit-transition:all .5s ease-in-out;
        -moz-transition:all .5s ease-in-out;
        -o-transition:all .5s ease-in-out;
        transition:all .5s ease-in-out;
    }

    .media-filter li a:hover, .media-filter li a:focus{
        background: #2ECC71;
        color: #fff;
    }

    .media-gal {
        float: left;
        width: 100%;
        margin-top: 20px;
    }
    .media-gal .item {
        float: left;
    }

    .media-gal .item {
        margin-bottom: 1%;
        margin-right: 1%;
        width: 233px;
        padding: 10px;
        border: 1px solid #ddd;
    }

    .media-gal .item p {
        margin-bottom: 0;
        margin-top: 10px;
        text-align: center;
    }

    .media-gal .item img {
        height: 200px;
        width: 100%;
    }

    .img-modal img{
        width: 100%;
        margin-bottom: 10px;
    }

    /* Start: Recommended Isotope styles */

    /* Isotope Filtering */

    .isotope-item {
        z-index: 2;
    }

    .isotope-hidden.isotope-item {
        pointer-events: none;
        z-index: 1;
    }

    /*Isotope CSS3 transitions */

    .isotope,
    .isotope .isotope-item {
        -webkit-transition-duration: 0.8s;
        -moz-transition-duration: 0.8s;
        -ms-transition-duration: 0.8s;
        -o-transition-duration: 0.8s;
        transition-duration: 0.8s;
    }

    .isotope {
        -webkit-transition-property: height, width;
        -moz-transition-property: height, width;
        -ms-transition-property: height, width;
        -o-transition-property: height, width;
        transition-property: height, width;
    }

    .isotope .isotope-item {
        -webkit-transition-property: -webkit-transform, opacity;
        -moz-transition-property: -moz-transform, opacity;
        -ms-transition-property: -ms-transform, opacity;
        -o-transition-property: -o-transform, opacity;
        transition-property: transform, opacity;
    }

    /*disabling Isotope CSS3 transitions */

    .isotope.no-transition,
    .isotope.no-transition .isotope-item,
    .isotope .isotope-item.no-transition {
        -webkit-transition-duration: 0s;
        -moz-transition-duration: 0s;
        -ms-transition-duration: 0s;
        -o-transition-duration: 0s;
        transition-duration: 0s;
    }


    /* disable CSS transitions for containers with infinite scrolling*/
    .isotope.infinite-scrolling {
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }


    /* ============================================================
    PRICING TABLES DESIGN 1
    ============================================================ */
    #pricing-table-1 {
        margin: 100px auto;
        text-align: center;
        width: 892px; /* total computed width = 222 x 3 + 226 */
    }

    #pricing-table-1 .plan {
        font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
        text-shadow: 0 1px rgba(255,255,255,.8);        
        background: #fff;      
        border: 1px solid #ddd;
        color: #333;
        padding: 20px;
        width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */      
        float: left;
        position: relative;
    }

    #pricing-table-1 #most-popular {
        z-index: 2;
        top: -13px;
        border-width: 3px;
        padding: 30px 20px;
        -moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
        -webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
        box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);    
    }

    

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

    #pricing-table-1 h3 {
        font-size: 20px;
        font-weight: normal;
        padding: 20px;
        margin: -20px -20px 50px -20px;
        background-color: #eee;
        background-image: -moz-linear-gradient(#fff,#eee);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));    
        background-image: -webkit-linear-gradient(#fff, #eee);
        background-image: -o-linear-gradient(#fff, #eee);
        background-image: -ms-linear-gradient(#fff, #eee);
        background-image: linear-gradient(#fff, #eee);
    }

    #pricing-table-1 #most-popular h3 {
        background-color: #ddd;
        background-image: -moz-linear-gradient(#eee,#ddd);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));    
        background-image: -webkit-linear-gradient(#eee, #ddd);
        background-image: -o-linear-gradient(#eee, #ddd);
        background-image: -ms-linear-gradient(#eee, #ddd);
        background-image: linear-gradient(#eee, #ddd);
        margin-top: -30px;
        padding-top: 30px;        
    }


    #pricing-table-1 .plan:nth-child(4) h3 {
        -moz-border-radius: 0 5px 0 0;
        -webkit-border-radius: 0 5px 0 0;
        border-radius: 0 5px 0 0;       
    }   

    #pricing-table-1 h3 span {
        display: block;
        font: bold 25px/100px Georgia, Serif;
        color: #777;
        background: #fff;
        border: 5px solid #fff;
        height: 100px;
        width: 100px;
        margin: 10px auto -65px;
        -moz-border-radius: 100px;
        -webkit-border-radius: 100px;
        border-radius: 100px;
        -moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
        -webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
        box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
    }

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

    #pricing-table-1 ul {
        margin: 20px 0 0 0;
        padding: 0;
        list-style: none;
    }

    #pricing-table-1 li {
        border-top: 1px solid #ddd;
        padding: 10px 0;
    }


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

    .clear:before, .clear:after {
      content:"";
      display:table
    }

    .clear:after {
      clear:both
    }

    .clear {
      zoom:1
    }

    /* ============================================================
    PRICING TABLES DESIGN 2
    ============================================================ */
    #pricing-table-2{
        font-family: 'Open Sans', Helvetica;
        padding: 20px;
    }

    #pricing-table-2 .price_card{
        width: 100%;
        background: rgb(255, 255, 255);
        display: inline-table;
        top: 0;
        border: 1px solid rgba(155, 155, 155, 0.1);
        box-sizing: border-box;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }

    #pricing-table-2 .price_card:hover {
        -webkit-box-shadow: 0px 0px 11px 3px rgba(222,222,222,1);
        -moz-box-shadow: 0px 0px 11px 3px rgba(222,222,222,1);
        box-shadow: 0px 0px 11px 3px rgba(222,222,222,.4);
    }

    
    #pricing-table-2 .price_card:not(:last-child){
        margin-right: 40px;
    }
    #pricing-table-2 .header{
        color: rgb(255, 255, 255);
        min-height: 180px;
    }
    #pricing-table-2 .alpha .header{
        background: rgb(245, 166, 35);
    }
    #pricing-table-2 .bravo .header{
        background: rgb(246, 77, 77);
    }
    #pricing-table-2 .charlie .header{
        background: rgb(48, 219, 181);
    }
    #pricing-table-2 .price{
        width: 100%;
        font-size: 60px;
        font-weight: 300;
        display: block;
        text-align: center;
        padding: 30px 0 10px;
    }
    #pricing-table-2 .name{
        width: 100%;
        font-size: 15px;
        font-weight: 700;
        display: block;
        text-align: center;
        padding: 0 0 30px;
    }
    #pricing-table-2 .features{
        list-style: none;
        text-align: center;
        color: rgb(138, 138, 138);
        margin: 0;
        padding: 0;
    }
    #pricing-table-2 .features li{
        margin: 0 35px;
        padding: 20px 15px;
    }
    #pricing-table-2 .features li:not(:last-child){
        border: 1px solid rgb(242, 242, 242);
        border-top: 0;
        border-left: 0;
        border-right: 0;
    }
    #pricing-table-2 button{
        color: rgb(255, 255, 255);
        border: 0;
        height: 40px;
        width: 200px;
        display: block;
        font-weight: 700;
        font-size: 15px;
        text-transform: uppercase;
        margin: 20px auto 35px;
    }
    #pricing-table-2 .alpha button{
        background: rgb(245, 166, 35);
    }
    #pricing-table-2 .bravo button{
        background: rgb(246, 77, 77);
    }
    #pricing-table-2 .charlie button{
        background: rgb(48, 219, 181);
    }
    #pricing-table-2 .tip{
        font-family: 'Indie Flower';
        position: absolute;
        color: rgb(117, 117, 117);
        margin: 10px 5px;
    }


    /* ============================================================
    SINGLE PRICING TABLE 2
    ============================================================ */
    #single-pricing-table {
        text-align: center
    }
    #single-pricing-table .plan-heading {
        font-size: 28px
    }
    #single-pricing-table .plan-content {
        width: 80%;
        margin: 40px auto;
        padding: 30px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        background: #fff
    }
    #single-pricing-table .price {
        font-size: 22px;
        line-height: 2.3;
        font-weight: normal
    }
    #single-pricing-table .price .currency {
        position: absolute;
        top: 57px;
        font-size: 2em
    }
    #single-pricing-table .price .number {
        font-size: 5em;
        font-weight: 700;
        padding-left: 25px
    }
    #single-pricing-table .price .duration {
        margin-left: -20px
    }
    #single-pricing-table .plan-detail-list {
        text-align: left;
        margin-bottom: 20px
    }
    #single-pricing-table .plan-detail-list>li {
        margin-bottom: 10px
    }
    #single-pricing-table .plan-detail-list>li i {
        color: #7bae16;
        margin-right: 5px
    }
    #single-pricing-table .btn strong {
        display: block;
        margin-bottom: 5px;
        font-weight: normal;
        font-size: 24px
    }
    #single-pricing-table .btn span {
        display: block;
        font-size: 0.7em;
        color: #7ea1cc
    }
    @media screen and (max-width: 768px) {
        #single-pricing-table .plan-content {
            width: 100%
        }
        #single-pricing-table .price {
            font-size: 18px;
            line-height: 1.6
        }
    }
    @media screen and (max-width: 480px) {
        #single-pricing-table .plan-detail-list {
            text-align: center
        }
    }


    /* ============================================================
    TIMELINE 1
    ============================================================ */
    .timeline-1 {
        padding: 20px 0;
        list-style: none;
        position: relative;
    }

    .timeline-1:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 3px;
        background-color: #eee;
        left: 50%;
        margin-left: -1.5px;
    }

    .timeline-1 > li {
        margin-bottom: 40px;
        position: relative;
        width: 50%;
        float: left;
        clear: left;
    }

    .timeline-1 > li:before,
    .timeline-1 > li:after {
        content: " ";
        display: table;
    }

    .timeline-1 > li:after {
        clear: both;
    }

    .timeline-1 > li:before,
    .timeline-1 > li:after {
        content: " ";
        display: table;
    }

    .timeline-1 > li:after {
        clear: both;
    }

    .timeline-1 > li > .timeline-panel {
        width: 94%;
        float: left;
        position: relative;
        background-color: #fff;
    }

    .timeline-1 > li > .timeline-panel:before {
        position: absolute;
        top: 26px;
        right: -15px;
        display: inline-block;
        border-top: 15px solid transparent;
        border-left: 15px solid #fff;
        border-right: 0 solid #fff;
        border-bottom: 15px solid transparent;
        content: " ";
    }

    .timeline-1 > li > .timeline-panel:after {
        position: absolute;
        top: 27px;
        right: -14px;
        display: inline-block;
        border-top: 14px solid transparent;
        border-left: 14px solid #fff;
        border-right: 0 solid #fff;
        border-bottom: 14px solid transparent;
        content: " ";
    }

    .timeline-1 > li > .timeline-badge {
        color: #ccc;
        width: 24px;
        height: 24px;
        line-height: 50px;
        font-size: 1.4em;
        cursor: pointer;
        text-align: center;
        position: absolute;
        top: 19px;
        right: -12px;
        z-index: 9;
    }

    .timeline-1 > li > .timeline-badge i:hover {
        color: #ddd;
    }

    .timeline-1 > li.timeline-inverted > .timeline-panel {
        float: right;
    }
    .timeline-1 > li.timeline-inverted > .timeline-panel:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto;
    }
    .timeline-1 > li.timeline-inverted > .timeline-panel:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto;
    }

    .timeline-1 > li > .timeline-panel .timeline-heading {
        padding: 5px;
    }

    .timeline-1 > li > .timeline-panel .timeline-heading img {
        width: 100%;
    }

    .timeline-1 .timeline-body {
        padding: 12px;
    }

    .timeline-1 .timeline-footer{
        padding: 7px 12px;
        overflow: hidden;
        background-color: #eee;
    }

    .timeline-1 .timeline-footer .blog-info {
        float: left;
    }

    .timeline-1 .timeline-footer .blog-info i {
        color: #777;
    }

    .timeline-1 .timeline-footer .likes {
        float: right;
    }
    .timeline-1 .timeline-footer .likes i {
        margin-right: 2px;
        color: #777;
    }

    .timeline-1 .timeline-footer .likes:hover {
        text-decoration: none;
        color: inherit;
    }

    .timeline-1 .timeline-footer .likes:hover i {
        color: #78a;
    }

    .timeline-1 > li.timeline-inverted{
        float: right; 
        clear: right;
        margin-bottom: 40px;
    }

    .timeline-1 > li:nth-child(2){
        margin-top: 60px;
    }

    .timeline-1 > li.timeline-inverted > .timeline-badge{
        left: -12px;
    }

    @media (max-width: 992px) {
        .timeline-1 > li > .timeline-panel:before {
            top: 31px;
            right: -11px;
            border-top: 11px solid transparent;
            border-left: 11px solid #fff;
            border-bottom: 11px solid transparent;
        }

        .timeline-1 > li > .timeline-panel:after {
            top: 32px;
            right: -10px;
            border-top: 10px solid transparent;
            border-left: 10px solid #fff;
            border-bottom: 10px solid transparent;
        }
        .timeline-1 > li.timeline-inverted > .timeline-panel:before {
            border-right-width: 11px;
            left: -11px;
        }
        .timeline-1 > li.timeline-inverted > .timeline-panel:after {
            border-right-width: 10px;
            left: -10px;
        }

    }

    @media (max-width: 767px) {
        ul.timeline-1:before {
            left: 40px;
        }

        ul.timeline-1 > li {
          margin-bottom: 20px;
          position: relative;
          width:100%;
          float: left;
          clear: left;
        }
        ul.timeline-1 > li > .timeline-panel {
            width: calc(100% - 70px);
            width: -moz-calc(100% - 70px);
            width: -webkit-calc(100% - 70px);
        }

        ul.timeline-1 > li > .timeline-badge {
            left: 28px;
            margin-left: 0;
            top: 16px;
        }

        ul.timeline-1 > li > .timeline-panel {
            float: right;
        }

        ul.timeline-1 > li > .timeline-panel:before {
            top: 27px;
            right: -12px;
            border-top: 12px solid transparent;
            border-left: 12px solid #fff;
            border-bottom: 12px solid transparent;
        }

        ul.timeline-1 > li > .timeline-panel:after {
            top: 28px;
            right: -11px;
            border-top: 11px solid transparent;
            border-left: 11px solid #fff;
            border-bottom: 11px solid transparent;
        }

        ul.timeline-1 > li > .timeline-panel:before {
            border-left-width: 0;
            border-right-width: 12px;
            left: -12px;
            right: auto;
        }

        ul.timeline-1 > li > .timeline-panel:after {
            border-left-width: 0;
            border-right-width: 11px;
            left: -11px;
            right: auto;
        }
        
        .timeline-1 > li.timeline-inverted{
            float: left; 
            clear: left;
            margin-top: 30px;
            margin-bottom: 30px;
        }

        .timeline-1 > li.timeline-inverted > .timeline-badge{
            left: 28px;
        }
    }


    /* ============================================================
    TIMELINE 2
    ============================================================ */
    .timeline-2 {
        padding: 0;
        list-style: none;
        position: relative;
    } 

    /* The line */
    .timeline-2 > li{
        position: relative;
    }

    .timeline-2:before {
        top: 0;
        bottom: 0;
        left: 22%;
        width: 4px;
        content: '';
        background: #ddd;
        position: absolute;
        margin-left: -14px;
    }

    /* The date/time */
    .timeline-2 > li .timeline-time {
        width: 25%;
        display: block;
        position: absolute;
        padding-right: 80px;
    }

    .timeline-2 > li .timeline-time span {
        top: 9px;
        display: block;
        text-align: right;
        position: relative;
    }

    .timeline-2 > li .timeline-time span:first-child {
        color: #999;
        font-size: 14px;
        line-height: 0.9;
    }

    .timeline-2 > li .timeline-time span:last-child {
        color: #585f69;
        font-size: 20px;
        font-weight: normal;

    }

    /* Right content */
    .timeline-2 > li .timeline-label {
        color: inherit;
        padding: 10px 20px 20px;
        background: #fff;
        line-height: 1.4;
        clear: both;
        position: relative;
        margin: 0 0 40px 25%;
    }

    .timeline-2 > li .timeline-label li {
        padding: 0;
    }

    .timeline-2 > li .timeline-label h2 { 
        margin-top: 0px;
        font-size: 21px;
        padding: 0 0 5px;
        margin-bottom: 10px;
        text-transform: capitalize;
        border-bottom: 1px solid #ddd;
    }

    .timeline-2 > li .timeline-label .text-left {
        float: left;
    }

    /* The triangle */
    .timeline-2 > li .timeline-label:after {
        right: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-right-color: #fff;
        border-width: 10px;
        top: 18px;
    }

    /* The icons */
    .timeline-2 > li .timeline-icon {
        top: 22px;
        left: 22%;
        width: 10px;
        height: 10px;
        position: absolute;
        background: #fff;
        margin: 0 0 0 -17px;
        box-shadow: 0 0 0 4px #ddd;
        -webkit-font-smoothing: antialiased;
    }

    /* Media Queries */
    @media screen and (max-width: 65.375em) {

        .timeline-2 > li .timeline-time span:last-child {
            font-size: 1.5em;
        }
    }

    @media screen and (max-width: 47.2em) {
        .timeline-2:before {
            display: none;
        }

        .timeline-2 > li .timeline-time {
            width: 100%;
            position: relative;
            padding: 0 0 20px 0;
        }

        .timeline-2 > li .timeline-time span {
            text-align: left;
        }

        .timeline-2 > li .timeline-label {
            padding: 1em;
            font-weight: 400;
            margin: 0 0 30px 0;
        }

        .timeline-2 > li .timeline-label:after {
            left: 20px;
            top: -20px;
            right: auto;
            border-bottom-color: #f3f3f3;
            border-right-color: transparent;
        }

        .timeline-2 > li .timeline-icon {
            left: auto;
            float: right;
            position: relative;
            margin: -55px 5px 0 0px;
        }   
    }


    /* ============================================================
    RESPONSIVE VIDEO
    ============================================================ */
    .responsive-video {
       height: 0;
       padding-top: 1px;
       position: relative;
       padding-bottom: 56.25%; /*16:9*/
    }

    .responsive-video iframe {
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       position: absolute;
    }


    /* ============================================================
    CAROUSEL 1
    ============================================================ */
    .carousel-1 .carousel-caption {
       left: 0;
       right: 0;
       bottom: 0;
       padding: 7px 15px;
       background: rgba(0, 0, 0, 0.7);
    }

    .carousel-1 .carousel-caption p {
       color: #fff;
       margin-bottom: 0;
    }

    .carousel-1 .carousel-arrow a.carousel-control {
       opacity: 1;
       font-size:30px;
       height:inherit;
       width: inherit;
       background: none;
       text-shadow: none;
       position: inherit;
    }

    .carousel-1 .carousel-arrow a i {
       top: 50%;
       opacity: 0.6;
       background: #000;
       margin-top: -18px;
       padding: 2px 12px; 
       position: absolute;
    }
    .carousel-1 .carousel-arrow a i:hover {
       opacity: 0.8;
    }

    .carousel-1 .carousel-arrow a.left i {
       left: 0;
    }
    .carousel-1 .carousel-arrow a.right i {
       right: 0;
    }

    /* ============================================================
    CAROUSEL 2
    ============================================================ */
    .carousel-2 .carousel-control,
    .carousel-2 .carousel-control:hover {
      opacity: 1;
      text-shadow: none;
    }

    .carousel-2 .carousel-control.left,
    .carousel-2 .carousel-control.right {
      top: 50%;
      z-index: 5;
      color: #eee;
      width: 45px;
      height: 45px;
      font-size: 30px;
      margin-top: -22px;
      position: absolute;
      text-align: center;
      display: inline-block;
      border: 2px solid #eee;
      background: rgba(0,0,0,0.1);
    }

    .carousel-2 .carousel-control:hover {
      background: rgba(0,0,0,0.3);
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      -o-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;    
    }

    .carousel-2 .carousel-control.left {
      left: 20px;
    }

    .carousel-2 .carousel-control.right {
      right: 20px;
    }

    .carousel-2 .carousel-control .arrow-prev,
    .carousel-2 .carousel-control .arrow-next {
      top: -5px;
      position: relative;
    }

    .carousel-2 .carousel-control .arrow-next {
      right: -2px;
    }


    @media (min-width: 768px) {
      .carousel-indicators {
        bottom: 10px;
      }  
    }

    /* ============================================================
    BOXED CONTENT
    ============================================================ */
    .boxed-content {
        text-align: center;
        margin-bottom: 35px
    }
    .boxed-content>i {
        font-size: 8em;
        color: #ddd
    }
    .boxed-content .boxed-content-title {
        font-size: 22px;
        font-weight: 700
    }
    .boxed-content.left-aligned {
        text-align: left
    }
    .boxed-content.left-aligned .boxed-content-title {
        margin-bottom: 10px;
        line-height: 28px;
        font-weight: normal
    }
    .boxed-content.left-aligned i {
        float: left;
        margin-right: 10px;
        font-size: 2em
    }
    .boxed-content.left-boxed-icon i {
        padding: 10px;
        width: 60px;
        height: 60px;
        background: #ddd;
        color: #fff;
        text-align: center;
        line-height: 40px
    }
    .boxed-content.left-boxed-icon .boxed-content-title,
    .boxed-content.left-boxed-icon p {
        padding-left: 80px
    }


    /* ============================================================
    ONE HALF BOXED CONTENT
    ============================================================ */


    .boxed-content-bubble .boxed-content {
        text-align: left;
        position: relative;
        width: 100%;
        padding: 40px 30px 45px 30px;
        background: #fff;
        border: 1px solid #eee;
    }
    .boxed-content-bubble .boxed-content:after {
        content: "";
        position: absolute;
        bottom: -40px;
        left: 75px;
        border-style: solid;
        border-width: 40px 0px 0 30px;
        border-color: #eee transparent;
        display: block;
        width: 0;
        z-index: 1;
    }
   .boxed-content-bubble img {
        float: left;
        width: 80px;
        height: 80px;
    }
   .boxed-content-bubble p {
        float: right;
        width: 77%;
        font-size: 16px;
        color: #999;
        line-height: 25px;
    }
    .boxed-content-bubble strong {
        float: left;
        text-align: left;
        color: #393939;
        font-weight: normal;
        line-height: 18px;
        margin: -10px 0 0 120px;
    }
    .boxed-content-bubble strong em {
        color: #999;
        font-size: 13px;
        font-style: normal;
        display: block;
    }

    /* Media Queries */
    @media screen and (max-width: 1198px) {

        .boxed-content-bubble {
            margin-bottom: 80px;
        }
    }

    @media screen and (max-width: 485px) {

        .boxed-content-bubble .boxed-content img{
            margin-right: 10px;
        }

        .boxed-content-bubble p {
            float: none;
        }
    }

/* ============================================================
ANIMATED HOVER BOXED ICON CONTENT
============================================================ */
    .hover-boxed-icon-content i {
      font-size: 65px;
      line-height: 75px;
      color: gray;
    }

    .hover-boxed-icon-content h4 {
      font-size: 16px;
      margin-top: 25px;
      position: relative;
      text-transform: uppercase;
      font-weight: 700;
      color: #777;
    }

    .hover-boxed-icon-content .mask-top {
      width: 100%;
      background-color: #ffffff;
      padding: 55px 0;
      position: absolute;
      top: 0px;
      -moz-transition: all 0.3s ease-out 0s;
      -o-transition: all 0.3s ease-out 0s;
      -webkit-transition: all 0.3s ease-out 0s;
      transition: all 0.3s ease-out 0s;
    }

    .hover-boxed-icon-content .mask-top h4:before {
      top: -18px;
      content: "";
      display: block;
      height: 2px;
      left: 0;
      right: 0;
      margin: -2px auto;
      position: absolute;
      width: 40px;
    }

    .hover-boxed-icon-content .content:hover .mask-top {
      top: -200px;
      -moz-transition: all 0.3s ease-out 0s;
      -o-transition: all 0.3s ease-out 0s;
      -webkit-transition: all 0.3s ease-out 0s;
      transition: all 0.3s ease-out 0s;
    }

    .hover-boxed-icon-content .content {
      overflow: hidden;
      position: relative;
      height: 280px;
      border: 1px solid #f2f2f2;
      margin-bottom: 20px;
      cursor: pointer;
    }

    .hover-boxed-icon-content .mask-bottom {
      color: #333333;
      padding: 20px 15px 20px 15px;
      width: 100%;
      position: absolute;
      bottom: -300px;
      height: 100%;
      -moz-transition: all 0.3s ease-out 0s;
      -o-transition: all 0.3s ease-out 0s;
      -webkit-transition: all 0.3s ease-out 0s;
      transition: all 0.3s ease-out 0s;
    }

    .hover-boxed-icon-content .mask-bottom p {
      padding: 0px 5px;
      font-size: 13px;
    }

    .hover-boxed-icon-content .mask-bottom h4 {
      margin: 15px 0px 17px;
    }

    .hover-boxed-icon-content .content:hover .mask-bottom {
      bottom: 0;
      -moz-transition: all 0.3s ease-out 0s;
      -o-transition: all 0.3s ease-out 0s;
      -webkit-transition: all 0.3s ease-out 0s;
      transition: all 0.3s ease-out 0s;
    }

    .hover-boxed-icon-content .mask-bottom i {
      font-size: 38px;
      line-height: 50px;
    }
    
/* ============================================================
OWL CAROUSEL GLOBAL
============================================================ */
    .owl-btn {
      color: #777;
      cursor: pointer;
      font-size: 18px;
      padding: 2px 9px;
      text-align: center;
      background: #f5f5f5;
    }

    .owl-btn:hover {
      color: #fff;
      background: #ddd;
    }

    .owl-pagination {
         text-align: center !important;
    }

    .owl-theme .owl-controls .owl-page.active span,
    .owl-theme .owl-controls.clickable .owl-page:hover span {
        opacity: 1;
        filter: Alpha(Opacity=100);/*IE7 fix*/
    }

    .owl-theme .owl-controls .owl-page {
        zoom: 1;
        display: inline-block;
        *display: inline;/*IE7 life-saver */
    }

    .owl-theme .owl-controls .owl-page span {
        width: 12px;
        height: 12px;
        opacity: 0.3;
        display: block;
        margin: 5px 7px;
        background: #bbb;
        filter: Alpha(Opacity=50);/*IE7 fix*/
        -webkit-border-radius: 50% !important;
        -moz-border-radius: 50% !important;
        border-radius: 50% !important;
    }

/* ============================================================
OWL CAROUSEL 1
============================================================ */
    .owl-carousel-1 .owl-navigation {
      text-align: right;
      margin-bottom: 20px;
    }

    .owl-carousel-1 .item {
      margin: 0 5px;
    }

    .owl-carousel-1 .item img {
      text-align: center;
    }

    .owl-carousel-1 .owl-pagination {
      display: none;
    }


/* ============================================================
OWL CAROUSEL 2
============================================================ */
    .owl-carousel-2 .owl-slider {
        margin-bottom: 20px;
    }

    .owl-carousel-2 .item {
        margin: 0 15px;
    }

    .owl-carousel-2 .item img {
        text-align: center;
    }

    .owl-carousel-2 .owl-navigation {
        text-align: center;
    }

    .owl-carousel-2 .owl-pagination {
        display: none;
    }

    .owl-carousel-2.fixed-image .item {
      margin: 0 3px;
      /*background: #fafafa;*/
      text-align: center;
      /*border: solid 1px #eee;*/
    }

    .owl-carousel-2.fixed-image .item img {
      padding: 0 3px;
      display: inline-block;
    }

    .owl-carousel-2.fixed-image .item:hover {
      /*background: #f7f7f7;
      border-color: #e5e5e5;*/
      transition: all 0.4s ease-in-out;
    }

    .owl-carousel-2.fixed-image .owl-pagination {
      display: none;
    }

/* ============================================================
OWL CAROUSEL 3
============================================================ */
    .owl-carousel-3 .owl-wrapper-outer {
        margin-bottom: 20px;
    }

    .owl-carousel-3 .item {
        margin: 0 3px;
    }

    .owl-carousel-3 .item img {
        width: 100%;
    }


/* ============================================================
PROFILE PAGE
============================================================ */
    .profile-page .profile-cover {
        background: url('../images/profile-cover.png');
        background-size: cover;
        height: 300px;
        position: relative;
        margin-left: -27px;
        margin-right: -42px;
        margin-top: 30px;
    }

    .profile-page .profile-under-cover-style {
        position:absolute;
        z-index:-9999; 
        width:100%; 
        height:52px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 1;
    }

    .profile-page .profile-image {
        position: absolute;
        margin: 150px 20px 20px 20px;
        margin-left: 33px;
    }

    .profile-page .profile-image img {
        display: block;
        margin: 0 auto;
        width: 200px;
        border: 5px solid rgba(255, 255, 255, 0.5);
        z-index: 10000;
    }

    .profile-page  .profile-cover .profile-info {
        position: absolute;
        bottom: 10px;
        right: 20px;
        padding: 0;
        margin: 0;
        text-align: right;
    }

    .profile-page .profile-cover .profile-info-value {
        color: #fff;
        display: inline-block;
        margin-left: 40px;
    }

    .profile-page .profile-cover .profile-info-value h3 {
        color: #fff;
        font-weight: bold;
    }

    .profile-page .profile-cover .user-profile {
        margin-top: 60px;
    }

    @media (max-width: 479px) {
        .profile-page .profile-cover {
            margin-top: -47px
        }
    }

    @media (max-width: 991px) {
        .profile-page .profile-image {
            right: 0;
            left: 0;
            margin-left: auto !important;
        }
        
        .profile-page .profile-info {
            top: 10px;
            right: 0;
            left: 0;
            bottom: auto;
            text-align: center !important;
        }

        .profile-page .profile-info-value {
            color: #fff;
            float: none;
            margin: 0 10px 0 10px;
            display: inline-block;
            margin-left:0px !important;
        }
    }

    .profile-page .list-group-item:first-child {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .profile-page .list-group-item:last-child {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    /** Profile sidebar **/
    .profile-page .profile-sidebar li {
      padding: 0;
    }

    .profile-page .profile-sidebar li a {
      display: block;
      padding: 8px 30px 8px 10px;
    }

    .profile-page .profile-sidebar li a:hover {
      text-decoration: none;
    }

    .profile-page .profile-sidebar > li.active,
    .profile-page .profile-sidebar > li.active:hover {
      background: gray;
    } 

    .profile-page .profile-sidebar > li.active, 
    .profile-page .profile-sidebar > li.active:hover, 
    .profile-page .profile-sidebar > li.active:focus {
      border-color: #ddd;
    }

    .profile-page .profile-sidebar > li.active > a {
      color: #fff;
    }

    /*Sidebar Sub Navigation*/
    .profile-page .profile-sidebar li ul {
      padding: 0;
      list-style: none;
    }

    .profile-page .profile-sidebar li ul,
    .profile-page .profile-sidebar li.active ul a {
      background: #f8f8f8;
    }

    .profile-page .profile-sidebar li ul a {
      color: #555;
      font-size: 12px;
      border-top: solid 1px #ddd;
      padding: 6px 30px 6px 17px; 
    }

    .profile-page .profile-sidebar ul li:hover a,
    .profile-page .profile-sidebar ul li.active a {
      color: #72c02c;
    }

    .profile-page .profile-sidebar .list-group-item {
        border: none;
    }

    /**Profile Notification **/
    .profile-page .notification {
        overflow: hidden;
        margin-bottom: 10px;
        padding: 15px 15px 0 0;
        border-top: 1px solid #eee;
    }

    .profile-page .notification:first-child {
        border-top: none;
    }

    .profile-page .notification img,
    .profile-page .notification i {
        float: left;
        margin-right: 10px;
    }

    .profile-page .notification img {
        width: 35px;
        height: 35px;
    }

    .profile-page .notification span {
        color: #777;
        display: block;
    }

    .profile-page .notification small {
        color: #999;
        font-size: 11px;
    }

    .profile-page .notification h4 {
        margin: 0 0 3px;
        font-size: 14px;
    }

    .profile-page .notification p {
        color: #777;
        font-size: 12px;
    }

    .profile-page .notification > i {
        width: 35px;
        height: 35px;
        color: #fff;
        text-align: center;
        display: inline-block;   
        
    }

    .profile-page .notification > i:before {
        top: 11px;
        position: relative;
    }

    .profile-page .profile-notifi-scroll {
        height: 250px
    }

    /** Profile Panel**/
    .profile-page .panel-profile {
        border: none;
        margin-bottom: 0;
        box-shadow: none;
    }
    .profile-page .panel-profile.no-bg {
        background: inherit;
    }

    .profile-page .panel-heading {
        color: #585f69;
        background: #fff;
        padding: 7px 15px;
        border-bottom: solid 3px #f7f7f7;
    }

    .profile-page .panel-heading-2.overflow-h i.pull-right,
    .profile-page .panel-heading.overflow-h i.pull-right {
        top: 7px;
        position: relative;
    }

    .profile-page .panel-heading-2.overflow-h i.pull-right,
    .profile-page .panel-heading.overflow-h a i {
        color: #777;
    }

    .profile-page .panel-heading-2.overflow-h i.pull-right,
    .profile-page .panel-heading.overflow-h a:hover i {
        color: #555;
    }

    .profile-page .panel-title {
        font-size: 16px;
    }


    /** Profile Post **/
    .profile-page .profile-post {
        background: #fff;
        margin-bottom: 2px;
        padding: 7px 7px 7px 0;
    }

    .profile-page .profile-post span.profile-post-numb {
        float: left;
        color: #999;
        font-size: 20px;
        font-weight: 200;
        padding: 5px 12px;
    }

    .profile-page .profile-post:hover span.profile-post-numb {
        color: #ddd;
    }

    .profile-page .profile-post-in {
        overflow: hidden;
    }

    .profile-page .profile-post-in h3 a {
        color: #555;
        text-transform: uppercase;
    }

    .profile-page .profile-post-in p {
        color: #999;
        margin-bottom: 5px;
    }

    .profile-posts-scroll {
        height: 450px;
    }


    /** Profile Event **/
    .profile-page .profile-event .heading-xs {
        margin-top: 0;
        text-transform: uppercase;
    }

    .profile-page .profile-event {
        background: #fff;
        padding: 10px 15px;
        margin-bottom: 2px;
    }

    .profile-page .profile-event p {
        color: #999;
        margin-bottom: 5px;
    }

    .profile-page .date-formats {
        color: #fff;
        float: left;
        text-align: center;
        background: #ddd;
        margin: 7px 13px 0 0;
        padding: 7px 10px 4px;
    }

    .profile-page .date-formats span {
        display: block;
        font-size: 22px;
        font-weight: 200;
        line-height: 25px;
    }

    .profile-events-scroll {
        height: 450px;
    }

    /** Profile Contacts **/
    .profile-page .blog-border {
        border: 1px solid #f0f0f0;
    }

    .profile-page .profile-blog {
        padding: 20px;
        background: #fff;
    }

    .profile-page .profile-blog img {
        float: left;
        width: 50px;
        height: 50px;
        margin-right: 20px;
    }

    .profile-page .profile-blog hr {
        margin: 12px 0 10px;
    }

    .profile-page .name-location {
        overflow: hidden;
    }

    .profile-page .name-location strong {
        color: #555;
        display: block;
        font-size: 16px;
    }

    .profile-page .name-location span a {
        color: #555;
    }

    .profile-page .name-location span a:hover {
        color: #72c02c;
    }

    .profile-page .name-location span i {
        color: gray;
        font-size: 18px;
        margin-right: 5px;
    }

    /** Profile about **/
    .profile-page .profile-about .social i {
        font-weight: bold;
        font-size: 18px;
        color: gray;
    }

    .profile-page .profile-about .table-responsive {
        border: none;
    }

    .profile-page .profile-about .table-responsive .table tbody > tr:first-child > td {
        border-top: 0px;
    }

    .profile-page .profile-about .table-responsive .table tbody > tr:first-child > th {
        border-top: 0px;
    }

    .profile-page .profile-about h4 span.pull-right {
        font-size: 14px;
    }

    .profile-page .profile-about .work-experience li > p.timeline-time > span:first-child {
        color: gray;
        font-size: 13px;
        font-weight: bold;
    }

    .profile-page .profile-about .work-experience li > p.timeline-time > span:last-child {
        font-size: 13px;
        color: #A7A7A7;
        font-weight: 300;
    }

    .profile-page .profile-settings .list-group-item {
        border-left: 0px !important;
        border-right: 0px !important;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .profile-page .profile-settings .list-group-item:first-child {
        border-top: 0px !important;
    }



/* ============================================================
PROJECTS SECTION
============================================================ */
    .projects .project-box {
        padding: 20px;
        margin-bottom: 20px;
    }

    .projects .project-box.bordered {
        border:1px solid  #ddd;
    }

    .projects .project-box .project-title {
        line-height: 1px;
    }

    .projects .project-box .project-edited {
        font-size: 10px;
        text-transform: uppercase;
        font-weight: bold;
    }

    .projects .project-box .project-edited span, .projects .project-box .project-edited span a {
        font-weight: bold;
        color: gray;
    }

    .projects .project-box .project-timezone {
        font-size: 10px;
        text-transform: uppercase;
        line-height: 1px;
    }

    .projects .project-box .project-total-hours {
        border-right: 1px solid #eee;
    }

    .projects .project-box .project-hours-info p:first-child {
        font-size: 11px;
        text-transform: uppercase;
        text-align: center;
    }

    .projects .project-box .project-hours-info p:last-child {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
    }

    .projects .project-box .project-deadline p:first-child {
        font-size: 11px;
        text-transform: uppercase;
        text-align: center;
    }

    .projects .project-box .project-deadline p:last-child {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        line-height: 1px
    }

    .projects .project-box .project-client p:first-child {
        font-size: 11px;
        text-transform: uppercase;
        text-align: center;
    }

    .projects .project-box .project-client p:last-child {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        line-height: 1px
    }

    .projects .project-box .project-task-numbers p {
        font-size: 11px;
        text-transform: uppercase;
        line-height: 1px;
    }

    .projects .project-box .project-status {
        font-size: 11px;
        text-transform: uppercase;
        line-height: 1px;
    }

    .projects .project-box .project-status i {
        color: gray;
    }


    /** All projects sidebar **/
    .all-projects .list-group-item:first-child {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .all-projects .list-group-item:last-child {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    
    .all-projects .sidebar li {
      padding: 0;
    }

    .all-projects .sidebar li a {
      display: block;
      padding: 8px 30px 8px 10px;
    }

    .all-projects .sidebar li a:hover {
      text-decoration: none;
    }

    .all-projects .sidebar > li.active,
    .all-projects .sidebar > li.active:hover {
      background: gray;
    } 

    .all-projects .sidebar > li.active, 
    .all-projects .sidebar > li.active:hover, 
    .all-projects .sidebar > li.active:focus {
      border-color: #ddd;
    }

    .all-projects .sidebar > li.active > a {
      color: #fff;
    }

    /*Sidebar Sub Navigation*/
    .all-projects .sidebar li ul {
      padding: 0;
      list-style: none;
    }

    .all-projects .sidebar li ul,
    .all-projects .sidebar li.active ul a {
      background: #f8f8f8;
    }

    .all-projects .sidebar li ul a {
      color: #555;
      font-size: 12px;
      border-top: solid 1px #ddd;
      padding: 6px 30px 6px 17px; 
    }

    .all-projects .sidebar ul li:hover a,
    .all-projects .sidebar ul li.active a {
      color: #72c02c;
    }

    .all-projects .sidebar .list-group-item {
        border: none;
    }

    .all-projects .project-top-bar {
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .all-projects .modal-pull-right .modal-dialog {
        max-width: 720px;
    }

    .all-projects .modal-pull-right .modal-dialog .modal-body {
        width: 100%;
    }

    .all-projects .project-add-content {
        height: 356px;
        padding: 10px;
        overflow-x: hidden;
    }

    .all-projects .modal-pull-right [data-dismiss="modal"] {
        cursor: pointer;
    }

    .all-projects .modal-pull-right .modal-body {
        padding: 0px;
    }

    .all-projects .modal-pull-right .form-actions {
        padding-left: 15px;
    }  

     @media (max-width: 800px) {
        .all-projects .project-top-bar {
            text-align: left;
            width: 100%;
        }

        .all-projects .project-top-bar .btn-add-new-project {
            margin-bottom: 10px;
            display: block;
        }

        .all-projects .project-top-bar .txt-search-user {
            margin-bottom: -5px;
        }

        .all-projects .project-top-bar .btn-search {
            margin-bottom: 10px;
        }

        
    }

    /** View Project **/
    .view-project .list-group-item:first-child {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .view-project .list-group-item:last-child {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    
    .view-project .sidebar li {
      padding: 0;
    }

    .view-project .sidebar li a {
      display: block;
      padding: 8px 30px 8px 10px;
    }

    .view-project .sidebar li a:hover {
      text-decoration: none;
    }

    .view-project .sidebar > li.active,
    .view-project .sidebar > li.active:hover {
      background: gray;
    } 

    .view-project .sidebar > li.active, 
    .view-project .sidebar > li.active:hover, 
    .view-project .sidebar > li.active:focus {
      border-color: #ddd;
    }

    .view-project .sidebar > li.active > a {
      color: #fff;
    }

    .view-project .panel .project-heading {
        padding: 20px;
    }

    .view-project .project-details {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom:10px;
        
    }

    .view-project .project-details .row-details {
        padding-top: 15px;
        padding-bottom:10px;
        border-bottom: 1px solid #eee;
    }

    .view-project .project-details .project-completed-label small {
        margin-top: -15px;
        text-transform: uppercase;
        position: absolute;
    }

    .view-project .project-details .add-assignee {
        font-size:40px; 
        margin-top:2px; 
        position:absolute; 
        margin-left:8px;
        cursor: pointer;
        color: #ccc;
    }

    .view-project .project-details .add-assignee:hover {
        color: gray;
    }
    
    .view-project .client-logo {
        width: 100px;
    }


    .view-project .pproject-tag-list li {
        display: inline-block;
        margin:0 5px 7px 0;
        margin-top: 5px;
    }

    .view-project .project-tag-list li a {
        display: inline-block;
        border: 1px solid #ddd;
        padding: 3px 10px;
        color:#797979;
        font-size:12px;
    }

    .view-project .project-tag-list li a:hover {
        background: gray;
        border-color: #fff;
        color:#fff;
    }

    .view-project .project-other-info .list-inline li{
        margin-top: 5px !important;
    }

    .view-project .project-other-info  .project-files li i {
        color: gray;
    }

    /** View Project Sidebar **/
    .view-project .sidebar li ul {
      padding: 0;
      list-style: none;
    }

    .view-project .sidebar li ul,
    .view-project .sidebar li.active ul a {
      background: #f8f8f8;
    }

    .view-project .sidebar li ul a {
      color: #555;
      font-size: 12px;
      border-top: solid 1px #ddd;
      padding: 6px 30px 6px 17px; 
    }

    .view-project .sidebar ul li:hover a,
    .view-project .sidebar ul li.active a {
      color: #72c02c;
    }

    .view-project .list-group-item {
        border: 0px solid #ddd;
    }

   

/* ============================================================
USERS SECTION
============================================================ */
    .users .user-toolbar {

    }

    .users .txt-search-user {
        height: 35px;
    }

    .users .btn-group .btn:first-child {
        border-top-left-radius:0px;
        border-bottom-left-radius:0px;
    }

    .users .btn-group .btn:last-child {
        border-top-right-radius:0px;
        border-bottom-right-radius:0px;
    }

    .users .btn-group .grid-view, .users .btn-group .list-view {
        font-size: 15px;
    }

    .users hr { 
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #ddd;
    } 


    .users .thumbnail
    {
        margin-bottom: 20px;
        padding: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        border:none;
        box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.05);
        -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.05);
    }

    .users .thumbnail .caption {
        padding: 0px;
    }

    .users .item.list-group-item
    {
        float: none;
        width: 100%;
        background-color: transparent;
        margin-bottom: 10px;
        border:none;
        
    }

    .users .item.list-group-item .list-group-image
    {
        margin-right: 25px;
        height: 250px;
    }
    .users .item.list-group-item .thumbnail
    {
        margin-bottom: 0px;
    }
    .users .item.list-group-item .caption
    { 
        padding: 9px 9px 0px 9px;
    }
    .users .item.list-group-item:nth-of-type(odd)
    {
        background: transparent;
    }

    .users .item.list-group-item:before, .item.list-group-item:after
    {
        display: table;
        content: " ";
    }

    .users .item.list-group-item img
    {
        float: left;
    }
    .users .item.list-group-item:after
    {
        clear: both;
    }
    .users .list-group-item-text
    {
        margin: 0 0 11px;
    }

    .users .list-group-item .user-info {
        margin-top: 0px;
        color: inherit;
    }

    .users .user-info {
        margin-top: -50px;
        font-weight: bold;
        color: white;
        font-size: 17px;
        margin-left: 10px;
    }

    .users .user-info .user-type {
        margin-top: -12px;
    }
    

    .users .user-info .user-type span {
        font-size: 10px;
    }

    .users .user-info .user-type.administrator span.badge {
        background-color: #f1c40f;
    }


    .users .user-info .user-type span.badge {
        border-radius: 0px;
    }

    .users  .caption .user-task-info i {
        font-size: 35px;
    }

    .users  .caption .user-task-info {
        background-color: #FBFBFB;
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 25px;
        padding-top: 7px;
        height: 53px;
        border-bottom: 2px solid #eee;
    }

    .users  .caption .user-task-info .user-number-tickets {
        margin-left: 8px;
        font-weight: bold;
        top: -15px;
        position: relative;
    }

    .users  .caption .user-task-info .lbl-user-number-tickets {
        display: block;
        position: relative;
        top: -19px;
        margin-left: 41px;
        text-transform: uppercase;
    }

    .users .user-other-info ul {
        list-style: none;
    }

    .users .user-other-info ul li:first-child {
        margin-top: 12px;
    }

    .users .user-other-info ul li:last-child {
        margin-bottom: 12px;
    }

    .users .user-other-info ul li {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .users .user-other-info ul li span {
        margin-left: 15px;
    }
    
    .users .user-action {
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 25px;
    }

    .users .list-group-item .caption .user-task-info{
        background-color: transparent;
        border:none;
    }

    .users .list-group-item .caption .lbl-user-number-tickets {
        left: 39px;
    }

    .users .list-group-item {
        margin-top: -10px;
    }
    
    .users .list-group-item .user-name { 
        padding-left: 25px;
        padding-top: 20px;
    }

    .users .list-group {
        margin-top: 23px;
    }


/* ============================================================
USER OVERLAY SECTION
============================================================ */

    .users .modal-pull-right .modal-dialog {
        max-width: 720px;
    }

    .users .modal-pull-right .modal-dialog .modal-body {
        width: 100%;
    }

    .users .modal-pull-right .modal-dialog .modal-body .modal-close h4{
        padding-left: 15px;
    }   

    .users .modal-pull-right .modal-dialog .modal-body .col-md-12 {
        padding: 0px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .users .modal-pull-right .modal-dialog .modal-body .form-actions {
        margin-top: -10px;
        margin-top: -44px;
        margin-left: 15px;
    }

    .users .modal-pull-right .modal-dialog .modal-body .user-header {
        width: 100%;
        height: 280px;
        text-align: center;
        overflow: inherit;
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
        border-bottom: 5px solid gray;
        filter:grayscale(100%);
        -webkit-filter:grayscale(100%);
        -moz-filter:grayscale(100%);
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }

    .users .modal-pull-right .modal-dialog .modal-body .user-header:hover {
        filter:grayscale(0%);
        -webkit-filter:grayscale(0%);
        -moz-filter:grayscale(0%);
    }

    .users .modal-pull-right .modal-dialog .modal-body .user-header .profile-image-container {
        margin-top: 211px;
        padding-left: 0px;
        float: left;
        margin-left: 16px;
    }

    .users .modal-pull-right .modal-dialog .modal-body .user-header .profile-image-container img {
        border:5px solid gray;
        border-radius: 60%;
        -moz-border-radius: 60%;
        -webkit-border-radius: 60%;
        text-align: left;
    }

    .users .modal-pull-right .modal-dialog .modal-body .user-header .user-info {
        width: 100%;
        position: absolute;
        margin-top: 120px;
    }

    .users .modal-pull-right .modal-dialog .modal-body .user-header .user-info .user-name {
        font-weight: bold;
        color: #fff;
        font-size: 30px;
        text-align:center;
    }

    .users .modal-pull-right .modal-dialog .modal-body .user-header .user-info .user-skills ul {
        list-style: none;
    }

    .users .modal-pull-right .modal-dialog .modal-body .user-header .user-info .user-skills ul li {
        display: block;
        width: 60px;
    }

    .users .modal-pull-right .modal-dialog .dialog-close {
        width: 100%;
        position: absolute;
        margin-top: 20px;
    }

    .users .modal-pull-right .modal-dialog .modal-body .user-header .dialog-close li {
        cursor: pointer;
        color: white;
        text-align: right;
    }

    .users .modal-pull-right .modal-dialog .modal-body .user-header .dialog-close li span.fa {
        font-size: 35px;
        font-weight: bold;
    }

    .users .modal-pull-right .modal-dialog .modal-body .user-header .dialog-close li span.fa:hover {
        color: gray;
    }

    .users .modal-pull-right .modal-dialog .modal-body .user-view-content .user-view-action {
        margin-right: 15px;
        margin-top: 15px;
    }

    .users .modal-pull-right .modal-dialog .modal-body .user-view-content .user-view-info {
        margin-top: 15px;
    }

    .users .user-info-container {
        height: 250px;
        margin-top: 80px;
        position: absolute;
        width: 100%;
        padding-right: 40px;
        padding-left: 10px;
        background-color: white;
    }   

    .users .user-add-content {
        padding: 18px;
    }

    .users .close-right-modal {
        cursor: pointer;
    }

    .users .close-right-modal:hover {
        opacity: .8;
    }

    .users .basic-info-scroll {
        height: 425px;
        overflow-x: hidden;
    }
    
    @media (max-width: 767px) { 
        .users .modal-pull-right .modal-dialog .modal-body .form-actions {
            margin-top: 15px;
            margin-left: 15px;
        }
    }

    @media (max-width: 800px) {
        .users .user-top-bar {
            text-align: left;
            width: 100%;
        }

        .users .user-top-bar .btn-add-new-user {
            margin-bottom: 10px;
            display: block;
        }

        .users .user-top-bar .txt-search-user {
            margin-bottom: -5px;
        }

        
    }



/* ============================================================
FULLCALENDAR
============================================================ */
    .bg-calendar-content {
        background: rgba(255, 255, 255, 0.5);
    }

    #external-events {
        float: left;
        padding: 0 10px;
        background: rgba(255, 255, 255, 0.5);
        text-align: left;
        width: 100%;
        z-index: 99;
        position: relative;
    }
        
    #external-events h4 {
        font-size: 16px;
        margin-top: 0;
        padding-top: 1em;
    }
        
    #external-events .fc-event {
        margin: 10px 0;
        cursor: pointer;
    }
        
    #external-events p {
        margin: 1.5em 0;
        font-size: 11px;
        color: #666;
    }
        
    #external-events p input {
        margin: 0;
        vertical-align: middle;
    }

    .fc-draggable.fc-event {
        border: none;
    }
    .external-event {
        cursor: move;
        margin: 10px 0;
        padding: 6px;
    }
    .fc-event {
        border-radius: 0;
        margin: 3px 6px;
        padding: 4px 8px;
    }
    .fc-state-default {
        background: #ffffff;
        box-shadow: none !important;
        color: #000000;
        margin-right: -1px;
        outline: none !important;
        text-shadow: none;
    }
    .fc-state-default:hover {
        background: #E4E4E4;
    }
    .fc-state-default.fc-corner-right {
        background-color: #ffffff;
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
        border: none;
        color: #111111;
    }
    .fc-state-default.fc-corner-right:hover {
        background: #E4E4E4;
    }
    .fc-toolbar {
        margin-bottom: 40px;
    }
    .fc-toolbar .fc-state-active {
        background: #319db5;
        box-shadow: none;
        color: #ffffff;
        cursor: default;
        margin-right: -1px;
    }
    .fc-toolbar .ui-state-active {
        background: #319db5;
        box-shadow: none;
        color: #ffffff;
        cursor: default;
        margin-right: -1px;
    }
    .fc-state-default.fc-corner-right.fc-state-active {
        background: #319db5;
        box-shadow: none;
        color: #ffffff;
        cursor: default;
        margin-right: -1px;
    }
    .fc-state-default.fc-state-disabled {
        background-color: #cccccc;
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
        color: #111111;
    }
    .fc .fc-toolbar > *:first-child {
        border: none;
    }
    .fc .fc-button-group > * {
        border: none;
    }
    .fc .fc-button-group .fc-prev-button {
        background: #2b2e33;
        color: #ffffff;
    }
    .fc .fc-button-group .fc-next-button {
        background: #2b2e33;
        color: #ffffff;
    }
    .fc-state-default.fc-corner-right.fc-state-disabled {
        background: #C8C8C8;
    }
    .fc-unthemed .fc-today {
        background: #ffffff;
    }
    .fc-unthemed .fc-future {
        background: #ffffff;
    }
    .fc-basic-view td.fc-day-number {
        padding-right: 8px;
        padding-top: 8px;
    }
    .fc-basic-view td.fc-day-number.fc-past {
        filter: alpha(opacity=30);
        opacity: 0.3;
    }
    .fc th,
    .fc-unthemed thead,
    .fc-unthemed .fc-row,
    thead .fc-widget-header {
        border-color: transparent !important;
        border-width: 0;
        border: none;
    }
    .fc-head td {
        padding-bottom: 8px;
    }

    .fc-state-default.fc-corner-left {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .fc-state-default.fc-corner-right {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .fc-event {
        border:none !important;
        padding: 10px;
    }

    .fc-draggable.fc-event {
        padding: 3px;
    }

    .page-fullcalendar #calendar {
        padding: 10px;
    }


    #calendar .mobile-height {
        height: 200px !important;
    }

    #calendar .desktop-height {
        height: 350px !important;
    }

    .fc-event-new-category {
        cursor: pointer;
    }


/* ============================================================
FORUM SECTION
============================================================ */
    .page-forum .panel {
        border-radius: 0px; 
    }

    .page-forum .panel {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .page-forum .panel .panel-body .row:not(:first-child) {
        border-top:1px solid #eee;
        margin-top: 15px;
    }

    .page-forum .panel .forum-heading .label {
        margin-right: 10px;
        border-radius: 0px;
    }

    .page-forum .panel .forum-heading h4{
        margin-top: 1px;
        font-weight: bold;
    }

   .page-forum .panel .panel-body .row:not(:first-child) h4 {
        margin-top: 10px;
    }

    .page-forum .panel .panel-body .row:not(:first-child) .forum-info{
        margin-top: 10px;
    }

    .page-forum .panel .forum-info .number {
        font-size: 25px;
        font-weight: bold;
        display: block;
    }

    .page-forum .panel .forum-info small {
        
    }

    .page-forum .panel .forum-heading .description {
        font-size: 12px;
    }

    @media (max-width: 768px) {
        .page-forum .forum-info {
            text-align: left
        }
    }


    .page-forum .top-bar .btn-white {
        border: 1px solid #eee;
    }

    .page-forum .top-bar .col-md-6:first-child .btn-group {
        margin-top: 4px;
    }

    .page-forum .top-bar .btn-white:hover, .page-forum .top-bar .btn-white:active {
        background: #eee;
    }

    .page-forum .forum-replies {
        background: #fff !important;
    }

    .page-forum .forum-replies .forum-reply-thumb img {
        width: 100px;
    }

    .page-forum .forum-replies .forum-reply-thumb .forum-username-replied {
        width: 100%;
        position: relative;
        font-weight: bold;
    }

    .page-forum .forum-replies .forum-reply-thumb .forum-name-replied {
        font-weight: bold;
        line-height: 1px;
    }

    .page-forum .forum-replies .forum-reply-details {
        padding: 10px;
    }

    .page-forum .forum-discussion .forum-replies:not(:first-child) {
       
    }

    .page-forum .attachement-list a {
        color: #666;
    }
    .page-forum .attachement-list a:hover,
    .page-forum .attachement-list a:focus {
        text-decoration: none;
        color: #ddd;
    }
    .page-forum .attachement-list ul {
        margin: 0px;
        padding: 0px;
    }
    .page-forum .attachement-list ul li {
        padding: 10px 0px;
        display: table;
        width: 100%;
    }
    .page-forum .attachement-list ul li > div {
        display: table-cell;
        vertical-align: middle;
    }
    .page-forum .attachement-list ul li .attachment-thumb {
        width: 60px;
        height: 60px;
    }
    .page-forum .attachement-list ul li .attachment-thumb a {
        color: #ddd;
         width: 60px;
        height: 60px;
        display: inline-block;
        text-align: center;
        background-color: #f5f5f5;
    }
   .page-forum  .attachement-list ul li .attachment-thumb a i {
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
    }
    .page-forum .attachement-list ul li .attachment-thumb a:hover {
        background-color: #ddd;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
        color: #fff;
    }
    .page-forum .attachement-list ul li .attachment-info {
        padding-left: 16px;
    }
    .page-forum .attachement-list ul li .attachment-info .attachment-file-name {
        display: block;
        margin-bottom: 3px;
    }
    .page-forum .attachement-list ul li .attachment-info .attachment-action-bar a:hover,
    .page-forum .attachement-list ul li .attachment-info .attachment-action-bar a:focus {
        text-decoration: none;
    }
    .page-forum .attachement-list ul li .attachment-info .attachment-action-bar .list-file-download a {
        padding-right: 10px;
    }
    .page-forum .attachement-list ul li .attachment-info .attachment-action-bar .list-file-del a {
        padding-right: 10px;
    }

   .btn-download-attached:hover, .btn-download-attached:active {
        color: white !important;
    }


    .page-forum .forum-comments {
        border-left: none;
        border-right: none;
        background: #eee;
        margin-top: 20px;
        padding: 10px 15px;
    }

    .page-forum .forum-comments form {
        margin-top: 10px;
    }

    .page-forum .comment-details .social-content, .page-forum .comment-details .comment-name {
        padding-left: 42px;
    }

    .page-forum .forum-comments .comment-thumbnail img{
        width: 52px;
        height: 52px;
    }

    .page-forum .comment-name {
        font-weight: bold;
    }


/* ============================================================
REGISTRATION 1 SECTION 
============================================================ */
    .page-login .social-buttons {
        border-left:1px solid #eee;
        padding: 10px;
        padding-left: 25px;
    }

    .bg-overlay {
        position:fixed;
        top:0px;
        left:0px;
        bottom:0px;
        right:0px;
        background-color:rgba(0,0,0,0.5);
        -webkit-box-shadow: inset -5px 3px 194px 48px rgba(0,0,0,0.6);
        -moz-box-shadow: inset -5px 3px 194px 48px rgba(0,0,0,0.6);
        box-shadow: inset -5px 3px 194px 48px rgba(0,0,0,0.6);
    }

    .registration-login-wrapper {
        margin-top: 10%;
    }
    

    @media (max-width: 767px) {
        .page-login .form-social-header {
            border-top: 1px solid #eee;
            margin-top: 15px;
        }

        .page-login .social-buttons {
            border-left:0px solid white;
            margin-left: 0px;
            padding-left: 10px;
            margin-top: -10px !important;
        }
    }

    .social-icons li {
        padding: 10px;
        padding-left: 13px;
        padding-right: 13px;
        cursor: pointer;
    }
    .social-icons li a {
        color: #fff;
    }

/* ============================================================
LOCKSCREEN SECTION 
============================================================ */
    .page-lockscreen .form-body #time {
        color: white;
        font-size: 120px;
        text-align: center;
        font-family: 'Poiret One', cursive;
    }

    .page-lockscreen .form-body .lockscreen-wrapper {
        margin:10% auto;
        max-width:500px;
    }

    .page-lockscreen .form-body .lockscreen-wrapper .user-locked {
        
        height: 100px;
    }

     .page-lockscreen .form-body .lockscreen-wrapper .user-locked img {
        border: 5px solid #fff;
        z-index: 9;
        position: relative;
     }

     .page-lockscreen .form-body .user-details {
        background: white;
        padding: 10px;
        width: 65%;
        margin-top: -117px;
        margin-left: 23px;
        position: absolute;
        height: 100px;
        padding-left: 100px;
     }

     .page-lockscreen .form-body .user-details input {
        border:none;
        margin-top: 23px;
        font-size: 20px;
     }

    @media (max-width: 700px) {
        .page-lockscreen .form-body #time {
            font-size: 100px;
        }
    }

    @media (max-width: 550px) {
        .page-lockscreen .form-body #time {
            font-size: 80px;
        }
    }

    @media (max-width: 450px) {
        .page-lockscreen .form-body #time {
            font-size: 60px;
        }
    }

    @media (max-width: 400px) {
        .page-lockscreen .form-body #time {
            font-size: 50px;
        }
    }


/* ============================================================
COMING SOON SECTION
============================================================ */
    .page-coming-soon h1 {
        font-size: 60px;
        font-weight: 550;
        line-height: 65px;
        margin-bottom: 15px;
        color: #fff;
        text-align: center;
    }

    .page-coming-soon p {
        color: white;
        text-align: center;
    }
    .page-coming-soon #countdown-timer { 
        width: 100%;
        margin: 10px 0; 
        overflow: hidden;
        background: rgba(0,0,0,0.3);
        text-align: center;
    }

    .page-coming-soon #countdown-timer span.countdown_row {
        overflow: hidden;
    }

    .page-coming-soon #countdown-timer span.countdown-section {
        margin: 2px;
        width: 150px;
        padding: 25px 0;
        text-align: center;
        display: inline-block;
    }

    .page-coming-soon #countdown-timer span.countdown-amount {
        color: #fff;
        display: block;
        font-weight: 200;
        font-size: 60px !important;
        line-height: 65px !important;
        font-family: 'Open Sans', sans-serif;   
        text-align: center;
    }

    .page-coming-soon #countdown-timer span.countdown-period {
        color: #fff;
        display: block;
        font-weight: 200;
        font-size: 16px !important;
    }

    .page-coming-soon .txt-subscribe {
        width:60%; left:20%; right:20%;
    }

    @media (max-width: 500px) { 
        .page-coming-soon .txt-subscribe {
            width:100%; left:0%; right:0%;
        }
    }


/* ============================================================
ERROR PAGE SECTION
============================================================ */
    .error_page {
        padding: 50px 30px 58px 30px;
        margin: 0 auto;
        width: 59%;
        border: 1px solid #eee;
        text-align: center;
        font-family: 'Open Sans', sans-serif;
    }
    .error_page strong {
        display: block;
        font-size: 145px;
        line-height: 100px;
        color: #e3e3e3;
        font-weight: normal;
        margin-bottom: 10px;
        text-shadow: 5px 5px 1px #fafafa;
    }
    .error_page b {
        display: block;
        font-size: 40px;
        line-height: 50px;
        color: #999;
        margin: 0;
        font-weight: 300;
    }
    .error_page em {
        display: block;
        font-size: 18px;
        line-height: 59px;
        color: #ddd;
        margin: 0;
        font-style: normal;
    }



/* ============================================================
SEARCH RESULTS SECTION
============================================================ */
    .page-search-results .search-box {
        background: #eee;
        padding-top: 15px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 1px;
    }

    .page-search-results .search-item {
        border-bottom: 1px solid #eee;
    }

    .page-search-results .search-item h3 {
        margin-bottom: -2px;
        font-weight: bold;
    }

    .page-search-results .search-item h3 a{
        color: #4F89B1;
        line-height: 1px;
    }

    .page-search-results .search-item .search-link {
        color: #B5B3B3;
    }


/* ============================================================
PEOPLE DIRECTORY/CONTACTS SECTION
============================================================ */
    .page-people-directory .nav-contacts {
        margin-bottom: 20px;
    }

    .page-people-directory .nav-contacts li a {
        color: #666;
        font-weight: 400;
        font-size: 13px;
    }

    .page-people-directory .nav-contacts li .badge {
        background: none;
        font-weight: 500;
        color: #333;
    }

    .page-people-directory .nav-contacts li.active .badge {
        color: #fff;
        background: none;
    }

    .page-people-directory .people-group .media img {
        width: 45px;
    }

    .page-people-directory .people-group .list-group-item {
        -moz-transition: all 0.2s ease-out 0s;
        -webkit-transition: all 0.2s ease-out 0s;
        transition: all 0.2s ease-out 0s;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        margin: 0;
        border-width: 0;
    }

    .page-people-directory .people-group .media-heading {
        margin-top: 5px;
    }

    .page-people-directory .people-group .media-heading,
    .page-people-directory .people-group .media-body {
        line-height: normal;
    }

    .page-people-directory .pagination-contact {
        margin-top: -3px;
    }

    .page-people-directory .contact-group {
        margin-top: 20px;
    }

    .page-people-directory .contact-group .media img {
        width: 80px;
    }

    .page-people-directory .contact-group .list-group-item {

    }

    .page-people-directory .contact-group .media-heading {
        font-size: 16px;
        font-weight: 500;
    }

    .page-people-directory .contact-group .media-heading small {
        margin-left: 5px;
        font-size: 13px;
        font-weight: 400;
        color: #999;
    }

    .page-people-directory .contact-group .list-group-item {
        border: none;
        margin-top: 10px;
    }

    .page-people-directory .contact-group .list-group-item:hover {
        background-color: #fcfcfc;
    }

    .page-people-directory .contact-group .media-content {
        margin-top: 5px;
    }

    .page-people-directory .contact-group .fa:before {
        font-size: 20px;
        color:gray;
    }

    .page-people-directory .contact-group .media-content ul {
        margin-top: 15px;
        margin-bottom: 0;
    }

    .page-people-directory .contact-group .media-content ul > li {
        display: inline-block;
        min-width: 200px;
        margin-bottom: 5px;
    }

    .page-people-directory .well {
        border-radius: 0px;
        border: none;
    }

    .page-people-directory .list-group-item:first-child {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .page-people-directory .page-title {
        text-transform: uppercase;
    }

    .page-people-directory .btn-add-new-contact {
        float: right;
    }

    @media (max-width: 992px) { 
        .page-people-directory .btn-add-new-contact {
            float: left;
        }
    }



/* ============================================================
CONTACT MODAL VIEW
============================================================ */
    .page-people-directory .modal-pull-right .modal-dialog {
        max-width: 720px;
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body {
        width: 100%;
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body .modal-close h4 {
        padding-left: 15px;
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body .col-md-12 {
        padding: 0px;
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body .contact-header {
        width: 100%;
        height: 280px;
        text-align: center;
        overflow: inherit;
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
        border-bottom: 5px solid gray;
        filter:grayscale(100%);
        -webkit-filter:grayscale(100%);
        -moz-filter:grayscale(100%);
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        -ms-transition:all 0.3s ease;
        transition:all 0.3s ease;
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body .contact-header:hover {
        filter:grayscale(0%);
        -webkit-filter:grayscale(0%);
        -moz-filter:grayscale(0%);
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body .contact-header .profile-image-container {
        margin-top: 211px;
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body .contact-header .profile-image-container img {
        border:5px solid gray;
        border-radius: 60%;
        -moz-border-radius: 60%;
        -webkit-border-radius: 60%;
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body .contact-header .contact-info {
        width: 100%;
        position: absolute;
        margin-top: 120px;
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body .contact-header .contact-info .contact-name {
        font-weight: bold;
        color: #fff;
        font-size: 30px;
        text-align:center;
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body .contact-header .contact-info .contact-skills ul {
        list-style: none;
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body .contact-header .contact-info .contact-skills ul li {
        display: block;
        width: 60px;
    }

    .page-people-directory .modal-pull-right .modal-dialog .dialog-close {
        width: 100%;
        position: absolute;
        margin-top: 20px;
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body .contact-header .dialog-close li {
        cursor: pointer;
        color: white;
        text-align: right;
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body .contact-header .dialog-close li span.fa {
        font-size: 35px;
        font-weight: bold;
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body .contact-header .dialog-close li span.fa:hover {
        color: gray;
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body .contact-view-content .contact-view-action {
        margin-right: 15px;
        margin-top: 15px;
    }

    .page-people-directory .modal-pull-right .modal-dialog .modal-body .contact-view-content .contact-view-info {
        margin-top: 15px;
    }

    .page-people-directory .contact-info-container {
        height: 250px;
        margin-top: 80px;
        position: absolute;
        width: 100%;
    }   

    .page-people-directory .contact-add-content {
        padding: 40px;
    }

    .page-people-directory .close-right-modal {
        cursor: pointer;
    }

    .page-people-directory .close-right-modal:hover {
        opacity: .8;
    }

    .page-people-directory .basic-info-scroll {
        height: 425px;
        overflow-x: hidden;
    }
    

    @media (max-width: 800px) {
        .page-people-directory .contact-top-bar {
            text-align: left;
            width: 100%;
        }

        .page-people-directory .contact-top-bar .btn-add-new-contact {
            margin-bottom: 10px;
            display: block;
        }

        .page-people-directory .contact-top-bar .txt-search-contact {
            margin-bottom: -5px;
        }
    }



/* ============================================================
EMAIL TEMPLATE
============================================================ */
    .page-email-template .top-bar {

    }

    .page-email-template .email-template-content {
        border-bottom:1px dotted gray;
        padding: 15px;
    }

    .page-email-template .email-template-content img {
        width: 100%;
    }

/* ============================================================
eCOMMERCE SECTION
============================================================ */
    .page-ecommerce .sidebar .display-types .types {
        margin-top: -33px;
    }

    .page-ecommerce .sidebar .display-types #ecommerce-grid-view, .page-ecommerce .sidebar .display-types #ecommerce-list-view{
        font-size: 30px;
        color: #ddd;
        text-align: center;
    }

    .page-ecommerce .sidebar .display-types #ecommerce-grid-view.active, .page-ecommerce .sidebar .display-types #ecommerce-list-view.active {
        color: gray;    
    }

    .page-ecommerce .sidebar .sort-by .select2 {
        margin-top: -33px;
    }

    .page-ecommerce .sidebar .filter .form-filter {
        margin-top: -25px;
    }

    .page-ecommerce .sidebar .filter .categories {
        margin-left: 15px;
    }

    .page-ecommerce .sidebar .sizes .select2 {
        margin-top: -33px;
    }

    .page-ecommerce .sidebar .colors .lists {
        margin-top: -25px;
    }

    .page-ecommerce .sidebar .prices .slider-container {
        margin-top: -25px;
    }

    .page-ecommerce .ecommerce-content .ecommerce-slider .prices .present-price {
        color: gray;
        font-weight: bold;
        font-size: 30px;
        float: left;
        text-align: right;
        border: 0px solid gray;
        width: 50%;
        padding-right: 15px;
        border-right: 5px solid #eee;
    }

    .page-ecommerce .ecommerce-content .ecommerce-slider .prices .original-price {
        color: gray;
        font-weight: bold;
        font-size: 30px;
        float: right;
        text-align: left;
        width: 50%;
        padding-left: 15px;
    }

    .page-ecommerce .ecommerce-content .ecommerce-slider .prices .present-price .price-label {
        font-size: 10px;
        
    }
    
    .page-ecommerce .ecommerce-content .ecommerce-slider .prices .original-price .price-label {
        font-size: 10px;

    }

    /** List/Grid View for ecommerce **/
    .page-ecommerce .ecommerce-view .item.list-group-item
    {
        float: none;
        width: 100%;
        background-color: transparent;
        margin-bottom: 10px;
        border:none;
    }

    .page-ecommerce .ecommerce-view .item.list-group-item .list-group-image
    {
        margin-right: 10px;
        height: 250px;
    }
    .page-ecommerce .ecommerce-view .item.list-group-item .thumbnail
    {
        margin-bottom: 0px;
    }
    .page-ecommerce .ecommerce-view .item.list-group-item .caption
    { 
        padding: 9px 9px 0px 9px;
    }
    .page-ecommerce .ecommerce-view .item.list-group-item:nth-of-type(odd)
    {
        background: transparent;
    }

    .page-ecommerce .ecommerce-view .item.list-group-item:before, .item.list-group-item:after
    {
        display: table;
        content: " ";
    }

    .page-ecommerce .ecommerce-view .item.list-group-item img
    {
        float: left;
    }
    .page-ecommerce .ecommerce-view .item.list-group-item:after
    {
        clear: both;
    }
    .page-ecommerce .ecommerce-view .list-group-item-text
    {
        margin: 0 0 11px;
    }

    .page-ecommerce .ecommerce-view .thumbnail {
        border: none;
    } 

    .page-ecommerce .ecommerce-view .caption .item-name h3{
        font-weight: bolder;
        text-transform: uppercase;
        margin-left: -10px;
    }

    .page-ecommerce .ecommerce-view .caption .item-price {
        font-weight: bold;
        margin-left: -10px;
        margin-top: -10px;
    }

    .page-ecommerce .ecommerce-view .caption .item-action {
        margin-top: 15px;
        margin-left: -10px;
    }

    .page-ecommerce .ecommerce-view .item-description{
        display: none;
        margin-left: -10px;
    }

    .page-ecommerce .ecommerce-view .grid-group-item .item-description, 
    .page-ecommerce .ecommerce-view .btn-add-to-cart,
    .page-ecommerce .ecommerce-view .grid-group-item .btn-add-to-cart
    {
        display: none;
    }

    .page-ecommerce .ecommerce-view .list-group-item .item-description,
    .page-ecommerce .ecommerce-view .list-group-item .btn-add-to-cart,
    .page-ecommerce .ecommerce-view .grid-group-item .btn-read-more {
        display: inline;
    }

    .page-ecommerce .ecommerce-view .list-group-item .item-name {
        margin-top: -21px;
    }

    .owl-theme .owl-controls{
        margin-top: 10px;
        text-align: center;
    }

    /* Styling Next and Prev buttons */

    .page-ecommerce .owl-theme .owl-controls .owl-buttons div{
        color: #FFF;
        display: inline-block;
        zoom: 1;
        *display: inline;/*IE7 life-saver */
        margin: 5px;
        padding: 3px 10px;
        font-size: 12px;
        background: #869791;
        opacity: 0.5;
    }
    /* Clickable class fix problem with hover on touch devices */
    /* Use it for non-touch hover action */
    .page-ecommerce .owl-theme .owl-controls.clickable .owl-buttons div:hover{
        background: gray;
        opacity: 1;
        text-decoration: none;
    }

    /* Styling Pagination*/

    .page-ecommerce .owl-theme .owl-controls .owl-page{
        display: inline-block;
        zoom: 1;
        *display: inline;/*IE7 life-saver */
    }
    .page-ecommerce .owl-theme .owl-controls .owl-page span{
        display: block;
        width: 12px;
        height: 12px;
        margin: 5px 7px;
        filter: Alpha(Opacity=50);/*IE7 fix*/
        opacity: 0.5;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        background: #869791;
    }

    .page-ecommerce .owl-theme .owl-controls .owl-page.active span,
    .page-ecommerce .owl-theme .owl-controls.clickable .owl-page:hover span{
        filter: Alpha(Opacity=100);/*IE7 fix*/
        opacity: 1;
    }

    .page-ecommerce .sidebar .table-responsive {
        border: 1px solid white;
    }

    .page-ecommerce .sidebar .table>tbody>tr:first-child>td {
        border-top: none;
    }

    /** Product Invoice **/
    .page-ecommerce .top-header-envoice {
        border: 1px solid #eee;
    }

    .page-ecommerce .top-header-envoice h2 {
        color:gray;
        font-weight: bold;
    }

    .page-contact-form .contact-info li i.fa {
        font-size: 20px;
        margin-right:10px;
    }

    .page-contact-form .business-hours li {
        color: gray;
    }



/* ============================================================
GOOGLE MAP SECTION
============================================================ */
    .page-google-map div.overlay{
      display:block;
      text-align:center;
      color:#fff;
      font-size:60px;
      line-height:80px;
      opacity:0.8;
      background:#4477aa;
      border:solid 3px #336699;
      border-radius:4px;
      box-shadow:2px 2px 10px #333;
      text-shadow:1px 1px 1px #666;
      padding:0 4px;
    }

    .page-google-map .overlay_arrow{
      left:50%;
      margin-left:-16px;
      width:0;
      height:0;
      position:absolute;
    }
    .page-google-map .overlay_arrow.above{
      bottom:-15px;
      border-left:16px solid transparent;
      border-right:16px solid transparent;
      border-top:16px solid #336699;
    }
    .page-google-map .overlay_arrow.below{
      top:-15px;
      border-left:16px solid transparent;
      border-right:16px solid transparent;
      border-bottom:16px solid #336699;
    }



/* ============================================================
WIDGETS SECTION
============================================================ */
    .widget {
        box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.05);
        -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.05);
    }

    .widget .widget-header {
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        margin-bottom: 0px;
        border-bottom: 1px solid #eee;
    }

    .widget .widget-header h1,
    .widget .widget-header h2,
    .widget .widget-header h3,
    .widget .widget-header h4,
    .widget .widget-header h5,
    .widget .widget-header h6 {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .widget .widget-content {
        padding: 20px;
    }

    .widget .widget-footer {
       background: #fff;
        font-weight: bold;
        margin-top: -19px;
        margin-bottom: 20px;
    }

    .widget .widget-footer a{
        color: gray;
    }

    /** User Widget View Style 1 **/
    .widget.user-view-style-1 .thumbnail
    {
        margin-bottom: 20px;
        padding: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        border:none;
    }

    .widget.user-view-style-1 .thumbnail .caption {
        padding: 0px;
    }

    .widget.user-view-style-1 .item.list-group-item
    {
        float: none;
        width: 100%;
        background-color: transparent;
        margin-bottom: 10px;
        border:none;
    }

    .widget.user-view-style-1 .item.list-group-item .list-group-image
    {
        margin-right: 10px;
        height: 250px;
    }
    .widget.user-view-style-1 .item.list-group-item .thumbnail
    {
        margin-bottom: 0px;
    }
    .widget.user-view-style-1 .item.list-group-item .caption
    { 
        padding: 9px 9px 0px 9px;
    }
    .widget.user-view-style-1 .item.list-group-item:nth-of-type(odd)
    {
        background: transparent;
    }

    .widget .item.list-group-item:before, .item.list-group-item:after
    {
        display: table;
        content: " ";
    }

    .widget.user-view-style-1 .item.list-group-item img
    {
        float: left;
    }
    .widget.user-view-style-1 .item.list-group-item:after
    {
        clear: both;
    }
    .widget.user-view-style-1 .list-group-item-text
    {
        margin: 0 0 11px;
    }

    .widget.user-view-style-1 .list-group-item .user-info {
        margin-top: 0px;
        color: inherit;
    }

    .widget.user-view-style-1 .user-info {
        margin-top: -50px;
        font-weight: bold;
        color: white;
        font-size: 17px;
        margin-left: 10px;
    }

    .widget.user-view-style-1 .user-info .user-type {
        margin-top: -12px;
    }
    

    .widget.user-view-style-1 .user-info .user-type span {
        font-size: 10px;
    }

    .widget.user-view-style-1 .user-info .user-type.administrator span.badge {
        background-color: #f1c40f;
    }


    .widget.user-view-style-1 .user-info .user-type span.badge {
        border-radius: 0px;
    }

    .widget.user-view-style-1  .caption .user-task-info i {
        font-size: 35px;
    }

    .widget.user-view-style-1  .caption .user-task-info {
        background-color: #FBFBFB;
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 6px;
        height: 53px;
        border-bottom: 2px solid #eee;
    }

    .widget.user-view-style-1  .caption .user-task-info .user-number-tickets {
        margin-left: 8px;
        font-weight: bold;
        top: -15px;
        position: relative;
    }

    .widget.user-view-style-1  .caption .user-task-info .lbl-user-number-tickets {
        display: block;
        position: relative;
        top: -19px;
        margin-left: 41px;
        text-transform: uppercase;
    }

    .widget.user-view-style-1 .user-other-info ul {
        list-style: none;
    }

    .widget.user-view-style-1 .user-other-info ul li:first-child {
        margin-top: 12px;
    }

    .widget.user-view-style-1 .user-other-info ul li:last-child {
        margin-bottom: 12px;
    }

    .widget.user-view-style-1 .user-other-info ul li {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .widget.user-view-style-1 .user-other-info ul li span {
        margin-left: 15px;
    }
    
    .widget.user-view-style-1 .user-action {
        padding-left: 10px;
        padding-bottom: 10px;
    }

    .widget.user-view-style-1 .list-group-item .caption .user-task-info{
        background-color: transparent;
        border:none;
    }

    .widget.user-view-style-1 .list-group-item .caption .lbl-user-number-tickets {
        left: 39px;
    }

    .widget.user-view-style-1 .list-group-item {
        margin-top: -10px;
    }

    .widget.user-view-style-1 .list-group {
        margin-top: 10px;
    }

    .widget.user-view-style-1 .user-task-info {
        color: gray;
    }
    
    .widget.user-view-style-1 .user-action {
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 25px;
    }


    /** User Widget View Style 2 **/
    .widget.user-view-style-2 .user-profile{
        text-align: center;
        position:relative;
    }
    
    .user-view-style-2 .widget-content {
        padding: 0px;
    }

    .widget.user-view-style-2 .user-profile .header-cover{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 130px;
        overflow: hidden;
        z-index: 1;
    }
    .widget.user-view-style-2 .user-profile .header-cover{
        background-color: #3A434D;
    }
    .widget.user-view-style-2 .user-profile .header-cover img{
        width: 100%;
    }
    .widget.user-view-style-2 .user-profile .user-profile-inner{
        z-index: 2;
        position: relative;
    }
    .widget.user-view-style-2 .user-profile .user-profile-inner h4.white{
        color: #fff;
    }
    .widget.user-view-style-2 .user-profile .user-profile-inner .profile-avatar{
        border: 5px solid #fff;
    }
    .widget.user-view-style-2 .user-profile .profile-avatar{
        margin: 15px 0;
        border: 3px solid #fff;
        
    }
    .widget.user-view-style-2 .user-profile .list-group{
        text-align: left;
        margin-top: 20px;
    }

    .widget.user-view-style-2 .user-profile .list-group .list-group-item {
        border:none;
        padding: 10px 25px;
    }
    
    .user-view-style-2 .user-button {
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 25px;
    }
    
    /** Overview Widgets Style 1**/
    .widget .widget-content .icon {
        width: 40%;
    }

    .widget .widget-content .value {
        width:40%;
    }

    .widget .widget-content .icon, .widget .widget-content .value{
        display: inline-block;
        text-align: center;
    }

    /** Overview Widgets Style 3**/
    .widget .hvr-bounce-to-right.bg-primary {
        background-color: #337ab7 !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-primary:before {
        background: #5698ce !important;
    }

    .widget .hvr-bounce-to-right.bg-info:before {
        background: #78d3ed!important;
    }

    .widget .hvr-bounce-to-right.bg-info {
        background-color: #5bc0de !important;
        color: white !important;
    }


    .widget .hvr-bounce-to-right.bg-success {
        background-color: #5cb85c !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-success:before {
        background: #75c475!important;
    }

    .widget .hvr-bounce-to-right.bg-warning {
        background-color: #f0ad4e !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-warning:before {
        background: #fcc476 !important;
    }

    .widget .hvr-bounce-to-right.bg-danger {
        background-color: #d9534f !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-danger:before {
        background: #ef807f !important;
    }

    .widget .hvr-bounce-to-right.bg-green {
        background-color: #2ECC71 !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-green:before {
        background: #4ddd89 !important;
    }

    .widget .hvr-bounce-to-right.bg-green-sea {
        background-color: #16A085 !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-green-sea:before {
        background: #35ba9f !important;
    }

    .widget .hvr-bounce-to-right.bg-nephritis {
        background-color: #27AE60 !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-nephritis:before {
        background: #3ec476 !important;
    }

    .widget .hvr-bounce-to-right.bg-peter-river {
        background-color: #3498DB !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-peter-river:before {
        background: #55ade8 !important;
    }

    .widget .hvr-bounce-to-right.bg-belize-hole {
        background-color: #2980B9 !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-belize-hole:before {
        background: #4b9acc !important;
    }

    .widget .hvr-bounce-to-right.bg-amethyst {
        background-color: #9B59B6 !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-amethyst:before {
        background: #a770bf !important;
    }

    .widget .hvr-bounce-to-right.bg-wisteria {
        background-color: #8E44AD !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-wisteria:before {
        background: #9f62ba !important;
    }

    .widget .hvr-bounce-to-right.bg-wet-asphalt {
        background-color: #34495E !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-wet-asphalt:before {
        background: #4e6072 !important;
    }

    .widget .hvr-bounce-to-right.bg-midnight-blue {
        background-color: #2C3E50 !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-midnight-blue:before {
        background: #455566 !important;
    }

    .widget .hvr-bounce-to-right.bg-sun-flower {
        background-color: #F1C40F !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-sun-flower:before {
        background: #f9d957 !important;
    }

    .widget .hvr-bounce-to-right.bg-orange {
        background-color: #fa6800 !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-orange:before {
        background: #f9924d !important;
    }

    .widget .hvr-bounce-to-right.bg-carrot {
        background-color: #F39C12 !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-carrot:before {
        background: #f9b34a !important;
    }

    .widget .hvr-bounce-to-right.bg-pumpkin {
        background-color: #D35400 !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-pumpkin:before {
        background: #db6f2b !important;
    }

    .widget .hvr-bounce-to-right.bg-alizarin {
        background-color: #E74C3C !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-alizarin:before {
        background: #ea6d62 !important;
    }

    .widget .hvr-bounce-to-right.bg-pomegranate {
        background-color: #C0392B !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-pomegranate:before {
        background: #cc594f !important;
    }

    .widget .hvr-bounce-to-right.bg-clouds {
        background-color: #ECF0F1 !important;
        color: gray !important;
    }

    .widget .hvr-bounce-to-right.bg-clouds:before {
        background: #f2f2f2 !important;
    }

    .widget .hvr-bounce-to-right.bg-silver {
        background-color: #BDC3C7 !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-silver:before {
        background: #d4d5d6 !important;
    }

    .widget .hvr-bounce-to-right.bg-concrete {
        background-color: #95A5A6 !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-concrete:before {
        background: #b8bcbc !important;
    }

    .widget .hvr-bounce-to-right.bg-asbestos {
        background-color: #7F8C8D !important;
        color: white !important;
    }

    .widget .hvr-bounce-to-right.bg-asbestos:before {
        background: #a5aaaa !important;
    }

    /*** Social Widget Style 1 ***/
    .widget .widget-content.social-style-1 .social-overview {
        padding-top: 28px;
        width: 100%;
        margin-left: -26px;
    }


    /*** Project Status ***/
    .widget .projects{
        list-style-type: none;
        margin: -20px;
        padding:0px;
    }

    .widget .projects li{
        padding:20px 20px;
        border-top: 1px solid #eee;
    }

    .widget .projects li:first-child{
        border-top: 0px;
    }

    .widget .projects p{
        font-weight: bold;
        margin: 0px !important;
        padding: 0px !important
    }

    .widget .projects .heading {
        margin-left: 6px !important;
    }

    .widget .projects .text-muted{
        font-size: 11px;
        font-weight: normal;
        margin-left: 30px !important;
        margin-bottom: 5px !important;
    }

    .widget .projects .progress{
        margin:0px !important;
        padding: 0px !important;
        margin-left: 30px !important;
    }


    /*** Widget Chat Conversation ***/
    .widget .chat-conversation {
        margin: -20px
    }

    .widget .chat-msg-list {
        list-style: none;
        padding-left: 0;
        height: 350px;
        overflow-x:hidden;
    }
    .widget .chat-msg-list li {
        margin-bottom:24px;
    }
    .widget .chat-msg-list .chat-avatar {
        width:40px;
        display:inline-block;
        text-align:center;
        float:left;
    }
    .widget .chat-msg-list .chat-avatar i {
        font-size:12px;
        font-style:normal;
    }
    .widget .chat-msg-list .msg-text i {
        display:block;
        font-style:normal;
        font-weight:bold;
        position:relative;
        font-size:12px;
        color:gray;
    }
    .widget .chat-msg-list .conversation-text {
        display:inline-block;
        font-size:12px;
        float:left;
        margin-left:12px;
        width:70%;
    }

    .widget .chat-msg-list .conversation-text i {
        white-space: normal;
    }

    .widget .chat-msg-list .msg-text {
        padding:10px;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        border-radius:3px;
        position:relative;
        display:inline-block;
    }
    .widget .chat-msg-list .msg-text p {
        margin:0px;
        padding-top:3px;
    }
    .widget .chat-msg-list .msg-text:after {
        right:100%;
        top:20%;
        border:solid transparent;
        content:" ";
        height:0;
        width:0;
        position:absolute;
        pointer-events:none;
        border-color:rgba(213,242,239,0);
        border-right-color:#E4E4E4;
        border-width:5px;
        margin-top:-5px;
    }
    .widget .chat-msg-list .odd .chat-avatar {
        float:right !important;
    }
    .widget .chat-msg-list .odd .conversation-text {
        width:70% !important;
        margin-right:12px;
        text-align: right;
        float:right !important;
    }

    .widget .chat-msg-list .even .msg-text {
        border: 1px solid #E4E4E4;
        background-color: #E4E4E4;
        color: gray;
    }

    .widget .chat-msg-list .odd .msg-text {
        border: 1px solid #ddd;
    }
    .widget .chat-msg-list .odd .msg-text i {
        color:#acacac;
    }
    .widget .chat-msg-list .odd .msg-text:after {
        left:100% !important;
        top:20% !important;
        border-color:rgba(238,238,242,0)!important;
        border-left-color:#ddd !important;
    }
    .widget .chat-send {
        padding-left:0px;
    }
    .widget .chat-send button {
        width:  100%;
    }

    .widget .send-msg {
        margin-left: -1px;
    }

    .widget .chat-conversation-action {
        margin-top: -10px;
        background-color: #E4E4E4;
    } 



    /*** Widget Server Load ***/
    .widget .server-load {
        margin-top: -10px
    }


    /*** Widget Todo Lists ***/
    .widget .todo-list {
        overflow: hidden;
        margin: -20px;
    }

    .widget .todo-list ul {
      list-style: none;
      margin: 0;
      padding: 0;
      height: 350px;
    }

    .widget .todo-list ul li {
        background: #fff;
        color: #666;
        cursor: move;
    }

    .widget .todo-list ul li .todo-actions {
        background: #ddd;
        color: #fff;
        text-align: center;
        width: 80px;
        margin-left: -80px;
        -webkit-transition: 0.5s ease-in-out;
        -moz-transition: 0.5s ease-in-out;
        -ms-transition: 0.5s ease-in-out;
        -o-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
    }

    .widget .todo-list ul li:nth-child(2n) { background: #f7f7f7; }

    .widget .todo-list ul li:hover .todo-actions {
      margin-left: 0px;
    }

    .widget .todo-list ul li .todo-title {
        padding: 10px;
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -ms-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }

    .widget .todo-list ul li:hover .todo-title {
        margin-left: 0px;
        padding-left: 10px;
    }

    .widget .todo-list .strike {
        text-decoration: line-through;
    }

    .widget .wrapper-actions {
        cursor: pointer;
    }

    .widget .wrapper-actions div:first-child:hover span:before{
        display: none;
    }

    .widget .wrapper-actions div:first-child:hover span:after{
        font-family: "FontAwesome";
        content: "\f046";
    }

    .widget .btn-todo-add {
        position: absolute;
        right: 33px;
        top: 29px;
        cursor: pointer;
    }

    .widget .btn-todo-add:hover {
        color: #ddd;
    }

    .widget .ui-state-highlight { 
        height: 40px; 
        line-height: 1.2em; 
        border: 2px dotted #ddd;
    }


    /**Related Post**/
    .widget .widget-content .related-posts {
        height: 350px;
        padding: 20px 20px;
    }

    .widget .widget-content .related-posts li:first-child {
        margin-top: 10px;
    }

    .widget .widget-content .related-posts li p:last-child {
        line-height:1px; 
        margin-top:-3px;
    }

    .widget .widget-content .related-posts li:not(:last-child) {
        border-bottom: 1px solid #eee;
        border-bottom: 10px;
    }

    .widget .widget-content .related-posts li:not(:first-child) {
        margin-top: 5px;
    }

    /**Posts**/
    .widget .widget-content .nav-tabs.nav-justified>li>a {
        background-color: #ddd;
    } 

    .widget .widget-content .nav-tabs.nav-justified>li>a:hover {
        background-color: #ddd;
    }

    .widget .widget-content .nav-tabs>li>a:hover {
        border-color: transparent;
    }

    .widget .widget-content .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        background-color: #fff;
        border-top: 1px solid #ddd;
    }

    .widget .widget-content .posts {
        height: 350px;
        padding: 20px 20px;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }

    .widget .widget-content .posts li:first-child {
        margin-top: 10px;
    }

    .widget .widget-content .posts li p:last-child {
        line-height:1px; 
        margin-top:-3px;
    }

    .widget .widget-content .posts li:not(:last-child) {
        border-bottom: 1px solid #eee;
    }

    .widget .widget-content .posts li:not(:first-child) {
        margin-top: 5px;
    }
    

  
/* ============================================================
CHARTJS SECTION
============================================================ */
    .chartjs-graph-width {
        width: 100% !important;
        height: 100% !important;
    }



/* ============================================================
FLOT CHART SECTION
============================================================ */
    .chart-widget {
        display: block;
        height: 380px;
        position: relative;
    }
    .chart-widget-content {
        width: 100%;
        height: 100%;
    }



/* ============================================================
VIDEOJS SECTION
============================================================ */
    .vjs-default-skin {
      color: #888888;
    }
    /* Custom Icon Font
    --------------------------------------------------------------------------------
    The control icons are from a custom font. Each icon corresponds to a character
    (e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
    */
    @font-face {
      font-family: 'VideoJS';
      src: url('../fonts/vjs/vjs.eot');
      src: url('../fonts/vjsfont/vjs.eot?#iefix') format('embedded-opentype'), 
           url('../fonts/vjs/vjs.woff') format('woff'), 
           url('../fonts/vjs/vjs.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    /* Base UI Component Classes
    -------------------------------------------------------------------------------- 
    */
    /* Slider - used for Volume bar and Seek bar */
    .vjs-default-skin .vjs-slider {
      /* Replace browser focus hightlight with handle highlight */
      outline: 0;
      position: relative;
      cursor: pointer;
      padding: 0;
      /* background-color-with-alpha */
      background-color: #333333;
      background-color: rgba(51, 51, 51, 0.9);
    }
    .vjs-default-skin .vjs-slider:focus {
      /* box-shadow */
      -webkit-box-shadow: 0 0 2em #ffffff;
      -moz-box-shadow: 0 0 2em #ffffff;
      box-shadow: 0 0 2em #ffffff;
    }
    .vjs-default-skin .vjs-slider-handle {
      position: absolute;
      /* Needed for IE6 */
      left: 0;
      top: 0;
    }
    .vjs-default-skin .vjs-slider-handle:before {
      content: "\e009";
      font-family: VideoJS;
      font-size: 1em;
      line-height: 1;
      text-align: center;
      text-shadow: 0em 0em 1em #fff;
      position: absolute;
      top: 0;
      left: 0;
      /* Rotate the square icon to make a diamond */
      /* transform */
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      color: #fff;
    }
    /* Control Bar
    --------------------------------------------------------------------------------
    The default control bar that is a container for most of the controls. 
    */
    .vjs-default-skin .vjs-control-bar {
      /* Start hidden */
      display: none;
      position: absolute;
      /* Place control bar at the bottom of the player box/video. 
         If you want more margin below the control bar, add more height. */
      bottom: 0;
      /* Use left/right to stretch to 100% width of player div */
      left: 0;
      right: 0;
      /* Height includes any margin you want above or below control items */
      height: 3.0em;
      /* background-color-with-alpha */
      background-color: #333333;
      background-color: rgba(51, 51, 51, 0.7);
    }
    /* General styles for individual controls. */
    .vjs-default-skin .vjs-control {
      outline: none;
      position: relative;
      float: left;
      text-align: center;
      margin: 0;
      padding: 0;
      height: 3.0em;
      width: 4em;
    }
    /* FontAwsome button icons */
    .vjs-default-skin .vjs-control:before {
      font-family: VideoJS;
      font-size: 1.5em;
      line-height: 2;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    }
    /* Replacement for focus outline */
    .vjs-default-skin .vjs-control:focus:before,
    .vjs-default-skin .vjs-control:hover:before {
      color: #fff;
      text-shadow: 0em 0em 1em #ffffff;
    }
    .vjs-default-skin .vjs-control:focus {
      /*  outline: 0; */
      /* keyboard-only users cannot see the focus on several of the UI elements when
      this is set to 0 */
    }
    /* Hide control text visually, but have it available for screenreaders */
    .vjs-default-skin .vjs-control-text {
      /* hide-visually */
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
    /* Play/Pause
    --------------------------------------------------------------------------------
    */
    .vjs-default-skin .vjs-play-control {
      width: 5em;
      cursor: pointer;
    }
    .vjs-default-skin .vjs-play-control:before {
      content: "\e001";
    }
    .vjs-default-skin.vjs-playing .vjs-play-control:before {
      content: "\e002";
    }
    /* Volume/Mute
    -------------------------------------------------------------------------------- */
    .vjs-default-skin .vjs-mute-control,
    .vjs-default-skin .vjs-volume-menu-button {
      cursor: pointer;
      float: right;
    }
    .vjs-default-skin .vjs-mute-control:before,
    .vjs-default-skin .vjs-volume-menu-button:before {
      content: "\e006";
    }
    .vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
    .vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
      content: "\e003";
    }
    .vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
    .vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
      content: "\e004";
    }
    .vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
    .vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
      content: "\e005";
    }
    .vjs-default-skin .vjs-volume-control {
      width: 5em;
      float: right;
    }
    .vjs-default-skin .vjs-volume-bar {
      width: 5em;
      height: 0.6em;
      margin: 1.1em auto 0;
    }
    .vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
      height: 2.9em;
    }
    .vjs-default-skin .vjs-volume-level {
      position: absolute;
      top: 0;
      left: 0;
      height: 0.5em;
      background: #b40c1e url() -50% 0 repeat;
    }
    .vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
      width: 0.5em;
      height: 0.5em;
    }
    .vjs-default-skin .vjs-volume-handle:before {
      font-size: 0.9em;
      top: -0.2em;
      left: -0.2em;
      width: 1em;
      height: 1em;
    }
    .vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
      width: 6em;
      left: -4em;
    }
    /* Progress
    --------------------------------------------------------------------------------
    */
    .vjs-default-skin .vjs-progress-control {
      position: absolute;
      left: 0;
      right: 0;
      width: auto;
      font-size: 0.3em;
      height: 1em;
      /* Set above the rest of the controls. */
      top: -1em;
      /* Shrink the bar slower than it grows. */
      /* transition */
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
    }
    /* On hover, make the progress bar grow to something that's more clickable.
        This simply changes the overall font for the progress bar, and this
        updates both the em-based widths and heights, as wells as the icon font */
    .vjs-default-skin:hover .vjs-progress-control {
      font-size: .9em;
      /* Even though we're not changing the top/height, we need to include them in
          the transition so they're handled correctly. */
      /* transition */
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
    }
    /* Box containing play and load progresses. Also acts as seek scrubber. */
    .vjs-default-skin .vjs-progress-holder {
      height: 100%;
    }
    /* Progress Bars */
    .vjs-default-skin .vjs-progress-holder .vjs-play-progress,
    .vjs-default-skin .vjs-progress-holder .vjs-load-progress {
      position: absolute;
      display: block;
      height: 100%;
      margin: 0;
      padding: 0;
      /* Needed for IE6 */
      left: 0;
      top: 0;
    }
    .vjs-default-skin .vjs-play-progress {
      /*
        Using a data URI to create the white diagonal lines with a transparent
          background. Surprisingly works in IE8.
          Created using http://www.patternify.com
        Changing the first color value will change the bar color.
        Also using a paralax effect to make the lines move backwards.
          The -50% left position makes that happen.
      */
      background: #b40c1e url() -50% 0 repeat;
    }
    .vjs-default-skin .vjs-load-progress {
      background: #757575;
    }
    .vjs-default-skin .vjs-seek-handle {
      width: 1.5em;
      height: 100%;
    }
    .vjs-default-skin .vjs-seek-handle:before {
      padding-top: 0.1em /* Minor adjustment */;
    }
    /* Time Display
    --------------------------------------------------------------------------------
    */
    .vjs-default-skin .vjs-time-controls {
      font-size: 1em;
      /* Align vertically by making the line height the same as the control bar */
      line-height: 3em;
    }
    .vjs-default-skin .vjs-current-time {
      float: left;
    }
    .vjs-default-skin .vjs-duration {
      float: left;
    }
    /* Remaining time is in the HTML, but not included in default design */
    .vjs-default-skin .vjs-remaining-time {
      display: none;
      float: left;
    }
    .vjs-time-divider {
      float: left;
      line-height: 3em;
    }
    /* Fullscreen
    --------------------------------------------------------------------------------
    */
    .vjs-default-skin .vjs-fullscreen-control {
      width: 3.8em;
      cursor: pointer;
      float: right;
    }
    .vjs-default-skin .vjs-fullscreen-control:before {
      content: "\e000";
    }
    /* Switch to the exit icon when the player is in fullscreen */
    .vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
      content: "\e00b";
    }
    /* Big Play Button (play button at start)
    --------------------------------------------------------------------------------
    Positioning of the play button in the center or other corners can be done more 
    easily in the skin designer. http://designer.videojs.com/
    */
    .vjs-default-skin .vjs-big-play-button {
      /* Center it horizontally */
      left: 50%;
      margin-left: -1em;
      /* Center it vertically */
      top: 50%;
      margin-top: -0.6em;
      font-size: 5em;
      color: #fff;
      display: block;
      z-index: 2;
      position: absolute;
      width: 2em;
      height: 1.2em;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      opacity: 1;
      /* Need a slightly gray bg so it can be seen on black backgrounds */
      /* background-color-with-alpha */
      background-color: #b40c1e;
      border: 0em solid #3b4249;
      /* border-radius */
      -webkit-border-radius: 0.3em;
      -moz-border-radius: 0.3em;
      border-radius: 0.3em;
      /* box-shadow */
      -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
      -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
      box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
      /* transition */
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
    }
    .vjs-default-skin:hover .vjs-big-play-button,
    .vjs-default-skin .vjs-big-play-button:focus {
      outline: 0;
      border-color: #fff;
      /* IE8 needs a non-glow hover state */
      background-color: #505050;
      background-color: rgba(50, 50, 50, 0.75);
      /* box-shadow */
      -webkit-box-shadow: 0 0 3em #ffffff;
      -moz-box-shadow: 0 0 3em #ffffff;
      box-shadow: 0 0 3em #ffffff;
      /* transition */
      -webkit-transition: all 0s;
      -moz-transition: all 0s;
      -o-transition: all 0s;
      transition: all 0s;
    }
    .vjs-default-skin .vjs-big-play-button:before {
      content: "\e001";
      font-family: VideoJS;
      /* In order to center the play icon vertically we need to set the line height
         to the same as the button height */
      line-height: 1.2em;
      text-shadow: none;
      text-align: center /* Needed for IE8 */;
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
    }
    /* Loading Spinner
    --------------------------------------------------------------------------------
    */
    .vjs-loading-spinner {
      display: none;
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 5em;
      line-height: 1;
      width: 1em;
      height: 1em;
      margin-left: -0.5em;
      margin-top: -0.5em;
      opacity: 0.75;
      /* animation */
      -webkit-animation: spin 1.5s infinite linear;
      -moz-animation: spin 1.5s infinite linear;
      -o-animation: spin 1.5s infinite linear;
      animation: spin 1.5s infinite linear;
    }
    .vjs-default-skin .vjs-loading-spinner:before {
      content: "\e00a";
      font-family: VideoJS;
      position: absolute;
      width: 1em;
      height: 1em;
      text-align: center;
      text-shadow: 0em 0em 0.1em #000;
    }
    /* Add a gradient to the spinner by overlaying another copy.
       Text gradient plus a text shadow doesn't work
       and `background-clip: text` only works in Webkit. */
    .vjs-default-skin .vjs-loading-spinner:after {
      content: "\e00a";
      /* Loading spinner icon */
      font-family: VideoJS;
      position: absolute;
      width: 1em;
      height: 1em;
      text-align: center;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    @-moz-keyframes spin {
      0% {
        -moz-transform: rotate(0deg);
      }
      100% {
        -moz-transform: rotate(359deg);
      }
    }
    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(359deg);
      }
    }
    @-o-keyframes spin {
      0% {
        -o-transform: rotate(0deg);
      }
      100% {
        -o-transform: rotate(359deg);
      }
    }
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(359deg);
      }
    }
    /* Menu Buttons (Captions/Subtitles/etc.)
    --------------------------------------------------------------------------------
    */
    .vjs-default-skin .vjs-menu-button {
      float: right;
      cursor: pointer;
    }
    .vjs-default-skin .vjs-menu {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0em;
      /* (Width of vjs-menu - width of button) / 2 */
      width: 0em;
      height: 0em;
      margin-bottom: 3em;
      border-left: 2em solid transparent;
      border-right: 2em solid transparent;
      border-top: 1.55em solid #000000;
      /* Same width top as ul bottom */
      border-top-color: rgba(7, 40, 50, 0.5);
      /* Same as ul background */
    }
    /* Button Pop-up Menu */
    .vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
      display: block;
      padding: 0;
      margin: 0;
      position: absolute;
      width: 10em;
      bottom: 1.5em;
      /* Same bottom as vjs-menu border-top */
      max-height: 15em;
      overflow: auto;
      left: -5em;
      /* Width of menu - width of button / 2 */
      /* background-color-with-alpha */
      background-color: #333333;
      background-color: rgba(51, 51, 51, 0.7);
      /* box-shadow */
      -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
      -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
      box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
    }
    .vjs-default-skin .vjs-menu-button:hover .vjs-menu {
      display: block;
    }
    .vjs-default-skin .vjs-menu-button ul li {
      list-style: none;
      margin: 0;
      padding: 0.3em 0 0.3em 0;
      line-height: 1.4em;
      font-size: 1.2em;
      text-align: center;
      text-transform: lowercase;
    }
    .vjs-default-skin .vjs-menu-button ul li.vjs-selected {
      background-color: #000;
    }
    .vjs-default-skin .vjs-menu-button ul li:focus,
    .vjs-default-skin .vjs-menu-button ul li:hover,
    .vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
    .vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
      outline: 0;
      color: #111;
      /* background-color-with-alpha */
      background-color: #ffffff;
      background-color: rgba(255, 255, 255, 0.75);
      /* box-shadow */
      -webkit-box-shadow: 0 0 1em #ffffff;
      -moz-box-shadow: 0 0 1em #ffffff;
      box-shadow: 0 0 1em #ffffff;
    }
    .vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
      text-align: center;
      text-transform: uppercase;
      font-size: 1em;
      line-height: 2em;
      padding: 0;
      margin: 0 0 0.3em 0;
      font-weight: bold;
      cursor: default;
    }
    /* Subtitles Button */
    .vjs-default-skin .vjs-subtitles-button:before {
      content: "\e00c";
    }
    /* Captions Button */
    .vjs-default-skin .vjs-captions-button:before {
      content: "\e008";
    }
    /* Replacement for focus outline */
    .vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
    .vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
      /* box-shadow */
      -webkit-box-shadow: 0 0 1em #ffffff;
      -moz-box-shadow: 0 0 1em #ffffff;
      box-shadow: 0 0 1em #ffffff;
    }
    /*
    REQUIRED STYLES (be careful overriding)
    ================================================================================
    When loading the player, the video tag is replaced with a DIV,
    that will hold the video tag or object tag for other playback methods.
    The div contains the video playback element (Flash or HTML5) and controls, 
    and sets the width and height of the video.

    ** If you want to add some kind of border/padding (e.g. a frame), or special 
    positioning, use another containing element. Otherwise you risk messing up 
    control positioning and full window mode. **
    */
    .video-js {
      background-color: #000;
      position: relative;
      padding: 0;
      /* Start with 10px for base font size so other dimensions can be em based and 
         easily calculable. */
      font-size: 10px;
      /* Allow poster to be vertially aligned. */
      vertical-align: middle;
      /*  display: table-cell; */
      /*This works in Safari but not Firefox.*/
      /* Provide some basic defaults for fonts */
      font-weight: normal;
      font-style: normal;
      /* Avoiding helvetica: issue #376 */
      font-family: Arial, sans-serif;
      /* Turn off user selection (text highlighting) by default.
         The majority of player components will not be text blocks.
         Text areas will need to turn user selection back on. */
      /* user-select */
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    /* Playback technology elements expand to the width/height of the containing div
        <video> or <object> */
    .video-js .vjs-tech {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    /* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when 
       checking fullScreenEnabled. */
    .video-js:-moz-full-screen {
      position: absolute;
    }
    /* Fullscreen Styles */
    body.vjs-full-window {
      padding: 0;
      margin: 0;
      height: 100%;
      /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
      overflow-y: auto;
    }
    .video-js.vjs-fullscreen {
      position: fixed;
      overflow: hidden;
      z-index: 1000;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      width: 100% !important;
      height: 100% !important;
      /* IE6 full-window (underscore hack) */
      _position: absolute;
    }
    .video-js:-webkit-full-screen {
      width: 100% !important;
      height: 100% !important;
    }
    /* Poster Styles */
    .vjs-poster {
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      cursor: pointer;
      height: 100%;
      margin: 0;
      padding: 0;
      position: relative;
      width: 100%;
    }
    .vjs-poster img {
      display: block;
      margin: 0 auto;
      max-height: 100%;
      padding: 0;
      width: 100%;
    }
    /* Text Track Styles */
    /* Overall track holder for both captions and subtitles */
    .video-js .vjs-text-track-display {
      text-align: center;
      position: absolute;
      bottom: 4em;
      /* Leave padding on left and right */
      left: 1em;
      right: 1em;
    }
    /* Individual tracks */
    .video-js .vjs-text-track {
      display: none;
      font-size: 1.4em;
      text-align: center;
      margin-bottom: 0.1em;
      /* Transparent black background, or fallback to all black (oldIE) */
      /* background-color-with-alpha */
      background-color: #000000;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .video-js .vjs-subtitles {
      color: #ffffff /* Subtitles are white */;
    }
    .video-js .vjs-captions {
      color: #ffcc66 /* Captions are yellow */;
    }
    .vjs-tt-cue {
      display: block;
    }
    /* Fading sytles, used to fade control bar. */
    .vjs-fade-in {
      display: block !important;
      /* Visibility needed to make sure things hide in older browsers too. */
      visibility: visible;
      opacity: 1;
      /* transition */
      -webkit-transition: visibility 0.1s, opacity 0.1s;
      -moz-transition: visibility 0.1s, opacity 0.1s;
      -o-transition: visibility 0.1s, opacity 0.1s;
      transition: visibility 0.1s, opacity 0.1s;
    }
    .vjs-fade-out {
      display: block !important;
      visibility: hidden;
      opacity: 0;
      /* transition */
      -webkit-transition: visibility 1.5s, opacity 1.5s;
      -moz-transition: visibility 1.5s, opacity 1.5s;
      -o-transition: visibility 1.5s, opacity 1.5s;
      transition: visibility 1.5s, opacity 1.5s;
      /* Wait a moment before fading out the control bar */
      /* transition-delay */
      -webkit-transition-delay: 2s;
      -moz-transition-delay: 2s;
      -o-transition-delay: 2s;
      transition-delay: 2s;
    }
    /* Hide disabled or unsupported controls */
    .vjs-default-skin .vjs-hidden {
      display: none;
    }
    .vjs-lock-showing {
      display: block !important;
      opacity: 1;
      visibility: visible;
    }





/* ============================================================
RICKSAW SECTION
============================================================ */
    #ricksaw_yaxis {
        position: relative;
        left: 40px;
    }
    #y_axis {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 40px;
    }




/* ============================================================
HOVER CSS SECTION
============================================================ */
    .hovercss-transition [class^="hvr-"] {
        /*display: inline-block;*/
        /*vertical-align: middle;*/
        margin: .4em;
        padding: 1em;
        cursor: pointer;
        background: #e1e1e1;
        text-decoration: none;
        color: #666;
        /* Prevent highlight colour when element is tapped */
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }


/* ============================================================
TOOLTIPSTER SECTION
============================================================ */
    .page-tooltipster ul {
        display: block;
        width: 100%;
        font-size: 1.4em;
        line-height: 1.4em;
    }

    .page-tooltipster li {
        display: block;
        width: 50%;
        font-weight: 400;
        margin-bottom: 1em;
        overflow: hidden;
        padding-top: 1.4em;
        padding-right: 2em;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        float: left;
    }

    .page-tooltipster span {
        display: block;
        border: 3px solid #B1ACAB;
        border-radius: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        width: 5em;
        height: 5em;
        background: #B1ACAB;
        color: #fff;
        font-size: 0.6em;
        line-height: 1em;
        font-weight: 700;
        padding: 1.8em 0 0 0;
        text-align: center;
        margin: -1.4em 1em 0 0;
        text-transform: uppercase;
        float: left;
    }

    .page-tooltipster span:hover {
        background: #fff !important;
        color: #5d6365;
        border: 3px solid #5d6365 !important;
        cursor: pointer;
    }

    .page-tooltipster span.tooltipster-icon {
        cursor: help;
        margin-left: 4px;
        background: #0078c9;
        border: 3px solid #0078c9;
        width: 2.3em;
        height: 2.3em;
        padding: 0.4em 0 0;
        margin: 2em 0 0 -3em;
    }

    .page-tooltipster .tooltipster-default .tooltipster-content {
        font-family: 'Open Sans', sans-serif;
    }
    .page-tooltipster .tooltipster-default .tooltipster-content img {
        float: left;
        margin-right: 10px;
        border: 2px solid #000;
    }
    .page-tooltipster .tooltipster-default .tooltipster-content p {
        margin: 0;
    }
    .page-tooltipster .tooltipster-default .tooltipster-content a {
        color: #fff;
        border-bottom: 1px solid rgba(255,255,255,0.4);
    }
    .page-tooltipster .tooltipster-default .tooltipster-content a:hover {
        color: #fff;
        border-bottom: 1px solid rgba(255,255,255,1);
    }

    .page-tooltipster .tooltipster-blue {
        background: #0078c9;
        color: #fff;
        border-radius: 5px;
    }
    .page-tooltipster .tooltipster-blue .tooltipster-content {
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        line-height: 16px;
        padding: 8px 10px;
    }

    .page-tooltipster .tooltipster-white {
        background: #fff;
        color: #0078c9;
        border-radius: 5px; 
    }
    .page-tooltipster .tooltipster-white .tooltipster-content {
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        line-height: 16px;
        padding: 8px 10px;
    }

    .page-tooltipster .tooltipster-pink {
        background-color: #ff3c70;
        color: #fff; 
        border-radius: 5px; 
        box-shadow: inset -3px -3px 0 #ff3c70;
    }
    .page-tooltipster .tooltipster-pink .tooltipster-content {
        font-family: 'Courier', monospace;
        font-weight: 400;
        font-size: 16px;
        line-height: 16px;
        padding: 15px 18px;
    }





/* ============================================================
HOVER IDEAS SECTION
============================================================ */
    /* Common style */
    .hover-ideas figure {
        position: relative;
        float: left;
        overflow: hidden;
        margin: 10px 1%;/*
        min-width: 320px;
        max-width: 480px;
        max-height: 360px;
        width: 48%;
        background: #3085a3;*/
        text-align: center;
        cursor: pointer;
    }

    .hover-ideas figure img {
        position: relative;
        display: block;
        min-height: 100%;
        max-width: 100%;
        opacity: 0.8;
    }

    .hover-ideas figure figcaption {
        padding: 2em;
        color: #fff;
        text-transform: uppercase;
        font-size: 1.25em;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .hover-ideas figure figcaption h2 {
        color: #fff;
    }

    .hover-ideas figure figcaption::before,
    .hover-ideas figure figcaption::after {
        pointer-events: none;
    }

    .hover-ideas figure figcaption,
    .hover-ideas figure figcaption > a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Anchor will cover the whole item by default */
    /* For some effects it will show as a button */
    .hover-ideas figure figcaption > a {
        z-index: 1000;
        text-indent: 200%;
        white-space: nowrap;
        font-size: 0;
        opacity: 0;
    }

    .hover-ideas figure h2 {
        word-spacing: -0.15em;
        font-weight: 300;
    }

    .hover-ideas figure h2 span {
        font-weight: 800;
    }

    .hover-ideas figure h2,
    .hover-ideas figure p {
        margin: 0;
    }

    .hover-ideas figure p {
        letter-spacing: 1px;
        font-size: 68.5%;
    }


    /* Individual effects */

    /*---------------*/
    /***** Lily *****/
    /*---------------*/

    .hover-ideas figure.effect-lily img {
        max-width: none;
        width: -webkit-calc(100% + 50px);
        width: calc( + 50px);
        opacity: 0.7;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-40px,0, 0);
        transform: translate3d(-40px,0,0);
    }

    .hover-ideas figure.effect-lily figcaption {
        text-align: left;
    }

    .hover-ideas figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 2em;
        width: 100%;
        height: 50%;
    }

    .hover-ideas figure.effect-lily h2,
    .hover-ideas figure.effect-lily p {
        -webkit-transform: translate3d(0,40px,0);
        transform: translate3d(0,40px,0);
    }

    .hover-ideas figure.effect-lily h2 {
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
    }

    .hover-ideas figure.effect-lily p {
        color: rgba(255,255,255,0.8);
        opacity: 0;
        -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
        transition: opacity 0.2s, transform 0.35s;
    }

    .hover-ideas figure.effect-lily:hover img,
    .hover-ideas figure.effect-lily:hover p {
        opacity: 1;
    }

    .hover-ideas figure.effect-lily:hover img,
    .hover-ideas figure.effect-lily:hover h2,
    .hover-ideas figure.effect-lily:hover p {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .hover-ideas figure.effect-lily:hover p {
        -webkit-transition-delay: 0.05s;
        transition-delay: 0.05s;
        -webkit-transition-duration: 0.35s;
        transition-duration: 0.35s;
    }


    /*---------------*/
    /***** Sadie *****/
    /*---------------*/

    .hover-ideas figure.effect-sadie figcaption::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
        background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
        content: '';
        opacity: 0;
        -webkit-transform: translate3d(0,50%,0);
        transform: translate3d(0,50%,0);
    }

    .hover-ideas figure.effect-sadie h2 {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        color: #fff;
        -webkit-transition: -webkit-transform 0.35s, color 0.35s;
        transition: transform 0.35s, color 0.35s;
        -webkit-transform: translate3d(0,-50%,0);
        transform: translate3d(0,-50%,0);
    }

    .hover-ideas figure.effect-sadie figcaption::before,
    .hover-ideas figure.effect-sadie p {
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
    }

    .hover-ideas figure.effect-sadie p {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 2em;
        width: 100%;
        opacity: 0;
        -webkit-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0);
    }

    .hover-ideas figure.effect-sadie:hover h2 {
        color: #fff;
        -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
        transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
    }

    .hover-ideas figure.effect-sadie:hover figcaption::before ,
    .hover-ideas figure.effect-sadie:hover p {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }


    /*---------------*/
    /***** Roxy *****/
    /*---------------*/

    .hover-ideas figure.effect-roxy {
        background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
        background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
    }

    .hover-ideas figure.effect-roxy img {
        max-width: none;
        width: -webkit-calc(100% + 60px);
        width: calc(100% + 60px);
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-50px,0,0);
        transform: translate3d(-50px,0,0);
    }

    .hover-ideas figure.effect-roxy figcaption::before {
        position: absolute;
        top: 30px;
        right: 30px;
        bottom: 30px;
        left: 30px;
        border: 1px solid #fff;
        content: '';
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-20px,0,0);
        transform: translate3d(-20px,0,0);
    }

    .hover-ideas figure.effect-roxy figcaption {
        padding: 3em;
        text-align: left;
    }

    .hover-ideas figure.effect-roxy h2 {
        padding: 30% 0 10px 0;
    }

    .hover-ideas figure.effect-roxy p {
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0);
    }

    .hover-ideas figure.effect-roxy:hover img {
        opacity: 0.7;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .hover-ideas figure.effect-roxy:hover figcaption::before,
    .hover-ideas figure.effect-roxy:hover p {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    /*---------------*/
    /***** Bubba *****/
    /*---------------*/

    .hover-ideas figure.effect-bubba {
        background: #9e5406;
    }

    .hover-ideas figure.effect-bubba img {
        opacity: 0.7;
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s;
    }

    .hover-ideas figure.effect-bubba:hover img {
        opacity: 0.4;
    }

    .hover-ideas figure.effect-bubba figcaption::before,
    .hover-ideas figure.effect-bubba figcaption::after {
        position: absolute;
        top: 30px;
        right: 30px;
        bottom: 30px;
        left: 30px;
        content: '';
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
    }

    .hover-ideas figure.effect-bubba figcaption::before {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        -webkit-transform: scale(0,1);
        transform: scale(0,1);
    }

    .hover-ideas figure.effect-bubba figcaption::after {
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
        -webkit-transform: scale(1,0);
        transform: scale(1,0);
    }

    .hover-ideas figure.effect-bubba h2 {
        padding-top: 30%;
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,-20px,0);
    }

    .hover-ideas figure.effect-bubba p {
        padding: 20px 2.5em;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px,0);
    }

    .hover-ideas figure.effect-bubba:hover figcaption::before,
    .hover-ideas figure.effect-bubba:hover figcaption::after {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    .hover-ideas figure.effect-bubba:hover h2,
    .hover-ideas figure.effect-bubba:hover p {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    /*---------------*/
    /***** Romeo *****/
    /*---------------*/

    .hover-ideas figure.effect-romeo {
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }

    .hover-ideas figure.effect-romeo img {
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(0,0,300px);
        transform: translate3d(0,0,300px);
    }

    .hover-ideas figure.effect-romeo:hover img {
        opacity: 0.6;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .hover-ideas figure.effect-romeo figcaption::before,
    .hover-ideas figure.effect-romeo figcaption::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        height: 1px;
        background: #fff;
        content: '';
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-50%,-50%,0);
        transform: translate3d(-50%,-50%,0);
    }

    .hover-ideas figure.effect-romeo:hover figcaption::before {
        opacity: 0.5;
        -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
        transform: translate3d(-50%,-50%,0) rotate(45deg);
    }

    .hover-ideas figure.effect-romeo:hover figcaption::after {
        opacity: 0.5;
        -webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
        transform: translate3d(-50%,-50%,0) rotate(-45deg);
    }

    .hover-ideas figure.effect-romeo h2,
    .hover-ideas figure.effect-romeo p {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
    }

    .hover-ideas figure.effect-romeo h2 {
        -webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
        transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
    }

    .hover-ideas figure.effect-romeo p {
        padding: 0.25em 2em;
        -webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
        transform: translate3d(0,-50%,0) translate3d(0,150%,0);
    }

    .hover-ideas figure.effect-romeo:hover h2 {
        -webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
        transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
    }

    .hover-ideas figure.effect-romeo:hover p {
        -webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
        transform: translate3d(0,-50%,0) translate3d(0,100%,0);
    }

    /*---------------*/
    /***** Layla *****/
    /*---------------*/

    .hover-ideas figure.effect-layla {
        background: #18a367;
    }

    .hover-ideas figure.effect-layla img {
        height: 260px;
    }

    .hover-ideas figure.effect-layla figcaption {
        padding: 3em;
    }

    .hover-ideas figure.effect-layla figcaption::before,
    .hover-ideas figure.effect-layla figcaption::after {
        position: absolute;
        content: '';
        opacity: 0;
    }

    .hover-ideas figure.effect-layla figcaption::before {
        top: 50px;
        right: 30px;
        bottom: 50px;
        left: 30px;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        -webkit-transform: scale(0,1);
        transform: scale(0,1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .hover-ideas figure.effect-layla figcaption::after {
        top: 30px;
        right: 50px;
        bottom: 30px;
        left: 50px;
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
        -webkit-transform: scale(1,0);
        transform: scale(1,0);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0;
    }

    .hover-ideas figure.effect-layla h2 {
        padding-top: 26%;
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
    }

    .hover-ideas figure.effect-layla p {
        padding: 0.5em 2em;
        text-transform: none;
        opacity: 0;
        -webkit-transform: translate3d(0,-10px,0);
        transform: translate3d(0,-10px,0);
    }

    .hover-ideas figure.effect-layla img,
    .hover-ideas figure.effect-layla h2 {
        -webkit-transform: translate3d(0,-30px,0);
        transform: translate3d(0,-30px,0);
    }

    .hover-ideas figure.effect-layla img,
    .hover-ideas figure.effect-layla figcaption::before,
    .hover-ideas figure.effect-layla figcaption::after,
    .hover-ideas figure.effect-layla p {
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
    }

    .hover-ideas figure.effect-layla:hover img {
        opacity: 0.7;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .hover-ideas figure.effect-layla:hover figcaption::before,
    .hover-ideas figure.effect-layla:hover figcaption::after {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    .hover-ideas figure.effect-layla:hover h2,
    .hover-ideas figure.effect-layla:hover p {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .hover-ideas figure.effect-layla:hover figcaption::after,
    .hover-ideas figure.effect-layla:hover h2,
    .hover-ideas figure.effect-layla:hover p,
    .hover-ideas figure.effect-layla:hover img {
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
    }

    /*---------------*/
    /***** Honey *****/
    /*---------------*/

    .hover-ideas figure.effect-honey {
        background: #4a3753;
    }

    .hover-ideas figure.effect-honey img {
        opacity: 0.9;
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s;
    }

    .hover-ideas figure.effect-honey:hover img {
        opacity: 0.5;
    }

    .hover-ideas figure.effect-honey figcaption::before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 10px;
        background: #fff;
        content: '';
        -webkit-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0);
    }

    .hover-ideas figure.effect-honey h2 {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 1em 1.5em;
        width: 100%;
        text-align: left;
        -webkit-transform: translate3d(0,-30px,0);
        transform: translate3d(0,-30px,0);
    }

    .hover-ideas figure.effect-honey h2 i {
        font-style: normal;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(0,-30px,0);
        transform: translate3d(0,-30px,0);
    }

    .hover-ideas figure.effect-honey figcaption::before,
    .hover-ideas figure.effect-honey h2 {
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
    }

    .hover-ideas figure.effect-honey:hover figcaption::before,
    .hover-ideas figure.effect-honey:hover h2,
    .hover-ideas figure.effect-honey:hover h2 i {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    /*---------------*/
    /***** Oscar *****/
    /*---------------*/

    .hover-ideas figure.effect-oscar {
        background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
        background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
    }

    .hover-ideas figure.effect-oscar img {
        opacity: 0.9;
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s;
    }

    .hover-ideas figure.effect-oscar figcaption {
        padding: 3em;
        background-color: rgba(58,52,42,0.7);
        -webkit-transition: background-color 0.35s;
        transition: background-color 0.35s;
    }

    .hover-ideas figure.effect-oscar figcaption::before {
        position: absolute;
        top: 30px;
        right: 30px;
        bottom: 30px;
        left: 30px;
        border: 1px solid #fff;
        content: '';
    }

    .hover-ideas figure.effect-oscar h2 {
        margin: 20% 0 10px 0;
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }

    .hover-ideas figure.effect-oscar figcaption::before,
    .hover-ideas figure.effect-oscar p {
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    .hover-ideas figure.effect-oscar:hover h2 {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .hover-ideas figure.effect-oscar:hover figcaption::before,
    .hover-ideas figure.effect-oscar:hover p {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    .hover-ideas figure.effect-oscar:hover figcaption {
        background-color: rgba(58,52,42,0);
    }

    .hover-ideas figure.effect-oscar:hover img {
        opacity: 0.4;
    }

    /*---------------*/
    /***** Marley *****/
    /*---------------*/

    .hover-ideas figure.effect-marley figcaption {
        text-align: right;
    }

    .hover-ideas figure.effect-marley h2,
    .hover-ideas figure.effect-marley p {
        position: absolute;
        right: 30px;
        left: 30px;
        padding: 10px 0;
    }


    .hover-ideas figure.effect-marley p {
        bottom: 30px;
        line-height: 1.5;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }

    .hover-ideas figure.effect-marley h2 {
        top: 30px;
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px,0);
    }

    .hover-ideas figure.effect-marley:hover h2 {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .hover-ideas figure.effect-marley h2::after {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 4px;
        background: #fff;
        content: '';
        -webkit-transform: translate3d(0,40px,0);
        transform: translate3d(0,40px,0);
    }

    .hover-ideas figure.effect-marley h2::after,
    .hover-ideas figure.effect-marley p {
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
    }

    .hover-ideas figure.effect-marley:hover h2::after,
    .hover-ideas figure.effect-marley:hover p {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    /*---------------*/
    /***** Ruby *****/
    /*---------------*/

    .hover-ideas figure.effect-ruby {
        background-color: #17819c;
    }

    .hover-ideas figure.effect-ruby img {
        opacity: 0.7;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
    }

    .hover-ideas figure.effect-ruby:hover img {
        opacity: 0.5;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    .hover-ideas figure.effect-ruby h2 {
        margin-top: 20%;
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px,0);
    }

    .hover-ideas figure.effect-ruby p {
        margin: 1em 0 0;
        padding: 3em;
        border: 1px solid #fff;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(0,20px,0) scale(1.1);
        transform: translate3d(0,20px,0) scale(1.1);
    } 

    .hover-ideas figure.effect-ruby:hover h2 {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .hover-ideas figure.effect-ruby:hover p {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0) scale(1);
        transform: translate3d(0,0,0) scale(1);
    }

    /*---------------*/
    /***** Milo *****/
    /*---------------*/

    .hover-ideas figure.effect-milo {
        background: #2e5d5a;
    }

    .hover-ideas figure.effect-milo img {
        max-width: none;
        width: -webkit-calc(100% + 60px);
        width: calc(100% + 60px);
        opacity: 1;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-30px,0,0) scale(1.12);
        transform: translate3d(-30px,0,0) scale(1.12);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .hover-ideas figure.effect-milo:hover img {
        opacity: 0.5;
        -webkit-transform: translate3d(0,0,0) scale(1);
        transform: translate3d(0,0,0) scale(1);
    }

    .hover-ideas figure.effect-milo h2 {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 1em 1.2em;
    }

    .hover-ideas figure.effect-milo p {
        padding: 0 10px 0 0;
        width: 50%;
        border-right: 1px solid #fff;
        text-align: right;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-40px,0,0);
        transform: translate3d(-40px,0,0);
    }

    .hover-ideas figure.effect-milo:hover p {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    /*---------------*/
    /***** Dexter *****/
    /*---------------*/

    .hover-ideas figure.effect-dexter {
        background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
        background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%); 
    }

    .hover-ideas figure.effect-dexter img {
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s;
    }

    .hover-ideas figure.effect-dexter:hover img {
        opacity: 0.4;
    }

    .hover-ideas figure.effect-dexter figcaption::after {
        position: absolute;
        right: 30px;
        bottom: 30px;
        left: 30px;
        height: -webkit-calc(50% - 30px);
        height: calc(50% - 30px);
        border: 7px solid #fff;
        content: '';
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);
    }

    .hover-ideas figure.effect-dexter:hover figcaption::after {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .hover-ideas figure.effect-dexter figcaption {
        padding: 3em;
        text-align: left;
    }

    .hover-ideas figure.effect-dexter p {
        position: absolute;
        right: 60px;
        bottom: 60px;
        left: 60px;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(0,-100px,0);
        transform: translate3d(0,-100px,0);
    }

    .hover-ideas figure.effect-dexter:hover p {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    /*---------------*/
    /***** Sarah *****/
    /*---------------*/

    .hover-ideas figure.effect-sarah {
        background: #42b078;
    }

    .hover-ideas figure.effect-sarah img {
        max-width: none;
        width: -webkit-calc(100% + 20px);
        width: calc(100% + 20px);
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .hover-ideas figure.effect-sarah:hover img {
        opacity: 0.4;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .hover-ideas figure.effect-sarah figcaption {
        text-align: left;
    }

    .hover-ideas figure.effect-sarah h2 {
        position: relative;
        overflow: hidden;
        padding: 0.5em 0;
    }

    .hover-ideas figure.effect-sarah h2::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: #fff;
        content: '';
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0);
    }

    .hover-ideas figure.effect-sarah:hover h2::after {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .hover-ideas figure.effect-sarah p {
        padding: 1em 0;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
    }

    .hover-ideas figure.effect-sarah:hover p {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    /*---------------*/
    /***** Zoe *****/
    /*---------------*/

    .hover-ideas figure.effect-zoe figcaption {
        top: auto;
        bottom: 0;
        padding: 1em;
        height: 3.75em;
        background: #fff;
        color: #3c4a50;
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }

    .hover-ideas figure.effect-zoe h2 {
        float: left;
    }

    .hover-ideas figure.effect-zoe p.icon-links a {
        float: right;
        color: #3c4a50;
        font-size: 1.4em;
    }

    .hover-ideas figure.effect-zoe:hover p.icon-links a:hover,
    .hover-ideas figure.effect-zoe:hover p.icon-links a:focus {
        color: #252d31;
    }

    .hover-ideas figure.effect-zoe p.description {
        position: absolute;
        bottom: 8em;
        padding: 2em;
        color: #fff;
        text-transform: none;
        font-size: 90%;
        opacity: 0;
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s;
        -webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
    }

    .hover-ideas figure.effect-zoe h2,
    .hover-ideas figure.effect-zoe p.icon-links a {
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(0,200%,0);
        transform: translate3d(0,200%,0);
    }

    .hover-ideas figure.effect-zoe p.icon-links a span::before {
        display: inline-block;
        padding: 8px 10px;
        speak: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-eye::before {
        content: '\e000';
    }

    .icon-paper-clip::before {
        content: '\e001';
    }

    .icon-heart::before {
        content: '\e024';
    }

    .hover-ideas figure.effect-zoe h2 {
        display: inline-block;
    }

    .hover-ideas figure.effect-zoe:hover p.description {
        opacity: 1;
    }

    .hover-ideas figure.effect-zoe:hover figcaption,
    .hover-ideas figure.effect-zoe:hover h2,
    .hover-ideas figure.effect-zoe:hover p.icon-links a {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .hover-ideas figure.effect-zoe:hover h2 {
        -webkit-transition-delay: 0.05s;
        transition-delay: 0.05s;
    }

    .hover-ideas figure.effect-zoe:hover p.icon-links a:nth-child(3) {
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
    }

    .hover-ideas figure.effect-zoe:hover p.icon-links a:nth-child(2) {
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
    }

    .hover-ideas figure.effect-zoe:hover p.icon-links a:first-child {
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    /*---------------*/
    /***** Chico *****/
    /*---------------*/

    .hover-ideas figure.effect-chico img {
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: scale(1.12);
        transform: scale(1.12);
    }

    .hover-ideas figure.effect-chico:hover img {
        opacity: 0.5;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    .hover-ideas figure.effect-chico figcaption {
        padding: 3em;
    }

    .hover-ideas figure.effect-chico figcaption::before {
        position: absolute;
        top: 30px;
        right: 30px;
        bottom: 30px;
        left: 30px;
        border: 1px solid #fff;
        content: '';
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    .hover-ideas figure.effect-chico figcaption::before,
    .hover-ideas figure.effect-chico p {
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
    }

    .hover-ideas figure.effect-chico h2 {
        padding: 20% 0 20px 0;
    }

    .hover-ideas figure.effect-chico p {
        margin: 0 auto;
        max-width: 200px;
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }

    .hover-ideas figure.effect-chico:hover figcaption::before,
    .hover-ideas figure.effect-chico:hover p {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }


    /*---------------*/
    /***** Julia *****/
    /*---------------*/

    .hover-ideas figure.effect-julia {
        background: #2f3238;
    }

    .hover-ideas figure.effect-julia img {
        -webkit-transition: opacity 1s, -webkit-transform 1s;
        transition: opacity 1s, transform 1s;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .hover-ideas figure.effect-julia figcaption {
        text-align: left;
    }

    .hover-ideas figure.effect-julia h2 {
        position: relative;
        padding: 0.5em 0;
    }

    .hover-ideas figure.effect-julia p {
        display: inline-block;
        margin: 0 0 0.25em;
        padding: 0.4em 1em;
        background: rgba(255,255,255,0.9);
        color: #2f3238;
        text-transform: none;
        font-weight: 500;
        font-size: 75%;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-560px,0,0);
        transform: translate3d(-560px,0,0);
    }

    .hover-ideas figure.effect-julia p:first-child {
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
    }

    .hover-ideas figure.effect-julia p:nth-of-type(2) {
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
    }

    .hover-ideas figure.effect-julia p:nth-of-type(3) {
        -webkit-transition-delay: 0.05s;
        transition-delay: 0.05s;
    }

    .hover-ideas figure.effect-julia:hover p:first-child {
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .hover-ideas figure.effect-julia:hover p:nth-of-type(2) {
        -webkit-transition-delay: 0.05s;
        transition-delay: 0.05s;
    }

    .hover-ideas figure.effect-julia:hover p:nth-of-type(3) {
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
    }

    .hover-ideas figure.effect-julia:hover img {
        opacity: 0.4;
        -webkit-transform: scale3d(1.1,1.1,1);
        transform: scale3d(1.1,1.1,1);
    }

    .hover-ideas figure.effect-julia:hover p {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }




/* ============================================================
SWEETALERT SECTION
============================================================ */
    .page-swal dt {
        padding-top: 10px;
        padding-bottom: 10px;
    }



/* ============================================================
WOW ANIMATIONS SECTION
============================================================ */
    .page-wow .circle {
        border-radius: 100%;
        width: 150px;
        height: 150px;
    }



/* ============================================================
GMAP3 CLUSTER SECTION
============================================================ */
    .cluster{
        color: #FFFFFF;
        text-align:center;
        font-family: 'Arial, Helvetica';
        font-size:11px;
        font-weight:bold;
    }
    .cluster-1{
      background-image:url(../vendors/gmap3/images/m1.png);
      line-height:53px;
        width: 53px;
        height: 52px;
    }
    .cluster-2{
      background-image:url(../vendors/gmap3/images/m2.png);
      line-height:53px;
        width: 56px;
        height: 55px;
    }
    .cluster-3{
      background-image:url(../vendors/gmap3/images/m3.png);
      line-height:66px;
        width: 66px;
        height: 65px;
    }



/* ============================================================
ICON 7 STROKE SECTION
============================================================ */

    .icon-7stroke .font-icon-list {
      padding: 20px 0px 0px 0px;
      margin-bottom: 20px; }

    .icon-7stroke .font-icon-list:hover {
      cursor: pointer; }

    .icon-7stroke .font-icon-detail {
      text-align: center; }

    .icon-7stroke .font-icon-detail span:first-child {
      display: inline-block;
      transition: color 150ms linear, background 150ms linear, font-size 150ms linear, width 150ms;
      padding: 10px 0px;
      width: 70px;
      font-size: 48px;
      color: #1a1a1a;
      border: 1px solid #eaeaea;
      border-radius: 3px; }

    .icon-7stroke .font-icon-name {
      font-size: 13px;
      margin-top: 15px;
      display: block;
      text-align: center;
      width: 100%;
      padding: 0;
      background:transparent;
      border: 0; }

    .icon-7stroke .font-icon-name:focus, .font-icon-name:active {
      outline: none; }

    .icon-7stroke .font-icon-code {
      max-height: 0;
      overflow: hidden;
      text-align: center;
      opacity: 0;
      transition: max-height 200ms linear, opacity 200ms linear; }

    .icon-7stroke .font-icon-code.show {
      max-height: 200px;
      opacity: 1; }

    .icon-7stroke .code-value, .icon-7stroke .unicode, .icon-7stroke .unicode-text {
      background: none;
      text-align: center;
      border: none;
      color: #a0a0a0; }

    .icon-7stroke .code-value {
      display: block;
      width: 100%; }

    .icon-7stroke .unicode, .icon-7stroke .unicode-text {
      color: #a0a0a0; }

    .icon-7stroke .unicode {
      float: left;
      font-family: "Pe-icon-7-stroke";
      text-align: right;
      width: 38%;
      padding-right: 5px; }

    .icon-7stroke .unicode-text {
      text-align: left;
      float: left;
      display: inline-block;
      width: 100px;
      border: none; }

    .icon-7stroke .unicode-text:focus,
    .icon-7stroke .unicode-text:active {
      outline: none; }

    .icon-7stroke .font-icon-list:hover .font-icon-name,
    .icon-7stroke .font-icon-list:hover .code-value,
    .icon-7stroke .font-icon-list:hover .unicode,
    .icon-7stroke .font-icon-list:hover .unicode-text,
    .icon-7stroke .font-icon-detail.zeroclipboard-is-hover .font-icon-name,
    .icon-7stroke .font-icon-detail.zeroclipboard-is-hover + .font-icon-code .code-value,
    .icon-7stroke .font-icon-detail.zeroclipboard-is-hover + .font-icon-code .unicode,
    .icon-7stroke .font-icon-detail.zeroclipboard-is-hover + .font-icon-code .unicode-text {
      cursor: text;
      color: #1a1a1a; }

    .icon-7stroke .font-icon-list:hover .font-icon-detail span:first-child,
    .icon-7stroke .font-icon-detail.zeroclipboard-is-hover span:first-child {
      color: #fff;
      background: #1a1a1a; }

    .icon-7stroke .size16 .font-icon-detail span:first-child {
      width: 38px; }

    .icon-7stroke .size32 .font-icon-detail span:first-child {
      width: 54px; }

    .icon-7stroke .size64 .font-icon-detail span:first-child {
      width: 86px; }

    .icon-7stroke .size80 .font-icon-detail span:first-child {
      width: 102px; }

    .icon-7stroke .size96 .font-icon-detail span:first-child {
      width: 118px; }

    .icon-7stroke .size112 .font-icon-detail span:first-child {
      width: 134px; }

    .icon-7stroke .size128 .font-icon-detail span:first-child {
      width: 150px; }

    .icon-7stroke .font-icon-name::-moz-selection,
    .icon-7stroke .code-value::-moz-selection,
    .icon-7stroke .unicode::-moz-selection,
    .icon-7stroke .unicode-text::-moz-selection,
    .icon-7stroke .font-icon-name::-moz-selection {
      background: #aadce2;
      color: #1a1a1a; }

    .icon-7stroke .font-icon-name::selection,
    .icon-7stroke .code-value::selection,
    .icon-7stroke  .unicode::selection,
    .icon-7stroke .unicode-text::selection,
    .icon-7stroke .font-icon-name::selection {
      background: #aadce2;
      color: #1a1a1a; }

    .icon-7stroke .font-icon-name::-moz-selection,
    .icon-7stroke .code-value::-moz-selection,
    .icon-7stroke .unicode::-moz-selection,
    .icon-7stroke .unicode-text::-moz-selection,
    .icon-7stroke .font-icon-name::-moz-selection {
      background: #aadce2;
      color: #1a1a1a; }




/* ============================================================
SIMPLE LINE ICONS SECTION
============================================================ */
    .simple-line-icons .preview {
        padding: 15px 0;
        position: relative;
        height: 100px;
    }

    .simple-line-icons .icons {
        font-size: 18px;
        padding-right: 7px;
    }

    .simple-line-icons .name {
        font-size: 18px;
    }

    .simple-line-icons .show-code {
        color: #101010;
    }
    .simple-line-icons .mt {
        padding-top: 50px;
    }

    .simple-line-icons .show-code:hover, .show-code:active, .show-code:focus {
        color: #252525;
        text-decoration: none;
    }



    .bs-glyphicons {
        overflow: hidden;
        padding:10px;
    }
    .bs-glyphicons-list {
        padding-left: 0;
        list-style: none
    }
    .bs-glyphicons li {
        float: left;
        width: 25%;
        height: 115px;
        padding: 10px;
        font-size: 10px;
        line-height: 1.4;
        text-align: center;
        background-color: #fff;
        border: 1px solid #fff
    }
    .bs-glyphicons .glyphicon {
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 24px
    }
    .bs-glyphicons .glyphicon-class {
        display: block;
        text-align: center;
        word-wrap: break-word
    }

    @media (min-width: 768px) {
        .bs-glyphicons {
            margin-right: 0;
            margin-left: 0
        }
        .bs-glyphicons li {
            width: 12.5%;
            font-size: 12px
        }
    }



/* ============================================================
iCHECK SECTION
============================================================ */
    div[class^="icheck"] {
        position: static !important;
    }

    div[class^="icheck"] .error {
        position: absolute;
        width: 100% !important;
        left: 42px;
    }






/* ============================================================
THEME SIDEBAR 2 SECTION
============================================================ */
body.theme-sidebar-2 ul.sidebar-menu li ul.sub li {
    background:#3e313c;
}

body.theme-sidebar-2 ul.sidebar-menu li ul.sub li a {
    border-left: 1px solid #312630;
}

body.theme-sidebar-2 ul.sidebar-menu li ul.sub li a:before {
    border-bottom: 1px solid #312630;
}

body.theme-sidebar-2 ul.sidebar-menu li ul.sub li ul.sub li a:before {
    border-bottom: 1px solid #312630;
}

body.theme-sidebar-2 ul.sidebar-menu {
    padding-top:80px;
    /*background-color: #4d394b;*/
}   

body.theme-sidebar-2 ul.sidebar-menu li ul.sub li a {
    color: #ab9ba9;
}

body.theme-sidebar-2 ul.sidebar-menu li ul.sub li a:hover,
body.theme-sidebar-2 ul.sidebar-menu li ul.sub li.active a {
    background:#312630;
}

body.theme-sidebar-2 ul.sidebar-menu li a {
    color: #ab9ba9;
}   

body.theme-sidebar-2 ul.sidebar-menu li a.active,
body.theme-sidebar-2 ul.sidebar-menu li a:focus { 
    background-color: #3e313c;
}

body.theme-sidebar-2 .hvr-bounce-to-right-sidebar-parent:before {
    background: #3e313c;
}

body.theme-sidebar-2 #sidebar {
    background: #4d394b;
}

body.theme-sidebar-2 ul.sidebar-menu li.sidebar-profile .profile-options-container {
    background: rgba(62, 49, 60, .9);
}

body.theme-sidebar-2 ul.sidebar-menu li.sidebar-profile .name,
body.theme-sidebar-2 ul.sidebar-menu li.sidebar-profile .position {
    color: #ab9ba9;
}


/* ============================================================
THEME SIDEBAR 2 SECTION
============================================================ */

/*
* COlors
- Background color: 4d394b;
- Panels: rgb(88, 65, 85) ;
- Light Panels: rgb(105, 81, 102) ;
- Text color: ab9ba9;
- Light Text color: BEB4BD;
- Full Calendar BG: rgb(93, 71, 90);
- Tooltip BG: 231A22;
- 
*/

body.theme-dark-1 {
    background: #4d394b;
}

body.theme-dark-1 pre,
body.theme-dark-1 code {
    background: rgb(105, 81, 102);
    color: #ab9ba9;
    border: 1px solid rgb(88, 65, 85);
}

/*Text Color*/
body.theme-dark-1 i,
body.theme-dark-1 span,
body.theme-dark-1 p,
body.theme-dark-1 small,
body.theme-dark-1 a,
body.theme-dark-1 div,
body.theme-dark-1 .c_breadcrumbs ul a,
body.theme-dark-1 .c_breadcrumbs ul .active a, 
body.theme-dark-1 .c_breadcrumbs ul .active:hover a,
body.theme-dark-1 .top-page-header .right-menu .btn-group .btn-default {
    color: #ab9ba9;
}

/*Hover*/
body.theme-dark-1 a,
body.theme-dark-1 .c_breadcrumbs ul a:hover {
    color: #BEB4BD;
}

body.theme-dark-1 h1, 
body.theme-dark-1 h2, 
body.theme-dark-1 h3, 
body.theme-dark-1 h4, 
body.theme-dark-1 h5, 
body.theme-dark-1 h6 {
    color: #ab9ba9;
}

/*Background*/
body.theme-dark-1 .top-page-header,
body.theme-dark-1 .bg-white,
body.theme-dark-1 .c_panel,
body.theme-dark-1 .panel,
body.theme-dark-1 .panel-default > .panel-heading {
    background: rgb(88, 65, 85) !important;
}

/*Light Background*/
body.theme-dark-1 .top-page-header .right-menu .btn-group .btn-default {
    background: rgb(105, 81, 102) !important;
    border-color: rgb(105, 81, 102);
}


/*Light Background Border*/
body.theme-dark-1 .btn-default:hover, 
body.theme-dark-1 .btn-default:focus, 
body.theme-dark-1 .btn-default:active, 
body.theme-dark-1 .btn-default.active, 
body.theme-dark-1 .open .dropdown-toggle.btn-default {
    border-color: #ab9ba9;
}


/*Breadcrumbs*/
@media only screen and (min-width: 768px) {
    body.theme-dark-1 .c_breadcrumbs ul a {
        background: rgb(105, 81, 102);
    }

    body.theme-dark-1 .c_breadcrumbs ul a:after {
        border-left: 1em solid rgb(105, 81, 102);
    }

    body.theme-dark-1 .c_breadcrumbs ul a:before {
        border-color: rgb(105, 81, 102) rgb(105, 81, 102) rgb(105, 81, 102) transparent;
    }
}

/*Dropdown*/
body.theme-dark-1 #main-content .dropdown-menu {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 #main-content .dropdown-menu > li > label,
body.theme-dark-1 #main-content .dropdown-menu > li > label:hover, 
body.theme-dark-1 #main-content .dropdown-menu > li > label:focus,
body.theme-dark-1 #main-content .dropdown-menu > li > a,
body.theme-dark-1 #main-content .dropdown-menu > li > a:hover {
    color: #ab9ba9;
}

/*Dropdown Bullet*/
body.theme-dark-1 #main-content .dropdown-menu.bullet:not(.pull-top):not(.pull-middle):not(.pull-right):after {
  border-bottom-color: rgb(105, 81, 102);
}

body.theme-dark-1 #main-content .dropdown-menu.bullet.pull-top:after {
  border-top-color: rgb(105, 81, 102);
}

body.theme-dark-1 #main-content .dropdown-menu.bullet.pull-middle:after {
  border-left-color: rgb(105, 81, 102);
}

body.theme-dark-1 #main-content .dropdown-menu.bullet.pull-middle.pull-right:after {
  border-right-color: rgb(105, 81, 102);
  border-bottom-color: transparent;
}

body.theme-dark-1 #main-content .dropdown-menu.bullet.pull-right:after {
    border-bottom-color: rgb(105, 81, 102);
}


body.theme-dark-1 #main-content .hvr-bounce-to-right-global-parent:before {
   background: #3e313c;
}



body.theme-dark-1 #main-content .nav>li>a:focus, 
body.theme-dark-1 #main-content .nav>li>a:hover {
    background: transparent !important;
}


/*Elements*/

/*Accordion*/
body.theme-dark-1 .panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: rgb(105, 81, 102);
}

body.theme-dark-1 .panel-group .panel-heading+.panel-collapse>.list-group, 
body.theme-dark-1 .panel-group .panel-heading+.panel-collapse>.panel-body {
    border-top: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 .toggle-carret .panel-heading [data-toggle="collapse"]:after {
    color: #ab9ba9;
}

/*Alerts*/
body.theme-dark-1 .alert-success {
    color: #3c763d;
}

body.theme-dark-1 .alert-info {
    color: #31708f;
}

body.theme-dark-1 .alert-warning {
    color: #8a6d3b;
}

body.theme-dark-1 .alert-danger {
    color: #a94442;
}

/*Buttons*/
body.theme-dark-1 a.btn {
    color: #fff;
}

body.theme-dark-1 .btn-bordered {
    background-color: transparent;
}

body.theme-dark-1 .btn-bordered.btn-primary:hover {
    background-color: #286090;
}

body.theme-dark-1 .btn-bordered.btn-success:hover {
    background-color: #449d44;
}

body.theme-dark-1 .btn-bordered.btn-info:hover {
    background-color: #31b0d5;
}

body.theme-dark-1 .btn-bordered.btn-warning:hover {
    background-color: #ec971f;
}

body.theme-dark-1 .btn-bordered.btn-danger:hover {
    background-color: #c9302c;
}

body.theme-dark-1 .btn-primary span,
body.theme-dark-1 .btn-info span,
body.theme-dark-1 .btn-success span,
body.theme-dark-1 .btn-warning span,
body.theme-dark-1 .btn-danger span,
body.theme-dark-1 .btn-primary i,
body.theme-dark-1 .btn-info i,
body.theme-dark-1 .btn-success i,
body.theme-dark-1 .btn-warning i,
body.theme-dark-1 .btn-danger i {
    color: #fff;
}

body.theme-dark-1 .btn-group .btn-success,
body.theme-dark-1 .btn-group .btn-info,
body.theme-dark-1 .btn-group .btn-warning,
body.theme-dark-1 .btn-group .btn-danger{
    color: #fff;
}



/*Panel*/
body.theme-dark-1 .panel_options {
    background-color: transparent;
}

body.theme-dark-1 .c_panel.c_panel_default a,
body.theme-dark-1 .c_panel.c_panel_default i,
body.theme-dark-1 .c_panel.c_panel_default span,
body.theme-dark-1 .c_panel.c_panel_primary a,
body.theme-dark-1 .c_panel.c_panel_primary i,
body.theme-dark-1 .c_panel.c_panel_primary span,
body.theme-dark-1 .c_panel.c_panel_success a,
body.theme-dark-1 .c_panel.c_panel_success i,
body.theme-dark-1 .c_panel.c_panel_success span,
body.theme-dark-1 .c_panel.c_panel_info a,
body.theme-dark-1 .c_panel.c_panel_info i,
body.theme-dark-1 .c_panel.c_panel_info span,
body.theme-dark-1 .c_panel.c_panel_warning a,
body.theme-dark-1 .c_panel.c_panel_warning i,
body.theme-dark-1 .c_panel.c_panel_warning span,
body.theme-dark-1 .c_panel.c_panel_danger a,
body.theme-dark-1 .c_panel.c_panel_danger i,
body.theme-dark-1 .c_panel.c_panel_danger span{
    color: #fff !important;
}

body.theme-dark-1 .c_panel .c_footer {
    background: rgb(88, 65, 85);
}

/*Panel Tab*/
body.theme-dark-1 .c_panel .line-tabs.bottom {
    border-bottom: none;
    margin-left: -16px;
}

body.theme-dark-1 .c_panel .line-tabs .nav>li>a {
    padding-top: 2px !important;
}

body.theme-dark-1 .c_panel .line-tabs .nav>li.active {
    padding-top: 8px !important;
}

body.theme-dark-1 .c_panel .line-tabs ul>li {
    padding-left: 0px;
}

body.theme-dark-1 .c_panel .panel-group .panel-heading [data-toggle='collapse'] {
    padding: 15px 0px;
}

body.theme-dark-1 .c_panel .panel-group .panel-body { 
    padding-left: 0px;
    padding-bottom: 0px;
}

/*Label and Badge*/
body.theme-dark-1 .label,
body.theme-dark-1 .badge {
    color: #fff;
}

body.theme-dark-1 .label.label-clouds,
body.theme-dark-1 .badge.badge-clouds {
    color: #ab9ba9;
}

/*List Group*/
body.theme-dark-1 .list-group .list-group-item {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .list-group-item-danger {
    color: #F36D69;
}

body.theme-dark-1 a.list-group-item .list-group-item-heading, 
body.theme-dark-1 button.list-group-item .list-group-item-heading {
    color: #BEB4BD;
}

body.theme-dark-1 .list-group-item.active .list-group-item-text, 
body.theme-dark-1 .list-group-item.active:focus .list-group-item-text, 
body.theme-dark-1 .list-group-item.active:hover .list-group-item-text,
body.theme-dark-1 .list-group-item.active .list-group-item-heading, 
body.theme-dark-1 .list-group-item.active .list-group-item-heading>.small, 
body.theme-dark-1 .list-group-item.active .list-group-item-heading>small, 
body.theme-dark-1 .list-group-item.active:focus .list-group-item-heading, 
body.theme-dark-1 .list-group-item.active:focus .list-group-item-heading>.small, 
body.theme-dark-1 .list-group-item.active:focus .list-group-item-heading>small, 
body.theme-dark-1 .list-group-item.active:hover .list-group-item-heading, 
body.theme-dark-1 .list-group-item.active:hover .list-group-item-heading>.small, 
body.theme-dark-1 .list-group-item.active:hover .list-group-item-heading>small {
    color: #ab9ba9;
}

/*Modal*/
body.theme-dark-1 .modal-content {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .modal-content .modal-header {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .modal-content .modal-body {
    border-top: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 .modal-pull-right .modal-dialog .modal-body {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .modal-content.bg-green .modal-body,
body.theme-dark-1 .modal-content.bg-green-sea .modal-body,
body.theme-dark-1 .modal-content.bg-nephritis .modal-body,
body.theme-dark-1 .modal-content.bg-peter-river .modal-body,
body.theme-dark-1 .modal-content.bg-belize-hole .modal-body,
body.theme-dark-1 .modal-content.bg-amethyst .modal-body,
body.theme-dark-1 .modal-content.bg-wisteria .modal-body,
body.theme-dark-1 .modal-content.bg-wet-asphalt .modal-body,
body.theme-dark-1 .modal-content.bg-midnight-blue .modal-body,
body.theme-dark-1 .modal-content.bg-sun-flower .modal-body,
body.theme-dark-1 .modal-content.bg-orange .modal-body,
body.theme-dark-1 .modal-content.bg-carrot .modal-body,
body.theme-dark-1 .modal-content.bg-pumpkin .modal-body,
body.theme-dark-1 .modal-content.bg-alizarin .modal-body,
body.theme-dark-1 .modal-content.bg-pomegranate .modal-body,
body.theme-dark-1 .modal-content.bg-concrete .modal-body,
body.theme-dark-1 .modal-content.bg-asbestos .modal-body,
body.theme-dark-1 .modal-content.bg-primary .modal-body,
body.theme-dark-1 .modal-content.bg-info .modal-body,
body.theme-dark-1 .modal-content.bg-success .modal-body,
body.theme-dark-1 .modal-content.bg-warning .modal-body,
body.theme-dark-1 .modal-content.bg-danger .modal-body {
    border-top: none;
    color: #fff;
}

/*Tab*/
body.theme-dark-1 .tab-content {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .line-tabs.bottom {
    border-bottom: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 .line-tabs ul>li a,
body.theme-dark-1 #main-content .nav>li>a:hover {
    color: #ab9ba9 !important;
}

/*Nestable*/
body.theme-dark-1 .dd-handle {
    background: rgb(105, 81, 102);
    border: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 .dd-handle:hover {
    background: rgb(105, 81, 102);
    color: #3e313c;
}

body.theme-dark-1 .dd-placeholder,
body.theme-dark-1 .dd-empty {
    background: rgb(84, 62, 82);
    border: 1px dashed #ab9ba9;
}

body.theme-dark-1 .dd3-handle,
body.theme-dark-1 .dd3-handle:hover {
    background: #3e313c;
    border: 1px solid #3e313c;
    
}

body.theme-dark-1 .dd3-handle:before {
    color: #ab9ba9;
}

body.theme-dark-1 .dd3-content {
    background: rgb(105, 81, 102);
    border:  1px solid rgb(105, 81, 102);
}


/*Pagination*/
body.theme-dark-1 .pagination > li > a, 
body.theme-dark-1 .pagination > li > span {
    background-color: rgb(105, 81, 102);
    border: 1px solid #ab9ba9;
}

body.theme-dark-1 .pagination > li > a:hover {
    background: #3e313c;
}

body.theme-dark-1 .pagination>.disabled>a, 
body.theme-dark-1 .pagination>.disabled>a:focus, 
body.theme-dark-1 .pagination>.disabled>a:hover, 
body.theme-dark-1 .pagination>.disabled>span, 
body.theme-dark-1 .pagination>.disabled>span:focus, 
body.theme-dark-1 .pagination>.disabled>span:hover {
    background-color: rgb(105, 81, 102);
    color: #BEB4BD;
    border: 1px solid #ab9ba9;
}

body.theme-dark-1 .pager li>a, 
body.theme-dark-1 .pager li>span {
    background-color: rgb(105, 81, 102);
    border: 1px solid #ab9ba9;
}

body.theme-dark-1 .pager li>a:hover {
    background: #3e313c;
}

body.theme-dark-1 .pagination > li > a:hover, 
body.theme-dark-1  .pagination > li > span:hover, 
body.theme-dark-1  .pagination > li > a:focus, 
body.theme-dark-1  .pagination > li > span:focus, 
body.theme-dark-1  .pagination > li.active > a, 
body.theme-dark-1  .pagination > li.active > a:hover {
    background-color: rgb(105, 81, 102);
    border: 1px solid #ab9ba9;
}


/*Hr*/
body.theme-dark-1 hr {
    border-top: 1px solid rgb(105, 81, 102);
}


/*Progress*/
body.theme-dark-1 .progress {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .progress .progress-bar {
    color: #fff;
}


/*Tabs*/
body.theme-dark-1 .nav-tabs {
    border-bottom: 1px solid rgb(88, 65, 85);
}

body.theme-dark-1 .nav-tabs > li > a {
    border-bottom: 1px solid rgb(88, 65, 85);
}

body.theme-dark-1 .nav-tabs > li.active > a, 
body.theme-dark-1 .nav-tabs > li.active > a:hover, 
body.theme-dark-1 .nav-tabs > li.active > a:focus {
    color: #ab9ba9;
    cursor: default;
    background-color: rgb(88, 65, 85);
    border-bottom-color: rgb(88, 65, 85);
}

body.theme-dark-1 .nav-tabs>li.active>a, 
body.theme-dark-1 .nav-tabs>li.active>a:focus, 
body.theme-dark-1 .nav-tabs>li.active>a:hover {
    border: 1px solid rgb(88, 65, 85);
    color: #ab9ba9;
}

body.theme-dark-1 #main-content .nav>li>a:focus, 
body.theme-dark-1 #main-content .nav>li>a:hover {
    background: rgb(88, 65, 85) !important;
    border: 1px solid rgb(88, 65, 85);
}

body.theme-dark-1 .c_panel .tab-content {
    background: rgb(105, 81, 102);
}

/*Left Tabs*/
body.theme-dark-1 .tabs-left .nav-tabs > li > a {
    background: #4d394b;
}

body.theme-dark-1 .tabs-left .nav-tabs > li.active > a {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .tabs-left > .nav-tabs {
    border-right: 2px solid rgb(88, 65, 85);
}

body.theme-dark-1 .tabs-left > .nav-tabs.nav>li {
    margin-bottom: -4px;
}

body.theme-dark-1 .tabs-left > .nav-tabs.nav>li>a {
    padding: 12px 15px;
}

body.theme-dark-1 .tabs-left > .nav-tabs > li > a {
    border-bottom: none;
}

/*Right Tabs*/
body.theme-dark-1 .tabs-right .nav-tabs > li > a {
    background: #4d394b;
}

body.theme-dark-1 .tabs-right .nav-tabs > li.active > a {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .tabs-right > .nav-tabs {
    border-left: 2px solid rgb(88, 65, 85);
}

body.theme-dark-1 .tabs-right > .nav-tabs.nav>li {
    margin-bottom: -4px;
}

body.theme-dark-1 .tabs-right > .nav-tabs.nav>li>a {
    padding: 12px 15px;
}

body.theme-dark-1 .tabs-right > .nav-tabs > li > a {
    border-bottom: none;
}


/*Popover*/
body.theme-dark-1 .popover-title {
    background-color: rgb(88, 65, 85);
    border-bottom: 1px solid rgb(88, 65, 85);
}

body.theme-dark-1 .popover {
    background-color: rgb(105, 81, 102);
}

body.theme-dark-1 .popover.top>.arrow:after {
    border-top-color: rgb(105, 81, 102);
}

body.theme-dark-1 .popover.bottom>.arrow:after {
    border-bottom-color: rgb(105, 81, 102);
}

body.theme-dark-1 .popover.right>.arrow:after {
    border-right-color: rgb(105, 81, 102);
}

body.theme-dark-1 .popover.left>.arrow:after {
    border-left-color: rgb(105, 81, 102);
}


/*Tooltip*/
body.theme-dark-1 .tooltip-inner {
    background: #231A22;
}

body.theme-dark-1 .tooltip.top .tooltip-arrow {
    border-top-color: #231A22 !important;
}

body.theme-dark-1 .tooltip.bottom .tooltip-arrow {
    border-bottom-color: #231A22 !important;
}

body.theme-dark-1 .tooltip.left .tooltip-arrow {
    border-left-color: #231A22 !important;
}

body.theme-dark-1 .tooltip.right .tooltip-arrow {
    border-right-color: #231A22 !important;
}


/*Well*/
body.theme-dark-1 .well{
    background: rgb(105, 81, 102);
    border: 1px solid rgb(105, 81, 102);
}

/*Blockqoute*/
body.theme-dark-1 blockquote {
    border-left: 5px solid rgb(105, 81, 102);
}

body.theme-dark-1 .blockquote-reverse, 
body.theme-dark-1 blockquote.pull-right {
    border-right: 5px solid rgb(105, 81, 102);
}

/*Heading Style*/
body.theme-dark-1 .head-style-1 {
    border-bottom: 1px dotted rgb(105, 81, 102);
}

body.theme-dark-1 .head-style-4:after {
    color: #ab9ba9;
}

/*Hover CSS*/
body.theme-dark-1 .hvr-curl-top-left:before {
    background: linear-gradient(135deg,rgb(88, 65, 85) 45%,#4d394b 50%,#ab9ba9 56%,rgb(105, 81, 102) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='rgb(88, 65, 85)', endColorstr='#000000');
}

body.theme-dark-1 .hvr-curl-top-right:before {
    background: linear-gradient(225deg,rgb(88, 65, 85) 45%,#4d394b 50%,#ab9ba9 56%,rgb(105, 81, 102) 80%)
}

body.theme-dark-1 .hvr-curl-bottom-right:before {
    background: linear-gradient(315deg,rgb(88, 65, 85) 45%,#4d394b 50%,#ab9ba9 56%,rgb(105, 81, 102) 80%);
}

body.theme-dark-1 .hvr-curl-bottom-left:before {
    background: linear-gradient(45deg,rgb(88, 65, 85) 45%,#4d394b 50%,#ab9ba9 56%,rgb(105, 81, 102) 80%)
}

body.theme-dark-1 .hovercss-transition [class^="hvr-"] {
    background: rgb(105, 81, 102);
    color: #ab9ba9;
}

body.theme-dark-1 .hovercss-transition [class^="hvr-"]:hover {
    color: #fff;
}

body.theme-dark-1 [class^="btn hvr-"] {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .hvr-bubble-top:before {
    border-color: transparent transparent rgb(105, 81, 102);
}

body.theme-dark-1 .hvr-bubble-right:before {
    border-color: transparent transparent transparent rgb(105, 81, 102);
}

body.theme-dark-1 .hvr-bubble-bottom:before {
    border-color: rgb(105, 81, 102) transparent transparent;
}

body.theme-dark-1 .hvr-bubble-left:before {
    border-color: transparent rgb(105, 81, 102) transparent transparent;
}

body.theme-dark-1 .hvr-bubble-float-top:before {
    border-color: transparent transparent rgb(105, 81, 102);
}

body.theme-dark-1 .hvr-bubble-float-right:before {
    border-color: transparent transparent transparent rgb(105, 81, 102);
}

body.theme-dark-1 .hvr-bubble-float-bottom:before {
    border-color: rgb(105, 81, 102) transparent transparent;
}

body.theme-dark-1 .hvr-bubble-float-left:before {
    border-color: transparent rgb(105, 81, 102) transparent transparent;
}


/*Page Tooltipster*/
body.theme-dark-1 .page-tooltipster span.tooltipstered {
    background: rgb(105, 81, 102) ;
}

body.theme-dark-1 .tooltipster-base {
    background: #231A22;
}


/*Sweetalert*/
body.theme-dark-1 .sweet-alert {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .sweet-alert .sa-icon.sa-success::before, 
body.theme-dark-1 .sweet-alert .sa-icon.sa-success::after {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .sweet-alert .sa-icon.sa-success .sa-fix {
    background: rgb(88, 65, 85);
}

/*Owl-carousel*/
body.theme-dark-1 .owl-btn {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .owl-btn:hover i,
body.theme-dark-1 .owl-btn:hover span {
    color: #fff;
}

body.theme-dark-1 .owl-theme .owl-controls .owl-page span {
    background: #ab9ba9;
}


/*Font Icon 7 stroke*/
body.theme-dark-1 .icon-7stroke .font-icon-detail span {
    color: #ab9ba9;
    border: 1px solid #ab9ba9;
}

/*Table*/
body.theme-dark-1 .table>thead>tr>th {
    border-bottom: 2px solid rgb(105, 81, 102);
}

body.theme-dark-1 .table>tbody>tr>td, 
body.theme-dark-1 .table>tbody>tr>th, 
body.theme-dark-1 .table>tfoot>tr>td, 
body.theme-dark-1 .table>tfoot>tr>th, 
body.theme-dark-1 .table>thead>tr>td, 
body.theme-dark-1 .table>thead>tr>th {
    border-top: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 .table-hover>tbody>tr:hover {
    background-color: rgb(105, 81, 102);
}

body.theme-dark-1 .table-striped>tbody>tr:nth-of-type(odd) {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .table-bordered {
    border: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1  .table-bordered>tbody>tr>td, 
body.theme-dark-1  .table-bordered>tbody>tr>th,
body.theme-dark-1  .table-bordered>tfoot>tr>td, 
body.theme-dark-1  .table-bordered>tfoot>tr>th, 
body.theme-dark-1  .table-bordered>thead>tr>td, 
body.theme-dark-1  .table-bordered>thead>tr>th {
    border: 1px solid rgb(105, 81, 102);
}

/*Responsive Table*/
body.theme-dark-1 .table-responsive[data-pattern="priority-columns"] {
    border: 1px solid rgb(105, 81, 102);
}

@media only screen and (max-width: 800px) {
    body.theme-dark-1 #no-more-tables tr {border: 1px solid rgb(105, 81, 102);} 

    body.theme-dark-1 #no-more-tables td {
        border-bottom: 1px solid rgb(105, 81, 102)
    }
}

/*Form*/
body.theme-dark-1 #main-content .form-control {
    background-color: rgb(105, 81, 102);
    border: 2px solid #ab9ba9;
    color: #ab9ba9;
    padding-left: 8px;
    padding-right: 8px;
}

body.theme-dark-1 #main-content ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #ab9ba9;
}
body.theme-dark-1 #main-content :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #ab9ba9;
   opacity:  1;
}
body.theme-dark-1 #main-content ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #ab9ba9;
   opacity:  1;
}
body.theme-dark-1 #main-content :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #ab9ba9;
}

body.theme-dark-1 #main-content .has-warning .form-control:focus {
    border-color: #f0ad4e;
}

body.theme-dark-1 #main-content .has-warning .form-control:focus {
    border-color: #f0ad4e;
}

body.theme-dark-1 #main-content .has-error .form-control:focus {
    border-color: #DF7876;
}

body.theme-dark-1 #main-content .has-success .form-control:focus {
    border-color: #5cb85c;
}

body.theme-dark-1 #main-content .fcheck[type="checkbox"]:not(:checked):before, 
body.theme-dark-1 #main-content .fcheck[type="checkbox"]:checked:before {
    border: 2px solid #ab9ba9;
    background: rgb(105, 81, 102);
}

body.theme-dark-1 #main-content .fcheck[type="checkbox"]:checked:after {
    color: #ab9ba9;
}

body.theme-dark-1 #main-content .input-group-addon.btn-success,
body.theme-dark-1 #main-content .input-group-addon.btn-danger,
body.theme-dark-1 #main-content .input-group-addon.btn-warning,
body.theme-dark-1 #main-content .input-group-addon.btn-primary {
    color: #fff;
}

body.theme-dark-1 #main-content .input-group-addon {
    background: #ab9ba9;
    border:1px solid #ab9ba9;
}

body.theme-dark-1 #main-content .input-group-addon i{
    color: #4d394b;
}


/*Danger Text Color*/
body.theme-dark-1 .has-error .checkbox, 
body.theme-dark-1 .has-error .checkbox-inline, 
body.theme-dark-1 .has-error .control-label, 
body.theme-dark-1 .has-error .help-block, 
body.theme-dark-1 .has-error .radio, 
body.theme-dark-1 .has-error .radio-inline, 
body.theme-dark-1 .has-error.checkbox label, 
body.theme-dark-1 .has-error.checkbox-inline label, 
body.theme-dark-1 .has-error.radio label, 
body.theme-dark-1 .has-error.radio-inline label {
    color: #DF7876;
}

/*Dropdown*/
body.theme-dark-1 .dropdown-menu .divider {
    background: #ab9ba9;
}

/*DatePicker*/
body.theme-dark-1 .datepicker.dropdown-menu {
    background-color: #ab9ba9 ;
    border: 1px solid #ab9ba9 !important;
    
}

body.theme-dark-1 .datepicker.dropdown-menu th, 
body.theme-dark-1 .datepicker.datepicker-inline th, 
body.theme-dark-1 .datepicker.dropdown-menu td, 
body.theme-dark-1 .datepicker.datepicker-inline td {
    color: #4d394b
}

body.theme-dark-1 .datepicker-dropdown:after {
    border-bottom: 6px solid #ab9ba9;
}

body.theme-dark-1 .datepicker thead tr:first-child th:hover, 
body.theme-dark-1 .datepicker tfoot tr th:hover {
    background: #4d394b;
    color: #BEB4BD;
}

body.theme-dark-1 .datepicker table tr td.day:hover, 
body.theme-dark-1 .datepicker table tr td.day.focused {
    background: #4d394b;
    color: #BEB4BD;
}

body.theme-dark-1 .datepicker table tr td.old, 
body.theme-dark-1 .datepicker table tr td.new {
    color: #fff;
}

/*Timepicker*/
body.theme-dark-1 .bootstrap-timepicker-widget.dropdown-menu {
    background-color: #ab9ba9;
}

body.theme-dark-1 .bootstrap-timepicker-widget table td a i {
    color: #4d394b;
}

body.theme-dark-1 .bootstrap-timepicker-widget table td a:hover {
    background: #BEB4BD;
    border: 1px solid #BEB4BD;
    border-radius: 0;
}

body.theme-dark-1 .bootstrap-timepicker-widget table td a:hover i {
    color: #4d394b;
}

body.theme-dark-1 .bootstrap-timepicker-widget input {
    background: rgb(105, 81, 102);
    border: 1px solid #ab9ba9;
}

/*bootstrap-tagsinput*/
body.theme-dark-1 .bootstrap-tagsinput {
    background: rgb(105, 81, 102);
    border: 2px solid #ab9ba9;
}

body.theme-dark-1 .bootstrap-tagsinput .tag [data-role="remove-tag"] {
    color: #fff;
}

/*Browse FIle Width Input*/
body.theme-dark-1 .btn-browse-file {
    background: #ab9ba9;
    color: #4d394b;
}

/*Thumbnail*/
body.theme-dark-1 .thumbnail {
    background-color: rgb(105, 81, 102);
    border: 1px solid #ab9ba9;
    border-radius: 0;
}


/*Responsive Table*/
body.theme-dark-1 .table-wrapper .btn-toolbar .btn {
    background: rgb(105, 81, 102);
    border-radius: 0px;
    border-color: #ab9ba9;
    color: #ab9ba9;
}

body.theme-dark-1 .table-wrapper .btn-toolbar .dropdown-menu .checkbox-row:hover{
    background: #4d394b
}

body.theme-dark-1 .table-wrapper .btn-toolbar .dropdown-menu .checkbox-row label {
    background: rgb(105, 81, 102);
    border-radius: 0px;
    border: 1px solid #ab9ba9;
    color: #ab9ba9;
}


/*Wysiwyg Editor*/
body.theme-dark-1 .note-editor {
    border: 2px solid #BEB4BD;
}

body.theme-dark-1 .note-editor .note-editing-area .note-editable {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .note-editor .note-toolbar .btn{
    background: rgb(105, 81, 102);
    border-radius: 0px;
    border: #ab9ba9;
}

body.theme-dark-1 .note-editor .btn:active, 
body.theme-dark-1 .note-editor .btn.active {
    border: 1px solid #BEB4BD;
}


/*Daterange Picker*/
body.theme-dark-1 .daterangepicker {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .daterangepicker.opensright:after {
    border-bottom: 6px solid rgb(105, 81, 102);
}

body.theme-dark-1 .daterangepicker td.available:hover, 
body.theme-dark-1 .daterangepicker th.available:hover {
    background: #4d394b !important;
}

body.theme-dark-1 .daterangepicker td.in-range {
    background: #BEB4BD;
    color: #4d394b;
}

body.theme-dark-1 .daterangepicker td.off, 
body.theme-dark-1 .daterangepicker td.off.in-range, 
body.theme-dark-1 .daterangepicker td.off.start-date, 
body.theme-dark-1 .daterangepicker td.off.end-date {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .daterangepicker td.active, 
body.theme-dark-1 .daterangepicker td.active:hover {
    background: #4d394b !important;
}

body.theme-dark-1 .daterangepicker .input-mini,
body.theme-dark-1 .daterangepicker select {
    background: rgb(105, 81, 102);
    border: 2px solid #BEB4BD;
    color: #ab9ba9;
}

body.theme-dark-1 .daterangepicker .ranges li {
    background:  #4d394b !important;
    color: #ab9ba9 !important;
    border: none !important;
}

body.theme-dark-1 .datepicker {
    border: 2px solid #BEB4BD !important;
}


/*Select2*/
body.theme-dark-1 .select2-container {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .select2-container .select2-choice,
body.theme-dark-1 .select2-container-multi .select2-choices {
    border: 2px solid #BEB4BD;
}

body.theme-dark-1 .select2-drop-active {
    border: 2px solid rgb(105, 81, 102) !important;
}

body.theme-dark-1 .select2-container-active .select2-choice, 
body.theme-dark-1 .select2-container-active .select2-choices {
    border: 2px solid rgb(105, 81, 102) !important;
}

body.theme-dark-1 .select2-drop {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .select2-search input {
    background: rgb(105, 81, 102);
    border: 2px solid #BEB4BD;
}

body.theme-dark-1 .select2-results .select2-no-results, 
body.theme-dark-1 .select2-results .select2-searching, 
body.theme-dark-1 .select2-results .select2-ajax-error, 
body.theme-dark-1 .select2-results .select2-selection-limit {
    background: #BEB4BD;
    color: #4d394b;
}

body.theme-dark-1 .select2-results .select2-result-label {
    background: #BEB4BD;
    color: #4d394b;
}

body.theme-dark-1 .select2-user-result {
    color: #4d394b;
}

body.theme-dark-1 .select2-results .select2-result-label:hover,
body.theme-dark-1 .select2-user-result:hover {
    background: #4d394b;
    color: #BEB4BD;
}

body.theme-dark-1 .select2-container-multi .select2-choices .select2-search-choice {
    background: #BEB4BD;
}

body.theme-dark-1 .select2-container-multi .select2-choices .select2-search-choice div,
body.theme-dark-1 .select2-container-multi .select2-choices .select2-search-choice a {
    color: #4d394b;
}


/*Switch Input*/
body.theme-dark-1 .switch-input i {
    background: rgb(105, 81, 102);
    border-color: #ab9ba9;
}

body.theme-dark-1 .switch-input input:checked+i:after,
body.theme-dark-1 .switch-input i:after {
    color: #ab9ba9;
}

body.theme-dark-1 .switch-input i:before {
    background: #ab9ba9;
}


/*Typehead*/
body.theme-dark-1 .tt-dropdown-menu {
    background: rgb(105, 81, 102);
    border:1px solid #BEB4BD
}

body.theme-dark-1 .tt-suggestion.tt-cursor {
    background: #4d394b !important;
}


/*Form Tooltip*/
body.theme-dark-1 .form-tooltip .tooltip {
    background: #4d394b;
    color: #ab9ba9;
}
body.theme-dark-1 .form-tooltip .tooltip.top-right:after {
    border-top: 4px solid #4d394b;
}
body.theme-dark-1 .form-tooltip .tooltip.top-left:after {
    border-top: 4px solid #4d394b;
}
body.theme-dark-1 .form-tooltip .tooltip.right:after {
    border-right: 4px solid #4d394b;
}
body.theme-dark-1 .form-tooltip .tooltip.left:after {
    border-left: 4px solid #4d394b;
}
body.theme-dark-1 .form-tooltip .tooltip.bottom-right:after {
    border-bottom: 4px solid #4d394b;
}
body.theme-dark-1 .form-tooltip .tooltip.bottom-left:after {
    border-bottom: 4px solid #4d394b;
}


/*UI Slider*/
body.theme-dark-1 .ui-slider {
    background: rgb(105, 81, 102);
    border: 2px solid #BEB4BD;
}

body.theme-dark-1 .ui-state-default, 
body.theme-dark-1 .ui-widget-content .ui-state-default, 
body.theme-dark-1 .ui-widget-header .ui-state-default {
    background: rgb(105, 81, 102) !important;
    border: 2px solid #BEB4BD !important;
}


/*Multi Select*/
body.theme-dark-1 .ms-container .ms-selectable, 
body.theme-dark-1 .ms-container .ms-selection {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .ms-container .ms-selectable li.ms-elem-selectable, 
body.theme-dark-1 .ms-container .ms-selection li.ms-elem-selection {
    border-bottom: 1px solid #ab9ba9;
}

body.theme-dark-1 .ms-container .ms-list {
    border: 1px solid #ab9ba9;
}

body.theme-dark-1 .ms-container .ms-selectable li.ms-hover, 
body.theme-dark-1 .ms-container .ms-selection li.ms-hover {
    background: #4d394b !important;
}

body.theme-dark-1 .ms-container .ms-list.ms-focus {
    border-color: #4d394b !important;
}


/*Dropzone*/
body.theme-dark-1 .dropzone {
    background: rgb(105, 81, 102);
    border: 1px solid rgb(105, 81, 102);
}

/*PL Upload*/
body.theme-dark-1 li.plupload_droptext,
body.theme-dark-1 .plupload_scroll .plupload_filelist,
body.theme-dark-1  .plupload_filelist li {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .plupload_filelist_header, 
body.theme-dark-1 .plupload_filelist_footer {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .plupload_filelist_header,
body.theme-dark-1 .plupload_filelist li{
    border-bottom: 1px solid #ab9ba9;
}

body.theme-dark-1 .plupload_filelist_footer {
    border-top: 1px solid #ab9ba9;
}

body.theme-dark-1 .plupload_scroll .plupload_filelist {
    border-bottom: none;
}


/*Editable*/
body.theme-dark-1 .editable-popup input{
    background: rgb(105, 81, 102);
    border: 2px solid #BEB4BD;
    padding-right: 8px;
    padding-left: 8px;
}

/*Form Templates*/
body.theme-dark-1 .bg-warning span,
body.theme-dark-1 .bg-info span,
body.theme-dark-1 .bg-primary span,
body.theme-dark-1 .bg-success span,
body.theme-dark-1 .bg-danger span,
body.theme-dark-1 .bg-green span,
body.theme-dark-1 .bg-green-sea span,
body.theme-dark-1 .bg-peter-river span,
body.theme-dark-1 .bg-sun-flower span {
    color: #fff;
}

body.theme-dark-1 .bg-warning:hover,
body.theme-dark-1 .bg-info:hover,
body.theme-dark-1 .bg-primary:hover,
body.theme-dark-1 .bg-success:hover,
body.theme-dark-1 .bg-danger:hover,
body.theme-dark-1 .bg-green:hover,
body.theme-dark-1 .bg-green-sea:hover,
body.theme-dark-1 .bg-peter-river:hover,
body.theme-dark-1 .bg-sun-flower:hover {
    border:none;
}

/*Email*/
body.theme-dark-1 .email-page .email-list .table tr.unread td  {
    background: #4d394b;
}

body.theme-dark-1 .email-page .mail-option .btn-group .btn {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .email-page .nav.nav-pills > li > a {
    color: #fff;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}

body.theme-dark-1 .email-page .compose-mail .bordered {
    border: none;
}

body.theme-dark-1 .email-page .btn-group .btn {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .email-page .btn-group .btn:hover {
    color: #BEB4BD;
}

body.theme-dark-1 .email-page .mail-sender, 
body.theme-dark-1 .attachment-mail,
body.theme-dark-1 .email-page .sender-message,
body.theme-dark-1 .email-page .reply-form {
    border-color: #ab9ba9;
}

body.theme-dark-1 .email-page .sender-attachement a,
body.theme-dark-1 .email-page .sender-attachement ul li a.name span {
    color: #ab9ba9;
}

body.theme-dark-1 .email-page .sender-attachement a:hover {
    color: #BEB4BD;
}


/*Top Header Dropdown*/
body.theme-dark-1 #main-content .top-page-header .right-menu .btn-group .dropdown-menu > li > input:checked ~ label, 
body.theme-dark-1 #main-content .top-page-header .right-menu .btn-group .dropdown-menu > li > input:checked ~ label:hover, 
body.theme-dark-1 #main-content .top-page-header .right-menu .btn-group .dropdown-menu > li > input:checked ~ label:focus, 
body.theme-dark-1 #main-content .top-page-header .right-menu .btn-group .dropdown-menu > .active > label, 
body.theme-dark-1 #main-content .top-page-header .right-menu .btn-group .dropdown-menu > .active > label:hover, 
body.theme-dark-1 #main-content .top-page-header .right-menu .btn-group .dropdown-menu > .active > label:focus {
    background-color: #3e313c;
}

body.theme-dark-1 #main-content .top-page-header .right-menu .btn-group .dropdown-menu > li label:hover {
    background: #3e313c;
}



/*widget*/
body.theme-dark-1 .widget .widget-header {
    border-bottom: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 .widget .widget-footer {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .widget .widget-footer a {
    color: #ab9ba9;
}   

body.theme-dark-1 .widget .chat-conversation-action {
    background: rgb(88, 65, 85);
    border-top: 1px solid rgb(105, 81, 102);
}

/*Widget Chat Conversation*/
body.theme-dark-1 .widget .chat-msg-list .odd .msg-text {
    border: 1px solid #ab9ba9;
}

body.theme-dark-1 .widget .chat-msg-list .odd .msg-text:after {
    border-left-color: #ab9ba9 !important;
}

body.theme-dark-1 .widget .chat-msg-list .even .msg-text {
    border: 1px solid #4d394b;
    background-color: #4d394b;
    color: gray;
}

body.theme-dark-1 .widget .chat-msg-list .msg-text:after {
    border-right-color: #4d394b;
}

body.theme-dark-1 .widget .chat-msg-list .msg-text i {
    color: #BEB4BD;
}

/*Widget Todo Lists*/
body.theme-dark-1 .widget .todo-list ul li {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .widget .todo-list ul li:nth-child(2n) {
    background: rgb(105, 81, 102);
}


/*Page: User Management*/
body.theme-dark-1 .users .caption .user-task-info {
    background: rgb(88, 65, 85);
    border-bottom: 2px solid rgb(88, 65, 85);
    margin-top: -5px;
}

body.theme-dark-1 .users .btn i,
body.theme-dark-1 .users .btn span {
    color: #fff;
}

body.theme-dark-1 .users .thumbnail {
    border: none;
}

body.theme-dark-1 .users hr {
    border: none;
    border-top: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 .users .list-group-item .caption .user-task-info {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .users .list-group-item .caption .user-task-info {
    border: none;
}

body.theme-dark-1 .users .list-group .list-group-item {
    background: none;
}

body.theme-dark-1 .users .user-info-container {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .users .tabular-form .form-group {
    border: none;
}

body.theme-dark-1 .users .tabular-form .form-group > .tabular-border {
    border: none;
}

body.theme-dark-1 .bg-silver, 
body.theme-dark-1 .bg-silver h1, 
body.theme-dark-1 .bg-silver h2, 
body.theme-dark-1 .bg-silver h3, 
body.theme-dark-1 .bg-silver h4, 
body.theme-dark-1 .bg-silver h5, 
body.theme-dark-1 .bg-silver h6, 
body.theme-dark-1 .bg-silver .modal-header {
    background-color: #4d394b;
}


/*Page: Profile*/
body.theme-dark-1 .profile-page .profile-image img {
    border: 5px solid #ab9ba9;
} 

body.theme-dark-1 .profile-page .profile-cover {
    margin-left: -15px; 
}

body.theme-dark-1 .profile-page .profile-sidebar {
    margin-left: -13px;
    margin-right: -13px;
}

body.theme-dark-1 .profile-page .profile-sidebar li.list-group-item.active i{
    color: #fff;
}

body.theme-dark-1 .profile-page .profile-sidebar-wrapper {
    border-right: 10px solid #4d394b !important;
    background: #4d394b !important;
    margin-top: -14px;
}

body.theme-dark-1 .profile-page .notification {
    border-top: 1px solid rgb(88, 65, 85);
}

body.theme-dark-1 .profile-page .notification span {
    color: #ab9ba9;
}

body.theme-dark-1 .profile-page .notification small {
    color: #ab9ba9;
}

body.theme-dark-1 .profile-page .profile-content-wrapper {
    background: rgb(105, 81, 102) !important;
}

body.theme-dark-1 .profile-page .hvr-bounce-to-right i {
    color: #fff !important;
}

body.theme-dark-1 .profile-page .panel-heading {
    background: rgb(88, 65, 85);
    border-bottom: solid 3px #4d394b;
}

body.theme-dark-1 .profile-page .list-group-item:hover {
    background: #4d394b;
}

body.theme-dark-1 .profile-page .profile-post {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .profile-page .profile-post-in h3 a {
    color: #ab9ba9;
    font-weight: bold;
}

body.theme-dark-1 .profile-page .profile-post-in p {
    color: #ab9ba9;
}

body.theme-dark-1 .profile-page .profile-post span.profile-post-numb {
    color: #ab9ba9;
}

body.theme-dark-1 .profile-page .profile-cover p {
    color: #fff;
}

body.theme-dark-1 .profile-page .timeline-2 > li .timeline-label {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .profile-page .timeline-2 > li .timeline-label:after {
    border-right-color: rgb(105, 81, 102);
}

body.theme-dark-1 .profile-page .timeline-2 > li .timeline-label h2 {
    border-bottom: 1px solid #ab9ba9;
}

body.theme-dark-1 .profile-page .timeline-2:before {
    background: #ab9ba9;
}

body.theme-dark-1 .profile-page .timeline-2 > li .timeline-icon {
    background: #ab9ba9;
    box-shadow: 0 0 0 4px #ab9ba9;
}

body.theme-dark-1 .profile-page .profile-about .work-experience li > p.timeline-time > span:first-child {
    color: #ab9ba9;
}

body.theme-dark-1 .profile-page .profile-about .work-experience li > p.timeline-time > span:last-child {
    color: #BEB4BD;
}

body.theme-dark-1 .profile-page .timeline-2 > li .timeline-time span:last-child {
    color: #BEB4BD;
}

body.theme-dark-1 .profile-page .projects .project-box.bordered {
    border: 1px solid #ab9ba9;
}

body.theme-dark-1 .profile-page .projects .project-box.bordered .btn i {
    color: #fff;
}

body.theme-dark-1 .profile-page .projects .project-box .project-total-hours {
    border-right: 1px solid #ab9ba9;
}

body.theme-dark-1 .list-group-item {
    border: none;
}


/*Page: Projects*/
body.theme-dark-1 .all-projects .list-group-item.active > a > i {
    color: #fff;
}

body.theme-dark-1 .all-projects .project-box .btn>i {
    color: #fff;
}

body.theme-dark-1 .all-projects .btn>span,
body.theme-dark-1 .all-projects .btn>i{
    color: #fff;
}

body.theme-dark-1 .view-project .project-details .row-details {
    border-bottom: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 .view-project .btn-add-new-task {
    border: 1px solid #fff;
}

body.theme-dark-1 .view-project .panel-heading {
    background: rgb(88, 65, 85);
    border-color: #ab9ba9;
}

/*Page: Login*/
body.theme-dark-1 .page-login .social-buttons {
    border-color: rgb(105, 81, 102);
}

body.theme-dark-1 .page-login .btn i {
    color: #fff;
}


/*Page: Errors*/
body.theme-dark-1 .error_page {
    border:none;
}

body.theme-dark-1 .error_page strong {
    color: #ab9ba9;
    text-shadow: 5px 5px 1px #BEB4BD;
}

body.theme-dark-1 .error_page .btn i {
    color: #fff;
}


/*Page: Timeline 1*/
body.theme-dark-1 .timeline-1 .timeline-body {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .timeline-1 > li > .timeline-panel .timeline-heading {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .timeline-1:before {
    background-color:rgb(105, 81, 102);
}

body.theme-dark-1 .timeline-1 .timeline-footer {
    background-color:rgb(88, 65, 85);
    border-top: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 .timeline-1 > li:not(.timeline-inverted) > .timeline-panel:before {
    position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid rgb(88, 65, 85);
    border-right: 0 solid rgb(88, 65, 85);
    border-bottom: 14px solid transparent;
    content: " ";
}

body.theme-dark-1 .timeline-1 > li:not(.timeline-inverted) > .timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid rgb(88, 65, 85);
    border-right: 0 solid rgb(88, 65, 85);
    border-bottom: 14px solid transparent;
    content: " ";
}

body.theme-dark-1 .timeline-1 > li.timeline-inverted > .timeline-panel:after {
    position: absolute;
    top: 25px;
    left: -16px;
    display: inline-block;
    border-top: 16px solid transparent;
    border-right: 16px solid rgb(88, 65, 85);
    border-left: 0 solid rgb(88, 65, 85);
    border-bottom: 16px solid transparent;
    content: " ";
}

body.theme-dark-1 .timeline-1 .timeline-footer .blog-info i,
body.theme-dark-1 .timeline-1 .timeline-footer .likes i {
    color: #ab9ba9;
}

/*Page: Timeline 2*/
body.theme-dark-1 .timeline-2 > li .timeline-label {
    background:  rgb(88, 65, 85);
}

body.theme-dark-1 .timeline-2 > li .timeline-time span:first-child {
    color: #ab9ba9;
}

body.theme-dark-1 .timeline-2 > li .timeline-time span:last-child {
    color: #BEB4BD;
}

body.theme-dark-1 .timeline-2 > li .timeline-label:after {
    border-right-color: rgb(88, 65, 85);
}

@media screen and (min-width: 47.2em) {
    body.theme-dark-1 .timeline-2 > li .timeline-label:after {
        border-right-color: rgb(88, 65, 85);
    }
}

@media screen and (max-width: 47.2em) {
    body.theme-dark-1 .timeline-2 > li .timeline-label:after {
        left: 20px;
        top: -20px;
        right: auto;
        border-bottom-color: rgb(88, 65, 85);
        border-right-color: transparent;
    }
}

body.theme-dark-1 .timeline-2 > li .timeline-label h2 {
    border-bottom: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 .timeline-2:before,
body.theme-dark-1 .timeline-2 > li .timeline-icon {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .timeline-2 > li .timeline-icon {
    box-shadow: 0 0 0 4px rgb(105, 81, 102);
}


/*Page: Main Forum*/
body.theme-dark-1 .page-forum .panel-heading {
    background: rgb(88, 65, 85);
    border-color: rgb(105, 81, 102);
}

body.theme-dark-1 .page-forum .panel .panel-body .row:not(:first-child) {
    border-top: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 .page-forum .attachement-list ul li .attachment-thumb a {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .page-forum .attachement-list a {
    color: #ab9ba9;
}

body.theme-dark-1 .page-forum .forum-comments {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .page-forum .forum-replies {
    background: rgb(105, 81, 102) !important;
}

/*Page: Ecommerce*/
body.theme-dark-1 .page-ecommerce .hvr-bounce-to-right i {
    color: #fff;
}

body.theme-dark-1 .page-ecommerce .ecommerce-content .ecommerce-slider .prices .original-price {
    color: #BEB4BD;
}

body.theme-dark-1 .page-ecommerce .ecommerce-content .ecommerce-slider .prices .present-price {
    color: #BEB4BD !important;
    border-right: 5px solid #ab9ba9;
}

body.theme-dark-1 .page-ecommerce .btn, 
body.theme-dark-1 .page-ecommerce .btn i,
body.theme-dark-1 .page-ecommerce .btn span,
body.theme-dark-1 .page-ecommerce .owl-theme .owl-controls .owl-buttons div > i {
    color: #fff;
}

body.theme-dark-1 .page-ecommerce .owl-theme .owl-controls .owl-buttons div {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .page-ecommerce .sidebar .table-responsive {
    border-color: rgb(105, 81, 102);
}

body.thee-dark-1 .page-ecommerce .btn-remove-cart {
    color: #ab9ba9;
}

body.theme-dark-1 .page-ecommerce .c_panel .tab-content {
    margin-bottom: 20px;
}

body.theme-dark-1 .page-ecommerce .top-header-envoice {
    border-color: rgb(105, 81, 102);
}

/*Page: Contact*/
body.theme-dark-1 .page-contact-form .business-hours li {
    color: #ab9ba9;
}

/*Page: Full Calendar*/
body.theme-dark-1 #external-events p {
    color: #ab9ba9;
}

body.theme-dark-1  .fc-bg {
    background: rgb(93, 71, 90);
}

body.theme-dark-1 .fc-unthemed .fc-future {
    background: 0 0;
    background-color: rgb(88, 65, 85);
}

body.theme-dark-1 .fc-unthemed .fc-today {
    background-color: rgb(105, 81, 102);
}

/*body.theme-dark-1 .fc-state-hover{
    background-color: #4d394b;
}*/

body.theme-dark-1 .fc-unthemed .fc-divider, 
body.theme-dark-1 .fc-unthemed .fc-popover, 
body.theme-dark-1 .fc-unthemed .fc-row, 
body.theme-dark-1 .fc-unthemed tbody, 
body.theme-dark-1 .fc-unthemed td, 
body.theme-dark-1 .fc-unthemed th, 
body.theme-dark-1 .fc-unthemed thead {
    border-color: rgb(105, 81, 102);
}

body.theme-dark-1 .fc-button span{
    color: #fff;
}

body.theme-dark-1 .fc-highlight {
    background: #4d394b;
}

body.theme-dark-1 .fc-unthemed .fc-divider, 
body.theme-dark-1 .fc-unthemed .fc-popover .fc-header {
    background: #ab9ba9;
}


/*Page: People Directory*/
body.theme-dark-1 .page-people-directory .nav-contacts li a {
    color: #ab9ba9;
}

body.theme-dark-1 .page-people-directory .nav-contacts li .badge {
    color: #BEB4BD;
}

body.theme-dark-1 .page-people-directory .nav-contacts li.active .badge {
    color: #fff;
}

body.theme-dark-1 .page-people-directory .contact-group .list-group-item:hover {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .page-people-directory .contact-group .media-heading small {
    color: #ab9ba9;
}

body.theme-dark-1 .page-people-directory .btn i,
body.theme-dark-1 .page-people-directory .btn span,
body.theme-dark-1 .page-people-directory .btn {
    color: #fff;
}

body.theme-dark-1 .dropdown-menu > li > input:checked ~ label, 
body.theme-dark-1 .dropdown-menu > li > input:checked ~ label:hover, 
body.theme-dark-1 .dropdown-menu > li > input:checked ~ label:focus, 
body.theme-dark-1 .dropdown-menu > .active > label, 
body.theme-dark-1 .dropdown-menu > .active > label:hover, 
body.theme-dark-1 .dropdown-menu > .active > label:focus {
    color: #fff !important;
}


/*Page: Search Results*/
body.theme-dark-1 .page-search-results .search-box {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .page-search-results .search-item {
    border-bottom: 1px solid rgb(88, 65, 85);
}


/*Page: About Us*/
body.theme-dark-1 .page-about-us .dropcap.dropcap-big {
    color: #fff;
}

body.theme-dark-1 .page-about-us .social-icons li a i{
    color: #fff !important;
}


/*Page: Pricing Table*/
body.theme-dark-1 #pricing-table-2 .price,
body.theme-dark-1 #pricing-table-2 .name{
    color: #fff;
}

body.theme-dark-1 #pricing-table-2 .price_card {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 #pricing-table-2 .features li:not(:last-child) {
    border-color: #4d394b;
}

body.theme-dark-1 #pricing-table-2 .features li {
    color: #ab9ba9;
}

body.theme-dark-1 #pricing-table-2 .tip {
    color: #ab9ba9;
}


/*Page: Gallery Manager*/
body.theme-dark-1 .media-filter li a {
    background: rgb(105, 81, 102);
}


/*Widget: User Style 1*/
body.theme-dark-1 .widget.user-view-style-1 .caption .user-task-info {
    background: rgb(88, 65, 85);
    border-bottom: 2px solid rgb(88, 65, 85);
    margin-top: -5px;
}

body.theme-dark-1 .widget.user-view-style-1 .btn i,
body.theme-dark-1 .widget.user-view-style-1 .btn span {
    color: #fff;
}

body.theme-dark-1 .widget.user-view-style-2 .btn i,
body.theme-dark-1 .widget.user-view-style-2 .btn span {
    color: #fff;
}

body.theme-dark-1 .widget.user-view-style-2 .user-profile .list-group .list-group-item {
    background: transparent;
}

/*Widget: Boxes*/
body.theme-dark-1 .widget .widget-content.bg-sun-flower i,
body.theme-dark-1 .widget .widget-content.bg-sun-flower span,
body.theme-dark-1 .widget .widget-content.bg-sun-flower p,
body.theme-dark-1 .widget .widget-content.bg-peter-river i,
body.theme-dark-1 .widget .widget-content.bg-peter-river span,
body.theme-dark-1 .widget .widget-content.bg-peter-river p,
body.theme-dark-1 .widget .widget-content.bg-belize-hole i,
body.theme-dark-1 .widget .widget-content.bg-belize-hole span,
body.theme-dark-1 .widget .widget-content.bg-belize-hole p,
body.theme-dark-1 .widget .widget-content.bg-green i,
body.theme-dark-1 .widget .widget-content.bg-green span,
body.theme-dark-1 .widget .widget-content.bg-green p,
body.theme-dark-1 .widget .widget-content.bg-green-sea i,
body.theme-dark-1 .widget .widget-content.bg-green-sea span,
body.theme-dark-1 .widget .widget-content.bg-green-sea p,
body.theme-dark-1 .widget .widget-content.bg-pumpkin i,
body.theme-dark-1 .widget .widget-content.bg-pumpkin span,
body.theme-dark-1 .widget .widget-content.bg-pumpkin p,
body.theme-dark-1 .widget .bg-belize-hole span {
    color: #fff;
}

body.theme-dark-1 .widget .hvr-bounce-to-right i {
    color: #fff;
}

/*Widget: Social Style 1*/
body.theme-dark-1 .widget .social-style-1 i,
body.theme-dark-1 .widget .social-style-1 span,
body.theme-dark-1 .widget .social-style-1 p {
    color: #fff;
}

/*Widget: Post Tabs*/
body.theme-dark-1 .widget .widget-content .nav-tabs.nav-justified>li>a {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 .widget .widget-content .nav-tabs.nav-justified>li>a:hover {
    background: #4d394b;
}

body.theme-dark-1 .widget .widget-content .nav-tabs > li.active > a {
    background: rgb(88, 65, 85);
}

body.theme-dark-1 .widget .widget-content .nav-tabs > li > a:active {
color: #fff;
}

body.theme-dark-1 .widget .widget-content .nav-tabs > li.active > a,
body.theme-dark-1 .widget .widget-content .nav-tabs > li > a:hover {
    border-top: 1px solid transparent; 
}

body.theme-dark-1 .widget .widget-content .posts {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

body.theme-dark-1 .widget .widget-content .posts li:not(:last-child) {
    border-bottom: 1px solid transparent; 
}


/*Right Sidebar*/
body.theme-dark-1 .right-sidebar-notifcations .nav-tabs>li>a {
    background: rgb(88, 65, 85);
    color: #ab9ba9 !important;
}
body.theme-dark-1 .right-sidebar-notifcations .nav-tabs>li.active>a {
    background: #4d394b !important;
    color: #ab9ba9 !important;
}


body.theme-dark-1 .right-sidebar-notifcations .nav-tabs>li>a:hover {
    background: rgb(105, 81, 102) !important;
}

body.theme-dark-1 .right-sidebar-notifcations .nav-tabs>li>a:focus {
    background: #4d394b !important;
}

body.theme-dark-1 .right-sidebar-notifcations .tab-content {
    padding: 0px;
}

body.theme-dark-1 #right-sidebar #right-sidebar-tab-content .right-sidebar-panel-content-heading {
    background: #4d394b;
    border-bottom: 1px solid rgb(105, 81, 102);
    padding: 15px;
}

body.theme-dark-1 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li:nth-child(even) {
    background: rgb(105, 81, 102);
}

body.theme-dark-1 #right-sidebar #right-sidebar-tab-content .right-sidebar-list li {
    border-bottom: none;
    padding-left: 15px;
    padding-right: 15px;
}

body.theme-dark-1 #right-sidebar #right-sidebar-tab-content .right-sidebar-list {
    padding-left: 0;
    padding-right: 0;
}

body.theme-dark-1 .btn-bottom-right-sidebar-close span {
    color: #fff;
}


/*Projects Page*/
body.theme-dark-1 .projects .project-box .project-total-hours {
    border-right: 1px solid rgb(105, 81, 102);
}

/*Layouts*/
body.theme-dark-1.fixed-width-unfixed-header #main-content,
body.theme-dark-1.fixed-width #main-content {
    background: #483446;
}


/*Heading style 3*/
body.theme-dark-1 h1.head-style-3:after {
    border-top: 1px solid rgb(105, 81, 102);
    border-bottom: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 h2.head-style-3:after {
    border-top: 1px solid rgb(105, 81, 102);
    border-bottom: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 h3.head-style-3:after {
    border-top: 1px solid rgb(105, 81, 102);
    border-bottom: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 h4.head-style-3:after {
    border-top: 1px solid rgb(105, 81, 102);
    border-bottom: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 h5.head-style-3:after {
    border-top: 1px solid rgb(105, 81, 102);
    border-bottom: 1px solid rgb(105, 81, 102);
}

body.theme-dark-1 h6.head-style-3:after {
    border-top: 1px solid rgb(105, 81, 102);
    border-bottom: 1px solid rgb(105, 81, 102);
}



/*Tabulator Form*/
body.theme-dark-1 .tabular-form .form-group > .tabular-border {
    border-left: 1px solid transparent;
}


/*Bubble Content*/
body.theme-dark-1 .boxed-content-bubble .boxed-content {
    background: rgb(105, 81, 102);
    border-color: rgb(105, 81, 102);
}

body.theme-dark-1 .boxed-content-bubble .boxed-content:after {
    border-color: rgb(105, 81, 102) transparent;
}

body.theme-dark-1 .boxed-content-bubble strong {
    color: #ab9ba9;
}

body.theme-dark-1 .boxed-content-bubble strong em {
    color: #BEB4BD;
}

body.theme-dark-1 .tabular-form .form-group {
        border-top: 1px solid transparent;
}

/*Boxed Icon Content*/
body.theme-dark-1 .hover-boxed-icon-content .mask-top {
    background-color: rgb(88, 65, 85);
}

body.theme-dark-1 .hover-boxed-icon-content .content {
    border-color: rgb(105, 81, 102);
}


/*Scroll Background*/
body.theme-dark-1 div[id^='ascrail'] > div { 
    background-color: #3e313c !important;
}



/*Magnific Popup*/
.mfp-wrap {
    z-index: 1062;
}

.mfp-bg {
    z-index: 1062;
}

/*Date: 5-16-2016 = Wysiwyg fix fullscreen*/ 
.note-editor.fullscreen {
    z-index: 1062;
}

body { font-family: sans-serif; }

.scene {
  width: 100%;
  height: 260px;
  margin: 40px 0;
  perspective: 600px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face img {
    max-width: 80%;
    margin-top: 10px;
}

.card__face--front {
}

.card__face--back {
  transform: rotateY(180deg);
}

.chk-modal-ashy{
    position: absolute;
    visibility: hidden;
}

.modal-ashy{
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity ease .3s;
}

.modal-ashy-content{
    background-color: #fff;
    width: 500px;
    max-width: 95%;
    margin: 50px auto;
}

.modal-ashy-header{
    font-size: 20px;
    color: #fff;
    background: #4d4d4d;
    padding: 5px 3px;
}

.modal-ashy-body{
    text-align: center;
}

.modal-ashy-shadow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: -1;
}

.chk-modal-ashy:checked ~ .modal-ashy {
    visibility: visible;
    opacity: 1;
}

.photo-thirdparty {
    background-image: url(../images/default-user-image.png);
    height: 150px;
    width: 150px;
    background-size: cover;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    background-position: center;
    overflow: hidden;
}

.photo-thirdparty .btn-modal-photo{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    cursor: pointer;
}

.photo-thirdparty .lbl-modal-photo {
    position: absolute;
    left: 7px;
    top: 5px;
}

.photo-thirdparty #canvas_photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.datatable-repair-filters .dataTables_filter, .datatable-repair-filters .dataTables_paginate {
    text-align: right;
}

.dataTable .selected {
    background-color: #555 !important;
    color: #fff;
}

.loading-page {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255,255,255,0.6);
    z-index: 999;
}

.loading-page img {
    width: 400px;
    height: 300px;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}

.list-archive{
    padding: 40px;
    padding-top: 15px;
}

.alert-archive{
    margin-top: 5px;
    padding: 40px;
    padding-bottom: 20px;
    margin: 0 auto;
    width: 50%;
}

.loading-archive{
    margin-top: 10px;
    padding: 40px;
    padding-top: 20px;
}

/*
    CUSTOM STYLES
*/

.icon-table{
    font-size: 20px;
    color: #347ab6;
}
.mt-10{
    margin-top:10px;
}
.mt-20{
    margin-top:20px;
}
.mb-20{
    margin-bottom:20px;
}
.pd-20{
    padding: 20px;
}

.check-productos{
    height: 40px;
    display: flex;
    padding: 7px;
}
.input-check{
    margin-top: 10px;
    height: 20px;
    width: 20px;
}
.label-check{
    margin-right: 20px;
    margin-top: 5px;
    margin-left: 5px;
}
.chosen-container{
    font-size: 14px !important;
    width: 100% !important;
}
.button_filter{
    width: 120px;
    border-color: #337ab7;
    -webkit-box-shadow: 1px 3px 5px 0px rgba(220,220,220,1);
    -moz-box-shadow: 1px 3px 5px 0px rgba(220,220,220,1);
    box-shadow: 1px 3px 5px 0px rgba(220,220,220,1);
}
.button_filter-files{
    width: 200px;
    border-color: #337ab7;
    -webkit-box-shadow: 1px 3px 5px 0px rgba(220,220,220,1);
    -moz-box-shadow: 1px 3px 5px 0px rgba(220,220,220,1);
    box-shadow: 1px 3px 5px 0px rgba(220,220,220,1);
}
.button-download{
    width: 200px;
    border-color: #9d6fb1;
    -webkit-box-shadow: 1px 3px 5px 0px rgba(197, 176, 206, 1);
    -moz-box-shadow: 1px 3px 5px 0px rgba(197, 176, 206, 1);
    box-shadow: 1px 3px 5px 0px rgba(197, 176, 206, 1);
}
.title-files{
    background: #3a434d;
    color: white;
    padding: 10px;
}
.text-title{
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
}

/*** BARS ***/
.bar-material{
    width: 40%;
    height: 100px;
    margin: 0 auto;
    border-radius: 8px;
    background: #efca38;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: 1px 3px 5px 0px rgba(224, 194, 164, 1);
    -moz-box-shadow: 1px 3px 5px 0px rgba(224, 194, 164, 1);
    box-shadow: 1px 3px 5px 0px rgba(224, 194, 164, 1);
}
.text-material{
    color: #8a6f04;
    font-size: 35px;
}
.icon-vacio{
    font-size: 35px;
    color: #8a6f04;
}
/* */

/*** VENTAS ***/
.sel-barras{
    padding-top:10px;
    height:100px;
    display:flex;
    justify-content: flex-start;
    align-items:flex-start;
    flex-direction:column;
}
.btn-barras{
    height:100px;
    display:flex;
    justify-content: flex-start;
    align-items:center;
}
.delete-row{
    font-size: 20px;
    color: red;
}
/*** ***/

/*** VENTAS ADMIN ***/
.icon-close-sales{
    color: red;
}
.close-sales{
    font-weight: bold;
    font-size: 18px;
    margin-top: 2%;
}
.div-flex{
    height: 80px;
    padding: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    margin-top: 20px;
}
.al.left{
    justify-content: flex-start;
}
.al-right{
    justify-content: flex-end;
}
/*** ***/

.text-icon{
    font-size: 16px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    margin-top: 10px;
    height: 50px;
    text-align: center;
    padding-top: 5px;
}

.nav-tabs > li > a{
    color: #1c56d0 !important;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{
    color: #fff !important;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    background: #002f98 !important;
}