/*
*   ############################################################################################
*
*   KLOROFIL - Free Bootstrap Dashboard Template
*   ---------------------------------------------------------------------
*
*   Version:      1.0
*   Author:       The Develovers
*   Website:      https://www.themeineed.com/
*   Copyright:  Copyright 2016 The Develovers
*   License:      Themeineed.com Free License https://www.themeineed.com/licenses/
*
*   ############################################################################################
*/

/********************
 * GENERAL STYLES
 ********************/
body { background-color: #F3F5F8; font-family: "Source Sans Pro", sans-serif; font-size: 14px; color: #676a6d; }
a { color: #3287B2; }
a:hover, a:focus { color: #3b98c8; text-decoration: none; }
th { font-weight: 600; }
.brand { width: 100%;text-align: center;height: 51px;}
.page-title { margin-top: 0; margin-bottom: 30px; font-weight: 300; }
footer { position: absolute; bottom: -20px; width: 100%; padding-bottom: 20px; }
.copyright { padding: 10px 0; margin-bottom: 0; text-align: center; font-size: 13px; }
.layout-fullwidth .copyright { padding-left: 20px; }
.toast-title { font-weight: bold; }
.toast-message { -ms-word-wrap: break-word; word-wrap: break-word; }
.toast-message a, .toast-message label { color: #ffffff; }
.toast-message a:hover { color: #cccccc; text-decoration: none; }
.toast-close-button { position: relative; right: -0.3em; top: -0.3em; float: right; font-size: 20px; font-weight: bold; color: #ffffff; -webkit-text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff; opacity: 0.8; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: alpha(opacity=80); }
.toast-close-button:hover, .toast-close-button:focus { color: #000000; text-decoration: none; cursor: pointer; opacity: 0.4; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); filter: alpha(opacity=40); }

/* help icons and sweet alert size */
.help-icon {cursor: pointer; color: blue; margin-left: 5px; }
.swal-large {font-size: 1.5rem; }
.swal-title {font-size: 2rem;}
.swal-text {font-size: 1.2rem;}
.swal-button {font-size: 1.2rem;padding: 10px 20px;}


.sticky-header { position: fixed; top: 0; left: 0; width: 100%; background-color: #00A0F0; color: #fff; /*padding: 10px;*/  text-align: center;  z-index: 100;  display: none; }

/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; }
.toast-top-center { top: 0; right: 0; width: 100%; }
.toast-bottom-center { bottom: 0; right: 0; width: 100%; }
.toast-top-full-width { top: 0; right: 0; width: 100%; }
.toast-bottom-full-width { bottom: 0; right: 0; width: 100%; }
.toast-top-left { top: 12px; left: 12px; }
.toast-top-right { top: 12px; right: 12px; }
.toast-bottom-right { right: 12px; bottom: 12px; }
.toast-bottom-left { bottom: 12px; left: 12px; }
#toast-container { position: fixed; z-index: 999999;  /*overrides*/ }
#toast-container * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
#toast-container > div { position: relative; overflow: hidden; margin: 0 0 6px; padding: 15px 15px 15px 50px; width: 300px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; background-position: 15px center; background-repeat: no-repeat; -moz-box-shadow: 0 0 12px #999999; -webkit-box-shadow: 0 0 12px #999999; box-shadow: 0 0 12px #999999; color: #ffffff; opacity: 0.8; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: alpha(opacity=80); }
#toast-container > div:hover { -moz-box-shadow: 0 0 12px #000000; -webkit-box-shadow: 0 0 12px #000000; box-shadow: 0 0 12px #000000; opacity: 1; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100); cursor: pointer; }
#toast-container > .toast-info { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important; }
#toast-container > .toast-error { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important; }
#toast-container > .toast-success { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important; }
#toast-container > .toast-warning { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important; }
#toast-container.toast-top-center > div, #toast-container.toast-bottom-center > div { width: 300px; margin-left: auto; margin-right: auto; }
#toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div { width: 96%; margin-left: auto; margin-right: auto; }
.toast { background-color: #030303; }
.toast-success { background-color: #51a351; }
.toast-error { background-color: #bd362f; }
.toast-info { background-color: #2f96b4; }
.toast-warning { background-color: #f89406; }
.toast-progress { position: absolute; left: 0; bottom: 0; height: 4px; background-color: #000000; opacity: 0.4; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); filter: alpha(opacity=40); }

/*Responsive Design*/
@media all and (max-width:240px) {
    #toast-container > div { padding: 8px 8px 8px 50px; width: 11em; }
    #toast-container .toast-close-button { right: -0.2em; top: -0.2em; }
}
@media all and (min-width:241px) and (max-width:480px) {
    #toast-container > div { padding: 8px 8px 8px 50px; width: 18em; }
    #toast-container .toast-close-button { right: -0.2em; top: -0.2em; }
}
@media all and (min-width:481px) and (max-width:768px) {
    #toast-container > div { padding: 15px 15px 15px 50px; width: 25em; }
}

/********************
 * LAYOUT
 ********************/
#wrapper .sidebar { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; width: 200px; height: 100%; left: 0; background-color: #1F283E; float: left; position: fixed; }
#wrapper .sidebar .footer { display: block; position: absolute; bottom: 0; width: 100%; padding: 20px 30px; background-color: #41B314; color: #fff; }
#wrapper .sidebar .footer:hover, #wrapper .sidebar .footer:focus { text-decoration: none; background-color: #3ca512; }
#wrapper .sidebar .footer i { margin-right: 10px; font-size: 24px; vertical-align: middle; }
#wrapper .sidebar .footer span { position: relative; top: 2px; }
/*#wrapper .main { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; width: calc(100% - 200px); left: 0; position: relative; float: right; background-color: #f5f5fa; background-image: url('mainbg2.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom right; background-size: cover; min-height: 100vh; overflow: hidden;}*/

#wrapper .main { /*width: calc(100% - 200px);*/ position: relative; /*float: right;*/ background-color: #f5f5fa; overflow: hidden;}

.layout-fullwidth #wrapper .sidebar { left: -200px; }
.layout-fullwidth #wrapper .main { width: 100%; }
.offcanvas-active #wrapper .main { width: 100%; position: relative; left: 200px; }
@media (min-width: 768px) {
    .main-content { padding: 28px 10px; background-image: url('mainbg2.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom right; background-size: cover; min-height: calc(100vh - 80px); /*overflow: hidden;*/}
}
html.fullscreen-bg, html.fullscreen-bg body, html.fullscreen-bg #wrapper { height: 100%; }
.vertical-align-wrap { position: absolute; width: 100%; height: 100%; display: table; }
.vertical-align-middle { display: table-cell; vertical-align: middle; }

.sticktotop {position: -webkit-sticky; position: sticky; top: 0;}

 body { margin: 0;  padding-top: 80px; }
.sticky-header { position: fixed; top: 0; left: 0; width: 100%; background-color: #00A0F0; color: #fff; /*padding: 10px;*/  text-align: center;  z-index: 100;  display: none; }
@media (max-width: 767px) {
    body { margin: 0;  padding-top: 25px; }
    .sticky-header { display: block; }
    .main-content{padding: 32px 0px;}
    .panel-body {padding-left: 9px; padding-right: 9px;}
}

/********************
 * TOP NAVIGATION
 ********************/

.navbar {height: 80px; padding-right: 25px; padding-left: 25px;}
.navbar {position: fixed;top: 0;left: 0;width: 100%;background-color: #333; /* Adjust color */color: white;padding: 10px 20px;z-index: 1000;}
.navbar-default { -moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1); -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; padding: 0 25px; margin: 0; border: none; background-color: #1a2035; }
.navbar-default .navbar-nav > li > a { color: #fff !important;}
.navbar-default .navbar-nav > li.active > a { color: #222 !important;}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: #fafafa; }
.navbar-default .navbar-toggle, .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #f8f8f8; }
.navbar-btn { float: left; padding: 16px 0; }
.navbar-form { padding: 15px; }
.navbar-form input[type="text"] { min-width: 200px; }
.navbar-nav { padding-top: 14px; }
/*.navbar-nav .icon-menu { padding-top: 28px; padding-bottom: 28px; position: relative; }*/
.navbar-nav .icon-menu .badge { position: absolute; top: 20px; right: 12px; }
.navbar-nav > li > a { font-size: 16px; font-weight: bold; padding: 15px 20px;/*padding: 28px 20px; */ background-color: #00A0F0;color: #fff;}
.navbar-nav > li > a > i { margin-right: 2px; vertical-align: middle; }
.navbar-nav > li > a > i.icon-submenu { margin-left: 2px; margin-right: 0; font-size: 10px; position: relative; top: 2px; }
.navbar-nav > li > a > span { position: relative; top: 2px; }
.navbar-nav > li > a img { margin-right: 2px; }
.navbar-nav > li > a:hover { text-decoration: underline; }
.navbar-nav > li > .dropdown-menu { padding: 0; min-width: 200px; }
.navbar-nav .dropdown-menu > li > a { padding: 8px 20px; }
.navbar-nav .dropdown-menu > li > a:hover, .navbar-nav .dropdown-menu > li > a:focus { background-color: #fafafa; }
.navbar-nav .dropdown-menu > li > a span, .navbar-nav .dropdown-menu > li > a i { vertical-align: middle; }
.nav > li > a:focus, .nav > li > a:hover { text-decoration: none; background-color: #eee !important;color: #1A2035 !important;}

@media screen and (max-width:767px) {
    /*.navbar-collapse.in { background-color: #ccc;}
    .navbar-nav .icon-menu { padding-top: 15px; padding-bottom: 15px; }
    .navbar-nav > li > a { padding: 15px 20px; }
    .navbar-default .navbar-nav > li > a { color: #000 !important;}
    .navbar-nav > li { display: block; float: none; margin: 10px 0; text-align: center; }
    .navbar-nav.navbar-right { float: none !important; }
    .navbar-nav > li > a { padding: 10px 15px; display: inline-block; width: 90%; border: 1px solid #ccc; background-color: #f0f0f0; border-radius: 5px; margin: 5px 0; text-align: center; }
    .navbar-nav > li > a:hover { background-color: #e0e0e0; text-decoration: none; }
    .dropdown-toggle { width: 90%; border: 1px solid #ccc; background-color: #f0f0f0;border-radius: 5px; margin: 5px 0; text-align: center; display: inline-block;}
    .dropdown-toggle:hover { background-color: #e0e0e0; text-decoration: none; }
    .navbar-brand { text-align: center; display: block; float: none; width: 100%; }
    .navbar-header { text-align: center; }
    .navbar-toggle { float: right; }
    .dropdown-menu { width: 90%; margin: 5px auto; text-align: center; border: 1px solid #ccc; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); }
    .dropdown-menu > li > a { padding: 10px 15px; display: block; clear: both; text-align: center; border-bottom: 1px solid #eee;}
    .dropdown-menu > li:last-child > a { border-bottom: none; }
    .dropdown-menu > li > a:hover { background-color: #e0e0e0; text-decoration: none; }
    .list-group-item {width: 85%; margin: 0 auto; padding-top: 10px;}*/
    .navbar-default {display: none;}

}
.btn-toggle-fullwidth { font-size: 24px; padding: 4px 8px; line-height: .7; border: none; background: none; outline: none; }
.navbar-toggle { padding: 5px 8px; margin: 20px 15px 20px 0; }
.navbar-toggle .icon-nav { font-size: 24px; }
.notification-item .dot { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; width: 10px; height: 10px; content: ''; margin-right: 8px; }
ul.notifications > li { border-bottom: 1px solid #F0F0F0; }
ul.notifications > li:last-child { border-bottom: none; }
ul.notifications > li > .more { padding: 8px 12px; text-align: center; text-decoration: underline; font-weight: 600; }
ul.notifications > li > .more:hover, ul.notifications > li > .more:focus { text-decoration: none; }
.dropdown-menu { -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); border-color: #eaeaea; border-top: 2px solid #ACB0B5; }
.dropdown-menu > li > a { color: #676a6d; font-size: 16px; }
.dropdown-menu > li i { margin-right: 6px; }


.topbuttons h3, .topbuttons h4 {padding: 0 50px 0 30px; font-weight: 900;}
.topbuttons {display: inline-block; vertical-align:top; margin-right: 8px; padding-top: 5px;}
.buttonbar {padding-top: 23px;}

.navbar-brand { font-size: 20px; font-weight: bold; }



/********************
 * SIDEBAR NAVIGATION
 ********************/
/*.sidebar .nav > li > a { color: #AEB7C2; border-left: 5px solid transparent; margin-bottom: 5px;}
.sidebar .nav > li > a:hover, .sidebar .nav > li > a:focus, .sidebar .nav > li > a.active { color: #fff; background-color: transparent; }
.sidebar .nav > li > a:hover i, .sidebar .nav > li > a:focus i, .sidebar .nav > li > a.active i { color: #00AAFF; }
.sidebar .nav > li > a:focus, .sidebar .nav > li > a.active { background-color: #fff; color: #2B333E; border-left-color: #00AAFF; }
.sidebar .nav > li > a[data-toggle="collapse"] .icon-submenu { display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; float: right; position: relative; top: 5px; font-size: 12px; line-height: 1.1; }
.sidebar .nav > li > a[data-toggle="collapse"].collapsed .icon-submenu { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
.sidebar .nav {  }
.sidebar .nav i { margin-right: 10px; font-size: 18px; }
.sidebar .nav span { position: relative; top: -2px; }
.sidebar .nav .nav > li > a { padding-left: 32px; padding-top: 10px; padding-bottom: 10px; }
.sidebar .nav .nav > li > a:focus, .sidebar .nav .nav > li > a.active { background-color: transparent; border-left-color: transparent; }
.sidebar .nav .nav > li > a.active a { color: #fff; }*/

/*.slimScrollDiv {height: 100%;}*/

/********************
 * TYPOGRAPHY
 ********************/
.text-success { color: #41B314; }
.text-warning { color: #e4cb10; }
.text-danger { color: #F9354C; }
ul.list-justify > li { margin-bottom: 5px; }
ul.list-justify > li span { float: right; }

/********************
 * INPUTS
 ********************/
.form-control { -moz-box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.1); -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border-color: #eaeaea; background-color: #fcfcfc; }
.form-control:focus { -moz-box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.1); border-color: #d6d6d6; background-color: #fff; }
.input-group { -moz-box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.1); }
.input-group .form-control, .input-group-addon, .input-group-btn { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.input-group-addon { border: 1px solid #eaeaea; }

/* fancy checkbox and radio button */
.fancy-checkbox { display: block; font-weight: normal; }
.fancy-checkbox input[type="checkbox"] { display: none; }
.fancy-checkbox input[type="checkbox"] + span { display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; cursor: pointer; position: relative; font-size: 13px; }
.fancy-checkbox input[type="checkbox"] + span:before { display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; position: relative; bottom: 1px; width: 18px; height: 18px; margin-right: 5px; content: ""; border: 1px solid #ccc; }
.fancy-checkbox input[type="checkbox"]:checked + span:before { font-family: FontAwesome; content: '\f00c'; font-size: 12px; color: #99a1a7; text-align: center; line-height: 16px; background: #ededed; border: 1px solid #ccc; }
.fancy-checkbox.custom-color-green input[type="checkbox"]:checked + span:before { color: #53D76A; background-color: #fff; }
.fancy-checkbox.custom-bgcolor-green input[type="checkbox"]:checked + span:before { color: #fff; background-color: #53D76A; border-color: #32cf4d; }
.fancy-radio { display: block; font-weight: normal; }
.fancy-radio input[type="radio"] { display: none; }
.fancy-radio input[type="radio"] + span { display: block; cursor: pointer; position: relative; font-size: 13px; }
.fancy-radio input[type="radio"] + span i { display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; position: relative; bottom: 1px; content: ""; border: 1px solid #ccc; width: 18px; height: 18px; margin-right: 5px; }
.fancy-radio input[type="radio"]:checked + span i:after { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; position: relative; top: 3px; left: 3px; content: ''; width: 10px; height: 10px; background-color: #99a1a7; }
.fancy-radio.custom-color-green input[type="radio"]:checked + span i:after { background-color: #53D76A; }
.fancy-radio.custom-bgcolor-green input[type="radio"]:checked + span i { background-color: #53D76A; }
.fancy-radio.custom-bgcolor-green input[type="radio"]:checked + span i:after { background-color: #fff; }

/********************
 * BUTTONS
 ********************/
.btn { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.2); padding: 6px 10px; }
.btn-group-lg > .btn, .btn-lg { padding: 10px 28px; }
.btn-group-sm > .btn, .btn-sm { padding: 5px 18px; }
.btn-group-xs > .btn, .btn-xs { padding: 5px 14px; }
.btn-primary { background-color: #00AAFF; border-color: #00a0f0; }
.btn-primary:hover, .btn-primary:focus { background-color: #00a0f0; border-color: #00a0f0; }
.btn-warning { background-color: #e4cb10; border-color: #d6be0f; }
.btn-warning:hover, .btn-warning:focus { background-color: #d6be0f; border-color: #d6be0f; }
.btn-default:hover, .btn-default:focus { background-color: #f7f7f7; }
.btn-success { background-color: #41B314; border-color: #3ca512; }
.btn-success:hover, .btn-success:focus { background-color: #3ca512; border-color: #3ca512; }
.btn.disabled, .btn[disabled], fieldset[disabled] .btn { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; }

/********************
 * PANELS
 ********************/
.panel { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); background-color: #fff; margin-bottom: 30px; }
.panel .panel-heading, .panel .panel-body, .panel .panel-footer { padding-left: 25px; padding-right: 25px; }
.panel .panel-heading { padding-top: 20px; padding-bottom: 20px; position: relative; }
.panel .panel-heading .panel-title { margin: 0; font-size: 18px; font-weight: 300; }
/*.panel .panel-heading button { padding: 0; margin-left: 5px; background-color: transparent; border: none; outline: none; }*/
.panel .panel-heading button i { font-size: 14px; }
.panel .panel-body { padding-top: 10px; padding-bottom: 15px; }
.panel .panel-note { font-size: 13px; line-height: 2.6; color: #777777; }
.panel .panel-note i { font-size: 16px; margin-right: 3px; }
.panel .right { position: absolute; right: 20px; top: 32%; }
.panel.panel-headline .panel-heading { border-bottom: none; }
.panel.panel-headline .panel-heading .panel-title { margin-bottom: 8px; font-size: 22px; font-weight: normal; }
.panel.panel-headline .panel-heading .panel-subtitle { margin-bottom: 0; font-size: 14px; color: #8D99A8; }
.panel.panel-scrolling .btn-bottom { margin-bottom: 30px; }
/*.panel .table > thead > tr > td:first-child, .panel .table > thead > tr > th:first-child, .panel .table > tbody > tr > td:first-child, .panel .table > tbody > tr > th:first-child, .panel .table > tfoot > tr > td:first-child, .panel .table > tfoot > tr > th:first-child { padding-left: 25px; }*/
/*.panel .table > thead > tr > td:last-child, .panel .table > thead > tr > th:last-child, .panel .table > tbody > tr > td:last-child, .panel .table > tbody > tr > th:last-child, .panel .table > tfoot > tr > td:last-child, .panel .table > tfoot > tr > th:last-child { padding-left: 25px; }*/
.panel-footer { background-color: #fafafa; }

/********************
 * ELEMENTS
 ********************/
.collapsing { -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.label { font-weight: normal; }
.metric { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 20px; margin-bottom: 30px; border: 1px solid #DCE6EB; }
.metric .icon { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; float: left; width: 50px; height: 50px; line-height: 50px; background-color: #0081c2; text-align: center; }
.metric .icon i { font-size: 18px; color: #fff; }
.metric p { margin-bottom: 0; line-height: 1.2; text-align: right; }
.metric .number { display: block; font-size: 28px; font-weight: 300; }
.metric .title { font-size: 16px; }
ul.activity-list > li { padding: 25px 0; }
ul.activity-list > li:not(:last-child) { border-bottom: 1px solid #F0F0F0; }
ul.activity-list > li .avatar { width: 40px; }
ul.activity-list > li > p { margin-bottom: 0; padding-left: 3.5em; }
ul.activity-list > li .timestamp { display: block; font-size: 13px; color: #a3a3a3; }

/* task list */
.task-list > li { margin-bottom: 32px; }
.task-list p { position: relative; }
.task-list p .label-percent { position: absolute; right: 0; }

/* bootstrap progress bar */
.progress { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; background-color: #f1f1f1; }
.progress.wide { width: 60px; }
.progress .progress-bar { -moz-transition-property: width; -o-transition-property: width; -webkit-transition-property: width; transition-property: width; -moz-transition-duration: 3s; -o-transition-duration: 3s; -webkit-transition-duration: 3s; transition-duration: 3s; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; -webkit-transition-timing-function: ease; transition-timing-function: ease; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.progress.progress-sm { height: 12px; }
.progress.progress-xs { height: 5px; }
.progress.progress-sm .progress-bar, .progress.progress-xs .progress-bar { text-indent: -9999px; }
.progress-bar-success { background-color: #41B314; }
.progress-bar-warning { background-color: #e4cb10; }
.progress-bar-danger { background-color: #F9354C; }
.weekly-summary { margin-bottom: 30px; font-weight: 300; }
.weekly-summary .number { font-size: 36px; }
.weekly-summary i { font-size: 16px; margin-left: 10px; }
.weekly-summary .percentage { position: relative; top: -7px; }
.weekly-summary .info-label { display: block; margin-bottom: 10px; font-weight: normal; }
.todo-list > li { border-top: 1px solid #F0F0F0; position: relative; }
.todo-list > li:first-child { border-top: none; }
.todo-list > li .fancy-checkbox { position: absolute; top: 50%; margin-top: -11px; }
.todo-list > li .fancy-checkbox input[type="checkbox"] + span { margin-right: 0; }
.todo-list > li p { display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; width: 90%; margin: 0; padding: 20px 0 20px 35px; }
.todo-list > li.completed p, .todo-list > li.completed .date { text-decoration: line-through; color: #b4b6b9; }
.todo-list .title { font-size: 16px; font-weight: 600; }
.todo-list .short-description { display: block; margin-top: 5px; }
.todo-list .date { font-size: 13px; color: #a3a3a3; }
.todo-list .controls { float: right; position: absolute; top: 50%; right: 0; margin-top: -11px; }
.todo-list .controls a { margin-left: 5px; }

/* toastr notification */
#toast-container > div { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); opacity: 0.9; }
#toast-container > div, #toast-container > div:hover { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
#toast-container .toast-close-button { top: -0.9em; }
.toast a { text-decoration: underline; }
.toast a:hover, .toast a:focus { text-decoration: none; color: #fff; }
.toast .toast-message { font-size: 14px; line-height: 2; }
.toast-info { background-color: #00AAFF; }
.toast-success { background-color: #41B314; }
.toast-warning { background-color: #e4cb10; }
.toast-danger { background-color: #F9354C; }

/* tabs */
.custom-tabs-line ul { display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; }
.custom-tabs-line ul > li { float: left; }
.custom-tabs-line ul > li a { color: #8d9093; font-weight: normal; }
.custom-tabs-line ul > li a:hover, .custom-tabs-line ul > li a:focus { color: #676a6d; background-color: transparent; }
.custom-tabs-line ul > li a:focus { outline: none; }
.custom-tabs-line ul.nav-pills a:hover, .custom-tabs-line ul.nav-pills a:focus { color: #fff; background-color: #00AAFF; }
.custom-tabs-line.tabs-line-bottom { border-bottom: 1px solid #eaeaea; }
.custom-tabs-line.tabs-line-bottom ul > li { margin-bottom: -1px; }
.custom-tabs-line.tabs-line-bottom a { border-bottom: 1px solid transparent; }
.custom-tabs-line.tabs-line-bottom .active a { border-bottom: 2px solid #00AAFF; }
.custom-tabs-line.left-aligned { text-align: left; }
.custom-tabs-line.right-aligned { text-align: right; }
@media screen and (max-width:768px) {
    .custom-tabs-line ul li.active > a { margin-bottom: -1px; }
}
.tab-pane { padding: 25px 15px; }

/********************
 * CHARTS
 ********************/

/* easy pie chart */
.easy-pie-chart { position: relative; width: 110px; margin: 0 auto; margin-bottom: 15px; text-align: center; }
.easy-pie-chart canvas { position: absolute; top: 0; left: 0; }
.easy-pie-chart .percent { display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; line-height: 110px; z-index: 2; }
.easy-pie-chart .percent:after { content: '%'; margin-left: 0.1em; font-size: .8em; }
.easy-pie-chart#system-load { width: 130px; }
.easy-pie-chart#system-load .percent { line-height: 128px; }

/********************************
 * AUTHENTICATION FORMS, PAGE
 ********************************/
.auth-box { -moz-box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.1); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; width: 70%; height: 450px; margin: 0 auto; background-color: #fff; }
.auth-box a { color: inherit; }
.auth-box a:hover, .auth-box a:focus { text-decoration: underline; }
.auth-box:before { display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; content: ' '; vertical-align: middle; height: 100%; }
.auth-box .content { display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; width: 99%; vertical-align: middle; }
.auth-box .left { float: left; width: 40%; height: 100%; padding: 0 30px; text-align: center; }
.auth-box .left:before { display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; content: ' '; vertical-align: middle; height: 100%; }
.auth-box .right { float: right; width: 60%; height: 100%; position: relative; background-image: url('login-bg.jpg'); background-repeat: no-repeat; background-size: cover; }
.auth-box .right:before { display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; content: ' '; vertical-align: middle; height: 100%; }
.auth-box .right .text { position: relative; padding: 0 30px; color: #fff; }
.auth-box .right .heading { margin-top: 0; margin-bottom: 5px; font-size: 26px; font-weight: 300; }
.auth-box .right p { margin: 0; font-size: 18px; font-weight: 300; }
.auth-box .right .overlay { position: absolute; top: 0; display: block; width: 100%; height: 100%; background: rgba(99, 156, 185, 0.92); }
.auth-box .logo { margin-bottom: 30px; margin-top: 100px;}
.auth-box .form-auth-small .btn { margin-top: 20px; }
.auth-box .form-auth-small .element-left { float: left; }
.auth-box .form-auth-small .element-right { float: right; }
.auth-box .form-auth-small .bottom { margin-top: 20px; text-align: center; }
.auth-box.lockscreen { width: 50%; padding: 40px 60px; }
.auth-box.lockscreen .user { margin-bottom: 30px; }
.auth-box.lockscreen .user .name { font-size: 18px; margin-top: 10px; }
@media screen and (min-width:1440px) {
    .auth-box.lockscreen { width: 35%; }
}
@media screen and (max-width:1279px) {
    .auth-box { width: 90%; }
    .auth-box .left { top: 3.3em; }
}
@media screen and (max-width:1023px) {
    .auth-box .left { width: 100%; position: inherit; padding: 30px; }
    .auth-box .right { display: none; }
}
@media screen and (max-width:992px) {
    .auth-box { width: 70%; }
    .auth-box.lockscreen { width: 50%; padding: 40px 20px; }
}
@media screen and (max-width:640px) {
    .auth-box { width: 90%; }
    .auth-box .content { width: 95%; }
    .auth-box.lockscreen { width: 90%; }
}

/********************
 * HELPERS
 ********************/
.bg-success { background-color: #41B314; }
.bg-warning { background-color: #e4cb10; }
.bg-danger { background-color: #F9354C; }
.no-padding { padding: 0 !important; }
.margin-top-30 { margin-top: 30px !important; }
.margin-bottom-30 { margin-bottom: 30px !important; }
.padding-top-30 { padding-top: 30px !important; }
.padding-bottom-30 { padding-bottom: 30px !important; }

/********************
 * PAGE: PROFILE
 ********************/
.panel-profile { position: relative; }
.profile-left { padding-left: 0; float: left; width: 35%; height: 100%; position: absolute; background-color: #F8F8F8; }
.profile-right { float: right; width: 65%; padding: 20px 25px; }
.profile-right .heading { margin-top: 0; }
@media screen and (max-width:992px) {
    .profile-left, .profile-right { float: none; width: 100%; }
    .profile-left { position: relative; margin-bottom: 30px; }
}
.profile-header { position: relative; text-align: center; color: #fff; }
.profile-header .overlay { display: block; content: ""; position: absolute; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); }
.profile-header .profile-main { position: relative; padding: 20px; background-image: url('../img/profile-bg.png?1480069110'); background-repeat: no-repeat; background-size: cover; }
.profile-header .name { margin: 8px 0 0 0; font-size: 22px; }
.profile-header .online-status { font-size: 13px; position: relative; top: -2px; }
.profile-header .online-status:before { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; content: ''; width: 8px; height: 8px; margin-right: 3px; }
.profile-header .online-status.status-available:before { background-color: #41B314; }
.profile-header .profile-stat { position: relative; background-color: #00AAFF; }
.profile-header .profile-stat .stat-item { padding: 20px; position: relative; }
.profile-header .profile-stat .stat-item:after { content: ""; display: block; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #33bbff; }
.profile-header .profile-stat .stat-item:last-child:after { display: none; }
.profile-header .profile-stat .stat-item span { display: block; }
@media screen and (max-width:1023px) {
    .profile-header .profile-stat .stat-item:after { display: none; }
}
.profile-detail { padding-bottom: 30px; }
.profile-info { padding: 0 20px; margin: 40px 0; }
.profile-info .heading { margin: 0 0 10px 0; font-weight: 600; }
.profile-info ul > li { margin-bottom: 8px; }
.social-icons { margin-bottom: 0; }
.social-icons > li { padding: 0 2px 5px 2px; }
.social-icons > li > a { display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; width: 40px; height: 40px; line-height: 42px; text-align: center; background-color: #4d4d4d; color: #fff; }
.social-icons > li > a i { font-size: 18px; }
.social-icons > li > a:hover, .social-icons > li > a:focus { background-color: #404040; }

/* colored background */
.z500px-bg { background-color: #0099e5 !important; }
.z500px-bg:hover, .z500px-bg:focus { background-color: #0088cc !important; }
.about-me-bg { background-color: #00405d !important; }
.about-me-bg:hover, .about-me-bg:focus { background-color: #002e44 !important; }
.airbnb-bg { background-color: #fd5c63 !important; }
.airbnb-bg:hover, .airbnb-bg:focus { background-color: #fd434b !important; }
.alphabet-bg { background-color: #ed1c24 !important; }
.alphabet-bg:hover, .alphabet-bg:focus { background-color: #de1219 !important; }
.amazon-bg { background-color: #ff9900 !important; }
.amazon-bg:hover, .amazon-bg:focus { background-color: #e68a00 !important; }
.american-express-bg { background-color: #002663 !important; }
.american-express-bg:hover, .american-express-bg:focus { background-color: #001c4a !important; }
.aol-bg { background-color: #ff0b00 !important; }
.aol-bg:hover, .aol-bg:focus { background-color: #e60a00 !important; }
.behance-bg { background-color: #1769ff !important; }
.behance-bg:hover, .behance-bg:focus { background-color: #0059fc !important; }
.bing-bg { background-color: #ffb900 !important; }
.bing-bg:hover, .bing-bg:focus { background-color: #e6a700 !important; }
.bitbucket-bg { background-color: #205081 !important; }
.bitbucket-bg:hover, .bitbucket-bg:focus { background-color: #1b436d !important; }
.bitly-bg { background-color: #ee6123 !important; }
.bitly-bg:hover, .bitly-bg:focus { background-color: #e65212 !important; }
.blogger-bg { background-color: #f57d00 !important; }
.blogger-bg:hover, .blogger-bg:focus { background-color: #dc7000 !important; }
.booking-com-bg { background-color: #003580 !important; }
.booking-com-bg:hover, .booking-com-bg:focus { background-color: #002a67 !important; }
.buffer-bg { background-color: #168eea !important; }
.buffer-bg:hover, .buffer-bg:focus { background-color: #1380d3 !important; }
.code-school-bg { background-color: #616f67 !important; }
.code-school-bg:hover, .code-school-bg:focus { background-color: #55615a !important; }
.codecademy-bg { background-color: #f65a5b !important; }
.codecademy-bg:hover, .codecademy-bg:focus { background-color: #f54243 !important; }
.creative-market-bg { background-color: #8ba753 !important; }
.creative-market-bg:hover, .creative-market-bg:focus { background-color: #7d964b !important; }
.delicious-bg { background-color: #3399ff !important; }
.delicious-bg:hover, .delicious-bg:focus { background-color: #1a8cff !important; }
.deviantart-bg { background-color: #05cc47 !important; }
.deviantart-bg:hover, .deviantart-bg:focus { background-color: #04b33e !important; }
.digg-bg { background-color: #005be2 !important; }
.digg-bg:hover, .digg-bg:focus { background-color: #0051c9 !important; }
.disqus-bg { background-color: #2e9fff !important; }
.disqus-bg:hover, .disqus-bg:focus { background-color: #1593ff !important; }
.django-bg { background-color: #092e20 !important; }
.django-bg:hover, .django-bg:focus { background-color: #051911 !important; }
.dribbble-bg { background-color: #ea4c89 !important; }
.dribbble-bg:hover, .dribbble-bg:focus { background-color: #e7357a !important; }
.elance-bg { background-color: #0d69af !important; }
.elance-bg:hover, .elance-bg:focus { background-color: #0b5b97 !important; }
.envato-bg { background-color: #82b541 !important; }
.envato-bg:hover, .envato-bg:focus { background-color: #75a23a !important; }
.etsy-bg { background-color: #d5641c !important; }
.etsy-bg:hover, .etsy-bg:focus { background-color: #be5919 !important; }
.facebook-bg { background-color: #3b5998 !important; }
.facebook-bg:hover, .facebook-bg:focus { background-color: #344e86 !important; }
.feedly-bg { background-color: #2bb24c !important; }
.feedly-bg:hover, .feedly-bg:focus { background-color: #269d43 !important; }
.flattr-bg { background-color: #f67c1a !important; }
.flattr-bg:hover, .flattr-bg:focus { background-color: #ed6f09 !important; }
.flickr-bg { background-color: #0063dc !important; }
.flickr-bg:hover, .flickr-bg:focus { background-color: #0058c3 !important; }
.flipboard-bg { background-color: #e12828 !important; }
.flipboard-bg:hover, .flipboard-bg:focus { background-color: #d21d1d !important; }
.flixster-bg { background-color: #2971b2 !important; }
.flixster-bg:hover, .flixster-bg:focus { background-color: #24649d !important; }
.foursquare-bg { background-color: #0732a2 !important; }
.foursquare-bg:hover, .foursquare-bg:focus { background-color: #062a8a !important; }
.github-bg { background-color: #4183c4 !important; }
.github-bg:hover, .github-bg:focus { background-color: #3876b4 !important; }
.google-bg { background-color: #4285f4 !important; }
.google-bg:hover, .google-bg:focus { background-color: #2a75f3 !important; }
.google-plus-bg { background-color: #dc4e41 !important; }
.google-plus-bg:hover, .google-plus-bg:focus { background-color: #d83a2b !important; }
.instagram-bg { background-color: #3f729b !important; }
.instagram-bg:hover, .instagram-bg:focus { background-color: #386589 !important; }
.kickstarter-bg { background-color: #2bde73 !important; }
.kickstarter-bg:hover, .kickstarter-bg:focus { background-color: #20cf67 !important; }
.kik-bg { background-color: #82bc23 !important; }
.kik-bg:hover, .kik-bg:focus { background-color: #73a71f !important; }
.lastfm-bg { background-color: #d51007 !important; }
.lastfm-bg:hover, .lastfm-bg:focus { background-color: #bc0e06 !important; }
.line-bg { background-color: #00c300 !important; }
.line-bg:hover, .line-bg:focus { background-color: #00aa00 !important; }
.linkedin-bg { background-color: #0077b5 !important; }
.linkedin-bg:hover, .linkedin-bg:focus { background-color: #00669c !important; }
.mail-ru-bg { background-color: #168de2 !important; }
.mail-ru-bg:hover, .mail-ru-bg:focus { background-color: #147fcb !important; }
.mailchimp-bg { background-color: #2c9ab7 !important; }
.mailchimp-bg:hover, .mailchimp-bg:focus { background-color: #2789a2 !important; }
.myspace-bg { background-color: #000000 !important; }
.myspace-bg:hover, .myspace-bg:focus { background-color: black !important; }
.netflix-bg { background-color: #e50914 !important; }
.netflix-bg:hover, .netflix-bg:focus { background-color: #cc0812 !important; }
.ning-bg { background-color: #75af42 !important; }
.ning-bg:hover, .ning-bg:focus { background-color: #699c3b !important; }
.path-bg { background-color: #ee3423 !important; }
.path-bg:hover, .path-bg:focus { background-color: #e62412 !important; }
.patreon-bg { background-color: #e6461a !important; }
.patreon-bg:hover, .patreon-bg:focus { background-color: #d03f17 !important; }
.paypal-bg { background-color: #003087 !important; }
.paypal-bg:hover, .paypal-bg:focus { background-color: #00276e !important; }
.photobucket-bg { background-color: #0ea0db !important; }
.photobucket-bg:hover, .photobucket-bg:focus { background-color: #0c8ec3 !important; }
.pinterest-bg { background-color: #bd081c !important; }
.pinterest-bg:hover, .pinterest-bg:focus { background-color: #a50718 !important; }
.product-hunt-bg { background-color: #da552f !important; }
.product-hunt-bg:hover, .product-hunt-bg:focus { background-color: #cb4924 !important; }
.quora-bg { background-color: #a82400 !important; }
.quora-bg:hover, .quora-bg:focus { background-color: #8e1f00 !important; }
.rdio-bg { background-color: #007dc3 !important; }
.rdio-bg:hover, .rdio-bg:focus { background-color: #006daa !important; }
.reddit-bg { background-color: #ff4500 !important; }
.reddit-bg:hover, .reddit-bg:focus { background-color: #e63e00 !important; }
.rss-bg { background-color: #f26522 !important; }
.rss-bg:hover, .rss-bg:focus { background-color: #ed560e !important; }
.salesforce-bg { background-color: #1798c1 !important; }
.salesforce-bg:hover, .salesforce-bg:focus { background-color: #1486aa !important; }
.scribd-bg { background-color: #1a7bba !important; }
.scribd-bg:hover, .scribd-bg:focus { background-color: #176ca4 !important; }
.shopify-bg { background-color: #96bf48 !important; }
.shopify-bg:hover, .shopify-bg:focus { background-color: #89b03e !important; }
.skype-bg { background-color: #00aff0 !important; }
.skype-bg:hover, .skype-bg:focus { background-color: #009cd6 !important; }
.slack-bg { background-color: #6ecadc !important; }
.slack-bg:hover, .slack-bg:focus { background-color: #59c2d7 !important; }
.slideshare-bg { background-color: #0077b5 !important; }
.slideshare-bg:hover, .slideshare-bg:focus { background-color: #00669c !important; }
.soundcloud-bg { background-color: #ff8800 !important; }
.soundcloud-bg:hover, .soundcloud-bg:focus { background-color: #e67a00 !important; }
.spotify-bg { background-color: #2ebd59 !important; }
.spotify-bg:hover, .spotify-bg:focus { background-color: #29a84f !important; }
.squarespace-bg { background-color: #222222 !important; }
.squarespace-bg:hover, .squarespace-bg:focus { background-color: #151515 !important; }
.stackoverflow-bg { background-color: #fe7a15 !important; }
.stackoverflow-bg:hover, .stackoverflow-bg:focus { background-color: #f86c01 !important; }
.stripe-bg { background-color: #00afe1 !important; }
.stripe-bg:hover, .stripe-bg:focus { background-color: #009bc8 !important; }
.stumbleupon-bg { background-color: #eb4924 !important; }
.stumbleupon-bg:hover, .stumbleupon-bg:focus { background-color: #e13b15 !important; }
.telegram-bg { background-color: #0088cc !important; }
.telegram-bg:hover, .telegram-bg:focus { background-color: #0077b3 !important; }
.tumblr-bg { background-color: #35465c !important; }
.tumblr-bg:hover, .tumblr-bg:focus { background-color: #2c3a4c !important; }
.twitch-tv-bg { background-color: #6441a5 !important; }
.twitch-tv-bg:hover, .twitch-tv-bg:focus { background-color: #593a93 !important; }
.twitter-bg { background-color: #55acee !important; }
.twitter-bg:hover, .twitter-bg:focus { background-color: #3ea1ec !important; }
.vimeo-bg { background-color: #162221 !important; }
.vimeo-bg:hover, .vimeo-bg:focus { background-color: #0c1312 !important; }
.vine-bg { background-color: #00b488 !important; }
.vine-bg:hover, .vine-bg:focus { background-color: #009b75 !important; }
.wechat-bg { background-color: #7bb32e !important; }
.wechat-bg:hover, .wechat-bg:focus { background-color: #6d9f29 !important; }
.whatsapp-bg { background-color: #43d854 !important; }
.whatsapp-bg:hover, .whatsapp-bg:focus { background-color: #2ed441 !important; }
.yahoo-bg { background-color: #410093 !important; }
.yahoo-bg:hover, .yahoo-bg:focus { background-color: #360079 !important; }
.youtube-bg { background-color: #cd201f !important; }
.youtube-bg:hover, .youtube-bg:focus { background-color: #b71d1c !important; }
.profile-right .heading { padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #eaeaea; }
.awards { margin-bottom: 50px; }
.awards div[class^="col-"] { text-align: center; }
.award-item { display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; text-align: center; margin-bottom: 30px; }
.award-item .hexagon { margin: 35px 0; }
.hexagon { width: 100px; height: 55px; background: #ececec; position: relative; }
.hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #ececec; }
.hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid #ececec; }
.award-icon { font-size: 36px; line-height: 1.5em; }
ul.activity-timeline > li { margin-bottom: 45px; position: relative; z-index: 0; }
ul.activity-timeline > li .activity-icon { display: inline-block; vertical-align: middle; *vertical-align: auto; transform:scale(1);  transform-origin: 0 0;display: inline; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; float: left; width: 34px; height: 34px; background-color: #00AAFF; font-size: 16px; color: #fff; line-height: 34px; text-align: center; margin-right: 10px; }
ul.activity-timeline > li > p { margin-bottom: 0; padding-left: 40px; }
ul.activity-timeline > li .timestamp { display: block; font-size: .85em; color: #a3a3a3; }
ul.activity-timeline > li:after { content: ""; display: block; border-left: 1px solid #eaeaea; width: 1px; height: 100px; position: absolute; top: 5px; left: 16px; z-index: -1; }
ul.activity-timeline > li:last-child:after { display: none; }
.project-table .progress { margin-bottom: 0; }
.project-table .progress-bar { font-size: 10px; }
.project-table > tbody > tr > td { padding: 12px 8px; }
.project-table > tbody > tr > td .avatar { width: 22px; border: 1px solid #CCC; }
.ct-label { fill: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 0.4); font-size: 1.2rem; line-height: 1; }
.ct-chart-line .ct-label, .ct-chart-bar .ct-label { display: block; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.ct-chart-pie .ct-label, .ct-chart-donut .ct-label { dominant-baseline: central; }
.ct-label.ct-horizontal.ct-start { -webkit-box-align: flex-end; -webkit-align-items: flex-end; -ms-flex-align: flex-end; align-items: flex-end; -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; text-align: left; text-anchor: start; }
.ct-label.ct-horizontal.ct-end { -webkit-box-align: flex-start; -webkit-align-items: flex-start; -ms-flex-align: flex-start; align-items: flex-start; -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; text-align: left; text-anchor: start; }
.ct-label.ct-vertical.ct-start { -webkit-box-align: flex-end; -webkit-align-items: flex-end; -ms-flex-align: flex-end; align-items: flex-end; -webkit-box-pack: flex-end; -webkit-justify-content: flex-end; -ms-flex-pack: flex-end; justify-content: flex-end; text-align: right; text-anchor: end; }
.ct-label.ct-vertical.ct-end { -webkit-box-align: flex-end; -webkit-align-items: flex-end; -ms-flex-align: flex-end; align-items: flex-end; -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; text-align: left; text-anchor: start; }
.ct-chart-bar .ct-label.ct-horizontal.ct-start { -webkit-box-align: flex-end; -webkit-align-items: flex-end; -ms-flex-align: flex-end; align-items: flex-end; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; text-anchor: start; }
.ct-chart-bar .ct-label.ct-horizontal.ct-end { -webkit-box-align: flex-start; -webkit-align-items: flex-start; -ms-flex-align: flex-start; align-items: flex-start; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; text-anchor: start; }
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start { -webkit-box-align: flex-end; -webkit-align-items: flex-end; -ms-flex-align: flex-end; align-items: flex-end; -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; text-align: left; text-anchor: start; }
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end { -webkit-box-align: flex-start; -webkit-align-items: flex-start; -ms-flex-align: flex-start; align-items: flex-start; -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; text-align: left; text-anchor: start; }
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: flex-end; -webkit-justify-content: flex-end; -ms-flex-pack: flex-end; justify-content: flex-end; text-align: right; text-anchor: end; }
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; text-align: left; text-anchor: end; }
.ct-grid { stroke: rgba(0, 0, 0, 0.2); stroke-width: 1px; stroke-dasharray: 2px; }
.ct-grid-background { fill: none; }
.ct-point { stroke-width: 8px; stroke-linecap: round; }
.ct-line { fill: none; stroke-width: 3px; }
.ct-area { stroke: none; fill-opacity: 0.3; }
.ct-bar { fill: none; stroke-width: 10px; }
.ct-slice-donut { fill: none; stroke-width: 60px; }
.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut { stroke: #028fd0; }
.ct-series-a .ct-slice-pie, .ct-series-a .ct-area { fill: #028fd0; }
.ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut { stroke: #83c6ea; }
.ct-series-b .ct-slice-pie, .ct-series-b .ct-area { fill: #83c6ea; }
.ct-series-c .ct-point, .ct-series-c .ct-line, .ct-series-c .ct-bar, .ct-series-c .ct-slice-donut { stroke: #f4c63d; }
.ct-series-c .ct-slice-pie, .ct-series-c .ct-area { fill: #f4c63d; }
.ct-series-d .ct-point, .ct-series-d .ct-line, .ct-series-d .ct-bar, .ct-series-d .ct-slice-donut { stroke: #d17905; }
.ct-series-d .ct-slice-pie, .ct-series-d .ct-area { fill: #d17905; }
.ct-series-e .ct-point, .ct-series-e .ct-line, .ct-series-e .ct-bar, .ct-series-e .ct-slice-donut { stroke: #453d3f; }
.ct-series-e .ct-slice-pie, .ct-series-e .ct-area { fill: #453d3f; }
.ct-series-f .ct-point, .ct-series-f .ct-line, .ct-series-f .ct-bar, .ct-series-f .ct-slice-donut { stroke: #59922b; }
.ct-series-f .ct-slice-pie, .ct-series-f .ct-area { fill: #59922b; }
.ct-series-g .ct-point, .ct-series-g .ct-line, .ct-series-g .ct-bar, .ct-series-g .ct-slice-donut { stroke: #0544d3; }
.ct-series-g .ct-slice-pie, .ct-series-g .ct-area { fill: #0544d3; }
.ct-series-h .ct-point, .ct-series-h .ct-line, .ct-series-h .ct-bar, .ct-series-h .ct-slice-donut { stroke: #6b0392; }
.ct-series-h .ct-slice-pie, .ct-series-h .ct-area { fill: #6b0392; }
.ct-series-i .ct-point, .ct-series-i .ct-line, .ct-series-i .ct-bar, .ct-series-i .ct-slice-donut { stroke: #f05b4f; }
.ct-series-i .ct-slice-pie, .ct-series-i .ct-area { fill: #f05b4f; }
.ct-series-j .ct-point, .ct-series-j .ct-line, .ct-series-j .ct-bar, .ct-series-j .ct-slice-donut { stroke: #dda458; }
.ct-series-j .ct-slice-pie, .ct-series-j .ct-area { fill: #dda458; }
.ct-series-k .ct-point, .ct-series-k .ct-line, .ct-series-k .ct-bar, .ct-series-k .ct-slice-donut { stroke: #eacf7d; }
.ct-series-k .ct-slice-pie, .ct-series-k .ct-area { fill: #eacf7d; }
.ct-series-l .ct-point, .ct-series-l .ct-line, .ct-series-l .ct-bar, .ct-series-l .ct-slice-donut { stroke: #86797d; }
.ct-series-l .ct-slice-pie, .ct-series-l .ct-area { fill: #86797d; }
.ct-series-m .ct-point, .ct-series-m .ct-line, .ct-series-m .ct-bar, .ct-series-m .ct-slice-donut { stroke: #b2c326; }
.ct-series-m .ct-slice-pie, .ct-series-m .ct-area { fill: #b2c326; }
.ct-series-n .ct-point, .ct-series-n .ct-line, .ct-series-n .ct-bar, .ct-series-n .ct-slice-donut { stroke: #6188e2; }
.ct-series-n .ct-slice-pie, .ct-series-n .ct-area { fill: #6188e2; }
.ct-series-o .ct-point, .ct-series-o .ct-line, .ct-series-o .ct-bar, .ct-series-o .ct-slice-donut { stroke: #a748ca; }
.ct-series-o .ct-slice-pie, .ct-series-o .ct-area { fill: #a748ca; }
.ct-square { display: block; position: relative; width: 100%; }
.ct-square:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 100%; }
.ct-square:after { content: ""; display: table; clear: both; }
.ct-square > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-minor-second { display: block; position: relative; width: 100%; }
.ct-minor-second:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 93.75%; }
.ct-minor-second:after { content: ""; display: table; clear: both; }
.ct-minor-second > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-major-second { display: block; position: relative; width: 100%; }
.ct-major-second:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 88.88889%; }
.ct-major-second:after { content: ""; display: table; clear: both; }
.ct-major-second > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-minor-third { display: block; position: relative; width: 100%; }
.ct-minor-third:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 83.33333%; }
.ct-minor-third:after { content: ""; display: table; clear: both; }
.ct-minor-third > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-major-third { display: block; position: relative; width: 100%; }
.ct-major-third:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 80%; }
.ct-major-third:after { content: ""; display: table; clear: both; }
.ct-major-third > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-perfect-fourth { display: block; position: relative; width: 100%; }
.ct-perfect-fourth:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 75%; }
.ct-perfect-fourth:after { content: ""; display: table; clear: both; }
.ct-perfect-fourth > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-perfect-fifth { display: block; position: relative; width: 100%; }
.ct-perfect-fifth:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 66.66667%; }
.ct-perfect-fifth:after { content: ""; display: table; clear: both; }
.ct-perfect-fifth > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-minor-sixth { display: block; position: relative; width: 100%; }
.ct-minor-sixth:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 62.5%; }
.ct-minor-sixth:after { content: ""; display: table; clear: both; }
.ct-minor-sixth > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-golden-section { display: block; position: relative; width: 100%; }
.ct-golden-section:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 61.8047%; }
.ct-golden-section:after { content: ""; display: table; clear: both; }
.ct-golden-section > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-major-sixth { display: block; position: relative; width: 100%; }
.ct-major-sixth:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 60%; }
.ct-major-sixth:after { content: ""; display: table; clear: both; }
.ct-major-sixth > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-minor-seventh { display: block; position: relative; width: 100%; }
.ct-minor-seventh:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 56.25%; }
.ct-minor-seventh:after { content: ""; display: table; clear: both; }
.ct-minor-seventh > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-major-seventh { display: block; position: relative; width: 100%; }
.ct-major-seventh:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 53.33333%; }
.ct-major-seventh:after { content: ""; display: table; clear: both; }
.ct-major-seventh > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-octave { display: block; position: relative; width: 100%; }
.ct-octave:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 50%; }
.ct-octave:after { content: ""; display: table; clear: both; }
.ct-octave > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-major-tenth { display: block; position: relative; width: 100%; }
.ct-major-tenth:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 40%; }
.ct-major-tenth:after { content: ""; display: table; clear: both; }
.ct-major-tenth > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-major-eleventh { display: block; position: relative; width: 100%; }
.ct-major-eleventh:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 37.5%; }
.ct-major-eleventh:after { content: ""; display: table; clear: both; }
.ct-major-eleventh > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-major-twelfth { display: block; position: relative; width: 100%; }
.ct-major-twelfth:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 33.33333%; }
.ct-major-twelfth:after { content: ""; display: table; clear: both; }
.ct-major-twelfth > svg { display: block; position: absolute; top: 0; left: 0; }
.ct-double-octave { display: block; position: relative; width: 100%; }
.ct-double-octave:before { display: block; float: left; content: ""; width: 0; height: 0; padding-bottom: 25%; }
.ct-double-octave:after { content: ""; display: table; clear: both; }
.ct-double-octave > svg { display: block; position: absolute; top: 0; left: 0; }


/* message box */
.message-box { display: none; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9999; }
.message-box.open { display: block; }
.message-box .mb-container { position: absolute; left: 0px; top: 35%; background: rgba(0, 0, 0, 0.9); padding: 20px; width: 100%; }
.message-box .mb-container .mb-middle { width: 50%; left: 25%; position: relative; color: #FFF; }
.message-box .mb-container .mb-middle .mb-title { width: 100%; float: left; padding: 10px 0px 0px; font-size: 31px; font-weight: 400; line-height: 36px; }
.message-box .mb-container .mb-middle .mb-title .fa, .message-box .mb-container .mb-middle .mb-title .glyphicon { font-size: 38px; float: left; margin-right: 10px; }
.message-box .mb-container .mb-middle .mb-content { width: 100%; float: left; padding: 10px 0px 0px; }
.message-box .mb-container .mb-middle .mb-content p { margin-bottom: 0px; }
.message-box .mb-container .mb-middle .mb-footer { width: 100%; float: left; padding: 10px 0px; }
.message-box.message-box-warning .mb-container { background: rgba(254, 162, 35, 0.9); }
.message-box.message-box-danger .mb-container { background: rgba(182, 70, 69, 0.9); }
.message-box.message-box-info .mb-container { background: rgba(63, 186, 228, 0.9); }
.message-box.message-box-success .mb-container { background: #0081C2; }


/* LOGIN */
.login-container { float: left; width: 100%; min-height: 100%; background: url("../img/bg.png") left top repeat #1b1e24; }
.login-container .login-box { width: 400px; margin: 0px auto; padding-top: 100px; }
.login-container .login-box .login-logo {  /*background: url("../img/logo.png") top center no-repeat;*/
width: 100%; height: 50px; float: left; margin-bottom: 10px; }
.login-container .login-box .login-body { width: 100%; float: left; background: rgba(0, 0, 0, .5); padding: 20px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; }
.login-container .login-box .login-body .login-title { color: #FFF; font-size: 19px; font-weight: 300; margin-bottom: 20px; }
.login-container .login-box .login-body .form-control { border: 0px; background: rgba(0, 0, 0, 0.2); padding: 10px 15px; color: #CCC; line-height: 20px; height: auto; }
.login-container .login-box .login-body .btn-link { color: #FFF; border: 0px; }
.login-container .login-box .login-body .login-or { width: 40px; height: 25px; background: rgba(0, 0, 0, 0.2); position: relative; margin: 25px auto; text-align: center; line-height: 25px; color: #FFF; }
.login-container .login-box .login-body .login-or:before { content: ""; position: absolute; left: 0; width: 0; height: 0; top: -10px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 10px solid rgba(0, 0, 0, 0.2); }
.login-container .login-box .login-body .login-or:after { content: ""; position: absolute; left: 0; width: 0; height: 0; bottom: -10px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 10px solid rgba(0, 0, 0, 0.2); }
.login-container .login-box .login-body .login-subtitle { line-height: 20px; padding: 5px 0px; font-size: 12px; color: #FFF; }
.login-container .login-box .login-body .login-subtitle a { color: #7867A7; }
.login-container .login-box .login-footer { width: 100%; float: left; padding: 10px; color: #FFF; }
.login-container .login-box .login-footer a { color: #FFF; }
.login-container.lightmode { background: url("../img/backgrounds/wall_1.jpg") left top no-repeat; }
.login-container.lightmode .login-box .login-body { background: rgba(255, 255, 255, 0.2); }
.login-container.lightmode .login-box .login-body .form-control { background: rgba(255, 255, 255, 0.4); color: #333; }
.login-container.lightmode .login-box .login-subtitle a { color: #1b1e24; }

/* END LOGIN */
 /* LOGIN */
  .login-container { padding: 0px 10px; }
  .login-container .login-box { padding-top: 10px; width: 100%; }

  /* END LOGIN */

.align-right{float: right; margin: 0 0 10px 20px;}
.align-left{float: left;  margin: 0 20px 10px 0;}
.align-center {text-align: center; display: block; margin-left: auto; margin-right: auto; clear: both; margin-top: 20px; margin-bottom: 20px;}

figure img {max-width: 100%; height: auto; display: block;}

.topbuttons h3 {padding: 2px 30px 0 10px !important; color: #ffffff; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(0, 0, 0, 0.3)}


@media (max-width: 767px) {
    .main-content{padding: 28px, 0px;}
    .panel-body {padding-left: 9px; padding-right: 9px;}
}