/**
 * @file
 * View Styles
 * region-description-view
 * EX: .sidebar-news-view
 */

.view {
  .views-row {
    margin-bottom: 20px;

    &::after {
      content: " ";
      clear: both;
      display: block;
      font-size: 0;
      height: 0;
      visibility: hidden;
    }
  }

 .field-name-title-field,
 .views-field-title {
   font-size: 2.1rem;
   font-family: @family-header-font;
   line-height: 1.2em;
   margin-bottom: 15px;

   a {
     color: #4A4A4A;
   }
 }

 .field-type-datetime {
   font-size: 1.3rem;
   line-height: 1.2em;
 }

  .date-wrapper {
    background-color: #004C97;
    border: 2px solid #ABCAE9;
    padding: 3px 0 8px;
    text-align: center;
    width: 70px;
  }

  .date-day {
    color: #fff;
    font-family: @family-header-alternate-font;
    font-size: 4rem;
    line-height: 1em;
  }

  .date-month {
    color: #ABCAE9;
    font-family: @family-header-font;
    font-size: 2.1rem;
    text-transform: uppercase;
  }

  .view-filters {
    form label {
      text-align: left;
    }
  }

  .date-nav-wrapper {
    .date-prev {
      margin-right: 1rem;
    }

    .pager {
      @media @mobile {
        padding-top: 1.5rem;
      }
    }

    .date-prev,
    .date-next {
      padding: .5rem 1.5rem .5rem .5rem;

      @media @mobile {
        position: relative;
        right: 0;
        top: 0;
      }
    }
  }
}

.views-exposed-form {
  label {
    font-size: 22px;
    margin-bottom: 20px;
  }
}

.list-view {
  .field-name-field-image {
    float: left;
    margin-right: 15px;

    a:hover,
    a:focus {
      opacity: 0.95;
    }
  }
}

.grid-view {
  .views-row {
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 31.5%;

    &:nth-child(3n+2){
      margin-left: 2%;
      margin-right: 2%;
    }
    @media (max-width: 767px) {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      width: 30rem;

      &:nth-child(n+2) {
        margin: 0 auto;
      }
    }
  }

  .date-wrapper {
    left: 12px;
    position: absolute;
    top: 12px;
  }

  .text-wrapper {
    background: linear-gradient(to bottom, @color-grid-text-wrapper-bg-hover 50%, @color-grid-text-wrapper-bg 50%);
    background-position: left bottom;
    background-size: 100% 200%;
    border: 1px solid @color-grid-text-wrapper-border;
    border-top: 0px none;
    min-height: 109px;
    padding: 18px 22px;
    transition: all 0.6s ease 0s;

    &:hover {
      background-position: 0 0;
    }

    .views-field-title a {
      &:hover,
      &:focus,
      &:active {
        color: #B7312C;
        text-decoration: none;

        .node-type-department & {
          color: #004C97;
        }
      }
    }
  }

  .field-name-field-date {
    span {
      .font-size(14px);
      color: #999999;
      font-style: italic;
    }
  }

  .field-type-image {
    float: none;
    margin-right: 0;

    img {
      display: block;
      max-width: 100%;
      height: auto;
      width: 100%;
    }
  }
}

.grid-list-view {
  .views-row {
    display: inline-block;
    margin-right: 2%;
    vertical-align: top;
    width: 31.6%;

    &:nth-child(3n) {
      margin-right: 0;
    }
    @media (max-width: 959px) {
      width: 48%;
      margin-right: 2%;
      &.views-row-even{
        margin-right: 0;
      }
      &.views-row-odd{
        margin-right: 2%;
      }
    }
    @media (max-width: 767px) {
      width: 100%;
    }
  }

  .views-field-title {
    font-size: 1.8rem;
  }
}

.view-news-page {
  .form-submit {
    padding: 0.6rem 1rem;
    margin-right: 0.6rem;
  }
}

.view-events {
  &.event-list-view {
    .date-wrapper {
      display: inline-block;
      margin-right: 10px;
      vertical-align: top;
    }
    .views-field-nothing-1 {
      display: inline-block;
      //width: 85%;
      width: ~"calc(100% - 90px)";
    }
  }
}

.view-slideshow {
  //padding-bottom: 1px;
  position: relative;

  @media (max-width: 959px) {
    height: 100%;
    overflow: hidden;
  }

  &::after {
    background: transparent @image-slideshow-waves repeat-x center top;
    bottom: 0;
    content: "";
    height: 78px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 999;

    .paragraphs-item-body-slideshow &,
    .body-video-slideshow-block & {
      background-image: none;
    }
  }

  .slick-slider {
    @media (max-width: 959px) {
      height: 38rem;
      overflow: hidden;
      position: inherit;
    }
  }

  .slick-slide {
    position: relative;

    @media (max-width: 959px) {
      position: inherit !important;
    }

    img {
      height: auto;
      min-height: 50rem;
      width: 100%;
    }
  }

  .slick-list,
  .slick-track {
    @media (max-width: 959px) {
      overflow: visible;
      transform: none;
      position: inherit;
    }
  }

  .flexslider {
    @media @tablet {
      height: 500px;
    }
  }
  .video-loaded {
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    width: 100%;
    z-index: 2;
  }

  video {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .slide-text {
    bottom: 155px;
    box-sizing: border-box;
    left: 0;
    padding: 0 2rem;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 11;

    @media @tablet {
      padding: 0;
    }

    .field-content {
      display: block;
      margin: 0 auto;
      max-width: @width-page;
    }
  }

  .field-name-field-slide-image,
  .hero-bkg .field-content {
    min-height: 50rem;
    max-height: 80rem;
    overflow: hidden;
    position: relative;

    .not-front & {
      max-height: 53.6rem;
    }

    @media (max-width: 1412px) {
      height: auto;
    }

    @media (max-width: 959px) {
      left: 50%;
      min-height: auto;
      max-height: none;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);

      .page-node-1691& {
        position: inherit;
        transform: none;
      }
    }

    &::after {
      background: @color-slideshow-waves-transparent @image-slideshow-waves-transparent no-repeat 0 0;
      background-size: cover;
      bottom: 0;
      content: "";
      height: 464px;
      left: 0;
      opacity: 0.8;
      position: absolute;
      width: 100%;

      @media (max-width: 1529px) {
        background-position: center 26px;
        z-index: 9;
      }

      @media (max-width: 959px) {
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.25) 22%, rgba(0, 0, 0, 0.6) 68%, rgba(0, 0, 0, 0.95) 100%);
        .front & {
           bottom: 6rem;
        }
      }

      @media (max-width: 767px) {
        .front & {
           bottom: 11rem;
        }
      }

      .paragraphs-item-body-slideshow &,
      .body-video-slideshow-block & {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fafafa+0,000000+100&0+23,0.7+100 */
background: -moz-linear-gradient(top,  rgba(250,250,250,0) 0%, rgba(193,193,193,0) 23%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(250,250,250,0) 0%,rgba(193,193,193,0) 23%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(250,250,250,0) 0%,rgba(193,193,193,0) 23%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fafafa', endColorstr='#b3000000',GradientType=0 ); /* IE6-9 */
      }
    }

    img {
      @media (max-width: 1080px) {
        max-height: none;
        max-width: none;
        width: auto;
      }
    }
  }

  .hero-bkg .video-loaded {
    &::after {
      background: @color-slideshow-waves-transparent @image-slideshow-waves-transparent no-repeat 0 0;
      background-size: cover;
      bottom: 0;
      content: "";
      height: 464px;
      left: 0;
      opacity: 0.8;
      position: absolute;
      width: 100%;
      @media (max-width: 959px) {
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.25) 22%, rgba(0, 0, 0, 0.6) 68%, rgba(0, 0, 0, 0.95) 100%);
      }

      @media (max-width: 1529px) {
        background-position: center 26px;
        z-index: 9;
      }
    }

    + .field-content::after {
      background: none;
    }
  }

  .field-name-field-slide-title {
    color: #fff;
    display: block;
    font-family: @font-family-light;
    font-size: 6.4rem;
    line-height: 1.2em;
    margin-bottom: 22px;

    @media (max-width: 767px) {
      font-size: 3.9rem;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .not-front.node-type-landing-page & {
      font-family: @font-family;
      font-size: 5rem;
    }
  }

  .field-name-field-slide-text {
    color: #fff;
    font-size: 2rem;
    line-height: 1.4em;
    margin: 0 auto 2rem;
    max-width: @width-page;

    @media (max-width: 1015px) {
      padding: 0 15px;
    }
  }

  .field-name-field-slide-link a {
    .button-style;
    background-color: rgba(0,0,0,0.5);
    border-color: @color-input-border;
    a:active, a:hover, a:focus {
      background-color: #004c97;
      border-color: #fff;
      text-decoration: none;
    }
  }

  .slick__arrow {
    .slick-arrow {
      border-color: @color-slideshow-arrow-border;
      top: 50%;

      &::after {
        color: @color-slideshow-arrows;
      }
    }

    .slick-prev {
      left: 1rem;

      @media (max-width: 992px) {
        top: 75%;
      }
    }

    .slick-next {
      right: 1rem;

      @media (max-width: 992px) {
        top: 75%;
      }
    }
  }

  .flexslider .slides {
    img {
      min-width: 100%;
      max-width: 200%;
      max-width: -moz-fit-content;
      max-width: fit-content;
      width: auto;
    }

    li {
      position: inherit !important;
    }
  }



  .flex-direction-nav a {
    border-color: @color-slideshow-arrow-border;
      top: 50%;

      &::before {
        color: @color-slideshow-arrows;
      }

    &.flex-prev {
      left: 1rem;
    }

    &.flex-next {
      right: 1rem;
    }
  }

  .slick-dots {
    bottom: 105px;

    li {
      button {
        background-color: @color-slideshow-dot-bg;
        border: 1px solid @color-slideshow-dot-bg-border;
      }
      button:hover,
      &.slick-active button {
        background-color: transparent;
        border-color: @color-slideshow-dot-bg-border-active;
        border-width: 2px;
      }
      &.slideshow-play-pause-button {

      }
    }
  }

  .flex-control-nav {
    bottom: 8.5rem;

    @media @tablet {
      padding-left: 0;
    }

    li {
      a {
        background-color: @color-slideshow-dot-bg;
        border: 1px solid @color-slideshow-dot-bg-border;
      }
      a:hover,
      a:focus,
      a.flex-active {
        background-color: transparent;
        border-color: @color-slideshow-dot-bg-border-active;
        border-width: 2px;
      }
    }
  }

  .popup-wrapper {
    bottom: -4rem;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    .popup-element {
      z-index: 1000;
      a {
        background-color: transparent;
        border: none;
        padding: .5rem 0 0 0;
        &:hover,
        &:focus,
        &:active {
          text-decoration: none;
        }
        span {
          display: none;
        }
        &:after {
          color: #ACCAE9;
          content: @fa-var-info-circle;
          font-family: @font-awesome;
        }
      }
    }
  }
}

// Gridder Settings
.view-academics {
  .academics-filters {
    display: inline-block;
    margin-right: 2%;
    vertical-align: top;
    width: 28%;

    @media(max-width: 767px) {
      margin-right: 0;
      width: 100%;
    }

    .views-exposed-form label {
      color: #4A4A4A;
      font-family: @family-header-font;
      font-size: 2.2rem;
      font-weight: normal;
      line-height: 1.2em;
      margin-bottom: 1.2rem;

      &.option {
        font-family: @font-family-semibold;
        font-size: 1.4rem;
        line-height: 1em;
        margin-bottom: 0;
      }
    }

    .views-exposed-widgets {
      .ajax-progress {
        position: absolute;
      }
      .views-widget-filter-field_programs_offered_tid {
        margin-top: 14px;
      }
      .views-exposed-widget {
        width: 100%;

        @media (max-width: 767px) {
          padding-right: 0;
        }
      }
      .views-widget-filter-keys {
        padding-top: 0;
        width: 100%;
      }
      .form-item-field-programs-offered-tid {
        .form-type-radio {
          background: #eee;
          margin-bottom: 1px;
          &.selected {
            background: @color-link;
            label {
              color: #fff;
            }
          }
          input {
            display: none;
            position: absolute;
          }
          label:before {
            font-family: @font-awesome;
            content: "";
            display: block;
            float: left;
            position: relative;
            width: 30px;
          }
          label[for=edit-field-programs-offered-tid-all]::before {
            content: "\f00a";
          }
          label[for=edit-field-programs-offered-tid-11]::before {
            content: "\f274";
          }
          label {
            cursor: pointer;
            display: block;
            padding: 16px 0 10px 10px;
          }
        }
      }
      .views-widget-filter-field_school_ref_target_id {
        padding-top: 0;
      }
      #edit-field-school-ref-target-id, #edit-field-school-ref-target-id--2 {
        .form-type-radio {
          background: #eee;
          margin-bottom: 1px;
          &.selected {
            background: @color-link;
            label {
              color: #fff;
            }
          }

          input {
            display: none;
            position: absolute;
          }
          label:before {
            background: #ABCAE9;
            content: "";
            display: block;
            float: left;
            height: 40px;
            left: -30px;
            position: absolute;
            top: 3px;
            width: 10px;
          }
          label {
            cursor: pointer;
            display: block;
            margin-left: 30px;
            padding: 16px 0 10px 0px;
            position: relative;
          }
          input.green + label:before {
            background: @color-school-green;
          }
          input.maroon + label:before {
            background: @color-school-maroon;
          }
          input.blue + label:before {
            background: @color-school-blue;
          }
          input.red + label:before {
            background: @color-school-red;
          }
          input.olive + label:before {
            background: @color-school-olive;
          }
          input.purple + label:before {
            background: @color-school-purple;
          }
        }
      }

    }
    .views-widget.search-button {
      position: relative;
      .form-item-combine {
        input {
          border-width: 4px;
          font-size: 1.4rem;
          font-style: italic;
          text-transform: capitalize;
          width: 93%;

          @media (max-width: 767px) {
            width: 100%;
          }
        }
      }
      #edit-submit-academics {
        background: url(/sites/all/themes/custom/ssuedu_theme/images/bkg-search-icon.png) no-repeat 7px 7px @color-link;
        border: none;
        margin-top: 0;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 0;
        width: 40px;
        height: 42px;
        padding: 0;
        border-radius: 0;
      }
    }
  }
  .gridder-content {
    display: none;
  }
  .main-view-wrapper {
    display: inline-block;
    max-width: 67.5%;
    padding-top: 3rem;
    vertical-align: top;
    width: 100%;

    @media (max-width: 767px) {
      max-width: 100%;
      text-align: left;
    }

    ul.gridder {
      list-style: none;
      margin-bottom: 0px;
      padding-left: 0;
      margin-top: 10px;
      li.gridder-list {
        background: #fff;
        border: 4px solid #eeeeee;
        border-color: #eee !important;
        border-top: none;
        display: inline-block;
        height: 220px;
        margin-bottom: 20px;
        margin-right: 0.5%;
        max-width: 30.95%;
        position: relative;
        text-align: left;
        vertical-align: top;
        width: 32%;
        @media (max-width: 864px) {
          margin-right: 0;
        }

        @media (min-width: 768px) and (max-width: 927px) {
          height: 260px;
        }

        @media (max-width: 767px) {
          margin-right: 0.5%;
        }
        @media(max-width: 590px) {
          margin-right: 0;
          max-width: 100%;
          width: 100%;
        }
        @media(max-width: 690px) and (min-width: 591px) {
          max-width: 100%;
          width: 30%;
        }
        &:before {
          background: blue;
          border-top: 10px solid;
          content: "";
          height: 0;
          left: 0;
          margin-left: -4px;
          padding-right: 8px;
          position: absolute;
          top: -10px;
          width: 100%;
        }
        &:after {
          border-color: transparent transparent #eee transparent;
          border-style: solid;
          border-width: 0 0 20px 20px;
          bottom: 0;
          content: "";
          position: absolute;
          right: 0;
          transition: all 0.5s linear;
        }
        &.selectedItem:after {
          border-bottom: 20px solid;
          border-left: 20px solid transparent !important;
          border-right: 20px solid transparent !important;
          bottom: -30px;
          content: "";
          height: 0;
          right: 42%;
          position: absolute;
          transition: all 0.5s ease;
          width: 0;
        }
        .item-wrapper {
          padding: 10px;
        }
        .title-icon-wrapper {
          //display: table;
          margin-bottom: 0.5rem;
          position: relative;

          .item-title {
            //display: table-cell;
            font-family: @family-header-font;
            font-size: 20px;
            line-height: 1.3em;
            padding-right: 6rem;
            //width: 1%;

            @media (min-width: 768px) and (max-width: 927px) {
              padding-right: 0;
              position: relative;
              text-align: left;
            }

            &.green {
              color: @color-school-green;
            }
            &.maroon {
              color: @color-school-maroon;
            }
            &.blue {
              color: @color-school-blue;
            }
            &.red {
              color: @color-school-red;
            }
            &.olive {
              color: @color-school-olive;
            }
            &.purple {
              color: @color-school-purple;
            }
          }
          .field-name-field-programs-offered {
            //display: table-cell;
            //text-align: right;
            position: absolute;
            right: 0;
            text-align: right;
            top: 0;
            width: 4.7rem;

            @media (min-width: 768px) and (max-width: 927px) {
              position: relative;
              text-align: left;
              width: auto;
            }

            .field-item {
              display: inline-block;
              margin-right: 5px;
            }
          }
        }
      }
      .gridder-show {
        float: left;
        max-width: 667px;
        text-align: left;
        width: 100%;
        .gridder-padding {
          padding-right: 10px;
          position: relative;
          .gridder-navigation {
            position: absolute;
            right: 10px;
            top: 5px;
            a.gridder-close {
              display: inline-block;
              font-size: 0;
              height: 15px;
              position: relative;
              width: 15px;
              &:before,
              &:after{
                content:'';
                position: absolute;
                width: 15px;
                height: 2px;
                background-color: white;
                border-radius: 2px;
                top: 8px;
              }
              &:before{
                  -webkit-transform: rotate(45deg);
                  -moz-transform: rotate(45deg);
                  transform: rotate(45deg);
              }
              &:after{
                  -webkit-transform:rotate(-45deg);
                  -moz-transform:rotate(-45deg);
                  transform:rotate(-45deg);
              }
            }
          }
        }
        .gridder-expanded-content {
          margin-bottom: 20px;
          .grid-content-wrapper {
            border: 4px solid;
            border-top: 30px solid;
            border-color: #000;
            display: table;
            width: 100%;

            &:before {
              border-color: #000;
            }

            .grid-content-body {
              display: table-cell;
              max-width: 417px;
              padding: 15px;

              @media(max-width: 560px) {
                display: block;
                padding: 0;
                width: 100%;

                .grid-content-body-wrapper {
                  padding: 15px;
                }
              }

              img {
                display: block;
                height: auto;
                float: none !important;
                margin: 0 0 15px !important;
                max-width: 100%;
              }
            }
            .grid-content-right {
              background: #ECEBE1;
              display: table-cell;
              padding: 15px;
              width: 181px;
              @media(max-width: 560px) {
                display: block;
                padding: 0;
                width: 100%;
                .grid-right-content-wrapper {
                  padding: 15px;
                }
              }
              .dept-location {
                .label {
                  font-size: 10px;
                  line-height: 1.2em;
                  margin-bottom: 0.1rem;
                  text-transform: uppercase;
                }
              }
              .dept-link {
                margin-top: 20px;
                a {
                  padding-left: 23px;
                  padding-right: 23px;
                }
              }
            }
          }
        }
      }
      .gridder-nav.disabled {
        display: none;
      }
      li.gridder-list.selectedItem:after {
        border-color: #000;
      }
      .gridder-show .gridder-expanded-content .grid-content-wrapper,
      li.gridder-list {
            &.green,
            &.green:before,
            &.green.selectedItem:after {
              border-color: @color-school-green;
            }
            &.maroon,
            &.maroon:before,
            &.maroon.selectedItem:after {
              border-color: @color-school-maroon;
            }
            &.blue,
            &.blue:before,
            &.blue.selectedItem:after {
              border-color: @color-school-blue;
            }
            &.red,
            &.red:before,
            &.red.selectedItem:after {
              border-color: @color-school-red;
            }
            &.olive,
            &.olive:before,
            &.olive.selectedItem:after {
              border-color: @color-school-olive;
            }
            &.purple,
            &.purple:before,
            &.purple.selectedItem:after {
              border-color: @color-school-purple;
            }
      }
      .sub-title {
        border-bottom: 2px solid #C4BCB7;
        color: #4a4a4a;
        font-size: 12px;
        font-style: italic;
        line-height: 1.2em;
        padding-bottom: 10px;
      }
      .item-desc {
        color: #000;
        font-size: 1.4rem;
        line-height: 1.5em;
        padding-top: 0.7rem;
      }
    }
  }
}

.view-news.view-display-id-page {
  border-bottom: 2px solid #ABCAE9;
  margin-bottom: 7.4rem;
  padding-bottom: 3rem;
}

/* Hero Article Block */
.view-display-id-hero_article {
  .text-wrapper {
    bottom: 5px;
    box-sizing: border-box;
    color: #fff;
    left: 0;
    padding: 2.6rem 2rem;
    position: absolute;
    width: 100%;
    background-color: rgba(0, 0, 0, .5);
  }
  .views-field-title {
    font-size: 2.6rem;
    line-height: 1.2em;
    margin-bottom: 1rem;
    a, a:active, a:focus, a:link, a:hover, a:visited {
      color: #fff;
    }
    .field-name-field-date-news .date-display-single {
      font-style: normal;
    }
    .view-content {
      position: relative;
    }
  }
}

/* Articles List Block */

.view-display-id-articles_list .field-name-field-image, .view-display-id-articles_list_filtered .field-name-field-image {
  display: inline-block;
  vertical-align: top;
  margin-right: 15px;
}

.view-display-id-articles_list .views-field-nothing .group-text-wrapper, .view-display-id-articles_list_filtered .views-field-nothing .group-text-wrapper {
  display: inline-block;
  width: 75%;
}


.view-display-id-articles_list .views-field-nothing, .view-display-id-articles_list_filtered .views-field-nothing {
  margin-top: 30px;
  margin-bottom: 30px;
}


.view-articles .item-list ul li {
  border-bottom: 0px solid #ffffff;
}

/*  Filter Styles  */

.view-display-id-articles_list_filtered .view-filters {
  background-color: #DBECEC;
  padding: 5px 10px;
  margin-bottom: 10px;
}

.views-exposed-form label {
  font-size: initial;
  margin-bottom: initial;
}

.select2-container {
  font-size: initial;
}

.node-type-article .field-name-body {
  border-bottom: initial;
  margin-bottom: initial;
  margin-top: initial;
  padding-bottom: initial;
}

.view-external-news {
  .field-name-field-source {
    font-family: @family-header-alternate-font;
    font-size: 1.2rem;
    line-height: 1.2em;
    margin-top: 0.7rem;
  }
}

.mini-calendar-view {
  .date-nav-wrapper {
    background: @color-button-bkg;
    margin-top: 0px;
    position: relative;
    width: 100%;

    .date-nav {
      margin-bottom: 0;
      min-height: auto;
      padding-bottom: 0;
    }

    .date-heading {
      h3 {
        font-size: 1.6rem;
        line-height: 38px;
      }
      a {
        color: #fff;
        font-size: 1.6rem;
      }
    }

    .item-list .pager {
      margin-bottom: 0;
      margin-top: 0;

      li {
        -moz-border-radius: 0rem;
        background: none repeat scroll 0 0 transparent !important;
        border-radius: 0rem;
        float: none;
        font-size: 0;
        height: 38px;
        padding:  0rem;
        position: absolute;
        text-align: center;
        top: -12px;
        vertical-align: middle;
        width: 47px;
        z-index: 1;

        &.date-next {
          width: 30px;
        }

        a {
          color: transparent;
          font-size: 0;
          height: 61px;
          line-height: 61px;
          margin-left: 0;
          text-align: center;
          width: 61px;

          &:hover,
          &:focus,
          &:active {
            opacity: 0.6;
          }

          &::after {
            content: "\f105";
            color: #B3C9E0;
            font-family: 'FontAwesome';
            font-size: 3.3rem;
            font-weight: normal;
          }
        }

        &.date-prev a::after {
          content: "\f104";
        }

        div {
          display: none !important;
        }
      }
    }
  }

  .calendar-calendar {
    th {
      padding: 2px 6px;
    }
    tbody,
    table.mini td.empty {
      background-color: #FFFFFF;
    }
    tr {
      &:first-child td {
        padding-top: 3px;
      }

      &:last-child td {
        //padding-bottom: 25px;
      }
    }
    td {
      background-color: #FFF;
      font-family: @family-header-alternate-font;
      font-size: 1.1rem;
      line-height: 2.08em;
      padding: 0px 4px;

      &.today {
        border: 2px solid #004C97;
      }

      &.mini,
      &.empty {
        background: #FFF;
        text-align: center;
      }
    }

    .mini-day-on {
      a {
        text-decoration: none;
      }
    }

    .days {
      background-color: #ABCAE9;
      border: 0;
      color: #000000;
      font-family: @family-header-alternate-font;
      font-size: 1.1rem;
      font-weight: bold;
      text-transform: uppercase;
    }
  }
}

.view-calendar {

  @media (max-width: 767px) {
    .calendar-calendar .year-view > table > tbody > tr > td {
      display: inline-block;
      width: 100%;
    }
  }
}

.grouped-events-view {
  width: ~"calc(100% - 316px)";

  @media (max-width: 767px) {
    margin: 0 auto;
    width: 100%;
  }

  .view-header {
    h2 {
      font-family: @family-header-alternate-font;
      margin-bottom: 3.2rem;
    }
  }

  .view-content {
    h3 {
      background-color: #E8E8E8;
      font-size: 2.1rem;
      margin-bottom: 3.5rem;
      padding: 1rem 2.4rem;
      text-transform: uppercase;
    }

    .views-row {
      margin-bottom: 3.3rem;

      &::after {
        clear: none;
      }
    }
  }

  .views-field-title {
    margin-bottom: 0.8rem;
  }

  .field-type-datetime {
    margin-bottom: 0.7rem;
  }
}

.events-archive-view {
  .date-wrapper {
    float: left;
    margin-right: 2rem;
  }
}

//pagination
.view-news,
.view-events {
  .item-list ul.pager {
    font-size: 0;
    line-height: 0;
    margin-top: 6rem;

    li {
      list-style-type:  none;
      display: inline-block;
      margin: 0 0.3rem;
      vertical-align: top;

      a {
        background: transparent;
        border: 2px solid #E8E8E8;
        border-radius: 50%;
        color: @color-pagination-text;
        display: block;
        font-size: 1.4rem;
        font-weight: normal;
        line-height: 15px;
        min-width: 40px;
        min-width: 15px;
        padding: 12px;
        text-align: center;

        &:hover {
          background: transparent;
          border: 2px solid @color-pagination-bkg-hover;
          color: @color-pagination-bkg-hover;
          font-family: @family-header-alternate-font;
          text-decoration: none;
        }
      }

      &.pager-current {
        background: transparent;
        border: 2px solid @color-pagination-bkg-hover;
        border-radius: 50%;
        color: @color-pagination-bkg-hover;
        font-family: @family-header-alternate-font;
        font-size: 1.4rem;
        font-weight: normal;
        line-height: 15px;
        min-width: 40px;
        min-width: 15px;
        padding: 12px;
        text-align: center;
      }
      &.pager-item,
      &.pager-next,
      &.pager-last,
      &.pager-first,
      &.pager-previous {
        a {
          border: 2px solid #e8e8e8;
          border-radius: 25px;
          color: #666;
          display: inline-block;
          height: 10px;
          line-height: 10px;
          margin-left: -1px;
          margin-right: -1px;
          padding: 15px;
          position: relative;
          vertical-align: top;
          width: auto;

          &:hover {
            border: 2px solid @color-pagination-bkg-hover;
            color: @color-pagination-bkg-hover;
            font-family: @font-family;
          }
        }
      }
      &.pager-next,
      &.pager-last,
      &.pager-first,
      &.pager-previous {
        a {
          &:after {
            font-family: @font-awesome;
            font-size: 1.4em;
            position: absolute;
          }
        }
      }
      &.pager-next {
        a {
          padding-right: 30px;
          &:after {
            content: "\f105";
            right: 13px;
          }
        }
      }
      &.pager-last {
        a {
          padding-right: 30px;
          &:after {
            content: "\f101";
            right: 13px;
          }
        }
      }
      &.pager-first {
        a {
          padding-left: 30px;
          &:after {
            content: "\f104";
            left: 13px;
          }
        }
      }
      &.pager-previous {
        a {
          padding-left: 30px;
          &:after {
            content: "\f100";
            left: 13px;
          }
        }
      }
    }
  }
}

/* BC Class Schedule */
#block-views-footnotes-block {
  .block-title {
    font-size: 2.4rem;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .item-list {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    li {
      display: block;
      margin: 3px;
      padding: 4px;
      list-style-type: none;
    }
  }
}
#block-views-general-education-ge-block {
  .block-title {
    font-size: 2.4rem;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .item-list {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    li {
      display: block;
      margin: 3px;
      padding: 4px;
      list-style-type: none;
    }
  }
}
div.view-class-schedule {
  table {
    th {
      font-size: 14px !important;
      padding: 7px 7px;
    }
    td {
      font-size: 14px !important;
      padding: 7px 7px;
    }
  }
  .pager {
    margin-top: 10px;
  }
}
.node.view-mode-full ul.pager li:before {
  content: "";
}


/* BC Courses view search form */

.view-Courses {
  #edit-search-wrapper {
    >label {
      font-size: 18px;
      margin-bottom: 0;
    }
  }
  .views-exposed-widgets {
    margin-bottom: 1.5em;
  }
}

/* BC Faculty Staff View  */
.view-faculty-and-staff {
  table {
    border: none;
    tr {
      td {
        border-right: none;
        padding-bottom: 25px;
      }
      &:nth-child(even) {
        background: #fff;
      }
    }
  }
  td {
    vertical-align: top;
  }
  th {
    vertical-align: top;
  }
  .views-field-title {
    margin-bottom: 4px;
  }
}

/*  BC Article View  */
.view-articles {
  .item-list {
    ul {
      li {
        list-style: none;
        float: none;
        overflow: hidden;
        font-size: 1.6rem;
        font-family: 'open_sansregular', Helvetica, Arial, sans-serif;
        border-bottom: 1px solid #333333;
        .news-tags {
          font-weight: bold;
        }
      }
    }
  }

  .field-type-datetime {
    .date-display-single {
      font-size: 1.4rem;
      font-style: italic;
    }
  }
  .views-field-field-tags {
    padding-bottom: 10px;
  }
}

/*  BC Blog View  */
.page-blog {
  .node-blog {
    h2 {
      font-size: 2.1rem;
      font-family: 'open_sansregular', Helvetica, Arial, sans-serif;
      margin-bottom: 3px;
    }
    .submitted {
      font-size: 1.4rem;
      font-style: italic;
      padding-top: 10px;
    }
    .inline {
      padding-bottom: 10px;
    }
    border-bottom: 1px solid #333333;
    .field-name-title-field {
      font-size: 2.1rem;
      font-family: 'open_sansregular', Helvetica, Arial, sans-serif;
      margin-bottom: 8px;
    }
  }
  .action-links {
    list-style: none;
    padding-left: 1px;
  }
}

// BC For Tags page
.view-taxonomy-term {
  .field-name-title-field {
    font-size: 2.1rem;
    font-family: 'open_sansregular', Helvetica, Arial, sans-serif;
    margin-bottom: 3px;
  }
  .field-type-datetime {
    .date-display-single {
      font-size: 1.4rem;
      font-style: italic;
    }
  }
  .field-name-body {
    border-bottom: 1px solid #333333;
  }
}
// BC Office Hours View
.view-office-hours {
  .views-field-title {
    font-size: 16px;
    white-space: nowrap;
    font-family: 'open_sansregular', Helvetica, Arial, sans-serif;
    a {
      color: #005794;
      &:hover {
        color: #005794;
        text-decoration: underline;
      }
    }
  }
  .oh-display-label {
    display: block;
  }
  table {
    tr {
      th {
        padding: 5px;
      }
    }
  }
  td {
    .field-name-field-phone {
      white-space: nowrap;
    }
  }
}
table {
  tr {
    td {
      padding: 5px;
    }
  }
}
.view {
  .views-field-title {
    a {
      &:focus {
        color: #005794;
        text-decoration: underline;
      }
    }
  }
}

/* BC Workbench */
div.admin.my-workbench {
	.left {
		width: 25%;
	}
	.right {
		width: 70%;
	}
}

/* group image / faculty / etc ACP */
.group-image .field-type-text {
  line-height: 1;
}

/* faculty and staff */
.fs-flex {

  > .view-content {
    display: flex;
    flex-flow: wrap;
    justify-content: left;

    > h3 {
      width: 100%;
    }

    > .views-row {
      flex: 1 0 48%;
      margin-right: .2em;
    }

  }

 }