@charset "IBM437";

/* Author: AdminDesigns.com
* Copyright 2014 Admin Designs
===================================================  
Table of Contents
===================================================  
I. SHARED STYLES
II. PRIMARY COMPONENTS
III. PANELS
IV. THEME ELEMENTS
V. HELPERS
VI. WIDGETS 
VII. COLOR SYSTEM
VIII. LAYOUT SETTINGS
IX. GRID MODIFICATIONS
X. PAGES
XI. PLUGINS
XII. ANIMATE.CSS
===================================================
===================================================
I. SHARED STYLES
A. Global
B. Grid
C. Typography
D. Animations
===================================================
A. Global
=================================================== */

body {
    -webkit-font-smoothing: antialiased;
    /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
    color: #231f20;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-size-adjust: 100%;
    font-weight: 600;
    line-height: 1.475;
    margin: 0;
    padding: 0;
    width: 100%;
}


#main {
    background-color: #f5f5fd;
    height: 100%;
    width: 100%;
}

#content_wrapper {
    display: block;
    left: 0px;
    margin-left: 235px;
    position: relative;
}

.container { width: 100%; }

.row {
    margin-left: -11px;
    margin-right: -11px;
}

.row.xtra {
    margin-left: -15px;
    margin-right: -15px;
}


.row.table-layout {
    margin-left: 0;
    margin-right: 0;
}

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

/*===============================================
C. Typography
================================================= */

ul, ol { padding-left: 30px; }

li { margin-bottom: 7px; }

d { color: #e6995b; }

d:hover { color: #33bfeb; }

d:focus { outline: none; }

p {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    line-height: 22px;
}

p.small, p small { font-size: 85%; }

h1, h2, h3, h4, h5, h6 {
    color: #231f20;
    font-family: 'Nunito', sans-serif;
    font-weight: normal;
    margin: 0;
    margin-bottom: 10px;
    text-rendering: optimizelegibility;
}

h1 {
    font-size: 30px;
    line-height: 45px;
}

h1.small { font-size: 26px; }

h2 {
    font-size: 24px;
    line-height: 36px;
}

h2.small { font-size: 20px; }

h3 {
    font-size: 18px;
    line-height: 27px;
}

h3.small { font-size: 16px; }

h4, h5, h6 { line-height: 18px; }

h4 { font-size: 15px; }

h5 { font-size: 13px; }

h5.small, h5 small { font-size: 12px; }

h6 {
    color: #999;
    font-size: 11px;
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    color: #999;
    font-weight: normal;
}

.fw400 { font-weight: 400; }

.fw600 { font-weight: 600; }

.fw700 { font-weight: 600; }

.text-uppercase { text-transform: uppercase; }

/* Specialty Header - Also a Divider */

.page-header {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid #c9c9c9;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
    margin-bottom: 30px;
    text-shadow: 0 1px #FFF;
}

/* Dividers */

hr {
    border-top: 1px solid #ddd;
    margin: 35px 0;
}

hr.alt { border-top: 1px dashed #ccc; }

hr.short { margin: 20px 0; }

hr.tall { margin: 55px 0; }

.divider {
    background: #e2e2e2;
    height: 1px;
    margin: 25px 0;
}

/* Carets */

.caret-xs { border-width: 2px; }

.caret-sm { border-width: 3px; }

.caret-lg { border-width: 5px; }

/*===============================================
D. Animations
================================================= */

/* used in conjuction with "data-animate" 
* attr to create a delayed page animation
* read docs for more info on proper use*/

.animated-delay { opacity: 0; }

.sparkline-delay {
    display: block;
    height: 0;
    line-height: 40px;
}

/* ================================================
II. PRIMARY COMPONENTS
A. Navbar
B. Sidebar
C. Topbar
===================================================
A. Navbar
=================================================== */

.navbar {
    background-color: #f5f5fd;
    border-bottom: 1px solid #f5f5fd;
    border-radius: 0;
    margin-bottom: 0;
    max-height: 70px;
    min-height: 70px;
    z-index: 1030;
}

/* Navbar Logo Container */


/* Navbar Logo */

.navbar-brand {
    color: #5d5d5d;
    font-size: 19px;
    font-weight: 400;
    height: 60px;
    letter-spacing: 0.5px;
    line-height: 48px;
    padding: 0;
}

/* Navbar Toggle Button for Sidebar */

#toggle_sidemenu_l {
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    color: #b2b2b2;
    cursor: pointer;
    float: left;
    font-size: 19px;
    line-height: 70px;
    margin-left: 25px;
    max-height: 70px;
    width: 40px;
}

.sidebar-collapsed #toggle_sidemenu_l { font-size: 24px; }

/* Left Navbar Container */

.navbar-left {
    float: left;
    max-height: 60px;
    position: relative;
    width: 150px;
}

/* Navbar Left Divider */

.navbar-divider {
    border-left: 1px solid #ebebeb;
    height: 30px;
    left: 0;
    position: absolute;
    top: 15px;
    width: 1px;
}

select {
    color: #555;
    font-size: 13px;
    height: 34px;
    line-height: 1.42857;
    padding: 0;
    text-align: left;
    text-indent: 3px;
    width: 100%;
}


/* Left Side Menus */

#settings_menu,
#language_menu {
    color: #888;
    float: left;
    font-size: 15px;
    font-weight: 600;
    margin-left: 28px;
    padding: 19px 0;
    position: relative;
}

#settings_menu a, #language_menu a { text-decoration: none; }

#settings_menu .dropdown-menu, #language_menu .dropdown-menu {
    border: 1px solid #CCC;
    border-radius: 2px;
    box-shadow: none;
    margin-left: -10px;
    padding: 2px 0;
}

#settings_menu .dropdown-menu li, #language_menu .dropdown-menu li { margin-bottom: 3px; }

/* Settings Menu */

#settings_menu { margin-left: 25px; }

#settings_menu .glyphicons { font-size: 13px; }

#settings_menu.open > .glyphicons { color: #f9892e; }

#settings_menu .dropdown-menu { margin-left: -20px; }

/* Language Menu */

#language_menu { top: -1px; }

#language_menu a:hover {
    outline: none;
    text-decoration: none;
}

/* Language Menu Text */

#language_menu a > span { color: #e6995b; }

/* Language Menu Icon */

#language_menu .fa {
    color: #999;
    font-size: 14px;
}

/* Right Navbar Container */

.navbar-right {
    float: right;
    margin-right: 20px;
    padding: 8px 0px;
    text-align: right;
    width: 200px;
}

/* Header Search Area */

.navbar-search {
    float: left;
    height: 60px;
    overflow: hidden;
    padding: 15px;
    padding-right: 25px;
    position: relative;
    width: 230px;
}

.navbar-search:after {
    border-right: 1px solid #ebebeb;
    content: "";
    height: 32px;
    position: absolute;
    right: 0;
    top: 15px;
}

.navbar-search input {
    background: #FFF;
    border: 1px solid #DDD;
    border-radius: 15px;
    color: #AAA;
    font-size: 18px;
    font-weight: 300;
    outline: none;
    padding: 1px 13px;
    width: 100%;
}

/* Navbar Menus */

.navbar-menus {
    float: right;
    margin-right: 10px;
}

.navbar-menus > .btn-group {
    float: left;
    margin-right: 0;
}

.navbar-menus > .btn-group.open .glyphicons { color: #e6995b; }

/* Reduces the size of the Right SideMenu Toggle button */

.navbar-menus > .btn-group:last-child { max-width: 55px; }

.navbar-menus > .btn-group > button {
    background: transparent;
    border: none;
    border-radius: 0;
    color: #666;
    outline: none;
    padding: 21px 20px 18px;
    position: relative;
}

.navbar-menus > .btn-group.open .dropdown-toggle { box-shadow: none; }

/* Header Menu Number Text */

.navbar-menus > .btn-group > button > b {
    background: #e6995b;
    border: 1px solid #FFF;
    border-radius: 100%;
    color: #FFF;
    display: block;
    font-size: 13px;
    font-weight: 600;
    height: 20px;
    left: 30px;
    line-height: 16px;
    position: absolute;
    top: 14px;
    width: 20px;
}

/* Header Button Dropdowns */

.navbar-menus ul.dropdown-menu,
.navbar-menus div.dropdown-menu {
    border-color: #CCC;
    font-size: 13px;
    left: auto;
    margin: 6px 0;
    min-width: 316px;
    padding: 0;
    right: -5px;
}

/* Header Menu Dropdown - Header */

.navbar-menus .dropdown-header {
    background: #f9f9f9;
    border-bottom: 1px solid #DDD;
    border-radius: 2px 2px 0 0;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    padding: 9px 20px;
    position: relative;
}

/* Header Bar Dropdowns Arrows */

.navbar-menus .dropdown-menu:before,
.navbar-menus .dropdown-menu:after {
    border-bottom: 12px solid #f2f2f2;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    bottom: 100%;
    content: "";
    height: 0;
    position: absolute;
    right: 23px;
    width: 0;
    z-index: 15;
}

.navbar-menus .dropdown-menu:after {
    border-bottom-color: #999;
    z-index: 14;
}

/* Header Menu Dropdown - Sub Header */

.dropdown-submenu {
    border-bottom: 1px solid #eee;
    padding: 11px 0 8px;
}

.dropdownSearch {
    border: none;
    left: 12px;
    position: relative;
    top: 1px;
}

.dropdownSearch:focus { outline: none; }

.dropdownSearch::-webkit-input-placeholder {
    color: #BBB;
    font-size: 13px;
    font-weight: 600;
}

.dropdownSearch::-moz-placeholder {
    color: #BBB;
    font-size: 13px;
    font-weight: 600;
}

/* firefox 19+ */

.dropdownSearch:-ms-input-placeholder {
    color: #BBB;
    font-size: 13px;
    font-weight: 600;
}

/* ie */

.dropdownSearch:-moz-placeholder {
    color: #BBB;
    font-size: 13px;
    font-weight: 600;
}

/* Header Menu Dropdown - Footer */

.navbar-menus .dropdown-footer {
    background: #FFF;
    border-radius: 0 0 3px 3px;
    border-top: 1px solid #DDD;
    color: #999;
    font-size: 11px;
    margin: 0;
    padding: 11px 20px;
    position: relative;
    text-align: center;
    z-index: 999;
}

.navbar-menus .dropdown-footer a { color: #428bca; }

.navbar-menus .dropdown-footer a:hover { background: transparent; }

.navbar-menus .dropdown-footer i.fa { padding-left: 3px; }

/* Dropdown Checklist Toggle - The Task menu is a clickable checklist */

.task-checked > div:not(.item-checkbox) { opacity: 0.4; }

/* add a text line through effect on any clickable checklist by adding ".text-slash" */

.task-checked .text-slash { text-decoration: line-through; }

/* Removes borders from Nav-Tabs that are placed in header dropdowns */

.navbar-menus .nav-tabs {
    margin-left: -1px;
    margin-top: -1px;
}

.navbar-menus .nav-tabs > li > a {
    border-color: #DDD;
    padding: 10px 27px;
}

/* Navbar Tickets Dropdown */

.ticket-body { width: 87%; }

.ticket-handle {
    border-right: 1px solid #ffe3e3;
    position: relative;
    width: 13%;
}

.ticket-handle:after {
    border-right: 1px solid #ffe3e3;
    content: "";
    height: 100%;
    position: absolute;
    right: 2px;
    top: 0;
}

/* Navbar Todo-List Dropdown */

.todo-body { width: 82%; }

.todo-handle {
    position: relative;
    width: 8%;
}

.v-handle {
    background-image: url(../images/plugins/handle.png);
    height: 14px;
    width: 10px;
}

/* ==============================================
A. LEFT SIDEBAR
A. Default Open State
B. Sidebar User Area
C. Sidebar Item State
D. Sidebar Toggle - Media Query
E. Sidebar Toggle - User input
=================================================
A. Default Open State
================================================= */


.sidebar-menu {
    text-align: center;
    /*padding-bottom: 20px;*/
}

/* TOP LEVEL MENU ITEM */

/* Menu Item */

.nav.navsml:before {
    background-color: #ededed;
    content: "";
    height: 100%;
    left: 65px;
    position: fixed;
    top: 0;
    visibility: hidden;
    width: 1px;
    z-index: 99;
}

.sidebarShown .nav.navsml:before { visibility: visible; }

.tltp {
    background-color: #9590bc;
    border-radius: 4px;
    bottom: -34px;
    color: #fff;
    font-size: 12px;
    left: -44px;
    line-height: 1em;
    margin-left: 0px;
    min-width: 130px;
    padding: 7px 15px;
    position: absolute;
    text-align: center;
    text-transform: initial !important;
    visibility: hidden;
    white-space: nowrap;
    z-index: 1;
}

.tltp::before {
    border-color: transparent transparent #9590bc transparent;
    border-style: solid;
    border-width: 7px;
    bottom: 100%;
    content: " ";
    left: 50%;
    margin-left: -10px;
    position: absolute;
}

.sidebar-menu ul li:hover .tltp { visibility: visible; }

.sidebar-menu ul li { margin: 0; }


/*.sidebar-menu ul li:first-child {
padding-top: 4px; }*/

.sidebar-menu ul li a { color: #fff; }

.sidebar-menu ul li > a {
    display: block;
    padding: 0px;
    text-align: center;
}

.sidebar-menu ul li > a:after {
    clear: both;
    content: "";
    display: block;
}

.sidebar-menu ul li > a > i {
    color: #575757;
    font-size: 30px;
}

.sidebar-menu ul li > a > ion-icon {
    color: #575757;
    font-size: 30px;
}

/* Menu Icon */

.sidebar-menu ul li:hover a { }

.sidebar-menu ul li > a > span:nth-child(1) {
    align-items: center;
    border-radius: 10px;
    color: #9590bc;
    display: flex;
    float: left;
    font-size: 20px;
    height: 35px;
    justify-content: center;
    margin: 5px 15px;
    text-align: center;
    width: 35px;
}

.sidebar-menu ul li a > .sidebar-title {
    align-items: center;
    border-radius: 5px;
    color: #aeabcc;
    display: flex;
    float: left;
    font-weight: 600;
    height: 35px;
    justify-content: flex-start;
    margin: 5px 10px;
    padding: 5px 20px;
    width: calc(100% - 86px);
}

.sidebar-menu ul li.active a > .icon_span {
    background: #1d2057;
    background: -moz-linear-gradient(65deg, #1d2057 0%, #8f5482 60%, #cd7196 100%);
    background: -webkit-linear-gradient(65deg, #1d2057 0%, #8f5482 60%, #cd7196 100%);
    background: linear-gradient(65deg, #1d2057 0%, #8f5482 60%, #cd7196 100%);
    color: #fff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1d2057', endColorstr='#cd7196', GradientType=1);
}

.sidebar-menu ul li.active a > .icon_span * { color: #fff; }

.sidebar-menu ul li.active a > .sidebar-title {
    background: #f5f5fd;
    color: #272a59;
}

/* Menu Title */

/*.sidebar-menu ul li > a > span:nth-child(2){float:left; padding-left:10px;}*/

.sidebar-menu ul li > a > span { display: block; }

/* Top Level Menu Item - Tray, used to hold badges and such */

.sidebar-menu ul li a > .sidebar-title-tray {
    position: absolute;
    right: 10px;
}

.sidebar-menu ul li a > .sidebar-title-tray .label {
    font-size: 11px;
    padding: .0em .5em .2em;
}

/* Menu Caret */

.sidebar-menu ul li a > span.caret {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid;
    position: absolute;
    right: 10px;
    top: 45%;
}

.sidebar-menu ul li a.menu-open > span.caret {
    border-bottom: 5px solid;
    border-top: 0;
}

/* SUB LEVEL MENU ITEMS */

/* Sub-Menu */

.sidebar-menu ul.sub-nav {
    background: #f3f3f3;
    border-bottom: 1px solid #dedede;
    border-right: 1px solid #d6d6d6;
    border-top: 1px solid #dedede;
    clear: both;
    display: none;
    height: auto;
    width: 230px;
}

.sidebar-menu ul a.menu-open + ul.sub-nav { display: block; }

.sidebar-menu ul.sub-nav > li > a { padding: 10px 20px 11px 30px; }

.sidebar-menu ul.sub-nav > li > a > span.glyphicons { color: #e6995b; }

.sidebar-menu ul.sub-nav > li > a > span.glyphicon { color: #e6995b; }

.sidebar-menu ul.sub-nav > li > a > span.imoon { color: #e6995b; }

.sidebar-menu ul.sub-nav > li > a > span.fa { color: #e6995b; }

/* Sub-Menu Icon */

.sidebar-menu ul.sub-nav > li > a > span:nth-child(1) { margin-right: 8px; }

.sidebar-menu ul li.divider {
    background: #e7e7e7;
    margin: 0 auto;
    width: 170px;
}

/*===============================================
B. Sidebar User Area
================================================= */

.user-info {
    display: inline-block;
    height: auto;
    overflow: hidden;
    padding: 0px;
    position: relative;
    text-align: right;
    width: auto;
}

/* User Area - Avatar */

.user-info .media-links { color: #ccc; }

.user-info .media-object { border-color: #c7b7e5; }

.user-info .media-object img { max-width: 45px; }

/* User Area Mobile Link - Replaces ".media-body" with single Icon for Mobile Devices */

.user-info .mobile-link {
    display: none;
    padding: 2px;
}


.user-info .mobile-link > span {
    color: #999;
    cursor: pointer;
    font-size: 18px;
    padding-left: 5px;
    padding-top: 8px;
}

.user-info .mobile-link span:hover,
.user-info.usermenu-open .mobile-link span { color: #e6995b; }

.user-info.usermenu-open .media-object { border-color: #e6995b; }

/* User Area Menu - A slide down user menu */

.user-menu {
    background: #f8f8f8;
    border-right: 1px solid #d6d6d6;
    display: none;
    height: 165px;
    left: 0;
    padding: 22px 22px 20px 16px;
    position: relative;
    top: 0;
    width: 100%;
}

/* User Area Menu - bottom border(hidden on mobile) */

.user-menu:after {
    background: #e5e5e5;
    border-bottom: 1px solid #CCC;
    border-top: 1px solid #CCC;
    bottom: 0;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    width: 100%;
}

.user-menu a {
    color: #888;
    opacity: 0.8;
}

.user-menu a:hover {
    color: #666;
    opacity: 1;
    text-decoration: none;
}

.user-divider {
    background: #e5e5e5;
    border-bottom: 1px solid #CCC;
    height: 4px;
    width: 100%;
}

/*===============================================
C. Sidebar Item State
================================================= */

/* Top Level Menu Item - BG color:hover */

.sidebar-menu ul li > a:hover { background-color: transparent; }

.sidebar-menu ul li > a > span.glyphicons { color: #398bd8; }

.sidebar-menu ul li > a > span.imoon { color: #398bd8; }

.sidebar-menu ul li > a > span.glyphicon { color: #398bd8; }

.sidebar-menu ul li > a > span.fa { color: #e6995b; }

/* Sub-Menu Level Item - BG color:hover */

.sidebar-menu ul.sub-nav > li > a:hover { background-color: #ededed; }

/* Top Level Menu Item - Icon Color */

/* Sub-Menu Level Item - Icon Color */


/* Active Menu item Caret */

.sidebar-menu ul li.active a > span.caret { color: #9567b7; }

/*====================================================
D. Sidebar Toggle - Media Query
====================================================== */

@media (max-width: 1100px) {
}

/*====================================================
E. Sidebar Toggle - User input
====================================================== */

/* Left SideBar */

/*====================================================
E. Custom Menu -  Email Menu
====================================================== */

.email-menu { padding: 12px 22px 18px 18px; }

.email-menu li {
    color: #999;
    font-weight: 600;
    margin-bottom: 7px !important;
    padding-left: 27px;
}

.email-menu li.menu-header {
    font-weight: 600;
    margin-bottom: 10px;
    padding-left: 0;
}

.email-menu li.menu-header .glyphicons {
    font-size: 14px;
    margin-right: 10px;
    top: 2px;
}

.email-menu .btn { text-indent: -8px; }

.email-menu hr { margin: 18px 0 18px; }

.email-menu ul li.active,
.email-menu ul li:hover {
    color: #555;
    cursor: pointer;
}

/*===============================================
B. Right SideMenu
================================================= */

#sidebar_right {
    background: #363c47;
    height: 100%;
    position: fixed;
    right: -250px;
    top: 0;
    width: 250px;
    z-index: 1031;
}

#sidebar_right .sidebar-right-header {
    background: #454d5d;
    border-bottom: 1px solid #555d6d;
    height: 59px;
    padding: 4px 10px 4px 20px;
    width: 100%;
}

#sidebar_right .sidebar_right_content a:hover { text-decoration: none; }

body.sidebar-right-open #sidebar_right { right: 0; }

/*===============================================
C. Topbar
================================================= */

#topbar {
    height: 63px;
    max-height: 140px;
    padding: 0 19px;
    position: relative;
    width: 100%;
    z-index: 80; /* 1023;*/
}

.topbar-right { float: right; }

.breadcrumb {
    background-color: transparent;
    border-bottom: 1px dashed #CCC;
    border-radius: 0;
    float: left;
    font-size: 14px;
    height: 63px;
    margin-bottom: 0;
    padding: 24px 0 5px 0;
    padding-right: 50px;
    position: relative;
}

.breadcrumb > li {
    color: #888;
    font-size: 12px;
}

.breadcrumb > li.crumb-active > a {
    color: #555;
    font-size: 18px;
}

/* ================================================
III. PANELS
A. Heading
B. Panel Addon - Menu
C. Panel Addon - Sidemenu
D. Panel Addon - Tray
E. Panel Tabs
F. Panel Accordion 
G. Alternate Styles
	  
* Bootstrap Panels are a vital element in this
* theme. Please read the documentation provided
* with Fusion Admin to learn more
===================================================
A. Heading
=================================================== */

.panel {
    border-radius: 5px;
    margin-bottom: 20px;
    position: relative;
}

.panel.p15 h3 { margin-bottom: 15px; }

/* panel helper class */

.panel-overflow { overflow: hidden; }

.panel-heading {
    color: #383a66;
    font-size: 13px;
    font-weight: 600;
    line-height: 40px;
    margin-top: 10px;
    min-height: 40px;
    padding: 0px 18px;
    position: relative;
    /*border-bottom: 1px solid #e5e5e5;
border-radius: 5px 5px 0 0;
background: #fafafa;*/
}

.panel-heading .btn {
    box-shadow: none;
    margin-top: 5px;
}

.panel-heading + .panel-body { border-top-color: #e5e5e5; }

.panel-title {
    font-size: 14px;
    font-weight: bold;
}

.panel-title > .fa,
.panel-title > .glyphicon,
.panel-title > .glyphicons,
.panel-title > .imoon,
.panel-title > ion-icon {
    border-right: 1px solid #ddd;
    color: #575757;
    font-size: 18px;
    margin-right: 8px;
    min-width: 25px;
    top: 2px;
}

.panel-title > ion-icon {
    position: relative;
    top: 5px;
}

.arrowHeading {
    font-weight: bold;
    line-height: normal;
    margin-bottom: 10px;
    margin-top: 0px;
    min-height: auto;
    padding: 0px;
}

.arrowHeading::after {
    clear: both;
    content: "";
    display: block;
}

.arrowHeading .panel-title {
    float: left;
    padding-left: 25px;
    padding-top: 7px;
    position: relative;
}

.arrowHeading .panel-title svg {
    color: #b3b5cc;
    font-size: 20px;
    left: 0;
    margin-right: 5px;
    position: absolute;
    top: 6px;
}

.arrowHeading .btn {
    background: url(https://api.iconify.design/cil:arrow-left.svg?color=%23fff) no-repeat 1.5rem center;
    background-color: rgba(0, 0, 0, 0);
    background-size: 20px;
    float: right;
    line-height: normal;
    margin-top: 0px;
    padding-left: 45px !important;
}

.arrowHeading .ulTab {
    float: right;
    margin: 0px;
    margin-bottom: -11px;
    margin-right: 20px;
    margin-top: 4px;
    padding: 0px;
    text-align: right;
}

.arrowHeading .ulTab li {
    display: inline-block;
    margin: 0px;
}

.arrowHeading .ulTab li a {
    border: none;
    border-radius: 8px 8px 0px 0px;
    color: #aeabcc;
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    margin-right: 2px;
    padding: 8px 30px 7px;
    position: relative;
    text-align: center;
}

.arrowHeading .ulTab li:hover a,
.arrowHeading .ulTab li.active a {
    background-color: #fff;
    color: #383a66;
}

.panel-body {
    padding: 18px;
    position: relative;
}

/* Colored headers - via bg-* classes */

.panel-heading[class*='bg-'] { margin: -1px; }

.panel-heading[class*='bg-'],
.panel-heading[class*='bg-'] .glyphicon {
    border: none;
    color: #FFF;
}

.panel-heading[class*='bg-'] + .panel-body { border-top: none; }

.panel-footer { background-color: #fafafa; }

/*===============================================
B. Panel Addon - Menu
-----------------------------------------------
Typically placed under the panel header 
and used to hold buttons or menus 
================================================= */

.panel-menu {
    background-color: #fafafa;
    border-bottom: 1px solid #DDD;
    padding: 10px 13px;
}

.panel .panel-menu .btn.active {
    background-color: #FFF;
    box-shadow: none;
}

/*===============================================
C. Panel Addon - Sidemenu
-----------------------------------------------
A side column great for housing an
extra nav list. When used its sibling
panel body (content) is modified 
================================================= */

/* Sidemenu and content are both floated. 
* to create equal heights we use the 
* "Table Layout" css helpers. These helpers
* can be found in _helpers.scss */

.panel-sidemenu {
    background-color: #f6f6f6;
    padding: 10px 0px;
}

.panel-sidemenu ul.nav li {
    list-style: none;
    margin-bottom: 10px;
}

.panel-sidemenu ul.nav li.nav-title {
    color: #777;
    font-weight: 700;
    padding: 10px 0;
    text-decoration: none;
    text-shadow: 0 1px #FFF;
}

.panel-sidemenu ul.nav li.nav-title:hover { color: #777777; }

.panel-sidemenu ul.nav li a {
    color: #888;
    padding: 5px 0;
}

.panel-sidemenu ul.nav .divider {
    background: #e2e2e2;
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    width: 80%;
}

.panel-sidemenu ul.nav li a:focus { background-color: transparent !important; }

/*===============================================
D. Panel Addon - Tray
-----------------------------------------------
A special slide out tray used to store 
additional information. Such as online users.
================================================= */

.panel-tray {
    -webkit-transition: right .1s ease-in-out;
    background: #fafafa;
    border-left: 1px solid #DDD;
    height: 100%;
    padding: 15px;
    position: absolute;
    right: -210px;
    top: 0;
    transition: right .1s ease-in-out;
    width: 210px;
    z-index: 11;
}

.panel-tray.tray-open { right: 0px; }

.panel-tray-toggle {
    background: #fafafa;
    border: 1px solid #DDD;
    border-radius: 0 0 0 3px;
    border-right: none;
    cursor: pointer;
    height: 29px;
    left: -28px;
    overflow: hidden;
    position: absolute;
    top: -1px;
    width: 28px;
    z-index: 999;
}

.panel-tray-toggle .fa,
.panel-tray-toggle .glyphicon,
.panel-tray-toggle .glyphicons,
.panel-tray-toggle .imoon {
    color: #c7b7e5;
    font-size: 16px;
    padding: 6px;
    text-align: center;
}

/*===============================================
E. PANEL TABS
-----------------------------------------------
Panel Tab Navigation must be placed inside
".panel-heading" see Fusion Docs for example 
================================================= */

.panel-tabs {
    bottom: 10px;
    position: absolute;
    right: 15px;
}

.panel-tabs > li {
    float: left;
    margin-bottom: 0px;
    margin-left: 15px;
    position: relative;
}

.panel-tabs > li > a {
    background: transparent !important;
    border: 1px solid transparent;
    border-radius: 0;
    color: #aeabcc;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.428571429;
    padding: 5px 3px;
}

.panel-tabs > li > a:hover { background-color: transparent; }

/* hover and active states */

.panel-tabs > li.active > a, .panel-tabs > li.active > a:hover, .panel-tabs > li.active > a:focus {
    color: #383a66;
    cursor: default;
}

.panel-tabs > li.active:after {
    background: #c0447e;
    border-radius: 10px;
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    width: 100%;
}

/* PANEL TAB CORRECTION */

/* If you want a panel-like footer inside a tababble
* area you need to wrap the content in a ".tab-body"
* class. See timeline.html for an example(event panel) */

.tab-body { padding: 15px; }

.tab-footer {
    background-color: #f5f5f5;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: 1px solid #dddddd;
    padding: 10px 15px;
}

/*===============================================
F. Accordion 
-----------------------------------------------
Created with Bootstrap Panels
================================================= */

.accordion.panel-group .panel {
    border: none;
    box-shadow: none;
    margin-bottom: 3px;
}

.accordion.panel-group .panel + .panel { margin-top: 10px; }

/* Accordion Header */

.accordion .panel-heading a {
    display: block;
    text-decoration: none;
}


/* Accordion Widget Toggle Arrows */

.accordion .accordion-toggle-icon {
    display: inline-block;
    float: none !important;
    font-size: 18px;
    padding: 2px 12px 3px;
    vertical-align: middle;
}

.accordion .mainhedline {
    display: inline-block;
    line-height: 1.2;
    vertical-align: middle;
    width: calc(100% - 160px);
}

.accordion .mainhedline:last-child {
    float: none !important;
    min-width: 115px;
    padding-right: 20px !important;
    text-align: right;
    width: auto;
}

/* Accordion Toggle Arrow States */

.accordion .accordion-toggle-icon i:first-child { display: block; }

.accordion .accordion-toggle-icon i:last-child { display: none; }

.accordion .collapsed .accordion-toggle-icon i:first-child { display: none; }

.accordion .collapsed .accordion-toggle-icon i:last-child { display: block; }

/*===============================================
G. Alternate Panel Styles
================================================= */

/* Minimal - Style */

.panel.panel-alt {
    background: #FFF;
    border-color: #DDD;
    box-shadow: none;
}

.panel.panel-alt > .panel-heading {
    background-color: #FFF;
    box-shadow: none;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding-right: 15px;
}

.panel.panel-alt .panel-body {
    background-color: #fcfcfc;
    line-height: 22px;
    padding: 20px 30px;
}

/* ==============================================
IV. THEME ELEMENTS
A. Icons
B. Labels
C. Badges
D. Alerts
E. Thumbnails
F. Media Objects
G. Buttons
H. Progress Bars
I. Field Elements
J. Checkboxes
K. Switches
L. Tables
M. Pricing Tables
N. Tabs
O. Paginations
P. Bootstrap Modals
Q. Custom Modals
R. Boostrap Popover
=================================================
A. Icons - See Documentation For More Info
================================================= */

/* Some font libraries have large file sizes. 
* We optionally can attach .wf-loading to the 
* body tag and have the fonts only visible after 
* they are fully loaded or cached. Prevents rough
* icon flash and is currently used only on index.html */

.wf-loading .glyphicons,
.wf-loading .glyphicon,
.wf-loading .imoon,
.wf-loading .fa,
.wf-loading .iconsweets { opacity: 0 !important; }

/* Icon Transitions */

.glyphicon, .glyphicons,
.imoon, .fa, .iconsweets {
    -moz-transition: opacity 0.3s ease-in;
    -webkit-transition: opacity 0.3s ease-in;
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

/* Glyphicon Pro and Halfling */

.glyphicons-2x, .glyphicon-2x { font-size: 2em; }

.glyphicons-3x, .glyphicon-3x { font-size: 3em; }

.glyphicons-4x, .glyphicon-4x { font-size: 4em; }

.glyphicons-5x, .glyphicon-5x { font-size: 5em; }

/* Icomoon Font Icons */

.imoon-2x { font-size: 2em; }

.imoon-3x { font-size: 3em; }

.imoon-4x { font-size: 4em; }

.imoon-5x { font-size: 5em; }

/* IconSweets2 Font Icons */

.iconsweets-2x { font-size: 2em; }

.iconsweets-3x { font-size: 3em; }

.iconsweets-4x { font-size: 4em; }

.iconsweets-5x { font-size: 5em; }

/* Buttons with Icons 
* Cross browser problems were creating problems when
* an icon was given a larger font size than its sibling
* text. To fix Line height, vertical align, and top
* positioning have been redefined */

.btn .glyphicon, .btn .glyphicons {
    font-size: 1.1em;
    line-height: 0;
    top: -1px;
    vertical-align: middle;
}

/* A Helper Class to Align Icons Right in Control-forms */

span.field-icon-right,
i.field-icon-right {
    position: absolute;
    right: 10px;
    top: 8px;
}

/* Icon Background and Borders 
* properly align icons that have been placed inside of titles
* Useful for matching icon size to adjacent text 
* Icon Background Shapes */

.icon-circle {
    border-radius: 64px;
    overflow: visible;
    padding: 9px;
    position: relative;
    top: 0;
}

.icon-square {
    border-radius: 4px;
    padding: 9px;
    top: 0;
}

/* Icon Background Sizes */

.icon-circle.glyphicon-2x,
.icon-circle.glyphicons-2x { padding: 12px; }

.icon-circle.glyphicon-3x,
.icon-circle.glyphicons-3x { padding: 20px; }

.icon-circle.glyphicon-4x,
.icon-circle.glyphicons-4x { padding: 35px; }

.icon-square.glyphicon-2x,
.icon-square.glyphicons-2x { padding: 12px; }

.icon-square.glyphicon-3x,
.icon-square.glyphicons-3x { padding: 20px; }

.icon-square.glyphicon-4x,
.icon-square.glyphicons-4x { padding: 35px; }

/* WIDGET SPECIFIC ICON STYLING
* ALL elements which use icons have been
* moved from their respective positions
* and placed here for easy icon styling */

/* Header Button Icons */

.navbar-menus > div > button > span,
.navbar-menus > div > button > i {
    font-size: 15px;
    vertical-align: middle;
}

/* Special on-hover styles for user dropdown menu */

.user-menu ul.dropdown-items > li:hover .glyphicon { color: #d9534f; }

.user-menu ul.dropdown-items > li:last-child:hover .glyphicon { color: #888; }

.user-menu ul.dropdown-items > li:last-child > div:hover .glyphicon { color: #d9534f; }

/* Panel Heading Icon */

.panel-heading .panel-title .glyphicon,
.panel-heading .panel-title .glyphicons {
    font-size: 16px;
    padding-right: 8px;
    top: 2px;
}

/* Breadcrumb "Home" Icon */

.breadcrumb .glyphicon,
.breadcrumb .glyphicons {
    color: #777;
    font-size: 11px;
    margin-left: 1px;
    top: 0;
}

/* Panel Sidemenu Icons */

.panel-sidemenu ul.nav li.active .fa { color: #9590bc; }

.panel-sidemenu ul.nav li a:hover { background: none; }

.panel-sidemenu ul.nav li .fa {
    color: #BBB;
    float: left;
    font-size: 18px;
    margin-right: 10px;
    margin-top: -1px;
    text-align: center;
    width: 30px;
}

.panel-sidemenu ul.nav li a ion-icon {
    font-size: 16px;
    margin-right: 5px;
    position: relative;
    top: 3px;
    width: 30px;
}

/* Panel Tabs Icons */

.panel-tabs li .glyphicon,
.panel-tabs li .glyphicons,
.panel-tabs li .fa { font-size: 14px; }

.panel-tabs .imoon,
.panel-tabs .iconsweets {
    font-size: 14px;
    vertical-align: middle;
}

/* Mildly styles a font awesome based icon group
* used in occasionaly in panel heading. Look at 
* message widget on index.html for example */

.mini-action-icons .fa {
    color: #777;
    cursor: pointer;
    font-size: 16px;
    padding-right: 10px;
    position: relative;
    top: 2px;
}

/* Pricing Table Icons */

.pricing-tables .pricing-icons li .fa-times { color: #e74a4a; }

.pricing-tables .pricing-icons li .fa-ellipsis-h { color: #555555; }

/* Tab Navigation Icons */

.nav-tabs li .fa { font-size: 14px; }

.nav-tabs li .fa.fa-caret-down { font-size: 12px; }

/* Timeline Widget Icons */

.timeline-widget span.glyphicons {
    -webkit-box-shadow: 1px 1px 2px #AAA;
    background-color: #f0f0f0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
    border-radius: 50%;
    box-shadow: 1px 1px 2px #AAA;
    font-size: 18px;
    padding: 6px;
    position: relative;
    text-shadow: 0 1px #ffffff;
    top: 2px;
    width: auto;
    z-index: 11;
}

/* Flag Icons */

.flag-xs,
.flag-sm,
.flag,
.flag-lg {
    display: inline-block;
    vertical-align: middle;
}

.flag-xs {
    background: url(../img/flag_icons/flag-xs.png) no-repeat top left;
    height: 16px;
    width: 16px;
}

.flag-sm {
    background: url(../img/flag_icons/flag-sm.png) no-repeat top left;
    height: 32px;
    width: 32px;
}

.flag-sm.flag-fr { background-position: 0 0; }

.flag-sm.flag-de { background-position: 0 -33px; }

.flag-sm.flag-in { background-position: 0 -66px; }

.flag-sm.flag-es { background-position: 0 -99px; }

.flag-sm.flag-tr { background-position: 0 -132px; }

.flag-sm.flag-us { background-position: 0 -165px; }

.flag-xs.flag-fr { background-position: 0 0; }

.flag-xs.flag-de { background-position: 0 -17px; }

.flag-xs.flag-es { background-position: 0 -34px; }

.flag-xs.flag-tr { background-position: 0 -51px; }

.flag-xs.flag-us { background-position: 0 -68px; }

/*===============================================
B. Labels
================================================= */

.label {
    font-size: 84% !important;
    font-weight: 600;
    line-height: 24px;
    padding: .3em .7em .4em;
}

/* Label Sizes - ".label" required */

.label-sm {
    font-size: 75%;
    padding: .1em .65em .2em;
}

.label-lg {
    font-size: 95%;
    padding: .4em .9em .5em;
}

/* Label Shapes - ".label" required */

.label.label-rounded {
    border-radius: 1em;
    padding: .2em 0.85em .3em;
}

.label-sm.label-rounded { padding: .1em .65em .2em; }

.label-lg.label-rounded { padding: .4em .9em .5em; }

/* Custom Bootstrap Label */

label.error {
    color: #d9534f;
    font-size: 12px;
    font-weight: 600;
}

/*===============================================
C. Badges
================================================= */

.badge {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 7px;
}

/* Badge Sizes - ".badge" required */

.navbar-right .user-info .media .badge {
    background-color: #fff;
    border: 3px solid #ff007e;
    border-radius: 50%;
    color: #000;
    height: 53px;
    line-height: 39px;
    overflow: hidden;
    position: relative;
    width: 53px;
}

.badge-sm {
    font-size: 11px;
    padding: 2px 6px;
}

.profilepic {
    left: -1px;
    max-width: 100%;
    position: absolute;
    top: 0px;
}

.badge-lg { padding: 4px 8px; }

/*===============================================
D. Alerts
================================================= */

/* Alert Sizes */

.alert { font-size: 14px; }

.alert-sm { padding: 8px 35px 8px 15px; }

.alert-lg {
    font-size: 16px;
    padding: 25px 35px 25px 15px;
}

.alert-dismissable .close { color: #666; }

/*===============================================
E. Media Objects 
================================================= */

.media { border-bottom: 1px solid #ededed; }

.media, .media .media { margin-top: 15px; }

.media:last-child { border-bottom: none; }

.media > .pull-left { margin-right: 12px; }

.media-heading small { font-size: 11px; }

/*===============================================
F. Thumbnails 
================================================= */

.thumbnail { margin-bottom: 0; }

.thumbnail-xs {
    border: 2px solid #aaa;
    box-shadow: 0 0 1px #000 inset;
    max-width: 35px;
    padding: 1px;
}

.thumbnail-sm {
    border: 2px solid #aaa;
    box-shadow: 0 0 1px #000 inset;
    max-width: 40px;
    padding: 1px;
}

.thumbnail-border-lg { border-width: 3px; }

.thumbnail.rounded { border-radius: 64px; }

/* Button Settings */

.btn-primary {
    background-color: #363b7b !important;
    border-color: #363b7b !important;
    color: #fff !important;
}

.btn-primary2 {
    background-color: #bd4b7f !important;
    border-color: #bd4b7f !important;
    color: #fff !important;
}

.btn {
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.025em;
    outline: none;
    padding: 7px 20px 6px 20px;
    text-align: center;
    text-transform: uppercase;
}

.btn:active { box-shadow: none; }

.btn:focus, .btn:active:focus, .btn.active:focus {
    color: #fff;
    outline: none;
}

.btn.btn-default:focus, .btn.btn-default:active:focus, .btn.btn-default.active:focus {
    color: #777;
    outline: none;
}

.btn-link { color: #444; }

.btn-link:hover { color: #444; }

.btn i {
    font-size: 12px;
    margin-right: 3px;
}

.btn-back {
    background-color: #c1c6e8 !important;
    color: #fff !important;
}

.btn-search {
    background-color: #aedced !important;
    color: #373a66 !important;
}

.btn-add {
    background-color: #a1edc2 !important;
    color: #57836a !important;
}

.btn-add a {
    color: #57836a !important;
    text-decoration: none !important;
}

.btn-save {
    background-color: #1e2152 !important;
    color: #fff !important;
}

.btn-cncl {
    background-color: #ec5673 !important;
    color: #fff !important;
}

.btn-send {
    background: #01d485 url('https://api.iconify.design/cil:arrow-right.svg?color=%23fff') no-repeat no-repeat right 1.3rem center !important;
    color: #fff !important;
}

.btn-blue-save {
    background-color: #7ad6ef !important;
    color: #fff !important;
}

.btn-pink {
    background-color: #ba4d80 !important;
    color: #fff !important;
}

.btn-green {
    background-color: #01d485 !important;
    color: #fff !important;
}

.fillBG { background-color: #eef1fa !important; }

.btn-resolve {
    background-color: #5cb85c !important;
    border-color: #5cb85c !important;
    color: #fff !important;
}

.btn-dash-add {
    background-color: #1ffffe !important;
    border-color: #1ffffe !important;
    color: #222b5c !important;
}

.btn-file {
    background-color: #bd4b7f !important;
    border-color: #bd4b7f !important;
    height: 32px;
}

.btn-import {
    background-color: #1d2055 !important;
    color: #fff !important;
}

.btn-import a {
    color: #fff !important;
    text-decoration: none !important;
}

.btn-download {
    background-color: #bd4b7f !important;
    color: #fff !important;
}

.btn-fltr {
    background-color: #93d3ec !important;
    color: #fff !important;
}

.btn-rfrs,
.arrowHeading .btn.btn-rfrs {
    background: url('https://api.iconify.design/raphael:refresh.svg?color=%23fff') no-repeat 1.5rem center;
    background-color: #93d3ec !important;
    background-color: rgba(0, 0, 0, 0);
    color: #fff !important;
    padding-left: 35px !important;
}

.btn {
    -moz-user-select: initial;
    -ms-user-select: initial;
    -webkit-user-select: initial;
    border: none;
    border-radius: 5px; /*text-transform: uppercase; letter-spacing: 0.025em;*/
    color: #fff;
    font-size: 12px;
    line-height: normal;
    outline: none;
    padding: 5px 12px;
    user-select: initial;
}

.btn:focus, .btn:active:focus, .btn.active:focus {
    color: #fff;
    outline: none;
}

.btn.btn-default:focus, .btn.btn-default:active:focus, .btn.btn-default.active:focus {
    color: #777;
    outline: none;
}

.btn-link { color: #444; }

.btn-link:hover { color: #444; }


.label-primary { background-color: #9590bc; }

.label-primary[href]:hover, .label-primary[href]:focus { background-color: #9590bc; }

/* Button Sizes */

.btn-xs {
    border-radius: 2px;
    padding: 2px 6px;
}

.btn-sm { line-height: 1.5; }

.btn-lg { line-height: 1.33; }

/* Button Shapes */

.btn-square { border-radius: 0; }

.btn-default, .bg-default { text-shadow: none; }

.btn-success.btn-gradient, .bg-success.bg-gradient {
    background-color: #44ab00;
    border-color: #3f9d00;
}

.btn-info.btn-gradient, .bg-info.bg-gradient {
    background-color: #14abd8;
    border-color: #269abc;
}

.btn-primary.btn-gradient, .bg-primary.bg-gradient { background-color: #0088cc; }

.btn-warning.btn-gradient, .bg-warning.bg-gradient { background-color: #f28900; }

.btn-danger.btn-gradient, .bg-danger.bg-gradient { background-color: #d3332e; }

.btn-default.btn-gradient, .bg-default.bg-gradient { background-color: #f0f0f0; }

.btn-alert { background-color: #7857ca; }

.btn-alert.btn-gradient { background-color: #5d3ab5; }

.btn-alert .caret { border-top-color: #fff; }

/* Button Hover effect */

.btn:hover {
    color: #fff; /*background:#72bb72;*/
}

button.btn:hover { background: #f4f4f4; }

.btn-gradient:hover,
.bg-gradient:hover {
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.45) 1%, rgba(255, 255, 255, 0.15) 100%);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 1%, rgba(255, 255, 255, 0.15) 100%);
}

/* Button Gradients 
* Gradients are created using a transparent gradient 
* overlay. This way you can transform any element 
* with a background color into a gradient without 
* having to use additional colors */

.btn-gradient,
.bg-gradient {
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background-color: "";
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.15) 100%);
    background-repeat: repeat-x;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* Custom Themed Button group using all default bootstrap classes */

.btn-group.btn-group-themed .btn-default:hover,
.btn-group.btn-group-themed .btn-default:focus,
.btn-group.btn-group-themed .btn-default:active,
.btn-group.btn-group-themed .btn-default.active,
.btn-group.btn-group-themed .open .dropdown-toggle.btn-default {
    background-color: #e3def8;
    border-color: #cbc0f8;
    box-shadow: none;
    color: #6b3fa2;
}

/* Button Dropdown Menu Sizes */

.dropdown-menu.dropdown-sm { min-width: 120px; }

.dropdown-menu.dropdown-sm li { margin-bottom: 0; }

.dropdown-menu.dropdown-sm li a {
    font-size: 13px;
    padding: 2px 12px;
}

/*===============================================
H. Progress Bars
================================================= */

.progress {
    background-color: #ececec;
    box-shadow: none;
    height: 18px;
}

.progress-bar { line-height: 18px; }

/* Progress Bar Sizes - ".progress" always required */

.progress.progress-sm {
    border-radius: 2px;
    height: 12px;
}

.progress.progress-sm .progress-bar { line-height: 12px; }

.progress.progress-lg { height: 28px; }

.progress.progress-lg .progress-bar { line-height: 28px; }

/*===============================================
I. Field Elements
================================================= */

/* Default Select List */

select { cursor: pointer; }

/* Bootstrap Help Block */

.help-block {
    color: #888;
    margin-top: 7px;
}

.radio-inline, .checkbox-inline { line-height: 20px; }

/* Input Label  */

label { font-weight: 600; }

/* Input Design */

select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: #ffffff url("../images/upDownIcon.png") no-repeat right 1.3rem center;
    background-size: 16px;
    border-radius: 5px !important;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    padding: 7px 10px 5px;
    position: relative;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    vertical-align: middle;
    width: 100%;
}

.form-control {
    border-color: #DEDEDE;
    border-radius: 5px !important;
    box-shadow: none;
    font-size: 12px;
    height: 32px;
}

.dashboard select.form-control { background: #f5f5fd url(../images/upDownIcon.png) no-repeat right 1.3rem center; }

/* Input Sizes */

.input-xs {
    font-size: 12px;
    height: 26px;
    line-height: 1.6;
    padding: 4px 10px;
}

/* Input Addon */

.input-group-addon {
    background-color: #fafafa;
    border-color: #DDD;
    color: #231f20;
    min-width: 40px;
}

.input-group-addon a { color: #231f20; }

/* Input Focus */

.form-control:focus {
    border-color: #ccc;
    box-shadow: none;
}

/* Disabled Input */

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: #fafafa; }

.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
}



/* Alternate Text Field Style - Gradient */

.text-field-alt {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    background-color: #f0f0f0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
    border: 1px solid #cccccc;
    border-radius: 1px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    min-height: 40px;
    text-shadow: 0 1px #ffffff;
}

/*===============================================
J. Checkboxes - Custom Fusion exlcusive
        pure CSS Checkboxes
================================================= */

.cBox {
    height: 20px;
    margin-bottom: 5px;
    margin-top: 5px;
    position: relative;
    width: 20px;
}

.cBox.cBox-inline { display: inline-block; }

.cBox.cBox-inline + .cBox.cBox-inline { margin-left: 18px; }

.cBox input { margin: 0; }

.cBox label {
    color: #AAA;
    cursor: pointer;
    font-size: 11px;
    font-weight: 400;
    margin: 0;
    padding-left: 10px;
}


.cBox label:before {
    background-color: #f5f5fd;
    border: 1px solid #CCC;
    border-color: rgba(0, 0, 0, 0.07) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.18);
    border-radius: 5px;
    content: "";
    cursor: pointer;
    height: 20px;
    left: -3px;
    position: absolute;
    top: -1px;
    width: 20px;
    /*
border-color: #cccccc rgba(0, 0, 0, 0.19) rgba(0, 0, 0, 0.18);
background-color: #f28900;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.1) 100%);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff',endColorstr='#00ffffff',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);*/
}

.cBox.cBox-gradient label:before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.15) 100%);
    background-repeat: repeat-x;
}

.cBox label:after {
    -moz-transform: rotate(-48deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -ms-transform: rotate(-48deg);
    -o-transform: rotate(-48deg);
    -webkit-transform: rotate(-48deg);
    background: transparent;
    border: 2px solid #000;
    border-right: none;
    border-top: none;
    content: '';
    filter: alpha(opacity=0);
    height: 6px;
    left: 1px;
    opacity: 0;
    position: absolute;
    top: 5px;
    transform: rotate(-48deg);
    width: 12px;
}

.cBox input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

/* Checkboxes - Custom Colors */

.cBox.facebook-bg label:before { background-color: #9de0f5; }

.cBox.twitter-bg label:before { background-color: #a8e9ea; }

.cBox.pinterest-bg label:before { background-color: #ffac9c; }

.cBox.instagram-bg label:before { background-color: #fbb882; }

/*===============================================
K. Switches - Created with pure CSS
================================================= */

div.switch label {
    border: 1px solid #dddddd;
    border-radius: 50px;
    cursor: pointer;
    display: block;
    height: 25px;
    margin: 0 !important;
    position: relative;
    text-indent: 100%;
    transition: left 0.15s ease-out;
    width: 40px;
}

div.switch input { display: none; }

div.switch input + label {
    margin-left: 0;
    margin-right: 0;
}

div.switch label:after {
    -moz-transition: left .15s ease-out;
    -webkit-transition: left .15s ease-out;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0px 4px 0 rgb(32 33 36 / 0.4);
    content: "";
    display: block;
    height: 23px;
    left: 0px;
    position: absolute;
    top: 0px;
    transition: left 0.15s ease-out;
    width: 23px;
}

div.switch input:checked + label { background: #2ba6cb; }

div.switch input:checked + label:after { left: 15px; }





div.switch label { }

div.switch label:after { background: white; }

div.switch input:checked + label { background: #2ba6cb; }

/* Switch Sizes */

div.switch.switch-lg label {
    height: 32px;
    width: 65px;
}

div.switch.switch-lg label:after {
    height: 30px;
    width: 30px;
}

div.switch.switch-lg input:checked + label:after { left: 35px; }

div.switch.switch-sm label {
    height: 22px;
    width: 45px;
}

div.switch.switch-sm label:after {
    height: 16px;
    width: 16px;
}

div.switch.switch-sm input:checked + label:after { left: 26px; }

div.switch.switch-xs label {
    height: 19px;
    width: 39px;
}

div.switch.switch-xs label:after {
    height: 13px;
    width: 13px;
}

div.switch.switch-xs input:checked + label:after { left: 22px; }

div.switch.radius label { border-radius: 4px; }

div.switch.radius label:after { border-radius: 3px; }

/* Switch Option - Rounded */

div.switch.round { border-radius: 1000px; }

div.switch.round label { border-radius: 26px; }

div.switch.round label:after { border-radius: 26px; }

/* Switch Option - Inline */

.switch.switch-inline { display: inline-block; }

.switch.switch-inline + .switch.switch-inline { margin-left: 15px; }


/*===============================================
M. Pricing Tables
================================================= */

/* Regular Pricing Plan */

.pricing-tables .pricing-plan {
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    background-color: #f6f6f6;
    border: 1px solid #CCC;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    margin: 30px -16px 20px -16px;
    padding: 0 0 20px 0;
}

/* Pricing Table Title */

.pricing-tables .pricing-title {
    border-bottom: 1px solid #DDD;
    padding: 25px 5px 20px;
}

.pricing-tables .pricing-title h3 {
    color: #555;
    font-size: 26px;
    font-weight: 200;
    margin-bottom: 0;
    text-transform: none;
}

/* Pricing Table Cost Figure */

.pricing-info { margin: 20px 0; }

.pricing-info .currency-sign {
    color: #333;
    display: inline-block;
    font-size: 26px;
    font-weight: 200;
    margin-left: -20px;
    padding-left: 5px;
    padding-top: 6px;
    vertical-align: top;
}

.pricing-info h2 {
    color: #444;
    display: inline-block;
    font-size: 54px;
    font-weight: 600;
    margin-bottom: 0;
}

.pricing-info h6 {
    color: #888;
    font-weight: 200;
    margin: 4px 0 0;
}

/* Pricing Table Item Features */

.pricing-features ul {
    border-top: 1px solid #DDD;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pricing-features li {
    background-color: #FFF;
    border-bottom: 1px solid #DDD;
    color: #999;
    margin: 0;
    padding: 10px 0;
}

.pricing-tables .pricing-features li b { font-weight: 600; }

.pricing-tables .pricing-features li i.fa {
    color: #777;
    font-size: 15px;
    padding-right: 8px;
}

/* Pricing Table Icons */

.pricing-tables .pricing-icons ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pricing-tables .pricing-icons li {
    background-color: #FFF;
    border-bottom: 1px solid #DDD;
    font-size: 18px;
    margin: 0;
    padding: 10px 0;
}

/* Pricing Table Sign Up Button*/

.pricing-tables a.btn {
    margin-top: 25px;
    padding: 8px 26px;
}

/* Hero Pricing Plan Modifications */

.hero-plan { z-index: 10; }

.hero-plan .pricing-plan {
    -webkit-box-shadow: 0 0 20px rgba(100, 100, 100, 0.2);
    background-color: #f6f6f6;
    border-bottom: 1px solid #BBB;
    box-shadow: 0 0 20px rgba(100, 100, 100, 0.2);
    margin: 0 -17px 20px -17px;
    padding: 0 0 20px 0;
}

.hero-plan .pricing-plan .pricing-title {
    color: #FFF;
    margin: -1px -1px 0 -1px;
}

.hero-plan .pricing-plan .pricing-title h3 {
    color: #FFF;
    font-weight: 600;
}

.hero-plan .pricing-plan .pricing-subtitle {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    text-transform: uppercase;
}

.hero-plan .pricing-plan a.btn { margin: 40px 0 20px; }

/*===============================================
N. Tabs
================================================= */

/* TAB CONTAINER */

.tab-block { position: relative; }

.tab-block .tab-content {
    background-color: #FFF;
    overflow: auto;
}

/* TAB CONTENT PANEL */

.tab-content {
    border: 1px solid #CCC;
    min-height: 125px;
    padding: 16px 12px;
    position: relative;
    z-index: 10;
}

/* TAB NAVIGATION */

.nav-tabs {
    border: 0;
    position: relative;
}

.nav-tabs > li {
    float: left;
    margin-bottom: -1px;
}

.nav-tabs > li > a {
    background: #fafafa;
    border-color: #CFCFCF;
    border-radius: 0;
    color: #777;
    font-size: 12px;
    font-weight: 700;
    margin-right: -1px;
    padding: 9px 16px;
    position: relative;
    z-index: 9;
}

.nav-tabs > li:first-child > a { margin-left: 0; }

/* TAB NAVIGATION STATES */

.nav-tabs > li > a:hover {
    border-color: #CFCFCF;
    color: #555;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    background: #FFF;
    border-bottom: 1px solid #FFF;
    border-color: #CFCFCF;
    color: #555555;
    cursor: default;
    position: relative;
    z-index: 12;
}

/* open state for dropdown menus in nav 
* containers. Also a direct bootstrap override */

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    border-color: #CFCFCF;
    color: #428bca;
}

/* TAB NAVIGATION - ALT STYLE: BORDER */

.tabs-border.nav-tabs > li.active > a, .tabs-border-bottom .nav-tabs > li.active > a {
    border-top: 2px solid #e6995b;
    margin-top: -1px;
}

/* TAB NAVIGATION - ALT STYLE: BORDER - BOTTOM */

.tabs-border-bottom.nav-tabs > li > a, .tabs-border-bottom .nav-tabs > li > a {
    background: #f9f9f9;
    color: #BBB;
    font-weight: 600;
}

.tabs-border-bottom.nav-tabs > li.active > a, .tabs-border-bottom .nav-tabs > li.active > a {
    background: #f7f7f7;
    border-bottom: 2px solid #e6995b;
    border-color: #DDD;
    color: #555;
    font-weight: 600;
    margin-bottom: -1px;
}

/* TAB NAVIGATION - ALT STYLE: BACKGROUND */

.tabs-bg.nav {
    background: #f5f5f5;
    border: 1px solid #CCC;
    border-bottom: none;
    padding: 10px 10px 0;
}

/* TABS - Float Right */

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

.nav-tabs.tabs-right > li:first-child > a { margin-right: 0; }

/* TABS - NAVIGATION BELOW */

.tabs-below { position: relative; }

.tabs-below > li {
    float: left;
    margin-top: -1px;
}

.tabs-below > li > a {
    background: #fafafa;
    border: 1px solid #CFCFCF;
    color: #777;
    font-size: 12px;
    font-weight: 700;
    margin-right: -1px;
    padding: 11px 16px;
    position: relative;
    z-index: 9;
}

/* TAB NAVIGATION STATES */

.tabs-below > li.active > a, .tabs-below > li.active > a:hover, .tabs-below > li.active > a:focus {
    background: #FFF;
    border-color: #CFCFCF;
    border-top: 1px solid #FFF;
    color: #555555;
    cursor: default;
    position: relative;
    z-index: 12;
}

/* TAB NAVIGATION - ALT STYLE: BORDER */

.tabs-border.tabs-below > li.active > a, .tabs-border .tabs-below > li.active > a {
    border-bottom: 2px solid #c7b7e5;
    margin-bottom: -1px;
}

/* TAB NAVIGATION - ALT STYLE: BACKGROUND */

.tabs-bg.tabs-below {
    background: #f5f5f5;
    border: 1px solid #CCC;
    border-top: none;
    padding: 0 10px 6px;
}

/* TABS - NAVIGATION LEFT */

.tabs-left { float: left; }

.tabs-left > li {
    float: none;
    margin: 0 -1px -1px 0;
}

.tabs-left > li > a {
    background: #fafafa;
    border: 1px solid transparent;
    border-color: #CFCFCF;
    color: #777;
    font-size: 12px;
    font-weight: 700;
    padding: 12px 16px;
}

/* TAB NAVIGATION STATES */

.tabs-left > li.active > a, .tabs-left > li.active > a:hover, .tabs-left > li.active > a:focus {
    background: #FFF;
    border-color: #CCC #FFF #CCC #CCC;
    color: #555;
    cursor: default;
    position: relative;
    z-index: 12;
}

/* TAB NAVIGATION - ALT STYLE: BORDER */

.tabs-border.tabs-left > li.active > a, .tabs-border .tabs-left > li.active > a {
    border-left: 2px solid #c7b7e5;
    margin-left: -1px;
}

/* WELL TABS - GREY MICRO NAV TABS */

.well-tabs { position: relative; }

.well-tabs li {
    float: left;
    margin: 4px 6px;
}

.well-tabs li:first-child { margin-left: 0; }

.well-tabs li a {
    background-color: #dfd9f7;
    border: 1px solid #beaff9;
    border-radius: 4px;
    color: #8457bb;
    font-size: 11px;
    font-weight: 600;
    line-height: 15px;
    padding: 6px 8px;
}

.well-tabs li a:hover, .well-tabs li.active a { background-color: #fff; }

/* Same style but inversed colors */

.well-tabs-inverse li a {
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #888;
    font-size: 11px;
    font-weight: 600;
    line-height: 15px;
    padding: 6px 8px;
}

.well-tabs-inverse li a:hover, .well-tabs-inverse li.active a {
    background-color: #e3def8;
    border-color: #cbc0f8;
    color: #6b3fa2;
}

/*===============================================
O. Paginations
================================================= */

/* MINI PAGERS */

.pager {
    cursor: pointer;
    margin: 5px 0;
}

.pager li > a, .pager li > span { font-size: 14px; }

.pager.pager-sm li > a, .pager.pager-sm li > span { font-size: 12px; }

.pager.pager-lg li > a, .pager.pager-lg li > span { font-size: 16px; }

/* PAGINATIONS */

.pagination {
    cursor: pointer;
    margin: 5px 0;
}

/* ROUNDED PAGINATION */

.pagination-rounded > li:first-child > a { border-radius: 50% 0 0 50%; }

.pagination-rounded > li:last-child > a { border-radius: 0 50% 50% 0; }

/* ALT STYLE */

.pagination-alt > li > a {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(to bottom, #ffffff 1%, #f1f1f1 100%);
    background-repeat: repeat-x;
    border-color: #ccc;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    color: #666;
    font-weight: 600;
    margin: 0 4px;
    padding: 4px 11px;
    text-shadow: 0 1px #FFF;
}

.pagination-alt > li.active > a {
    background-color: #555;
    background-image: none;
    border-color: #444;
}

/* SIZES FOR ALT STYLE */

.pagination-alt.pagination-sm > li > a {
    font-weight: 700;
    margin: 0 3px;
    padding: 4px 9px;
}

.pagination-alt.pagination-lg > li > a {
    margin: 0 5px;
    padding: 4px 13px;
}

/* pagination-alt fixes */

.pagination-alt.pagination-sm > li:first-child > a, .pagination-alt.pagination-lg > li:first-child > a { margin-left: 0; }

/*===============================================
P. Bootstrap Modals
================================================= */

.modal-backdrop.in { opacity: 0.7; }

/* Modal sizes - element always requires
* default ".modal-dialog" class */

.modal-dialog-sm { width: auto; }

@media screen and (min-width: 768px) {
    .modal-dialog { padding-top: 50px; }

    .modal-dialog-sm { width: 425px; }
}

/* Modal Header */

.modal-header {
    background: #f2f2f2;
    border-bottom: 1px solid #c9c9c9;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    height: 45px;
    line-height: 35px;
    padding: 5px 15px;
    position: relative;
}

.modal-header button,
.modal-title { line-height: inherit; }

.modal-footer {
    background-color: #f5f5f5;
    border-radius: 0;
    border-top: 1px solid #dddddd;
    padding: 10px 15px;
}

/*===============================================
Q. Custom Modals
================================================= */

/* Login Form Modal */

#formModal .modal-content {
    margin: 0 auto;
    position: relative;
    width: 400px;
}

#formModal .modal-body { padding: 15px 20px 0 20px; }

#formModal #login-avatar {
    border-bottom: 1px dashed #DDD;
    margin: 15px 20px 25px;
    padding-bottom: 25px;
}

#formModal #login-avatar img {
    border: 2px solid #DDD;
    display: block;
    margin: 0 auto;
    padding: 5px;
}

#formModal .login-alert {
    font-size: 13px;
    padding: 9px 13px;
}

/*===============================================
R. Content Heading Bar
================================================= */

.content-header {
    background: #f6f6f6;
    border: 1px solid #CCC;
    border-radius: 4px;
    padding: 12px 15px;
}

/*===============================================
R. Boostrap Popover
================================================= */

.popover { z-index: 1100; }

/*===============================================
S. Boostrap List
================================================= */

.list-unstyled,
.list-unstyled li { margin: 0; }

/*=================================================
v. HELPERS
A. General
B. Font Size 
C. Table Layout
D. Padding
E. Margin
F. Line Height
G. Borders
H. Max Width
===================================================
A. General/Misc Helpers
=================================================== */

/* overflow Helpers */

.overflow-v { overflow: visible !important; }

.overflow-h { overflow: hidden !important; }

/* Center Grid Column Helper */

.center-column {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/* Vertical Align Helpers */

.va-t { vertical-align: top !important; }

.va-m { vertical-align: middle !important; }

.va-b { vertical-align: bottom !important; }

.va-s { vertical-align: super !important; }

/* Relative Position Helper */

.posr { position: relative !important; }

/* Inline Block Helper */

.ib, .inline-object { display: inline-block !important; }

/* pointer cursor */

.cursor { cursor: pointer !important; }

/* Useful for emphasizing a disabled input */

.option-disabled { opacity: 0.6; }

/* unstyled input */

.input-unstyled,
.input-unstyled:hover,
.input-unstyled:focus {
    background: none;
    border: none;
    box-shadow: none;
    outline: none;
}

/*===================================================
B. Table Layout Helpers - specifically for widgets
===================================================== */

.table-layout {
    display: table;
    margin: 0;
    table-layout: fixed;
    width: 100%;
}

/* table-layout helper content */

.table-layout > div {
    display: table-cell;
    float: none;
}

@media (max-width: 1300px) {
    .table-layout.table-clear-md,
    .table-layout.table-clear-md > div {
        display: block;
        float: none;
    }
}

@media (max-width: 992px) {
    .table-layout.table-clear-sm,
    .table-layout.table-clear-sm > div {
        display: block;
        float: none;
    }
}

@media (max-width: 767px) {
    .table-layout.table-clear-xs,
    .table-layout.table-clear-xs > div {
        display: block;
        float: none;
    }
}

/*===============================================
C. Font Size Helpers
================================================= */

.fs3 { font-size: 4px !important; }

.fs4 { font-size: 4px !important; }

.fs5 { font-size: 5px !important; }

.fs6 { font-size: 6px !important; }

.fs7 { font-size: 7px !important; }

.fs8 { font-size: 8px !important; }

.fs9 { font-size: 9px !important; }

.fs10 { font-size: 10px !important; }

.fs11 { font-size: 11px !important; }

.fs12 { font-size: 12px !important; }

.fs13 { font-size: 13px !important; }

.fs14 { font-size: 14px !important; }

.fs15 { font-size: 15px !important; }

.fs16 { font-size: 16px !important; }

.fs18 { font-size: 18px !important; }

.fs20 { font-size: 20px !important; }

.fs22 { font-size: 22px !important; }

.fs24 { font-size: 24px !important; }

.fs26 { font-size: 26px !important; }

.fs28 { font-size: 28px !important; }

.fs30 { font-size: 30px !important; }

.fs32 { font-size: 32px !important; }

.fs35 { font-size: 35px !important; }

.fs40 { font-size: 40px !important; }

.fs45 { font-size: 45px !important; }

.fs50 { font-size: 50px !important; }

/*===============================================
D. Padding Helpers
================================================= */

.pn { padding: 0 !important; }

.p1 { padding: 1px !important; }

.p2 { padding: 2px !important; }

.p3 { padding: 3px !important; }

.p4 { padding: 4px !important; }

.p5 { padding: 5px !important; }

.p6 { padding: 6px !important; }

.p7 { padding: 7px !important; }

.p8 { padding: 8px !important; }

.p10 { padding: 10px !important; }

.p15 { padding: 15px !important; }

.p20 { padding: 20px !important; }

.p25 { padding: 25px !important; }

.p30 { padding: 30px !important; }

.p35 { padding: 35px !important; }

.p40 { padding: 40px !important; }

.p50 { padding: 50px !important; }

.ptn { padding-top: 0 !important; }

.pt5 { padding-top: 5px !important; }

.pt10 { padding-top: 10px !important; }

.pt15 { padding-top: 15px !important; }

.pt20 { padding-top: 20px !important; }

.pt25 { padding-top: 25px !important; }

.pt30 { padding-top: 30px !important; }

.pt35 { padding-top: 35px !important; }

.pt40 { padding-top: 40px !important; }

.pt50 { padding-top: 50px !important; }

.prn { padding-right: 0 !important; }

.pr5 { padding-right: 5px !important; }

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

.pr15 { padding-right: 15px !important; }

.pr18 { padding-right: 18px !important; }

.pr20 { padding-right: 20px !important; }

.pr25 { padding-right: 25px !important; }

.pr30 { padding-right: 30px !important; }

.pr35 { padding-right: 35px !important; }

.pr40 { padding-right: 40px !important; }

.pr50 { padding-right: 50px !important; }

.pbn { padding-bottom: 0 !important; }

.pb3 { padding-bottom: 3px !important; }

.pb5 { padding-bottom: 5px !important; }

.pb10 { padding-bottom: 10px !important; }

.pb15 { padding-bottom: 15px !important; }

.pb20 { padding-bottom: 20px !important; }

.pb25 { padding-bottom: 25px !important; }

.pb30 { padding-bottom: 30px !important; }

.pb35 { padding-bottom: 35px !important; }

.pb40 { padding-bottom: 40px !important; }

.pb50 { padding-bottom: 50px !important; }

.pln { padding-left: 0 !important; }

.pl5 { padding-left: 5px !important; }

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

.pl13 { padding-left: 13px !important; }

.pl15 { padding-left: 15px !important; }


.pl20 { padding-left: 20px !important; }

.pl25 { padding-left: 25px !important; }

.pl30 { padding-left: 30px !important; }

.pl35 { padding-left: 35px !important; }

.pl40 { padding-left: 40px !important; }

.pl50 { padding-left: 50px !important; }

.plr5 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/*===============================================
E. Margin Helpers
================================================= */

.mn { margin: 0 !important; }

.m1 { margin: 1px !important; }

.m2 { margin: 2px !important; }

.m3 { margin: 3px !important; }

.m4 { margin: 4px !important; }

.m5 { margin: 5px !important; }

.m8 { margin: 8px !important; }

.m10 { margin: 10px !important; }

.m15 { margin: 15px !important; }

.m20 { margin: 20px !important; }

.m25 { margin: 25px !important; }

.m30 { margin: 30px !important; }

.m35 { margin: 35px !important; }

.m40 { margin: 40px !important; }

.m50 { margin: 50px !important; }

.mtn { margin-top: 0 !important; }

.mt3 { margin-top: 3px !important; }

.mt4 { margin-top: 4px !important; }

.mt5 { margin-top: 5px !important; }

.mt8 { margin-top: 8px !important; }

.mt9 { margin-top: 9px !important; }

.mt10 { margin-top: 10px !important; }

.mt15 { margin-top: 15px !important; }

.mt20 { margin-top: 20px !important; }

.mt25 { margin-top: 25px !important; }

.mt30 { margin-top: 30px !important; }

.mt35 { margin-top: 35px !important; }

.mt40 { margin-top: 40px !important; }

.mt50 { margin-top: 50px !important; }

.mrn { margin-right: 0 !important; }

.mr5 { margin-right: 5px !important; }

.mr10 { margin-right: 10px !important; }

.mr15 { margin-right: 15px !important; }

.mr20 { margin-right: 20px !important; }

.mr25 { margin-right: 25px !important; }

.mr30 { margin-right: 30px !important; }

.mr35 { margin-right: 35px !important; }

.mr40 { margin-right: 40px !important; }

.mr50 { margin-right: 50px !important; }

.mbn { margin-bottom: 0 !important; }

.mb5 { margin-bottom: 5px !important; }

.mb9 { margin-bottom: 9px !important; }

.mb10 { margin-bottom: 10px !important; }

.mb15 { margin-bottom: 15px !important; }

.mb20 { margin-bottom: 20px !important; }

.mb25 { margin-bottom: 25px !important; }

.mb30 { margin-bottom: 30px !important; }

.mb35 { margin-bottom: 35px !important; }

.mb40 { margin-bottom: 40px !important; }

.mb50 { margin-bottom: 50px !important; }

.mln { margin-left: 0 !important; }

.ml5 { margin-left: 5px !important; }

.ml10 { margin-left: 10px !important; }

.ml15 { margin-left: 15px !important; }

.ml20 { margin-left: 20px !important; }

.ml25 { margin-left: 25px !important; }

.ml30 { margin-left: 30px !important; }

.ml35 { margin-left: 35px !important; }

.ml40 { margin-left: 40px !important; }

.ml50 { margin-left: 50px !important; }

/*===============================================
F. LineHeight Helpers
================================================= */

.lh0 { line-height: 0 !important; }

.lh5 { line-height: 5px !important; }

.lh7 { line-height: 7px !important; }

.lh10 { line-height: 10px !important; }

.lh15 { line-height: 15px !important; }

.lh20 { line-height: 20px !important; }

.lh25 { line-height: 25px !important; }

.lh30 { line-height: 30px !important; }

.lh35 { line-height: 35px !important; }

.lh40 { line-height: 40px !important; }

/*===============================================
G. Border Helpers
================================================= */

/* Default Border */

.shadow-none { box-shadow: none !important; }

.border { border: 1px solid #DDD; }

.border-left { border-left: 1px solid #DDD; }

.border-right { border-right: 1px solid #DDD; }

.border-top { border-top: 1px solid #DDD; }

.border-bottom { border-bottom: 1px solid #DDD; }

/* Border Radius */

.br0 { border-radius: 0px !important; }

.br1 { border-radius: 1px !important; }

.br2 { border-radius: 2px !important; }

.br3 { border-radius: 3px !important; }

.br4 { border-radius: 4px !important; }

.br6 { border-radius: 6px !important; }

.br8 { border-radius: 8px !important; }

.br12 { border-radius: 12px !important; }

.br24 { border-radius: 24px !important; }

.br64 { border-radius: 64px !important; }

/* circle */

/* Border Width */

.bw1 { border-width: 1px !important; }

.bw2 { border-width: 2px !important; }

.bw3 { border-width: 3px !important; }

.bw4 { border-width: 4px !important; }

.bw5 { border-width: 5px !important; }

/* Border Style */

.bs-dashed { border-style: dotted !important; }

/* Disable Border */

.border-left-none { border-left: none !important; }

.border-right-none { border-right: none !important; }

.border-top-none { border-top: none !important; }

.border-bottom-none { border-bottom: none !important; }

.border-none { border: none !important; }

/*===============================================
H. Max Width Helpers
================================================= */

.mw10 { max-width: 10px !important; }

.mw20 { max-width: 20px !important; }

.mw30 { max-width: 30px !important; }

.mw35 { max-width: 35px !important; }

.mw40 { max-width: 40px !important; }

.mw45 { max-width: 45px !important; }

.mw50 { max-width: 50px !important; }

.mw60 { max-width: 60px !important; }

.mw80 { max-width: 80px !important; }

.mw100 { max-width: 100px !important; }

.mw140 { max-width: 140px !important; }

.mw160 { max-width: 160px !important; }

.mw180 { max-width: 180px !important; }

.mw200 { max-width: 200px !important; }

.mw240 { max-width: 240px !important; }

.mw280 { max-width: 280px !important; }

.mw320 { max-width: 320px !important; }

/* ================================================
VI. WIDGETS
A. Table Widget
B. Search Bar Widget
C. Tile Widget
D. Calendar Widget
===================================================
A. Table Widget
-------------------------------------------------
This is a multi-purpose widget. Apply it to
any table to access table styles. Commonly
inside a panel.
=================================================== */

.table-checklist td { cursor: pointer; }

.table-widget .tab-content {
    border: 0;
    overflow: hidden;
    padding: 0;
}

/* Table items (labels, badges, progress bars etc) */

.table-widget .progress {
    height: 13px;
    margin: 0;
    width: 80%;
}

.table-widget .label, .table-widget .badge { margin-right: 7px; }

.textsize { font-size: 13px; }

/* Tables with the .table-checklist class become clickable
* if you want text to have a line-through effect on click
* add the .text-slash class to the element */

.table-checklist tr.task-checked { color: #bbbbbb; }

.table-checklist tr.task-checked .text-slash { text-decoration: line-through; }

/* Table item checked state - class added via JS */

.table-checklist tr.task-checked .label, .table-checklist tr.task-checked .progress { opacity: 0.3; }

/*===============================================
D. Search Bar Widget
================================================= */

.search-widget { position: relative; }

#search-widget {
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
    background: #f4f7fa;
    border: 1px solid #d8dee6;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
    height: 85px;
    margin-bottom: 50px;
    padding: 20px 25px;
}

.search-bar-widget {
    float: left;
    min-height: 43px;
    padding: 9px 12px 9px 40px;
    width: 82%;
}

#search-widget .search-widget-icon {
    color: #999;
    font-size: 16px;
    left: 15px;
    position: absolute;
    top: 14px;
}

#search-widget button {
    float: left;
    font-weight: 600;
    margin-left: 2%;
    padding: 10px;
    width: 16%;
}

/*===============================================
B. Widget Tile - Full Icon BG
================================================= */

.icon-bg {
    font-size: 50px;
    line-height: 90px;
    opacity: 0.5;
    position: absolute;
    right: 10px;
    top: -4px;
}

/*===============================================
D. Calendar Widget
================================================= */

#calendar { position: relative; }

#external-events {
    background: #eee;
    border: 1px dashed #CCC;
    margin-bottom: 20px;
    min-height: 65px;
    padding: 15px 10px;
}

.external-event {
    background-color: #a389d5;
    border-radius: 2px;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    margin-right: 10px;
    max-width: 20%;
    padding: 7px 10px;
    width: 200px;
}

.fc-header .fc-button {
    background-color: #f7f7f7;
    background-image: linear-gradient(to bottom, #ffffff 1%, #f1f1f1 100%);
    background-repeat: repeat-x;
    border: 1px solid #CCC;
    border-radius: 1px;
    color: #666;
    font-size: 12px;
    font-weight: 600;
    height: 26px;
    margin: 0;
    padding: 1px 10px;
    text-align: center;
    text-shadow: 0 1px #ffffff;
}

table.fc-header {
    background: #f5f5f5;
    border: 1px solid #CCC;
    border-radius: 4px;
    margin-bottom: 20px;
}

.fc-header td.fc-header-left,
.fc-header td.fc-header-center,
.fc-header td.fc-header-right {
    padding: 15px;
    vertical-align: center;
}

.fc-header-title h2 {
    color: #e6995b;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
}

.fc-header-left .fc-button,
.fc-header-right .fc-button { margin-left: 0; }

.fc-button.fc-state-down, .fc-button.fc-state-active {
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
    background-color: #EEE;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.fc-event {
    background-color: #c384dd;
    border-color: transparent;
    font-weight: 600;
    margin: 4px;
}

.fc-state-highlight { background-color: #f8f8f8; }

.fc-event-inner { padding: 7px; }

/* Content Header */

.fc-content .fc-grid .fc-day-header {
    border: 0;
    border-bottom: 1px solid #DDD;
    color: #999;
    font-weight: 600;
    padding-bottom: 10px;
}

/* Content Body/Container */

.fc-content .fc-grid table tbody { background: #FFF; }

/* Content Day Number */

.fc-grid .fc-day-number {
    color: #AAA;
    font-size: 13px;
    font-weight: 400;
    padding: 5px 11px;
}

/* ================================================
X. PAGES - In Order
A. Dashboard.html
B. 404/500.html
C. Coming-soon.html
D. Screenlock.html
E. Login.html
F. Invoice-page.html
G. Gallery.html
H. Validation.html
I. Sketchpad.html
J. Timeline.html
K. Profile.html

* This file is reserved for changes done on
* a per-page basis. To create independent
* page layouts an additional class was added 
* to the pages body. For example login.html
* has an extra body class of ".login-page"
 
* Note: Pages not listed here were made using
* 100% reusable styles placed in theme.css
================================================= 
A. Dashboard.html - Default
================================================= */

body.dashboard-page .jvectormap-zoomin,
body.dashboard-page .jvectormap-zoomout { display: none; }

body.dashboard-page .chat-panel .panel-body {
    max-height: 288px;
    overflow-x: hidden;
    overflow-y: scroll;
}

/* A slidedown menu used to store
* multiple Tile widgets  */

#widget-dropdown {
    display: block;
    margin-bottom: 15px;
}

#widget-dropdown .panel { background: #f8f8f8; }

.widget-fullscreen {
    height: 90%;
    left: 5%;
    position: fixed;
    top: 5%;
    width: 90%;
    z-index: 9999;
}

.widget-backdrop {
    background: #000;
    height: 100%;
    left: 0;
    opacity: 0.65;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9998;
}

.dashboard-widget-tray { padding-top: 37px; }

/*===============================================
B. Messages Page
================================================= */

/* Email Listings */

.email-table.table-striped > tbody > tr > td { border: none; }

.email-table.table-striped > tbody > tr > td { vertical-align: middle; }

.email-table.table-striped > tbody > tr > td:first-child { padding-left: 20px; }

.email-table.table-hover > tbody > tr:hover > td {
    background-color: #ecf3f8 !important;
    cursor: pointer;
}

.email-table .table-icon { width: 55px; }

.email-search,
.email-count {
    color: #999;
    font-size: 14px;
    position: relative;
    top: 2px;
}

/* Email Compose */

.messages-page .note-editor .note-toolbar {
    background: #fafafa;
    border: 1px solid #DDD;
}

.messages-page .note-editor .note-editable {
    border: 1px solid #DDD;
    border-top: none;
}

/*===============================================
B. Editors Page
================================================= */

body.editors-page .panel .panel-heading { border-bottom-color: #CCC; }

/*===============================================
C. 404/500.html
================================================= */

/* Error search bar */

body.error-page #search-widget { background: #f1f1f1; }

/* Error text */

body.error-page .error-icon {
    font-size: 80px;
    position: relative;
    top: -10px;
}

body.error-page .error-text {
    color: #888;
    font-size: 120px;
    text-align: center;
    text-shadow: 0 2px #FFF;
    width: 100%;
}

/*===============================================
D. Coming-soon.html
================================================= */

body.coming-soon-page #main {
    background: none;
    min-height: 100vh;
}

body.login-page #content { margin-bottom: 40px; }

body.coming-soon-page #page-logo {
    margin: 50px auto 50px;
    width: 291px;
}

body.coming-soon-page .cntSeparator { margin: 27px 18px; }

body.coming-soon-page .panel {
    margin: 0 auto;
    position: relative;
    width: 600px;
}

body.coming-soon-page .panel-title {
    float: none;
    font-size: 17px;
}

body.coming-soon-page .panel-body { padding: 40px 26px; }

/*===============================================
E. Screenlock.html
================================================= */

body.screenlock-page #main { background: none; }

body.screenlock-page #page-logo {
    margin: 50px auto 80px;
    width: 285px;
}

body.screenlock-page .panel {
    margin: 0 auto;
    position: relative;
    width: 500px;
}

body.screenlock-page .login-info {
    font-size: 13px;
    margin: 20px 0;
}

body.screenlock-page .login-info .login-name b { font-size: 14px; }

body.screenlock-page .login-info .login-email {
    color: #AAA;
    font-size: 12px;
    padding-top: 8px;
}

body.screenlock-page .login-avatar {
    border-right: 1px dashed #DDD;
    float: left;
    margin-right: 20px;
    padding: 12px 15px 13px 10px;
}

body.screenlock-page .login-avatar img {
    border: 2px solid #DDD;
    display: block;
    margin: 0 auto;
    padding: 5px;
}

body.screenlock-page .login-alert {
    border-top: 1px dashed #DDD;
    clear: both;
    margin: 5px 0;
    padding-top: 15px;
}

body.screenlock-page .login-alert .alert {
    font-size: 13px;
    margin-bottom: 0;
    padding: 7px 13px;
}

/*===============================================
F. Login.html
================================================= */

body.login-page #main {
    background: none;
    min-height: 100vh;
}

body.login-page #page-logo {
    margin: 50px auto 80px;
    width: 285px;
}

body.login-page .panel {
    -moz-box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    position: relative;
    width: 650px;
}

body.login-page .login-avatar {
    border-bottom: 1px dashed #DDD;
    margin: 15px 20px 25px;
    padding-bottom: 25px;
}

body.login-page .login-avatar img {
    border: 2px solid #DDD;
    display: block;
    margin: 0 auto;
    padding: 5px;
}

body.login-page .login-alert {
    font-size: 13px;
    padding: 9px 13px;
}

/*===============================================
G. Invoice.html
================================================= */

body.invoice-page #invoice-info { margin-bottom: 15px; }

/* Invoice table */

body.invoice-page .table-condensed tbody tr td:last-child {
    padding-right: 15px;
    text-align: right;
}

/* Summary table */

body.invoice-page #invoice-summary { margin: 0; }

/* Summary table header */

body.invoice-page #invoice-summary thead th:first-child {
    padding-right: 55px;
    text-align: right;
    width: 200px;
}

body.invoice-page #invoice-summary thead th:last-child {
    font-weight: 400;
    width: 50px;
}

/* Summary table rows */

body.invoice-page #invoice-summary tbody tr td { border-top: 0; }

body.invoice-page #invoice-summary tbody tr td:first-child {
    padding-right: 55px;
    text-align: right;
    width: 200px;
}

/* Summary table last row */

body.invoice-page #invoice-summary tbody tr:last-child td {
    background: #f8f8f8;
    border-bottom: 1px solid #DDD;
    border-top: 1px solid #DDD;
    height: 35px;
    line-height: 35px;
}

/* Bottom of page invoice buttons */

body.invoice-page .invoice-buttons {
    bottom: 10px;
    left: 15px;
    position: absolute;
}

/*===============================================
H. Gallery.html
================================================= */

/* GALLERY.HTML */

body.gallery-page .panel-menu .tab-content {
    background: transparent;
    border: 0;
    min-height: 0;
    padding: 0;
}

/*===============================================
I. Validation.html
================================================= */

body.validation-page label.error {
    color: #d9534f;
    font-size: 12px;
    font-weight: 600;
    margin: 6px 0 0 2px;
}

/*===============================================
J. Sketchpad.html
================================================= */

body.sketchpad-page .wPaint-menu-holder { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.45); }

body.sketchpad-page .chat-panel .media-img img {
    margin-right: 6px;
    max-width: 50px;
}

body.sketchpad-page .chat-panel .media-content { padding: 6px 12px; }

body.sketchpad-page .chat-panel .media-timestamp { margin-bottom: 5px; }

/*===============================================
K. Timeline.html
================================================= */

body.timeline-page #main { min-height: 1400px; }

body.timeline-page #content { padding: 8px 35px 50px 35px; }

#timeline { position: relative; }

/* Timeline Spine */

#timeline:after {
    background: #ddd;
    content: "";
    height: 100%;
    left: 50%;
    margin-left: -2px;
    position: absolute;
    top: 0;
    width: 4px;
}

/* Timeline Date Button/Label */

.timeline-divider {
    margin: 10px 0 45px;
    position: relative;
    z-index: 3;
}

.timeline-divider .divider-label {
    background: #FFF;
    border: 1px solid #CCC;
    margin: 0 auto;
    padding: 7px;
    text-align: center;
    width: 110px;
}

/* Timeline Content Panels */

#timeline .panel {
    margin-bottom: 30px;
    overflow: visible;
    position: relative;
    z-index: 11;
}

/* Timeline Panel Arrows */

#timeline .panel:before,
#timeline .panel:after {
    border-color: transparent transparent transparent #fafafa;
    border-style: solid;
    border-width: 8px 0 8px 12px;
    content: "";
    height: 0;
    left: 100%;
    position: absolute;
    top: 10px;
    width: 0;
    z-index: 2;
}

#timeline .panel:after {
    border-left-color: #666;
    z-index: 1;
}

#timeline .right-column .panel:before,
#timeline .right-column .panel:after {
    border-color: transparent #fafafa transparent transparent;
    border-width: 8px 12px 8px 0;
    left: auto;
    right: 100%;
    top: 10px;
}

#timeline .right-column .panel:after { border-right-color: #666; }

/* Timeline Panel Positioning */

#timeline > .row > .left-column .timeline-item { padding-right: 30px; }

#timeline > .row > .right-column .timeline-item { padding-left: 30px; }

#timeline > .row > .right-column { margin-top: 80px; }

#timeline .ui-sortable-disabled .panel { cursor: auto; }

/* Timeline Responsive Styles */

@media (max-width: 770px) {
    #timeline > .row > .left-column .panel { margin-right: 0; }

    #timeline > .row > .right-column .panel { margin-left: 0; }

    #timeline > .row .panel:before { display: none; }

    #timeline > .row .panel:after { display: none; }
}

#timeline .tab-content { min-height: 0; }

/* form creation styles */

#timeline .map {
    height: 275px;
    width: 100%;
}

#timeline-image-form .fileupload-preview { text-align: center; }

#timeline-image-form .fileupload-preview img { max-height: 200px; }

/* JQuery sortable placeholder */

#timeline .ui-sortable {
    min-height: 150px;
    min-width: 300px;
}

.timeline-icon {
    background: #e8e8e8;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #e8e8e8;
    color: #FFF;
    font-size: 20px;
    height: 38px;
    line-height: 38px;
    position: absolute;
    right: -18px;
    text-align: center;
    width: 38px;
    z-index: 1;
}

.right-column .timeline-icon {
    left: -18px;
    right: auto;
}

/* SINGLE TIMELINE */

#timeline.timeline-single { margin-left: 50px; }

#timeline.timeline-single:after { left: 0; }

#timeline.timeline-single > .row > .col-sm-6 {
    padding-left: 65px;
    width: 100%;
}

#timeline.timeline-single > .row > .right-column { margin-top: 0; }

#timeline.timeline-single > .row > .right-column .timeline-item,
#timeline.timeline-single > .row > .left-column .timeline-item {
    padding-left: 0;
    padding-right: 0;
}

#timeline.timeline-single .timeline-divider .divider-label { margin-left: -55px; }

#timeline.timeline-single .timeline-icon {
    left: -8px;
    right: auto;
}

/* Timeline Panel Arrows */

#timeline.timeline-single .panel:before,
#timeline.timeline-single .panel:after {
    border-color: transparent #fafafa transparent transparent;
    border-width: 8px 12px 8px 0;
    left: auto;
    right: 100%;
}

#timeline.timeline-single .panel:after { border-right-color: #666; }

/*===============================================
M. Map Pages - Full, Vector
================================================= */

.maps-vector-page #content_wrapper { min-height: 0; }

.expanding-header {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    height: 43px;
    left: 30px;
    position: absolute;
    top: 20px;
    transition: all 0.2s ease-in-out;
    width: 550px;
    z-index: 999;
}

.expanding-header.collapsed { width: 48px; }

.expanding-header .map-header-icon {
    color: #FFF;
    cursor: pointer;
    float: left;
    font-size: 22px;
    margin-right: 10px;
    padding: 10px 13px;
    width: 47px;
}

.expanding-header .flag-sm { cursor: pointer; }

.maps-page .expanding-header,
.map-full-page .expanding-header {
    left: 90px;
    top: 24px;
}

.maps-page .expanding-header input.form-control { min-width: 250px; }

/*===============================================
L. Profile.html
================================================= */

.profile-page #topbar.profile-topbar {
    background: url(../img/profile_topbar_bg.jpg) no-repeat center left;
    height: 220px;
    max-height: 220px;
    overflow: hidden;
    padding-left: 0;
}

.profile-page .topbar-avatar {
    float: left;
    height: 165px;
    margin-left: 65px;
    margin-top: 25px;
    width: 165px;
}

.profile-page .topbar-text {
    float: left;
    margin-left: 65px;
    margin-top: 50px;
}

.profile-page .topbar-text h2 {
    color: #FFF;
    margin-top: 0;
}

.profile-page .topbar-text p {
    color: #ddd;
    margin-left: 5px;
    margin-top: 15px;
}

.profile-page .topbar-menu {
    background: #ebebeb;
    max-width: 190px;
    padding: 8px 10px;
    position: absolute;
    right: 20px;
    top: 50px;
    width: 180px;
}

.profile-page .topbar-menu .col-xs-8 .btn { background-color: #a4705c; }

.profile-page #Grid { min-height: 490px; }

.profile-page .profile-tabs {
    margin-top: -63px;
    z-index: 1024;
}

.profile-page .profile-tabs .nav-tabs > li > a {
    background: none;
    border-color: transparent;
    border-top: 3px solid transparent;
    color: #CCC;
    padding: 11px 20px;
}

.profile-tabs .nav-tabs > li.active > a,
.profile-tabs .nav-tabs > li.active > a:hover,
.profile-tabs .nav-tabs > li.active > a:focus {
    background: #FFF;
    border-bottom: 1px solid #FFF;
    border-color: #CFCFCF;
    border-top: 3px solid #917050;
    color: #917050;
}

/*===============================================
M. Error Pages - 404, 500
================================================= */

.minimal { background: #f9f9f9; }

.error-page #return-arrow {
    padding-top: 0;
    top: 75px;
}

#error-container img {
    margin: 30px auto 5px;
    width: 280px;
}

.error-title {
    color: #e6995b;
    font-size: 120px;
    font-weight: 800;
    line-height: 120px;
    margin-bottom: 20px;
    padding-top: 110px;
    text-align: center;
}

.error-subtitle {
    color: #b0b0b0;
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 80px;
    text-align: center;
}

.mid-section {
    background: url("../img/patterns/error-bg.jpg") repeat left top #e6995b;
    height: 200px;
    width: 100%;
}

.mid-content {
    margin: 0 auto;
    padding: 50px 20px 35px;
    width: 620px;
}

@media (max-width: 765px) {
    .mid-content { width: 100%; }
}

.mid-content input {
    border: 0;
    border-radius: 1px;
    color: #AAA;
    height: 45px;
    padding: 10px 20px;
}

/*====================================================
N. External Pages - Login, Screen-Lock, Comingsoon
====================================================== */

.minimal .panel {
    background: #f8f8f8;
    border: 10px solid #9C9C9C;
    border: none;
    border-radius: 0;
    box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1), -1px -2px 1px rgba(0, 0, 0, 0.1);
}

.minimal .panel-heading,
.minimal .panel-footer {
    background: #FFF;
    border-color: #eee;
}

.minimal .overlay-black {
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}

.minimal .overlay-black { background: rgba(0, 0, 0, 0.5); }

.login-page .panel-bg {
    margin: 0 auto;
    padding: 12px;
    width: 650px;
}

body.login-page {
    min-height: 100vh;
    position: relative;
}

body.login-page .panel:after {
    clear: both;
    content: "";
    display: block;
}

body.login-page .panel .login-left {
    float: left;
    width: 50%;
}

body.login-page .panel .login-left img {
    max-width: 100%;
    width: 100%;
}

body.login-page .panel .login-right {
    background-color: #fff;
    float: left;
    padding: 35px;
    width: 50%;
}

body.login-page .panel .panel-body { padding: 0px !important; }

body.login-page .panel .panel-footer { padding: 0px; }

body.login-page .panel .panel-title {
    display: inline-block;
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 10px;
    padding-left: 0px;
}

body.login-page .panel .panel-heading { margin-bottom: 15px; }

body.login-page .panel .panel-body .input-group { width: 100%; }

body.login-page .panel .login-rembr {
    font-weight: 600;
    margin: 0px 5px !important;
    text-transform: inherit !important;
}

body.login-page .panel .login-right input::placeholder { background-color: #fff; }

body.login-page .panel .login-right input { border-radius: 5px; }

body.login-page .panel .login-right .form-group:after {
    clear: both;
    content: "";
    display: block;
}

body.login-page .panel .login-right label {
    font-size: 11px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

body.login-page .panel .login-right .panel-footer {
    border: none;
    text-align: center;
}

body.login-page .panel .login-right .panel-footer a {
    background: rgb(249, 53, 91);
    background: -moz-linear-gradient(left, rgb(249, 53, 91) 0%, rgb(253, 136, 56) 100%);
    background: -webkit-linear-gradient(left, rgb(249, 53, 91) 0%, rgb(253, 136, 56) 100%);
    background: linear-gradient(to right, rgb(249, 53, 91) 0%, rgb(253, 136, 56) 100%);
    border-radius: 5px;
    display: inline-block !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9355b', endColorstr='#fd8838', GradientType=1);
    float: none !important;
    font-size: 15px !important;
    margin-top: 30px;
    padding: 15px 5px !important;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

.login-footer {
    background-color: #fff;
    bottom: 0;
    padding: 10px 0px;
    position: absolute;
    width: 100%;
}

.login-footer h6 {
    color: #656565;
    font-size: 14px;
    font-weight: 400;
    margin: 0px;
    text-transform: capitalize;
}

.login-footer h6 a {
    color: #fe823a;
    text-decoration: none;
}


.screenlock-page .panel-bg {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0px 0 1px rgba(255, 255, 255, 0.8) inset;
    margin: 0 auto;
    padding: 12px;
    width: 530px;
}

.coming-soon-page .panel-bg {
    background: rgba(255, 255, 255, 0.3);
    background: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 54%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.33) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(54%, rgba(255, 255, 255, 0.3)), color-stop(55%, rgba(255, 255, 255, 0.3)), color-stop(55%, rgba(255, 255, 255, 0.72)), color-stop(100%, rgba(255, 255, 255, 0.33)));
    background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 54%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.33) 100%);
    background: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 54%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.33) 100%);
    background: -ms-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 54%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.33) 100%);
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 54%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.33) 100%);
    box-shadow: 0px 0 1px rgba(255, 255, 255, 0.75) inset;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
    margin: 0 auto;
    padding: 12px;
    width: 630px;
}

/* ================================================
XI. PLUGINS
A. Markitup
B. Summernote
C. Ckeditor
D. RangeSlider
E. Clndr
F. Jvector Maps
G. Flot Charts
H. Tags Manager
I. Mixitup
J. Colorpicker/Datepicker
K. Dropzone
L. Gmap
M. Chosen
N. Form Wizard
O. DataTables
P. TreeView
Q. Nestable
R. Image Zoom
S. Jquery Plugins
	  
* This file contains small changes applied 
* specifically to 3rd party addons. Please
* see vendor.scss for actual plugin styles
================================================= 
A. Markitup Editor
================================================= */

/* Container */

.markItUp {
    margin: 0;
    width: 100%;
}

/* Header */

.markItUpHeader {
    background: #f6f6f6;
    border: none;
    border-bottom: 1px solid #CCC;
    min-height: 43px;
    padding: 8px 10px 0px;
}

.markItUpButton {
    background: #FFF;
    border: 1px solid #CCC;
    padding: 4px;
}

.markItUpHeader ul .markItUpSeparator { height: 25px; }

/* Textarea */

.markItUpEditor {
    border: none;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    height: 250px;
    padding: 10px;
    width: 100%;
}

/* Footer */

.markItUpFooter { height: 15px; }

/*===============================================
B. Summernote
================================================= */

.note-editor .note-toolbar {
    background: #f6f6f6;
    border: none;
    border-bottom: 1px solid #CCC;
    padding: 0 10px 9px;
}

.note-editor .note-toolbar > .btn-group {
    border-right: 1px solid #CCC;
    margin-right: 10px;
    margin-top: 8px;
    padding-right: 10px;
}

.note-editor .btn-sm,
.note-editor .btn-group-sm > .btn { padding: 3px 8px 4px; }

.note-editor { border: none; }

.note-editor .note-editable { overflow: auto; }

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

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

/*===============================================
C. CKEditor
================================================= */

.fusionSkin.cke_chrome {
    border: none;
    box-shadow: none;
    font-family: 'Nunito', sans-serif;
}

.fusionSkin .cke_top {
    background: #f6f6f6;
    border: none;
    border-bottom: 1px solid #CCC;
    box-shadow: none;
    padding: 9px 8px 5px;
}

.fusionSkin .cke_toolgroup,
.fusionSkin .cke_combo_button {
    background: #FFF;
    border-color: #BBB;
    border-radius: 0;
    box-shadow: none;
    margin-right: 15px;
}

.fusionSkin a.cke_button { padding: 4px 5px; }

.fusionSkin .cke_bottom {
    background: none;
    border-color: #DDD;
}

.cke_toolbar_break {
    clear: none !important;
    display: block !important;
}

/*===============================================
D. RangeSlider
================================================= */

/* Slider Container */

.ui-rangeSlider .ui-rangeSlider-bar {
    background-color: #6390a7;
    height: 20px;
    margin: 5px 0;
}

/* Slider Inner bar */

.ui-rangeSlider .ui-rangeSlider-innerBar {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 -1px 0 rgba(255, 255, 255, 0.65) inset;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 -1px 0 rgba(255, 255, 255, 0.65) inset;
    height: 24px;
    margin: 3px 0;
}

/* Slider Label */

.ui-rangeSlider-label {
    background: none;
    background-image: none;
    border: 0;
    box-shadow: none;
}

.ui-rangeSlider-label-value {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    background: #fafafa;
    background-image: none;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    font-size: 12px;
    font-weight: 600;
    line-height: 25px;
    min-height: 25px;
    min-width: 40px;
    position: relative;
    text-align: center;
    top: -8px;
}

.ui-rangeSlider-label:after {
    bottom: 0;
    color: #f8f8f8;
    content: "\f0d7";
    font-family: FontAwesome;
    font-size: 18px;
    margin: 0 -6px;
    position: absolute;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    width: 100%;
}

/* Slider Input Label */

input.ui-editRangeSlider-inputValue {
    border: 1px solid #DDD;
    width: 2.2em;
}

/* Slider Handles */

.ui-rangeSlider .ui-rangeSlider-handle { background: none; }

.ui-rangeSlider .ui-rangeSlider-handle-inner {
    background: url(../images/plugins/slider-knob.png) no-repeat center top;
    height: 24px;
    width: 22px;
}

.ui-rangeSlider-leftHandle .ui-rangeSlider-handle-inner { margin-left: -10px; }

.ui-rangeSlider-rightHandle .ui-rangeSlider-handle-inner { margin-left: -4px; }

/* Slider Arrows */

.ui-rangeSlider-arrow { margin: 6px 0; }

.ui-rangeSlider-arrow.ui-rangeSlider-leftArrow { left: -13px !important; }

.ui-rangeSlider-arrow.ui-rangeSlider-rightArrow { right: -13px !important; }

/*===============================================
E. Clndr 
================================================= */

.clndr .clndr-controls {
    display: none;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
}

.clndr .clndr-controls .month {
    float: left;
    text-align: center;
    width: 33%;
}

.clndr .clndr-controls .clndr-control-button {
    float: left;
    width: 33%;
}

.clndr .clndr-controls .clndr-control-button.rightalign {
    text-align: right;
    width: 34%;
}

.clndr .clndr-controls .clndr-control-button .clndr-next-button {
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    /* IE10+ */
}

.clndr .clndr-controls .clndr-control-button .clndr-next-button:hover { background: #ddd; }

.clndr .clndr-controls .clndr-control-button .clndr-next-button.inactive { opacity: 0.5; }

.clndr .clndr-controls .clndr-control-button .clndr-next-button.inactive:hover {
    background: none;
    cursor: default;
}

.clndr .clndr-controls .clndr-control-button .clndr-previous-button {
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    /* IE10+ */
}

.clndr .clndr-controls .clndr-control-button .clndr-previous-button:hover { background: #ddd; }

.clndr .clndr-controls .clndr-control-button .clndr-previous-button.inactive { opacity: 0.5; }

.clndr .clndr-controls .clndr-control-button .clndr-previous-button.inactive:hover {
    background: none;
    cursor: default;
}

.clndr .clndr-table {
    table-layout: fixed;
    width: 100%;
}

.clndr .clndr-table .header-days {
    font-size: 13px;
    font-weight: 600;
    height: 30px;
}

.clndr .clndr-table .header-days .header-day {
    text-align: center;
    vertical-align: middle;
}

.clndr .clndr-table tr { height: 45px; }

.clndr .clndr-table tr td { vertical-align: middle; }

.clndr .clndr-table tr .day {
    height: inherit;
    padding: 10px;
    width: 100%;
}

.clndr .clndr-table tr .day:hover { background: #eee; }

.clndr .clndr-table tr .day.today .day-contents {
    background: #c7b7e5;
    border-radius: 5px;
    color: #FFF;
    font-weight: 700;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 35px;
}

.clndr .clndr-table tr .day.today.event { background: #a7dbc1; }

.clndr .clndr-table tr .day.event { background: #B4E09F; }

.clndr .clndr-table tr .day.event:hover { background: #96d478; }

.clndr .clndr-table tr .day.inactive { background: #ddd; }

.clndr .clndr-table tr .day .day-contents {
    box-sizing: border-box;
    color: #888;
    font-size: 12px;
    padding: 8px;
    text-align: center;
}

.clndr .clndr-table tr .empty,
.clndr .clndr-table tr .adjacent-month {
    color: #AAA;
    height: inherit;
    width: 100%;
}

.clndr .clndr-table tr .empty:hover,
.clndr .clndr-table tr .adjacent-month:hover { background: #ddd; }

/*===============================================
F. Jvector Maps
================================================= */

.jvectormap-label {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #292929;
    border: solid 1px #CDCDCD;
    border-radius: 3px;
    color: white;
    display: none;
    font-family: 'Nunito', sans-serif;
    font-size: smaller;
    padding: 3px;
    position: absolute;
    z-index: 10;
}

.jvectormap-zoomin, .jvectormap-zoomout {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    font-weight: 400;
    height: 35px;
    left: auto;
    line-height: 35px;
    padding: 0;
    position: absolute;
    right: 30px;
    text-align: center;
    top: 20px;
    width: 40px;
}

.jvectormap-zoomout { right: 80px; }

/*===============================================
G. Flot Charts
================================================= */

/* Shared Flot and Sparkline tooltip */

.jqstooltip, #flotTip {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border: 0 !important;
    border-radius: 3px;
    color: #fff;
    height: auto !important;
    padding: 2px 6px !important;
    width: auto !important;
}

.flot-x-axis .flot-tick-label.tickLabel { color: #AAA; }

.flot-y-axis .flot-tick-label.tickLabel {
    color: #AAA;
    padding-left: 14px;
    padding-top: 6px;
}

td.legendColorBox { padding: 5px; }

/*===============================================
H. Tags Manager
================================================= */

.tm-tag { margin-right: 8px; }

.tag-container { margin-top: 15px; }

.tm-tag.tm-tag-theme {
    background-color: #e3def8;
    border-color: #cbc0f8;
    color: #6b3fa2;
}

/*===============================================
I. Mixitup
================================================= */

#Grid {
    -webkit-backface-visibility: hidden;
    font-size: 0.1px;
    min-height: 368px;
    padding: 0;
    text-align: justify;
}

#Grid:after {
    content: '';
    display: inline-block;
    width: 100%;
}

#Grid .mix,
#Grid .gap {
    display: inline-block;
    width: 32%;
}

#Grid .mix {
    display: none;
    margin-bottom: 1%;
    text-align: left;
}

@media all and (min-width: 720px) {
    #Grid .mix,
    #Grid .gap { width: 24%; }
}

#Grid .mix .mix-desc { display: none; }

/* Grid sortable placeholder */

#Grid .placeholder {
    background: #DDD;
    display: inline-block;
    position: relative;
    vertical-align: top;
}

#Grid .placeholder::after {
    -webkit-box-shadow: 0 1px 3px #BBB inset, 1px 1px 0 #FFF;
    box-shadow: 0 1px 3px #BBB inset, 1px 1px 0 #FFF;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/* List version */

#Grid.list .mix {
    background: #fff;
    max-height: 85px;
    width: 100%;
}

#Grid.list .mix:nth-child(odd) { background: #f8f8f8; }

#Grid.list .mix:before { padding-top: 40px; }

/* List Version img */

#Grid.list .mix img {
    float: left;
    margin-right: 20px;
    max-height: 100%;
}

/* List Version text */

#Grid.list .mix .mix-desc {
    display: block;
    padding: 10px;
}

#Grid.list .mix .mix-desc p {
    display: block;
    font-size: 13px;
}

#Grid.list .placeholder { margin-bottom: 1%; }

/*===============================================
J. Colorpicker/Datepicker/DateRangePicker
================================================= */

.colorpicker {
    min-width: 0;
    padding: 6px 12px;
    z-index: 1051;
}

.datepicker { padding: 6px 12px; }

.daterangepicker { background: #fafafa; }

/*===============================================
K. Dropzone
================================================= */

.dropzone { min-height: 405px; }

.dropzone .dz-default.dz-message {
    background-image: none;
    height: 100%;
    left: 0;
    margin-left: 0px;
    margin-top: -23px;
    text-align: center;
    top: 23%;
    width: 100%;
}

.dropzone .dz-default.dz-message span {
    display: inline-block;
    text-align: center;
}

.dropzone .dz-default.dz-message span.main-text {
    color: #666;
    font-size: 28px;
    font-weight: 400;
}

.dropzone .dz-default.dz-message span.main-text b {
    color: #444;
    font-size: 40px;
}

.dropzone .dz-default.dz-message span.sub-text {
    color: #888;
    font-size: 20px;
}

.dropzone .dz-default.dz-message i.fa {
    color: #e6995b;
    display: block;
    font-size: 100px;
    margin-bottom: 15px;
}

.dropzone a.dz-remove,
.dropzone-previews a.dz-remove { cursor: pointer; }

/* Demonstration Purposes ONLY */

.dropzone .dz-preview .dz-error-message,
.dropzone-previews .dz-preview .dz-error-message { display: none !important; }

/*===============================================
L. Gmap
================================================= */

/* Inline Map Pagination Styles */

.map .pagination {
    -webkit-box-shadow: 0 2px 4px #999;
    background-color: #f0f0f0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
    box-shadow: 0 2px 4px #999;
    margin: 11px;
    text-shadow: 0 1px #ffffff;
    width: 96%;
}

.map .pagination .display {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-shadow: 0 1px #FFF;
    width: 84%;
}

.map .pagination .btn {
    border: 0;
    border-radius: 0;
    cursor: pointer;
    height: 40px;
    vertical-align: top;
    width: 8%;
}

.map .pagination .back-btn {
    background: url("../vendor/plugins/gmap/images/arrow_left_12x12.png") no-repeat 50% 50%;
    border-right: 1px solid #ccc;
    float: left;
}

.map .pagination .fwd-btn {
    background: url("../vendor/plugins/gmap/images/arrow_right_12x12.png") no-repeat 50% 50%;
    border-left: 1px solid #ccc;
    float: right;
}

.map .checker { margin-right: 8px; }

/* Map Styling Helper Classes */

.map-shadow {
    -webkit-box-shadow: 0 2px 3px #999;
    box-shadow: 0 2px 3px #999;
}

.map-gradient {
    background-color: #f0f0f0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
    text-shadow: 0 1px #ffffff;
}

.map-rounded { border-radius: 4px; }

/*===============================================
M. Chosen
================================================= */

/* Single Select List */

.chosen-container-single .chosen-single {
    border-color: #ddd;
    border-radius: 0;
    box-shadow: none;
    height: 32px;
    line-height: 32px;
}

.chosen-container-single .chosen-drop { padding: 5px; }

/* Multi Select List */

.chosen-container-multi .chosen-choices {
    background-clip: padding-box;
    background-image: linear-gradient(to bottom, #ffffff 1%, #f0f0f0 100%);
    background-repeat: repeat-x;
    border-color: #ddd;
    cursor: pointer;
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    cursor: pointer;
    height: 32px;
    line-height: 32px;
}

.chosen-container-multi.chosen-container-active .chosen-choices {
    background-clip: padding-box;
    background-image: linear-gradient(to bottom, #eeeeee 1%, #ffffff 100%);
    background-repeat: repeat-x;
    box-shadow: none;
}

.chosen-container-multi.chosen-container-active .chosen-drop {
    -webkit-box-shadow: 0 0 8px #999;
    box-shadow: 0 0 8px #999;
    padding: 8px 5px;
}

/*===============================================
N. Form Wizard
================================================= */

/*===============================================
O. DataTables
================================================= */

/* Datatable Header */

table.dataTable thead th {
    border-bottom: 1px solid #DDD;
    font-weight: 600;
}

/* Datatable Sorted Rows */

table.dataTable tr.odd td.sorting_1 { background-color: white; }

table.dataTable tr.even td.sorting_1 { background-color: #f8f8f8; }

/* Datatable Filters Menu Container */

.dt-panelmenu {
    margin: -15px -15px 10px;
    min-height: 52px;
}

/* DataTables Search Bar Filter */

div.dataTables_filter input {
    background: #FFF;
    border: 1px solid #ddd;
    color: #999;
    height: 29px;
    line-height: 1.428571429;
    max-height: 30px;
    outline: none;
    padding: 3px 8px;
    width: 270px;
}

div.dataTables_filter input[placeholder] { font-weight: 400; }

/* DataTables Dropdown Filter */

.dataTables_length { display: none; }

@media (min-width: 768px) {
    .dataTables_length { display: block; }
}

.dataTables_length .chosen-container { margin: 0 5px; }

div.dataTables_length label {
    color: #999;
    font-weight: 600;
}

.dataTables_length .chosen-container-single .chosen-single {
    background: #FFF;
    color: #888;
    height: 30px;
    line-height: 28px;
}

/* DataTables Dropdown Filter Arrow Icon */

.dataTables_length .chosen-container-single .chosen-single div { top: 3px; }

/* Datatable Result Counter */

div.dataTables_info {
    color: #999;
    padding-top: 10px;
}

/* Datatable Footer */

.datatables-footer { margin-top: 10px; }

/* Datatable Pagination */

.datatables-footer .pagination { margin: 0; }

.datatables-footer .pagination { padding-top: 2px; }

table.dataTable > thead > tr > th, table.dataTable > tbody > tr > th, table.dataTable > tfoot > tr > th, table.dataTable > thead > tr > td, table.dataTable > tbody > tr > td, table.dataTable > tfoot > tr > td { vertical-align: middle; }

/* DATATABLES PLUGIN STYLES - TABLETOOLS */

/* TableTools Container */

div.DTTT_container {
    float: none;
    position: absolute;
    right: 0;
    top: -30px;
}

/* TableTools Buttons */

div.DTTT_container .DTTT_button {
    border: 1px solid #DDD;
    border-radius: 2px;
    box-shadow: none;
    color: #AAA !important;
    font-size: 1em;
    margin-right: 10px;
    padding: 2px 8px;
}

div.DTTT_container .DTTT_button:last-child { margin-right: 0px; }

div.DTTT_container .DTTT_button:hover {
    border-color: #AAA;
    box-shadow: none;
    color: #333;
}

/*
* PRINTING
* Print display styles
*/

.DTTT_print_info {
    -moz-border-radius: 6px;
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
    -ms-border-radius: 6px;
    -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
    -o-border-radius: 6px;
    -o-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 6px;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
    background: #ffffff;
    /* Old browsers */
    background: -webkit-linear-gradient(top, white 0%, #f3f3f3 89%, #f9f9f9 100%);
    /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient(top, white 0%, #f3f3f3 89%, #f9f9f9 100%);
    /* FF3.6+ */
    background: -ms-linear-gradient(top, white 0%, #f3f3f3 89%, #f9f9f9 100%);
    /* IE10+ */
    background: -o-linear-gradient(top, white 0%, #f3f3f3 89%, #f9f9f9 100%);
    /* Opera 11.10+ */
    background: linear-gradient(top, #ffffff 0%, #f3f3f3 89%, #f9f9f9 100%);
    border: 1px solid black;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
    color: #333;
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f9f9f9', GradientType=0);
    height: 150px;
    left: 50%;
    margin-left: -200px;
    margin-top: -75px;
    /* IE6-9 */
    opacity: 0.95;
    padding: 10px 30px;
    position: fixed;
    text-align: center;
    top: 10%;
    width: 400px;
}

.DTTT_print_info h6 {
    font-size: 28px;
    font-weight: normal;
    line-height: 28px;
    margin: 1em;
}

.DTTT_print_info p {
    font-size: 14px;
    line-height: 20px;
}

/*===============================================
P. TreeView
================================================= */

ul.dynatree-container {
    background-color: transparent;
    border: none;
    font-family: 'Nunito', sans-serif;
}

ul.dynatree-container ul { margin-left: 20px; }

span.dynatree-folder {
    border-radius: 2px;
    margin: 5px;
    padding: 8px 5px 8px 8px;
    position: relative;
}

span.dynatree-folder + ul .dynatree-node {
    margin: 7px 5px;
    padding: 8px 5px 8px 12px;
}

span.dynatree-folder + ul li { position: relative; }

span.dynatree-folder + ul li:before {
    border-bottom: 1px solid #CCC;
    content: "";
    height: 1px;
    left: -20px;
    position: absolute;
    top: 49%;
    width: 22px;
}

span.dynatree-folder + ul li:after {
    border-left: 1px solid #CCC;
    content: "";
    height: 100%;
    left: -20px;
    position: absolute;
    top: 0;
    width: 1px;
}

span.dynatree-folder + ul li:last-child:after { height: 53%; }

ul.dynatree-container a {
    border: none;
    color: #666;
    font-weight: 600;
    outline: none;
    text-shadow: 0 1px #FFF;
}

ul.dynatree-container a:hover,
ul.dynatree-container .dynatree-active a {
    background: transparent;
    border: none;
    outline: none;
}

span.dynatree-connector { display: none; }

/* Alternate Tree Style - Minimal. Uses class "tree-alt" */

.tree-alt span.dynatree-folder {
    background: none;
    border: none;
    margin: 5px;
    padding: 5px 3px 5px 5px;
    position: relative;
}

.tree-alt ul.dynatree-container ul { margin-left: 30px; }

.tree-alt span.dynatree-folder + ul .dynatree-node {
    margin: 5px 3px;
    padding: 6px 7px 6px 4px;
}

/* Modifies size of alt style when in Panel Side Menu */

.panel-sidemenu .tree-alt span.dynatree-folder {
    margin-left: 0;
    padding-left: 0;
}

.panel-sidemenu .tree-alt span.dynatree-folder + ul .dynatree-node { padding: 3px 3px 3px 6px; }

.tree-alt-bg span.dynatree-folder a.dynatree-title {
    color: #FFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}

.tree-alt-bg.tree-purple span.dynatree-folder { background-color: #143276; }

.tree-alt-bg.tree-teal span.dynatree-folder { background-color: #2dc5c7; }

.tree-alt-bg.tree-orange span.dynatree-folder { background-color: #f9892e; }

.tree-alt-bg.tree-green span.dynatree-folder { background-color: #6fa53e; }

.tree-alt-bg.tree-red span.dynatree-folder { background-color: #ff745a; }

.tree-alt-bg.tree-yellow span.dynatree-folder { background-color: #ffcf5a; }

.tree-alt-bg.tree-blue span.dynatree-folder { background-color: #33bfeb; }

.tree-alt-bg.tree-grey span.dynatree-folder { background-color: #6ebbdd; }

/* Demonstration Styles - Tab Tree Content */

.tree-content-example .tab-pane { display: none; }

.tree-content-example .tab-pane img {
    border: 3px solid #CCC;
    float: left;
    margin: 1.5%;
    max-width: 47%;
    padding: 2px;
    width: 47%;
}

/* DRAG AND DROP SUPPORT */

/* Helper object */

div.dynatree-drag-helper a {
    background-color: white;
    border: 1px solid gray;
    opacity: 0.8;
    padding-left: 5px;
    padding-right: 5px;
}

span.dynatree-drag-helper-img {
    /*	position: relative;
left: -16px;	*/
}

div.dynatree-drag-helper {
    /*  border-color: green;
background-color: red; */
}

div.dynatree-drop-accept span.dynatree-drag-helper-img { background-position: -32px -112px; }

div.dynatree-drag-helper.dynatree-drop-reject { border-color: red; }

div.dynatree-drop-reject span.dynatree-drag-helper-img { background-position: -16px -112px; }

/* Drop marker icon */

#dynatree-drop-marker {
    background-position: 0 -128px;
    margin: 0;
    position: absolute;
    width: 24px;
}

#dynatree-drop-marker.dynatree-drop-after,
#dynatree-drop-marker.dynatree-drop-before {
    background-position: 0 -144px;
    width: 64px;
}

#dynatree-drop-marker.dynatree-drop-copy { background-position: -64px -128px; }

#dynatree-drop-marker.dynatree-drop-move { background-position: -64px -128px; }

/* Source node while dragging */

span.dynatree-drag-source {
    /* border: 1px dotted gray; */
    background-color: #e0e0e0;
}

span.dynatree-drag-source a { color: gray; }

/* Target node while dragging cursor is over it */

span.dynatree-drop-target { /*border: 1px solid gray;*/ }

span.dynatree-drop-target.dynatree-drop-accept a {
    /*border: 1px solid green;*/
    background-color: #3169C6 !important;
    color: white !important;
    /* @ IE6 */
    text-decoration: none;
}

span.dynatree-drop-target.dynatree-drop-reject { /*border: 1px solid red;*/ }

/*===============================================
Q. Nestable
================================================= */

.dd {
    display: block;
    font-size: 13px;
    line-height: 20px;
    list-style: none;
    margin: 10px 0;
    padding: 0;
    position: relative;
}

.dd-list {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.dd-list .dd-list { padding-left: 30px; }

.dd-collapsed .dd-list { display: none; }

.dd-item,
.dd-empty,
.dd-placeholder {
    display: block;
    font-size: 13px;
    line-height: 20px;
    margin: 0;
    min-height: 20px;
    padding: 0;
    position: relative;
}

/* Default Color */

.dd-handle {
    -moz-box-sizing: border-box;
    -webkit-border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background-color: "";
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.15) 100%);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    color: #FFF;
    cursor: pointer;
    display: block;
    font-weight: bold;
    height: 30px;
    margin: 5px 0;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}

.dd-handle:hover {
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.45) 1%, rgba(255, 255, 255, 0.15) 100%);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 1%, rgba(255, 255, 255, 0.15) 100%);
}

.dd-item > button {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 12px;
    font-weight: bold;
    height: 20px;
    line-height: 1;
    margin: 5px 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: center;
    text-indent: 100%;
    white-space: nowrap;
    width: 25px;
}

.dd-item > button:before {
    content: '+';
    display: block;
    position: absolute;
    text-align: center;
    text-indent: 0;
    width: 100%;
}

.dd-item > button[data-action="collapse"]:before { content: '-'; }

.dd-placeholder,
.dd-empty {
    -moz-box-sizing: border-box;
    background: #f2fbff;
    border: 1px dashed #b6bcbf;
    box-sizing: border-box;
    margin: 5px 0;
    min-height: 30px;
    padding: 0;
}

.dd-empty {
    background-color: #e5e5e5;
    border: 1px dashed #bbb;
    min-height: 100px;
}

.dd-dragel {
    pointer-events: none;
    position: absolute;
    z-index: 9999;
}

.dd-dragel > .dd-item .dd-handle { margin-top: 0; }

.dd-dragel .dd-handle {
    -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
    background: #888;
    box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
}

/* Nestable Extras */

.nestable-lists {
    border: 0;
    border-bottom: 2px solid #ddd;
    border-top: 2px solid #ddd;
    clear: both;
    display: block;
    padding: 30px 0;
    width: 100%;
}

#nestable-menu {
    margin: 20px 0;
    padding: 0;
}

#nestable-output,
#nestable2-output {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Consolas, monospace;
    font-size: 0.75em;
    height: 7em;
    line-height: 1.333333em;
    padding: 5px;
    width: 100%;
}

/* Alternate Colors */

.nestable-white .dd-handle {
    background-color: #f0f0f0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
    color: #666;
    text-shadow: 0 1px #ffffff;
}

.nestable-white .dd-handle:hover { color: #666; }

.nestable-grey .dd-handle { background-color: #323232; }

.nestable-grey .dd-item > button:before { color: #fff; }

.nestable-blue .dd-handle { background-color: #0066ad; }

.nestable-blue .dd-item > button:before { color: #fff; }

.nestable-green .dd-handle { background-color: #5cb85c; }

.nestable-green .dd-item > button:before { color: #fff; }

.dd-hover > .dd-handle { background: #2ea8e5 !important; }

/* Nestable Draggable Handles */

.dd3-content {
    -moz-box-sizing: border-box;
    -webkit-border-radius: 3px;
    background-color: #f0f0f0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    color: #333;
    display: block;
    font-weight: bold;
    height: 30px;
    margin: 5px 0;
    padding: 5px 10px 5px 40px;
    text-decoration: none;
    text-shadow: 0 1px #ffffff;
}

.dd3-content:hover {
    background: #fff;
    color: #2ea8e5;
}

.dd-dragel > .dd3-item > .dd3-content { margin: 0; }

.dd3-item > button { margin-left: 30px; }

.dd3-handle {
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background-color: #323232;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.15) 100%);
    background-repeat: repeat-x;
    border: 1px solid #aaa;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    left: 0;
    margin: 0;
    overflow: hidden;
    position: absolute;
    text-indent: 100%;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    top: 0;
    white-space: nowrap;
    width: 30px;
}

.dd3-handle:before {
    color: #fff;
    content: '≡';
    display: block;
    font-size: 20px;
    font-weight: normal;
    left: 0;
    position: absolute;
    text-align: center;
    text-indent: 0;
    top: 3px;
    width: 100%;
}

.dd3-handle:hover { background: #ddd; }

/*===============================================
R. ImageZoom
================================================= */

.zoomLens { border-radius: 50%; }

/*===============================================
S. jQuery Sortable
================================================= */

.sortable > div { cursor: move; }

/*===============================================
S. jQuery Spinner
================================================= */

.ui-spinner-input {
    color: inherit;
    min-height: 36px;
}

.ui-spinner-button {
    cursor: pointer;
    display: block;
    font-size: .5em;
    height: 50%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 0;
    text-align: center;
    width: 16px;
    z-index: 3;
}

.input-group .ui-spinner .form-control:first-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 0;
    border-top-right-radius: 4px;
}

.ui-spinner .ui-icon {
    left: 0;
    margin-top: -2px;
    position: absolute;
    text-indent: 0;
    top: 50%;
}

.ui-spinner-up .ui-icon { margin-top: -6px; }

.ui-spinner-up { top: 0; }

.ui-spinner-down { bottom: 0; }

/* TR overrides */

.ui-spinner .ui-icon-triangle-1-s {
    /* needed to correct false icon sprite pos */
    background-position: -65px -16px;
}

/* ==============================================
* All color variables used in this stylesheet
* are stored in modules/_colors.scss	  
  
VII. COLOR SYSTEM
A. Misc Skin/Colors
B. Colors for Custom Elements
C. Tabs
D. Icons
E. Menu and Button Dropdowns
F. Text Input Forms
G. Thumbnails
H. Paginations
I. Checkboxes
J. Switches
K. RangeSlider
L. Progress Bar Colors
M. Text Colors
N. Border Colors
O. Background Colors
P. Background Colors - Advanced Set
  
* The Fusion Color System has two variations
* of every color. A Light shade and a dark
* shade. To create a gradient we set the 
* elements background-color to the dark shade
* and then apply a gradient overlay via 
* the "gradient" mixin. 
================================================= 
A. Misc Skin/Colors
================================================= */

/* Custom Theme(purple) Alert */

.alert-theme {
    background-color: rgba(199, 183, 229, 0.4);
    border-color: rgba(199, 183, 229, 0.4);
    color: #715da3;
}

.alert-theme .alert-link { color: #715da3; }

/*===============================================
A. Colors for Custom Elements
================================================= */

.facebook-color { background-color: #6395cf; }

.twitter-color { background-color: #4fbdc8; }

/* custom right side menu button */

.text-cloud { color: #afb6c6; }

/* User Online Green Border Color */

.border-onlinegreen { border-color: #94d867; }

/*===============================================
A. Tabs
================================================= */

/*===============================================
A. Icons
================================================= */

/* Panel Header Icon */

.panel-title > .fa,
.panel-title > .glyphicon,
.panel-title > .glyphicons,
.panel-title > .imoon { color: #575757; }

/*===============================================
A. Menu and Button Dropdowns
================================================= */

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus { background-color: #e6995b; }

/*===============================================
A. Text Input Forms
================================================= */

.has-warning .form-control,
.has-warning .form-control:focus { border-color: #ffcf5a; }

.has-success .form-control,
.has-success .form-control:focus { border-color: #a0d65a; }

.has-error .form-control,
.has-error .form-control:focus { border-color: #ff745a; }

/*===============================================
A. Thumbnails
================================================= */

a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active { border-color: #e6995b; }

.thumbnail-xs { border-color: #e6995b; }

.thumbnail-sm { border-color: #e6995b; }

/*===============================================
A. Paginations
================================================= */

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: #ff9800;
    border-color: #ff9800;
    color: #fff !important;
    font-weight: bold;
}

.pagination > li > a, .pagination > li > span { color: #000; }

.pagination-alt > li.active > a {
    background-color: #715da3;
    border-color: #715da3;
}

/*===============================================
A. Checkboxes
================================================= */

.cBox.cBox-teal3 label:before { background-color: #1e9093; }

.cBox.cBox-teal label:before { background-color: #a8e9ea; }

.cBox.cBox-teal2 label:before { background-color: #2dc5c7; }

.cBox.cBox-teal3 label:before { background-color: #1e9093; }

.cBox.cBox-blue label:before { background-color: #f5f5fd; }

.cBox.cBox-blue2 label:before { background-color: #33bfeb; }

.cBox.cBox-blue3 label:before { background-color: #238bc5; }

.cBox.cBox-purple label:before { background-color: #c7b7e5; }

.cBox.cBox-purple2 label:before { background-color: #a287d4; }

.cBox.cBox-purple3 label:before { background-color: #715da3; }

.cBox.cBox-pink label:before { background-color: #ffd1ed; }

.cBox.cBox-pink2 label:before { background-color: #ffb2e1; }

.cBox.cBox-pink3 label:before { background-color: #ff7fb4; }

.cBox.cBox-red label:before { background-color: #ffac9c; }

.cBox.cBox-red2 label:before { background-color: #ff745a; }

.cBox.cBox-red3 label:before { background-color: #ff4f3e; }

.cBox.cBox-orange label:before { background-color: #fbb882; }

.cBox.cBox-orange2 label:before { background-color: #f9892e; }

.cBox.cBox-orange3 label:before { background-color: #e55e20; }

.cBox.cBox-yellow label:before { background-color: #ffe29c; }

.cBox.cBox-yellow2 label:before { background-color: #ffcf5a; }

.cBox.cBox-yellow3 label:before { background-color: #ff9d3e; }

.cBox.cBox-green label:before { background-color: #c6e69c; }

.cBox.cBox-green2 label:before { background-color: #a0d65a; }

.cBox.cBox-green3 label:before { background-color: #6fa53e; }

.cBox.cBox-grey label:before { background-color: #b0daec; }

.cBox.cBox-grey2 label:before { background-color: #6ebbdd; }

.cBox.cBox-grey3 label:before { background-color: #6ebbdd; }

/*===============================================
A. Switches
================================================= */

div.switch.switch-teal input:checked + label { background-color: #a8e9ea; }

div.switch.switch-teal2 input:checked + label { background-color: #2dc5c7; }

div.switch.switch-teal3 input:checked + label { background-color: #1e9093; }

div.switch.switch-blue input:checked + label { background-color: #9de0f5; }

div.switch.switch-blue2 input:checked + label { background-color: #33bfeb; }

div.switch.switch-blue3 input:checked + label { background-color: #238bc5; }

div.switch.switch-purple input:checked + label { background-color: #c7b7e5; }

div.switch.switch-purple2 input:checked + label { background-color: #a287d4; }

div.switch.switch-purple3 input:checked + label { background-color: #715da3; }

div.switch.switch-pink input:checked + label { background-color: #ffd1ed; }

div.switch.switch-pink2 input:checked + label { background-color: #ffb2e1; }

div.switch.switch-pink3 input:checked + label { background-color: #ff7fb4; }

div.switch.switch-red input:checked + label { background-color: #ffac9c; }

div.switch.switch-red2 input:checked + label { background-color: #ff745a; }

div.switch.switch-red3 input:checked + label { background-color: #ff4f3e; }

div.switch.switch-orange input:checked + label { background-color: #fbb882; }

div.switch.switch-orange2 input:checked + label { background-color: #f9892e; }

div.switch.switch-orange3 input:checked + label { background-color: #e55e20; }

div.switch.switch-yellow input:checked + label { background-color: #ffe29c; }

div.switch.switch-yellow2 input:checked + label { background-color: #ffcf5a; }

div.switch.switch-yellow3 input:checked + label { background-color: #ff9d3e; }

div.switch.switch-green input:checked + label { background-color: #61be5f; }

div.switch.switch-green2 input:checked + label { background-color: #a0d65a; }

div.switch.switch-green3 input:checked + label { background-color: #6fa53e; }

div.switch.switch-grey input:checked + label { background-color: #b0daec; }

div.switch.switch-grey2 input:checked + label { background-color: #6ebbdd; }

div.switch.switch-grey3 input:checked + label { background-color: #6ebbdd; }

/*===============================================
A. RangeSlider
================================================= */

/* take note of where color class is applied(parent container)
* See sliders.html for example */

.ui-rangeSlider.slider-teal .ui-rangeSlider-bar { background-color: #a8e9ea; }

.ui-rangeSlider.slider-teal2 .ui-rangeSlider-bar { background-color: #2dc5c7; }

.ui-rangeSlider.slider-teal3 .ui-rangeSlider-bar { background-color: #1e9093; }

.ui-rangeSlider.slider-blue .ui-rangeSlider-bar { background-color: #9de0f5; }

.ui-rangeSlider.slider-blue2 .ui-rangeSlider-bar { background-color: #33bfeb; }

.ui-rangeSlider.slider-blue3 .ui-rangeSlider-bar { background-color: #238bc5; }

.ui-rangeSlider.slider-purple .ui-rangeSlider-bar { background-color: #c7b7e5; }

.ui-rangeSlider.slider-purple2 .ui-rangeSlider-bar { background-color: #a287d4; }

.ui-rangeSlider.slider-purple3 .ui-rangeSlider-bar { background-color: #715da3; }

.ui-rangeSlider.slider-pink .ui-rangeSlider-bar { background-color: #ffd1ed; }

.ui-rangeSlider.slider-pink2 .ui-rangeSlider-bar { background-color: #ffb2e1; }

.ui-rangeSlider.slider-pink3 .ui-rangeSlider-bar { background-color: #ff7fb4; }

.ui-rangeSlider.slider-red .ui-rangeSlider-bar { background-color: #ffac9c; }

.ui-rangeSlider.slider-red2 .ui-rangeSlider-bar { background-color: #ff745a; }

.ui-rangeSlider.slider-red3 .ui-rangeSlider-bar { background-color: #ff4f3e; }

.ui-rangeSlider.slider-orange .ui-rangeSlider-bar { background-color: #fbb882; }

.ui-rangeSlider.slider-orange2 .ui-rangeSlider-bar { background-color: #f9892e; }

.ui-rangeSlider.slider-orange3 .ui-rangeSlider-bar { background-color: #e55e20; }

.ui-rangeSlider.slider-yellow .ui-rangeSlider-bar { background-color: #ffe29c; }

.ui-rangeSlider.slider-yellow2 .ui-rangeSlider-bar { background-color: #ffcf5a; }

.ui-rangeSlider.slider-yellow3 .ui-rangeSlider-bar { background-color: #ff9d3e; }

.ui-rangeSlider.slider-green .ui-rangeSlider-bar { background-color: #c6e69c; }

.ui-rangeSlider.slider-green2 .ui-rangeSlider-bar { background-color: #a0d65a; }

.ui-rangeSlider.slider-green3 .ui-rangeSlider-bar { background-color: #6fa53e; }

.ui-rangeSlider.slider-grey .ui-rangeSlider-bar { background-color: #b0daec; }

.ui-rangeSlider.slider-grey2 .ui-rangeSlider-bar { background-color: #6ebbdd; }

.ui-rangeSlider.slider-grey3 .ui-rangeSlider-bar { background-color: #6ebbdd; }

/*===============================================
B. Progress Bar Colors
================================================= */

.progress-bar-teal { background-color: #a8e9ea !important; }

.progress-bar-teal2 { background-color: #2dc5c7 !important; }

.progress-bar-teal3 { background-color: #1e9093 !important; }

.progress-bar-blue { background-color: #9de0f5 !important; }

.progress-bar-blue2 { background-color: #33bfeb !important; }

.progress-bar-blue3 { background-color: #238bc5 !important; }

.progress-bar-purple { background-color: #c7b7e5 !important; }

.progress-bar-purple2 { background-color: #a287d4 !important; }

.progress-bar-purple3 { background-color: #715da3 !important; }

.progress-bar-pink { background-color: #ffd1ed !important; }

.progress-bar-pink2 { background-color: #ffb2e1 !important; }

.progress-bar-pink3 { background-color: #ff7fb4 !important; }

.progress-bar-red { background-color: #ffac9c !important; }

.progress-bar-red2 { background-color: #ff745a !important; }

.progress-bar-red3 { background-color: #ff4f3e !important; }

.progress-bar-orange { background-color: #fbb882 !important; }

.progress-bar-orange2 { background-color: #f9892e !important; }

.progress-bar-orange3 { background-color: #e55e20 !important; }

.progress-bar-yellow { background-color: #ffe29c !important; }

.progress-bar-yellow2 { background-color: #ffcf5a !important; }

.progress-bar-yellow3 { background-color: #ff9d3e !important; }

.progress-bar-green { background-color: #c6e69c !important; }

.progress-bar-green2 { background-color: #a0d65a !important; }

.progress-bar-green3 { background-color: #6fa53e !important; }

.progress-bar-grey { background-color: #b0daec !important; }

.progress-bar-grey2 { background-color: #6ebbdd !important; }

.progress-bar-grey3 { border-color: #6ebbdd !important; }

/* Neutral Colors */

.progress-bar-white { background-color: white !important; }

.progress-bar-light { background-color: white !important; }

.progress-bar-light2 { background-color: #f0f0f0 !important; }

.progress-bar-light3 { background-color: #e8e8e8 !important; }

.progress-bar-light4 { background-color: #dddddd !important; }

.progress-bar-light5 { background-color: #cccccc !important; }

.progress-bar-light6 { background-color: #bbbbbb !important; }

.progress-bar-light7 { background-color: #aaaaaa !important; }

.progress-bar-dark { background-color: #777777 !important; }

.progress-bar-dark2 { background-color: #666666 !important; }

.progress-bar-dark3 { background-color: #494949 !important; }

.progress-bar-dark4 { background-color: #323232 !important; }

.progress-bar-dark5 { background-color: #1e1c1f !important; }

/*===============================================
A. Text Colors
================================================= */

.text-teal { color: #a8e9ea !important; }

.text-teal2 { color: #2dc5c7 !important; }

.text-teal3 { color: #1e9093 !important; }

.text-blue { color: #9de0f5 !important; }

.text-blue2 { color: #383a66 !important; }

.text-blue3 { color: #75b3ca !important; }

.text-purple { color: #c7b7e5 !important; }

.text-purple2 { color: #a287d4 !important; }

.text-purple3 { color: #715da3 !important; }

.text-pink { color: #ffd1ed !important; }

.text-pink2 { color: #ffb2e1 !important; }

.text-pink3 { color: #ff7fb4 !important; }

.text-red { color: #ffac9c !important; }

.text-red2 { color: #ff234a !important; }

.text-red3 { color: #ff4f3e !important; }

.text-orange { color: #fbb882 !important; }

.text-orange2 { color: #ff007e !important; }

.text-orange3 { color: #e55e20 !important; }

.text-yellow { color: #ffe29c !important; }

.text-yellow2 { color: #ffcf5a !important; }

.text-yellow3 { color: #ff9d3e !important; }

.text-green { color: #c6e69c !important; }

.text-green2 { color: #a0d65a !important; }

.text-green3 { color: #6fa53e !important; }

.text-grey { color: #b0daec !important; }

.text-grey2 { color: #6ebbdd !important; }

.text-grey3 { color: #4b87ae !important; }

/* Neutral Colors */

.text-white { color: white !important; }

.text-light { color: white !important; }

.text-light2 { color: #f0f0f0 !important; }

.text-light3 { color: #e8e8e8 !important; }

.text-light4 { color: #dddddd !important; }

.text-light5 { color: #cccccc !important; }

.text-light6 { color: #bbbbbb !important; }

.text-light7 { color: #aaaaaa !important; }

.text-dark { color: #777777 !important; }

.text-dark2 { color: #666666 !important; }

.text-dark3 { color: #494949 !important; }

.text-dark4 { color: #323232 !important; }

.text-dark5 { color: #1e1c1f !important; }

/*===============================================
B. Border Colors
================================================= */

.border-teal { border-color: #a8e9ea !important; }

.border-teal2 { border-color: #2dc5c7 !important; }

.border-teal3 { border-color: #1e9093 !important; }

.border-blue { border-color: #9de0f5 !important; }

.border-blue2 { border-color: #33bfeb !important; }

.border-blue3 { border-color: #398bd8 !important; }

.border-purple { border-color: #c7b7e5 !important; }

.border-purple2 { border-color: #a287d4 !important; }

.border-purple3 { border-color: #715da3 !important; }

.border-pink { border-color: #ffd1ed !important; }

.border-pink2 { border-color: #ffb2e1 !important; }

.border-pink3 { border-color: #ff7fb4 !important; }

.border-red { border-color: #ffac9c !important; }

.border-red2 { border-color: #ff745a !important; }

.border-red3 { border-color: #ff4f3e !important; }

.border-orange { border-color: #fbb882 !important; }

.border-orange2 { border-color: #f9892e !important; }

.border-orange3 { border-color: #e55e20 !important; }

.border-yellow { border-color: #ffe29c !important; }

.border-yellow2 { border-color: #ffcf5a !important; }

.border-yellow3 { border-color: #ff9d3e !important; }

.border-green { border-color: #c6e69c !important; }

.border-green2 { border-color: #a0d65a !important; }

.border-green3 { border-color: #6fa53e !important; }

.border-grey { border-color: #b0daec !important; }

.border-grey2 { border-color: #6ebbdd !important; }

.border-grey3 { border-color: #4b87ae !important; }

/* Neutral Colors */

.border-white { border-color: white !important; }

.border-light { border-color: white !important; }

.border-light2 { border-color: #f0f0f0 !important; }

.border-light3 { border-color: #e8e8e8 !important; }

.border-light4 { border-color: #dddddd !important; }

.border-light5 { border-color: #cccccc !important; }

.border-light6 { border-color: #bbbbbb !important; }

.border-light7 { border-color: #aaaaaa !important; }

.border-dark { border-color: #777777 !important; }

.border-dark2 { border-color: #666666 !important; }

.border-dark3 { border-color: #494949 !important; }

.border-dark4 { border-color: #323232 !important; }

.border-dark5 { border-color: #1e1c1f !important; }

/*===============================================
B. Background Colors
================================================= */

.bg-teal { background-color: #a8e9ea !important; }

.bg-teal2 { background-color: #2dc5c7 !important; }

.bg-teal3 { background-color: #1e9093 !important; }

.bg-blue { background-color: #9de0f5 !important; }

.bg-blue2 { background-color: #33bfeb !important; }

.bg-blue3 { background-color: #398bd8 !important; }

.bg-blue3.dark { background-color: #e6995b !important; }

.bg-purple { background-color: #c7b7e5 !important; }

.bg-purple2 { background-color: #a287d4 !important; }

.bg-purple3 { background-color: #715da3 !important; }

.bg-pink { background-color: #ffd1ed !important; }

.bg-pink2 { background-color: #ffb2e1 !important; }

.bg-pink3 { background-color: #ff7fb4 !important; }

.bg-red { background-color: #ffac9c !important; }

.bg-red2 { background-color: #ff745a !important; }

.bg-red3 { background-color: #ff4f3e !important; }

.bg-orange { background-color: #fbb882 !important; }

.bg-orange2 { background-color: #5fd8c7 !important; }

.bg-orange3 { background-color: #e55e20 !important; }

.bg-yellow { background-color: #ffe29c !important; }

.bg-yellow2 { background-color: #ffcf5a !important; }

.bg-yellow3 { background-color: #ff9d3e !important; }

.bg-green { background-color: #c6e69c !important; }

.bg-green2 { background-color: #a0d65a !important; }

.bg-green3 {
    background-color: #6fa53e !important;
    color: #fff !important;
}

.bg-grey { background-color: #b0daec !important; }

.bg-grey2 { background-color: #6ebbdd !important; }

.bg-grey3 { background-color: #4b87ae !important; }

/* Neutral Colors */

.bg-white { background-color: transparent !important; }

.bg-white { background-color: white !important; }

.bg-light { background-color: white !important; }

.bg-light2 { background-color: #f5f5fd !important; }

.bg-light3 { background-color: #e8e8e8 !important; }

.bg-light4 { background-color: #dddddd !important; }

.bg-light5 { background-color: #cccccc !important; }

.bg-light6 { background-color: #bbbbbb !important; }

.bg-light7 { background-color: #aaaaaa !important; }

.bg-dark { background-color: #777777 !important; }

.bg-dark2 { background-color: #666666 !important; }

.bg-dark3 { background-color: #494949 !important; }

.bg-dark4 { background-color: #323232 !important; }

.bg-dark5 { background-color: #1e1c1f !important; }

/* Used for gradient creation of Neutral Colors */

.bg-dark.bg-gradient { background-color: #777777 !important; }

.bg-dark2.bg-gradient { background-color: #666666 !important; }

.bg-dark3.bg-gradient { background-color: #494949 !important; }

.bg-dark4.bg-gradient { background-color: #323232 !important; }

.bg-dark5.bg-gradient { background-color: #1e1c1f !important; }

/*===============================================
B. Background Colors - Advanced Set
================================================= */

.bg-blue-alt { background-color: #35b5d7; }

.bg-blue2-alt { background-color: #3093c7; }

.bg-blue3-alt { background-color: #4f96b4; }

.bg-blue4-alt { background-color: #287bab; }

.bg-blue5-alt { background-color: #1c5b86; }

.bg-blue6-alt { background-color: #205066; }

.bg-blue7-alt { background-color: #21334b; }

.bg-green-alt { background-color: #6db54b; }

.bg-green2-alt { background-color: #71aa61; }

.bg-green3-alt { background-color: #417447; }

.bg-green4-alt { background-color: #47741a; }

.bg-green5-alt { background-color: #1c4905; }

.bg-red-alt { background-color: #e4151d; }

.bg-red2-alt { background-color: #d10011; }

.bg-red3-alt { background-color: #bf0d14 !important; }

.bg-red4-alt { background-color: #930b1f; }

.bg-purple-alt { background-color: #bb7ea6; }

.bg-purple2-alt { background-color: #7a5067; }

.bg-purple3-alt { background-color: #89264f; }

.bg-purple4-alt { background-color: #462b4c; }

.bg-orange-alt { background-color: #e94216; }

.bg-orange2-alt { background-color: #f56333; }

.bg-orange3-alt { background-color: #fb7e2a; }

.bg-yellow-alt { background-color: #f0c92f; }

.bg-yellow2-alt { background-color: #e1bc4a; }

.bg-creme-alt { background-color: #feda83; }

.bg-creme2-alt { background-color: #fae3b4; }

.bg-creme3-alt { background-color: #d3c27b; }

.bg-brown-alt { background-color: #b29579; }

.bg-brown2-alt { background-color: #7b5d3a; }

.bg-brown3-alt { background-color: #563330; }

/* Secondary color useful for making darker toned gradients */

.bg-blue-alt.bg-gradient { background-color: #008aaf; }

.bg-blue2-alt.bg-gradient { background-color: #0070ab; }

.bg-blue3-alt.bg-gradient { background-color: #066b95; }

.bg-blue4-alt.bg-gradient { background-color: #005789; }

.bg-blue5-alt.bg-gradient { background-color: #00416d; }

.bg-blue6-alt.bg-gradient { background-color: #043a53; }

.bg-blue7-alt.bg-gradient { background-color: #09203f; }

.bg-green-alt.bg-gradient { background-color: #368d0d; }

.bg-green2-alt.bg-gradient { background-color: #33881b; }

.bg-green3-alt.bg-gradient { background-color: #00520a; }

.bg-green4-alt.bg-gradient { background-color: #274d00; }

.bg-green5-alt.bg-gradient { background-color: #0d2f00; }

.bg-red-alt.bg-gradient { background-color: #eb050e; }

.bg-red2-alt.bg-gradient { background-color: #d10011; }

.bg-red3-alt.bg-gradient { background-color: #a6050b; }

.bg-red4-alt.bg-gradient { background-color: #930b1f; }

.bg-purple-alt.bg-gradient { background-color: #9c457e; }

.bg-purple2-alt.bg-gradient { background-color: #6a254b; }

.bg-purple3-alt.bg-gradient { background-color: #71002f; }

.bg-purple4-alt.bg-gradient { background-color: #36143e; }

.bg-orange-alt.bg-gradient { background-color: #f93e0d; }

.bg-orange2-alt.bg-gradient { background-color: #fe561f; }

.bg-orange3-alt.bg-gradient { background-color: #ff7214; }

.bg-yellow-alt.bg-gradient { background-color: #fac908; }

.bg-yellow2-alt.bg-gradient { background-color: #e9bb2d; }

.bg-creme-alt.bg-gradient { background-color: #ffd266; }

.bg-creme2-alt.bg-gradient { background-color: #fedd9a; }

.bg-creme3-alt.bg-gradient { background-color: #bca339; }

.bg-brown-alt.bg-gradient { background-color: #99714b; }

.bg-brown2-alt.bg-gradient { background-color: #6c4517; }

.bg-brown3-alt.bg-gradient { background-color: #4f1a16; }

/* COLOR MODIFICATIONS SPECIFICALLY FOR BUTTONS
* Any variations to buttons were placed below so that
* the above classes contain only color styles. This
* allows the styles to be used on any element rather 
* than just "Text" or "Buttons" as their name suggest
----------------------------------------------------------*/

.bg-creme-alt { border-color: #f5c348; }

.bg-creme2-alt { border-color: #f7ca5c; }

.bg-light6 { border-color: #e5e5e5; }

.bg-light7 { border-color: #eeeeee; }

.bg-light, .bg-light2, .bg-light3, .bg-light4, .bg-light5, .bg-light6, .bg-light7, .btn-default { color: #555555; }

.bg-light:focus, .bg-light2:focus, .bg-light3:focus, .bg-light4:focus, .bg-light5:focus, .bg-light6:focus, .bg-light7:focus, .bg-default:focus, .btn-default:focus { color: #555555; }

.bg-light:active:focus, .bg-light2:active:focus, .bg-light3:active:focus, .bg-light4:active:focus, .bg-light5:active:focus, .bg-light6:active:focus, .bg-light7:active:focus, .bg-default:active:focus, .btn-default:active:focus { color: #555555; }

.bg-light.bg-gradient, .bg-light2.bg-gradient, .bg-light3.bg-gradient, .bg-light4.bg-gradient, .bg-light5.bg-gradient, .bg-light6.bg-gradient, .bg-light7.bg-gradient, .btn-default.btn-gradient, .bg-default.bg-gradient {
    background-color: "";
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
    text-shadow: 0 1px #ffffff;
}

.bg-creme-alt:focus, .bg-creme2-alt:focus, .bg-yellow-alt:focus, .bg-yellow2-alt:focus { color: #ca8f00; }

.bg-creme-alt, .bg-creme2-alt, .bg-yellow-alt, .bg-yellow2-alt {
    color: #ca8f00;
    font-weight: 600;
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.55);
}

.bg-yellow-alt:hover, .bg-yellow2-alt:hover, .bg-creme-alt:hover, .bg-creme2-alt:hover, .bg-creme3-alt:hover, .bg-light:hover, .bg-light2:hover, .bg-light3:hover, .bg-light4:hover, .bg-light5:hover, .bg-light6:hover, .bg-light7:hover, .bg-default:hover, .btn-default:hover { color: #555555; }

/*===============================================
X. LAYOUT SETTINGS
================================================= */

/* If header is fixed modify primary containers padding */

.navbar.navbar-fixed-top + #main {
    margin-top: 70px;
    min-height: calc(100vh - 70px);
}

 
/* Sidebar User Area - Hidden */

.user-info.hidden,
.user-info.hidden + .user-divider { display: none; }

body.usermenu-hidden .user-info,
body.usermenu-hidden .user-info + .user-divider { display: none; }





/* Topbar/Breadcrumbs Area - Hidden */

body.hidden-breadcrumbs #topbar { display: none; }

/* for preview only - no real use in development enviroment */

body.sidebar-collapsed #sidebar:before { width: 40px; }

/* ================================================
IX. GRID MODIFICATIONS - Custom Size (XL)
===================================================
Fusion Admin has created another column size
which helps create an even better responsive
layout for larger resolutions. This new column 
has been labeled "xl" and is set for 1560px
=================================================== */

.visible-xl { display: none !important; }

.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    min-height: 1px;
    padding-left: 12px;
    padding-right: 12px;
    position: relative;
}

@media (min-width: 1560px) {
    .container { width: 1324px; }
}

@media (min-width: 1560px) {
    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { float: left; }

    .col-xl-12 { width: 100%; }

    .col-xl-11 { width: 91.66666667%; }

    .col-xl-10 { width: 83.33333333%; }

    .col-xl-9 { width: 75%; }

    .col-xl-8 { width: 66.66666667%; }

    .col-xl-7 { width: 58.33333333%; }

    .col-xl-6 { width: 50%; }

    .col-xl-5 { width: 41.66666667%; }

    .col-xl-4 { width: 33.33333333%; }

    .col-xl-3 { width: 25%; }

    .col-xl-2 { width: 16.66666667%; }

    .col-xl-1 { width: 8.33333333%; }

    .col-xl-pull-12 { right: 100%; }

    .col-xl-pull-11 { right: 91.66666667%; }

    .col-xl-pull-10 { right: 83.33333333%; }

    .col-xl-pull-9 { right: 75%; }

    .col-xl-pull-8 { right: 66.66666667%; }

    .col-xl-pull-7 { right: 58.33333333%; }

    .col-xl-pull-6 { right: 50%; }

    .col-xl-pull-5 { right: 41.66666667%; }

    .col-xl-pull-4 { right: 33.33333333%; }

    .col-xl-pull-3 { right: 25%; }

    .col-xl-pull-2 { right: 16.66666667%; }

    .col-xl-pull-1 { right: 8.33333333%; }

    .col-xl-pull-0 { right: 0%; }

    .col-xl-push-12 { left: 100%; }

    .col-xl-push-11 { left: 91.66666667%; }

    .col-xl-push-10 { left: 83.33333333%; }

    .col-xl-push-9 { left: 75%; }

    .col-xl-push-8 { left: 66.66666667%; }

    .col-xl-push-7 { left: 58.33333333%; }

    .col-xl-push-6 { left: 50%; }

    .col-xl-push-5 { left: 41.66666667%; }

    .col-xl-push-4 { left: 33.33333333%; }

    .col-xl-push-3 { left: 25%; }

    .col-xl-push-2 { left: 16.66666667%; }

    .col-xl-push-1 { left: 8.33333333%; }

    .col-xl-push-0 { left: 0%; }

    .col-xl-offset-12 { margin-left: 100%; }

    .col-xl-offset-11 { margin-left: 91.66666667%; }

    .col-xl-offset-10 { margin-left: 83.33333333%; }

    .col-xl-offset-9 { margin-left: 75%; }

    .col-xl-offset-8 { margin-left: 66.66666667%; }

    .col-xl-offset-7 { margin-left: 58.33333333%; }

    .col-xl-offset-6 { margin-left: 50%; }

    .col-xl-offset-5 { margin-left: 41.66666667%; }

    .col-xl-offset-4 { margin-left: 33.33333333%; }

    .col-xl-offset-3 { margin-left: 25%; }

    .col-xl-offset-2 { margin-left: 16.66666667%; }

    .col-xl-offset-1 { margin-left: 8.33333333%; }

    .col-xl-offset-0 { margin-left: 0%; }
}

@media (min-width: 1560px) {
    .visible-xl { display: block !important; }

    table.visible-xl { display: table; }

    tr.visible-xl { display: table-row !important; }

    th.visible-xl,
    td.visible-xl { display: table-cell !important; }
}

@media (min-width: 1560px) {
    .hidden-xl { display: none !important; }
}

/*===============================================
XII. ANIMATE.CSS
================================================= */

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.animated {
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.animated-shortest {
    -moz-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

.animated-short {
    -moz-animation-duration: 0.75s;
    -o-animation-duration: 0.75s;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
}

.animated-long {
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.animated-longest {
    -moz-animation-duration: 3s;
    -o-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -ms-transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    60% {
        -ms-transform: translateY(-15px);
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}

@-webkit-keyframes flash {
    0%, 50%, 100% { opacity: 1; }

    25%, 75% { opacity: 0; }
}

@keyframes flash {
    0%, 50%, 100% { opacity: 1; }

    25%, 75% { opacity: 0; }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }
}

@keyframes shake {
    0%, 100% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        -ms-transform: translateX(-10px);
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    20%, 40%, 60%, 80% {
        -ms-transform: translateX(10px);
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes swing {
    20% {
        -ms-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    40% {
        -ms-transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    60% {
        -ms-transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    80% {
        -ms-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

    100% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

.swing {
    -ms-transform-origin: top center;
    -webkit-animation-name: swing;
    -webkit-transform-origin: top center;
    animation-name: swing;
    transform-origin: top center;
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}

@keyframes tada {
    0% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    10%, 20% {
        -ms-transform: scale(0.9) rotate(-3deg);
        -webkit-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg);
    }

    30%, 50%, 70%, 90% {
        -ms-transform: scale(1.1) rotate(3deg);
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg);
    }

    40%, 60%, 80% {
        -ms-transform: scale(1.1) rotate(-3deg);
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg);
    }

    100% {
        -ms-transform: scale(1) rotate(0);
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
        transform: translateX(-25%) rotate(-5deg);
    }

    30% {
        -webkit-transform: translateX(20%) rotate(3deg);
        transform: translateX(20%) rotate(3deg);
    }

    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
        transform: translateX(-15%) rotate(-3deg);
    }

    60% {
        -webkit-transform: translateX(10%) rotate(2deg);
        transform: translateX(10%) rotate(2deg);
    }

    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
        transform: translateX(-5%) rotate(-1deg);
    }

    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@keyframes wobble {
    0% {
        -ms-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

    15% {
        -ms-transform: translateX(-25%) rotate(-5deg);
        -webkit-transform: translateX(-25%) rotate(-5deg);
        transform: translateX(-25%) rotate(-5deg);
    }

    30% {
        -ms-transform: translateX(20%) rotate(3deg);
        -webkit-transform: translateX(20%) rotate(3deg);
        transform: translateX(20%) rotate(3deg);
    }

    45% {
        -ms-transform: translateX(-15%) rotate(-3deg);
        -webkit-transform: translateX(-15%) rotate(-3deg);
        transform: translateX(-15%) rotate(-3deg);
    }

    60% {
        -ms-transform: translateX(10%) rotate(2deg);
        -webkit-transform: translateX(10%) rotate(2deg);
        transform: translateX(10%) rotate(2deg);
    }

    75% {
        -ms-transform: translateX(-5%) rotate(-1deg);
        -webkit-transform: translateX(-5%) rotate(-1deg);
        transform: translateX(-5%) rotate(-1deg);
    }

    100% {
        -ms-transform: translateX(0%);
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}

@-webkit-keyframes bounceIn {
    0% {
        -webkit-transform: scale(0.3);
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        -webkit-transform: scale(1.05);
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        -ms-transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        -ms-transform: scale(1.05);
        -webkit-transform: scale(1.05);
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        -ms-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
    0% {
        -webkit-transform: translateY(-2000px);
        opacity: 0;
        transform: translateY(-2000px);
    }

    60% {
        -webkit-transform: translateY(30px);
        opacity: 1;
        transform: translateY(30px);
    }

    80% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes bounceInDown {
    0% {
        -ms-transform: translateY(-2000px);
        -webkit-transform: translateY(-2000px);
        opacity: 0;
        transform: translateY(-2000px);
    }

    60% {
        -ms-transform: translateY(30px);
        -webkit-transform: translateY(30px);
        opacity: 1;
        transform: translateY(30px);
    }

    80% {
        -ms-transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
    0% {
        -webkit-transform: translateX(-2000px);
        opacity: 0;
        transform: translateX(-2000px);
    }

    60% {
        -webkit-transform: translateX(30px);
        opacity: 1;
        transform: translateX(30px);
    }

    80% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes bounceInLeft {
    0% {
        -ms-transform: translateX(-2000px);
        -webkit-transform: translateX(-2000px);
        opacity: 0;
        transform: translateX(-2000px);
    }

    60% {
        -ms-transform: translateX(30px);
        -webkit-transform: translateX(30px);
        opacity: 1;
        transform: translateX(30px);
    }

    80% {
        -ms-transform: translateX(-10px);
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    100% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
    0% {
        -webkit-transform: translateX(2000px);
        opacity: 0;
        transform: translateX(2000px);
    }

    60% {
        -webkit-transform: translateX(-30px);
        opacity: 1;
        transform: translateX(-30px);
    }

    80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes bounceInRight {
    0% {
        -ms-transform: translateX(2000px);
        -webkit-transform: translateX(2000px);
        opacity: 0;
        transform: translateX(2000px);
    }

    60% {
        -ms-transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        opacity: 1;
        transform: translateX(-30px);
    }

    80% {
        -ms-transform: translateX(10px);
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }

    100% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
    0% {
        -webkit-transform: translateY(2000px);
        opacity: 0;
        transform: translateY(2000px);
    }

    60% {
        -webkit-transform: translateY(-30px);
        opacity: 1;
        transform: translateY(-30px);
    }

    80% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes bounceInUp {
    0% {
        -ms-transform: translateY(2000px);
        -webkit-transform: translateY(2000px);
        opacity: 0;
        transform: translateY(2000px);
    }

    60% {
        -ms-transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        opacity: 1;
        transform: translateY(-30px);
    }

    80% {
        -ms-transform: translateY(10px);
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }

    100% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    25% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }

    50% {
        -webkit-transform: scale(1.1);
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(0.3);
        opacity: 0;
        transform: scale(0.3);
    }
}

@keyframes bounceOut {
    0% {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    25% {
        -ms-transform: scale(0.95);
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }

    50% {
        -ms-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        -ms-transform: scale(0.3);
        -webkit-transform: scale(0.3);
        opacity: 0;
        transform: scale(0.3);
    }
}

.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    20% {
        -webkit-transform: translateY(-20px);
        opacity: 1;
        transform: translateY(-20px);
    }

    100% {
        -webkit-transform: translateY(2000px);
        opacity: 0;
        transform: translateY(2000px);
    }
}

@keyframes bounceOutDown {
    0% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    20% {
        -ms-transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
        opacity: 1;
        transform: translateY(-20px);
    }

    100% {
        -ms-transform: translateY(2000px);
        -webkit-transform: translateY(2000px);
        opacity: 0;
        transform: translateY(2000px);
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    20% {
        -webkit-transform: translateX(20px);
        opacity: 1;
        transform: translateX(20px);
    }

    100% {
        -webkit-transform: translateX(-2000px);
        opacity: 0;
        transform: translateX(-2000px);
    }
}

@keyframes bounceOutLeft {
    0% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    20% {
        -ms-transform: translateX(20px);
        -webkit-transform: translateX(20px);
        opacity: 1;
        transform: translateX(20px);
    }

    100% {
        -ms-transform: translateX(-2000px);
        -webkit-transform: translateX(-2000px);
        opacity: 0;
        transform: translateX(-2000px);
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    20% {
        -webkit-transform: translateX(-20px);
        opacity: 1;
        transform: translateX(-20px);
    }

    100% {
        -webkit-transform: translateX(2000px);
        opacity: 0;
        transform: translateX(2000px);
    }
}

@keyframes bounceOutRight {
    0% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    20% {
        -ms-transform: translateX(-20px);
        -webkit-transform: translateX(-20px);
        opacity: 1;
        transform: translateX(-20px);
    }

    100% {
        -ms-transform: translateX(2000px);
        -webkit-transform: translateX(2000px);
        opacity: 0;
        transform: translateX(2000px);
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    20% {
        -webkit-transform: translateY(20px);
        opacity: 1;
        transform: translateY(20px);
    }

    100% {
        -webkit-transform: translateY(-2000px);
        opacity: 0;
        transform: translateY(-2000px);
    }
}

@keyframes bounceOutUp {
    0% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    20% {
        -ms-transform: translateY(20px);
        -webkit-transform: translateY(20px);
        opacity: 1;
        transform: translateY(20px);
    }

    100% {
        -ms-transform: translateY(-2000px);
        -webkit-transform: translateY(-2000px);
        opacity: 0;
        transform: translateY(-2000px);
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
    0% { opacity: 0; }

    100% { opacity: 1; }
}

@keyframes fadeIn {
    0% { opacity: 0; }

    100% { opacity: 1; }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
    0% {
        -webkit-transform: translateY(-20px);
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        -ms-transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
    0% {
        -webkit-transform: translateY(-2000px);
        opacity: 0;
        transform: translateY(-2000px);
    }

    100% {
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDownBig {
    0% {
        -ms-transform: translateY(-2000px);
        -webkit-transform: translateY(-2000px);
        opacity: 0;
        transform: translateY(-2000px);
    }

    100% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
    0% {
        -webkit-transform: translateX(-20px);
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        -ms-transform: translateX(-20px);
        -webkit-transform: translateX(-20px);
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
    0% {
        -webkit-transform: translateX(-2000px);
        opacity: 0;
        transform: translateX(-2000px);
    }

    100% {
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeftBig {
    0% {
        -ms-transform: translateX(-2000px);
        -webkit-transform: translateX(-2000px);
        opacity: 0;
        transform: translateX(-2000px);
    }

    100% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
    0% {
        -webkit-transform: translateX(20px);
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        -ms-transform: translateX(20px);
        -webkit-transform: translateX(20px);
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
    0% {
        -webkit-transform: translateX(2000px);
        opacity: 0;
        transform: translateX(2000px);
    }

    100% {
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRightBig {
    0% {
        -ms-transform: translateX(2000px);
        -webkit-transform: translateX(2000px);
        opacity: 0;
        transform: translateX(2000px);
    }

    100% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
    0% {
        -webkit-transform: translateY(20px);
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        -ms-transform: translateY(20px);
        -webkit-transform: translateY(20px);
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
    0% {
        -webkit-transform: translateY(2000px);
        opacity: 0;
        transform: translateY(2000px);
    }

    100% {
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUpBig {
    0% {
        -ms-transform: translateY(2000px);
        -webkit-transform: translateY(2000px);
        opacity: 0;
        transform: translateY(2000px);
    }

    100% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
    0% { opacity: 1; }

    100% { opacity: 0; }
}

@keyframes fadeOut {
    0% { opacity: 1; }

    100% { opacity: 0; }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
    0% {
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(20px);
        opacity: 0;
        transform: translateY(20px);
    }
}

@keyframes fadeOutDown {
    0% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        -ms-transform: translateY(20px);
        -webkit-transform: translateY(20px);
        opacity: 0;
        transform: translateY(20px);
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
    0% {
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(2000px);
        opacity: 0;
        transform: translateY(2000px);
    }
}

@keyframes fadeOutDownBig {
    0% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        -ms-transform: translateY(2000px);
        -webkit-transform: translateY(2000px);
        opacity: 0;
        transform: translateY(2000px);
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
    0% {
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-20px);
        opacity: 0;
        transform: translateX(-20px);
    }
}

@keyframes fadeOutLeft {
    0% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        -ms-transform: translateX(-20px);
        -webkit-transform: translateX(-20px);
        opacity: 0;
        transform: translateX(-20px);
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
    0% {
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-2000px);
        opacity: 0;
        transform: translateX(-2000px);
    }
}

@keyframes fadeOutLeftBig {
    0% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        -ms-transform: translateX(-2000px);
        -webkit-transform: translateX(-2000px);
        opacity: 0;
        transform: translateX(-2000px);
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
    0% {
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(20px);
        opacity: 0;
        transform: translateX(20px);
    }
}

@keyframes fadeOutRight {
    0% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        -ms-transform: translateX(20px);
        -webkit-transform: translateX(20px);
        opacity: 0;
        transform: translateX(20px);
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
    0% {
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(2000px);
        opacity: 0;
        transform: translateX(2000px);
    }
}

@keyframes fadeOutRightBig {
    0% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        -ms-transform: translateX(2000px);
        -webkit-transform: translateX(2000px);
        opacity: 0;
        transform: translateX(2000px);
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
    0% {
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-20px);
        opacity: 0;
        transform: translateY(-20px);
    }
}

@keyframes fadeOutUp {
    0% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        -ms-transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
        opacity: 0;
        transform: translateY(-20px);
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
    0% {
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-2000px);
        opacity: 0;
        transform: translateY(-2000px);
    }
}

@keyframes fadeOutUpBig {
    0% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        -ms-transform: translateY(-2000px);
        -webkit-transform: translateY(-2000px);
        opacity: 0;
        transform: translateY(-2000px);
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
    0% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        animation-timing-function: ease-out;
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    }

    40% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        animation-timing-function: ease-out;
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    }

    50% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    }

    80% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
        animation-timing-function: ease-in;
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    }

    100% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        animation-timing-function: ease-in;
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    }
}

@keyframes flip {
    0% {
        -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        animation-timing-function: ease-out;
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    }

    40% {
        -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        animation-timing-function: ease-out;
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    }

    50% {
        -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    }

    80% {
        -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
        animation-timing-function: ease-in;
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    }

    100% {
        -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        animation-timing-function: ease-in;
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    }
}

.animated.flip {
    -ms-backface-visibility: visible;
    -webkit-animation-name: flip;
    -webkit-backface-visibility: visible;
    animation-name: flip;
    backface-visibility: visible;
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
}

@keyframes flipInX {
    0% {
        -ms-transform: perspective(400px) rotateX(90deg);
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }

    40% {
        -ms-transform: perspective(400px) rotateX(-10deg);
        -webkit-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -ms-transform: perspective(400px) rotateX(10deg);
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -ms-transform: perspective(400px) rotateX(0deg);
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
}

.flipInX {
    -ms-backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    -webkit-backface-visibility: visible !important;
    animation-name: flipInX;
    backface-visibility: visible !important;
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
        transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
        transform: perspective(400px) rotateY(0deg);
    }
}

@keyframes flipInY {
    0% {
        -ms-transform: perspective(400px) rotateY(90deg);
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }

    40% {
        -ms-transform: perspective(400px) rotateY(-10deg);
        -webkit-transform: perspective(400px) rotateY(-10deg);
        transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -ms-transform: perspective(400px) rotateY(10deg);
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -ms-transform: perspective(400px) rotateY(0deg);
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
        transform: perspective(400px) rotateY(0deg);
    }
}

.flipInY {
    -ms-backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    -webkit-backface-visibility: visible !important;
    animation-name: flipInY;
    backface-visibility: visible !important;
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
}

@keyframes flipOutX {
    0% {
        -ms-transform: perspective(400px) rotateX(0deg);
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }

    100% {
        -ms-transform: perspective(400px) rotateX(90deg);
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
}

.flipOutX {
    -ms-backface-visibility: visible !important;
    -webkit-animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    animation-name: flipOutX;
    backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
        transform: perspective(400px) rotateY(0deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }
}

@keyframes flipOutY {
    0% {
        -ms-transform: perspective(400px) rotateY(0deg);
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
        transform: perspective(400px) rotateY(0deg);
    }

    100% {
        -ms-transform: perspective(400px) rotateY(90deg);
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }
}

.flipOutY {
    -ms-backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    -webkit-backface-visibility: visible !important;
    animation-name: flipOutY;
    backface-visibility: visible !important;
}

@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        opacity: 0;
        transform: translateX(100%) skewX(-30deg);
    }

    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        opacity: 1;
        transform: translateX(-20%) skewX(30deg);
    }

    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        opacity: 1;
        transform: translateX(0%) skewX(-15deg);
    }

    100% {
        -webkit-transform: translateX(0%) skewX(0deg);
        opacity: 1;
        transform: translateX(0%) skewX(0deg);
    }
}

@keyframes lightSpeedIn {
    0% {
        -ms-transform: translateX(100%) skewX(-30deg);
        -webkit-transform: translateX(100%) skewX(-30deg);
        opacity: 0;
        transform: translateX(100%) skewX(-30deg);
    }

    60% {
        -ms-transform: translateX(-20%) skewX(30deg);
        -webkit-transform: translateX(-20%) skewX(30deg);
        opacity: 1;
        transform: translateX(-20%) skewX(30deg);
    }

    80% {
        -ms-transform: translateX(0%) skewX(-15deg);
        -webkit-transform: translateX(0%) skewX(-15deg);
        opacity: 1;
        transform: translateX(0%) skewX(-15deg);
    }

    100% {
        -ms-transform: translateX(0%) skewX(0deg);
        -webkit-transform: translateX(0%) skewX(0deg);
        opacity: 1;
        transform: translateX(0%) skewX(0deg);
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-name: lightSpeedIn;
    animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
    0% {
        -webkit-transform: translateX(0%) skewX(0deg);
        opacity: 1;
        transform: translateX(0%) skewX(0deg);
    }

    100% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        opacity: 0;
        transform: translateX(100%) skewX(-30deg);
    }
}

@keyframes lightSpeedOut {
    0% {
        -ms-transform: translateX(0%) skewX(0deg);
        -webkit-transform: translateX(0%) skewX(0deg);
        opacity: 1;
        transform: translateX(0%) skewX(0deg);
    }

    100% {
        -ms-transform: translateX(100%) skewX(-30deg);
        -webkit-transform: translateX(100%) skewX(-30deg);
        opacity: 0;
        transform: translateX(100%) skewX(-30deg);
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-name: lightSpeedOut;
    animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform: rotate(-200deg);
        -webkit-transform-origin: center center;
        opacity: 0;
        transform: rotate(-200deg);
        transform-origin: center center;
    }

    100% {
        -webkit-transform: rotate(0);
        -webkit-transform-origin: center center;
        opacity: 1;
        transform: rotate(0);
        transform-origin: center center;
    }
}

@keyframes rotateIn {
    0% {
        -ms-transform: rotate(-200deg);
        -ms-transform-origin: center center;
        -webkit-transform: rotate(-200deg);
        -webkit-transform-origin: center center;
        opacity: 0;
        transform: rotate(-200deg);
        transform-origin: center center;
    }

    100% {
        -ms-transform: rotate(0);
        -ms-transform-origin: center center;
        -webkit-transform: rotate(0);
        -webkit-transform-origin: center center;
        opacity: 1;
        transform: rotate(0);
        transform-origin: center center;
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(-90deg);
        transform-origin: left bottom;
    }

    100% {
        -webkit-transform: rotate(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: left bottom;
    }
}

@keyframes rotateInDownLeft {
    0% {
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(-90deg);
        transform-origin: left bottom;
    }

    100% {
        -ms-transform: rotate(0);
        -ms-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: left bottom;
    }
}

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(90deg);
        transform-origin: right bottom;
    }

    100% {
        -webkit-transform: rotate(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: right bottom;
    }
}

@keyframes rotateInDownRight {
    0% {
        -ms-transform: rotate(90deg);
        -ms-transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(90deg);
        transform-origin: right bottom;
    }

    100% {
        -ms-transform: rotate(0);
        -ms-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: right bottom;
    }
}

.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(90deg);
        transform-origin: left bottom;
    }

    100% {
        -webkit-transform: rotate(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: left bottom;
    }
}

@keyframes rotateInUpLeft {
    0% {
        -ms-transform: rotate(90deg);
        -ms-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(90deg);
        transform-origin: left bottom;
    }

    100% {
        -ms-transform: rotate(0);
        -ms-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: left bottom;
    }
}

.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(-90deg);
        transform-origin: right bottom;
    }

    100% {
        -webkit-transform: rotate(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: right bottom;
    }
}

@keyframes rotateInUpRight {
    0% {
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(-90deg);
        transform-origin: right bottom;
    }

    100% {
        -ms-transform: rotate(0);
        -ms-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: right bottom;
    }
}

.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform: rotate(0);
        -webkit-transform-origin: center center;
        opacity: 1;
        transform: rotate(0);
        transform-origin: center center;
    }

    100% {
        -webkit-transform: rotate(200deg);
        -webkit-transform-origin: center center;
        opacity: 0;
        transform: rotate(200deg);
        transform-origin: center center;
    }
}

@keyframes rotateOut {
    0% {
        -ms-transform: rotate(0);
        -ms-transform-origin: center center;
        -webkit-transform: rotate(0);
        -webkit-transform-origin: center center;
        opacity: 1;
        transform: rotate(0);
        transform-origin: center center;
    }

    100% {
        -ms-transform: rotate(200deg);
        -ms-transform-origin: center center;
        -webkit-transform: rotate(200deg);
        -webkit-transform-origin: center center;
        opacity: 0;
        transform: rotate(200deg);
        transform-origin: center center;
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform: rotate(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: left bottom;
    }

    100% {
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(90deg);
        transform-origin: left bottom;
    }
}

@keyframes rotateOutDownLeft {
    0% {
        -ms-transform: rotate(0);
        -ms-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: left bottom;
    }

    100% {
        -ms-transform: rotate(90deg);
        -ms-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(90deg);
        transform-origin: left bottom;
    }
}

.rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
    0% {
        -webkit-transform: rotate(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: right bottom;
    }

    100% {
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(-90deg);
        transform-origin: right bottom;
    }
}

@keyframes rotateOutDownRight {
    0% {
        -ms-transform: rotate(0);
        -ms-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: right bottom;
    }

    100% {
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(-90deg);
        transform-origin: right bottom;
    }
}

.rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
    0% {
        -webkit-transform: rotate(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: left bottom;
    }

    100% {
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(-90deg);
        transform-origin: left bottom;
    }
}

@keyframes rotateOutUpLeft {
    0% {
        -ms-transform: rotate(0);
        -ms-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: left bottom;
    }

    100% {
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(-90deg);
        transform-origin: left bottom;
    }
}

.rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform: rotate(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: right bottom;
    }

    100% {
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(90deg);
        transform-origin: right bottom;
    }
}

@keyframes rotateOutUpRight {
    0% {
        -ms-transform: rotate(0);
        -ms-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: rotate(0);
        transform-origin: right bottom;
    }

    100% {
        -ms-transform: rotate(90deg);
        -ms-transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(90deg);
        transform-origin: right bottom;
    }
}

.rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
    0% {
        -webkit-transform: translateY(-2000px);
        opacity: 0;
        transform: translateY(-2000px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    0% {
        -ms-transform: translateY(-2000px);
        -webkit-transform: translateY(-2000px);
        opacity: 0;
        transform: translateY(-2000px);
    }

    100% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: translateX(-2000px);
        opacity: 0;
        transform: translateX(-2000px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    0% {
        -ms-transform: translateX(-2000px);
        -webkit-transform: translateX(-2000px);
        opacity: 0;
        transform: translateX(-2000px);
    }

    100% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
    0% {
        -moz-transform-style: preserve-3d;
        -webkit-transform: translateX(2000px);
        -webkit-transform-style: preserve-3d;
        opacity: 0;
        transform: translateX(2000px);
        transform-style: preserve-3d;
    }

    100% {
        -moz-transform-style: preserve-3d;
        -webkit-transform: translateX(0);
        -webkit-transform-style: preserve-3d;
        transform: translateX(0);
        transform-style: preserve-3d;
    }
}

@keyframes slideInRight {
    0% {
        -moz-transform-style: preserve-3d;
        -ms-transform: translateX(2000px);
        -webkit-transform: translateX(2000px);
        -webkit-transform-style: preserve-3d;
        opacity: 0;
        transform: translateX(2000px);
        transform-style: preserve-3d;
    }

    100% {
        -moz-transform-style: preserve-3d;
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        -webkit-transform-style: preserve-3d;
        transform: translateX(0);
        transform-style: preserve-3d;
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-2000px);
        opacity: 0;
        transform: translateX(-2000px);
    }
}

@keyframes slideOutLeft {
    0% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -ms-transform: translateX(-2000px);
        -webkit-transform: translateX(-2000px);
        opacity: 0;
        transform: translateX(-2000px);
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(2000px);
        opacity: 0;
        transform: translateX(2000px);
    }
}

@keyframes slideOutRight {
    0% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -ms-transform: translateX(2000px);
        -webkit-transform: translateX(2000px);
        opacity: 0;
        transform: translateX(2000px);
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-2000px);
        opacity: 0;
        transform: translateY(-2000px);
    }
}

@keyframes slideOutUp {
    0% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -ms-transform: translateY(-2000px);
        -webkit-transform: translateY(-2000px);
        opacity: 0;
        transform: translateY(-2000px);
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
}

@-webkit-keyframes hinge {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(0);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        transform: rotate(0);
        transform-origin: top left;
    }

    20%, 60% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(80deg);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        transform: rotate(80deg);
        transform-origin: top left;
    }

    40% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(60deg);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        transform: rotate(60deg);
        transform-origin: top left;
    }

    80% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(60deg) translateY(0);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        opacity: 1;
        transform: rotate(60deg) translateY(0);
        transform-origin: top left;
    }

    100% {
        -webkit-transform: translateY(700px);
        opacity: 0;
        transform: translateY(700px);
    }
}

@keyframes hinge {
    0% {
        -ms-transform: rotate(0);
        -ms-transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(0);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        transform: rotate(0);
        transform-origin: top left;
    }

    20%, 60% {
        -ms-transform: rotate(80deg);
        -ms-transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(80deg);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        transform: rotate(80deg);
        transform-origin: top left;
    }

    40% {
        -ms-transform: rotate(60deg);
        -ms-transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(60deg);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        transform: rotate(60deg);
        transform-origin: top left;
    }

    80% {
        -ms-transform: rotate(60deg) translateY(0);
        -ms-transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(60deg) translateY(0);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        opacity: 1;
        transform: rotate(60deg) translateY(0);
        transform-origin: top left;
    }

    100% {
        -ms-transform: translateY(700px);
        -webkit-transform: translateY(700px);
        opacity: 0;
        transform: translateY(700px);
    }
}

.hinge {
    -webkit-animation-name: hinge;
    animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
    0% {
        -webkit-transform: translateX(-100%) rotate(-120deg);
        opacity: 0;
        transform: translateX(-100%) rotate(-120deg);
    }

    100% {
        -webkit-transform: translateX(0px) rotate(0deg);
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }
}

@keyframes rollIn {
    0% {
        -ms-transform: translateX(-100%) rotate(-120deg);
        -webkit-transform: translateX(-100%) rotate(-120deg);
        opacity: 0;
        transform: translateX(-100%) rotate(-120deg);
    }

    100% {
        -ms-transform: translateX(0px) rotate(0deg);
        -webkit-transform: translateX(0px) rotate(0deg);
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
    0% {
        -webkit-transform: translateX(0px) rotate(0deg);
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }

    100% {
        -webkit-transform: translateX(100%) rotate(120deg);
        opacity: 0;
        transform: translateX(100%) rotate(120deg);
    }
}

@keyframes rollOut {
    0% {
        -ms-transform: translateX(0px) rotate(0deg);
        -webkit-transform: translateX(0px) rotate(0deg);
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }

    100% {
        -ms-transform: translateX(100%) rotate(120deg);
        -webkit-transform: translateX(100%) rotate(120deg);
        opacity: 0;
        transform: translateX(100%) rotate(120deg);
    }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}

a.btnPreview:hover {
    background-color: #c3460c !important;
    border-color: #c3460c !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .mnguid_fa i.fa { font-size: 22px !important; }

    .exportButton .exp-col {
        float: left !important;
        width: 33.33%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .down-btn.download-btn.btn { top: -148px !important; }

    .icon_up, .icon_down { padding-top: 0 !important; }
}

@media (min-width: 320px) and (max-width: 767px) {
    .fc-view.fc-view-month .fc-border-separate .fc-first.fc-last .fc-day-header { min-width: 92px; }

    .fc-view.fc-view-month table.fc-border-separate { min-width: 700px; }

    .panel-body .mngebutton .btn.btn-upload.up_btn { width: auto !important; }

    .report_Pg { margin-top: 15px !important; }

    .blue-btn { margin-top: 5px !important; }

    .variant_icn i.fa { font-size: 12px !important; }

    .variant_icn i.fa.btn { line-height: 10px !important; }

    .variant_icn a, .variant_icn .cBox-inline {
        display: inline-block !important;
        margin-top: 5px !important;
        vertical-align: top !important;
    }

    .variant_icn { vertical-align: top !important; }

    .bg-chkbx .checkBX_list .fa-arrow-circle-o-right {
        left: 7px !important;
        top: 11px !important;
    }

    .bg-chkbx .checkBX_list .trg_vrnt label {
        padding-left: 20px !important;
        width: 71px !important;
    }

    .flt-frm { border-bottom: none !important; }

    .flt-frm.flt_prt label.pull-left {
        padding-right: 15px !important;
        width: auto !important;
    }
}

@media (min-width: 568px) and (max-width: 767px) {
    .stepform-wrap .mngbtn .btn2.pull-left { width: 50% !important; }

    .down-btn.download-btn.btn {
        right: 5px !important;
        top: -91px !important;
    }

    .panel-body .download-btn {
        margin-right: 0 !important;
        position: absolute !important;
        right: 0px !important;
        top: -91px !important;
    }            
}

@media (min-width: 320px) and (max-width: 567px) {
    .sp-8.form-step-title { margin-top: 35px !important; }

    .down-btn.download-btn.btn {
        right: 5px !important;
        top: 7px !important;
    }

    .blue-btn a, .blue-btn {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .col-frm-wd { width: 100% !important; }
}

@media (width: 480px) {
    .stepform-wrap .mngbtn .btn2.pull-left { width: 50% !important; }
}

@media (width: 320px) {
    .cont-scrol { overflow: hidden !important; }
}

.icon_up {
    display: inline-block;
    float: left;
    margin-top: 0px;
    padding-top: 3px;
}

.icon_down {
    display: inline-block;
    float: left;
    margin: 0px 0px 0px 15px;
    padding-top: 3px;
}

/*@media (width:1280px){ .book_ap{margin-right:21px!important;}}*/

@media (min-width: 800px) and (max-width: 980px) {
    .fa-trash-o { left: 0px !important; }
}

a.prev-btn.Go-btn {
    cursor: pointer;
    padding: 7px 5px 7px !important;
}

.wd100 { width: 100% !important; }

.text-left { text-align: left !important; }

.text-center { text-align: center !important; }

.text-right { text-align: right !important; }


.total-summary .panel { box-shadow: none; }

.total-summary .panel-body { background-color: #fff; }


.calendarPage table { border-spacing: 3px; }

.calendarPage table.fc-header {
    background: transparent;
    border: none;
    box-shadow: none;
}

.calendarPage .fc-header-title h2 { color: #383969; }

.calendarPage .fc-header td.fc-header-left { padding-left: 0px; }

.calendarPage .fc-header td.fc-header-left .fc-button:first-child { margin-left: 0px; }

.calendarPage .fc-header td.fc-header-left .fc-button.fc-button-next { display: none; }

.calendarPage .fc-header td.fc-header-right { padding-right: 0px; }

.calendarPage .fc-header td.fc-header-right .fc-button.fc-button-prev { display: none; }

.calendarPage .fc-header td.fc-header-right .fc-button:last-child { margin-right: 0px; }

.calendarPage .fc-header .fc-button {
    background: #01a1af;
    border: none;
    border-radius: 50%;
    box-shadow: none;
    height: 30px;
    margin: 0px 5px;
    padding: 0px;
    text-align: center;
    width: 30px;
}

.calendarPage .fc-header .fc-button span {
    color: #fff;
    display: inline-block;
    font-size: 30px;
    height: 100%;
    line-height: 27px;
    margin: 0;
    padding: 0;
    width: 100%;
}

.calendarPage .fc-header .fc-button.fc-button-today {
    border-radius: 5px;
    color: #fff;
    display: none;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: 27px;
    min-width: 60px;
}

.calendarPage .fc-content .fc-grid .fc-day-header { font-size: 11px !important; }

.calendarPage .fc-grid .fc-day-number {
    color: #383969;
    float: left;
    font-size: 12px;
    font-weight: bold;
}

.calendarPage .fc-grid .calAvl .fc-day-number,
.calendarPage .fc-grid .calNotAvl .fc-day-number {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.calendarPage .fc td,
.calendarPage .fc th {
    border-color: #bec2dd;
    border-radius: 5px !important;
    width: calc(100% / 7) !important;
}

.calendarPage .fc-content .fc-grid .fc-day-header { border-bottom-width: 0px; }

.calendarPage .fc-border-separate td {
    -moz-box-shadow: 0px 5px 20px -10px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 0px 5px 20px -10px rgba(0, 0, 0, 0.08);
    border-width: 1px !important;
    box-shadow: 0px 5px 20px -10px rgba(0, 0, 0, 0.08);
}

.calendarPage .dialog-background { }

.calendarPage .modal-dialog { width: 400px; }

.calendarPage .modal-dialog .modal-content {
    -moz-box-shadow: 0px -10px 70px 10px rgba(39, 42, 93, 0.5);
    -webkit-box-shadow: 0px -10px 70px 10px rgba(39, 42, 93, 0.5);
    border-radius: 5px;
    box-shadow: 0px -10px 70px 10px rgba(39, 42, 93, 0.5);
    padding: 15px;
}

.calendarPage .modal-dialog .panel-heading {
    background-color: #f5f5fd;
    border: none;
    border-radius: 5px;
    line-height: normal;
    padding: 10px 15px;
}

.calendarPage .modal-dialog .panel-heading .panel-title {
    color: #383969;
    text-transform: capitalize;
}

.calendarPage .modal-dialog .calClose {
    cursor: pointer;
    float: right;
    height: 25px;
    margin-top: -3px;
    width: 25px;
    z-index: 999;
}

.calendarPage .clndrAvbl {
    padding-bottom: 0px;
    padding-top: 20px;
}

.calendarPage .clndrAvbl .form-group label {
    color: #383969;
    text-align: center;
}

.calendarPage .clndrAvbl .form-group { margin: 0px; }

.calendarPage .clndrAvbl .form-group input {
    background: transparent;
    color: #383969;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
}

.cstGreenBtn {
    background-color: #a3e8c9 !important;
    border: none;
    border-radius: 4px;
    color: #383969 !important;
    display: inline-block;
    max-width: 100%;
    padding: 11px 25px;
    text-align: center;
    width: 100%;
}

.cstRedBtn {
    background-color: #c9302c !important;
    border: none;
    border-radius: 4px;
    color: #fff !important;
    display: inline-block;
    max-width: 100%;
    padding: 11px 25px;
    text-align: center;
    width: 100%;
}

.ui-dialog.ui-widget {
    -moz-box-shadow: 0px -10px 70px 10px rgba(39, 42, 93, 0.5);
    -webkit-box-shadow: 0px -10px 70px 10px rgba(39, 42, 93, 0.5);
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px -10px 70px 10px rgba(39, 42, 93, 0.5);
    padding: 15px;
    z-index: 1080;
}

.ui-dialog.ui-widget .ui-dialog-content {
    background: #fff;
    min-height: 275px !important;
}

.ui-dialog.ui-widget .ui-widget-header {
    background: #f5f5fd !important;
    border: none;
    border-radius: 5px;
    color: #383969 !important;
    line-height: normal;
    padding: 10px 15px !important;
}

.ui-dialog.ui-widget .ui-dialog-titlebar-close {
    background-image: url(../images/spriteIcon.png);
    background-position: -1px -128px;
    background-size: 385px;
    display: inline-block;
    height: 25px;
    margin-top: -12px;
    right: 15px;
    width: 25px;
}

.ui-dialog.ui-widget .ui-dialog-titlebar-close:focus { outline: none; }

.ui-dialog.ui-widget .ui-dialog-titlebar-close:before { display: none; }

.ui-dialog.ui-widget .ui-dialog-content #lblTitle {
    line-height: 1.8;
    margin: 0;
}

.inline { display: inline !important; }

.inline-block { display: inline-block !important; }

.block { display: block !important; }

.none { display: none !important; }


.save-footer .panel-body { padding-top: 0px; }

.creatGrp {
    background-color: #dbf3e6 !important;
    border-radius: 5px;
    color: #000 !important;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.025em;
    line-height: normal;
    outline: none;
    padding: 8px 20px 8px 50px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.creatGrp span {
    background: #84f0bf;
    border-radius: 5px;
    color: #fff;
    float: left;
    font-size: 20px;
    height: 32px;
    left: 0;
    position: absolute;
    top: 0;
    width: 32px;
}

.creatGrp span svg {
    font-size: 17px;
    margin-top: 7px;
}

.nwUploadBtn {
    cursor: pointer;
    overflow: hidden;
    text-align: right;
}

.nwUploadBtn .btn-file {
    background: transparent !important;
    cursor: pointer;
    font-size: 13px;
    overflow: hidden;
}

.nwUploadBtn .btn-file .iconify {
    border-radius: 4px;
    color: #92cef2;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    margin-right: 5px;
    margin-top: -4px;
    vertical-align: middle;
}

.popImg {
    height: 130px;
    padding: 5px;
    text-align: center;
}

.popImg img {
    max-height: 100%;
    max-height: 100%;
}

html.popupShown, html.popupShown body { overflow: hidden; }

.border-radius-50 { border-radius: 50px; }

.form-control-withIcon { position: relative; }

.form-control-withIcon .form-control { padding-left: 38px; }

.form-control-withIcon .spriteIcon {
    left: 8px;
    position: absolute;
    top: 4px;
}

.form-control-withIcon .spriteIcon {
    background-image: url(../images/spriteIcon.png);
    background-position: -69px -215px;
    display: inline-block;
    height: 25px;
    width: 25px;
}

.form-control-withIcon .i-phonewithMsg {
    background-position: -69px -215px;
    height: 25px;
    width: 25px;
}

.tabImportPopup a {
    color: #75b3ca;
    display: inline-block;
    margin-top: 5px;
}

#divPerformance path { stroke: none; }

.minH-600 { min-height: 600px !important; }

.widthBdr {
    border: 4px solid #42e8a6;
    border-radius: 50%;
    display: inline-block;
    height: 35px;
    line-height: 30px;
    text-align: center;
    width: 35px;
}

.ucCmplEdit [class*="col-"] .panel-heading {
    line-height: normal;
    margin-bottom: 10px;
    min-height: auto;
}

.ucCmplEdit [class*="col-"] .panel-heading:after {
    clear: both;
    content: "";
    display: block;
}

.ucCmplEdit [class*="col-"] .panel-title {
    float: left;
    width: 70%;
}

.ucCmplEdit [class*="col-"] .panel-heading + .panel-body { padding-top: 5px; }

.ltrDescDiv { margin-bottom: 15px; }

.ltrDescDiv a { /*display: inline-block; text-decoration: none !important; background-color: #1e2152!important; padding: 5px 20px; border-radius: 50px; color: #fff; font-size: 13px;*/ }

.ltrDescDiv a i { /*margin-right: 5px;*/ }

.minw-100 { min-width: 100px; }

.ucAppointment .cstmRadio { margin-bottom: 5px; }

.ucAppointment .cstmRadio label { padding: 8px 13px 7px; }

.ucAppointment .cstmRadio input[type="radio"]:checked ~ label { padding: 7px 12px 6px; }

.ucAppointment .cstmRadio label span {
    font-size: 10px;
    padding-left: 5px;
}

.ucAppointment .divToTble li > label { margin: 0px !important; }

.ap_msgBody {
    border-radius: 5px;
    color: #363b7b;
    display: inline-block;
    line-height: 1.5;
    list-style: none;
    padding: 10px !important;
    vertical-align: middle !important;
    width: 100%;
}

.ap_msgBody a { color: #d4548f !important; }

.ap_msgBox .asgSp {
    color: #d4548f;
    padding-top: 10px;
    text-align: center;
}

.ap_msgBox .ap_msgBody { }

.mltSlt .btn-group { width: 100%; }

.mltSlt .btn-group button b.caret { display: none; }

.mltSlt .btn-group button {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: #ffffff url(../images/upDownIcon.png) no-repeat right 1.3rem center !important;
    background-size: 16px;
    border-color: #DEDEDE !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    height: 32px;
    line-height: 1;
    min-height: 32px;
    overflow: hidden;
    padding: 7px 10px 5px;
    padding-right: 32px;
    position: relative;
    text-align: left;
    text-overflow: ellipsis;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%;
}

.mltSlt .multiselect-container .input-group {
    margin: 0px;
    margin-bottom: 10px;
}

.mltSlt .multiselect-container > li > a {
    border-radius: 5px;
    color: #272a59;
    padding: 5px 10px;
}

.mltSlt .multiselect-container > li > a > label {
    min-height: auto;
    padding: 0px;
}

.mltSlt .multiselect-container.dropdown-menu > .active > a,
.mltSlt .multiselect-container.dropdown-menu > .active > a:hover,
.mltSlt .multiselect-container.dropdown-menu > .active > a:focus { background-color: #f5f5fd !important; }