/* General Styles */
.vertical-align {
  display: flex;
  align-items: center;
}

.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}

.box {
  margin-bottom: 15px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
}
.box-footer {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.content-header > h1 > small {
  color: #000000;
}

.content-header > h1.text-center {
  font-size: 48pt;
}

.btn-interest-suggestion {
  display: block;
  margin: 5px auto;
}

.no-margin-bottom {
  margin-bottom: 0;
}

.btn-filter {
  font-size: 11px;
}

.login-blue-bg {
  float: left;
  width: 100%;
  background-color: #408eba;
}
/* End of General Styles*/

/* Login Styles */
.login-cover-img {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: -10;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pronounce {
  border-radius: 0;
}
.specified-max-width {
  max-width: 1400px;
}
.bold-icon {
  -webkit-text-stroke: 1.5px;
}
.progress-container {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
  .video-options {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}

.progress-box {
  width: 160px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  font-weight: 600;
}
.task-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.to-do-action-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2em 0.6em 0.3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  border-radius: 0.5em;
}

.akala-tagline {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 1px;
  text-align: center;
}
.category-type-width {
  max-width: 110px;
}
@media only screen and (min-width: 100px) and (max-width: 1367px) {
  .category-type-width {
    max-width: 60px;
  }
}

.forgot-password {
  display: inline-block;
  margin-top: 10px;
}

.no-account-container {
  display: flex;
}

.have-akala-code {
  width: 150px;
  height: 100px;
  padding-right: 10px;
  float: left;
}

.vertical-line {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  height: 80px;
}

.request-akala-code {
  width: 150px;
  height: 100px;
  padding-left: 3px;
  float: right;
}

.titok-container {
  display: block;
  max-width: 100%;
  text-align: center;
}

.titok-qr-image {
  display: block;
  max-width: 100%;
}
/* End of Login Styles */

/* Sidebar Styles */
span.logo-mini img {
  width: 100%;
}

header.main-header a.logo {
  background-color: #3c8dbc !important;
}

.student-profile-pic {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50%;
  margin-top: 7px;
}

body.sidebar-collapse .student-profile-pic {
  width: 35px !important;
  height: 35px !important;
  border-radius: 50%;
  margin-top: 7px;
}
/* End of Sidebar Styles */

/* Counselor Toolbar Styles */
.fixed-box {
  position: fixed;
  bottom: 0;
  max-width: 275px;
  z-index: 1049;
  margin-bottom: 0px;
}

.right .direct-chat-text {
  margin-right: 5px;
}

.delete-comment-button,
.delete-message-button {
  border: none;
  background: none;
  margin-left: 5px;
  padding-bottom: 2px;
  color: #999;
}

.delete-comment-button:hover,
.delete-message-button:hover {
  color: #000;
}

.delete-comment-button:focus,
.delete-message-button:focus {
  outline: none;
}

.direct-chat-text {
  white-space: pre-line;
  margin-left: 5px;
}

.direct-chat textarea {
  max-height: 150px;
}

.start-session-loading {
  padding-right: 5px;
}

#counselor-session {
  border-top: 4px solid #00c0ef;
}

#counselor-session .box-body textarea.form-control,
textarea.form-control.counselor-session-text {
  height: 75px;
}

.landscape-notice {
  display: none;
}

/* iPad in landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .fixed-box {
    max-width: 190px;
  }

  .box-header.with-border > .box-title {
    font-size: 12px;
  }
}

/* iPad in portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .fixed-box {
    display: none;
  }

  .landscape-notice {
    display: block;
    position: fixed;
    bottom: 0;
    z-index: 9999;
    margin-bottom: 0px;
    background-color: #f39c12;
    width: 100%;
    font-size: 19px;
    padding: 15px 0 15px 8px;
    color: #fff;
  }
}

/* iPhones 6, 7, 8, X in landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  #counselor-session {
    display: none;
  }

  .fixed-box {
    max-width: 150px;
  }

  .fixed-box .box-header .box-title {
    font-size: 12px;
  }
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  #counselor-session {
    display: none;
  }

  .fixed-box {
    max-width: 150px;
  }

  .fixed-box .box-header .box-title {
    font-size: 12px;
  }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
  #counselor-session {
    display: none;
  }

  .fixed-box {
    max-width: 165px;
  }

  .fixed-box .box-header .box-title {
    font-size: 12px;
  }
}

/* iPhones 6, 7, 8, X in Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .fixed-box {
    display: none;
  }

  .landscape-notice {
    display: block;
    position: fixed;
    bottom: 0;
    z-index: 9999;
    margin-bottom: 0px;
    background-color: #f39c12;
    width: 100%;
    font-size: 19px;
    padding: 15px 0 15px 8px;
    color: #fff;
  }
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  .fixed-box {
    display: none;
  }

  .landscape-notice {
    display: block;
    position: fixed;
    bottom: 0;
    z-index: 9999;
    margin-bottom: 0px;
    background-color: #f39c12;
    width: 100%;
    font-size: 19px;
    padding: 15px 0 15px 8px;
    color: #fff;
  }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
  .fixed-box {
    display: none;
  }

  .landscape-notice {
    display: block;
    position: fixed;
    bottom: 0;
    z-index: 9999;
    margin-bottom: 0px;
    background-color: #f39c12;
    width: 100%;
    font-size: 19px;
    padding: 15px 0 15px 8px;
    color: #fff;
  }
}

@media only screen and (max-width: 768px) {
  .scrollable-table {
    overflow: scroll;
  }
}
/* End of iPhones 6, 7, 8, X in Portrait */

#counselor-toolbar {
  opacity: 0;
}

#counselor-toolbar .direct-chat .mark-unread {
  display: none;
}

#counselor-toolbar .direct-chat.closed .badge:empty ~ .mark-unread {
  display: inline;
}

/* End of Counselor Toolbar Styles */

/* To Do Styles */
.todo-list {
  overflow: hidden;
  padding-right: 5px;
}

.todo-custom-checkbox {
  border: 1px #7f7e7e solid;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  text-align: center;
  padding-top: 2px;
}

.hidden-input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.todo-custom-checkbox span {
  color: #7f7e7e;
}

.todo-custom-checkbox:hover,
.todo-custom-checkbox:hover span {
  border-color: #9cd39c;
  color: #9cd39c;
}

li.done > .row.vertical-align > .col-xs-1 > label > .todo-custom-checkbox,
li.done > .row.vertical-align > .col-xs-1 > label > .todo-custom-checkbox span {
  background-color: #9cd39c;
  border-color: #9cd39c;
  color: #fff;
}

li.done > .row.vertical-align > .col-xs-1 > label > .todo-custom-checkbox:hover,
li.done
  > .row.vertical-align
  > .col-xs-1
  > label
  > .todo-custom-checkbox:hover
  span {
  background-color: #3f953f;
  border-color: #3f953f;
  color: #fff;
}

.to-do-category {
  color: #fff;
  font-weight: 700;
  padding: 1px 3px;
  border-radius: 5px;
  font-size: 11px;
}

.general {
  background-color: #605ca8;
}

.bg-timeline-gray {
  color: #000;
  background-color: #7987a1;
}

.classes {
  background-color: #0073b7;
}

.btn-classes {
  background-color: #0073b7;
  color: #ffffff;
}

.btn-classes:hover {
  background-color: #00598d;
  color: #ffffff;
}

.box.box-classes {
  border-top-color: #0073b7;
}

.tests {
  background-color: #65c9cb;
}

.btn-tests {
  background-color: #65c9cb;
  color: #ffffff;
}

.btn-tests:hover {
  background-color: #39a8aa;
  color: #ffffff;
}

.box.box-tests {
  border-top-color: #65c9cb;
}

.awards {
  background-color: #605ca8;
}

.btn-awards {
  background-color: #605ca8;
  color: #ffffff;
}

.btn-awards:hover {
  background-color: #4c4988;
  color: #ffffff;
}

.box.box-awards {
  border-top-color: #605ca8;
}

.extracurriculars {
  background-color: #ff851b;
  color: #ffffff;
}

.btn-extracurriculars {
  background-color: #ff851b;
  color: #ffffff;
}

.btn-extracurriculars:hover {
  background-color: #d46200;
  color: #ffffff;
}

.box.box-extracurriculars {
  border-top-color: #ff851b;
}

.community-service {
  background-color: #00a65a;
}

.summer-experience {
  background-color: #dd4b39;
}

.due-on {
  color: #1e77ab;
  font-weight: 700;
  font-size: 12px;
}

.todo-list .done .text {
  text-decoration: none !important;
}

/* End of To Do Styles*/

/* Interest Survey Styles */
.interests-specified-max-width {
  max-width: 900px;
}
@media only screen and (min-width: 1281px) and (max-width: 1536px) {
  .interests-specified-max-width {
    max-width: 850px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1280px) {
  .interests-specified-max-width {
    max-width: 750px;
  }
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
  .interests-specified-max-width {
    max-width: 600px;
  }
}
.college-interests-custom-checkbox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.college-interests-custom-checkbox > label {
  border: 3px #3f53ba solid;
  background-color: #fef3dd;
  border-radius: 25px;
  text-align: center;
  width: 100%;
  aspect-ratio: 8/7;
}

.college-interests-custom-checkbox > label > img {
  padding: 2px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  width: 100%;
  height: 75%;
  object-fit: scale-down;
}

.college-interests-custom-checkbox > label > span.glyphicon {
  display: none;
  position: absolute;
  font-size: 36pt;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.college-interests-custom-checkbox > label > div.interest-label {
  font-size: 12px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  height: 25%;
  padding-left: 10px;
  padding-right: 10px;
}
@media only screen and (min-width: 769px) and (max-width: 1280px) {
  .college-interests-custom-checkbox > label > div.interest-label {
    font-size: 12px;
  }
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
  .college-interests-custom-checkbox > label > div.interest-label {
    font-size: 9px;
  }
}

.college-interests-custom-checkbox > label:hover {
  border-color: #9cd39c;
  color: #9cd39c;
}

.college-interests-custom-checkbox > label.checked {
  background: #9cd39c;
  border-color: #9cd39c;
  color: #fff;
}

.college-interests-custom-checkbox > label.checked > span.glyphicon {
  display: block;
  color: #fff;
}

.college-interests-custom-checkbox > label.checked > img {
  opacity: 0.7;
}

.college-interests-custom-checkbox > label.checked:hover {
  background-color: #3f953f;
  border-color: #3f953f;
  color: #fff;
}

.interests-custom-checkbox > label {
  border: 5px #7f7e7e solid;
  border-radius: 25px;
  text-align: center;
  width: 100%;
}

.interests-custom-checkbox > label > img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  width: 100%;
  height: 100px;
}

.interests-custom-checkbox > label > span.glyphicon {
  display: none;
  position: absolute;
  font-size: 36pt;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.interests-custom-checkbox > label > div.interest-label {
  font-size: 13px;
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 7px;
  padding-right: 7px;
}

.interests-custom-checkbox > label:hover {
  border-color: #9cd39c;
  color: #9cd39c;
}

.interests-custom-checkbox > label.checked {
  background: #9cd39c;
  border-color: #9cd39c;
  color: #fff;
}

.interests-custom-checkbox > label.checked > span.glyphicon {
  display: block;
  color: #fff;
}

.interests-custom-checkbox > label.checked > img {
  opacity: 0.7;
}

.interests-custom-checkbox > label.checked:hover {
  background-color: #3f953f;
  border-color: #3f953f;
  color: #fff;
}

.interests-box {
  background-color: #c5c5c5;
}

.interests-box .box-title {
  width: 100%;
}

.interest-title-expand-button > button {
  padding: 0px;
}

/* End of Interest Survey Styles*/

/* Subpage Styles */

.subpage-header {
  border-radius: 5px;
  color: #fff;
  margin-bottom: 15px;
  padding: 7px;
  text-align: center;
}

.subpage-title {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 3px;
}

/* AKALA Activity Cards */
.akala-activity-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .akala-activity-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1400px) {
  .akala-activity-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.akala-activity-card {
  height: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

.akala-activity-card .box-header {
  min-height: 60px;
}

.akala-activity-card .box-title {
  font-size: 18px;
  line-height: 1.2;
}

.akala-activity-card .box-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.akala-activity-description {
  flex: 1;
  margin-bottom: 15px;
  max-height: 140px;
  overflow: auto;
}

.akala-activity-description::-webkit-scrollbar {
  width: 6px;
}

.akala-activity-description::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 3px;
}

.akala-activity-description::-webkit-scrollbar-thumb {
  background: #d2d6de;
  border-radius: 3px;
}

.activity-card-link {
  align-self: flex-start;
}

#edit-class-school-text-field,
#add-class-school-text-field,
#edit-class-name-text-field,
#add-class-name-text-field,
#add-extracurricular-school-text-field,
#edit-extracurricular-school-text-field,
#add-extracurricular-name-text-field,
#edit-extracurricular-name-text-field,
#add-communityService-school-text-field,
#edit-communityService-school-text-field,
#add-communityService-name-text-field,
#edit-communityService-name-text-field,
#add-summerExperience-school-text-field,
#edit-summerExperience-school-text-field,
#add-summerExperience-name-text-field,
#edit-summerExperience-name-text-field,
#add-ec-weekly-hours,
#edit-ec-weekly-hours,
#add-cs-weekly-hours,
#edit-cs-weekly-hours {
  display: none;
}

.modal button[name="submit"] {
  width: 150px;
}

.modal button[name="delete"] {
  width: 100px;
}

.interest-button {
  width: 200px;
}

.fa-green {
  color: #3f953f;
}

.weekpickercalendar
  .bootstrap-datetimepicker-widget
  .datepicker-days
  table
  tbody
  tr:hover {
  background-color: #999;
}

/* End of Subpage Styles*/

/* Ted Talks Styles*/

.talks-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.talks-list > .item {
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  background: #fff;
}

.talks-list > .item:before,
.talks-list > .item:after {
  content: " ";
  display: table;
}

.talks-list > .item:after {
  clear: both;
}

.talks-list .talk-img {
  float: left;
}

.talks-list .talk-img img {
  width: 150px;
  height: 100px;
}

.talks-list .talk-info {
  margin-left: 160px;
}

.talks-list .talk-title {
  font-weight: 600;
}

.talks-list .talk-speaker {
  display: block;
  color: #999;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.talks-list .talk-description {
  display: inline-block;
  overflow: hidden;
}

.talk-list-in-box > .item {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid #f4f4f4;
}

.talk-list-in-box > .item:last-of-type {
  border-bottom-width: 0;
}

.talks-video {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}

.talks-video > iframe {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

#journal-alert-success,
#journal-alert-fail {
  display: none;
}

#interests-alert {
  opacity: 0;
  padding: 10px;
}

#interests-alert span {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* End of Ted Talks Styles*/

/* Start of Calendar Styles*/

.loading-sign-wrapper {
  position: relative;
}

.loading-sign {
  width: 100%;
  height: 2000px;
  background-color: white;
  z-index: 10;
}

.loading-sign i {
  position: absolute;
  top: 400px;
}

/* End of Calendar Styles*/

/* Extracurricular/Community Service Styles */
.center-delete-icon {
  margin-bottom: 0;
  padding-top: 7px;
  text-align: right;
}
/* End of Extracurricular/Community Service Styles */

.nav--switcher {
  display: flex;
}

.switcher {
  display: flex !important;
  align-items: center;
}

.switcher select {
  width: 100px;
  padding: 2px 4px;
  height: 26px;
  background: #ecf0f5;
  border: 2px;
}

.switcher-button {
  height: 28px;
  padding: 0px 8px;
  background: #2f424a;
  border: 0px white;
  color: white;
}

.switcher-button:hover {
  background: #333;
}

.switcher--registration {
  justify-content: flex-end;
  margin: 20px;
}

.info-box-content > .info-box-text {
  text-align: justify;
  word-break: keep-all;
  white-space: normal;
  overflow: none;
}

.home-shortcut-icon-box {
  display: block;
  height: 50px;
  width: 50px;
  text-align: center;
  font-size: 40px;
  line-height: 60px;
}

.home-shortcut-text {
  text-transform: uppercase;
  font-size: 18px;
  line-height: 26px;
  width: 100%;
}

.home-shortcut-text-box {
  height: 55px;
  margin-top: 5px;
}
.home-shortcut-classes {
  margin-top: 5px;
}
.classes-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 110px;
}

@media only screen and (max-width: 500px) {
  .home-shortcut-icon-box {
    display: block;
    height: 40px;
    width: 50px;
    text-align: center;
    font-size: 35px;
    line-height: 45px;
  }
  .classes-wrapper {
    height: 90px;
  }

  .home-shortcut-text {
    text-transform: uppercase;
    line-height: 22px;
    font-size: 20px;
  }

  .home-shortcut-text-box {
    height: 45px;
  }
}

/* reduce padding on mobile screens */
@media (max-width: 767px) {
  .main-sidebar {
    padding-top: 50px;
  }
  .fixed .content-wrapper {
    padding-top: 50px;
  }
}
.box-header-align {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.box-header-align > .box-title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-input {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  outline: none;
  border-right: none;
}
.search-input:focus {
  border-color: #d2d6de;
  outline: none;
  box-shadow: none;
}
.filter-dropdown {
  z-index: 100;
  display: none;
  position: absolute;
  top: 60px;
  right: 20px;
  border: 2px solid #d2d6de;
  padding: 15px;
  border-radius: 10px;
  background-color: white;
  max-height: 500px;
  min-width: 240px;
  overflow-y: scroll;
}
.filter-dropdown > p {
  font-weight: 750;
}
.filter-dropdown > button {
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2em 0.6em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  border-radius: 0.5em;
  background-color: #dd4b39;
  border: none;
  margin-bottom: 10px;
}
.filter-dropdown > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.filter-dropdown > ul > li > input {
  cursor: pointer;
}
.filter-icon {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: white;
  border-left: none;
  color: #58c3cc;
  border: 1px solid #d2d6de;
  padding: 6px 10px;
  border-left: none;
  cursor: pointer;
}
.college-picker-modal-header {
  color: #410955;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
}
.title-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.title-container > h2 {
  margin: 0;
}
.icon-container > ul {
  display: flex;
  list-style-type: none;
}
.icon-container > ul > li {
  display: inline;
  margin-right: 5px;
}
.college-icon {
  color: #777;
  font-size: 32px;
}
.college-table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.college-table-row > .college-data {
  display: flex;
  cursor: pointer;
}
.status-label {
  border-radius: 5px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  height: fit-content;
  font-size: 13px;
}
.college-picker-modal-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #000000;
  font-weight: 700;
  opacity: 1;
}
.college-picker-modal-body {
  display: flex;
  flex-direction: column;
}
.modal-college-status-select {
  width: 100%;
}
.error-style {
  color: #dd4b39;
  font-weight: 800;
}
.modal-student-notes {
  margin-top: 12px;
}
.modal-student-notes > textarea {
  resize: none;
  width: 100%;
  min-height: 100px;
  padding: 5px;
}
.modal-student-notes > textarea:focus {
  outline: none;
}
.college-picker-modal-body-top {
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  width: 100%;
  font-weight: 600;
}
.college-picker-modal-body-center {
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
  margin-bottom: 10px;
}
.college-picker-modal-body-center {
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  padding: 10px;
  margin-bottom: 10px;
  font-weight: 600;
}
.college-picker-modal-body-left-column {
  border-radius: 20px;
  width: 50%;
  padding: 10px;
  display: flex;
}
.college-picker-modal-body-left-column > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.college-picker-modal-body-center > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.college-picker-modal-body-center > ul > li {
  display: flex;
  justify-content: space-between;
  text-transform: capitalize;
}
.college-picker-modal-body-center > ul > li > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-weight: 700;
}
.college-picker-admit-rates-table {
  width: 50%;
}
.virtual_tour_galery {
  margin-top: 5px;
}
.virtual_tour_galery > ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  justify-content: center;
}
.virtual_tour_galery > ul > li {
  margin-left: 10px;
  cursor: pointer;
  font-size: 10px;
}
.virtual_tour_galery_selected {
  color: #3c8dbc;
}
.college-picker-modal-body-left-column > ul > li {
  display: flex;
  justify-content: space-between;
  text-transform: capitalize;
}
.college-picker-modal-body-right-column {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}
.college-picker-modal-body-right-column > div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.not-iframe-link {
  font-size: 22px;
}
.college-video {
  width: 260px;
  height: 192px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}
.college-picker-modal-footer {
  padding-top: 0;
  padding-bottom: 0;
}
.link-with-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.link-with-logo > a {
  color: black;
  padding-bottom: 10px;
  font-size: medium;
}
.background-college-image {
  width: 260px;
  height: 192px;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: end;
  justify-content: center;
  z-index: 9;
}
.background-college-image > a {
  color: white;
  padding-bottom: 10px;
  font-size: medium;
}
.instagram {
  background: radial-gradient(
      circle farthest-corner at 35% 90%,
      #fec564,
      transparent 50%
    ),
    radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
    radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
    radial-gradient(
      ellipse farthest-corner at 20% -50%,
      #5258cf,
      transparent 50%
    ),
    radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
    radial-gradient(
      ellipse farthest-corner at 60% -20%,
      #893dc2,
      transparent 50%
    ),
    radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
    linear-gradient(
      #6559ca,
      #bc318f 30%,
      #e33f5f 50%,
      #f77638 70%,
      #fec66d 100%
    );
}
.chat-buttons {
  border: 1px solid white !important;
  border-radius: 6px !important;
  padding: 5px 8px;
  font-size: 14px;
}
.filter-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.filter-container > div {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #666;
  padding: 2px 5px;
  border-radius: 3px;
}
.filter-container > div:hover {
  cursor: pointer;
}
.filter-container > div.active {
  background-color: #337ab7;
  color: white;
  border: none;
}
.status-container {
  display: flex;
  justify-content: space-between;
}
.status-container > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  border-radius: 8px;
  padding: 2px 5px;
  border-width: 2px;
  border-style: solid;
  cursor: pointer;
}
#questions-scroll-body > div {
  word-wrap: break-word;
}
#questions-scroll-body > div > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#questions-scroll-body > div > ul > li > a {
  color: black;
}
#questions-scroll-body > div > ul > li > a:hover {
  color: #00c0ef;
}
.content-editable-box {
  padding: 6px 12px;
  font-size: 14px;
  color: #555;
  border: 1px solid #ccc;
}
.content-editable-box:empty::before {
  content: attr(placeholder);
  color: #9f9f9f;
}
.content-editable-box:empty:focus::before {
  content: "";
}
.title-error {
  display: none;
  color: #dd4b39;
  font-weight: 700;
}

@media (max-width: 767px) {
  .college-picker-modal-body-top {
    flex-direction: column;
  }
  .college-picker-modal-header {
    flex-direction: column-reverse;
  }
  .college-picker-modal-body {
    flex-direction: column;
  }
  .college-picker-modal-body-left-column {
    width: 100%;
  }
  .college-picker-modal-body-right-column {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box-header-align {
    flex-direction: column;
  }
  .box-header-align > .box-title {
    margin-bottom: 10px;
  }
  .box-header-align > .box-tools {
    text-align: center;
    margin-bottom: 10px;
  }
  .box-header-align > .box-tools > ul > li > a {
    font-size: 10px;
    padding: 5px 9px;
  }
}

/* ============ College detail modal — hero dossier layout ============ */
.cp-b-dialog {
  width: 95%;
  max-width: 920px;
}
.cp-b-modal-header {
  border: 0;
  padding: 8px 12px 0;
  min-height: 0;
}
.cp-b-body {
  padding: 8px 22px 22px;
  background: #f4f6f9;
}
.cp-b-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  padding: 18px 20px;
}
.cp-b-badge {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: #0f2740;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  overflow: hidden;
}
.cp-b-badge > img {
  max-width: 100%;
  max-height: 100%;
}
.cp-b-hero-main {
  flex: 1;
  min-width: 0;
}
.cp-b-hero-name {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: #2b2b2b;
}
.cp-b-hero-loc {
  color: #7f7e7e;
  font-size: 13px;
  margin-top: 4px;
}
.cp-b-hero-social ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 12px;
  align-items: center;
}
.cp-b-hero-social .college-icon {
  font-size: 22px;
}
.cp-b-hero-social img {
  width: 24px;
  height: 24px;
}
.cp-b-stats {
  display: flex;
  gap: 12px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.cp-stat {
  flex: 1 1 100px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
}
.cp-stat-k {
  color: #7f7e7e;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cp-stat-v {
  font-size: 18px;
  font-weight: 700;
  margin-top: 2px;
  color: #2b2b2b;
}
.cp-b-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* "Back to all schools" — the detail view is a modal over the list, so this is
   the only explicit way back to the search results. */
.cp-b-back {
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #506df7;
}
.cp-b-back:hover {
  text-decoration: underline;
}
.cp-b-back .fa {
  margin-right: 6px;
}
/* Admit type sits in the hero with the rest of the general info; it wraps onto
   a second line for colleges with many admission types. */
.cp-b-hero-admit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin-top: 8px;
}
.cp-b-hero-admit-k {
  color: #7f7e7e;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.cp-b-hero-admit .cp-pill {
  margin-bottom: 4px;
}
.cp-b-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  padding: 18px 20px;
}
.cp-sec-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7f7e7e;
  font-weight: 700;
  margin: 0 0 10px;
}
.cp-pill {
  display: inline-block;
  padding: 3px 10px;
  margin: 0 6px 6px 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #eef5ee;
  color: #3f953f;
  border: 1px solid #9cd39c;
  white-space: nowrap;
}
.cp-muted {
  color: #7f7e7e;
}
.cp-right {
  text-align: right;
  font-weight: 600;
}
.cp-b-admit {
  width: 100%;
  font-size: 14px;
  border-collapse: collapse;
}
.cp-b-admit td {
  padding: 3px 0;
}
/* Compact tour box — it shares the grid row with the notes card now. */
.college-video-compact .link-with-logo,
.college-video-compact .background-college-image {
  min-height: 140px;
}
.cp-b-actions {
  margin-top: 0;
}
.cp-b-actions .college-picker-modal-footer {
  border-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}

@media (max-width: 767px) {
  .cp-b-body {
    padding: 8px 12px 16px;
  }
  .cp-b-hero {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .cp-b-hero-social ul {
    justify-content: flex-start;
  }
  .cp-b-stats > .cp-stat {
    flex: 1 1 calc(50% - 6px);
  }
  .cp-b-grid {
    grid-template-columns: 1fr;
  }
  .status-container {
    flex-wrap: wrap;
    gap: 8px;
  }
  .status-container > div {
    flex: 1 1 calc(50% - 4px);
    width: auto;
  }
}