html, body {
	background-color: #f0f0f0 !important;
}


/* DivTable.com */
.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}


.text-ellipsis {
  white-space: nowrap !important;
  max-width: 60px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bg-body {
    background-color: #f0f0f0 !important;
}

.border-danger {
    color: #a50000 !important;
}

.text-danger {
    color: #a50000 !important;
}

.bg-danger {
    background-color: #a50000 !important;
}

.bg-warning-custom {
  background-color: #FFCD70 !important;
}

.bg-primary-custom {
  background-color: #82C2FF !important;
}

.btn-outline-danger {
    color: #a50000 !important;
}

.btn-outline-danger:hover {
    color: #ffffff !important;
    background-color: #a50000 !important;
}

.text-danger:hover {
    color: #fff !important;
}

.btn-danger {
    background-color: #a50000 !important;
}


@media (max-width: 400px) {
    .table-responsive-md {
        font-size: small !important;
    }
}

  .form-control-xs {
    height: calc(1em + .375rem + 2px) !important;
    padding: .125rem .25rem !important;
    font-size: .75rem !important;
    line-height: 1.5;
    border-radius: .2rem;
}

.container .dropdown .dropdown-menu a:hover {
  color: #fff;
  background-color: #A20000 !important;
}



#nav-tabs-custom [aria-expanded="true"]{
  background-color: #7F7F7F !important;
  color: #FFF !important;
}

/*#nav-tabs [aria-expanded="true"].active{
  color: #E6E6FA !important;
}*/

#nav-tabs-custom [aria-expanded="false"]{
  background-color: #E5E5E5 !important;
  background:#E5E5E5 !important;
  color: #1A1A1A !important;
}

.linkdisabled {
   pointer-events: none;
   cursor: not-allowed;
   display:inline-block;
   opacity: 0.4;
}

.--text-sm {
  font-size: small;
}

.--text-lg {
  font-size: large;
}

.--text-mg {
  font-size:medium;
}

.--text-xl {
  font-size: x-large;
}

.--text-xxl {
  font-size: xx-large;
}

li.custom-install {
  display: list-item;
  margin-bottom: 2px;
  padding: 6px 10px
}

.list-group-custom .list-group-item {
  background-color:  #fff;
  border-bottom: 1px solid #FF0000;
  margin-left: 30px;
}

@media screen and (max-width: 576px) and (min-width: 0px) {
  .desktop-only {
       display: none;
   }
	h4.card-title.data-clock{
		font-size: 1.3rem !important;
	}
}


@media screen and (min-width: 576px)  {
  .mobile-only {
       display: none;
   }
	h4.card-title.data-clock{
		font-size: 2.4rem !important;
	}
}


.btn-transparent {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}


/*@media(min-width:767px){*/

td {
  word-break: break-all;
}

/*
.pagination > li > a {
    background-color: #ddd !important;
}

.pagination > .active > a {
    background-color: #a50000 !important;
    color: #FFFFFF !important;
    border-color: #a50000 !important;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    z-index: 3;
    color: #FFFFFF !important;
    background-color: #4D4D4D !important;
    border-color: #4D4D4D !important;
}
*/

/*ul.pagination li a:hover:not(.active) {background-color: #ddd;}*/


.disabled {
    pointer-events: none;
    cursor: default;
}

.btn-custom-login {
  background-color: #a50000;
  border-color: #000;
  color: #FFFFFF;
  font-weight: 600;
}

.navbar-brand {
  padding: 0;
  width: 155px;
}


#title {
    font-size: 1.8rem;
    font-weight: 800;
    text-transform: capitalize;
}

#small {
    font-size: 0.9rem;
    font-weight: 300;
}


.navbar-toggler{
    width: 47px;
    height: 34px;
    background-color: #E5E5E5 !important;
    border:none;
}

.navbar-toggler .line{
    width: 100%;
    float: left;
    height: 2px;
    background-color: #4D4D4D !important;
    margin-bottom: 5px;
}

.navbar-toggler:hover {
    background-color: #BFBFBF !important;
}

#bg-custom {
    /* background-color: #A20000 !important; */
    background-color: #4D4D4D !important;
}

.bg-light {
    background-color:#E4E4E4 !important;
}


.bg-custom {
    /* background-color: #A20000 !important; */
    background-color: #4D4D4D !important;
}

/* change the background color */
.navbar-custom {
    /* background-color: #A20000 !important; */
    background-color: #4D4D4D !important;
    text-transform: uppercase !important;
    font-size: 1.1rem !important;
}

/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: #FFFFFF !important;
}

/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: #FFFFFF !important;
}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}


@media (min-width: 992px){
    .navbar li {
        margin-right: 0.3em;
        margin-left: 0.3em;
    }
}

#logo-login{
  vertical-align: middle !important;
  color: #4D4D4D !important;
}

body {
    counter-reset: step;
}

#progressbar li {
  list-style-type: none;
  width: 25%;
  float: left;
  position: relative;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
}


@media screen and (max-width: 400px) {
    #progressbar li {
        font-size: 0.65rem;
    }

}


#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 60px;
  height: 60px;
  line-height: 56px;
  display: block;
  border-radius: 50%;
  margin: 0 auto 10px auto;
  border: 4px solid #ddd;
  text-align: center;
  background-color: white;
  z-index: 99;
  position: relative;
}


/*progressbar connectors*/
#progressbar li:after {
  content: '';
  width: 100%;
  height: 4px;
  background-color: #ddd;
  position: absolute;
  left: -50%;
  top: 30px;
  z-index: 1; /*put it behind the numbers*/
}

#progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none;
}

#progressbar li.active {
  color: green;
}
#progressbar li.danger {
  border-color: red;
  color: red;
}
#progressbar li.error {
  border-color: red;
  color: red;
}

/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before{
  border-color: green;
}

#progressbar li.error:before{
  border-color: red;
}

#progressbar li.active + li:after {
  background-color: green;
}


/*
#progressbar li.active:before,  #progressbar li.active:after{
    background: #27AE60;
    color: white;
}
*/

.modal-large{width: 100%}
.callout.boxcount {
    border-color: dodgerblue;
    background: #eee;
}

.disbaled-div {
  pointer-events:none;
}

#po_list tooltip:not(:first-child){
    margin-left: -8px !important;
}

#progressbar li.current:before {
    border-color: dodgerblue;
    color: #1F8BF6;
    background-color: #eee;
    font-weight: 800;
}

/*
*, *:after, *:before {
  box-sizing: border-box;
}
*/

h1 {
  margin-bottom: 1.5em;
}

h4 {
  font-size: 1.6rem;
  font-weight: 600;

}

.progress {
  margin-bottom: 3em;
}
a {
  color: $active;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}



.table-responsive {
    display: table;
}

a.item,i{line-height:32px}a.item{padding-left:40px;width:auto!important}


#sidebar.collapsing.width {
    height: auto;
    width: 0;
    overflow: hidden;
    transition: width .35s ease;
}

.fa-1-1x{
    font-size:1.1em;
}

.fa-1-2x{
    font-size:1.2em;
}


.fa-1-5x{
    font-size:1.5em;
}


.fa-1-8x{
    font-size:1.8em;
}