/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Nov 6, 2019, 10:00:48 AM
    Author     : bolivier
*/

/* STANDARD Styling */
html {
  font-family: -apple-system,BlinkMacSystemFont,San Francisco,Roboto,Segoe UI,Helvetica Neue,sans-serif;
}
body {
  font-size: 14px;
  min-height: 90vh;
  height: 100%;
/*
  font-weight: 400;
  line-height: 2rem;
  text-transform: initial;
  letter-spacing: initial;
  font-family: -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif;
  color: #212b36;
*/
}
.body_color_a { background-image: linear-gradient(to right bottom, #49c63f, #5ac63e, #68c63d, #74c63d, #7fc63d, #8ac53c, #94c53c, #9dc43c, #a8c23b, #b3c13b, #bdbf3d, #c6bd3f); }
.body_color_b { background-color: #F4F6F8; }
.body_color_c { background-color: #AAEFD2; }
.approved { color: #0F9D58; }
.disapproved { color: #C53929; }
.pending { color: lightblue; }
a.normal-link{
  color: #007ace !important;
  text-decoration: none;
  cursor: pointer;
}
a.normal-link:hover {
  color: #084e8a !important;
}
a.disabled {
   pointer-events: none;
   color: #CECECE;
}
a.disabled:focus { box-shadow: none; color: #CECECE; }
.page-link:focus { box-shadow: none; color: #0056b3; }
/* HEADING styling */
h1 {
  font-size: 28px;
}
ul {
  list-style-position: outside;
}
a.normal-link:link { color: #0000EE; }
a.normal-link:visited { color: #551A8B; }
.heading {
  margin:15px 0 0;
}
/* Input styles */
.ay-input-label { position: absolute; font-size: 12px; background-color: #fff; top: -10px; left: 20px; padding-left: 15px; padding-right: 15px; color: #80bdff; display:none; }
input:focus+div.ay-input-label { display: block; }
input[type="text"].ay-special,
input[type="text"].ay-special .ay-not:focus,
input[type="number"],
input[type="password"],
input[type="url"],
select.form-control {
  background: transparent;
  border: none;
  border-bottom: 1px solid #000000;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
}
input[type="text"].ay-special .ay-not:focus { outline: none; }
input[type="text"].ay-special:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
select.form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
}
input[type="checkbox"] {
  width: 20px;
  height: 20px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance:textfield;
}
button:disabled { cursor: not-allowed; }

/* SECTION Styles*/
.bb-t { border-bottom: 1px solid #cecece; }
.input-group-append .btn { border-radius: 0 .25rem .25rem 0; }
.input-group-prepend select, .input-group-prepend input { border-radius: .25rem 0 0 .25rem; }
.report select, .report input { border: 2px solid #007bff; }
.report.input-group select, .report.input-group input {
  border-top: 2px solid #007bff;
  border-bottom: 2px solid #007bff;
}
.border-l { border-left: 2px solid #007bff;  }
.border-r { border-right: 2px solid #cce4ff; }
.border-m { border-right: 1px solid #999999; border-left: 1px solid #999999; }
.main_section {
  display: inline-block;
  width: 100%;
  /*
  min-width: calc(100% - 300px);
  height: calc(100% - 65px);
  */
}
.main_style {
  border: 1px solid #E7E8E9;
  border-radius: 5px;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5rem;
  text-transform: initial;
  letter-spacing: initial;
  font-family: -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif;
  color: #212b36;
  background-color: #FFFFFF;
  z-index: 100;
}
.storeinfo {
  z-index: 1030;
  background-color: #F4F6F8;
  position: fixed;
  right: 0;
  top: 55px;
}
.outlined { background-color:#ebebeb;/*border:2px solid #000 !important;*/ }
.grayout {
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(128,128,128,0.5);
  position: absolute;
  top: 0;
  left: 0;
}
.blur {
  filter: blur(3px);
  -webkit-filter: blur(3px);
}
.text-larger {
  font-size: 16px;
}
/* GRID Styling */
.grid-container { display: grid; }

/* end GRID Styling */
/* TABLE Styling */
.table-match { min-width: 1588px; max-width: 1588px; }
.table-match-2 { min-width: 1618px; max-width: 1618px; }
.table-match-3 { min-width: 1282px; max-width: 1282px; }
.table-match-4 { min-width: 640px; max-width: 642px; }
.model-base { line-height: 32px; font-size: 16px; }
.model-selected {font-weight: 700; color: #007BFF; }
.model-selector { font-size: 28px;color: #007BFF/*#676767*/; padding-bottom: 5px; }
thead::-webkit-scrollbar, tbody::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
thead, tbody {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
table tr td, 
table tr th,
.table_style .table_row {
  border-bottom: 1px solid #ebeef0;
  padding: 8px 8px;
}
table tr th {
  font-weight: 500;
}
.table_style {
  border: 1px solid #E7E8E9;
  border-radius: 5px;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5rem;
  text-transform: initial;
  letter-spacing: initial;
  font-family: -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif;
  color: #212b36;
  background-color: #FFFFFF;
}
.table_style td.breakall {
  word-break:break-all;
}
.table_hover tr:hover td {
  background: #f9fafb;
  cursor: pointer;
}
.table_hover a:hover {
  color: #007ace;
  text-decoration: none;
}
#ay-price-table.table { 
  width: 96%; 
  margin: 15px 2% 25px; 
  overflow: scroll; 
}
#ay-price-table [scope="row"] { text-align: right; font-weight: normal; }
#ay-price-table th { font-weight: bold; font-size: 16px; }
#ay-price-table th, #ay-price-table td { text-align: center; padding: 8px; }
#ay-price-table td { font-size: 16px; }
#ay-price-table thead tr:nth-child(1) th { background: #FFFFFF; position: sticky; top: 0; z-index: 10; }

#v-pills-tabContent { min-height:400px }
.plan-select { max-width: 225px; }
table td.no-border, table th.no-border { border: none; }
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.nvg-weight input {
  border: 1px solid #cecece;
  border-radius: 5px;
  padding: 5px 15px;
  margin: 0 5px;
  max-width: 100px;
  text-align: right;
}
p {
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.7em;
  /*color: #999;*/
}
a, a:hover, a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}
a[data-toggle="collapse"] {
  position: relative;
}
.wrapper {
  /*display: flex; add back in for spa */
  width: 100%;
  margin-top: 65px;
}    
#sidebar {
  /* don't forget to add all the previously mentioned styles here too */
  width: 250px;
  position: fixed;
  top: 65px;
  left: 0;
  height: 100vh;
  z-index: 999;
  background-color: #F4F6F8;
  /*color: #fff;*/
  transition: all 0.3s;
  border-right: 1px solid #E7E8E9;
}
#sidebar.active {
  margin-left: -250px;
}
#sidebar .sidebar-header {
  padding: 20px;
  /*background: #6d7fcc;*/
}
#sidebar ul.components {
  padding: 20px 0;
  /*border-bottom: 1px solid #47748b;*/
}
#sidebar ul p {
  /*color: #fff;*/
  padding: 10px;
}
#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  font-weight: 500;
  display: block;
}
#sidebar ul li a:hover {
  /*
  color: #7386D5;
  background: #fff;
  */
}
.ay-divide {
  display:block;
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
  padding:0 0 10px;
  max-width: 400px;
}
.ay-divide > span {
  position:relative;
  display:inline-block;
  color:#808080;
}
.ay-divide > span:before,
.ay-divide > span:after {
  content:"";
  position:absolute;
  top:50%;
  width:99px;
  height:1px;
  background:#808080;
}
.ay-divide > span:before {
  right:100%;
  margin-right:15px;
}
.ay-divide > span:after {
  left:100%;
  margin-left:15px;
}
.zoom:hover { 
  transform: scale(5);
  z-index: 1050;
  position: relative;
  top: -100px;
  left: 300px;
  border: 1px solid #ccc;
  padding: 15px !important;
  background-color: #fff; 
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
  /*color: #fff;*/
  background: #F0F2F4;
}
#sidebar .dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
.dropdown-menu { width: 115%; } /*105%*/
#sidebarCollapse {
  
}
.open {
  display: none;
}
.close {
  display: none;
}
.hide-data {
  display: block;
}
.show-data {
  display: none;
}
.selectDatesPopup {
  top: -25px;
  left: 400px;
  width: 1000px; /* 600px */
  background-color: #ffffff;
  border: 2px solid #000;
  border-radius: 5px;
  display: inline-block;
  z-index: 10;
  font-size: 14px;
}
.hover-select:hover { background-color: #cecece; }
.ay-selected, .ay-selected:hover { background-color: #B2D7FF; }
.line-height-32 { line-height: 32px; width: 100%; cursor: pointer; }
#content_alt {
  width: 100%;
  min-height: 90vh;
  transition: all 0.3s;
}
#content {
  width: calc(100% - 275px);
  margin-top: 65px;
  /*padding: 40px;*/
  min-height: 90vh;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 25px;
}
.show-content:hover + .content-shown { display: block; }
.content-shown:hover { display: block; }
.content-shown { display: none; position: absolute; top: 30px; right: 70px; padding:15px; border: 1px solid #cecece; border-radius: 5px; background-color: #FFF;  }
ul ul a {
  font-size: 0.9em !important;
  font-weight: normal;
  padding-left: 30px !important;
  /*background: #6d7fcc;*/
}
.nav-item.active {
  border-bottom: 2px solid blue;
}
.nav-item.subactive {
  border-bottom: 2px solid orange;
}
.navbar-light .navbar-nav .nav-link {
  color: rgba(0,0,0,.7);
}
.navbar-light .navbar-nav .nav-link:hover {
  color: #000000;
}
/* Side Tabs */
.nav-tabs {
  border-bottom: 0;
}
.nav.nav-tabs {
  float: left;
  display: block;
  margin-right: 0px;
  width: 100%;
}
.nav-tabs .nav-link {
  border: 1px solid #d8d9db;
  /*border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;*/
  border-radius: 5px 0px 0px 5px;
  background: #F0F2F4;
  line-height: 32px;
}
.isTab .nav-tabs .nav-link {
  border-radius: 0px;
  margin: 2px;
  border: 0px;
}
.nav-tabs .nav-link.active {
  /*color: #FFFFFF;*/
  background-color:#FFFFFF !important;
  border-color: #d8d9db;
  border-right: 2px solid #FFFFFF;
  margin-right: -2px;
}
.isTab .nav-tabs .nav-link.active {
  /*color: #FFFFFF;*/
  background-color:#FFFFFF !important;
  margin: 2px;
}
.nav-tabs .nav-link.disabled,
.nav-tabs .nav-tab.disabled {
  background-color:#F7F8F9 !important;
  color: #cecece;
  border-color: #d8d9db;
}
.nav-tabs .nav-tab {
  border: 1px solid #d8d9db;
  background: #F0F2F4;
  line-height: 32px;
}
.nav-tabs .nav-tab.active {
  background-color:#FFFFFF !important;
  border-color: #d8d9db;
  border-bottom: 2px solid #FFFFFF;
  margin-bottom: -2px;
  margin-right: 0;
  border-right: 1px solid #d8d9db;
}
.nav-tabs .nav-tab .tab-left {
   border-radius: 5px 0px 0px 0px;
}
.nav-tabs .nav-tab .tab-center {
  border-radius: 0px 0px 0px 0px;
}
.nav-tabs .nav-tab.tab-right {
   border-radius: 0px 5px 0px 0px;
}
/*
.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 0rem !important;
  border-top-right-radius: 0rem !important;
}
*/
.tab-content {
  padding:15px 25px;
  border: 1px solid #d8d9db;
  border-radius: 0px 5px 5px 5px;
  min-height: 250px;
}
.isTab .tab-content {
  border-radius: 5px;
}
.tab-content>.active {
  display: block;
  background: #FFFFFF;
  min-height: 165px;
}
.aa_dropdown select {
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
}
.aa_topbanner {
  width: 100%;
}
.ay-header.ay-tab-border {
  border-top: 2px solid #909090;
  border-left: 2px solid #909090;
  border-right: 2px solid #909090;
  border-bottom: none;
  border-radius: 15px 15px 0 0;
  color: #212529;
  padding: 15px 15px 0;
  margin: 0;
  background-color: #eef0f2;
  font-size: 20px;
  font-weight: normal;
  text-align: center;
  padding: 10px;
}
.ay-header.ay-tab-border a {
  color: #373a3e;
}
.ay-tab-border.active {
  border-color: #000000;
  color: #000000;
  background-color: #FFFFFF;
  font-weight: bold;
}
.ay-msg {
  position: fixed;
  top: 55px;
  right: 15px;
  z-index: 2000;
  width: 360px;
/*  height: auto; */
  max-height: 400px;
  overflow: auto;
  border-radius: 5px;
  background-color: #EEEEEE;
  padding: 15px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);
}
.ay-notice {
  background-color: #FFFFFF;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);
  border-radius: 3px;
  padding: 15px 5px;
  width: 320px;
}
.ay-notice-pad {
  padding: 0 30px 0 40px;
}
.ay-notice-pad-alt {
  padding: 0 15px;
}
select.ay-noshow:disabled {
  -webkit-appearance:none;
  -moz-appearance: none;
  appearance:none;
}
select:disabled.ay-noshow::-ms-expand {
  display: none;
}
.feed-switch { margin: auto 5px; }
.ay-card { min-height:400px; min-width:100%; }
.ay-card-title { height: 28px;padding:0 15px; }
.ay-card-section { min-height: 200px; }
.ay-select select { width: 50%; }
@media (min-width: 750px) and (max-width: 1299px) {
  .ay-select select { width: 25%; }
}
@media (min-width: 1300px) and (max-width: 1499px) {
  .ay-card { min-width:350px; }
  .ay-card-section { height: 300px; }
  .ay-select select { width: 50%; }
}
@media (min-width: 1500px) {
  .ay-card { min-width:350px; }
  .ay-card-section { height: 250px; }
  .ay-select select { width: 50%; }
}
.ay-icon {}
.ay-label { font-size: 14px; }
/* End Side Tabs */
/* Material Icons */
.ay-btn-ok { background-color: #0F9D58; color: #FFFFFF; }
.ay-btn-ok:hover { background-color: #3EB079; color: #FFFFFF; border: 1px solid #318C60; }
.ay-btn-wa { background-color: #FBC02D; color: #FFFFFF; }
.ay-btn-wa2 { background-color: #FBC02D; color: #000000; }
.ay-btn-er { background-color: #C53929; color: #FFFFFF; }
.ay-btn-er:hover { background-color: #D06053; color: #FFFFFF; border: 1px solid #A64C42; }
.ay-btn-pe { background-color: #4285F4; color: #FFFFFF; }
.ay-btn-pe:hover { background-color: #679DF6; color: #FFFFFF; border: 1px solid #527DC4; }
.ay-btn-pt { background-color: #cce4ff; }
.ay-btn-nr { background-color: #C56CDF; color: #FFFFFF; }/*#ADD8E6*/
.ay-btn-ns { background-color: #676767; color: #FFFFFF; }
.ay-btn-sa { background-color: #0336FF; color: #FFFFFF; }/*#676767 #8FBC8F*/
.ay-btn-sa:hover { background-color: #355EFF; color: #FFFFFF; border: 1px solid #022BCC; }
.ay-select-pr { border-bottom: 3px solid #007BFF; color: #007BFF; }
.ay-select-ok { border-bottom: 3px solid #0F9D58; color: #0F9D58; }
.ay-select-wa { border-bottom: 3px solid #FBC02D; color: #FBC02D; }
.ay-select-er { border-bottom: 3px solid #C53929; color: #C53929; }
.ay-select-pe { border-bottom: 3px solid #4285F4; color: #4285F4; }
.ay-select-nr { border-bottom: 3px solid #C56CDF; color: #C56CDF; }/*#ADD8E6*/
.ay-select-se { border-bottom: 3px solid #f44285; color: #f44285; }
.ay-select-tab { background-color:#4285f4; }
.ay-select-tab label { color:#ffffff;font-weight:bold; }
.ay-select-tab label:hover { color:#ffffff;font-weight:bold; }
.ay-sw { width: 150px; }
.ay-ok { color: #0F9D58; }
.ay-wa { color: #FBC02D; }
.ay-er { color: #C53929; }
.ay-pe,.ay-pe:hover,.ay-pe:focus { color: #4285F4; }
.ay-nr { color: #C56CDF; }/*#ADD8E6*/
.ay-sa { color: #0336FF; }/*#ADD8E6 #8FBC8F*/
.ay-ns { color: #676767; }/*#676767*/
.ay-se { color: #f44285; }
.ay-py { color: #007bff; }
.ay-pr { color: #36A2EB; }
.ay-pr:hover { color: #2B81BC; }
.ay-pr:visited { color: #4AABED; }
.ay-li,.ay-li:hover,.ay-li:focus { color: #66AFE1; }
.ay-pt { color: #AAEFD2}
.has-error { color: red; }
.btn { cursor: pointer; }
.ay-info { 
  font-size: 26px;
  color:#007bff; 
}

.md-12 { font-size: 12px; }
.md-14, .material-icons.md-14 { font-size: 14px; }
.md-16, .material-icons.md-16 { font-size: 16px !important; }
.md-18, .material-icons.md-18 { font-size: 18px; }
.md-26, .material-icons.md-26 { font-size: 26px; }
.md-28, .material-icons.md-28 { font-size: 28px; }
.md-30, .material-icons.md-30 { font-size: 30px; }
.md-32, .material-icons.md-32 { font-size: 32px; }
.md-34, .material-icons.md-34 { font-size: 34px; }
.md-36, .material-icons.md-36 { font-size: 36px; }

.ay-list { font-size: 18px; line-height: 24px; }
.ay-upgrade { background-color: lightcyan; }
/*
.ng-touched.ng-valid, .ng-valid {
  border-color: green !important;
  color: green !important;
}
.ng-touched.ng-invalid,
.ng-touched.ng-invalid-required,
.ng-invalid {
  border-color: red !important;
  color: red !important;
  opacity: 1;
}
*/
.form-control.is-invalid {
  background-image: none;
  padding-right: 12px;
}
textarea#txtVal,
textarea#ntAdd,
textarea#mpAdd,
textarea[id*="Edit"] { height:38px; }
.aytooltip {
  position: relative;
  display: inline-block;
}
.aytooltip .aytooltiptext {
  word-break: normal;
  visibility: hidden;
  width: 150px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}
.aytooltip .aytooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.aytooltip:hover .aytooltiptext {
  visibility: visible;
}
.aytooltiptext.inpopup {
  line-height: normal;
  width: 250px;
}
.aytooltiptext.inpopup2 {
  line-height: normal;
  width: 350px;
}
.ay-drag-right {
  position: absolute; 
  top: 67px;
  left: calc(99vw - 350px);
  background-color: white; 
  border: 2px solid #ebeef0; 
  border-radius: 10px 10px 10px 10px; 
  padding: 2px 5px 5px 5px;
  z-index: 2010;
}
.ay-drag-right-1 {
  position: fixed; 
  top: 65px;
  left: calc(99vw - 480px);
  background-color: white; 
  border: 2px solid #ebeef0; 
  border-radius: 10px 10px 10px 10px; 
  padding: 2px 5px 5px 5px; 
  z-index: 1040;
}
.ay-popup-btn {
  position: absolute;
  top: -15px;
  right: 300px;
  background-color: white; 
  border: 2px solid #ebeef0; 
  border-radius: 10px 10px 10px 10px; 
  padding: 15px; 
  z-index: 2010;
}
.ay-popup-btn-1 {
  position: fixed;
  top: 244px;
  right: 315px;
  background-color: white; 
  border: 2px solid #ebeef0; 
  border-radius: 10px 10px 10px 10px; 
  padding: 15px; 
  z-index: 1040;
}
.ay-sticky-top {
  top: 64px;
  z-index: 1020;
  position: webkit-sticky;
  position: sticky;
}
.sticky-date {
  position: -webkit-sticky;
  position: sticky;
  top: 65px;
  padding: 15px 0;
  background-color: #FFFFFF;
  z-index: 1500;
}
.sticky-head {
  position: -webkit-sticky;
  position: sticky;
  top: 65px;
  padding: 15px 0;
  background-color: #F4F6F8;
  z-index: 1000;
}
.ay-strikethrough {
  text-decoration: line-through;
  display: inline;
}
.ay-rows {
  width: 200px;
  margin: 15px 0 0;
  padding: 0 15px;
}
.is-editable {
  z-index: 2000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 100px;
}
#youtube-hover { cursor: pointer; position: relative; }
.ay-tooltip { 
  position: absolute;
  z-index: 1050;
  display: none;
  top: -150px;
  left: -50px;
  width: 350px;
  height: auto;
  background-color: #c0c0c0;
  padding: 10px;
  overflow: hidden;
  /*border: 1px solid #000;
  border-radius: 5px;*/
}
#youtube-hover:hover .ay-tooltip {display: block;}
.form-inline .text-left { justify-content: flex-start; padding: 0 25px; }
.conf-feed {
  position: relative;
}
.warning-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.5);
}
.warning-message {
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #000;
  border-radius: 5px;
  width: 320px;
  background-color: #fff;
  padding: 25px;
  margin: auto;
}
@media (min-width: 970px) {
  .feed-switch { margin: auto; }
  .ay-rows {
    margin: auto;
    position: absolute;
    right: 0;
  }
/*
  .ay-drag-right {
    left: calc(99vw - 450px);
  }
*/
}
@media (max-width: 768px) {
  #sidebar {
    margin-left: -250px;
  }
  #sidebar.active {
    margin-left: 0;
  }
  .open {
    display: inline-block;
  }
  #content {
    width: 100%;
    right: 0;
  }
}