/* .gig-admin-coming-soon {
  display: inline-block;
  background-image: url("https://i.imgsonic.com/?src=https://pac-hs.co.uk/wp-content/uploads/2016/11/Red-Stripes-Wrapture-Printed-Tissue.jpg&w=340");
  border: 2px solid red !important;
  padding: 5px 3px;
  margin: -5px -3px;
  border-radius: 0.25rem;
  cursor: default !important;
  opacity: 0.5;
}
.gig-admin-coming-soon--full-opacity {
  opacity: 1;
} */

/* ////////////////////////////// RESET /////////////////////////////////// */

html, body {
  height: auto !important; /* needed for elems to stay sticky after scrolling */
}

* {
  outline: none !important;
}

body {
  padding-bottom: calc(60px + 10px); /* same as footer height + some margin */
  background-color: #eaeaea;
}

/* ///// PATCH BOOTSTRAP ///// */
.container-fluid {
  max-width: 1400px;
}

.btn.focus, .btn:focus {
  box-shadow: none !important;
}
.badge {
  font-size: 90%;
  font-weight: normal;
}

.text-light {
  color: #ccc !important;
}
.btn {
  cursor: pointer !important;
}
.btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
.btn-light.disabled,
.btn-light.disabled:hover {
  background-color: transparent !important;
  border: 1px solid #e0dfdf !important;

  opacity: 0.4 !important;
}
.btn-light {
  background-color: #e6e6e6 !important;
  border: 1px solid #e0dfdf !important;
}
.btn-light:hover {
  background-color: #f6f6f6 !important;
  border: 1px solid #e6e6e6 !important;
}
/* ////////////////////////////// TYPOGRAPHY /////////////////////////////////// */

small,
small * {
  font-size: 97.5% !important;
}

big,
big * {
  font-size: 1.1em !important;
}

mark {
  background-color: #f6fafe;
}

.gig-admin-section-title {
  font-size: 25px !important;
  color: #111 !important;
}

/* ////////////////////////////// LAYOUT ELEMS /////////////////////////////////// */

/* main header w/ navbar, etc. */
.gig-admin-site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2147483647 !important;

  height: 55px;

  background-color: #232e3a;
}
.gig-admin-site-header .gig-admin-navbar {

}

/* main page header, contains page heading, search, etc. */
.gig-admin-page-header {
  position: -webkit-sticky;
  position: sticky;
  top: 55px; /* same as gig-admin-site-header */
  z-index: 2147483646 !important;

  width: 100%;

  background-color: #f2f2f3;
  border-bottom: 1px solid #c3c3c3;
}

/* sticky panel on detail pages */
.gig-admin-sticky-panel-header {
  position: -webkit-sticky;
  position: sticky;
  top: 55px; /* same as gig-admin-site-header */
  z-index: 2147483646 !important;

    background-color: #f7f7f7;
}

/* header for main panel on detail pages */
.gig-admin-main-panel-header {
  width: auto !important;
  padding: 0.45rem !important;
  background-color: #f7f7f7 !important;
  margin: -1.5rem !important;
  margin-bottom: 1.25rem !important;
}

/* container for page content */
.gig-admin-page-content {
  z-index: 0 !important;
}

/* footer */
.gig-admin-footer {
  position: fixed;
  bottom: 0;
  z-index: 2147483647 !important;

  width: 100%;
  height: 50px;
}

/* ////////////////////////////// NAV /////////////////////////////////// */
.gig-admin-navbar * {
  color: #fff;
  text-decoration: none !important;
}
.gig-admin-navbar .dropdown-menu,
.gig-admin-navbar .dropdown-menu * {
  color: #111;
}

.gig-admin-navbar__logo {
  height: 30px;
  width: auto;
}

.gig-admin-navbar__button {
  margin-left: 2px; /* to cover vertical separator when selected */
  margin-right: 2px;
  padding: 0.075rem 1rem;
  vertical-align: middle !important;

  height: 40px;

  font-size: 1rem;
  line-height: 37px;

  outline: none !important;
}

.gig-admin-navbar__button.btn-secondary {
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0); /* keep invisible border so that the UI doesn't jump */
}
.gig-admin-navbar__button.btn-secondary:hover,
.gig-admin-navbar__button.btn-secondary.gig-admin-navbar__button--selected {
  background-color: #3d4d5f;
}

.gig-admin-navbar .dropdown-menu {
  transform: translateX(-1.35em);

  background-color: #ececec;
  -webkit-box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 15px 5px rgba(0,0,0,0.15);
}

.gig-admin-navbar__profile-picture {
  width: 30px;
  height: 30px;
  line-height: 28px;
  vertical-align: middle;
}

.gig-admin-navbar__notifications-panel {
  width: 600px;
}
.gig-admin-navbar__notifications-panel,
.gig-admin-navbar__notifications-panel * {
  color: #111;
}

/* ////////////////////////////////// SHARED ELEMS ////////////////////////////////////// */

/* file upload form */
.gig-admin-file-upload-form {
  height: 200px;
}
.gig-admin-file-upload-form__form {
  position:relative !important;
}
.gig-admin-file-upload-form__form input {
  border-radius: 0.25rem;
  outline: 2px dashed #92b0b3 !important;
  outline-offset: -10px;
  -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
  transition: outline-offset .15s ease-in-out, background-color .15s linear;
  padding: 100px 0px 90px 35%;
  text-align: center !important;
  margin: 0;
  width: 100% !important;
}
.gig-admin-file-upload-form__form input:focus {     outline: 2px dashed #92b0b3;  outline-offset: -10px;
  -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
  transition: outline-offset .15s ease-in-out, background-color .15s linear; border:1px solid #92b0b3;
}

.gig-admin-file-upload-form__form:before {  pointer-events: none;
  position: absolute;
  top: 20px;
  left: 0;
  width: 50px;
  right: 0;
  height: 50px;
  content: "";
  background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png);
  display: block;
  margin: 0 auto;
  background-size: 100%;
  background-repeat: no-repeat;
}
.gig-admin-file-upload-form__form:after {
  position: absolute;
  bottom: 20px;
  left: 0;  pointer-events: none;
  width: 100%;
  right: 0;
  /* height: 50px; */
  content: "(or drag it here)";
  display: block;
  margin: 0 auto;
  color: #999;
  text-align: center;
}
.gig-admin-file-upload-form .gig-admin-file-upload-form__upload-preview {
  height: 200px;
  /* line-height: 200px; */

  background-color: #e2e2e2;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
}

.gig-admin-file-upload-form .gig-admin-file-upload-form__upload-preview--busy {
  background-image: url(/images/shared/animated-stripes.gif);
  background-size: 150px 150px;
}

.gig-admin-file-upload-form__upload-preview-box,
.gig-admin-file-upload-form__upload-preview-box * {
  vertical-align: middle;
}

.gig-admin-file-upload-form__upload-preview-icon-container {
  display: inline-block;
  width: 2.5em;
  height: auto;
}

.gig-admin-file-upload-form__upload-preview-filename {
  overflow: hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  max-width: 300px;
  display:inline-block;
}

/* ////////////////////////////// BOND APPLICATION PAGE /////////////////////////////////// */
.gig-admin-bond-page-panel {
  padding-top: 60px; /* same as gig-admin-bond-page-panel__header height */
}
.gig-admin-bond-page-panel__header {
  position: fixed;
  top: 162px;
  z-index: 2147483645;

  width: 100%;
  height: 60px;

  background-color: #eaeaea; /* same as page background, important so that things are not visible underneat */
}
.gig-admin-bond-page-panel__header .gig-admin-bond-page-panel__header-title,
.gig-admin-bond-page-panel__header .gig-admin-bond-page-panel__header-title * {
  line-height: 60px !important;
  vertical-align: middle !important;
}
.gig-admin-bond-page-panel__header .gig-admin-bond-page-panel__header-title {
  margin: 0;
  padding: 0;
}
.gig-admin-bond-page-panel__header .gig-admin-bond-page-panel__header-title .gig-admin-bond-page-panel__header-title-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 60px;
  vertical-align: middle;

  background-image: url(/images/shared/spinner.gif);
  background-size: cover;
}

.gig-admin-application-page__pdf-preview {
  position: fixed;
  top: calc(60px + 1rem);
  z-index: 90;

  width: calc(100% / 12 * 5);
  max-width: calc(1400px / 12 * 5 - 2rem); /* NOTE: 1400px = max width of Bootstrap container-fluid elem */

  /* width: calc((100vh - 255px - 50px) / 11 * 8.5);

  height: calc(100vh - 255px - 50px); */

  /* border: 2px solid red;   */
}
.gig-admin-bond-form-panel__header {
  position: fixed;
  top: 210px;
  z-index: 999;

  width: 100%;
  height: 55px;
  line-height: 55px;
  vertical-align: middle;
  border: 1px solid red;
  background-color: #fff;
}

/* for grouped PrimeReact multiselects, indent items */
.sbm-grouped-multiselect {
  border: 1px solid red;
}

.sbm-grouped-multiselect.p-multiselect-panel .p-multiselect-items .p-multiselect-item {
  padding-left: 2rem !important;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
  padding-left: 0.857rem !important;

  cursor: pointer !important;
}

/* add slash to Font Awesome icons */
.fontawesome-slashed:after {

}

#portalModal {
  position: relative;
  z-index: 2147483646 !important;
}

.sbm-modal {
    position: fixed;
    top: 55px;
    left: 0;
    bottom: 45px;
}

.sbm-modal .modal-body {
  height: calc(100% - 60px);
}

.sbm-modal .modal-header {
  cursor: move;
}

.sbm-bond-file-modal {
  position: fixed;
  top: 0;
  left: calc(70vh / 2);
  z-index: 1000;

  max-width: none !important;
  max-height: none !important;
}
.sbm-bond-file-modal--maximized {
  left: 0;
}
.sbm-bond-file-modal .modal-content {
  -webkit-box-shadow: 0px 0px 25px 6px rgba(0,0,0,0.23);
  box-shadow: 0px 0px 25px 6px rgba(0,0,0,0.23);
}
.sbm-bond-file-modal .modal-body {
  padding: 0;
}
.sbm-bond-file-modal iframe {
  border: 0 !important;
}

.sbm-bond-file-modal,
.sbm-bond-file-modal .modal-content,
.sbm-bond-file-modal .modal-content iframe {
  height: calc(70vh + 120px);
  width: calc(70vh / 1.25);
}

.sbm-bond-file-modal--maximized,
.sbm-bond-file-modal--maximized .modal-content,
.sbm-bond-file-modal--maximized .modal-content iframe {
  width: calc(100vw - 50px);
  height: calc(100vh - 150px);
}

.sbm-order-datagrid-row .badge.badge-light {
  background-color: #dcdcdc;
}

.sbm-bond__include-bond-checkbox {
  font-size: 12px;
  line-height: 1.75em;
  margin-top: 0.5em;
}

.sbm-bond__include-bond-checkbox .form-check-label {
  font-weight: normal !important;
}

.sbm-bond-datagrid-row .text-primary {
  max-width: 100%;
  display: inline-block;
  line-height: 1;
}

.sbm-bond-datagrid-row .badge-light {
  background-color: #e2e2e2;
}