body, html {
  font-family: "Open Sans", Helvetica Neue, Helvetica, Arial;
  font-size: 14px;
  font-weight: normal;
  height: 100%;
  color: #444444; }

textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus, select:focus {
  box-shadow: inset 2px 2px 0 0 #f4f4f4, 0 0 0 1px #75C5FF;
  border: 1px solid #75C5FF;
  outline: none;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out; }

/* ==  Layout
================================================= */
.page-frame {
  position: relative;
  overflow: hidden;
  height: 100%; }

.page {
  position: relative;
  height: 100%; }

.content-frame {
  height: 100%;
  position: relative;
  padding: 0;
  background-color: #ffffff;
  -ms-transform: translate(250px, 0);
  -moz-transform: translate(250px, 0);
  -webkit-transform: translate3d(250px, 0, 0);
  transform: translate(230px, 0);
  -ms-transition: -ms-transform 0.28s ease-in-out;
  -moz-transition: -moz-transform 0.28s ease-in-out;
  -webkit-transition: -webkit-transform 0.28s ease-in-out;
  transition: transform 0.28s ease-in-out;
  /*min-height: 1600px;*/ }

/*Gray Page Header*/
.sp-page-header {
  width: 100%;
  height: 74px;
  background-color: #f4f4f4;
  position: relative; }

.sp-page-header-label {
  font-size: 24px;
  font-weight: normal;
  font-family: Nunito, "Open Sans", Helvetica, sans-serif;
  color: #151618;
  line-height: 70px;
  margin-left: 15px; }

/*Labels*/
.sp-title-label {
  font-weight: 600;
  line-height: 1.43;
  color: #444444;
  padding-bottom: 15px; }

/* Scrolling */
@media (max-width: 767px) {
  .content-window {
    overflow-y: auto;
    height: calc(100% - 116px); }
  .content-frame-breadcrumb {
    overflow-y: auto;
    height: calc(100% - 158px); } }

@media (min-width: 768px) {
  .content-window {
    overflow-y: auto;
    height: calc(100% - 129px); }
  .content-frame-breadcrumb {
    overflow-y: auto;
    height: calc(100vh - 97px); } }

/* 
  ======================================
  Privacy Policy Link
  ======================================
*/
.footer-container {
  background-color: #efefef;
  height: 10px; }

.footer-text {
  font: 11px;
  text-align: center;
  color: #434343;
  line-height: 46px; }

/* 
  ======================================
  Privacy Policy Modal Dialog
  ======================================
*/
#privacy-policy-dialog {
  z-index: 1100;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.66);
  height: 100%;
  width: 100%;
  display: none; }

.ga-modal-title {
  color: #000;
  padding-left: 10px;
  height: 42px;
  font-size: 20px;
  font-weight: normal;
  font-family: Nunito, "Open Sans", Helvetica, sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: calc(100% - 70px);
  display: inline-block; }

.ga-modal-body {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px; }

.ga-modal-header {
  height: 50px;
  line-height: 50px;
  border-radius: 6px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #f7f7f7;
  border-bottom: 1px solid #e2e2e2; }
  .ga-modal-header .close {
    font-size: 40px;
    margin-right: 10px; }
  .ga-modal-header .close span {
    line-height: 50px; }

@media (max-width: 767px) {
  .ga-modal-body {
    height: calc(100% - 50px);
    overflow-y: auto;
    overflow-x: hidden; } }

@media (max-width: 767px) {
  #privacy-policy-dialog > div {
    width: 100%;
    height: 100%;
    padding: 0;
    position: relative;
    display: block;
    background-color: #ffffff; } }

@media (min-width: 767px) {
  #privacy-policy-dialog > div {
    width: 92.5%;
    max-width: 514px;
    margin: 10% auto 1em;
    padding: 0;
    position: relative;
    top: -1em;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
    background-clip: padding-box;
    border-radius: .3125em;
    display: block;
    background-color: #ffffff; } }

@media (max-width: 767px) {
  .privacy-policy-link {
    height: 60px;
    background-color: #e2e2e2;
    margin: 10px; } }

@media (min-width: 767px) {
  .privacy-policy-link {
    width: 494px;
    height: 60px;
    background-color: #e2e2e2;
    margin: 10px; } }

.text-link a {
  font-weight: 600;
  color: #0074DB;
  line-height: 60px;
  padding-left: 10px; }

.text-link a:visited,
.text-link a:hover,
.text-link a:active {
  color: #0074DB; }

#sign-out-dialog {
  z-index: 1100;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.66);
  height: 100%;
  width: 100%;
  display: none; }

@media (max-width: 767px) {
  #sign-out-dialog > div {
    width: 200px;
    height: 100%;
    padding: 0;
    position: relative;
    display: block;
    background-color: #ffffff; } }

@media (min-width: 767px) {
  #sign-out-dialog > div {
    width: 92.5%;
    max-width: 514px;
    margin: 10% auto 1em;
    padding: 0;
    position: relative;
    top: -1em;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
    background-clip: padding-box;
    border-radius: .3125em;
    display: block;
    background-color: #ffffff; } }

#sign-out-message {
  padding: 8px; }

/* 
  ======================================
  Error Modal Dialog
  ======================================
*/
#elcn-full-page-error {
  z-index: 1100;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.66);
  height: 100%;
  width: 100%;
  display: none; }

#elcn-full-page-error > div {
  width: 92.5%;
  max-width: 500px;
  margin: 10% auto 1em;
  padding: 0;
  position: relative;
  top: -1em;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
  background-clip: padding-box;
  border-radius: .3125em;
  display: block;
  background-color: #ffffff; }

.ui-dialog-header {
  overflow: hidden;
  z-index: 10;
  padding: 0;
  display: block;
  position: relative;
  width: auto;
  margin: 0;
  background-color: #7100EB;
  color: #ffffff;
  font-weight: 600; }

.ui-dialog-title {
  font-size: 20px;
  padding: 10px; }

.ui-dialog-content {
  display: block;
  position: relative;
  width: auto;
  margin: 0;
  border-width: 0;
  overflow: visible;
  overflow-x: hidden;
  padding: 1em;
  font-size: 15px;
  background-color: #ffffff; }

.preview {
  overflow: auto; }

.close-error-dialog {
  font-size: 25px;
  float: right; }

#elcn-error-dialog-ok {
  margin-top: 20px; }

.elcn-error-header {
  margin-top: 20px;
  margin-bottom: 50px; }

.elcn-error-page-text {
  font-size: 1.2em; }

.auth-error p, .auth-error ul {
  text-align: left; }

.auth-error p {
  margin-bottom: 30px; }

.auth-error ul {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #FFF0F0; }

.panel-upcoming {
  min-height: 63px;
  max-width: 450px;
  background-color: #ffffff;
  box-shadow: 0 4px 0 0 #d5d5d5;
  border-right: solid 1px #e2e2e2;
  border-top: solid 1px #e2e2e2;
  border-bottom: solid 1px #e2e2e2;
  margin-bottom: 15px; }

.appointment-upcoming-container {
  display: inline-block;
  padding: 10px 15px 10px 20px;
  width: calc(100% - 60px); }

.appointment-date {
  width: 60px;
  height: 63px;
  background-color: #2874BB;
  display: inline-block;
  box-shadow: 0 4px 0 0 #d5d5d5;
  border-bottom: solid 1px #e2e2e2;
  vertical-align: top;
  text-align: center;
  padding-top: 10px; }

.appointment-time .appointment-time a,
.appointment-time a:hover,
.appointment-time a:link,
.appointment-time a:visited {
  color: #0074DB;
  display: block;
  font-weight: 600;
  text-decoration: none; }

.label-day {
  font-size: 24px;
  font-weight: bold;
  line-height: 0.83;
  color: #ffffff; }

.label-month {
  display: block;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.43;
  color: #ffffff; }

/*Contact labels*/
.label-header {
  font-size: 16px;
  color: #444444; }

.label-header a,
.label-header a:hover,
.label-header a:link,
.label-header a:visited {
  text-decoration: none;
  color: #0074DB; }

.label-contact-info {
    font-size: 14px;
    font-weight: normal;
    color: #6f6f6f; }

/*Contact ellipsis*/
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  width: calc(100% - 10px);
  white-space: nowrap; }

/*Apppointment ellipsis*/
.appt-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  display: block; }

@media (max-width: 767px) {
  .appointment-upcoming-container {
    padding: 10px 4px 10px 7px;
    font-size: 12px;
    width: calc(100% - 53px); }
  .appointment-date {
    width: 53px; } }

/* 
  ======================================
  No-Data Pages
  ======================================
*/
.no-data-page {
  font-size: 1.5em;
  text-align: center;
  color: #777;
  margin-top: 100px; }

/* 
  ======================================
  Student Assistance Styles
  ======================================
*/
@media (max-width: 767px) {
  .sp-alert-notes {
    overflow-y: hidden !important;
    height: 100% !important;
    margin-bottom: 20px; } }

.sp-container {
  padding: 25px; }

.sp-request-modal {
  height: 485px;
  overflow-y: auto; }

.assistance-alerts-dropdown {
  width: 100%; }
  .assistance-alerts-dropdown > button {
    width: 100%;
    text-align: left;
    font-size: 14px; }
  .assistance-alerts-dropdown > .esg-button {
    border-radius: 0.429rem; }
  .assistance-alerts-dropdown > .esg-button--secondary {
    background-color: #FFFFFF; }

.assistance-notes > textarea {
  width: 100%;
  resize: none;
  overflow-y: auto; }

.alert-instructions {
  padding: 5px;
  white-space: pre-wrap; }

#alert-buttons-panel {
  position: relative;
  padding-top: 30px; }

.attachments-area-div {
  clear: both; }

.remove-attachment {
  display: inline-block;
  float: right;
  cursor: pointer;
  height: 14px;
  width: 14px;
  background-image: url("../Content/Images/trash.svg");
  margin-top: 10px; }

.attachment-name {
  display: inline-block;
  float: left;
  padding-top: 3px;
  padding-bottom: 3px;
  width: 90%;
  white-space: nowrap;
  overflow: hidden; }

.file-upload-label {
  background-color: white;
  color: black;
  border: 1.5px solid #0074DB;
  cursor: pointer;
  border-radius: 5em;
  padding: 0.85rem 1.625rem 0.75rem 1.625rem;
  margin-right: 5px;
  font-weight: 500; }

#file-total-count {
  display: inline;
  clear: right; }

.file-error {
  /*background-color: #fce3dd;*/
  padding-top: 3px;
  padding-bottom: 3px;
  color: #a61d20;
  margin: 0;
  /*box-shadow: inset 0 -0.25rem 0 0 rgba(205, 59, 62, 0.15);*/ }

.attachments-title-label {
  font-weight: 600;
  padding-top: 5px;
  padding-bottom: 5px; }

.attachments-title-label.required::before {
  content: "*";
  color: red; }

.preview {
  clear: both; }

.attachment-list {
  padding-left: 0;
  list-style-type: none; }

.sp-large-bn {
  width: 60%; }

.sp-medium-bn {
  width: 30%; }

.sp-dropdown {
  white-space: normal; }

.sp-dropdown__menu {
  font-size: 14px;
  max-height: 250px;
  overflow-y: auto;
  width: 100%; }

.sp-alert {
  display: none;
  font-size: 14px;
  max-width: 100%; }

.sp-alert-success-header {
  font-weight: 600; }

.sp-alert-notes {
  border-top: 1px solid #e2e2e2;
  border-width: 1px 0 1px 0;
  padding: 15px 15px 15px 19px;
  font-weight: normal;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: normal;
  height: 290px; }

#sp-request-confirmation {
  display: none; }

/* 
  ======================================
  Scrollbars
  ======================================
*/
::-webkit-scrollbar {
  width: 8px; }

::-webkit-scrollbar-track {
  /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
  background-color: #F5F5F5;
  border-radius: 10px; }

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #DEDCDC; }