/*
    TODO: 
    - integrate mdl list (remove styles from this file)
*/

/**
 * mdl-list
 * NOTE: These styles aren't in our material.min.css, we may need to update.
 * Copying them in for now...
*/

.mdl-list {
  display: block;
  padding: 8px 0;
  list-style: none; }

.mdl-list__item {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em;
  line-height: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 48px;
  box-sizing: border-box;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 16px;
  cursor: default;
  color: rgba(0,0,0, 0.87);
  overflow: hidden; }
  .mdl-list__item .mdl-list__item-primary-content {
    -webkit-order: 0;
        -ms-flex-order: 0;
            order: 0;
    -webkit-flex-grow: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
    text-decoration: none;
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center; }
    .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-icon {
      margin-right: 32px; }
    .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-avatar {
      margin-right: 16px; }
  .mdl-list__item .mdl-list__item-secondary-content {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column;
        -ms-flex-flow: column;
            flex-flow: column;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
    margin-left: 16px; }
    .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-action label {
      display: inline; }
    .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-secondary-info {
      font-size: 12px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0;
      color: rgba(0,0,0, 0.54); }
    .mdl-list__item .mdl-list__item-secondary-content .mdl-list__item-sub-header {
      padding: 0 0 0 16px; }

.mdl-list__item-icon,
.mdl-list__item-icon.material-icons {
  height: 24px;
  width: 24px;
  font-size: 24px;
  box-sizing: border-box;
  color: rgb(117,117,117); }

.mdl-list__item-avatar,
.mdl-list__item-avatar.material-icons {
  height: 40px;
  width: 40px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: rgb(117,117,117);
  font-size: 40px;
  color: white; }

.mdl-list__item--two-line {
  height: 72px; }
  .mdl-list__item--two-line .mdl-list__item-primary-content {
    height: 36px;
    line-height: 20px;
    display: block; }
    .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-avatar {
      float: left; }
    .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-icon {
      float: left;
      margin-top: 6px; }
    .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-secondary-content {
      height: 36px; }
    .mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-sub-title {
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 0;
      line-height: 18px;
      color: rgba(0,0,0, 0.54);
      display: block;
      padding: 0; }

.mdl-list__item--three-line {
  height: 88px; }
  .mdl-list__item--three-line .mdl-list__item-primary-content {
    height: 52px;
    line-height: 20px;
    display: block; }
    .mdl-list__item--three-line .mdl-list__item-primary-content .mdl-list__item-avatar,
    .mdl-list__item--three-line .mdl-list__item-primary-content .mdl-list__item-icon {
      float: left; }
  .mdl-list__item--three-line .mdl-list__item-secondary-content {
    height: 52px; }
  .mdl-list__item--three-line .mdl-list__item-text-body {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
    line-height: 18px;
    height: 52px;
    color: rgba(0,0,0, 0.54);
    display: block;
    padding: 0; }


/* -------------------------------------------------------------------------
   Search Box Component

   Includes a text input with a search icon, a clear button, and the auto 
   complete list.
   ------------------------------------------------------------------------- */

.searchbox {
    display: flex;
    position: relative;
    margin: 20px auto;
    box-sizing: border-box; 
    max-width: 600px;
}

/* Search Box - search form */

.searchbox__form {
    flex: 1 1 auto;
    padding: 0;
    box-sizing: border-box; 
    width: 100%;
    border-radius: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    transition: all 0.2s ease;
}

/* Search Box - search icon */

.searchbox__form .searchbox__search-icon {
    position: absolute;
    top: 13px;
    left: 24px;
    z-index: 2;
    color: #8393A7;
}

/* Search Box - clear button */

.searchbox__form .searchbox__clear-button {
    position: absolute;
    top: 5px;
    right: 16px;
    color: white;
    cursor:pointer !important;
}

/* Search Box - input */

.searchbox__form .searchbox__input {
    box-sizing: border-box;
    padding: 4px 72px;
    height: 48px;
    max-width: none;
    font-size: 16px;
    color: #212121;
    font-family: 'Lato', sans-serif; /* look into removing this */
    font-weight: 400;
    outline: none;    
    border-color: transparent;
    transition: border 0.1s ease-out;
}

.searchbox__form .searchbox__input::-ms-clear {
    display: none;
}

.searchbox__form .searchbox__input::-webkit-input-placeholder {
   color: rgba(0,0,0, 0.54);
}

.searchbox__form .searchbox__input::-moz-placeholder {
   color: rgba(0,0,0, 0.54);  
}

.searchbox__form .searchbox__input:-ms-input-placeholder {  
   color: rgba(0,0,0, 0.54);  
}

/**
 * Search Box - search button 
 * 1. - the 1px border
 * 2., 3. & 4. - the "raised" mdl button styles
 */

.searchbox__search-button {
    padding: 0 16px;
    height: 48px;
    box-shadow: 0 0 0 1px #6D9324, /* 1. */
                0 2px 2px 0 rgba(0,0,0,.14), /* 2. */
                0 3px 1px -2px rgba(0,0,0,.2), /* 3. */
                0 1px 5px 0 rgba(0,0,0,.12); /* 4 */
    background-color: #6D9324;
    border-radius: 0 2px 2px 0;
    font-size: 16px;
    color: #FFF;    
}


/* -------------------------------------------------------------------------
   Search Box Modifiers
   ------------------------------------------------------------------------- */

/** 
 * Search Box: is-opened
 * Alters the search box drop shadow to give it more depth. 
 * NOTE: the same box shadow is used on the auto-complete container. 
 */
.searchbox--is-opened .searchbox__form.is-dirty {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 
                0 3px 14px 2px rgba(0, 0, 0, 0.12), 
                0 5px 5px -3px rgba(0, 0, 0, 0.4);
}

/** 
 * Search Box: border
 * Add a 1 pixel border the container to give the input a visible 
 * clickable area. 
 */
.searchbox--border .searchbox__form {
    box-shadow: 0 0 0 1px #8393A7;
}

/** 
 * Search Box: inverse
 * Change colors to be useable on dark backgrounds (e.g. the header).
 */
.searchbox--inverse {
}

.searchbox--inverse .searchbox__search-icon {
    color: #FFF;
}

.searchbox--inverse .is-dirty ~ .searchbox__search-icon {
    color: #8393A7;
}

.searchbox--inverse .searchbox__clear-icon {
    color: #FFF;
}

.searchbox--inverse .searchbox__input::-webkit-input-placeholder {
   color: rgba(255,255,255, 0.54);
}

.searchbox--inverse .searchbox__input::-moz-placeholder {
   color: rgba(255,255,255, 0.54);
}

.searchbox--inverse .searchbox__input:-ms-input-placeholder {  
   color: rgba(255,255,255, 0.54);
}


/* -------------------------------------------------------------------------
   Search Box Overrides
   ------------------------------------------------------------------------- */

/** 
 * Search Box: is-dirty
 * Adds a drop shadow to the container when the search input has a 
 * query entered. 
 */
.searchbox__form.is-dirty {
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 
                0 1px 8px 0 rgba(0, 0, 0, 0.12), 
                0 3px 3px -2px rgba(0, 0, 0, 0.4);
    background-color: #FFF;
}

.searchbox__form.is-dirty .searchbox__clear-button {
    opacity: 1;
    cursor: pointer;
}

.searchbox__form.is-dirty .searchbox__clear-icon {
    color: #8393A7;
}

.searchbox__form.is-dirty ~ .searchbox__search-button {
    box-shadow: 0 0 0 1px #6D9324,
                0 3px 4px 0 rgba(0, 0, 0, 0.14), 
                0 1px 8px 0 rgba(0, 0, 0, 0.12), 
                0 3px 3px -2px rgba(0, 0, 0, 0.4);
}


/* -------------------------------------------------------------------------
   Search Results
   
   Styles for the search results. NOTE: This uses mdl-list, which isn't in 
   our material.css file. May need to update mdl in the project. For now, 
   mdl-list styles have been copied above.
   ------------------------------------------------------------------------- */

.search-results {
    border: 1px solid #F1F1F1;
}

/* Search Results Header */

.search-results__header {
    margin: 0;
    padding: 0;
    border-bottom: 4px solid #F1F1F1;
}

.search-results__header--show-school .search-results__label-icon {
    color: #00bfff;
    background: transparent;
}

/*
    Todo:  Redo all templates to use the mdl grid and get rid of all css not needed
*/
.search-results__header--show-jurisdiction .search-results__label-icon, .search-results__label-icon {
    color:#6d9324 !important;
    background: transparent  !important;
}

/* Search Results List */

.search-results__list {    
    margin: 0;
    padding: 0;
}

.search-results__list-item {
    position: relative;
    padding: 0;
} 
 
.search-results__sub-label {
    font-size: 14px;
}

.search-results__secondary-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    color: #6D9324;
}

/* Search Results Links */

.search-results a, 
.search-results a:hover { /* Need to remove ".dialogContent a:hover" from styles.css */
    text-decoration: none;
}

.search-results__primary-content {
    padding: 16px;
    z-index: 1;
    text-decoration: none;
}

.search-results__primary-content:hover {
    text-decoration: none;
    background: rgba(0,0,0, 0.04);
}

.search-results__primary-content:hover span,
.search-results__primary-content:hover i.material-icons {
    color: #6D9324;
}


/* -------------------------------------------------------------------------
   Auto Complete & Menu (jquery-ui overrides)
   ------------------------------------------------------------------------- */

.ui-autocomplete.ui-menu { 
    padding: 12px 0;
    z-index: 0;
    box-sizing: border-box;
    max-width: 600px;
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 
                0 3px 14px 2px rgba(0, 0, 0, 0.12), 
                0 5px 5px -3px rgba(0, 0, 0, 0.4);
    border: none;
    color: #757575;
}

/* Hide the top box-shadow with pseudo-element */

.ui-autocomplete.ui-menu:before {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 6px;
    background: white;
    border-bottom: 1px solid #E5E5E5;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
}

.ui-autocomplete.ui-menu li.ui-menu-item-custom {
    line-height: 40px;
    padding: 0 24px;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    border-color: transparent;
}

.ui-autocomplete.ui-menu li.ui-menu-item-custom.ui-state-focus {
    margin: 0;
    border: none;
    background: #F5F5F5; 
    color: #36424A;
}

.ui-autocomplete.ui-menu li.ui-menu-item-custom i.jurisdiction,
.ui-autocomplete.ui-menu li.ui-menu-item-custom i.school {
    vertical-align: middle;
    margin-right: 1em;
}

.ui-autocomplete.ui-menu li.ui-menu-item-custom i.jurisdiction {
    color:#6d9324;
}

.ui-autocomplete.ui-menu li.ui-menu-item-custom i.school {
    color: #00bfff;
}

/* Scrollable auto-complete styles */

.ui-autocomplete.ui-menu {
    overflow: auto;
    max-height: 424px;
}


/* -------------------------------------------------------------------------
   Utilities

   Need to add these to main css file once the UI library is in.
   ------------------------------------------------------------------------- */

.u-display-none {
    display: none !important;
}

/*Add some color to font-awsome icons*/
.jstree i.fa-file-pdf-o{
    color: #C71585;
}
.jstree i.fa-asterisk{
    color: silver;
}
.jstree i.fa-trello{
    color: #2E8B57;
}
.jstree i.fa-file{
    color: #0086b3;
}

.jstree i.fa-file, .jstree i.fa-trello, .jstree i.fa-asterisk, .jstree i.fa-file-pdf-o{
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/*Add borders to the mdl grid*/
.addBorder + .addBorder {
border-top:0;
}
.addBorder {
    border: 1px solid #aaa;
}
.v-align {
    display: inline-flex;
    vertical-align: middle;
}
.CtsPreReqStrongEmphasis {
    color: green;
    font-weight: bold;
}
.margin-half-em {
    margin: .5em;
}

.text-align-center {
    text-align: center;
}
.break-word {
    white-space: pre !important;           /* CSS 2.0 */
	white-space: pre-wrap !important;      /* CSS 2.1 */
	white-space: pre-line !important;      /* CSS 3.0 */
	white-space: -pre-wrap !important;     /* Opera 4-6 */
	white-space: -o-pre-wrap !important;   /* Opera 7 */
	white-space: -moz-pre-wrap !important; /* Mozilla */
	white-space: -hp-pre-wrap !important;  /* HP Printers */
	word-wrap: break-word !important;      /* IE 5+ */
}
.break {
    -ms-word-break: break-all;
     word-break: break-all;
     word-break: break-word;
     -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
.ellipses {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/*Mdl Overrides*/
.mdl-layout__content{
    width: 100%;
}
.mdl-grid-no-padding {
    padding: 0;
}
.mdl-cell-no-margin {
    margin: 0;
}
.mdl-cell-3col-ForceQuarterWidth {
    width: 25% !important;
}
.forceWidth100Percent {
    width: 100% !important;
}
.forceWidth33Percent {
     width: 33.3333333333333333% !important;
}