/* SITE WIDE CSS */
@import url('https://fonts.googleapis.com/css?family=Lato|Open+Sans|Roboto|Ubuntu');
body{background-color:#fff;padding-top:70px;font-size:14px;}

/* TOP NAV BAR CSS */
.top-bar{
  position:fixed;
  top:0;
  z-index:1000;
  height:55px;
  background-color:#343b42;
  color:#fff;
}
.top-bar .primary-nav{
  padding-left:0;
  padding-right:0;
}
.top-bar .primary-nav .logo{
  padding:0;
  max-width:55px;
  background-color:#008c9a;
}
.top-bar .primary-nav .logo img{
  margin:11px;
  padding:0;
  max-height:33px;
}
.top-bar .primary-nav .menu-toggle{
  padding:0;
  width:55px;
  max-width:55px;
  font-family: 'Lato', sans-serif;
  font-size:18px;
}
.top-bar .primary-nav .menu-toggle button{
  padding:8px 18px 9px 18px;
  margin:0;
  font-size:24px;
  border-radius: 0 !important;
  border-right:1px Solid #666 !important;
}
.top-bar .quick-actions{
  padding-top:7px;
}
.top-bar .quick-actions .add-new{
  padding-left:0;
}
.top-bar .quick-actions .add-new button{
  padding:8px 14px;
  background-color:#1d2124;
  color:#ccc;
  border-radius:0;
}
.top-bar .quick-actions .add-new button:focus {
  box-shadow: none !important;
}
.top-bar .quick-actions .add-new .dropdown-menu{
  margin:0;
  background-color:#1d2124;
  color:#fff;
  border-radius:0;
  border:0;

  width:100% !important;
  min-width:1rem !important;
}
.top-bar .quick-actions .add-new .dropdown-menu .dropdown-item{
  color:#ccc;
}
.top-bar .quick-actions .add-new .dropdown-menu .dropdown-item:hover{
  background-color:#343b42;
  color:#ccc;
}
.top-bar .quick-actions .add-new .dropdown-menu .dropdown-divider{
  border-color:#666;
}
.top-bar .quick-actions .disabled{
  opacity:0.5;
}
.top-bar .quick-actions .search{
  padding:2px 0 0 0;
}
.top-bar .quick-actions .search .input-group {
  margin-bottom:0 !important;
}
.top-bar .quick-actions .search .input-group-prepend span{
  padding: .375rem .85rem;
  background-color:#ddd;
  border-radius: 0;
  border:0;
}
.top-bar .quick-actions .search .input-group input{
  background-color:#f4f4f4;
  border-radius: 0;
  border:0;
}
.top-bar .quick-actions .search .input-group input:focus {
  box-shadow: none !important;
}
input.form-control::-webkit-input-placeholder { /* Edge */
  color: #ccc;
}

input.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ccc;
}

input.form-control::placeholder {
  color: #ccc;
}
.top-bar .sync{
  padding-top:7px;
  text-align: right;
}
.top-bar .sync .add-new{
  padding-left:0;
}
.top-bar .sync button{
  padding:8px 14px;
  background-color:#008c9a;
  color:#fff;
  border-radius:0;
  box-shadow: none !important;
  border:0;
}
.top-bar .sync button:hover{
  padding:8px 14px;
  background-color:#1d2124;
  border:0;
  color:#fff;
  border-radius:0;
  box-shadow: none !important;
}
.top-bar .sync button:focus {
  box-shadow: none !important;
  border:0;
}
.top-bar .sync .add-new .dropdown-menu{
  margin:0;
  background-color:#1d2124;
  color:#fff;
  border-radius:0;
  border:0;

  width:100% !important;
  min-width:1rem !important;
}
.top-bar .sync .add-new .dropdown-menu .dropdown-item{
  color:#ccc;
}
.top-bar .sync .add-new .dropdown-menu .dropdown-item:hover{
  background-color:#343b42;
  color:#ccc;
}
.top-bar .sync .add-new .dropdown-menu .dropdown-divider{
  border-color:#666;
}
.top-bar .sync .search{
  padding:2px 0 0 0;
}
.top-bar .sync .search .input-group {
  margin-bottom:0 !important;
}
.top-bar .sync .search .input-group-prepend span{
  padding: .375rem .85rem;
  background-color:#ddd;
  border-radius: 0;
  border:0;
}
.top-bar .sync .search .input-group input{
  background-color:#f4f4f4;
  border-radius: 0;
  border:0;
}
.top-bar .sync .search .input-group input:focus {
  box-shadow: none !important;
}
.top-bar .user{
  padding:0;
  text-align:left;
}
.top-bar .user .user-btn-group{
  font-family: 'Lato', sans-serif;
  font-size:16px;
}
.top-bar .user .user-btn-group button{
  color:#ccc;
  padding:14px 20px 14px 20px;
  border-radius: 0 !important;
}
.top-bar .user .user-btn-group button i{
  margin-right:10px;
}
.top-bar .user .user-btn-group button span{
  margin-right:5px;
}
.top-bar .user .user-btn-group button:focus {
  box-shadow: none !important;
}
.top-bar .user .user-btn-group .dropdown-menu{
  margin:0;
  background-color:#1d2124;
  color:#fff;
  border-radius:0;
  border:0;
  left:5px !important;
  width:100% !important;
}
.top-bar .user .user-btn-group .dropdown-menu .dropdown-item{
  color:#ccc;
}
.top-bar .user .user-btn-group .dropdown-menu .dropdown-item:hover{
  background-color:#343b42;
  color:#ccc;
}
.top-bar .user .user-btn-group .dropdown-menu .dropdown-divider{
  border-color:#666;
}

/* SIDE NAV BAR CSS */
.side-nav {
  position: fixed;
  top: 55px;
  left: 0;
  height: 100%;
  width: 285px;
  margin-left:-285px;
  padding-top: 22px;
  z-index: 500;
  background-color: #f4f4f4;
  border-top:0 Solid #008c9a;
  border-right:1px Solid #ccc;
  overflow-x: hidden;
  transition: 0.2s;

}
.side-nav .row{
  margin-bottom:20px;
}
.side-nav .sidenav-container{
  max-width:260px;
}
.side-nav .sidenav-container .col-button{
  padding:0;
}
.side-nav .sidenav-container .col-button .button{
  width:58px;
  color:#fff !important;
  padding:4px 8px;
  text-align: center;
  font-size:32px !important;
  border-radius: 10px;
  border:0;
}
.side-nav .sidenav-container .col-button .dashboard{
  background-color:#5F6A7C;
}
.side-nav .sidenav-container .col-button .dashboard:hover{
  background-color:#4E5866;
}
.side-nav .sidenav-container .col-button .customers{
  background-color:#4EA5D3;
}
.side-nav .sidenav-container .col-button .customers:hover{
  background-color:#458EB5;
}
.side-nav .sidenav-container .col-button .quotes{
  background-color:#72529F;
}
.side-nav .sidenav-container .col-button .quotes:hover{
  background-color:#614888;
}
.side-nav .sidenav-container .col-button .jobmgmt{
  background-color:#1FC0AE;
}
.side-nav .sidenav-container .col-button .jobmgmt:hover{
  background-color:#329C91;
}
.side-nav .sidenav-container .col-button .products{
  background-color:#EC6192;
}
.side-nav .sidenav-container .col-button .products:hover{
  background-color:#C8537D;
}
.side-nav .sidenav-container .col-button .stockctrl{
  background-color:#5376CE;
}
.side-nav .sidenav-container .col-button .stockctrl:hover{
  background-color:#4A639C;
}
.side-nav .sidenav-container .col-button .guides{
  background-color:#CE69A6;
}
.side-nav .sidenav-container .col-button .guides:hover{
  background-color:#B05B8E;
}
.side-nav .sidenav-container .col-button a, .side-nav .col-button a:visited{
  font-size:13px !important;
  text-decoration:none;
  color:#666;
}
.side-nav .sidenav-container .col-button a:hover{
  text-decoration:none;
}
.side-nav .sidenav-container .col-button hr{
  margin:0 auto;
  color:#ccc;
  width:90%;
}
.side-nav .sidenav-container .side-links a{
  font-size:15px;
  color:#666;
  text-decoration: underline;
}
.alert{
  margin:0 15px 20px 15px;
  display:none;
}
.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
/* MAIN SECTION STYLES */
main {
  display:block;
  color:#333;
  padding:0 30px;
}
main h1{
  margin:6px 0 20px 0;
  padding:0;
  font-size:24px;
}
main h1 .icon{
  padding:6px 12px 8px 12px;
  color:#FFF;
  background-color:#343b42;
}
main h1 .icon.customers{
  background-color:#4EA5D3;
}

main h1 .icon.jobmgmt{
  background-color:#1FC0AE;
}

main h1 .title{
  padding:8px 8px 8px 8px;
  color:#333;
  background-color:#ddd;
  font-size:22px;
}
main .page-title{
  margin:0 0 20px 0;
  padding:6px;
  color:#fff;
  background-color:#343b42;
}
main .page-title h1{
  margin:0;
  padding:4px 6px 0 6px;
  font-size:24px;
}
main .page-title .links{
  margin:0;
  padding:0;

}

main .page-title span{
  font-size:22px;
  font-weight:200;
  opacity: 0.8;
}
main .page-sub-title{
  margin:20px 0 0 0;
  padding:6px;
  color:#fff;
  background-color:#343b42;
}
main .page-sub-title h1{
  margin:0 6px;
  padding:4px 0;
  font-size:18px;
  font-weight:400;
}
main h1.path{
  margin:20px 0 0 0;
  padding:6px 12px;
  background-color:#efefef;
}
main h1.path a{
  margin:0;
  padding:0;
  font-size:16px;
  color:#008c9a;
  border-left:0;
}
main h1.path a span{
  color:#999;

}

main .page-sub-title span{
  font-size:16px;
  font-weight:200;
  opacity: 0.8;
}

main .tableBox {
  background:#efefef;
  padding:10px;
  /* border-left: 5px Solid #4EA5D3; */
}

main button.tableExport {
  margin-bottom: 0;
  background-color: #FFF;
  background-image:none;
  border-radius: 0;
  border: 1px solid #ced4da;
  padding: .375rem .75rem;
  font-size: 1rem;
}
main button.tableExport:hover,main button.tableExport:active,main button.tableExport:focus {
  background-color: #FFF !important;
  background-image:none !important;
  border: 1px solid #ced4da !important;
  text-decoration: underline;
  box-shadow: none !important;
}

main div.dataTables_filter input {
  margin-bottom: 0;
  background-color: #FFF;
  border-radius: 0;
  border: 1px solid #ced4da;
  padding: .375rem .75rem;
  font-size: 1rem;
}
.dataTables_wrapper .dataTables_paginate{
  padding-top:0 !important;
}
.dataTables_wrapper .dataTables_paginate span a.paginate_button{
  background:inherit !important;
  padding:0.4em 0.7em !important;
  line-height:1em !important;
}
.dataTables_wrapper .dataTables_paginate span a.paginate_button:hover{
  background:#343b42 !important;
  border-color:#343b42 !important;
  color:#fff !important;
  padding:0.4em 0.7em !important;
  line-height:1em !important;
}
.dataTables_wrapper .dataTables_paginate span a.paginate_button.current:hover{
  color:#fff !important;
}
.dataTables_wrapper .dataTables_paginate a.paginate_button.previous,.dataTables_wrapper .dataTables_paginate a.paginate_button.previous:hover{
  padding:0.4em 0.7em !important;
  line-height:1em !important;
}
.dataTables_wrapper .dataTables_paginate a.paginate_button.next,.dataTables_wrapper .dataTables_paginate a.paginate_button.next:hover{
  padding:0.4em 0.7em !important;
  line-height:1em !important;
}

#jobs tfoot tr th,#notes tfoot tr th {
  padding:2px;
}
.dataTables_info{
  padding-top:0.35em !important;
}
main #people thead tr,main #addresses thead tr{display:none;}
main .chartBox {
  background:#efefef;
  padding:10px;
  /* border-left: 5px Solid #4EA5D3; */
}
main .chartBox div{
  margin:0 auto;
  max-width:70%;
}
main .chartBox p{
  margin:10px 0 0 0;
  font-size:0.8em;
  text-align: center;
}
main .chartBox h1.graph-title{
  margin:0 0 10px 0;
  padding:0;
  color:#333;
}
main .active3 {
  padding-right:0;
}
main .active3 .stats-container{
  background:#efefef;
  padding:10px 10px 0 10px;

}
main .active3 .stats-container div{
  font-size:54px;
  text-align: center;
  color:rgba(75, 192, 192, 1);
}
main .active6 {
  padding-left:0;
}
main .active6 .stats-container{
  background:#efefef;
  padding:10px 10px 0 10px;

}
main .active6 .stats-container div{
  font-size:54px;
  text-align: center;
  color:rgba(255, 150, 86, 1);
}
main .in-active .stats-container{
  background:#efefef;
  padding:10px 10px 0 10px;

}
main .in-active .stats-container div{
  font-size:54px;
  text-align: center;
  color:rgba(255, 60, 90, 1);
}
main .stats-container h1.graph-title{
  margin:0 0 5px 0;
  padding:0;

}
main .stats-container h2{
  margin:0;
  padding:0;
  color:#666;
  font-size:20px;
  font-weight:normal;
}

main a{
  padding:6px 24px 6px 18px;
  line-height:2.2em;
  font-size:14px;
  color:#333;
  border-left:5px Solid #ddd;
}
main a:hover{
  text-decoration:none;
}
main .top-customers .stats-container{
  background:#efefef;
  padding:10px 10px 0 10px;

}


main .top-customers .top-customers-row{
  padding:0 15px 5px 15px;
}
main .top-customers .top-customers-row-cell{
  background:#fcfcfc;
  margin-top:0;
  margin-bottom:0;

}
main .dataTable a{border-radius: 0;}
main .dataTable a:hover, main .dataTable a:active{border-radius: 0;}

table.dataTable thead th {
padding: 8px 10px !important;
}

table.dataTable tbody td {
padding: 4px 10px !important;
}

table.dataTable tr.odd { background-color: rgba(78, 165, 210, 0.08);}
table.dataTable tr.even { background-color: #fff; }

main.customers .subnav a:hover, main.customers .subnav a.active{border-color:#4EA5D3;background-color:#efefef;color:#222;font-weight:700;}

main.jobmgmt .subnav a:hover, main.jobmgmt .subnav a.active{border-color:#1FC0AE;background-color:#efefef;color:#222;font-weight:700;}

button{
  border-radius: 0 !important;
}

main .primary-form{
  margin-bottom:20px;
  padding-top:12px;
  background-color:#f4f4f4;
  border-left:5px Solid #ccc;
}
main .primary-form input{
  margin-bottom:12px;
  background-color:#FFF;
  border-radius: 0;
}

main .primary-form select{
  margin-bottom:12px;
}

main .secondary-form{
  margin-bottom:20px;
  padding-top:12px;
  background-color:#f4f4f4;
  border-left:5px Solid #ccc;
}
main .secondary-form input{
  margin-bottom:12px;
  background-color:#FFF;
  border-radius: 0;
}

main .secondary-form select{
  margin-bottom:12px;
}


main.customers .primary-form{border-color: #4EA5D3;}
main.customers .form-control:focus{box-shadow: 0 0 0 .2rem rgba(78,165,211,.25);}



ul {
  list-style-type: none;
}

.ui-autocomplete{
  z-index:1000;
}
.ui-menu {
  background-color: #f4f4f4;
  max-height: 400px;
  overflow-y: scroll;
  line-height: 1.2 !important;
}
.ui-menu-item i {
  background-color: #495057;
  border-radius: 50%;
  padding: 5px;
  color:#fff;
  font-size:.7em;
}
.ui-menu-item span {
  background-color: rgba(0, 140, 154, 0.2);
  padding:2px 0;

}
.ui-autocomplete-category {
  color: #008c9a;
  font-weight: bold;
  font-size: 0.9em;
  text-transform: uppercase;
  padding: 1em .4em .6em .4em;
  margin: 0;
  line-height: 1.4 !important;
  border-top:1px Solid #DDD;
}
.ui-menu .ui-menu-item-wrapper{
  display:inline-block;
  width:100%;
  color:#495057 !important;
  border:0 !important;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2 !important;
}
.ui-menu .ui-menu-item-wrapper em{
  color: #888;
}
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background: #ddd !important;
  color:#495057 !important;
  border:0 !important;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2 !important;
  text-decoration: none;
}

/* .tableExport{
  border:0 !important;
  padding:0 !important;
  margin:12px 0 0 20px !important;
  background-color:#fff !important;
  background-image:none !important;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color:#333 !important;
  font-weight:600 !important;
}
.tableExport:hover{
  text-decoration:underline !important;
} */


.btn-std{
  padding:8px 14px;
  background-color:#008c9a;
  color:#fff;
  border-radius:0;
  box-shadow: none !important;
  border:0;
}
.btn-std:hover,.btn-std:active{
  background-color:#1d2124 !important;
  color:#fff;
  border-radius:0;
  box-shadow: none !important;
  border:0;
}
.btn-sm-std{
  padding:.25rem .5rem;
  background-color:#008c9a;
  color:#fff;
  border-radius:0;
  box-shadow: none !important;
  border:0;
}
.btn-sm-std:hover,.btn-sm-std:active{
  background-color:#1d2124 !important;
  color:#fff;
  border-radius:0;
  box-shadow: none !important;
  border:0;
}

.btn-ext{
  background-color:rgb(235, 124, 28);
}

.btn-sm-secondary{
  padding:.25rem .5rem;
  background-color:#CCC;
  color:#333;
  border-radius:0;
  box-shadow: none !important;
  border:0;
}
.btn-sm-secondary:hover,.btn-sm-secondary:active{
  background-color:#1d2124 !important;
  color:#fff;
  border-radius:0;
  box-shadow: none !important;
  border:0;
}
.customer-summary{
  /*height:220px;*/
  padding:2px 12px !important;
}
.customer-summary p{
  margin:0 0 5px 0 !important;
  padding:3px !important;
  font-size:16px !important;
  line-height:16px !important;
  text-align: left !important;

}
.customer-summary p.title{
  font-weight:400 !important;
  margin-top:10px !important;
  background-color:#343b42;
  color:#fff;
}
.job-summary{
  height:230px;
  padding:2px 12px !important;
}
.job-summary p{
  margin:0 0 5px 0 !important;
  padding:3px !important;
  font-size:16px !important;
  line-height:16px !important;
  text-align: left !important;

}
.job-summary p.title{
  font-weight:400 !important;
  margin-top:10px !important;
  background-color:#343b42;
  color:#fff;
}
.job-progress{
  background-repeat: no-repeat;
  background-position: center;
  min-width:100%;
  height:200px;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight:600;
  font-size:34px;
  color: #008c9a;
}
.elapsed-days,.order-value{
  height:95px;
}
.elapsed-days .label,.order-value .label{
  margin:0 auto 0 auto;
  max-width:100%;
  text-align: center;
  padding:0;
  font-size:14px;
  font-weight:400;
  color:#333;
}
.elapsed-days .value,.order-value .value{
  margin:0 auto 0 auto;
  max-width:100%;
  text-align: center;
  padding:0;
  font-size:44px;
  font-weight:400;
  color: #008c9a;
  line-height:60px;
}



.elapsed-days span,.order-value span{
  font-size:32px;
}

#modal-iframe{
  width:100%;
  height:200px;
  border:0;
}
.iframe .new-section{
  margin-top:15px;
}
.iframe input, .iframe select{
  margin-bottom:10px;
}
.iframe input:focus, .iframe select:focus{
  -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
  border-color:#ced4da;
}
.iframe .row:first-child{
  padding-left:0;
}
.iframe .row:last-child{
  padding-right:0;
}
.iframe [class*="col-"] {padding:0 6px;}
.iframe [class*="col-"]:first-child{
  padding-left:0;
}
.iframe [class*="col-"]:last-child{
  padding-right:0;
}

iframe[class="invoice-date"]{
  height:100px !important;
}

.ranking-link{
  padding: 0px;
  line-height: 21px;
  font-size: 14px;
  color: #333;
  border-left: none;
}