html {
  background-color: #fff;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: #f7f7f7;
  position: relative;
  margin: 0px;
  font-size: 12px;
  padding: 0px;
}

h1, h2, h3, h4 {
  font-family: 'Roboto', sans-serif !important;
}

.page-content > .row {
  margin-left: 0px !important;
  margin-right: 0px !important;
  padding-top: 35px;
}

.alert-info {
  width: 50% !important;
  margin: 0 auto 2rem auto !important;
  position: relative;
  top: 3em;
}

/* Footer */

footer{
  background-color:#fff;
  /* box-shadow:inset 0px 0px 3px #111; */
  color:black;
  font-size:14px;
  line-height:25px;
  padding:10px 0px 10px 0px;
  bottom: 0px;
  /* box-shadow: inset 0px 0px 20px 9px #bdbdbd; */
  border-top: 4px solid #dfdfdf;
}

footer a{
  color:black;
  text-decoration:none;
  border-bottom:1px dotted #888;
}

footer a:hover{
  color:#aaa;
  text-decoration:none;
  border:0px;
}

footer hr{
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: #000 1px solid;
	border-bottom: #212121 1px solid;
}

footer .copy{
  font-size: 15px;
  margin: 15px 0px;
  float: right;
}

/* Logo & Navigation */

.header{
  height:79px;
  background-color: #fff;
  /* box-shadow: inset 0px 0px 20px #bdbdbd; */
  border-bottom: 4px solid #dfdfdf;
}

.header .logo h1{
  font-size:30px;
  margin:0px;
  padding:10px 0px;
}

.header .logo h1 a{
  color:#fff;
  font-family: 'Roboto', sans-serif;
}

.header .logo h1 a:hover{
  color:#fff;
  text-decoration:none;
  border:0px;
}

.header .form{
  margin-top:10px;
  width:100%;
  max-width:300px;
  margin:10px auto;
}

.header .navbar *{
  box-shadow:none !important;
  margin: 4px 0;
}

.header .navbar .label{
  font-size:12px;
  padding:4px 8px;
  margin:0px 2px;
  border-radius:15px !important;
}

.header .navbar{
  background:none !important;
  border:0px !important;
}

.header .navbar i{
  margin-right:3px;
}

.header .navbar .nav > li > a{
  color:black !important;
  font-size:13px !important;
  border-bottom:0px !important;
  margin-top:0px !important;
  font-weight:bold;
}

.header .navbar-nav>.open>a,.header  .navbar-nav>.open>a:hover,.header  .navbar-nav>.open>a:focus {
  background:none !important;
}

.header .navbar-collapse{
  border:0px !important;
}

.header .navbar-header{
  width:43px;
  margin:0 auto;
}

.header .navbar-header button{
  color:#fff !important;
  padding:5px 10px;
}

.header .navbar-toggle{
  background-color: #1dc1da !important;
  border:1px solid #0fa6bc !important;
}

.header .navbar-toggle:hover, .header .navbar-toggle:focus {
  background-color: #0fa6bc !important;
  border:1px solid #0fa6bc !important;
}

.header .dropdown-menu{
  border-radius:6px !important;
  background:#fff !important;
}

.header .dropdown-menu li{
  font-size:13px;
  padding:6px 15px;
  border-bottom:1px dashed #f3f3f3;
}

.header .dropdown-menu li a {
  color:#888;
  padding-left:0px !important;
}

.header .dropdown-menu li:last-child{
  border:0px;
}

.header .dropdown-menu li a:hover{
  background:none !important;
  color:#666 !important;
  border:0px !important;
}

.header .dropdown-big{
  min-width:300px;
}

.header .dropdown-big .dropdown-head{
  padding:7px 15px;
  background:#fcfcfc;
  border-bottom:1px solid #ddd;
  margin-top:-5px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
}

.header .dropdown-big .dropdown-title{
  font-size:13px;
  font-weight:bold;
  color:#999;
}

.header .dropdown-big .dropdown-body{
  background:#fff;
}

.header .dropdown-big .dropdown-foot{
  padding:7px 15px;
  background:#fcfcfc;
  border-top:1px solid #ddd;
  margin-bottom:-5px;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  font-size:12px;
}

.header .dropdown-big .dropdown-foot a{
  color:#888;
}

.header .dropdown-big .dropdown-foot a:hover{
  color:#555;
  border-bottom:0px;
}

.header .navbar-nav .caret{
  border-top-color:#fff !important;
  border-bottom-color:#fff !important;
}

.header .navbar-nav>.open>a .caret,.header  .navbar-nav>.open>a:hover .caret,.header  .navbar-nav>.open>a:focus .caret {
  border-top-color: #fff !important;
  border-bottom-color: #fff !important;
}

/* Sidebar navigation */

.content-box, .content-box-large {
  margin-bottom:30px;
  background:#fff;
  border-radius:5px;
  padding:10px;
  border-left:1px solid #eee;
  border-top:1px solid #eee;
  border-right:2px solid #eee;
  border-bottom:2px solid #eee;
  border: 4px solid #dfdfdf;
  /* box-shadow: inset 0px 0px 10px 0px black; */
}

.content-box-large {
  padding: 20px;
}

.box-with-header {
  border-top: none;
  border-top-left-radius:0px;
  border-top-right-radius:0px;
  min-height: 15em;
}

.content-box-header {
  min-height: 40px;
  font-size: 16px;
  background: #f5f5f5 !important;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: 1px solid #d2d2d2;
  /* box-shadow: inset 0px 0px 19px 9px #dfdfdf; */
  border: 3px solid #dfdfdf !important;
  color: black !important;
}

.content-box-header:after {
  clear:both;
}

.sidebar ul.nav, .sidebar ul.nav ul{
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.sidebar ul.nav ul {
  margin:0px;
  padding:0px;
  display:none;
}

.sidebar .nav li.open ul{
  display:block;
}

.sidebar .nav > li {
	margin: 0;
  border-bottom:1px dashed #eee;
}

.sidebar .nav > li:last-child{
  border-bottom:0px;
}

.sidebar .nav > li li {
	margin: 0;
}

.sidebar .nav > li li a{
  padding-left:25px;
}

.sidebar .nav > li > a {
	font-size: 14px;
	line-height: 20px;
	padding: 15px 15px;
	color: #999 !important;
	display: block;
  font-weight:bold;
  background:none;
	text-decoration: none;
  border-top:0px;
  font-weight:bold;
  cursor: pointer;
}

.sidebar .nav > li > a:hover {
  color: black;
}

.sidebar .nav > li > a > i{
  margin-right:5px;
}

.sidebar .nav > li > ul > li > a {
	font-size: 13px;
	line-height: 20px;
	padding: 8px 10px 8px 40px;
	color: #999;
  background:#fff;
	display: block;
	text-decoration: none;
  border-top:0px;
  font-weight:bold;
}

.sidebar .nav > li > ul > li.active > a{
  background:#fff;
  border-top:0px;
  color:#555;
}

.sidebar .nav > li > ul > li > a:hover{
  background:#fff;
  color:#555;
  border-bottom:0px;
}

.sidebar .nav li a:hover, .sidebar .nav li.current > a {
	background: #fff;
	color: #555 !important ;
  border-bottom:0px;
}

.sidebar .nav li.open > a {
  background:#fff;
  color: #555;
  border-bottom:1px dashed #eee;
}

.sidebar .nav a .caret {
	float: right;
	width: 0;
	height: 0;
	display: inline-block;
	vertical-align: top;
	border-top: 4px solid #aaa;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: "";
  margin-top: 8px;
	margin-left: 2px;
}

.sidebar .nav a:hover .caret {
	border-top-color: #aaa;
}

.sidebar .nav li.open > a > .caret {
	border-top: none;
	border-bottom: 4px solid #aaa !important;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

.sidebar .nav li.open > a:hover > .caret {
	border-bottom-color: #aaa;
}

.login-bg {
  background: rgba(255, 255, 255, 0);
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  background: -moz-linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  background: -ms-linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  background: -o-linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  background-color: #3e3e3e;
  background-repeat: no-repeat;
  height: 100%;
}

body {
  background-color: #b5bdc8;
}

/** Login & Signup **/

.login-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}


.login-wrapper .box {
  margin: 0 auto;
  padding: 30px 0 30px;
  float: none;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px, rgba(0, 0, 0, 0.35) 0 0 1px;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px, rgba(0, 0, 0, 0.35) 0 0 1px;
  -ms-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px, rgba(0, 0, 0, 0.35) 0 0 1px;
  -o-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px, rgba(0, 0, 0, 0.35) 0 0 1px;
  box-shadow: rgba(0, 0, 0, 0.4) 0 1px 3px, rgba(0, 0, 0, 0.35) 0 0 1px;
  background: #fff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
}
.login-wrapper .box .content-wrap {
  width: 82%;
  margin: 0 auto;
}
.login-wrapper .box h6 {
  text-transform: uppercase;
  margin-bottom: 35px;
  font-size: 18px;
  font-weight: 600;
}
.login-wrapper .box input[type="text"],
.login-wrapper .box input[type="password"] {
  font-size: 15px;
  height: 40px;
  margin-bottom: 10px;
  border-color: #b2bfc7;
  padding-left: 12px;
}
.login-wrapper .box input[type="text"]:focus,
.login-wrapper .box input[type="password"]:focus {
  border: 1px solid #28a0e5;
  outline: none;
  -webkit-box-shadow: inset 0 1px 2px #ddd,0px 0 5px #28a0e5;
  -moz-box-shadow: inset 0 1px 2px #ddd,0px 0 5px #28a0e5;
  -ms-box-shadow: inset 0 1px 2px #ddd,0px 0 5px #28a0e5;
  -o-box-shadow: inset 0 1px 2px #ddd,0px 0 5px #28a0e5;
  box-shadow: inset 0 1px 2px #dddddd, 0px 0 5px #28a0e5;
}
.login-wrapper .box input[type="password"] {
  margin-bottom: 10px;
}

.login-wrapper .box .action {
  position: relative;
  top: 30px;
  padding: 15px 0px;
}
.login-wrapper .box .signup {
  text-transform: uppercase;
  font-size: 13px;
  padding: 7px 25px;
  border-radius: 5px;
}
.login-wrapper .already {
  margin: 0 auto;
  float: none;
  text-align: center;
  font-size: 13px;
  margin-top: 30px;
}
.login-wrapper .already p {
  display: inline-block;
  color: white;
}
.login-wrapper .already a {
  color: white !important ;
  margin-left: 7px;
  border-bottom: 1px solid;
}
.login-wrapper .already a:hover {
  text-decoration: none;
  color: #000;
  border-bottom-color: #000;
}


.login-wrapper .box .social{
  margin: 0 auto;
  width: 90%;
}
.login-wrapper .box .social a.face_login{
  background: #6887c4;
  background: -moz-linear-gradient(top, #6887c4 0%, #4566a9 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6887c4), color-stop(100%,#4566a9));
  background: -webkit-linear-gradient(top, #6887c4 0%,#4566a9 100%);
  background: -o-linear-gradient(top, #6887c4 0%,#4566a9 100%);
  background: -ms-linear-gradient(top, #6887c4 0%,#4566a9 100%); 
  background: linear-gradient(to bottom, #6887c4 0%,#4566a9 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6887c4', endColorstr='#4566a9',GradientType=0 );
  border: 1px solid #3B4868;
    border-radius: 3px 3px 3px 3px;
    display: inline-block;
    height: 37px;
    overflow: hidden;
    width: 99%;

    text-decoration: none !important;
}
.login-wrapper .box .social a.face_login:hover {
  background: #6887c4;
  background: -moz-linear-gradient(top, #6887c4 0%, #5773AC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6887c4), color-stop(100%,#5773AC));
  background: -webkit-linear-gradient(top, #6887c4 0%,#5773AC 100%);
  background: -o-linear-gradient(top, #6887c4 0%,#5773AC 100%);
  background: -ms-linear-gradient(top, #6887c4 0%,#5773AC 100%); 
  background: linear-gradient(to bottom, #6887c4 0%,#5773AC 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6887c4', endColorstr='#5773AC',GradientType=0 );
}
.login-wrapper .box .social a.face_login span.face_icon{
  background-color: #39599F;
  border-radius: 3px 0 0 3px;
  float: left;
  height: 37px;
  text-align: center;
  width: 51px;
}
.login-wrapper .box .social a.face_login span.face_icon img{
  margin-top: 5px;
}
.login-wrapper .box .social a.face_login span.text{
  color: #FFFFFF;
  float: left;
  font-size: 15px;
  font-weight: bold;
  margin: 6px 0 0 25px;
  text-shadow: 1px 1px 0 #39599F;
}
.login-wrapper .box .division{
  display: inline-block;
  margin: 17px 0 23px;
  position: relative;
  text-align: center;
  width: 100%;
}
.login-wrapper .box .division hr{
  border-color: #E2E2E4;
  border-width: 1px;
  margin: 0;
  position: absolute;
  width: 40%;
}
.login-wrapper .box .division hr.left{
  top: 13px;
}
.login-wrapper .box .division hr.right{
  bottom: 6px;
  right: 0;
}
.login-wrapper .box .division span{
  color: #666666;
  font-size: 18px;
}

.panel-heading>.panel-title, .content-box-header .panel-title {
  float: left;
  padding: 7px 15px 1px 15px;
  font-size: 16px;
}

.panel-heading>.panel-title>*, .content-box-header .panel-title>* {
  margin: 0;
}

.panel-heading>.panel-title>span, .content-box-header .panel-title>span {
  font-weight: normal;
}

.panel-heading>.panel-options, .content-box-header .panel-options {
  float: right;
  padding: 8px 15px;
}

.panel-heading>.panel-options>a, .content-box-header .panel-options>a {
  margin-top: 10px;
}

.panel-body {
  clear:both;
}

/* Responsive CSS */

/* Mobile phones */
@media (max-width: 480px){

}

/* Tablets */
@media (max-width: 767px){
   .container{
      width:100%;
   }
   .header{
      height:auto;
      padding:15px 0px;
   }  
   .header .logo{
      text-align:center;
      padding-bottom:10px;
   }
   .header .navbar .nav > li > a:hover{
      background:#0fa6bc;
      border-radius:5px;
   }
   .navbar-toggle {
      margin-right:0px !important;
   }
}

/* Desktop */

@media (max-width: 991px){
   .header{
      height:auto;
      padding:15px 0px;
   }  
   .header .logo{
      text-align:center;
      padding-bottom:10px;
      margin: 0 19%;
   }
   .header .form{
      margin:10px auto;
   }
   .sidebar, content-box{
      margin-bottom:30px;
      width:100%;
      float:none;
      position:relative;
   }  
   .mainy{
      margin-left: 0px;
   }
   .sidebar-dropdown{
      display:block;
      text-align:center;
      margin:0 auto;
      margin-bottom:10px;
      border-bottom:1px dashed #eee;
      padding-bottom:10px;
   }
   .sidebar-dropdown a, .sidebar-dropdown a:hover{
      color:#fff;
      background:#16cbe6;
      display:block;
      padding:6px 12px;
      border-bottom:0px;
      box-shadow:0px 0px 1px #0fa6bc;
      border-radius:10px;
   }  
}

.logo {
  display: inline-block;
  width: 57%;
}

.logo img {
  width: 100%;
}

@media (min-width: 1200px) {
.col-lg-12 {
    margin: 12px 0;
}

.panel-warning>.panel-heading {
    background-color: #f5f5f5;
    border-color: #d2d2d2;
    color: #000000;
}

.btn-primary {
    color: #fff !important ;
    background-color: #000000;
    border: 1px solid black;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #484848;
    border-color: #acacac;
}

a {color: black;}

a:hover, a:focus {
    color: #000000;
}

@media (min-width: 1200px) {
.container {
    width: 90%;
}

.panel-warning>.panel-heading {
    color: #000000;
    background-color: #f5f5f5;
    border-color: #d2d2d2;
    /* box-shadow: inset 0px 0px 19px 9px #dfdfdf; */
    border: 3px solid #dfdfdf;
}

td {
    font-weight: bold;
}

.view th {
    text-align: left;
    background-color: #3d577c;
    padding-left: 10px;
    font-size: 18px;
}

a {
    color: #000000 !important;
}

.login-wrapper input {margin-bottom: 10px;}

.form-control {margin-bottom: 10px;}

@media (min-width: 768px) {
}
  .col-sm-offset-2 {
      margin-left: 0 !important;
  }

  .adjustHeight {
      height: 68.3em;
      /* background-color: #888888; */
  }

  .addSupHeight {
      height: 68.3em;
      /* background-color: #888888; */
  }

  .supplierViewH1 {
    display: inline-block;
    margin-bottom: 1em;
    text-transform: uppercase;
  }

  .logoContainer {
    display: inline-block;
    float: right;
    margin: 1em 1.6em;
  }

  .serviceList {
    list-style: none;
    font-size: 16px;
  }

  .account-view {
    width: 87% !important;
    margin: 0 6% !important;
  }

  .supViewHeight {
    height: 68.3em;
    /* background-color: #888888; */
  }
.add {
  display: inline-block;
  padding: .3em 1em;
  border: 2px solid #787878;
  border-radius: 33px;
  color: white;
  font-family: 'Roboto', sans-serif;
  margin-right: 10px;
  background: rgb(76,76,76); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */

}

.edit {
  display: inline-block;
  padding: .3em 1em;
  border: 2px solid #787878;
  border-radius: 33px;
  color: white;
  font-family: 'Roboto', sans-serif;
  background: rgb(76,76,76); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}

.add:hover {
  color: black;
  background: rgb(245,246,246); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
}

.edit:hover {
  color: black;
  background: rgb(245,246,246); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
}

.currentSuppliers {
  display: inline-block;
  font-size: 15px;
}

.page-content {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+100,b5bdc8+100 */
  /* background: rgb(181,189,200); /* Old browsers */
  /* background: -moz-linear-gradient(top,  rgba(181,189,200,1) 0%, rgba(130,140,149,1) 100%, rgba(181,189,200,1) 100%); /* FF3.6-15 */
  /* background: -webkit-linear-gradient(top,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 100%,rgba(181,189,200,1) 100%); Chrome10-25,Safari5.1-6 */
  /* background: linear-gradient(to bottom,  rgba(181,189,200,1) 0%,rgba(130,140,149,1) 100%,rgba(181,189,200,1) 100%); W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#b5bdc8',GradientType=0 ); IE6-9 */
  height: auto;
  min-height: calc(100vh - 82.7*2px);
}

@media (max-width: 1023px) {
  .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    width: 242px;
  }
}

.paginate_disabled_previous {
  margin-right: 1.5em;}
.paginate_disabled_previous, .paginate_disabled_next {
  cursor: pointer;
}

.fileInputLabel {
  padding-right: 0;
  padding-top: .5em;
  font-size: 13px;
}

.containerShadow {
  /* box-shadow: 1px 1px 1px 1px black; */
  /* border-radius: 10px; */
}

/* .footerShadow {box-shadow: 0px 0px 7px 0px black;} */

.panel-heading {
  padding: 0 !important;
}

.inputFields {
  font-size: 15px;
  height: 40px;
  margin-bottom: 10px;
  border-color: #b2bfc7;
  padding-left: 12px;
}

.search {
  display: inline-block;
  padding: .3em 1em;
  border: 2px solid #787878;
  border-top-right-radius: 33px;
  border-bottom-right-radius: 33px;
  color: white;
  font-family: 'Roboto', sans-serif;
  margin-right: 10px;
  background: rgb(76,76,76); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */

}

.search:hover {
  color: black;
  background: rgb(245,246,246); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
}

.servicesTable {
  font-size: 15px !important;
  border: 1px solid #3d577c;
  border-collapse: initial;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin-bottom: 1em;
  width: 100%;
}

.servicesTable tr {
  border-bottom: 1px solid #3d577c;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e3eaf1+0,d7e0ed+0,cddaeb+44,bfcde1+100,aabcd4+100 */
  background: rgb(227,234,241); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(227,234,241,1) 0%, rgba(215,224,237,1) 0%, rgba(205,218,235,1) 44%, rgba(191,205,225,1) 100%, rgba(170,188,212,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(227,234,241,1) 0%,rgba(215,224,237,1) 0%,rgba(205,218,235,1) 44%,rgba(191,205,225,1) 100%,rgba(170,188,212,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(227,234,241,1) 0%,rgba(215,224,237,1) 0%,rgba(205,218,235,1) 44%,rgba(191,205,225,1) 100%,rgba(170,188,212,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3eaf1', endColorstr='#aabcd4',GradientType=0 ); /* IE6-9 */
  box-shadow: inset 0px 0px 20px #6e92c3;
}

.servicesTable td {padding-left: 1em;}

.extraServiceTable {
  margin: 7px;
  margin-left: 2em;
}

.viewSupplier-img {
  vertical-align: middle;
  width: 112px;
  float: right;
  margin: 1em; 
}

.viewSupplier-p {
  display: inline-block;
  margin-left: 1em;
  font-size: 18px;
}

.serviceTable-btns {float: right;}

.panel-extra {
  width: 92%;
  margin: 0 3%;
}

@media (max-width: 1024px) {
  .panel-extra {
    width: 98.5%;
    margin: 0px 1%;
  }
}

.search-bar {
  font-size: 15px;
  padding-left: 6px;
}

.search-button {
  font-size: 15px;
  position: relative;
  right: 4px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: black;
  color: white;
  border: 2px solid gray;
}

.dashboard #example_wrapper {
  height: 11em;
  overflow-y: scroll;
}

.supplier-logo img {
  width: 100px;
  height: auto;
}

/*Edit Suppliers & Services*/

.currentLogo {
  padding: 0;
  width: 24%;
  margin: 19px 0px;
}

.currentLogo-img {
  margin: .5em;
  width: 150px;
  padding: .5em;
  border: 2px solid #d9d9d9;
  border-radius: 3px;
}

/*.view label {
  display: none;
}
*/
#forename,
#surname,
#email-address,
#role,
#status,
#password,
#confirm {
  width: 49%;
  display: inline-block;
  margin-bottom: 15px;
}

#forename input,
#surname input,
#email-address input,
#password input,
#confirm input {
  width: 70%;
  font-size: 15px;
  border: 1px solid #d0d0d0;
  padding-left: 3px;
}

#forename label,
#surname label,
#email-address label,
#role,
#status label,
#password label,
#confirm label {
  font-size: 17px;
}

.home-wrapper {
  height: 11em;
}

#tableWrap {
  overflow-y: scroll;
  max-height: 12em;
  position: relative;
  bottom: 7px;
}

#add-account-column {
  width: 49%;
  display: inline-block;
}

#add-account-column input {
  width: 90%;
  margin-bottom: 2em;
}

#add-account-row label {
  font-size: 15px;
}

#table-view {
  background: none !important;
  text-align: center;
}

#table-remove {
  width: 78px;
}

#table-edit {
  width: 43px;
}

.view .panel-extra {
  width: 57%;
  margin: 0px;
}

.accounts {
  float: right;
  padding: 0;
  width: 42% !important;
  position: relative;
  right: 1em;
}

.content-box-large.box-with-header.account-list {
  max-height: 40.7em;
}

.col-md-12.panel-warning.panel-extra.supplier-users {
    width: 100%;
}

#col-input-1 {
  width: 26%;
  display: inline-block;
  margin-right: 3em;
}

#example th {
  background-color: white;
  font-size: 13px;
  vertical-align: middle;
}

#example td {
  font-weight: normal;
  vertical-align: middle;
  padding: 5px 9px;
}

#box-one {
  display: inline-block;
  width: 49%;
}

#box-one h4 {font-weight: bold;}

#box-one p {font-size: 20px;}

@media (min-width: 992px) {
  .add-user .col-md-12 {
    width: 89%;
    margin: 0px 7em;
  }
}

#disable-supplier .supplier-name {
  width: 58%;
  display: inline-block;
}

#disable-supplier .supplier-logo img {
  max-width: 230px;
  width: auto;
  height: auto;
}

#disable-supplier .supplier-logo {
  float: right;
  clear: both;
}

#disable-supplier .supplier-code,
#disable-supplier .fund-split {
  font-size: 18px;
  margin: 10px 0;
}

#disable-supplier .supplier-code span,
#disable-supplier .fund-split span {
  font-weight: bold;
}

#disable-supplier .panel-title {
  border-bottom: 2px solid #969696;
  padding-bottom: 5px !important;
  padding-left: 0 !important;
}

#disable-supplier hr {
  margin: 0;
  border: 1px solid #cccccc;
}

#disable-supplier select {
  font-size: 15px;
}

#serviceContent {
  font-size: 16px;
  margin-top: 3em;
  width: 88%;
}

#serviceHeader h1 {
  display: inline-block;
}

.serviceViewLogo {
  float: right;
  max-width: 150px;
  clear: both;
}

#serviceContent h4 {
  font-weight: bold;
  margin-top: 2em;
  border-bottom: 1px solid #cacaca;
  padding-bottom: 10px;
}

#serviceInner {
  width: 30%;
  display: inline-block;
}

#serviceAddress {
  margin-bottom: 2em;
  width: 100%;
}

#serviceAddress th {
  padding: 10px;
  border: 1px solid #c3c3c3;
}

#serviceAddress tbody tr:nth-child(odd) {
  background: #f1f1f1;
}

#serviceAddress tr {
  border: 1px solid #bfbfbf;
}

.accountTrans {
  box-shadow: 1px 1px 9px 0px black !important;
}

#transCol-One,
#transCol-Two {
  display: inline-block;
  margin: 0 20px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 49px;
  height: 17px;
  margin: 0 16px;
  top: 4px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 9px;
  width: 13px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

#supplierPreferences select {
  position: relative;
  bottom: 4px;
}

#supplierPreferences label {
  display: inline-block;
  font-size: 15px;
}

.clear{
  clear:both;
}

a.add{
  font-size:15px;
  color:#fff !important;
  text-decoration: none;
}

.supplier-customers-table th{
  background:#fff;
  font-size:13px;
}

.supplier-customers-table th button{
  background:#fff;
  border:0;
  font-weight: bold;
}

.btn-pagination{
  border:0;
  background:#e3e3e3;
  border-radius: 3px;
  font-size:15px;
  padding: 5px 25px;
}

.sort-order{
  font-size:15px;
  margin-top:50px;
  clear:both;
  float:right;
}
.sort-order select{
  margin:0 !important;
}

.btn-right, .btn-left{
  margin-top:10px;
  background: #fdfdfd;
  border: 1px solid #d8d8d8;
}

.btn-right{
  float:right;
}
.btn-left{
  float:left;
}

.advice_button {
  background-color: #99ad7a; 
  border-radius: 0.5em; padding: 0.8em;
}


.clearfix::after {
  content: "";
  clear: both;
  display: table;
}