html {
  font-family: "proxima-nova-1", "proxima-nova-2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}


body {
  font-family: "proxima-nova-1", "proxima-nova-2", "Helvetica Neue", Helvetica, Arial, sans-serif;

    background-color: #fff;
    color: #466069;
}

.container {
  /* margin-left: 20px; */
  font-size: 18px;
}

.header-lined {
  padding-top: 20px;
}

.tabs-left {
    float:left;

}
 
.underline {
	text-decoration: underline;
} 
tr:nth-child(even) {background: #F9F9F9}
tr:nth-child(odd) {background: #FFF}
.tab-content-app {
  float:left;
  width:70%;
}
.orange {
	background-color: #E36D22;
}
#pre_dunning_bar {
  border: none;
  min-height: 250px;
  resize: vertical;
  font-family: "source-code-pro", Monaco, Consolas, "Lucida Console", monospace;
  color: #000;
  font-size: 11px;
  padding: 10px;
  border-radius: 4px;
}

#blog_posts {
	padding-top:30px;
	font-weight: bold;
	text-align: center;
}

.side-by-side {
  display: inline-block;
  min-width: 400px;
}
th.headerSortDown { 
    background-color: #80CFE3; 
    color:#fff;
} 

th.headerSortUp { 
    background-color: #80CFE3; 
    color:#fff;    
} 

.event-selected {
  display: inline-block !important;
  border: 2px solid #fff;
  line-height: 30px;
  border-radius: 20px;
  text-align: center;
  padding-left: 12px;
  padding-right: 12px;
  background-color: #4FAC4D;
  color:white;
}

.event-unselected {
  display: inline-block !important;
  border: 2px solid #fff;
  line-height: 30px;
  border-radius: 20px;
  text-align: center;
  padding-left: 12px;
  padding-right: 12px;
  background-color: #DCF2C9;
  color:#666;
}

.red-unselected {
	background-color: #F4EBEB;
}

.red-selected {
	background-color: #CE3C3E;
}

.highlight {
  background: #fff6dd;
  -webkit-box-shadow: 0 0 3px 3px #fff6dd;
  -moz-box-shadow: 0 0 3px 3px #fff6dd;
  box-shadow: 0 0 3px 3px #fff6dd;
  color: #000;
}

.expired_cards_logo {
  width:30px;
  height:20px;
}

.small_profile_img {
  border-radius: 50%;
  width:60px;
  height:60px;
}

.small_profile_img_padding {
  border-radius: 50%;
  width:60px;
  height:60px;
  color:#fff;
  font-size: 40px;
  padding-left: 10px;
  padding-top:5px;
}

.small_profile_img_100 {
  border-radius: 50%;
  width:100px;
  height:100px;
  padding-bottom:10px;
}

.small_profile_img_padding_100 {
  border-radius: 50%;
  width:100px;
  height:100px;
  color:#fff;
  font-size: 80px;
  padding-left: 10px;
  padding-top:10px;
  padding-bottom:10px;
}

/* -------------- loader-------------- */

.loader {
  text-align: left;
}

.loader:before{
  content: "";
  position: absolute;
  top: 0px;
  left: -25px;
  height: 12px;
  width: 12px;
  border-radius: 12px;
  -webkit-animation: loader10g 1s ease-in-out infinite;
      animation: loader10g 1s ease-in-out infinite;
}

.loader{
  position: relative;
  width: 12px;
  height: 12px;
  top: 20px;
  left: 25px;
  border-radius: 12px;
  -webkit-animation: loader10m 1s ease-in-out infinite;
      animation: loader10m 1s ease-in-out infinite;
}


.loader:after{
  content: "";
  position: absolute;
  top: 0px;
  left: 25px;
  height: 12px;
  width: 12px;
  border-radius: 12px;
  -webkit-animation: loader10d 1s ease-in-out infinite;
      animation: loader10d 1s ease-in-out infinite;
}

@-webkit-keyframes loader10g{
  0%{background-color: rgba(255, 255, 255, .2);}
  25%{background-color: rgba(255, 255, 255, 1);}
  50%{background-color: rgba(255, 255, 255, .2);}
  75%{background-color: rgba(255, 255, 255, .2);}
  100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10g{
  0%{background-color: rgba(255, 255, 255, .2);}
  25%{background-color: rgba(255, 255, 255, 1);}
  50%{background-color: rgba(255, 255, 255, .2);}
  75%{background-color: rgba(255, 255, 255, .2);}
  100%{background-color: rgba(255, 255, 255, .2);}
}

@-webkit-keyframes loader10m{
  0%{background-color: rgba(255, 255, 255, .2);}
  25%{background-color: rgba(255, 255, 255, .2);}
  50%{background-color: rgba(255, 255, 255, 1);}
  75%{background-color: rgba(255, 255, 255, .2);}
  100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10m{
  0%{background-color: rgba(255, 255, 255, .2);}
  25%{background-color: rgba(255, 255, 255, .2);}
  50%{background-color: rgba(255, 255, 255, 1);}
  75%{background-color: rgba(255, 255, 255, .2);}
  100%{background-color: rgba(255, 255, 255, .2);}
}

@-webkit-keyframes loader10d{
  0%{background-color: rgba(255, 255, 255, .2);}
  25%{background-color: rgba(255, 255, 255, .2);}
  50%{background-color: rgba(255, 255, 255, .2);}
  75%{background-color: rgba(255, 255, 255, 1);}
  100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10d{
  0%{background-color: rgba(255, 255, 255, .2);}
  25%{background-color: rgba(255, 255, 255, .2);}
  50%{background-color: rgba(255, 255, 255, .2);}
  75%{background-color: rgba(255, 255, 255, 1);}
  100%{background-color: rgba(255, 255, 255, .2);}
}

/* modal */

.modal-open .dropdown-menu {
    z-index: 2050;
}

.modal-open .dropdown.open {
    *z-index: 2050;
}

.modal-open .popover {
    z-index: 2060;
}

.modal-open .tooltip {
    z-index: 2070;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000000;
}

.modal-backdrop.fade {
    opacity: 0;
}

.modal-backdrop, .modal-backdrop.fade.in {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1050;
    overflow: auto;
    width: 700px;
    height: 508px;
    margin: -330px 0 0 -350px;
    background-color: #ffffff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.3);
    *border: 1px solid #999;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
}

.modal.fade {
    -webkit-transition: opacity .3s linear, top .3s ease-out;
    -moz-transition: opacity .3s linear, top .3s ease-out;
    -ms-transition: opacity .3s linear, top .3s ease-out;
    -o-transition: opacity .3s linear, top .3s ease-out;
    transition: opacity .3s linear, top .3s ease-out;
    top: -25%;
}

.modal.fade.in {
    top: 50%;
}

.modal-header {
    padding: 9px 15px;
    border-bottom: 1px solid #eee;
}

.modal-header .close {
    margin-top: 2px;
}

.modal-body {
    overflow-y: auto;
    max-height: 400px;
    padding: 15px;
}

.modal-form {
    margin-bottom: 0;
}

.modal-footer {
    padding: 14px 15px 15px;
    margin-bottom: 0;
    text-align: right;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: inset 0 1px 0 #ffffff;
    -moz-box-shadow: inset 0 1px 0 #ffffff;
    box-shadow: inset 0 1px 0 #ffffff;
    *zoom: 1;
}

.modal-footer:before, .modal-footer:after {
    display: table;
    content: "";
}

.modal-footer:after {
    clear: both;
}

.modal-footer .btn+.btn {
    margin-left: 5px;
    margin-bottom: 0;
}

.modal-footer .btn-group .btn+.btn {
    margin-left: -1px;
}

#introDraftModal {
  font-size: 16px;
}
/* modal */

/*olark*/

#habla_window_div {
    width: auto !important;
    height: auto !important;
}
#habla_expanded_div {
  display: block !important; 
}

/*tabz*/
.tab-content {
  min-height: 600px;
  background-color:white;
  padding:10px;
}

ul.nav.nav-tabs {
  margin-right: 0px;
}

.minor {
  font-size: 14px;
  margin-bottom: 5px;
  margin-top: 5px;
  color: #000;
  font-weight: normal;
}


.half-well {
  min-height: 20px;
  padding: 19px;
  background-color: #f5f5f5;
  border-top: 1px solid #777;
  border-left: 1px solid #777;
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;

  border-radius: 8px 8px 0px 0px; /* top left, top right, bottom right, bottom left */
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

.half-well-bottom {
  min-height: 20px;
  padding: 19px;
  background-color: #f5f5f5;
  border-top: 0px solid #777;
  border-left: 1px solid #777;
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;  
  border-radius: 0px 0px 8px 8px; /* top left, top right, bottom right, bottom left */
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

.rounded {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  padding: 3px;
  padding-right: 5px;
  padding-left: 5px;
  color: #fff;
}


#html_preview {
  overflow:scroll;

}

.button-clear span {
display: block;
font-size: 14px;
padding-left: 23px;
padding-right: 23px;
height: 36px;
line-height: 33px;
border-radius: 4px;
font-weight: bold;
color: #444;
text-shadow: 0 1px 0 white;
background: #eff1f4;
background: -webkit-linear-gradient(#f7f8fa, #eff1f4);
background: -moz-linear-gradient(#f7f8fa, #eff1f4);
background: -ms-linear-gradient(#f7f8fa, #eff1f4);
background: -o-linear-gradient(#f7f8fa, #eff1f4);
background: linear-gradient(#f7f8fa, #eff1f4);
-webkit-box-shadow: inset 0 1px 0 white;
-moz-box-shadow: inset 0 1px 0 white;
-ms-box-shadow: inset 0 1px 0 white;
-o-box-shadow: inset 0 1px 0 white;
box-shadow: inset 0 1px 0 white; 
}

#pricing {
  -webkit-font-smoothing: antialiased;
  border-top: 1px solid #EAEAEA;
  border-bottom: 1px solid #EAEAEA;
  background: #5E7A9B;
  background: -webkit-linear-gradient(top, #355069 0, #5e7a9b 100%);
  background: -moz-linear-gradient(top, #355069 0, #5e7a9b 100%);
  background: -o-linear-gradient(top, #355069 0, #5e7a9b 100%);
  background: linear-gradient(top, #355069 0, #5e7a9b 100%);
  padding-top: 40px;
  padding-bottom: 55px; }
  @media (max-width: 991px) {
    #pricing {
      margin-top: 40px; } }
  #pricing .header {
    text-align: center; }
    @media (max-width: 991px) {
      #pricing .header {
        margin-bottom: 25px; } }
    #pricing .header h3 {
      font-size: 27px;
      color: #fff;
      line-height: 25px;
      font-weight: 300;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
    #pricing .header p {
      font-size: 17px;
      color: #F0F0F0;
      font-weight: 400;
      line-height: 25px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
  #pricing .charts {
    margin-top: 35px; }
    @media (max-width: 991px) {
      #pricing .charts {
        margin-top: 10px; } }
    #pricing .charts .chart {
      background-color: #fff;
      border: 1px solid #E6E6E6;
      border-radius: 5px;
      box-shadow: 0px 0px 2px 0px rgba(181, 181, 181, 0.3);
      padding: 20px 40px;
      position: relative;
      text-align: center;
      width: 97%;
      min-height: 315px;
      position: relative;
      top: 37px; }
      @media (max-width: 991px) {
        #pricing .charts .chart {
          float: none !important;
          left: 0px !important;
          top: 0px !important;
          margin: 0 auto;
          width: 55%;
          margin-bottom: 25px !important; }
          #pricing .charts .chart.last {
            margin-bottom: 0px !important; } }
      @media (max-width: 600px) {
        #pricing .charts .chart {
          width: 90% !important; } }
      #pricing .charts .chart.first {
        float: right;
        left: 12px; }
      #pricing .charts .chart.last {
        left: -12px; }
      #pricing .charts .chart.featured {
        min-height: 350px;
        top: 0px;
        margin: 0 auto; }
        #pricing .charts .chart.featured .popular {
          text-align: center;
          text-transform: uppercase;
          font-size: 16px;
          letter-spacing: 1px;
          color: #B1B1B1;
          font-weight: 400; }
        #pricing .charts .chart.featured .quantity {
          margin-top: 15px; }
      #pricing .charts .chart .quantity {
        text-align: center; }
        #pricing .charts .chart .quantity .dollar {
          font-size: 19px;
          position: relative;
          top: -18px; }
        #pricing .charts .chart .quantity .price {
          font-size: 49px; }
        #pricing .charts .chart .quantity .period {
          font-size: 17px;
          position: relative;
          top: -8px;
          margin-left: 4px; }
      #pricing .charts .chart .plan-name {
        text-align: center;
        font-size: 20px;
        font-weight: 400;
        color: #777;
        border-bottom: 1px solid #d5d5d5;
        padding-bottom: 15px;
        width: 90%;
        margin: 0 auto;
        margin-top: 8px; }
      #pricing .charts .chart .specs {
        margin-top: 20px; }
        #pricing .charts .chart .specs .spec {
          font-size: 15px;
          color: #474747;
          text-align: center;
          font-weight: 300;
          margin-bottom: 13px; }
          #pricing .charts .chart .specs .spec .variable {
            color: #1FBEE7;
            font-weight: 400; }
      #pricing .charts .chart .btn-signup {
        margin-top: 20px;
        height: 38px; }

.apple_pagination {
  margin-top: 10px;
  background: #f1f1f1;
  border: 1px solid #e5e5e5;
  text-align: center;
  padding: 1em;
  cursor: default; }
  .apple_pagination a, .apple_pagination span {
    padding: 0.2em 0.3em; }
  .apple_pagination .disabled {
    color: #aaaaaa; }
  .apple_pagination .current {
    font-style: normal;
    font-weight: bold;
    background-color: #bebebe;
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    line-height: 1.5;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    text-shadow: rgba(255, 255, 255, 0.8) 1px 1px 1px; }
  .apple_pagination a {
    text-decoration: none;
    color: black; }
    .apple_pagination a:hover, .apple_pagination a:focus {
      text-decoration: underline; }



.actions {
  padding-top:10px;
}

.actions-top {
  float:right;
}

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tab-content-app > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content-app > .active,
.pill-content > .active {
  display: block;
}

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

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

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}


/* widgets --------------------------------------------------------------------------------------- */
.move-sidebar-icons {
  position: relative;
  top: 1px;
  font-size: 16px;
  padding-right: 6px;
}

.move-widget-icons {
  position: relative;
  top: 3px;
}

.widget-side-icon {
  width:80px;
  font-size: 70px;
  float:right;
  margin-left: 20px;
  margin-top: auto;
  margin-bottom: auto;
}

.widget {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 20px;
  height: 100px;
  margin: 15px;
  border: 1px solid #999;
  box-shadow: 0 1px 0 white;
  color: #444444;
  white-space: nowrap;
  -webkit-flex-grow:1;
  overflow-y: hidden;
}

.widget-less-margin {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 20px;
  height: 100px;
  margin-bottom: 15px;
  margin-top: 15px;
  margin-left: 10px;
  margin-right: 10px;

  border: 1px solid #999;
  box-shadow: 0 1px 0 white;
  color: #444444;
  white-space: nowrap;
  -webkit-flex-grow:1;
  overflow-y: hidden;
}


.with-bottom {
  height: 180px;
}



.widget-bottom {
  height:80px;
  background-color: #F9F8F1;
  width:100%;
  margin-top:20px;
  padding-left: 20px;
  padding-right: 15px;
  padding-top: 15px;

}

/* end widgets --------------------------------------------------------------------------------------- */


.alert-success {
  width:auto;
}
.email-template {
  /*   width:100%; */
  height: 700px;
  font-family: "Source Code Pro", "Source Sans Pro", "Lucida Console", Monaco, monospace;
  font-size:14px;
}


/* setup/onboarding steps ---------------------------------------------------------------------------------------*/
  .setup-icon {
  width: 40px;
  height: 40px;
  display: inline-block !important;
  z-index: 10;
  border: 2px solid #fff;
  line-height: 26px;
  border-radius: 20px;
  text-align: center;
  background-color: #898989;
  padding-top: 6px;


}
.setup-icon::before {
  font-size: 20px;
  color: #fff;
}

.line-linkage {
    width: 92%;
    height: 0px;
    border: 1px solid #000;
    position: relative;
    top: -58px;
    left: 52%;
    z-index: -1000;
}

.submit-button-onboard {
  background-color: rgb(91, 183, 91);
  background-image: -webkit-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
  background-repeat: repeat-x;
  border-bottom-color: rgba(0, 0, 0, 0.246094);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: rgba(0, 0, 0, 0.0976563);
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: rgba(0, 0, 0, 0.0976563);
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: 
  rgba(0, 0, 0, 0.0976563);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top-style: solid;
  border-top-width: 1px;
  box-shadow: rgba(255, 255, 255, 0.199219) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.046875) 0px 1px 2px 0px;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  display: inline-block;
  font-family: 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  height: 38px;
  letter-spacing: normal;
  line-height: 18px;

  padding-bottom: 8px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 8px;
  text-align: center;
  text-indent: 0px;
  text-shadow: rgba(0, 0, 0, 0.246094) 0px -1px 0px;

}
a {
      color: inherit;

}
/* end setup/onboarding steps*/

/* draft/live toggles */

.onoffswitch {
    margin-top: 2px;
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 5px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 20px; padding: 0; line-height: 20px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "LIVE";
    padding-left: 22px;
    background-color: #60B35B; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "DRAFT";
    padding-right: 12px;
    background-color: #FCB82E; color: #616161;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 14px; margin: 0px;
    background: #FFFFFF;
    border: 2px solid #999999; border-radius: 5px;
    position: absolute; top: 0; bottom: 0; right: 76px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
    background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
    background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
    background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
    background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

/* end draft/live toggles */

/* timeline ----------------------------------------------------------------------------------------- */

.sidebar-panel {
  padding-bottom: 12px;
  background-color: #fff;
  border-bottom: 1px solid #E2E5EF;
}



.time-icon {
  width: 40px;
  height: 40px;
  display: inline-block !important;
  z-index: 10;
  border: 2px solid #fff;
  line-height: 26px;
  border-radius: 20px;
  text-align: center;
  background-color: #898989;
  padding-top: 6px;
}

.time-icon::before {
  font-size: 22px;
  color: #fff;
}

.time-icon-more-padding {
  width: 40px;
  height: 40px;
  display: inline-block !important;
  z-index: 10;
  border: 2px solid #fff;
  line-height: 26px;
  border-radius: 20px;
  text-align: center;
  background-color: #898989;
  padding-top: 8px;
}

.time-icon-more-padding::before {
  font-size: 22px;
  color: #fff;
}

article.timeline-item {
  margin-left: 40px;
  margin-top: 20px;
  cursor: pointer;
}

.timeline::before {
  content: "";
  width: 2px;
  margin-left: -4px;
  position: absolute;
  left: 24px;
  top: 30px;
  bottom: 30px;
  background-color: #ddd;
  z-index: 0;
}

.timeline {
  display: table;
  border-spacing: 0;
  table-layout: fixed;
  position: relative;
  border-collapse: collapse;
  margin-left: 30px;
  margin-right: 40px;
  min-height: 145px;
}

.timeline-no-table {
  border-spacing: 0;
  table-layout: fixed;
  position: relative;
  border-collapse: collapse;
  margin-left: 30px;
  min-height: 145px;
}

.timeline-icon {
  position: relative;
  left: -41px;
  top: -2px;
}

.timeline-date {
  margin-left: 20px;
  font-size: 12px;
  color: #777;
}

.timeline-description {
  margin-left: 20px;
  margin-top: -48px;
  font-size: 16px;
  color: #444;

}
.side-arrow {
  width: 20px;
  float:right;
  margin-right: -30px;
}

.side-arrow a {
  text-decoration: none;
  color: #444;

}
/* end timeline --------------------------------------------------------------------------------------- */


/* email template stuff */

.email_body {
  width: 50%;
  float: left;
  padding: 20px;
  position: relative;
}

.email_preview {
  width:48%;
  float:right;
  border: 1px solid #ddd;
  height: 700px;
  padding:20px;
  margin-left: auto;
  margin-right: auto;
  word-wrap: break-word;
  overflow-y: scroll;
}


#plain_variable_dropdown {
  margin-bottom: 10px;
}

#html_variable_dropdown {
  margin-bottom: 10px;
}

.hundredpercent {
  width:100%;
}

label {
  font-size: 18px;
}
.tab-content {
  padding: 20px;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #ffffff;
  min-height: 600px;
  padding: 10px;
}
.tab-content-app {
  padding: 20px;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #ffffff;
  min-height: 600px;
  padding: 10px;
}


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



.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}
.tab-content > .active,
.pill-content > .active {
  display: block;
}
.nav-tabs {
  border-bottom: 0px;
  font-size: 18px;
  font-weight: bold;
}

/* email template stuff */



/* bootstrap tweaks */
  .alert {
    margin: 0px;
    margin-bottom: 10px;

  }


.alert-error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert-error hr {
  border-top-color: #e4b9c0;
}
.alert-error .alert-link {
  color: #843534;
}
/* end bootstrap tweaks */


.left-margin {
  margin-left: 20px;
}

.title-bar {
  height: 20%;
  text-align: left;
  padding-left: 20px;
  font-size: 18px;
  font-weight: bold;
  padding-top: 15px;
  padding-bottom: 10px;
}  

.mn-title-bar {
  height: 20%;
  text-align: left;
  padding-left: 20px;
  font-size: 14px;
  font-weight: bold;
  padding-top: 15px;
  padding-bottom: 10px;
}  

.sm-title-bar {
  height: 20%;
  text-align: left;
  padding-left: 20px;
  font-size: 12px;
  font-weight: bold;
  padding-top: 15px;
  padding-bottom: 10px;
}  

.big-number-corner {
  position: absolute;
  right: 30px;
  top: 20px;
  font-size: 30px;
}

.big-number-main {
  margin-left: 20px;
  top: 15px;
  font-size: 40px;
  position: relative;
}

.widget-body {
  height: 80%;
}

.dark-widget {
  color:#fff;
}

h1 {
  font-size: 44px;
  font-family: "proxima-nova-soft-1", "proxima-nova-soft-2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}

h2 {
  font-size: 24px;
  font-family: "proxima-nova-soft-1", "proxima-nova-soft-2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}

h3 {
  font-size: 18px;
  font-family: "proxima-nova-soft-1", "proxima-nova-soft-2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}


.whitebg {
  background-color:#fff;
}

.bluebg {
  background-color:#2E93CF;
}

.greenbg {
  background-color:#4FAC4D;
}

.purplebg {
  background-color: #F7F7F7;
}

.orangebg {
  background-color: #C96F24;
}

.redbg {
  background-color: #C43436;
}

.lightbluebg {
    background-color: #72C4DA;
}

.lightbluebg2 {
    background-color: #BFD0DC;
}

.lightgreenbg {
  background-color: #AED78F;
}

.yellowbg {
  background-color: #F1B53D;
}

.darkorangebg {
  background-color: #A5331D;
}


.red-table-bg {
  background-color: #FAE5E2;
}

.green-table-bg {
  background-color: #F6FFF5;
}

.yellow-table-bg {
  background-color: #FBF7ED;
}

.mn-widget {
  min-width: 200px;
}

.sm-widget {
  width: 33%;
}

.md-widget-ex {
  min-width: 480px;
}

.md-widget {
  min-width: 430px;
}

.lg-widget {
  width: 99%;
}



.right-sidebar {
  float: left;
  width: 450px;
  border-left: 1px solid #DBDEEA;
  min-height: 1000px;
}

#sidebar-wrapper {
  margin-left: -250px;
  left: 250px;
  top: 0;
  width: 250px;
  background: #252734;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1000;
  transition: all 0.4s ease 0s;

}
.no-really {
  font-size: 20px;
}
#page-content-wrapper {
  /*width: 80%; */
  background-color: #fff;
}

.input-xxxlarge {
     width: 100%;
 }


/* top search box */
  .top-search-input{
    margin: 0;
    top: 1px;
    padding: 5px 15px;
    font-family: "proxima-nova-1", "proxima-nova-2", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    border:1px solid #C0C0C0;
    border-radius: 5px;
    height:27px;
    position: relative;
  }
  .top-search-button {
    margin: 0;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    height:27px;
    font-family: "proxima-nova-1", "proxima-nova-2", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight:300;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    border: solid 1px #0076a3; border-right:0px;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    background: -moz-linear-gradient(top,  #00adee,  #0078a5);
    border-top-right-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
  }

  /* Fixes submit button height problem in Firefox */
  .top-search-button::-moz-focus-inner {
    border: 0;
  }

/* top search box */

.flex-container {
  padding: 0;
  margin: 0;
  -ms-box-orient: horizontal;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-around; 
  justify-content: space-around;
  z-index:100;

}

.no-space-around {
  -webkit-justify-content: flex-start; 
  justify-content: flex-start;
}

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

.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

.nowrap {
    -webkit-flex-flow: row nowrap;
      -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.red-dot a {
    background-image: url(/images/red-dot.png);
    background-repeat: no-repeat;
    background-position: 20px 12px;
    padding-left: 27px;
    display: block;


}

@media (min--moz-device-pixel-ratio: 1.5),
        (-o-min-device-pixel-ratio: 3/2),
        (-webkit-min-device-pixel-ratio: 1.5),
        (min-device-pixel-ratio: 1.5),
        (min-resolution: 1.5dppx) {
    .red-dot a {
        background-image: url(/images/red-dot@2x.png);
        background-size: 16px 16px;
        background-repeat: no-repeat;
        background-position: 20px 12px;
        padding-left: 27px;
        display: block;
    }
}


.green-dot a {
    background-image: url(/images/green-dot.png);
    background-repeat: no-repeat;
    background-position: 20px 12px;
    padding-left: 27px;
    display: block;

}


@media (min--moz-device-pixel-ratio: 1.5),
        (-o-min-device-pixel-ratio: 3/2),
        (-webkit-min-device-pixel-ratio: 1.5),
        (min-device-pixel-ratio: 1.5),
        (min-resolution: 1.5dppx) {
    .green-dot a {
        background-image: url(/images/green-dot@2x.png);
        background-size: 16px 16px;
        background-repeat: no-repeat;
        background-position: 20px 12px;
        padding-left: 27px;
        display: block;
    }
}


.yellow-dot a {
    background-image: url(/images/yellow-dot.png);
    background-repeat: no-repeat;
    background-position: 20px 12px;
    padding-left: 27px;
    display: block;

}


@media (min--moz-device-pixel-ratio: 1.5),
        (-o-min-device-pixel-ratio: 3/2),
        (-webkit-min-device-pixel-ratio: 1.5),
        (min-device-pixel-ratio: 1.5),
        (min-resolution: 1.5dppx) {
    .yellow-dot a {
        background-image: url(/images/yellow-dot@2x.png);
        background-size: 16px 16px;
        background-repeat: no-repeat;
        background-position: 20px 12px;
        padding-left: 27px;
        display: block;
    }
}


#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}

#wrapper.active {
    padding-left: 0px;
}
#wrapper.active #sidebar-wrapper {
    left: 0px;
}




#page-content {
  position: relative;
  background-color: #CBD0DE;
}
.sidebar-nav {
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;

}

.sidebar-nav li {
  line-height: 40px;
  text-indent: 20px;
}

.sidebar-nav li a {
  color: #999999;
  text-decoration: none;
}
.sidebar-nav li.active a {
  color: #1C1D27;
  text-decoration: none;
}

.sidebar-nav li a:hover {
  color: #fff;
  background-color: rgba(255,255,255,0.2);
  text-decoration: none;
}
li.yellow-dot.active {
  background-color: rgba(255,255,255,0.2);
}
li.yellow-dot.active a{
  color: #fff;
}

li.green-dot.active {
  background-color: rgba(255,255,255,0.2);
}
li.green-dot.active a{
  color: #fff;
}

li.red-dot.active {
  background-color: rgba(255,255,255,0.2);
}
li.red-dot.active a{
  color: #fff;
}

#settings_sections ul {
	padding-left: 0px;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  height: 45px;
  line-height: 60px;
  font-size: 16px;
  color:#fff;
}

.sidebar-nav > .sidebar-brand a {
  color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

.content-header {
  height: 65px;
  line-height: 65px;
}

.content-header h1 {
  margin: 0;
  margin-left: 20px;
  line-height: 65px;
  display: inline-block;
}

.inset {
  padding: 20px;
  padding-top:186px;
}


h1 {
  font-weight: 700;

}



/*mine*/


.white {
  color: white;
}

.black {
  color: #000;
}

.blue {
  color: #2497D2;
}


#first-navbar {
  position: fixed;
  left:250px;
  background-color: #F2F5F3;
  /*color: #fff;*/
  padding-top: 12px;
  text-align: right;
  border-bottom-color: #E2E5EF;
  box-shadow: 0 1px 0 white;
  transition: all 0.4s ease 0s;
}


#first-navbar.active {
    left: 0px;
}



#second-navbar {
  height:96px;
  background-color: #fff;
  width: 100%;
  border-radius: 0px;
  border-top:0px;
  border-bottom-color: #E2E5EF;
  text-align: left;
}

#third-navbar {
  position: absolute;
  top:146px;
  background-color: #fff;  
  width: 100%;
  border-radius: 0px;
  height: 64px;
  border:0px;
  text-align: left;
}

.container-first-navbar {
  padding-right: 15px;
  padding-left: 15px;
  /*margin-right: auto;*/
  margin-left: auto;
}
/*toggle*/
/* ------------------------------------------
CSS TOGGLE SWITCHES (Ionuț Colceriu)
Licensed under Unlicense 
https://github.com/ghinda/css-toggle-switch
------------------------------------------ */

/* Hide by default */

.switch .slide-button,
.toggle p span {
  display: none;
}

/* Toggle Switches */

/* We can't test for a specific feature,
 * so we only target browsers with support for media queries.
 */
@media only screen {

  /* Checkbox
   */
  .toggle {
    position: relative;
    padding: 0;
    margin-left: 0px;
  }

  /* Position the label over all the elements, except the slide-button
   * Clicking anywhere on the label will change the switch-state
   */
  .toggle label {
    position: relative;
    z-index: 3;
    
    display: block;
    width: 100%;
  }

  /* Don't hide the input from screen-readers and keyboard access
   */
  .toggle input {
    position: absolute;
    opacity: 0;
    z-index: 5;
  }
  
  .toggle p {
    position: absolute;
    left: -100px;
    
    width: 100%;
    margin: 0;
    padding-right: 100px;
    
    text-align: left;
  }
  
  .toggle p span {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    
    display: block;
    width: 50%;
    margin-left: 100px;
    
    text-align: center;
  }
  
  .toggle p span:last-child {
    left: 50%;
  }

  .toggle .slide-button {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 4;
    
    display: block;
    width: 50%;
    height: 100%;
    padding: 0;
  }

  /* Radio Switch
   */
  .switch {
    position: relative;
    padding: 0;
  }
  
  .switch input {
    position: absolute;
    opacity: 0;
  }
  
  .switch label {
    position: relative;
    z-index: 2;
    
    float: left;
    width: 50%;
    height: 100%;
    
    margin: 0;
    text-align: center;
  }

  .switch .slide-button {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    z-index: 1;
    
    width: 50%;
    height: 100%;
  }

  .switch input:last-of-type:checked ~ .slide-button {
    left: 50%;
  }

  /* Switch with 3 items */
  .switch.switch-three label,
  .switch.switch-three .slide-button {
    width: 33.3%;
  }

  .switch.switch-three input:checked:nth-of-type(2) ~ .slide-button { 
    left: 33.3%;
  }

  .switch.switch-three input:checked:last-of-type ~ .slide-button {
    left: 66.6%;
  }
  
  /* Switch with 4 items */
  .switch.switch-four label,
  .switch.switch-four .slide-button {
    width: 25%;
  }

  .switch.switch-four input:checked:nth-of-type(2) ~ .slide-button {  
    left: 25%;
  }
  
  .switch.switch-four input:checked:nth-of-type(3) ~ .slide-button {  
    left: 50%;
  }

  .switch.switch-four input:checked:last-of-type ~ .slide-button {
    left: 75%;
  }
  
  /* Switch with 5 items */
  .switch.switch-five label,
  .switch.switch-five .slide-button {
    width: 20%;
  }

  .switch.switch-five input:checked:nth-of-type(2) ~ .slide-button {  
    left: 20%;
  }
  
  .switch.switch-five input:checked:nth-of-type(3) ~ .slide-button {  
    left: 40%;
  }
  
  .switch.switch-five input:checked:nth-of-type(4) ~ .slide-button {  
    left: 60%;
  }

  .switch.switch-five input:checked:last-of-type ~ .slide-button {
    left: 80%;
  }

  /* Shared */
  .toggle,
  .switch {
    display: block;
    height: 30px;
  }
  
  .switch *,
  .toggle * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .switch .slide-button,
  .toggle .slide-button {
    display: block;
    
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  
  .toggle label,
  .toggle p,
  .switch label {
    line-height: 30px;
    vertical-align: middle;
  }
  
  .toggle input:checked ~ .slide-button {
    right: 50%;
  }
  
  /* Outline the toggles when the inputs are focused */
  .toggle input:focus ~ .slide-button,
  .switch input:focus + label {
    outline: 1px dotted #888;
  }
  
  /* Bugfix for older Webkit, including mobile Webkit. Adapted from:
   * http://css-tricks.com/webkit-sibling-bug/
   */
  .switch, .toggle {
    -webkit-animation: bugfix infinite 1s;
  }
  
  @-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } }


  /* Standalone Themes */


  /* Candy Theme
   * Based on the "Sort Switches / Toggles (PSD)" by Ormal Clarck
   * http://www.premiumpixels.com/freebies/sort-switches-toggles-psd/
   */
   
  .candy {
    background-color: #2d3035;
    
    color: #fff;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 1px #191b1e;
      
    border-radius: 3px; 
    
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
  }

  .candy input:checked + label {
    color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  }
    
  .candy .slide-button {
    border: 1px solid #333;

    background-color: #70c66b;
    
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
    background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
    background-image:     -ms-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
    background-image:      -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
    background-image:         linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
    
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.45);
    
    border-radius: 3px;
  }

  .candy p {
    color: #333;
    
    text-shadow: none;
  }

  .candy span {
    color: #fff;
  }

  .candy.blue .slide-button {
    background-color: #38a3d4;
  }

  .candy.yellow .slide-button {
    background-color: #f5e560;
  }

  /* Android Theme
   * Based on Holo
   */
   
  .android {
    background-color: #b6b6b6;
    
    color: #fff;
  }

  .android.toggle {
    border: 2px solid #b6b6b6;
  }

  .android.switch {
    overflow: hidden;
  }
    
  .android.switch .slide-button {
    background-color: #279fca;
    
    -webkit-transform: skew(20deg) translateX(10px);
    -moz-transform: skew(20deg) translateX(10px);
    -ms-transform: skew(20deg) translateX(10px);
    -o-transform: skew(20deg) translateX(10px);
    transform: skew(20deg);
  }

  .android.toggle .slide-button {
    border-radius: 2px;
    
    background-color: #848484;
  }

  /* Selected ON toggle */
  .android.toggle input:first-of-type:checked ~ .slide-button {
    background-color: #279fca;
  }

  .android.switch input:first-of-type:checked ~ .slide-button {
    -webkit-transform: skew(20deg) translateX(-10px);
    -moz-transform: skew(20deg) translateX(-10px);
    -ms-transform: skew(20deg) translateX(-10px);
    -o-transform: skew(20deg) translateX(-10px);
    transform: skew(20deg) translateX(-10px);
  }

  .android p {
    color: #333;
  }

  .android span {
    color: #fff;
  }

  .android.switch,
  .android span {
    text-transform: uppercase;
  }

  /* iOS Theme
   * Similar to iOS but more accessible
   */ 

  .ios {
    background: -webkit-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
    background: -moz-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
    background: -o-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
    background: -ms-linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
    background: linear-gradient(top, #cfcfcf, #efefef 50%, #f9f9f9 50%, #fefefe);
    
    -webkit-box-shadow: inset 0 2px 2px #b6b6b6, inset 3px 0 3px #b6b6b6;
    box-shadow: inset 0 2px 2px #b6b6b6, inset 3px 0 3px #b6b6b6;

    border: 1px solid #efefef;
    border-radius: 3px;
    
    color: #7f7f7f;
    font: bold 14px sans-serif; 
    text-align: center;
    text-shadow: none;
  }

  .ios.toggle .slide-button {
    border: 1px solid #919191;
    background: -webkit-linear-gradient(top, #cdcdcd, #fbfbfb);
    background: -moz-linear-gradient(top, #cdcdcd, #fbfbfb);
    background: -o-linear-gradient(top, #cdcdcd, #fbfbfb);
    background: -ms-linear-gradient(top, #cdcdcd, #fbfbfb);
    background: linear-gradient(top, #cdcdcd, #fbfbfb);
    
    border-radius: 3px;
    
    -webkit-box-shadow: inset 0 1px 0 #f0f0f0;
    box-shadow: inset 0 1px 0 #f0f0f0;
  }

  /* Selected ON toggle */
  .ios.toggle input:first-of-type:checked ~ p span:first-child,
  .ios.switch input:checked + label {
    color: #fff;
    text-shadow: 0 -1px 0 #1b3b6f;
  }

  .ios.toggle input:first-of-type:checked ~ .slide-button,
  .ios.switch .slide-button {
    background: -webkit-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
    background: -moz-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
    background: -o-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
    background: -ms-linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
    background: linear-gradient(top, #3672dc, #4085ec 50%, #4d8fef 50%, #76adfc);
    
    border-radius: 3px;
    border: 1px solid #1654b5;
    
    text-align: center;
    color: #fff;
    
    font: bold 14px sans-serif; 
    text-shadow: 0 -1px 0 #1b3b6f;
  }
  
  .ios.toggle p span {
    color: #7f7f7f;
  }
  
}
@media (max-width:767px) {

#wrapper {
  padding-left: 0;
}

#sidebar-wrapper {
  left: 0;
}

#wrapper.active {
  position: relative;
  left: 250px;
}

#wrapper.active #sidebar-wrapper {
  left: 250px;
  width: 250px;
  transition: all 0.4s ease 0s;
}

#first-navbar {
  position: fixed;
  left:0px;
  background-color: #F2F5F3;
  color: #fff;
  padding-top: 12px;
  text-align: right;
  border-bottom-color: #E2E5EF;
  box-shadow: 0 1px 0 white;
  transition: all 0.4s ease 0s;
}





.inset {
  padding: 15px;
}

}