/* Layouts */
.wrapper {min-height: 100%;}
.wrapper:before,
.wrapper:after {
  display: table;
  content: "";
}
.wrapper:after {clear: both;}

.bg-white {background-color:#fff !important;}
.bg-gray {background-color:#eee !important;}
.bg-graylight { background-color:#f6f6f6 !important;}
.border-gray-right { border-right:solid 1px #dbdbdb;}
.btn-lg {line-height: normal;}

/* Header */
body > .header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}
/* Define 2 column template */
.right-side,
.left-side {
  min-height: 100%;
  display: block;
}
/*right side - contins main content*/
.right-side {
  margin-left: 220px;
}
/*left side - contains sidebar*/
.left-side {
  position: absolute;
  width: 220px;
  top: 0;
}

#rightpanel { margin: 10px; margin-bottom:3em;}
.popover { z-index:999999 !important;}

@media screen and (min-width: 992px) {
  .left-side {
    /*top: 50px;*/
  }
  /*Right side strech mode*/
  .right-side.strech {
    margin-left: 0;
  }
  .right-side.strech > .content-header {
    margin-top: 0px;
  }
  /* Left side collapse */
  .left-side.collapse-left {
    left: -220px;
  }
}
/*Give content full width on xs screens*/
@media screen and (max-width: 992px) {
  .right-side {
    margin-left: 0;
  }
}
/*
    By default the layout is not fixed but if you add the class .fixed to the body element
    the sidebar and the navbar will automatically become poisitioned fixed
*/
body.fixed > .header,
body.fixed .left-side,
body.fixed .navbar {
  position: fixed;
  font-size: 13px;
  font-weight: 500;
}
body.fixed > .header {
  top: 0;
  right: 0;
  left: 0;
  background-color:#f9f9f9;
}
body.fixed .navbar {
  left: 0;
  right: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
body.fixed .wrapper { margin-top: 55px;}
/* Content */
.content {
  padding: 18px 18px;
  background: #f6f6f7;
  overflow: auto;
}
/* Utility */
/* H1 - H6 font */
h3, .h3{
  font-weight:300 !important;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  /*font-family: 'Source Sans Pro', sans-serif;*/
  font-weight:400;
}

.form-select { border-radius: 3px;}
/* Page Header */
.page-header {
  margin: 10px 0 20px 0;
  font-size: 22px;
}
.page-header > small {
  color: #666;
  display: block;
  margin-top: 5px;
}

/* All images should be responsive */
img { max-width:80px !important;}
.sort-highlight {
  background: #f4f4f4;
  border: 1px dashed #ddd;
  margin-bottom: 10px;
}
/* 10px padding and margins */
.pad { padding: 10px;}
.margin { margin: 10px;}
/* Display inline */

.inline {
  display: inline;
  width: auto;
}
/* Background colors */
.bg-red, .bg-yellow, .bg-aqua, .bg-blue, .bg-light-blue, .bg-green, .bg-navy, .bg-teal, .bg-olive, .bg-lime, .bg-orange, .bg-fuchsia, .bg-purple, .bg-maroon, .bg-black { color: #f9f9f9 !important;}
.bg-gray { background-color: #eaeaec !important;}.bg-black { background-color: #222222 !important;}.bg-red { background-color: #f56954 !important;}.bg-yellow { background-color: #f39c12 !important;}.bg-aqua { background-color: #00c0ef !important;}.bg-blue { background-color: #0073b7 !important;}.bg-light-blue { background-color: #0d6efd !important;}.bg-green { background-color: #00a65a !important;}.bg-navy { background-color: #001f3f !important;}.bg-teal { background-color: #39cccc !important;}.bg-olive { background-color: #3d9970 !important;}.bg-lime { background-color: #01ff70 !important;}.bg-orange { background-color: #ff851b !important;}.bg-fuchsia { background-color: #f012be !important;}.bg-purple { background-color: #932ab6 !important;}.bg-maroon { background-color: #85144b !important;}


/* Text colors */
.text-red { color: #f56954 !important;}.text-yellow { color: #f39c12 !important;}.text-aqua { color: #00c0ef !important;}.text-blue { color: #0073b7 !important;}.text-light-blue { color: #0d6efd !important;}.text-green { color: #00a65a !important;}.text-navy { color: #001f3f !important;}.text-teal { color: #39cccc !important;}.text-olive { color: #3d9970 !important;}.text-lime { color: #01ff70 !important;}.text-orange { color: #ff851b !important;}.text-fuchsia { color: #f012be !important;}.text-purple { color: #932ab6 !important;}.text-maroon { color: #85144b !important;}.text-white { color:#fff !important;}
.margin-bottom5 { margin-bottom:5px !important;}.margin-bottom10 { margin-bottom:10px !important;}

/*Hide elements by display none only*/
.hide { display: none !important;}
/* Remove borders */
.no-border { border: 0px !important;}
/* Remove padding */
.no-padding { padding: 0px !important;}
/* Remove margins */
.no-margin { margin: 0px !important;}
/* Remove box shadow */
.no-shadow { box-shadow: none!important;}

/* Don't display when printing */
@media print {
  .no-print {
    display: none;
  }
  .left-side,
  .header,
  .content-header {
    display: none;
  }
  .right-side {
    margin: 0;
  }
}
/* Remove border radius */
.flat {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}
/* Change the color of the striped tables */
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f3f4f5;
}
/* .text-center in tables */
table.text-center td,
table.text-center th {
  text-align: center;
}
/* _fix for sparkline tooltip */
.jqstooltip {
  padding: 5px!important;
  width: auto!important;
  height: auto!important;
}
/*
    Components: navbar, logo and content header
-------------------------------------------------
*/
body > .header { position: relative; max-height: 100px; z-index: 1030;}
body > .header .navbar {margin-bottom: 0; margin-left: 220px;}
body.left-expand > .header .navbar { margin-left: 0;}

body > .header .navbar {
    /*
-webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
  -moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
    */
}
body > .header .navbar .sidebar-toggle {
  float: left;
  padding: 9px 12px;
  margin-right: 0;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}
body > .header .navbar .sidebar-toggle:hover .icon-bar { background: #f6f6f6;}
body > .header .navbar .sidebar-toggle .icon-bar {
  display: block;
  width: 25px;
  height: 2px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
body > .header .navbar .sidebar-toggle .icon-bar + .icon-bar { margin-top: 5px;}
body > .header .navbar .nav > li.user > a { font-weight:normal;}
body > .header .navbar .nav > li.user > a > .fa,
body > .header .navbar .nav > li.user > a > .glyphicon,
body > .header .navbar .nav > li.user > a > .ion { margin-right: 5px;}
body > .header .navbar .nav > li > a > .label {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  right: 2px;
  font-size: 10px;
  font-weight: normal;
  width: 15px;
  height: 15px;
  line-height: 1.0em;
  text-align: center;
  padding: 2px;
}
body > .header .navbar .nav > li > a:hover > .label { top: 3px;}
body > .header .logo {
  float: left;
  text-align: center;
  padding: 0 10px;
  width: 220px;
  font-weight: 500;
  display: block;
  padding:2px;
}

body > .header .logo .icon { margin-right: 10px;}
.right-side > .content-header { position: relative; padding: 10px 15px 10px 20px;}
.right-side > .content-header > h1, .right-side > .content-header > h1 .glyphicon, .right-side > .content-header > h1 .fa { margin: 0; font-weight:400; font-size:26px; line-height:26px;}
.right-side div.h4 { font-size:20px; margin-top:0.2em; margin-bottom: 0.3em; line-height:normal}

.right-side > .content-header > h1 > small {
  font-size: 15px;
  display: inline-block;
  padding-left: 4px;
  font-weight: 300;
}
.right-side > .content-header > .breadcrumb {
  float: right;
  background: transparent;
  margin-top: 0px;
  margin-bottom: 0;
  font-size: 12px;
  padding: 7px 5px;
  position: absolute;
  top: 10px;
  right: 10px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.right-side > .content-header > .breadcrumb > li > a { color: #444; text-decoration: none;}
.right-side > .content-header > .breadcrumb > li > a > .fa,
.right-side > .content-header > .breadcrumb > li > a > .glyphicon,
.right-side > .content-header > .breadcrumb > li > a > .ion { margin-right: 5px;}
.right-side > .content-header > .breadcrumb > li + li:before { content: '>\00a0';}

@media screen and (max-width: 767px) {
  .right-side > .content-header > .breadcrumb {
    position: relative;
    margin-top: 5px;
    top: 0;
    right: 0;
    float: none;
    background: #f6f6f7;
  }
}

@media screen and (max-width: 560px) {
  body > .header { position: relative; }
  body > .header .logo,
  body > .header .navbar {
    width: 100%;
    float: none;
    position: relative!important;
  }
  body > .header .navbar { margin: 0; }
  body.fixed > .header { position: fixed; }
  body.fixed > .wrapper,
  body.fixed .sidebar-offcanvas {}
}

/*
    Component: Sidebar
--------------------------
*/
.sidebar { margin-bottom: 5px;}
.sidebar .sidebar-form input:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: transparent!important;
}
.sidebar .sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top:0.8em;
}
.sidebar .sidebar-menu > li {
  margin: 0;
  padding: 0;
}
.sidebar .sidebar-menu > li > a {
  padding: 6px 5px 10px 15px;
  display: block;
}
.sidebar .sidebar-menu > li > a > .fa,
.sidebar .sidebar-menu > li > a > .glyphicon,
.sidebar .sidebar-menu > li > a > .ion {
  width: 20px;
}
.sidebar .sidebar-menu .treeview-menu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar .sidebar-menu .treeview-menu > li {
  margin: 0;
}
.sidebar .sidebar-menu .treeview-menu > li > a {
  padding: 5px 5px 5px 15px;
  display: block;
  margin: 0px 0px;
}
.sidebar .sidebar-menu .treeview-menu > li > a > .fa,
.sidebar .sidebar-menu .treeview-menu > li > a > .glyphicon,
.sidebar .sidebar-menu .treeview-menu > li > a > .ion {
  width: 20px;
}

/*
 * Off Canvas
 * --------------------------------------------------
 * Gives us the push menu effect
 */
@media screen and (max-width: 992px) {
  body > .header .navbar { margin-bottom: 0; margin-left: 0; background-color:#fff;}
  .relative { position: relative; }
  .row-offcanvas-right .sidebar-offcanvas { right: -220px; }
  .row-offcanvas-left .sidebar-offcanvas { left: -220px; }
  .row-offcanvas-right.active { right: 220px; }
  .row-offcanvas-left.active { left: 220px; }
  .sidebar-offcanvas { left: 0; }
  body.fixed .sidebar-offcanvas { margin-top: 50px; left: -220px;}
  body.fixed .row-offcanvas-left.active .navbar { left: 220px !important; right: 0;}
  body.fixed .row-offcanvas-left.active .sidebar-offcanvas { left: 0px;}
}
/* 
    Dropdown menus
----------------------------
*/
/*Dropdowns in general*/
.dropdown-menu {
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  z-index: 2300;
}
.dropdown-menu > li > a > .glyphicon,
.dropdown-menu > li > a > .fa,
.dropdown-menu > li > a > .ion {
  margin-right: 10px;
}
.dropdown-menu > li > a:hover {
  background-color: #0d6efd;
  color: #f9f9f9;
}
/*Drodown in navbars*/
.skin-gray .navbar .dropdown-menu > li > a {
  color: #444444;
}
/*
    Navbar custom dropdown menu
------------------------------------
*/
.navbar-nav > .user-menu > .dropdown-menu {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  padding: 1px 0 0 0;
  border-top-width: 0;
  width: 354px;
  z-index:99999 !important;
  background-color:#fff;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.176);
}
.navbar-nav > .user-menu > .dropdown-menu:after {
  bottom: 100%;
  right: 10px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #eaeaec;
  border-width: 10px;
  margin-left: -10px;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
  /*height: 175px;*/
  padding: 25px 10px;
  background: #333;
  text-align: center;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
  z-index: 5;
  height: 90px;
  width: 90px;
  border: 8px solid;
  border-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
  z-index: 5;
  color: #333 !important;
  color: rgba(255, 255, 255, 0.8);
  font-size: 17px;
  margin-top: 10px;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small {
  display: block;
  font-size: 12px;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-body {
  padding: 15px;
  border-bottom: 1px solid #f4f4f4;
  border-top: 1px solid #dddddd;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-body:before,
.navbar-nav > .user-menu > .dropdown-menu > li.user-body:after {
  display: table;
  content: " ";
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-body:after {
  clear: both;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-body > div > a {
  color: #0073b7;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-footer {
  background-color: #f9f9f9;
  padding: 10px;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-footer:before,
.navbar-nav > .user-menu > .dropdown-menu > li.user-footer:after {
  display: table;
  content: " ";
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-footer:after {
  clear: both;
}
.navbar-nav > .user-menu > .dropdown-menu > li.user-footer .btn-default {
  color: #666666;
}
/* Add fade animation to dropdown menus */
.open > .dropdown-menu {
  animation-name: fadeAnimation;
  animation-duration: .7s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  -webkit-animation-name: fadeAnimation;
  -webkit-animation-duration: .7s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: fadeAnimation;
  -moz-animation-duration: .7s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: forwards;
}
@keyframes fadeAnimation {
  from {
    opacity: 0;
    top: 120%;
  }
  to {
    opacity: 1;
    top: 100%;
  }
}
@-webkit-keyframes fadeAnimation {
  from {
    opacity: 0;
    top: 120%;
  }
  to {
    opacity: 1;
    top: 100%;
  }
}
/* Fix dropdown menu for small screens to display correctly on small screens */
@media screen and (max-width: 767px) {
  .navbar-nav > .user-menu > .dropdown-menu
	{
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    background: #ffffff;
  }
}
/* 
   All form elements including input, select, textarea etc.
-----------------------------------------------------------------
*/
/*.form-control {
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  border-radius: 0px !important;
  box-shadow: none;
}*/
.form-control:focus {}
.form-group.has-success label {
  color: #00a65a;
}
.form-group.has-success .form-control {
  border-color: #00a65a !important;
  box-shadow: none;
}
.form-group.has-warning label {
  color: #f39c12;
}
.form-group.has-warning .form-control {
  border-color: #f39c12 !important;
  box-shadow: none;
}
.form-group.has-error label {
  color: #f56954;
}
.form-group.has-error .form-control {
  border-color: #f56954 !important;
  box-shadow: none;
}
/* Input group */
.input-group .input-group-addon {
  border-radius: 0;
  background-color: #f4f4f4;
}
/* button groups */
.btn-group-vertical .btn.btn-flat:first-of-type,
.btn-group-vertical .btn.btn-flat:last-of-type {
  border-radius: 0;
}
/* Checkbox and radio inputs */
/*
.checkbox,
.radio {
  padding-left: 0;
}
*/

/*
    Component: Small boxes
*/
.small-box {
position: relative;
display: block;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
margin-bottom: 15px;
}
.small-box > .inner {
  padding: 10px;
}
.small-box > .small-box-footer {
  position: relative;
  text-align: center;
  padding: 3px 0;
  color: #fff;
  display: block;
  z-index: 10;
  background: rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
.small-box > .small-box-footer:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.15);
}
.small-box h3 {
  font-size: 35px;
  font-weight: bold;
  margin: 0 0 0 0;
  white-space: nowrap;
  padding: 0;
  color: #fff;
}
.small-box h3 > span {
  font-size: 25px;
  font-weight: bold;
  margin: 0 0 10px 0;
  white-space: nowrap;
  padding: 0;
}
.small-box p { font-size: 15px;}
.small-box p > small {
  display: block;
  color: #f9f9f9;
  font-size: 13px;
  margin-top: 5px;
}
.small-box h3,
.small-box p { z-index: 5;}
.small-box h3 {min-height: 45px;}
.bg-aqua h3 { font-size: 25px;}
.small-box .icon {
  position: absolute;
  top: auto;
  bottom: 25px;
  right: 5px;
  z-index: 0;
  font-size: 50px;
  line-height:50px;
  color: rgba(0, 0, 0, 0.15);
}
.small-box:hover {
  text-decoration: none;
  color: #f9f9f9;
}
.small-box:hover .icon {
  animation-name: tansformAnimation;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  -webkit-animation-name: tansformAnimation;
  -webkit-animation-duration: .5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: tansformAnimation;
  -moz-animation-duration: 0.5s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: forwards;
}
@keyframes tansformAnimation {
  from {
    font-size: 65px;
  }
  to {
    font-size: 70px;
  }
}
@-webkit-keyframes tansformAnimation {
  from {
    font-size: 65px;
  }
  to {
    font-size: 70px;
  }
}
@media screen and (max-width: 480px) {
  .small-box {
    text-align: center;
  }
  .small-box .icon {
    display: none;
  }
  .small-box p {
    font-size: 12px;
  }
}

/*
    Component: Buttons
-------------------------
*/
/*.btn {
  font-weight: 500;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid transparent;
  -webkit-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.09);
  -moz-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.09);
  box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.09);
}
.btn.btn-default {
  background-color: #fafafa;
  color: #666;
  border-color: #ddd;
  border-bottom-color: #ddd;
}
.btn.btn-default:hover,
.btn.btn-default:active,
.btn.btn-default.hover {
  background-color: #f4f4f4!important;
}
.btn.btn-default.btn-flat {
  border-bottom-color: #d9dadc;
}
.btn.btn-primary {
  background-color: #0d6efd;
  border-color: #367fa9;
}
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary.hover {
  background-color: #367fa9;
}
.btn.btn-success {
  background-color: #00a65a;
  border-color: #008d4c;
}*/
.btn.btn-success:hover,
.btn.btn-success:active,
.btn.btn-success.hover {
  background-color: #008d4c;
}
.btn.btn-info {
  background-color: #00c0ef;
  border-color: #00acd6;
}
.btn.btn-info:hover,
.btn.btn-info:active,
.btn.btn-info.hover {
  background-color: #00acd6;
}
.btn.btn-danger {
  background-color: #f56954;
  border-color: #f4543c;
}
.btn.btn-danger:hover,
.btn.btn-danger:active,
.btn.btn-danger.hover {
  background-color: #f4543c;
}
.btn.btn-warning {
  background-color: #f39c12;
  border-color: #e08e0b;
}
.btn.btn-warning:hover,
.btn.btn-warning:active,
.btn.btn-warning.hover {
  background-color: #e08e0b;
}
.btn.btn-flat {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-width: 1px;
}
.btn:active {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn:focus {
  outline: none;
}
.btn.btn-file {
  position: relative;
  width: 120px;
  height: 35px;
  overflow: hidden;
}
.btn.btn-file > input[type='file'] {
  display: block !important;
  width: 100% !important;
  height: 35px !important;
  opacity: 0 !important;
  position: absolute;
  top: -10px;
  cursor: pointer;
}
.btn.btn-app {
  position: relative;
  padding: 15px 5px;
  margin: 0 0 10px 10px;
  min-width: 80px;
  height: 60px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  text-align: center;
  color: #666;
  border: 1px solid #ddd;
  background-color: #fafafa;
  font-size: 12px;
}
.btn.btn-app > .fa,
.btn.btn-app > .glyphicon,
.btn.btn-app > .ion {
  font-size: 20px;
  display: block;
}
.btn.btn-app:hover {
  background: #f4f4f4;
  color: #444;
  border-color: #aaa;
}
.btn.btn-app:active,
.btn.btn-app:focus {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn.btn-app > .badge {
  position: absolute;
  top: -3px;
  right: -10px;
  font-size: 10px;
  font-weight: 400;
}
.btn.btn-social-old {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  opacity: 0.9;
  padding: 0;
}
.btn.btn-social-old > .fa {
  padding: 10px 0;
  width: 40px;
}
.btn.btn-social-old > .fa + span {
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.btn.btn-social-old span {
  padding: 10px;
}
.btn.btn-social-old:hover {
  opacity: 1;
}
.btn.btn-circle {
  width: 30px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

/* 
    Component: alert
------------------------
*/
.alert {
  padding-left: 20px;
  position: relative;
}
.alert > .fa,
.alert > .glyphicon {
  position: absolute;
  left: -15px;
  top: -15px;
  width: 35px;
  height: 35px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  line-height: 35px;
  text-align: center;
  background: inherit;
  border: inherit;
}
/*
    Component: Navs
*/
/* NAV PILLS */
.nav.nav-pills > li > a {
  border-top: 3px solid transparent;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  color: #444;
}
.nav.nav-pills > li > a > .fa,
.nav.nav-pills > li > a > .glyphicon,
.nav.nav-pills > li > a > .ion {
  margin-right: 5px;
}
.nav.nav-pills > li.active > a,
.nav.nav-pills > li.active > a:hover {
  background-color: #f6f6f6;
  border-top-color: #0d6efd;
  color: #444;
}
.nav.nav-pills > li.active > a {
  font-weight: 600;
}
.nav.nav-pills > li > a:hover {
  background-color: #f6f6f6;
}
.nav.nav-pills.nav-stacked > li > a {
  border-top: 0;
  border-left: 3px solid transparent;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  color: #444;
}
.nav.nav-pills.nav-stacked > li.active > a,
.nav.nav-pills.nav-stacked > li.active > a:hover {
  background-color: #f6f6f6;
  border-left-color: #0d6efd;
  color: #444;
}
.nav.nav-pills.nav-stacked > li.header {
  border-bottom: 1px solid #ddd;
  color: #777;
  margin-bottom: 10px;
  padding: 5px 10px;
  text-transform: uppercase;
}

/* 
    Page: register and login
*/
.form-box {
  width: 360px;
  margin: 90px auto 0 auto;
}
.form-box .header {
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: #3d9970;
  box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.2);
  padding: 20px 10px;
  text-align: center;
  font-size: 26px;
  font-weight: 300;
  color: #fff;
}
.form-box .body,
.form-box .footer {
  padding: 10px 20px;
  background: #fff;
  color: #444;
}
.form-box .body > .form-group,
.form-box .footer > .form-group {
  margin-top: 20px;
}
.form-box .body > .form-group > input,
.form-box .footer > .form-group > input {
  border: #fff;
}
.form-box .body > .btn,
.form-box .footer > .btn {
  margin-bottom: 10px;
}
.form-box .footer {
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
@media (max-width: 767px) {
  .form-box {
    width: 90%;
  }
}


/* 
    Skin Blue 
    ---------
*/
 /* skin-blue navbar */
 .skin-blue .navbar {
	background-color:#f9f9f9;
 }
 .skin-blue .navbar .nav .messages-menu a:hover, .skin-blue .navbar .nav .messages-menu a:focus {
     background: #0AA699!important;
     color: #ffffff;
 }
 .label-success { background-color: #0AA699!important; }
 .label-danger { background-color: #F56954!important; }
 .skin-blue .navbar .nav .notifications-menu a {
     border: 2px solid #0190D9;
     border-radius: 50%;
     color: #0190D9;
     margin: 5px 3px 0 0;
       padding: 6px 7px !important;
 }
 .skin-blue .navbar .nav .notifications-menu a:hover, .skin-blue .navbar .nav .notifications-menu a:focus {
     background: #0190D9!important; color: #ffffff;
 }
 .skin-blue .navbar .nav .tasks-menu a {
     border: 2px solid #F56954;
     border-radius: 50%;
     color: #F56954;
     margin: 5px 3px 0 0;
     padding: 6px 7px !important;
 }
 .skin-blue .navbar .nav .tasks-menu a:hover, .skin-blue .navbar .nav .tasks-menu a:focus {
     background: #F56954!important;
     color: #ffffff;
 }
 .skin-blue .navbar .nav > li > a:hover, .skin-blue .navbar .nav > li > a:active, .skin-blue .navbar .nav > li > a:focus, .skin-blue .navbar .nav .open > a, .skin-blue .navbar .nav .open > a:hover, .skin-blue .navbar .nav .open > a:focus {
     background: transparent;
     /* color: #f6f6f6; */
 }
 .skin-blue .navbar .nav .style-menu a {
     border: 2px solid #346185;
     border-radius: 50%;
     color: #346185;
     margin: 5px 3px 0 0;
     padding: 6px 7px !important;
 }
 .skin-blue .navbar .nav .style-menu a:hover, .skin-blue .navbar .nav .style-menu a:focus {
     background: #346185;
     color: #ffffff;
     cursor: pointer;
 }
 .skin-blue .navbar .navbar-right > .nav { margin-right: 15px;}
 .skin-blue .navbar .navbar-right > li { margin-left: 10px!important; }
 .skin-blue .navbar .sidebar-toggle .icon-bar { background: #ccc; }
 .skin-blue .navbar .sidebar-toggle:hover .icon-bar { background: #3e261a !important; }

 .skin-blue .right-side > .content-header { box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.02); }
 /* skin-blue sidebar */
 .skin-blue .sidebar { border-bottom: 0px solid #fff; }
  .skin-blue .sidebar {
    border-bottom: 0px solid #fff;
    background: -moz-linear-gradient(59deg, rgba(238,55,135,1) 0%, rgba(11,0,125,1) 57%, rgba(11,0,125,1) 100%); /* ff3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(238,55,135,1)), color-stop(57%, rgba(11,0,125,1)), color-stop(100%, rgba(11,0,125,1))); /* safari4+,chrome */
    background: -webkit-linear-gradient(59deg, rgba(238,55,135,1) 0%, rgba(11,0,125,1) 57%, rgba(11,0,125,1) 100%); /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(59deg, rgba(238,55,135,1) 0%, rgba(11,0,125,1) 57%, rgba(11,0,125,1) 100%); /* opera 11.10+ */
    background: -ms-linear-gradient(59deg, rgba(238,55,135,1) 0%, rgba(11,0,125,1) 57%, rgba(11,0,125,1) 100%); /* ie10+ */
    background: linear-gradient(31deg, rgba(238,55,135,1) 0%, rgba(11,0,125,1) 57%, rgba(11,0,125,1) 100%); /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b007d', endColorstr='#ee3787',GradientType=0 ); /* ie6-9 */  
    
 }

 .skin-blue .left-side {
    -webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.1);
    box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);
}
 .skin-blue .sidebar > .sidebar-menu > li {border-top: 0px solid #fff; border-bottom: 1px solid rgba(255,255,255,0.08);}
 .skin-blue .sidebar > .sidebar-menu > li:first-of-type { border-top: 0px solid #dbdbdb;}
 .skin-blue .sidebar > .sidebar-menu > li:first-of-type > a { border-top: 0px solid #fff;}
 .skin-blue .sidebar > .sidebar-menu > li > a { margin-right: 0px;}
 .skin-blue .sidebar > .sidebar-menu > li > a > span {
	/* font-weight: 400;
	margin-right: 20px!important; */
	right: -3px;
	position: relative;
}
.skin-blue .sidebar > .sidebar-menu > li > a i.fa { color:#fff !important;}
.skin-blue .sidebar > .sidebar-menu > li > a:hover, .skin-blue .sidebar > .sidebar-menu > li.active > a {
     color: #fff;
     background:#0d131e;
     background-color: rgba(21, 0, 126, 0.2);
 }
.skin-blue .sidebar > .sidebar-menu > li > a:hover i.fa, .skin-blue .sidebar > .sidebar-menu > li.active > a i.fa { color:#fff !important;}
.skin-blue .sidebar > .sidebar-menu > li.active > a:after { border: solid transparent; content: ""; position: absolute; border-right-color: #fff; border-width: 8px; right:0; margin-top:2px;}

.skin-blue .sidebar > .sidebar-menu > li > .treeview-menu { margin: 0; background-color: rgba(21, 0, 126, 0.2);}
.skin-blue .leftmenu {
     background: #222a38;
     -webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.1);
     box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);
     z-index: 1501;
 }
 .skin-blue .sidebar a {color: #ffffff;}
 .skin-blue .sidebar a:hover { text-decoration: none;}
 .skin-blue .treeview-menu > li > a {font-weight: normal;}
 .skin-blue .treeview-menu > li.active > a, .skin-blue .treeview-menu > li > a:hover { color: #fff; }
 .skin-blue .sidebar-form {
 	-webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px;
 }
 .skin-blue .sidebar-form input[type="text"], .skin-blue .sidebar-form .btn {
     box-shadow: none;
     background-color: #fff;
     border: 1px solid #fff;
     height: 45px;
 }
 .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
.image-avatar {
     margin: 0 auto;
     text-align: center;
     position: relative;
	 margin-bottom:0.2em;
 }
 .avatar {
        height: 28px;
        width: 28px;
        position: relative;
       display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .avatar-group {
        padding: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .avatar-group > li:not(:last-child) {margin-right: -1rem;}
    .avatar-group .avatar-img {border: 3px solid var(--bs-body-bg);}
    .avatar-img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
    .avatar-md {
        height: 2.2rem;
        width: 2.2rem;
    }
    .avatar {border-radius: 50% !important;}
.user-panel {
     padding: 1em 10px 0 0;
     position: relative;
}
.user-panel:before, .user-panel:after {
     display: table;
     content: " ";
}
.user-panel:after {lear: both; }
ul.profile-list {
        margin:0;
        padding:2px 0;
        text-align: center;
        position: relative;
        left: 0;
        margin-top:1em;
        margin-bottom:0em;
}
.profile-list li {
     font-size: 12px;
     list-style: none;
     display: inline;
     margin: 0 3px;
}
/* .profile-list li.store-view {
 }
 .profile-list li.store-view div {
 position:absolute; color:#00FF00;
 width:10px; height:10px; margin-left:20px;

 }
*/
.profile-list li a span {
     height: 32px;
     width: 32px;
     border-radius: 50%;
     display: inline-block;
     text-align: center;
     line-height: 28px;
     font-size: 15px;
     background: #602e0d;
	 color:#fff;
}
.profile-list li a span:hover {
     cursor: pointer;
     background: #c0943d;
     color: #fff;
}

.profile-dropdown .dropdown-toggle {border:none;}
.profile-dropdown .dropdown-toggle.show {}


/* Skin Gray
    -----
*/
.skin-gray .navbar {
  background-color: #fff;
  border-bottom:solid 1px #eee;
}
.skin-gray .navbar .nav a { color:#aaa;}
.skin-gray .navbar .nav > li > a:hover,
.skin-gray .navbar .nav > li > a:active,
.skin-gray .navbar .nav > li > a:focus,
.skin-gray .navbar .nav .open > a,
.skin-gray .navbar .nav .open > a:hover,
.skin-gray .navbar .nav .open > a:focus {
  background: #ececec;
  color: #333;
}
.skin-gray .navbar .navbar-right > .nav {
  margin-right: 10px;
}
.skin-gray .navbar .sidebar-toggle .icon-bar {
  background: #ccc;
}
.skin-gray .navbar .sidebar-toggle:hover .icon-bar {
  background: #333 !important;
}
/* skin-blue logo */
.skin-gray .logo { background-color: #fff; color: #f9f9f9;}
.skin-gray .logo > a { color: #f9f9f9;}
.skin-gray .logo:hover { background: #fff;}

/* skin-blue content header */
.skin-gray .right-side > .content-header {
  background: #fbfbfb;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
/* Skin-blue user panel */
.skin-gray .user-panel > .image > img { border: 1px solid #dfdfdf;}
.skin-gray .user-panel > .info,
.skin-gray .user-panel > .info > a { color: #555555;}
/* skin-blue sidebar */
.skin-gray .sidebar { border-bottom: 1px solid #fff;}
.skin-gray .sidebar > .sidebar-menu > li {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #dbdbdb;
}
.skin-gray .sidebar > .sidebar-menu > li:first-of-type { border-top: 1px solid #dbdbdb;}
.skin-gray .sidebar > .sidebar-menu > li:first-of-type > a { border-top: 1px solid #fff;}
.skin-gray .sidebar > .sidebar-menu > li > a { margin-right: 1px;}
.skin-gray .sidebar > .sidebar-menu > li > a:hover,
.skin-gray .sidebar > .sidebar-menu > li.active > a {
  color: #222;
  background: #f9f9f9;
}

.skin-gray .sidebar > .sidebar-menu > li > .treeview-menu {
  margin: 0 1px;
  background: #f9f9f9;
}
.skin-gray .left-side {
  background: #f4f4f4;
  -webkit-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.1);
  box-shadow: inset -3px 0px 8px -4px rgba(0, 0, 0, 0.07);
}
.skin-gray .sidebar a { color: #555555;}
.skin-gray .sidebar a:hover { text-decoration: none;}
.skin-gray .treeview-menu > li > a { color: #777;}
.skin-gray .treeview-menu > li.active > a,
.skin-gray .treeview-menu > li > a:hover { color: #111;}
.skin-gray .sidebar-form {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #dbdbdb;
  margin: 10px 10px;
}
.skin-gray .sidebar-form input[type="text"],
.skin-gray .sidebar-form .btn {
  box-shadow: none;
  background-color: #fafafa;
  border: 1px solid #fafafa;
  height: 35px;
}
.skin-gray .sidebar-form input[type="text"] {
  color: #666;
  -webkit-border-top-left-radius: 2px !important;
  -webkit-border-top-right-radius: 0 !important;
  -webkit-border-bottom-right-radius: 0 !important;
  -webkit-border-bottom-left-radius: 2px !important;
  -moz-border-radius-topleft: 2px !important;
  -moz-border-radius-topright: 0 !important;
  -moz-border-radius-bottomright: 0 !important;
  -moz-border-radius-bottomleft: 2px !important;
  border-top-left-radius: 2px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 2px !important;
}
.skin-gray .sidebar-form input[type="text"]:focus,
.skin-gray .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  background-color: #fff;
  color: #666;
}
.skin-gray .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  border-left-color: #fff;
}
.skin-gray .sidebar-form .btn {
  color: #999;
  -webkit-border-top-left-radius: 0 !important;
  -webkit-border-top-right-radius: 2px !important;
  -webkit-border-bottom-right-radius: 2px !important;
  -webkit-border-bottom-left-radius: 0 !important;
  -moz-border-radius-topleft: 0 !important;
  -moz-border-radius-topright: 2px !important;
  -moz-border-radius-bottomright: 2px !important;
  -moz-border-radius-bottomleft: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 2px !important;
  border-bottom-right-radius: 2px !important;
  border-bottom-left-radius: 0 !important;
}

/*-----26june----*/
.store-url { position:absolute; margin-top:1em; margin-left:2%;}
.links-heading {margin-left:1em; font-size:16px; text-transform:uppercase; font-weight:bold;}

/* @media screen and (max-width: 980px) {
     body > .header .navbar {
         margin-left: 0px!important;
     }
 }*/
 
/*------create store process------*/
.steps-box-hold {
	background:url(../images/steps-bg.gif);
/*	box-shadow: inset 0px 2px 7px -1px #ABABAB;
	-webkit-box-shadow: inset 0px 2px 7px -1px #ABABAB;
	-moz-box-shadow: inset 0px 2px 7px -1px #ABABAB;
	-o-box-shadow: inset 0px 2px 7px -1px #ABABAB;
*/	padding-bottom:1.5em;
	margin:0 auto;
	border-radius:2px;
	border-bottom:solid 2px #ddd;
	margin-left:0.2em;
	margin-top:-2.5em;
}
 
ol.store-create-process { margin:0 !important; padding:0!important; list-style:none;}
ol.store-create-process li { float:left; display:inline-block; margin-right:2px; padding-left:0px !important; padding-right:0px !important; text-align:center; line-height: 4em; font-size:11px; font-weight:400;}
ol.store-create-process[data-store-create-process-steps="2"] li { width: 49%; }
ol.store-create-process[data-store-create-process-steps="3"] li { width: 32%; }
ol.store-create-process[data-store-create-process-steps="4"] li { width: 24%; }
ol.store-create-process[data-store-create-process-steps="5"] li { width: 19%; }
ol.store-create-process[data-store-create-process-steps="6"] li { width: 16%; }
ol.store-create-process[data-store-create-process-steps="7"] li { width: 14%; }
ol.store-create-process[data-store-create-process-steps="8"] li { width: 12%; }
ol.store-create-process[data-store-create-process-steps="9"] li { width: 11%; }

ol.store-create-process8 li { width:12.2%; font-size:0.95em; text-align:center;}
ol.store-create-process8 li a { color:#333; padding-left:0.3em !important; font-size:12px;}
ol.store-create-process8 li a:hover { color:#3c8dbf; text-decoration:underline;}
ol.store-create-process8 li:before
{
	height: 2em !important;
    width: 2em !important;
	line-height: 2em!important;
	bottom: -5.1em!important;
	left: 42.5% !important;
	float:none !important;
	display:block!important;
	text-align:center !important;
}

@media screen and (max-width: 1024px) {
.steps-box-hold { margin-top:-2em;}
ol.store-create-process8 li { width:12%; font-size:0.75em; text-align:center;}
ol.store-create-process8 li a {font-size: 11px; color: #666;}
}

@media screen and (max-width: 768px) {
	body > .header .navbar .sidebar-toggle { float:left; margin-right:0.6em}
	.navbar-nav > .user-menu > .dropdown-menu { width: 100%;}

	body > .header .logo { background-color: #210a00;}
	body > .header .navbar, .navbar { background-color:#2f1205;}
	body > .header .logo img { max-width:190px; padding:0.6em 0}
	.content {}
	body > .header .navbar .sidebar-toggle {
	  padding: 5px 5px !important;
	  margin-top: -2px !important;
	}
	.user-footer a.btn-flat { display:block; width:100%; text-align:left; margin-bottom:0.2em}
	.skin-blue .navbar .sidebar-toggle:hover .icon-bar { background: #fff !important; }
	body > .header .navbar .nav > li.user > a, .nav > li > a {color: #fff;}
	.navbar .navbar-nav > li { float:right;}
	.navbar-nav > .user-menu > .dropdown-menu {
	  max-width: 280px;
	  z-index:99999 !important;
	  position:absolute !important;
	  left:-12%;
	  margin-top:5px;
	}
	.skin-blue .navbar .navbar-right > .nav { margin-right:0px !important; float:left; padding-left:1em}
	.navbar-nav > .user-menu > .dropdown-menu:after { left: 7.5%;}
	.navbar-nav > .user-menu > .dropdown-menu > li.user-header { padding: 5px 10px !important;}
	.navbar-nav { margin: 0px;}
	.navbar-nav > li > a { padding-top:8px; padding-bottom: 15px; font-size:12px;}
	.navbar .navbar-right { float: left; width:80%;}
	.content { margin-top:1em;}
}

ol.store-create-process li.store-create-process-done { color: #8bbc26; border-bottom: 4px solid yellowgreen;}
ol.store-create-process li.store-create-process-todo, ol.store-create-process li.store-create-process-active { color: silver; border-bottom: 4px solid silver;}
 ol.store-create-process li.store-create-process-active {border-bottom: 4px solid #518ecf;color: #518ecf;}
ol.store-create-process li:after { content: "\00a0\00a0";}
ol.store-create-process li:before {
    position: relative;
    bottom: -2.8em;
	float:left;
    line-height: 1em;
	left: 40.5% !important;
}
ol.store-create-process li.store-create-process-done:before {
    content: "\2713";
    color: white;
    background-color: yellowgreen;
    height: 2.4em;
    width: 2.4em;
    line-height: 2.4em;
    border: none;
    border-radius: 1.2em;
	font-weight:600;
	font-family:Georgia, "Times New Roman", Times, serif;
}
ol.store-create-process li.store-create-process-todo:before {
    content: "\039F";
    color: silver;
    background-color: #f5f4f4;
	border-radius: 1.2em;
	font-weight:600;
}
ol.store-create-process li.store-create-process-active:before {
   content: "\039F";
    color: #518ecf;
    background-color: #f5f4f4;
    font-size: 1.5em;
    bottom: -2.2em;
}
.btn-store-key {margin:0; padding:0; margin:0 auto; width:90%;}
.btn-store-key li {list-style:none;}
.btn-store-key li a {
	list-style:none;
    display:block;
    padding:7px 15px 7px 10px;
	border-radius:15px;
	text-align:center;
	border:dotted 1px #c0943d;
}
.btn-store-key li a i.fa {font-size:14px !important; padding-right:0.5em;}
.btn-store-key li a:hover {color:#fff;border:dotted 1px #c0943d;}
.arrow-indication:before {
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent; 
	border-right:13px solid #e8e8e8; 
	content: "";
	left: -10px;
	top:5px;
	position: absolute;
	z-index: 99;
}
.box-upload { background-color:#f7f7f7; border:dashed 1px #d2d2d2; padding:6px; text-align:center; min-height:45px;}
.box-upload-img { position:relative; text-align:center; border-radius:2px; margin-bottom:0.2em;}
.box-upload-img a {text-transform:uppercase; font-size:12px; line-height:20px; color:#c2c3c5;}
.box-upload-img a:hover {color:#0d6efd;}
.box-upload-img span.image {background-color:#f0f0f0; display:block; font-size:5em; line-height:130px;}
.box-upload-img span.image > i {padding:0.3em 0; }
/*.box-upload-img span > img {max-width:150px; max-height:150px; }*/
.box-upload-img label.option {padding-right:0px !important; }
.btn-delete-image-hold {position:absolute; top:0px; right:0;z-index:9;}
.btn-delete-image-hold .fa {background-color:#666; padding:5px;}

.slimScrollRail {background-color:#bbb !important;}
.slimScrollBar {background-color:#c0943d !important; border-radius:3px !important; cursor:pointer; z-index:9999;}

/*----image crop popup box-----*/
.modal-header { border-radius:4px 4px 0 0}
.modal-content { background-color:#FFF; padding-bottom:1em}
#divMainImage {float:left; padding-right:1em; margin-right:1em; border-right:solid 1px #ccc;}
#preview-pane {
  z-index: 2000;
  float:left;
  overflow:hidden;
}
#preview-pane .preview-container {
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.modal.modal-wide .modal-dialog { width: 80%; max-width:1100px;}

/*-----order print*/
.order-heading { border-bottom:solid 3px #4a4a4a; text-align:center;}
.order-heading h3 { margin:0; font-size:20px; color:#4a4a4a; width:100%; position:absolute; margin-top:-12px; padding-right:40px;}
.order-heading h3 span { background-color:#fff; padding:0.1em 0.8em;}

/*------renew plan------*/
.price-box { padding:1.6em 2em; border:dotted 2px #0d6efd;  float:right; margin-top:0.8em}
.price-box .plan-bigprice { font-size:4em; line-height:1em; font-weight:300; color:#0d6efd;}
.price-box .plan-bigprice sup {font-size:14px; font-weight:400; vertical-align:middle; padding-bottom:20px;}
.price-box .plan-cut-price { color:#c41818;}
.price-box .plan-cut-price sup { padding-bottom:0px;}
.progress { border:solid 1px #ddd;}

.setting-tab ul { background-color:#fff; font-weight:400; border:solid 1px #e5e5e5; border-radius:3px; margin-bottom:2em;}
.setting-tab li { border-bottom:solid 1px #e5e5e5; padding:1.2em;}
.setting-tab p { font-weight:600;}
.setting-tab a { font-weight:600; color:#0d6efd; line-height:25px;}
.setting-tab .btn-success, .setting-tab .btn-primary { color:#fff;}
.setting-tab a:hover { border-bottom:solid 1px #0d6efd;}
.setting-tab li:last-child { border-bottom:none; border-radius:0 0 3px 3px;}
.setting-tab li:nth-child(odd) {
    background-color:#f8f8f8;
    text-transform:uppercase;
    padding:0.6em 1.2em;
    letter-spacing:2px;
    color:#000;
    font-weight:600;
    font-size:110%;
}
.setting-tab .form-group { margin-bottom: 5px; line-height:25px;}
.setting-tab ul ul { border:none;}
.setting-tab li li {padding:0;}
.setting-tab li li a { letter-spacing:0;}
.setting-tab li li:nth-child(odd) { text-transform:none; letter-spacing:0; padding:2px; background-color:#fff;}
.setting-tab li { position:relative;}
.setting-tab li div.disable-section:after { position:absolute; left:0; top:0; content:''; width:100%; height:100%;background-color:rgba(255, 255, 255, 0.276); z-index:999;}
.setting-tab li div.disable-section:before { position:absolute; left:50%; top:50%; content:'This Section is disabled'; z-index:999; margin-left:-50px;}

@media screen and (max-width: 1024px) {
    .modal.modal-wide .modal-dialog { width: 99%;}
    #divMainImage { padding-right:0.5em; margin-right:0.5em; }
}
@media screen and (max-width: 768px) {
    .right-side > .content-header { padding-top:2em; text-align:center;}
    .breadcrumb { display:none;}
    .jcrop-holder, #preview-pane { float:none; display:block;}
    .modal.modal-wide .modal-dialog { height:100%; display:block;}
    .price-box { float:none; display:block;   padding:1em; }
}
 

@media screen and (min-width: 769px) {
    .verification-modal .modal-dialog { max-width:500px;}
}
@media screen and (max-width: 768px) {
    body > .header .navbar { margin-left:0;}
    .navbar .navbar-right {width: 70%; float:none !important}
    .skin-blue .navbar .navbar-right > .nav {padding-left: 0.5em;}
    .navbar-nav > .user-menu > .dropdown-menu {
                left: 5%;
                margin-top: -4px;
                width: 400px;
                max-width:none;
    }
    .callback-btn { padding: 7px 15px;}
}
@media screen and (max-width: 767px) {
        body > .header .navbar .sidebar-toggle { float:left;}
        .navbar-nav > .user-menu > .dropdown-menu {
                width: 100%; min-width: 250px;margin-top: -6px;
        }
}
@media screen and (max-width: 640px) {
	.m-center { text-align:center}
	.language-tab > p > .h6 { text-align:center;}
	.dropdown-toggle{
		color: #FFF;
	}
}

@media screen and (max-width: 480px) {
    .white-box-panel {
        margin-left: -5px;
        margin-right: -5px;
        padding:15px;
    }
    .setting-tab h1 { margin-top:0;}
    .navbar-nav > .user-menu > .dropdown-menu {margin-top: 0;}
    .navbar-nav > .user-menu > .dropdown-menu::after {border-width: 7px;}
    .navbar-nav > li > a {font-size: 13px;}
    .skin-blue .navbar .sidebar-toggle .icon-bar {background: #fff;}
    .small-box {
        text-align: center;
        margin-left: -10px;
        margin-right: -10px;
    }
    .small-box h3 {font-size: 2em;}
    #canvas-holder { display:none;}
    .content {padding: 10px;}
    #divMainImage, #preview-pane { float:none; display:block; width:100%;}
}
@media screen and (max-width: 360px) {
    .navbar .navbar-right {width: 100%;}
    .navbar .navbar-nav > li.user-menu { background-color:#00a65a; border-radius:4px; margin-top: 2px;}
    .navbar-nav > li > a { padding:5px 10px;}
    #expand {margin-left: 5px;}
    .box-upload-img {
    margin-left: -10px;
    margin-right: -10px;}
}

/* The container in which the loading spinner will be centered */
.loading-container {
    position: relative; /* Needed to position the spinner absolutely within it */
    height: 200px; /* Adjust this to the height of your container */
    background-color: #f3f3f3; /* Optional: background color for your container */
    border: 1px solid #ddd; /* Optional: border for your container */
}

/* Spinner element */
.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 5px solid #eeeeee; /* Light grey border for the circle */
    border-top: 5px solid #3498db; /* Blue color for the top border */
    border-right: 5px solid transparent; /* Transparent for right side */
    border-radius: 50%; /* Make it a circle */
    animation: spin 1s linear infinite;
}

/* Keyframes for spinning animation */
@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@media screen and (min-width: 768px) {
    .navbar-form {
        width: 100%;
        max-width: 400px;
        margin-left: 1em;
    }
    .navbar-form .input-group input { 
        border:none; 
        background-color: rgba(66,66,68,.1);
        border-radius: 25px !important;
        padding: 8px 20px !important;
    }
    .navbar-form .input-group input:focus {box-shadow:none; border: solid 1px;}
    .navbar-form .input-group button {border-radius: 25px; min-width: 50px;}
}


.tumbler-wrapper {
    margin-left: auto;
    width: 50px;
    height: 25px;
    background-color:#333;
    background: linear-gradient(31deg, rgba(238,55,135,1) 0%, rgba(11,0,125,1) 57%, rgba(11,0,125,1) 100%);
    border: #1d92b2;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6px;
    cursor: pointer;
    display: flex;
    position: relative;
}
.tumbler-wrapper svg {
    width: 15px;
    height: 15px;
}
.tumbler {
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #fff;
    transition: transform 0.5s, background-color 0.5s;
    will-change: transform;
}



/*===== Light Theme ========*/
    
    body {transition: transform all 2.5s}
    body, .right-side {background-color:#ece9e8;}
    body > .header .navbar {background-color:#fff;}
    body.night-mode .post {border-bottom: 1px dashed #d9d9d9;}
    .card {
       background: #fff;
       box-shadow: 0 1px 15px 0 hsla(0,0%,48%,.05);
    }
    
/*===== Darker Theme ========*/
    body.night-mode {transition: transform all 2.5s}
    body.night-mode,
    body.night-mode label,
    body.night-mode .card
    {
        color: hsla(0,0%,100%,.7) !important;
    }

    body.night-mode .text-primary,body.night-mode .btn-link,
    body.night-mode .nav-link,
    body.night-mode .nav-link.active, body.night-mode .nav-underline .show > .nav-link
    {
        color:#39da71;
    }
    
    body.night-mode > .header .navbar {background-color:#1e1e2f;}
    body.night-mode .tumbler {transform: translateX(calc(100% - 2px));}
    body.night-mode,
    body.night-mode .right-side
    {background-color:#1e1e2f;color: #525f7f;}

    body.night-mode .navbar-form input {background-color:#aaa;}
    body.night-mode .navbar-form input:focus {border: solid 1px rgba(238,55,135,1);}
    body.night-mode .navbar-form input,
    body.night-mode .profile-dropdown button { 
        color: #fff;
    }

    body.night-mode .card {
      background: #27293d;
      box-shadow: 0 1px 20px 0 rgba(0,0,0,.1);
      
    }
    
    body.night-mode table {--bs-table-bg:#1e1e2f;}
    body.night-mode .bg-light, body.night-modes .bg-white,
    body.night-mode .accordion
    {--bs-accordion-bg:#1e1e2f !important;}
    
     body.night-mode .table {color: #525f7f}
     body.night-mode tbody,body.night-mode td,body.night-mode tfoot,body.night-mode th,body.night-mode thead,body.night-mode tr,
     body.night-mode .border-top,body.night-mode .border-start,body.night-mode .border-end,body.night-mode .border-bottom
     {border-color: hsla(0,0%,100%,.1) !important;
     color: hsla(0,0%,100%,.7) !important;
     }
     
     body.night-mode table thead {color:#ffffff !important;}
     
    body.night-mode .project-task-group-tabs .accordion-button {color: hsla(0,0%,100%,.7) !important;}
    body.night-mode table thead {background-color: rgba(var(--bs-gray-600-rgb),.1) !important;}
    
    body.night-mode .form-select { background: none !important;color:#fff !important;border-color: hsla(0,0%,100%,.1) !important;}
    body.night-mode .sidebar {background: linear-gradient(31deg, rgba(238,55,135,0.5) 0%, #27293d 40%, #27293d 100%);}
    body.night-mode .form-select {--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");}
    
/*===== end Darker Theme ========*/