/********** Google Font **********/
body {
  font-family: 'Roboto', sans-serif;
}

/********** Material Icon sizing **********/

.material-icons.md-18 {
  font-size: 18px;
}
.material-icons.md-24 {
  font-size: 24px;
}
.material-icons.md-36 {
  font-size: 36px;
}
.material-icons.md-48 {
  font-size: 48px;
}

/********** Utility Classes **********/

.nowrap {
  white-space: nowrap;
}

.disable-select {
  -webkit-touch-callout: none; /* iOS */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

.cursor-pointer {
  cursor: pointer;
}

/********** Background and Layout **********/

#scan-basic-row {
  background-color: #ddd;
}

/********** USPS and UPS colors **********/

.ups-color {
  /* color: #351c14; */
  color: #503730;
}

.usps-color {
  /* color: #336; */
  color: #4f4f8b;
}

.ups-background {
  /* background: #36221c; */
  background: #503730;
}

.usps-background {
  /* background: #336; */
  background: rgb(79, 79, 139);
}

/********** Header **********/

#header-row {
  height: 6rem;
}

#header-row > .row {
  height: 100%;
}

#header-img-wrapper > a > img {
  height: 4rem;
}

#header-link-wrapper:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

/********** Tracking Code Input **********/

#code-search-group .btn:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

#code-search-group .btn {
  background-color: #fff;
}

#code-search-group input:focus {
  outline: none;
  box-shadow: none;
  border-color: #6c757d;
}

#code-search-group button:focus {
  outline: 0;
}

/********** Progress Bar **********/

#delivery-progress-bar {
  -webkit-transition: width 1.5s ease-in-out 0s; /* Safari */
  transition: width 1.5s ease-in-out 0s;
}

#progress-wrapper {
  position: relative;
}

#progress-wrapper > .progress {
  height: 0.5rem;
}

#progress-icon {
  position: absolute;
  top: calc(calc(0.5rem - 32px) / 2);
  left: -4px;
  -webkit-transition: left 1.5s ease-in-out 0s; /* Safari */
  transition: left 1.5s ease-in-out 0s;
}

#progress-icon > i {
  position: relative;
  z-index: 2;
}

#progress-icon-background {
  position: absolute;
  background-color: white;
  height: 30px;
  width: 30px;
  top: 1px;
  left: 1px;
  border-radius: 20px;
  z-index: 1;
}

/********** Status Text **********/

.scan-status-text-large {
  font-size: 1.5em;
  font-weight: 500;
}

/********** Shipment Navigation **********/

#scan-details-card .card-header {
  background-color: rgba(0, 0, 0, 0.125);
}

#scan-nav-pills a.active {
  color: #fff;
  background-color: #6c757d;
}

#scan-nav-pills a {
  color: #6c757d;
}

#scan-nav-pills a.active:hover {
  color: #fff;
}

#scan-nav-pills a:hover {
  color: #3e4449;
}

/********** Scan Tables **********/

#scan-overview-table thead,
#scan-detail-table thead {
  border-bottom: 1px solid #ddd;
}

.icon-table-detail {
  position: relative;
}

.table-vertical-bar {
  position: absolute;
  width: 2px;
  height: calc(100% + 5px);
  top: 20px;
  left: 22px;
  z-index: 0;
}

.table-icon {
  z-index: 2;
  position: relative;
}

.table-icon-background {
  position: absolute;
  width: 17.5px;
  height: 17.5px;
  background: #ffffff;
  top: 14px;
  left: 14px;
  z-index: 1;
  border-radius: 10px;
}

#scan-detail-table {
  overflow-x: auto;
}

/********** Scan Map **********/

#scan-map-table {
  font-size: 0.85rem;
}

/********** Footer **********/

html,
body,
#main-wrapper {
  height: 100%;
  margin: 0;
}

#content-wrapper {
  min-height: 100%;
  margin-bottom: -4rem;
}

.footer,
.footer-push {
  height: 4rem;
}

.footer {
  width: 100%;
  text-align: center;
}

.footer-text {
  font-size: 0.8rem;
  line-height: 4rem;
}

/********** Config Window **********/

#config-window {
  position: fixed;
  z-index: 999;
  /* min-width: 300px; */
  box-sizing: border-box;
}

#config-window .form-control:focus {
  border-color: #6c757d;
  box-shadow: 0 0 0 0.2rem rgba(9, 5, 6, 0.25);
}

#config-window .card-header {
  background-color: #dddddd;
}

#config-window .card-header:hover {
  cursor: move;
}

/* #config-header-footer-col {
  border-right: 1px solid #dee2e6;
} */

/* 768px */
@media only screen and (min-width: 768px) {
  #config-header-footer-col {
    border-right: 1px solid #dee2e6;
  }
}