/*---------------------------------------------------------------
  BOILERPLATE CSS TO FIX BUGS AND IMPROVE UX
-----------------------------------------------------------------*/

/*FIX RESPONSIVE PERFORMANCE OF FORMS*/
/*This fixes a bug where forms are very narrow on mobile or tablet*/
.kn-form-col.is-one-half {
  width: 95%;
}

/*PREVENT VERTICAL SCROLL BAR IN MODAL POPUP VIEWS*/
/*This fixes a bug where some views (eg a details view) appear very short with a vertical scrollbar inside modal popups*/
.kn-page-modal .kn-view, .kn-page-modal .kn-view .kn-details-group {
  overflow: visible !important;
}

/*MAKE STICKY HEADER WHITE BACKGROUND ON TABLES*/
/*This ensures that sticky headers on grid (table) views have a white background*/
/* .kn-table tr th {
  background-color: #FFFFFF !important;
} */

/*PUT ALL FIELD INSTRUCTIONS IN ITALICS*/
/*This is a UX improvement making forms look a little nicer*/
form .kn-instructions {
  font-style: italic;
}

/* PENCIL ICON ON HOVER OF INLINE EDITABLE TABLE CELL */
/* This is a nice UX improvement making it easier for users to identify at a glance which table (grid) cells can be inline edited*/
.kn-table.cell-editable td.cell-edit:hover::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-edit-2'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E");
  margin-left: 6px;
}

/*---------------------------------------------------------------
  end BOILERPLATE CSS TO FIX BUGS AND IMPROVE UX
-----------------------------------------------------------------*/

/*General styling*/
body {
  letter-spacing:  0.015em;
}

/**** Main menu & app header ****/

/* Letter spacing */
.knHeader {
  letter-spacing:  0.05em;
}

.knHeader .knHeader__mobile-nav {
  letter-spacing:  0.015em;
}

/*Logo image sizing - more specific sizing & max-width for all screen sizes */
.knHeader .knHeader__logo--custom img {
  width: 250px;
  max-width: 80vw;
}

/* Make the mobile hamburger menu button on the left instead of the right */
.knHeader .knHeader__content {
  display: flex;
  align-items: center;
  flex-direction: row-reverse; /*So the hamburger is on the left*/
  justify-content: flex-end;
}

.knHeader .knHeader__mobile-controls {
  margin-left: 0 !important;
  padding-right: 5px
}

/* Make the hamburger button consistent size with icon change to avoid slight shift of logo position on open */
.knHeader .knHeader__mobile-control .knHeader_-mobile-nav-toggle {
  width: 29px;
}

/*Info bar (with breadcrumbs etc)*/
.kn-info-bar {
  background-color:  #EAE6F5;
}

/*Submit button*/
.kn-button.is-primary {
  font-weight:  500;
  letter-spacing:  0.035em;
}


/*FIX RESPONSIVE PERFORMANCE OF FORMS*/
.kn-form-col.is-one-half {
  width: 95%;
}

/*Put all field instructions in italics*/
form .kn-instructions {
  font-style: italic;
}

/*Search view inputs - field labels above fields (nicer styling)*/
.kn-search-filter.control .kn-label{
  display: block;
}

/*Search view button - more space between the button and the last search field input*/
.kn-search_form .kn-submit {
  margin-top:  25px;
}

/*Table view connection links - no underline*/
.kn-table td a, .kn-detail-body a {
  text-decoration:  none;
}

/*Fix scroll bars appears on report views and tables in modal popups*/
.kn-modal .kn-report, 
.kn-modal .kn-table {
  overflow:  visible !important;
}

/*HIDE FORM ELEMENT WITHOUT MAKING CONTENT INACCESSIBLE (used by some JS code)*/
.hide-off-screen {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/*CONSTRAINING WIDTH OF SOME PAGES - USED BY JS CODE*/
.constrainedWidth {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left:  32px;
  padding-right: 32px;
}

@media screen and (max-width: 981px){
  .constrainedWidth {
    padding: 0 12px;
  }
}

/*CSS CLASSES USED BY HOME PAGE TEXT FORMULAS*/
.no-bottom-margin {
  margin-bottom:  0px !important;
}
.centered-text {
  text-align:  center;
}

/*WIDEN MODAL POPUPS*/
@media screen and (min-width: 769px) {
  .kn-modal {
    width: 1000px;
    max-width:  95%;
  }
}

/*Invoicing page - enrolment summary pivot table - tweak styling*/
/*Scene_268 invoicing*/

#view_683 .kn-description.is-6 {/*Description of the 1 and only pivot table on the page*/
  margin-bottom: 5px;
}

#view_683 table {
  max-width: 800px;
}

#view_683 #kn-report-view_683-1 tbody tr td{/*All columns*/
  text-align: left !important;
}
/*End Invoicing page - enrolment summary pivot table - tweak styling*/