/*

*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
*/


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

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

body {
    color: #767676;
    background: #f3f3f3;
    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: #000000;
    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;
}

.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%;
}

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


/* ============================================================
SIDEBARD NAV SECTION
============================================================ */
#sidebar {
    width: 240px;
    height: 100%;
    position: fixed;
    background: #20283e;
    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: #1d283e;
    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: #ffffff;
}

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

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: #ffffff;
    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: #4bd135;
    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: 1002;
    background:#fcfffc;
    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: #1d283e;
    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: 18px;
    color: #ffffff;
    float: left;
    margin: 20px 0 0 25px;
    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: 17.6px;
    padding-bottom: 17.6px;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 1px solid #F5EFF5;
}

.top-nav .navbar-left li:last-child {
    border-right: 1px solid #F5EFF5;
}

.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;
    border-left: 1px solid #F5EFF5;
    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: 0;
    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: 15px;
    /* 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);
}

.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: #4bd135;
    -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: #ffffff;
}

.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: 25px;
}

.c_panel {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    /*padding: 10px 17px;*/
    display: inline-block;
    background: #fdfffc;
    /*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: 25px;
    padding-top: 8px;
    padding-bottom: 8px;
}


/* ============================================================
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: 25px;
    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: 10px;
    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;
    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: 27px 0 26px;
}

.grid-icon {
    display: inline-block;
    font-size: 0px;
    cursor: pointer;
    margin: 15px 30px;
    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: #fdfffc;
    margin-top: 60px;
    margin-bottom: 27px;
    padding-top: 11px;
    padding-left: 25px;
    padding-bottom: 25px;
    padding-right: 16px;
}

/*** 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: #00000;
}

.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 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: 25px;
    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,
.panel-group .panel-body {
    padding: 25px;
}

.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: 10%;
    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: 25px;
    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: 0 1px 3px rgba(34, 25, 25, 0.4);
    -moz-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
}

.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 .widget-content {
    padding: 25px;
}

.widget .widget-footer {
    background-color: #E4E4E4;
    font-weight: bold;
}

.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;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    -moz-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
}

.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: 0px;
    padding: 0px;
}

.widget .projects li {
    padding: 15px 15px;
    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-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;
}

.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: relative;
    top: 10px;
    float: right;
    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;
}

.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;
}

.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;
}

.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: 300px;
    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;
}

span.invalid-feedback {
    color: red;
    font-size: 11px;
}

.label-text-danger {
    color: red !important;
}

.bgx-margin-top-1 {
    margin-top: 15px;
}

.otp-input-fields {
    display: flex;
    justify-content: center;
}

.otp-input-fields {
    margin: auto;
    background-color: white;
    max-width: 400px;
    width: auto;
    display: flex;
    justify-content: center;
    gap: 22px;
    padding: 20px;

    input {
        height: 40px;
        width: 40px;
        background-color: transparent;
        border-radius: 4px;
        border: 1px solid #2f8f1f;
        text-align: center;
        outline: none;
        font-size: 16px;

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        &[type=number] {
            -moz-appearance: textfield;
        }

        &:focus {
            border-width: 2px;
            border-color: darken(#2f8f1f, 5%);
            font-size: 20px;
        }
    }
}
.require {
    color: red
}
.d-flex{
    display: flex;
}
.bgx-del-button-container {
    padding-left: 0px;
}
.bgx-del-button-container button{
  border-radius: 50px;
}
.select-options-container{
  display: grid;
}
.options-row div:nth-child(1){
 padding: 10px 23px;
}
.options-row div:nth-child(2){
    padding: 10px 0px;
}
.bgx-checkbox-custom{
    display: flex;
    align-items: "center";
    justify-content: "center";
}
.bgx-checkbox-custom input[type="checkbox"]{
    width: 20px;
    height: 20px;
}
.bgx-loading{
    width: 100%;
    text-align: center;
}
.bgx-loading img{
    width: 50px;
}
.number-first-input{
    padding: 0px 15px 0px 23px;
}
.number-second-input{
    padding: 0px 23px 0px 15px;
}
.number-group{
    margin-top: 15px;
}
/* Basic styling for tabs */
.tabs {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
  }
  
  .tablinks {
    background-color: #f1f1f1;
    float: left;
    border-radius: 10px 10px 0px 0px;
    border: 1px solid #ccc;
    outline: none;
    cursor: pointer;
    padding: 10px 10px;
    transition: background-color 0.3s;
  }
  
  .tablinks:hover {
    background-color: #ddd;
  }
  
  .tabcontent {
    display: none;
    padding: 20px;
    border: 1px solid #e4e4e4;
    /* overflow: scroll;
    height: 520px; */
  }
  
  /* Show the active tab */
  .tabcontent.active {
    display: block !important;
  }
  .tabs .tablinks.active{
    background-color: #00c3e0;
    color: white;
    border-color: #00c6e2;
  }
  .bgx-margin-bottom{
    margin-bottom:20px !important;
  }
  .bgx-text-center{
    text-align:center;
  }
  .bgx-checkbox-category{
    height: 20px;
    width: 40px;
    margin-top: -4px !important;
    vertical-align: middle; 
  }
  .bgx-margin-top{
    margin-top:7px;
  }
  .device-category-fields.card {
    border: 1px solid #ebebeb;
    border-radius: 8px;
    /* padding: 16px; */
    /*margin: 16px;*/
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
  }
  @media (min-width: 768px) {
  .device-category-fields.card {
    /*padding: 16px;*/
    margin: 16px;
  }
}
  .device-category-fields .card-title h4{
    font-size: 1.5rem;
    font-weight: bold;
    margin: 14px;
    color: white;
  }
  .device-category-fields .card-title{
        background-color:#00c3e0;
        padding: 1px;
        border-radius:8px 8px 0px 0px ;
  }
  .device-category-fields .card-details {
        margin: 20px 10px;
  }
  .bgx-save-button{
   text-align: end;
  }
  .configuration {
    text-align: left;
  }
  .default_template_checkbnox{
    width: 30px;
    height:20px;
  }
  .error {
    border: 1px solid red;
    background-color: #ffdddd;
}
.bgx-custom-page{
    width: 100%;
    background: white;
    padding:0px;
}
.bgx-custom-page .header-custom{
    padding: 10px;
}
.bgx-custom-page .body-custom{
    padding: 10px;
}
.bgx-custom-page .body-custom .user-info{
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius:15px;
    margin-bottom:20px;
}
.bgx-configurations{
     /*margin-left: 20px;*/
}
.bgx-configurations .edit-btn {
    border-color: #337ab7;
    padding:6px;
}   
.configuration-item{
    border: 1px solid #ebe1e1;
    border-radius: 10px;
    padding: 10px;
}
.bgx-form-fields .form-group{
    padding: 15px 0px;

}
.bg-margin-top{
    margin-top:15px
}

.bgx-table-container {
    /*display: table;*/
    width: 100%;
    border-collapse: collapse;
}
.bgx-table-row {
    display: table-row;
}
.bgx-table-cell {
    display: table-cell;
    padding: 5px 10px;
    border-bottom: 1px solid #ddd; /* Optional: add borders */
}
.bgx-table-cell strong {
    display: block;
    font-weight: bold;
}
.user-info {
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.user-info .configuration-item {
    margin-bottom: 20px;
}
.user-info .configuration-item h6 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #333;
}
.user-info .card {
    margin: 5px 0px;    
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: box-shadow 0.3s ease;
}
.user-info .card:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.user-info .card-body {
    padding: 15px;
}
.user-info .edit-btn {
    margin-top: 10px;
}
.user-info .edit-btn {
    display: block;
    margin: 0 auto;
}
.bgx-map-configurations{
    padding: 0px 10px 10px 10px;
}
.form-control {
    border: 1px solid #efe6e6;
    box-shadow: none;
    color: #727272;
}
label.bgx-label-category {
    padding: 0px 0px;
}

.bgx-title-container {
    padding: 2px 9px;
}
/* .dataTables_scrollHead{
  overflow: visible !important;
  width: 100%;
 } */


 .modal-footer.row.bgx-custom-modal-footer {
    margin: 20px 1px;
}   


.form-template-configuration{
    padding:10px;
}

.form-horizontal {
    background: #fdfffc;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
}

.form-step {
    display: none;
}

.form-step-active {
    display: block;
}

button {
    margin-top: 10px;
}

button.next-btn, button.prev-btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    /* padding: 10px 20px; */
    margin-top: 2px;
    /* border-radius: 5px; */
    cursor: pointer;
}

button.next-btn:hover, button.prev-btn:hover {
    background-color: #0056b3;
}

button.prev-btn {
    background-color: #6c757d;
}

button.prev-btn:hover {
    background-color: #5a6268;
}


.accordion-row {
    cursor: pointer;
    background-color: #f9f9f9;
}

.accordion-row:hover {
    background-color: #f1f1f1;
}

.accordion-content {
    /* display: none; */
    /* background-color: #f9f9f9; */
}

.content {
    padding: 15px;
}

/* 
.bgx-table-container .table-container {
    padding:10px;
    margin: auto;
}

.bgx-table-container table {
    width: 100%;
    border-collapse: collapse;
}

.bgx-table-container th, td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.bgx-table-container th {
    color: #555;
} */
.svg-container{
    background: white;
    padding: 1px;
    border: 1px solid;
    text-align: center;
}



@charset "UTF-8";
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");

.pcs:after {
  content: " pcs";
}

.cur:before {
  content: "$";
}

.per:after {
  content: "%";
}

* {
  box-sizing: border-box;
}

body {
  padding: 0.2em 2em;
}

table {
  width: 100%;
}

table th {
  text-align: left;
  border-bottom: 1px solid #ccc;
}

table th,
table td {
  padding: 0.4em;
}

table.fold-table > tbody > tr.view td,
table.fold-table > tbody > tr.view th {
  cursor: pointer;
}

table.fold-table > tbody > tr.view td:first-child,
table.fold-table > tbody > tr.view th:first-child {
  position: relative;
  padding-left: 20px;
}

/* table.fold-table > tbody > tr.view td:first-child:before,
table.fold-table > tbody > tr.view th:first-child:before {
  position: absolute;
  top: 50%;
  left: 5px;
  width: 9px;
  height: 16px;
  margin-top: -8px;
  font: 16px fontawesome;
  color: #999;
  content: "";
  transition: all 0.3s ease;
} */

table.fold-table > tbody > tr.view:nth-child(4n-1) {
  background: #eee;
}

table.fold-table > tbody > tr.view:hover {
  background: #f5f5f5;
}

table.fold-table > tbody > tr.view.open {
  background: skyblue;
  color: white;
}

table.fold-table > tbody > tr.view.open td:first-child:before,
table.fold-table > tbody > tr.view.open th:first-child:before {
  transform: rotate(-180deg);
  color: #333;
}

table.fold-table > tbody > tr.fold {
  display: none;
}

table.fold-table > tbody > tr.fold.open {
  display: table-row;
}

.fold-content {
  padding: 0.5em;
}

.fold-content h3 {
  margin-top: 0;
}

.fold-content > table {
  border: 2px solid #ccc;
}

.fold-content > table > tbody tr:nth-child(even) {
  background: #eee;
}

.icon {
    display: none; /* Hide all icons by default */
  }
  
  .plus-icon {
    display: inline; /* Show the plus icon by default */
  }
  
  .minus-icon {
    display: none; /* Hide the minus icon by default */
  }
  
  tr.open .plus-icon {
    display: none; /* Hide the plus icon when row is open */
  }
  
  tr.open .minus-icon {
    display: inline; /* Show the minus icon when row is open */
  }