/* Fonts */
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");
/* Fonts END */

/* ------ GENERAL ------ */

body {
  padding-bottom: 20px;
  font-family: "Roboto", sans-serif;
}

a:hover {
  text-decoration: none;
  opacity: 0.7;
}

.page-title {
  margin-bottom: 20px;
}

/* --- top-bar --- */

#top-bar {
  position: relative;
  height: 50px;
  line-height: 50px;
  font-size: 13px;
  font-family: "Roboto", sans-serif;
  z-index: 1031;
  background-color: #333;
}

.top-links ul {
  margin: 0;
  list-style: none;
  padding: 0px;
}

.top-links ul li {
  float: left;
  position: relative;
  height: 50px;
  /* border-left: 1px solid #EEE; */
}

.top-links li {
  display: block;
  padding: 0 0px;
  font-size: 14px;
  font-weight: 300;
  height: 44px;
  color: #fff;
  letter-spacing: 1.3px;
}

.top-links li > a {
  padding: 0px;
  font-size: 14px;
  font-weight: 300;
  height: 44px;
  color: #fff;
  letter-spacing: 1px;
  text-decoration: none;
}

.home-button-icon,
.home-button-icon a {
  font-size: 23px !important;
}

/* Carousel */
.carousel-caption p {
  font-size: 20px;
  line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
  width: 100%;
}

/* QR code generator */
#qrCode {
  margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
  /* Hide captions */
  .carousel-caption {
    display: none;
  }
}

#page-wrap {
  margin: 50px;
}

p {
  margin: 20px 0;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  body {
    padding: 0;
    margin: 0;
    /* width: 320px;*/
  }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  body {
    /* width: 495px; */
  }
}

.submit-comment {
  margin-top: 7px;
  margin-bottom: 7px;
}

/* ------ HELPERS ------ */
.allmargin {
  margin: 50px !important;
}

.leftmargin {
  margin-left: 50px !important;
}

.rightmargin {
  margin-right: 50px !important;
}

.topmargin {
  margin-top: 50px !important;
}

.bottommargin {
  margin-bottom: 50px !important;
}

.clear-bottommargin {
  margin-bottom: -50px !important;
}

.allmargin-sm {
  margin: 30px !important;
}

.leftmargin-sm {
  margin-left: 30px !important;
}

.rightmargin-sm {
  margin-right: 30px !important;
}

.topmargin-sm {
  margin-top: 30px !important;
}

.bottommargin-sm {
  margin-bottom: 30px !important;
}

.clear-bottommargin-sm {
  margin-bottom: -30px !important;
}

.allmargin-lg {
  margin: 80px !important;
}

.leftmargin-lg {
  margin-left: 80px !important;
}

.rightmargin-lg {
  margin-right: 80px !important;
}

.topmargin-lg {
  margin-top: 80px !important;
}

.bottommargin-lg {
  margin-bottom: 80px !important;
}

.clear-bottommargin-lg {
  margin-bottom: -80px !important;
}

.nomargin {
  margin: 0 !important;
}

.noleftmargin {
  margin-left: 0 !important;
}

.norightmargin {
  margin-right: 0 !important;
}

.notopmargin {
  margin-top: 0 !important;
}

.nobottommargin {
  margin-bottom: 0 !important;
}

.header-stick {
  margin-top: -50px !important;
}

.content-wrap .header-stick {
  margin-top: -80px !important;
}

.footer-stick {
  margin-bottom: -50px !important;
}

.content-wrap .footer-stick {
  margin-bottom: -80px !important;
}

.noborder {
  border: none !important;
}

.noleftborder {
  border-left: none !important;
}

.norightborder {
  border-right: none !important;
}

.notopborder {
  border-top: none !important;
}

.nobottomborder {
  border-bottom: none !important;
}

.noradius {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -ms-border-radius: 0 !important;
  -o-border-radius: 0 !important;
  border-radius: 0 !important;
}

.col-padding {
  padding: 60px;
}

.nopadding {
  padding: 0 !important;
}

.noleftpadding {
  padding-left: 0 !important;
}

.norightpadding {
  padding-right: 0 !important;
}

.notoppadding {
  padding-top: 0 !important;
}

.nobottompadding {
  padding-bottom: 0 !important;
}

.noabsolute {
  position: relative !important;
}

.noshadow {
  box-shadow: none !important;
}

.hidden {
  display: none !important;
}

.nothidden {
  display: block !important;
}

@media only screen and (max-width: 991px),
  (min-device-width: 768px) and (max-device-width: 1024px) {
  table#assignments-list td:nth-of-type(1):before {
    content: "Assignment";
  }

  table#assignments-list td:nth-of-type(2):before {
    content: "Customer Name";
  }

  table#assignments-list td:nth-of-type(3):before {
    content: "Project Code Description";
  }

  table#assignments-list td:nth-of-type(4):before {
    content: "External Document Number";
  }
}

.dropzone.attachments-dropzone {
  min-height: unset;
}

.dropzone.attachments-dropzone .dz-default.dz-message {
  margin: 0;
}

.week-view-table input {
  min-width: 90px;
}

.week-view-table .comments {
  min-width: 150px;
}
.time-input-group {
  display: flex;
  flex-direction: column;
}

.time-input-group input {
  margin: 0.5rem 0;
}

.time-input-group > div > label {
  min-width: 100px;
}

.time-input-group > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.time-input-labels {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 0.6rem;
}

.standard-timesheet input[type="number"].update-quantity {
  max-width: 100px;
}

.input-validation-error {
  --bs-border-opacity: 1;
  border: 1px solid rgba(var(--bs-danger-rgb), var(--bs-border-opacity));
}