/* ==========================================================================
   Layout Helpers
   ========================================================================== */
.clear {
  clear: both; /* legacy float clearing */
}

br.clear {
  line-height: 0px; /* legacy clearfix using <br> */
  height: 0px;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix {
  zoom: 1;
}

div.right {
  text-align: right;
}

span.right,
.floatright {
  float: right;
}

.floatleft {
  float: left;
}

.nowrap {
  white-space: nowrap;
}

br.form {
  clear: left;
}

div.center {
  text-align: center;
}

.centercontent {
  margin-left: 180px;
  padding-left: 10px;
  margin-top: 10px;
}

/* ==========================================================================
   Typography/Text Helpers
   ========================================================================== */
.warn {
  color: #c40;
}

.grey {
  color: #757575;
}

.itemgrey {
  opacity: 0.5;
}

.red {
  color: red;
}

.small {
  font-size: 12px;
  padding: 0.25rem 0;
}

label.error {
  color: #db0000;
  font-style: italic;
  display: block;
}

.noticetext,
a.noticetext,
a.noticetext:link,
a.noticetext:visited {
  color: var(--red-600);
}

input:invalid {
  background-color: #faa;
}

.cattothdr {
  font-variant: small-caps;
}

/* ==========================================================================
   Accessibility Helpers
   ========================================================================== */
.screenreader,
.sr-only {
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  color: transparent;
}

.u-sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  position: absolute !important;
  width: 1px;
}

/* ==========================================================================
   Visual Helpers
   ========================================================================== */
.u-button-reset {
  /* Lux reset class */
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
  text-align: inherit;
}

img.faded {
  opacity: 0.3; /* modern browsers */
}

.hidden,
.pseudohidden {
  visibility: hidden;
  position: absolute;
  height: 0;
}

.showinmobile {
  display: none;
}

.showMobile {
  display: none;
}

.hide {
  display: none;
  transition:
    opacity 0.1s ease-out,
    visibility 0.1s ease-out;
}

.close .hide {
  opacity: 0;
  visibility: hidden;
}

.collapsible-item {
  cursor: pointer;
}

.arrow-down::after,
.arrow-up::after {
  padding-left: 0.2em;
  font-size: 70%;
  position: relative;
  top: -0.2em;
  text-decoration: none;
}

.arrow-down::after {
  content: "\25bc";
}

.arrow-up::after {
  content: "\25b2";
}

.open > .dropdown-menu {
  display: block;
}

span.instronly {
  visibility: hidden;
}

.activetab {
  background-color: var(--indigo-800) !important;
}

.sysnotice {
  border: 1px solid #faa;
  background-color: #fff3f3;
  padding: 5px;
  margin-bottom: 5px;
  clear: both;
  border-radius: 4px;
}

.disable-input {
  opacity: 0.5;
  pointer-events: none;
}

span.formright {
  display: block;
  width: 500px;
  float: left;
  margin-bottom: 10px;
  text-align: left;
}

input.form + label.error {
  float: left;
  display: inline;
  margin-left: 10px;
}

input[type="checkbox"] + label.error {
  float: none;
  display: inline;
  margin-left: 10px;
}

a[target="_blank"]::after {
  content: "Opens Externally";
  color: transparent;
  width: 16px;
  height: 1em;
  overflow: hidden;
  display: inline-block;
  background: url("../../../../img/extlink.png") center right no-repeat;
}

.pointer {
  cursor: pointer;
}

.greystrike {
  text-decoration: line-through; /* legacy strikethrough, used in roster/listusers, gradebook, assess2 Vue components, addqsort + more */
  opacity: 0.6;
}