/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

@media print {
  * {
    text-shadow: none !important;
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  select {
    background: #fff !important;
  }

  .navbar {
    display: none;
  }

  .table td,
  .table th {
    background-color: #fff !important;
  }

  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }

  .label {
    border: 1px solid #000;
  }

  .table {
    border-collapse: collapse !important;
  }

  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.glyphicon-asterisk:before {
  content: "\2a";
}

.glyphicon-plus:before {
  content: "\2b";
}

.glyphicon-euro:before {
  content: "\20ac";
}

.glyphicon-minus:before {
  content: "\2212";
}

.glyphicon-cloud:before {
  content: "\2601";
}

.glyphicon-envelope:before {
  content: "\2709";
}

.glyphicon-pencil:before {
  content: "\270f";
}

.glyphicon-glass:before {
  content: "\e001";
}

.glyphicon-music:before {
  content: "\e002";
}

.glyphicon-search:before {
  content: "\e003";
}

.glyphicon-heart:before {
  content: "\e005";
}

.glyphicon-star:before {
  content: "\e006";
}

.glyphicon-star-empty:before {
  content: "\e007";
}

.glyphicon-user:before {
  content: "\e008";
}

.glyphicon-film:before {
  content: "\e009";
}

.glyphicon-th-large:before {
  content: "\e010";
}

.glyphicon-th:before {
  content: "\e011";
}

.glyphicon-th-list:before {
  content: "\e012";
}

.glyphicon-ok:before {
  content: "\e013";
}

.glyphicon-remove:before {
  content: "\e014";
}

.glyphicon-zoom-in:before {
  content: "\e015";
}

.glyphicon-zoom-out:before {
  content: "\e016";
}

.glyphicon-off:before {
  content: "\e017";
}

.glyphicon-signal:before {
  content: "\e018";
}

.glyphicon-cog:before {
  content: "\e019";
}

.glyphicon-trash:before {
  content: "\e020";
}

.glyphicon-home:before {
  content: "\e021";
}

.glyphicon-file:before {
  content: "\e022";
}

.glyphicon-time:before {
  content: "\e023";
}

.glyphicon-road:before {
  content: "\e024";
}

.glyphicon-download-alt:before {
  content: "\e025";
}

.glyphicon-download:before {
  content: "\e026";
}

.glyphicon-upload:before {
  content: "\e027";
}

.glyphicon-inbox:before {
  content: "\e028";
}

.glyphicon-play-circle:before {
  content: "\e029";
}

.glyphicon-repeat:before {
  content: "\e030";
}

.glyphicon-refresh:before {
  content: "\e031";
}

.glyphicon-list-alt:before {
  content: "\e032";
}

.glyphicon-lock:before {
  content: "\e033";
}

.glyphicon-flag:before {
  content: "\e034";
}

.glyphicon-headphones:before {
  content: "\e035";
}

.glyphicon-volume-off:before {
  content: "\e036";
}

.glyphicon-volume-down:before {
  content: "\e037";
}

.glyphicon-volume-up:before {
  content: "\e038";
}

.glyphicon-qrcode:before {
  content: "\e039";
}

.glyphicon-barcode:before {
  content: "\e040";
}

.glyphicon-tag:before {
  content: "\e041";
}

.glyphicon-tags:before {
  content: "\e042";
}

.glyphicon-book:before {
  content: "\e043";
}

.glyphicon-bookmark:before {
  content: "\e044";
}

.glyphicon-print:before {
  content: "\e045";
}

.glyphicon-camera:before {
  content: "\e046";
}

.glyphicon-font:before {
  content: "\e047";
}

.glyphicon-bold:before {
  content: "\e048";
}

.glyphicon-italic:before {
  content: "\e049";
}

.glyphicon-text-height:before {
  content: "\e050";
}

.glyphicon-text-width:before {
  content: "\e051";
}

.glyphicon-align-left:before {
  content: "\e052";
}

.glyphicon-align-center:before {
  content: "\e053";
}

.glyphicon-align-right:before {
  content: "\e054";
}

.glyphicon-align-justify:before {
  content: "\e055";
}

.glyphicon-list:before {
  content: "\e056";
}

.glyphicon-indent-left:before {
  content: "\e057";
}

.glyphicon-indent-right:before {
  content: "\e058";
}

.glyphicon-facetime-video:before {
  content: "\e059";
}

.glyphicon-picture:before {
  content: "\e060";
}

.glyphicon-map-marker:before {
  content: "\e062";
}

.glyphicon-adjust:before {
  content: "\e063";
}

.glyphicon-tint:before {
  content: "\e064";
}

.glyphicon-edit:before {
  content: "\e065";
}

.glyphicon-share:before {
  content: "\e066";
}

.glyphicon-check:before {
  content: "\e067";
}

.glyphicon-move:before {
  content: "\e068";
}

.glyphicon-step-backward:before {
  content: "\e069";
}

.glyphicon-fast-backward:before {
  content: "\e070";
}

.glyphicon-backward:before {
  content: "\e071";
}

.glyphicon-play:before {
  content: "\e072";
}

.glyphicon-pause:before {
  content: "\e073";
}

.glyphicon-stop:before {
  content: "\e074";
}

.glyphicon-forward:before {
  content: "\e075";
}

.glyphicon-fast-forward:before {
  content: "\e076";
}

.glyphicon-step-forward:before {
  content: "\e077";
}

.glyphicon-eject:before {
  content: "\e078";
}

.glyphicon-chevron-left:before {
  content: "\e079";
}

.glyphicon-chevron-right:before {
  content: "\e080";
}

.glyphicon-plus-sign:before {
  content: "\e081";
}

.glyphicon-minus-sign:before {
  content: "\e082";
}

.glyphicon-remove-sign:before {
  content: "\e083";
}

.glyphicon-ok-sign:before {
  content: "\e084";
}

.glyphicon-question-sign:before {
  content: "\e085";
}

.glyphicon-info-sign:before {
  content: "\e086";
}

.glyphicon-screenshot:before {
  content: "\e087";
}

.glyphicon-remove-circle:before {
  content: "\e088";
}

.glyphicon-ok-circle:before {
  content: "\e089";
}

.glyphicon-ban-circle:before {
  content: "\e090";
}

.glyphicon-arrow-left:before {
  content: "\e091";
}

.glyphicon-arrow-right:before {
  content: "\e092";
}

.glyphicon-arrow-up:before {
  content: "\e093";
}

.glyphicon-arrow-down:before {
  content: "\e094";
}

.glyphicon-share-alt:before {
  content: "\e095";
}

.glyphicon-resize-full:before {
  content: "\e096";
}

.glyphicon-resize-small:before {
  content: "\e097";
}

.glyphicon-exclamation-sign:before {
  content: "\e101";
}

.glyphicon-gift:before {
  content: "\e102";
}

.glyphicon-leaf:before {
  content: "\e103";
}

.glyphicon-fire:before {
  content: "\e104";
}

.glyphicon-eye-open:before {
  content: "\e105";
}

.glyphicon-eye-close:before {
  content: "\e106";
}

.glyphicon-warning-sign:before {
  content: "\e107";
}

.glyphicon-plane:before {
  content: "\e108";
}

.glyphicon-calendar:before {
  content: "\e109";
}

.glyphicon-random:before {
  content: "\e110";
}

.glyphicon-comment:before {
  content: "\e111";
}

.glyphicon-magnet:before {
  content: "\e112";
}

.glyphicon-chevron-up:before {
  content: "\e113";
}

.glyphicon-chevron-down:before {
  content: "\e114";
}

.glyphicon-retweet:before {
  content: "\e115";
}

.glyphicon-shopping-cart:before {
  content: "\e116";
}

.glyphicon-folder-close:before {
  content: "\e117";
}

.glyphicon-folder-open:before {
  content: "\e118";
}

.glyphicon-resize-vertical:before {
  content: "\e119";
}

.glyphicon-resize-horizontal:before {
  content: "\e120";
}

.glyphicon-hdd:before {
  content: "\e121";
}

.glyphicon-bullhorn:before {
  content: "\e122";
}

.glyphicon-bell:before {
  content: "\e123";
}

.glyphicon-certificate:before {
  content: "\e124";
}

.glyphicon-thumbs-up:before {
  content: "\e125";
}

.glyphicon-thumbs-down:before {
  content: "\e126";
}

.glyphicon-hand-right:before {
  content: "\e127";
}

.glyphicon-hand-left:before {
  content: "\e128";
}

.glyphicon-hand-up:before {
  content: "\e129";
}

.glyphicon-hand-down:before {
  content: "\e130";
}

.glyphicon-circle-arrow-right:before {
  content: "\e131";
}

.glyphicon-circle-arrow-left:before {
  content: "\e132";
}

.glyphicon-circle-arrow-up:before {
  content: "\e133";
}

.glyphicon-circle-arrow-down:before {
  content: "\e134";
}

.glyphicon-globe:before {
  content: "\e135";
}

.glyphicon-wrench:before {
  content: "\e136";
}

.glyphicon-tasks:before {
  content: "\e137";
}

.glyphicon-filter:before {
  content: "\e138";
}

.glyphicon-briefcase:before {
  content: "\e139";
}

.glyphicon-fullscreen:before {
  content: "\e140";
}

.glyphicon-dashboard:before {
  content: "\e141";
}

.glyphicon-paperclip:before {
  content: "\e142";
}

.glyphicon-heart-empty:before {
  content: "\e143";
}

.glyphicon-link:before {
  content: "\e144";
}

.glyphicon-phone:before {
  content: "\e145";
}

.glyphicon-pushpin:before {
  content: "\e146";
}

.glyphicon-usd:before {
  content: "\e148";
}

.glyphicon-gbp:before {
  content: "\e149";
}

.glyphicon-sort:before {
  content: "\e150";
}

.glyphicon-sort-by-alphabet:before {
  content: "\e151";
}

.glyphicon-sort-by-alphabet-alt:before {
  content: "\e152";
}

.glyphicon-sort-by-order:before {
  content: "\e153";
}

.glyphicon-sort-by-order-alt:before {
  content: "\e154";
}

.glyphicon-sort-by-attributes:before {
  content: "\e155";
}

.glyphicon-sort-by-attributes-alt:before {
  content: "\e156";
}

.glyphicon-unchecked:before {
  content: "\e157";
}

.glyphicon-expand:before {
  content: "\e158";
}

.glyphicon-collapse-down:before {
  content: "\e159";
}

.glyphicon-collapse-up:before {
  content: "\e160";
}

.glyphicon-log-in:before {
  content: "\e161";
}

.glyphicon-flash:before {
  content: "\e162";
}

.glyphicon-log-out:before {
  content: "\e163";
}

.glyphicon-new-window:before {
  content: "\e164";
}

.glyphicon-record:before {
  content: "\e165";
}

.glyphicon-save:before {
  content: "\e166";
}

.glyphicon-open:before {
  content: "\e167";
}

.glyphicon-saved:before {
  content: "\e168";
}

.glyphicon-import:before {
  content: "\e169";
}

.glyphicon-export:before {
  content: "\e170";
}

.glyphicon-send:before {
  content: "\e171";
}

.glyphicon-floppy-disk:before {
  content: "\e172";
}

.glyphicon-floppy-saved:before {
  content: "\e173";
}

.glyphicon-floppy-remove:before {
  content: "\e174";
}

.glyphicon-floppy-save:before {
  content: "\e175";
}

.glyphicon-floppy-open:before {
  content: "\e176";
}

.glyphicon-credit-card:before {
  content: "\e177";
}

.glyphicon-transfer:before {
  content: "\e178";
}

.glyphicon-cutlery:before {
  content: "\e179";
}

.glyphicon-header:before {
  content: "\e180";
}

.glyphicon-compressed:before {
  content: "\e181";
}

.glyphicon-earphone:before {
  content: "\e182";
}

.glyphicon-phone-alt:before {
  content: "\e183";
}

.glyphicon-tower:before {
  content: "\e184";
}

.glyphicon-stats:before {
  content: "\e185";
}

.glyphicon-sd-video:before {
  content: "\e186";
}

.glyphicon-hd-video:before {
  content: "\e187";
}

.glyphicon-subtitles:before {
  content: "\e188";
}

.glyphicon-sound-stereo:before {
  content: "\e189";
}

.glyphicon-sound-dolby:before {
  content: "\e190";
}

.glyphicon-sound-5-1:before {
  content: "\e191";
}

.glyphicon-sound-6-1:before {
  content: "\e192";
}

.glyphicon-sound-7-1:before {
  content: "\e193";
}

.glyphicon-copyright-mark:before {
  content: "\e194";
}

.glyphicon-registration-mark:before {
  content: "\e195";
}

.glyphicon-cloud-download:before {
  content: "\e197";
}

.glyphicon-cloud-upload:before {
  content: "\e198";
}

.glyphicon-tree-conifer:before {
  content: "\e199";
}

.glyphicon-tree-deciduous:before {
  content: "\e200";
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  font-family: "Catamaran", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.42857143;
  color: #5f5f5f;
  background-color: #f0f0f0;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

a {
  color: #00aac8;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #00697c;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

figure {
  margin: 0;
}

img {
  vertical-align: middle;
}

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}

.img-rounded {
  border-radius: 0px;
}

.img-thumbnail {
  padding: 4px;
  line-height: 1.42857143;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 0px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}

.img-circle {
  border-radius: 50%;
}

hr {
  margin-top: 22px;
  margin-bottom: 22px;
  border: 0;
  border-top: 1px solid #eeeeee;
}

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

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: inherit;
  font-weight: 300;
  line-height: 1.1;
  color: inherit;
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small,
.h5 .small,
.h6 .small {
  font-weight: normal;
  line-height: 1;
  color: #777777;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
  margin-top: 22px;
  margin-bottom: 11px;
}

h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small,
h1 .small,
.h1 .small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small {
  font-size: 65%;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-top: 11px;
  margin-bottom: 11px;
}

h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small,
h4 .small,
.h4 .small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small {
  font-size: 75%;
}

h1,
.h1 {
  font-size: 32px;
}

h2,
.h2 {
  font-size: 28px;
}

h3,
.h3 {
  font-size: 24px;
}

h4,
.h4 {
  font-size: 18px;
}

h5,
.h5 {
  font-size: 16px;
}

h6,
.h6 {
  font-size: 12px;
}

p {
  margin: 0 0 11px;
}

.lead {
  margin-bottom: 22px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
}

@media (min-width: 600px) {
  .lead {
    font-size: 24px;
  }
}

small,
.small {
  font-size: 87%;
}

cite {
  font-style: normal;
}

mark,
.mark {
  background-color: #fcf8e3;
  padding: .2em;
}

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

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

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.text-nowrap {
  white-space: nowrap;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-muted {
  color: #777777;
}

.text-primary {
  color: #00aac8;
}

a.text-primary:hover {
  color: #007f95;
}

.text-success {
  color: #3c763d;
}

a.text-success:hover {
  color: #2b542c;
}

.text-info {
  color: #31708f;
}

a.text-info:hover {
  color: #245269;
}

.text-warning {
  color: #8a6d3b;
}

a.text-warning:hover {
  color: #66512c;
}

.text-danger {
  color: #a94442;
}

a.text-danger:hover {
  color: #843534;
}

.bg-primary {
  color: #fff;
  background-color: #00aac8;
}

a.bg-primary:hover {
  background-color: #007f95;
}

.bg-success {
  background-color: #dff0d8;
}

a.bg-success:hover {
  background-color: #c1e2b3;
}

.bg-info {
  background-color: #d9edf7;
}

a.bg-info:hover {
  background-color: #afd9ee;
}

.bg-warning {
  background-color: #fcf8e3;
}

a.bg-warning:hover {
  background-color: #f7ecb5;
}

.bg-danger {
  background-color: #f2dede;
}

a.bg-danger:hover {
  background-color: #e4b9b9;
}

.page-header {
  padding-bottom: 10px;
  margin: 44px 0 22px;
  border-bottom: 1px solid #eeeeee;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 11px;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}

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

.list-inline {
  padding-left: 0;
  list-style: none;
  margin-left: -5px;
}

.list-inline > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}

dl {
  margin-top: 0;
  margin-bottom: 22px;
}

dt,
dd {
  line-height: 1.42857143;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

@media (min-width: 600px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dl-horizontal dd {
    margin-left: 180px;
  }
}

abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #777777;
}

.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

blockquote {
  padding: 11px 22px;
  margin: 0 0 22px;
  font-size: 20px;
  border-left: 5px solid #eeeeee;
}

blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
  margin-bottom: 0;
}

blockquote footer,
blockquote small,
blockquote .small {
  display: block;
  font-size: 80%;
  line-height: 1.42857143;
  color: #777777;
}

blockquote footer:before,
blockquote small:before,
blockquote .small:before {
  content: '\2014 \00A0';
}

.blockquote-reverse,
blockquote.pull-right {
  padding-right: 15px;
  padding-left: 0;
  border-right: 5px solid #eeeeee;
  border-left: 0;
  text-align: right;
}

.blockquote-reverse footer:before,
blockquote.pull-right footer:before,
.blockquote-reverse small:before,
blockquote.pull-right small:before,
.blockquote-reverse .small:before,
blockquote.pull-right .small:before {
  content: '';
}

.blockquote-reverse footer:after,
blockquote.pull-right footer:after,
.blockquote-reverse small:after,
blockquote.pull-right small:after,
.blockquote-reverse .small:after,
blockquote.pull-right .small:after {
  content: '\00A0 \2014';
}

blockquote:before,
blockquote:after {
  content: "";
}

address {
  margin-bottom: 22px;
  font-style: normal;
  line-height: 1.42857143;
}

code,
kbd,
pre,
samp {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

code {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 0px;
}

kbd {
  padding: 2px 4px;
  font-size: 90%;
  color: #fff;
  background-color: #333;
  border-radius: 0px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

kbd kbd {
  padding: 0;
  font-size: 100%;
  box-shadow: none;
}

pre {
  display: block;
  padding: 10.5px;
  margin: 0 0 11px;
  font-size: 15px;
  line-height: 1.42857143;
  word-break: break-all;
  word-wrap: break-word;
  color: #333333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 0px;
}

pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background-color: transparent;
  border-radius: 0;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 8px;
  padding-right: 8px;
}

@media (min-width: 600px) {
  .container {
    width: 596px;
  }
}

@media (min-width: 768px) {
  .container {
    width: 760px;
  }
}

@media (min-width: 1024px) {
  .container {
    width: 970px;
  }
}

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 8px;
  padding-right: 8px;
}

.row {
  margin-left: -8px;
  margin-right: -8px;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 8px;
  padding-right: 8px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}

.col-xs-12 {
  width: 100%;
}

.col-xs-11 {
  width: 91.66666667%;
}

.col-xs-10 {
  width: 83.33333333%;
}

.col-xs-9 {
  width: 75%;
}

.col-xs-8 {
  width: 66.66666667%;
}

.col-xs-7 {
  width: 58.33333333%;
}

.col-xs-6 {
  width: 50%;
}

.col-xs-5 {
  width: 41.66666667%;
}

.col-xs-4 {
  width: 33.33333333%;
}

.col-xs-3 {
  width: 25%;
}

.col-xs-2 {
  width: 16.66666667%;
}

.col-xs-1 {
  width: 8.33333333%;
}

.col-xs-pull-12 {
  right: 100%;
}

.col-xs-pull-11 {
  right: 91.66666667%;
}

.col-xs-pull-10 {
  right: 83.33333333%;
}

.col-xs-pull-9 {
  right: 75%;
}

.col-xs-pull-8 {
  right: 66.66666667%;
}

.col-xs-pull-7 {
  right: 58.33333333%;
}

.col-xs-pull-6 {
  right: 50%;
}

.col-xs-pull-5 {
  right: 41.66666667%;
}

.col-xs-pull-4 {
  right: 33.33333333%;
}

.col-xs-pull-3 {
  right: 25%;
}

.col-xs-pull-2 {
  right: 16.66666667%;
}

.col-xs-pull-1 {
  right: 8.33333333%;
}

.col-xs-pull-0 {
  right: auto;
}

.col-xs-push-12 {
  left: 100%;
}

.col-xs-push-11 {
  left: 91.66666667%;
}

.col-xs-push-10 {
  left: 83.33333333%;
}

.col-xs-push-9 {
  left: 75%;
}

.col-xs-push-8 {
  left: 66.66666667%;
}

.col-xs-push-7 {
  left: 58.33333333%;
}

.col-xs-push-6 {
  left: 50%;
}

.col-xs-push-5 {
  left: 41.66666667%;
}

.col-xs-push-4 {
  left: 33.33333333%;
}

.col-xs-push-3 {
  left: 25%;
}

.col-xs-push-2 {
  left: 16.66666667%;
}

.col-xs-push-1 {
  left: 8.33333333%;
}

.col-xs-push-0 {
  left: auto;
}

.col-xs-offset-12 {
  margin-left: 100%;
}

.col-xs-offset-11 {
  margin-left: 91.66666667%;
}

.col-xs-offset-10 {
  margin-left: 83.33333333%;
}

.col-xs-offset-9 {
  margin-left: 75%;
}

.col-xs-offset-8 {
  margin-left: 66.66666667%;
}

.col-xs-offset-7 {
  margin-left: 58.33333333%;
}

.col-xs-offset-6 {
  margin-left: 50%;
}

.col-xs-offset-5 {
  margin-left: 41.66666667%;
}

.col-xs-offset-4 {
  margin-left: 33.33333333%;
}

.col-xs-offset-3 {
  margin-left: 25%;
}

.col-xs-offset-2 {
  margin-left: 16.66666667%;
}

.col-xs-offset-1 {
  margin-left: 8.33333333%;
}

.col-xs-offset-0 {
  margin-left: 0%;
}

@media (min-width: 600px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }

  .col-sm-12 {
    width: 100%;
  }

  .col-sm-11 {
    width: 91.66666667%;
  }

  .col-sm-10 {
    width: 83.33333333%;
  }

  .col-sm-9 {
    width: 75%;
  }

  .col-sm-8 {
    width: 66.66666667%;
  }

  .col-sm-7 {
    width: 58.33333333%;
  }

  .col-sm-6 {
    width: 50%;
  }

  .col-sm-5 {
    width: 41.66666667%;
  }

  .col-sm-4 {
    width: 33.33333333%;
  }

  .col-sm-3 {
    width: 25%;
  }

  .col-sm-2 {
    width: 16.66666667%;
  }

  .col-sm-1 {
    width: 8.33333333%;
  }

  .col-sm-pull-12 {
    right: 100%;
  }

  .col-sm-pull-11 {
    right: 91.66666667%;
  }

  .col-sm-pull-10 {
    right: 83.33333333%;
  }

  .col-sm-pull-9 {
    right: 75%;
  }

  .col-sm-pull-8 {
    right: 66.66666667%;
  }

  .col-sm-pull-7 {
    right: 58.33333333%;
  }

  .col-sm-pull-6 {
    right: 50%;
  }

  .col-sm-pull-5 {
    right: 41.66666667%;
  }

  .col-sm-pull-4 {
    right: 33.33333333%;
  }

  .col-sm-pull-3 {
    right: 25%;
  }

  .col-sm-pull-2 {
    right: 16.66666667%;
  }

  .col-sm-pull-1 {
    right: 8.33333333%;
  }

  .col-sm-pull-0 {
    right: auto;
  }

  .col-sm-push-12 {
    left: 100%;
  }

  .col-sm-push-11 {
    left: 91.66666667%;
  }

  .col-sm-push-10 {
    left: 83.33333333%;
  }

  .col-sm-push-9 {
    left: 75%;
  }

  .col-sm-push-8 {
    left: 66.66666667%;
  }

  .col-sm-push-7 {
    left: 58.33333333%;
  }

  .col-sm-push-6 {
    left: 50%;
  }

  .col-sm-push-5 {
    left: 41.66666667%;
  }

  .col-sm-push-4 {
    left: 33.33333333%;
  }

  .col-sm-push-3 {
    left: 25%;
  }

  .col-sm-push-2 {
    left: 16.66666667%;
  }

  .col-sm-push-1 {
    left: 8.33333333%;
  }

  .col-sm-push-0 {
    left: auto;
  }

  .col-sm-offset-12 {
    margin-left: 100%;
  }

  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }

  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-sm-offset-9 {
    margin-left: 75%;
  }

  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-sm-offset-6 {
    margin-left: 50%;
  }

  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-sm-offset-3 {
    margin-left: 25%;
  }

  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-sm-offset-0 {
    margin-left: 0%;
  }
}

@media (min-width: 768px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }

  .col-md-12 {
    width: 100%;
  }

  .col-md-11 {
    width: 91.66666667%;
  }

  .col-md-10 {
    width: 83.33333333%;
  }

  .col-md-9 {
    width: 75%;
  }

  .col-md-8 {
    width: 66.66666667%;
  }

  .col-md-7 {
    width: 58.33333333%;
  }

  .col-md-6 {
    width: 50%;
  }

  .col-md-5 {
    width: 41.66666667%;
  }

  .col-md-4 {
    width: 33.33333333%;
  }

  .col-md-3 {
    width: 25%;
  }

  .col-md-2 {
    width: 16.66666667%;
  }

  .col-md-1 {
    width: 8.33333333%;
  }

  .col-md-pull-12 {
    right: 100%;
  }

  .col-md-pull-11 {
    right: 91.66666667%;
  }

  .col-md-pull-10 {
    right: 83.33333333%;
  }

  .col-md-pull-9 {
    right: 75%;
  }

  .col-md-pull-8 {
    right: 66.66666667%;
  }

  .col-md-pull-7 {
    right: 58.33333333%;
  }

  .col-md-pull-6 {
    right: 50%;
  }

  .col-md-pull-5 {
    right: 41.66666667%;
  }

  .col-md-pull-4 {
    right: 33.33333333%;
  }

  .col-md-pull-3 {
    right: 25%;
  }

  .col-md-pull-2 {
    right: 16.66666667%;
  }

  .col-md-pull-1 {
    right: 8.33333333%;
  }

  .col-md-pull-0 {
    right: auto;
  }

  .col-md-push-12 {
    left: 100%;
  }

  .col-md-push-11 {
    left: 91.66666667%;
  }

  .col-md-push-10 {
    left: 83.33333333%;
  }

  .col-md-push-9 {
    left: 75%;
  }

  .col-md-push-8 {
    left: 66.66666667%;
  }

  .col-md-push-7 {
    left: 58.33333333%;
  }

  .col-md-push-6 {
    left: 50%;
  }

  .col-md-push-5 {
    left: 41.66666667%;
  }

  .col-md-push-4 {
    left: 33.33333333%;
  }

  .col-md-push-3 {
    left: 25%;
  }

  .col-md-push-2 {
    left: 16.66666667%;
  }

  .col-md-push-1 {
    left: 8.33333333%;
  }

  .col-md-push-0 {
    left: auto;
  }

  .col-md-offset-12 {
    margin-left: 100%;
  }

  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }

  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-md-offset-9 {
    margin-left: 75%;
  }

  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-md-offset-6 {
    margin-left: 50%;
  }

  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-md-offset-3 {
    margin-left: 25%;
  }

  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-md-offset-0 {
    margin-left: 0%;
  }
}

@media (min-width: 1024px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }

  .col-lg-12 {
    width: 100%;
  }

  .col-lg-11 {
    width: 91.66666667%;
  }

  .col-lg-10 {
    width: 83.33333333%;
  }

  .col-lg-9 {
    width: 75%;
  }

  .col-lg-8 {
    width: 66.66666667%;
  }

  .col-lg-7 {
    width: 58.33333333%;
  }

  .col-lg-6 {
    width: 50%;
  }

  .col-lg-5 {
    width: 41.66666667%;
  }

  .col-lg-4 {
    width: 33.33333333%;
  }

  .col-lg-3 {
    width: 25%;
  }

  .col-lg-2 {
    width: 16.66666667%;
  }

  .col-lg-1 {
    width: 8.33333333%;
  }

  .col-lg-pull-12 {
    right: 100%;
  }

  .col-lg-pull-11 {
    right: 91.66666667%;
  }

  .col-lg-pull-10 {
    right: 83.33333333%;
  }

  .col-lg-pull-9 {
    right: 75%;
  }

  .col-lg-pull-8 {
    right: 66.66666667%;
  }

  .col-lg-pull-7 {
    right: 58.33333333%;
  }

  .col-lg-pull-6 {
    right: 50%;
  }

  .col-lg-pull-5 {
    right: 41.66666667%;
  }

  .col-lg-pull-4 {
    right: 33.33333333%;
  }

  .col-lg-pull-3 {
    right: 25%;
  }

  .col-lg-pull-2 {
    right: 16.66666667%;
  }

  .col-lg-pull-1 {
    right: 8.33333333%;
  }

  .col-lg-pull-0 {
    right: auto;
  }

  .col-lg-push-12 {
    left: 100%;
  }

  .col-lg-push-11 {
    left: 91.66666667%;
  }

  .col-lg-push-10 {
    left: 83.33333333%;
  }

  .col-lg-push-9 {
    left: 75%;
  }

  .col-lg-push-8 {
    left: 66.66666667%;
  }

  .col-lg-push-7 {
    left: 58.33333333%;
  }

  .col-lg-push-6 {
    left: 50%;
  }

  .col-lg-push-5 {
    left: 41.66666667%;
  }

  .col-lg-push-4 {
    left: 33.33333333%;
  }

  .col-lg-push-3 {
    left: 25%;
  }

  .col-lg-push-2 {
    left: 16.66666667%;
  }

  .col-lg-push-1 {
    left: 8.33333333%;
  }

  .col-lg-push-0 {
    left: auto;
  }

  .col-lg-offset-12 {
    margin-left: 100%;
  }

  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }

  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-lg-offset-9 {
    margin-left: 75%;
  }

  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-lg-offset-6 {
    margin-left: 50%;
  }

  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-lg-offset-3 {
    margin-left: 25%;
  }

  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-lg-offset-0 {
    margin-left: 0%;
  }
}

table {
  background-color: transparent;
}

th {
  text-align: left;
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 22px;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}

.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}

.table > tbody + tbody {
  border-top: 2px solid #ddd;
}

.table .table {
  background-color: #f0f0f0;
}

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}

.table-bordered {
  border: 1px solid #ddd;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}

.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #f5f5f5;
}

table col[class*="col-"] {
  position: static;
  float: none;
  display: table-column;
}

table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  float: none;
  display: table-cell;
}

.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
  background-color: #f5f5f5;
}

.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
  background-color: #e8e8e8;
}

.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
  background-color: #dff0d8;
}

.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
  background-color: #d0e9c6;
}

.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
  background-color: #d9edf7;
}

.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
  background-color: #c4e3f3;
}

.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
  background-color: #fcf8e3;
}

.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
  background-color: #faf2cc;
}

.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
  background-color: #f2dede;
}

.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
  background-color: #ebcccc;
}

@media screen and (max-width: 599px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 16.5px;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive > .table {
    margin-bottom: 0;
  }

  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }

  .table-responsive > .table-bordered {
    border: 0;
  }

  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }

  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }

  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 22px;
  font-size: 24px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="search"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}

input[type="file"] {
  display: block;
}

input[type="range"] {
  display: block;
  width: 100%;
}

select[multiple],
select[size] {
  height: auto;
}

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

output {
  display: block;
  padding-top: 7px;
  font-size: 16px;
  line-height: 1.42857143;
  color: #555555;
}

.form-control {
  display: block;
  width: 100%;
  height: 36px;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 0px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.form-control::-moz-placeholder {
  color: #999;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #999;
}

.form-control::-webkit-input-placeholder {
  color: #999;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  cursor: not-allowed;
  background-color: #eeeeee;
  opacity: 1;
}

textarea.form-control {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  line-height: 36px;
  line-height: 1.42857143 \0;
}

input[type="date"].input-sm,
input[type="time"].input-sm,
input[type="datetime-local"].input-sm,
input[type="month"].input-sm {
  line-height: 33px;
}

input[type="date"].input-lg,
input[type="time"].input-lg,
input[type="datetime-local"].input-lg,
input[type="month"].input-lg {
  line-height: 49px;
}

.form-group {
  margin-bottom: 15px;
}

.radio,
.checkbox {
  position: relative;
  display: block;
  min-height: 22px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.radio label,
.checkbox label {
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
}

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
  margin-left: -20px;
  margin-top: 4px \9;
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px;
}

.radio-inline,
.checkbox-inline {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  vertical-align: middle;
  font-weight: normal;
  cursor: pointer;
}

.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px;
}

input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
  cursor: not-allowed;
}

.radio-inline.disabled,
.checkbox-inline.disabled,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox-inline {
  cursor: not-allowed;
}

.radio.disabled label,
.checkbox.disabled label,
fieldset[disabled] .radio label,
fieldset[disabled] .checkbox label {
  cursor: not-allowed;
}

.form-control-static {
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0;
}

.form-control-static.input-lg,
.form-control-static.input-sm {
  padding-left: 0;
  padding-right: 0;
}

.input-sm,
.form-horizontal .form-group-sm .form-control {
  height: 33px;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 0px;
}

select.input-sm {
  height: 33px;
  line-height: 33px;
}

textarea.input-sm,
select[multiple].input-sm {
  height: auto;
}

.input-lg,
.form-horizontal .form-group-lg .form-control {
  height: 49px;
  padding: 10px 16px;
  font-size: 20px;
  line-height: 1.33;
  border-radius: 0px;
}

select.input-lg {
  height: 49px;
  line-height: 49px;
}

textarea.input-lg,
select[multiple].input-lg {
  height: auto;
}

.has-feedback {
  position: relative;
}

.has-feedback .form-control {
  padding-right: 45px;
}

.form-control-feedback {
  position: absolute;
  top: 27px;
  right: 0;
  z-index: 2;
  display: block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
}

.input-lg + .form-control-feedback {
  width: 49px;
  height: 49px;
  line-height: 49px;
}

.input-sm + .form-control-feedback {
  width: 33px;
  height: 33px;
  line-height: 33px;
}

.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline {
  color: #3c763d;
}

.has-success .form-control {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-success .form-control:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}

.has-success .input-group-addon {
  color: #3c763d;
  border-color: #3c763d;
  background-color: #dff0d8;
}

.has-success .form-control-feedback {
  color: #3c763d;
}

.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline {
  color: #8a6d3b;
}

.has-warning .form-control {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-warning .form-control:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}

.has-warning .input-group-addon {
  color: #8a6d3b;
  border-color: #8a6d3b;
  background-color: #fcf8e3;
}

.has-warning .form-control-feedback {
  color: #8a6d3b;
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
  color: #a94442;
}

.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}

.has-error .input-group-addon {
  color: #a94442;
  border-color: #a94442;
  background-color: #f2dede;
}

.has-error .form-control-feedback {
  color: #a94442;
}

.has-feedback label.sr-only ~ .form-control-feedback {
  top: 0;
}

.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #9f9f9f;
}

@media (min-width: 600px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }

  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

  .form-inline .input-group {
    display: inline-table;
    vertical-align: middle;
  }

  .form-inline .input-group .input-group-addon,
  .form-inline .input-group .input-group-btn,
  .form-inline .input-group .form-control {
    width: auto;
  }

  .form-inline .input-group > .form-control {
    width: 100%;
  }

  .form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }

  .form-inline .radio,
  .form-inline .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }

  .form-inline .radio label,
  .form-inline .checkbox label {
    padding-left: 0;
  }

  .form-inline .radio input[type="radio"],
  .form-inline .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0;
  }

  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}

.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 7px;
}

.form-horizontal .radio,
.form-horizontal .checkbox {
  min-height: 29px;
}

.form-horizontal .form-group {
  margin-left: -8px;
  margin-right: -8px;
}

@media (min-width: 600px) {
  .form-horizontal .control-label {
    text-align: right;
    margin-bottom: 0;
    padding-top: 7px;
  }
}

.form-horizontal .has-feedback .form-control-feedback {
  top: 0;
  right: 8px;
}

@media (min-width: 600px) {
  .form-horizontal .form-group-lg .control-label {
    padding-top: 14.3px;
  }
}

@media (min-width: 600px) {
  .form-horizontal .form-group-sm .control-label {
    padding-top: 6px;
  }
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 300;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.42857143;
  border-radius: 0px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.btn:hover,
.btn:focus {
  color: #333;
  text-decoration: none;
}

.btn:active,
.btn.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: #fff;
  border-color: #ccc;
}

.btn-default .badge {
  color: #fff;
  background-color: #333;
}

.btn-primary {
  color: #fff;
  background-color: #00aac8;
  border-color: #0094af;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #007f95;
  border-color: #006071;
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #00aac8;
  border-color: #0094af;
}

.btn-primary .badge {
  color: #00aac8;
  background-color: #fff;
}

.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}

.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  background-image: none;
}

.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.btn-success .badge {
  color: #5cb85c;
  background-color: #fff;
}

.btn-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  color: #fff;
  background-color: #31b0d5;
  border-color: #269abc;
}

.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-image: none;
}

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
  background-color: #5bc0de;
  border-color: #46b8da;
}

.btn-info .badge {
  color: #5bc0de;
  background-color: #fff;
}

.btn-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  color: #fff;
  background-color: #ec971f;
  border-color: #d58512;
}

.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  background-image: none;
}

.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
  background-color: #f0ad4e;
  border-color: #eea236;
}

.btn-warning .badge {
  color: #f0ad4e;
  background-color: #fff;
}

.btn-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  color: #fff;
  background-color: #c9302c;
  border-color: #ac2925;
}

.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
  background-image: none;
}

.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
  background-color: #d9534f;
  border-color: #d43f3a;
}

.btn-danger .badge {
  color: #d9534f;
  background-color: #fff;
}

.btn-link {
  color: #00aac8;
  font-weight: normal;
  cursor: pointer;
  border-radius: 0;
}

.btn-link,
.btn-link:active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
  border-color: transparent;
}

.btn-link:hover,
.btn-link:focus {
  color: #00697c;
  text-decoration: underline;
  background-color: transparent;
}

.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus {
  color: #777777;
  text-decoration: none;
}

.btn-lg,
.btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 20px;
  line-height: 1.33;
  border-radius: 0px;
}

.btn-sm,
.btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 0px;
}

.btn-xs,
.btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 0px;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block + .btn-block {
  margin-top: 5px;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}

.fade.in {
  opacity: 1;
}

.collapse {
  display: none;
}

.collapse.in {
  display: block;
}

tr.collapse.in {
  display: table-row;
}

tbody.collapse.in {
  display: table-row-group;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.dropdown {
  position: relative;
}

.dropdown-toggle:focus {
  outline: 0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 16px;
  text-align: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}

.dropdown-menu .divider {
  height: 1px;
  margin: 10px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  background-color: #00aac8;
}

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #777777;
}

.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  cursor: not-allowed;
}

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

.open > a {
  outline: 0;
}

.dropdown-menu-right {
  left: auto;
  right: 0;
}

.dropdown-menu-left {
  left: 0;
  right: auto;
}

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #777777;
  white-space: nowrap;
}

.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 990;
}

.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  border-top: 0;
  border-bottom: 4px solid;
  content: "";
}

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 1px;
}

@media (min-width: 600px) {
  .navbar-right .dropdown-menu {
    left: auto;
    right: 0;
  }

  .navbar-right .dropdown-menu-left {
    left: 0;
    right: auto;
  }
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}

.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
  z-index: 2;
}

.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus {
  outline: 0;
}

.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
  margin-left: -1px;
}

.btn-toolbar {
  margin-left: -5px;
}

.btn-toolbar .btn-group,
.btn-toolbar .input-group {
  float: left;
}

.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
  margin-left: 5px;
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}

.btn-group > .btn:first-child {
  margin-left: 0;
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.btn-group > .btn-group {
  float: left;
}

.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}

.btn-group > .btn-group:first-child > .btn:last-child,
.btn-group > .btn-group:first-child > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.btn-group > .btn-group:last-child > .btn:first-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}

.btn-group > .btn + .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
}

.btn-group > .btn-lg + .dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
}

.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-group.open .dropdown-toggle.btn-link {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn .caret {
  margin-left: 0;
}

.btn-lg .caret {
  border-width: 5px 5px 0;
  border-bottom-width: 0;
}

.dropup .btn-lg .caret {
  border-width: 0 5px 5px;
}

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}

.btn-group-vertical > .btn-group > .btn {
  float: none;
}

.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
  margin-left: 0;
}

.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-bottom-left-radius: 0px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}

.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}

.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
  float: none;
  display: table-cell;
  width: 1%;
}

.btn-group-justified > .btn-group .btn {
  width: 100%;
}

.btn-group-justified > .btn-group .dropdown-menu {
  left: auto;
}

[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
  position: absolute;
  z-index: -1;
  opacity: 0;
  filter: alpha(opacity=0);
}

.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}

.input-group[class*="col-"] {
  float: none;
  padding-left: 0;
  padding-right: 0;
}

.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
}

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  height: 49px;
  padding: 10px 16px;
  font-size: 20px;
  line-height: 1.33;
  border-radius: 0px;
}

select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
  height: 49px;
  line-height: 49px;
}

textarea.input-group-lg > .form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn,
select[multiple].input-group-lg > .form-control,
select[multiple].input-group-lg > .input-group-addon,
select[multiple].input-group-lg > .input-group-btn > .btn {
  height: auto;
}

.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
  height: 33px;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 0px;
}

select.input-group-sm > .form-control,
select.input-group-sm > .input-group-addon,
select.input-group-sm > .input-group-btn > .btn {
  height: 33px;
  line-height: 33px;
}

textarea.input-group-sm > .form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-sm > .input-group-btn > .btn,
select[multiple].input-group-sm > .form-control,
select[multiple].input-group-sm > .input-group-addon,
select[multiple].input-group-sm > .input-group-btn > .btn {
  height: auto;
}

.input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: table-cell;
}

.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.input-group-addon,
.input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.input-group-addon {
  padding: 6px 12px;
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  color: #555555;
  text-align: center;
  background-color: #eeeeee;
  border: 1px solid #ccc;
  border-radius: 0px;
}

.input-group-addon.input-sm {
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 0px;
}

.input-group-addon.input-lg {
  padding: 10px 16px;
  font-size: 20px;
  border-radius: 0px;
}

.input-group-addon input[type="radio"],
.input-group-addon input[type="checkbox"] {
  margin-top: 0;
}

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.input-group-addon:first-child {
  border-right: 0;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.input-group-addon:last-child {
  border-left: 0;
}

.input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap;
}

.input-group-btn > .btn {
  position: relative;
}

.input-group-btn > .btn + .btn {
  margin-left: -1px;
}

.input-group-btn > .btn:hover,
.input-group-btn > .btn:focus,
.input-group-btn > .btn:active {
  z-index: 2;
}

.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group {
  margin-right: -1px;
}

.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
  margin-left: -1px;
}

.nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.nav > li {
  position: relative;
  display: block;
}

.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}

.nav > li.disabled > a {
  color: #777777;
}

.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #777777;
  text-decoration: none;
  background-color: transparent;
  cursor: not-allowed;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #eeeeee;
  border-color: #00aac8;
}

.nav .nav-divider {
  height: 1px;
  margin: 10px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

.nav > li > a > img {
  max-width: none;
}

.nav-tabs {
  border-bottom: 1px solid #ddd;
}

.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}

.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 0px 0px 0 0;
}

.nav-tabs > li > a:hover {
  border-color: #eeeeee #eeeeee #ddd;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555555;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
  cursor: default;
}

.nav-tabs.nav-justified {
  width: 100%;
  border-bottom: 0;
}

.nav-tabs.nav-justified > li {
  float: none;
}

.nav-tabs.nav-justified > li > a {
  text-align: center;
  margin-bottom: 5px;
}

.nav-tabs.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}

@media (min-width: 600px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }

  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}

.nav-tabs.nav-justified > li > a {
  margin-right: 0;
  border-radius: 0px;
}

.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  border: 1px solid #ddd;
}

@media (min-width: 600px) {
  .nav-tabs.nav-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 0px 0px 0 0;
  }

  .nav-tabs.nav-justified > .active > a,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #f0f0f0;
  }
}

.nav-pills > li {
  float: left;
}

.nav-pills > li > a {
  border-radius: 0px;
}

.nav-pills > li + li {
  margin-left: 2px;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #00aac8;
}

.nav-stacked > li {
  float: none;
}

.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}

.nav-justified {
  width: 100%;
}

.nav-justified > li {
  float: none;
}

.nav-justified > li > a {
  text-align: center;
  margin-bottom: 5px;
}

.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}

@media (min-width: 600px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }

  .nav-justified > li > a {
    margin-bottom: 0;
  }
}

.nav-tabs-justified {
  border-bottom: 0;
}

.nav-tabs-justified > li > a {
  margin-right: 0;
  border-radius: 0px;
}

.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
  border: 1px solid #ddd;
}

@media (min-width: 600px) {
  .nav-tabs-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 0px 0px 0 0;
  }

  .nav-tabs-justified > .active > a,
  .nav-tabs-justified > .active > a:hover,
  .nav-tabs-justified > .active > a:focus {
    border-bottom-color: #f0f0f0;
  }
}

.tab-content > .tab-pane {
  display: none;
}

.tab-content > .active {
  display: block;
}

.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 22px;
  border: 1px solid transparent;
}

@media (min-width: 600px) {
  .navbar {
    border-radius: 0px;
  }
}

@media (min-width: 600px) {
  .navbar-header {
    float: left;
  }
}

.navbar-collapse {
  overflow-x: visible;
  padding-right: 8px;
  padding-left: 8px;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-overflow-scrolling: touch;
}

.navbar-collapse.in {
  overflow-y: auto;
}

@media (min-width: 600px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    box-shadow: none;
  }

  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }

  .navbar-collapse.in {
    overflow-y: visible;
  }

  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-left: 0;
    padding-right: 0;
  }
}

.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
  max-height: 340px;
}

@media (max-width: 480px) and (orientation: landscape) {
  .navbar-fixed-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    max-height: 200px;
  }
}

.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
  margin-right: -8px;
  margin-left: -8px;
}

@media (min-width: 600px) {
  .container > .navbar-header,
  .container-fluid > .navbar-header,
  .container > .navbar-collapse,
  .container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
  }
}

.navbar-static-top {
  z-index: 1000;
  border-width: 0 0 1px;
}

@media (min-width: 600px) {
  .navbar-static-top {
    border-radius: 0;
  }
}

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@media (min-width: 600px) {
  .navbar-fixed-top,
  .navbar-fixed-bottom {
    border-radius: 0;
  }
}

.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}

.navbar-fixed-bottom {
  bottom: 0;
  margin-bottom: 0;
  border-width: 1px 0 0;
}

.navbar-brand {
  float: left;
  padding: 14px 8px;
  font-size: 20px;
  line-height: 22px;
  height: 50px;
}

.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}

@media (min-width: 600px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: -8px;
  }
}

.navbar-toggle {
  position: relative;
  float: right;
  margin-right: 8px;
  padding: 9px 10px;
  margin-top: 8px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0px;
}

.navbar-toggle:focus {
  outline: 0;
}

.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}

@media (min-width: 600px) {
  .navbar-toggle {
    display: none;
  }
}

.navbar-nav {
  margin: 7px -8px;
}

.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 22px;
}

@media (max-width: 599px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }

  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }

  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 22px;
  }

  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}

@media (min-width: 600px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }

  .navbar-nav > li {
    float: left;
  }

  .navbar-nav > li > a {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .navbar-nav.navbar-right:last-child {
    margin-right: -8px;
  }
}

@media (min-width: 600px) {
  .navbar-left {
    float: left !important;
  }

  .navbar-right {
    float: right !important;
  }
}

.navbar-form {
  margin-left: -8px;
  margin-right: -8px;
  padding: 10px 8px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  margin-top: 7px;
  margin-bottom: 7px;
}

@media (min-width: 600px) {
  .navbar-form .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }

  .navbar-form .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

  .navbar-form .input-group {
    display: inline-table;
    vertical-align: middle;
  }

  .navbar-form .input-group .input-group-addon,
  .navbar-form .input-group .input-group-btn,
  .navbar-form .input-group .form-control {
    width: auto;
  }

  .navbar-form .input-group > .form-control {
    width: 100%;
  }

  .navbar-form .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }

  .navbar-form .radio,
  .navbar-form .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }

  .navbar-form .radio label,
  .navbar-form .checkbox label {
    padding-left: 0;
  }

  .navbar-form .radio input[type="radio"],
  .navbar-form .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0;
  }

  .navbar-form .has-feedback .form-control-feedback {
    top: 0;
  }
}

@media (max-width: 599px) {
  .navbar-form .form-group {
    margin-bottom: 5px;
  }
}

@media (min-width: 600px) {
  .navbar-form {
    width: auto;
    border: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .navbar-form.navbar-right:last-child {
    margin-right: -8px;
  }
}

.navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.navbar-btn {
  margin-top: 7px;
  margin-bottom: 7px;
}

.navbar-btn.btn-sm {
  margin-top: 8.5px;
  margin-bottom: 8.5px;
}

.navbar-btn.btn-xs {
  margin-top: 14px;
  margin-bottom: 14px;
}

.navbar-text {
  margin-top: 14px;
  margin-bottom: 14px;
}

@media (min-width: 600px) {
  .navbar-text {
    float: left;
    margin-left: 8px;
    margin-right: 8px;
  }

  .navbar-text.navbar-right:last-child {
    margin-right: 0;
  }
}

.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}

.navbar-default .navbar-brand {
  color: #777;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #5e5e5e;
  background-color: transparent;
}

.navbar-default .navbar-text {
  color: #777;
}

.navbar-default .navbar-nav > li > a {
  color: #777;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333;
  background-color: transparent;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555;
  background-color: #e7e7e7;
}

.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: #ccc;
  background-color: transparent;
}

.navbar-default .navbar-toggle {
  border-color: #ddd;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #ddd;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #888;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #e7e7e7;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background-color: #e7e7e7;
  color: #555;
}

@media (max-width: 599px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
  }

  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: transparent;
  }

  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7;
  }

  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}

.navbar-default .navbar-link {
  color: #777;
}

.navbar-default .navbar-link:hover {
  color: #333;
}

.navbar-default .btn-link {
  color: #777;
}

.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {
  color: #333;
}

.navbar-default .btn-link[disabled]:hover,
fieldset[disabled] .navbar-default .btn-link:hover,
.navbar-default .btn-link[disabled]:focus,
fieldset[disabled] .navbar-default .btn-link:focus {
  color: #ccc;
}

.navbar-inverse {
  background-color: #222;
  border-color: #080808;
}

.navbar-inverse .navbar-brand {
  color: #777777;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #fff;
  background-color: transparent;
}

.navbar-inverse .navbar-text {
  color: #777777;
}

.navbar-inverse .navbar-nav > li > a {
  color: #777777;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #fff;
  background-color: transparent;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: #080808;
}

.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus {
  color: #444;
  background-color: transparent;
}

.navbar-inverse .navbar-toggle {
  border-color: #333;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #333;
}

.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: #101010;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  background-color: #080808;
  color: #fff;
}

@media (max-width: 599px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #080808;
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background-color: #080808;
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #777777;
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: transparent;
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #080808;
  }

  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #444;
    background-color: transparent;
  }
}

.navbar-inverse .navbar-link {
  color: #777777;
}

.navbar-inverse .navbar-link:hover {
  color: #fff;
}

.navbar-inverse .btn-link {
  color: #777777;
}

.navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link:focus {
  color: #fff;
}

.navbar-inverse .btn-link[disabled]:hover,
fieldset[disabled] .navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link[disabled]:focus,
fieldset[disabled] .navbar-inverse .btn-link:focus {
  color: #444;
}

.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 22px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 0px;
}

.breadcrumb > li {
  display: inline-block;
}

.breadcrumb > li + li:before {
  content: "/\00a0";
  padding: 0 5px;
  color: #ccc;
}

.breadcrumb > .active {
  color: #777777;
}

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 22px 0;
  border-radius: 0px;
}

.pagination > li {
  display: inline;
}

.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.42857143;
  text-decoration: none;
  color: #00aac8;
  background-color: #fff;
  border: 1px solid #ddd;
  margin-left: -1px;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: #00697c;
  background-color: #eeeeee;
  border-color: #ddd;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: #fff;
  background-color: #00aac8;
  border-color: #00aac8;
  cursor: default;
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777777;
  background-color: #fff;
  border-color: #ddd;
  cursor: not-allowed;
}

.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 20px;
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 14px;
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}

.pager {
  padding-left: 0;
  margin: 22px 0;
  list-style: none;
  text-align: center;
}

.pager li {
  display: inline;
}

.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 5px 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
}

.pager li > a:hover,
.pager li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}

.pager .next > a,
.pager .next > span {
  float: right;
}

.pager .previous > a,
.pager .previous > span {
  float: left;
}

.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
  color: #777777;
  background-color: #fff;
  cursor: not-allowed;
}

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

a.label:hover,
a.label:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.label:empty {
  display: none;
}

.btn .label {
  position: relative;
  top: -1px;
}

.label-default {
  background-color: #777777;
}

.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #5e5e5e;
}

.label-primary {
  background-color: #00aac8;
}

.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #007f95;
}

.label-success {
  background-color: #5cb85c;
}

.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #449d44;
}

.label-info {
  background-color: #5bc0de;
}

.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #31b0d5;
}

.label-warning {
  background-color: #f0ad4e;
}

.label-warning[href]:hover,
.label-warning[href]:focus {
  background-color: #ec971f;
}

.label-danger {
  background-color: #d9534f;
}

.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #c9302c;
}

.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  background-color: #777777;
  border-radius: 10px;
}

.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.btn-xs .badge {
  top: 0;
  padding: 1px 5px;
}

a.badge:hover,
a.badge:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
  color: #00aac8;
  background-color: #fff;
}

.nav-pills > li > a > .badge {
  margin-left: 3px;
}

.jumbotron {
  padding: 30px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eeeeee;
}

.jumbotron h1,
.jumbotron .h1 {
  color: inherit;
}

.jumbotron p {
  margin-bottom: 15px;
  font-size: 24px;
  font-weight: 200;
}

.jumbotron > hr {
  border-top-color: #d5d5d5;
}

.container .jumbotron {
  border-radius: 0px;
}

.jumbotron .container {
  max-width: 100%;
}

@media screen and (min-width: 600px) {
  .jumbotron {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .container .jumbotron {
    padding-left: 60px;
    padding-right: 60px;
  }

  .jumbotron h1,
  .jumbotron .h1 {
    font-size: 72px;
  }
}

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 22px;
  line-height: 1.42857143;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 0px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.thumbnail > img,
.thumbnail a > img {
  margin-left: auto;
  margin-right: auto;
}

a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #00aac8;
}

.thumbnail .caption {
  padding: 9px;
  color: #5f5f5f;
}

.alert {
  padding: 15px;
  margin-bottom: 22px;
  border: 1px solid transparent;
  border-radius: 0px;
}

.alert h4 {
  margin-top: 0;
  color: inherit;
}

.alert .alert-link {
  font-weight: bold;
}

.alert > p,
.alert > ul {
  margin-bottom: 0;
}

.alert > p + p {
  margin-top: 5px;
}

.alert-dismissable,
.alert-dismissible {
  padding-right: 35px;
}

.alert-dismissable .close,
.alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}

.alert-success hr {
  border-top-color: #c9e2b3;
}

.alert-success .alert-link {
  color: #2b542c;
}

.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
}

.alert-info hr {
  border-top-color: #a6e1ec;
}

.alert-info .alert-link {
  color: #245269;
}

.alert-warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}

.alert-warning hr {
  border-top-color: #f7e1b5;
}

.alert-warning .alert-link {
  color: #66512c;
}

.alert-danger {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}

.alert-danger hr {
  border-top-color: #e4b9c0;
}

.alert-danger .alert-link {
  color: #843534;
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

.progress {
  overflow: hidden;
  height: 22px;
  margin-bottom: 22px;
  background-color: #f5f5f5;
  border-radius: 0px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 14px;
  line-height: 22px;
  color: #fff;
  text-align: center;
  background-color: #00aac8;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: width 0.6s ease;
  -o-transition: width 0.6s ease;
  transition: width 0.6s ease;
}

.progress-striped .progress-bar,
.progress-bar-striped {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

.progress.active .progress-bar,
.progress-bar.active {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  -o-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}

.progress-bar[aria-valuenow="1"],
.progress-bar[aria-valuenow="2"] {
  min-width: 30px;
}

.progress-bar[aria-valuenow="0"] {
  color: #777777;
  min-width: 30px;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

.progress-bar-success {
  background-color: #5cb85c;
}

.progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-info {
  background-color: #5bc0de;
}

.progress-striped .progress-bar-info {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-warning {
  background-color: #f0ad4e;
}

.progress-striped .progress-bar-warning {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-danger {
  background-color: #d9534f;
}

.progress-striped .progress-bar-danger {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.media,
.media-body {
  overflow: hidden;
  zoom: 1;
}

.media,
.media .media {
  margin-top: 15px;
}

.media:first-child {
  margin-top: 0;
}

.media-object {
  display: block;
}

.media-heading {
  margin: 0 0 5px;
}

.media > .pull-left {
  margin-right: 10px;
}

.media > .pull-right {
  margin-left: 10px;
}

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

.list-group {
  margin-bottom: 20px;
  padding-left: 0;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.list-group-item:first-child {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.list-group-item > .badge {
  float: right;
}

.list-group-item > .badge + .badge {
  margin-right: 5px;
}

a.list-group-item {
  color: #555;
}

a.list-group-item .list-group-item-heading {
  color: #333;
}

a.list-group-item:hover,
a.list-group-item:focus {
  text-decoration: none;
  color: #555;
  background-color: #f5f5f5;
}

.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
  background-color: #eeeeee;
  color: #777777;
}

.list-group-item.disabled .list-group-item-heading,
.list-group-item.disabled:hover .list-group-item-heading,
.list-group-item.disabled:focus .list-group-item-heading {
  color: inherit;
}

.list-group-item.disabled .list-group-item-text,
.list-group-item.disabled:hover .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text {
  color: #777777;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  z-index: 2;
  color: #fff;
  background-color: #00aac8;
  border-color: #00aac8;
}

.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading,
.list-group-item.active .list-group-item-heading > small,
.list-group-item.active:hover .list-group-item-heading > small,
.list-group-item.active:focus .list-group-item-heading > small,
.list-group-item.active .list-group-item-heading > .small,
.list-group-item.active:hover .list-group-item-heading > .small,
.list-group-item.active:focus .list-group-item-heading > .small {
  color: inherit;
}

.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
  color: #95efff;
}

.list-group-item-success {
  color: #3c763d;
  background-color: #dff0d8;
}

a.list-group-item-success {
  color: #3c763d;
}

a.list-group-item-success .list-group-item-heading {
  color: inherit;
}

a.list-group-item-success:hover,
a.list-group-item-success:focus {
  color: #3c763d;
  background-color: #d0e9c6;
}

a.list-group-item-success.active,
a.list-group-item-success.active:hover,
a.list-group-item-success.active:focus {
  color: #fff;
  background-color: #3c763d;
  border-color: #3c763d;
}

.list-group-item-info {
  color: #31708f;
  background-color: #d9edf7;
}

a.list-group-item-info {
  color: #31708f;
}

a.list-group-item-info .list-group-item-heading {
  color: inherit;
}

a.list-group-item-info:hover,
a.list-group-item-info:focus {
  color: #31708f;
  background-color: #c4e3f3;
}

a.list-group-item-info.active,
a.list-group-item-info.active:hover,
a.list-group-item-info.active:focus {
  color: #fff;
  background-color: #31708f;
  border-color: #31708f;
}

.list-group-item-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
}

a.list-group-item-warning {
  color: #8a6d3b;
}

a.list-group-item-warning .list-group-item-heading {
  color: inherit;
}

a.list-group-item-warning:hover,
a.list-group-item-warning:focus {
  color: #8a6d3b;
  background-color: #faf2cc;
}

a.list-group-item-warning.active,
a.list-group-item-warning.active:hover,
a.list-group-item-warning.active:focus {
  color: #fff;
  background-color: #8a6d3b;
  border-color: #8a6d3b;
}

.list-group-item-danger {
  color: #a94442;
  background-color: #f2dede;
}

a.list-group-item-danger {
  color: #a94442;
}

a.list-group-item-danger .list-group-item-heading {
  color: inherit;
}

a.list-group-item-danger:hover,
a.list-group-item-danger:focus {
  color: #a94442;
  background-color: #ebcccc;
}

a.list-group-item-danger.active,
a.list-group-item-danger.active:hover,
a.list-group-item-danger.active:focus {
  color: #fff;
  background-color: #a94442;
  border-color: #a94442;
}

.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
}

.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}

.panel {
  margin-bottom: 22px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 0px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-body {
  padding: 15px;
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-right-radius: -1px;
  border-top-left-radius: -1px;
}

.panel-heading > .dropdown .dropdown-toggle {
  color: inherit;
}

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  color: inherit;
}

.panel-title > a {
  color: inherit;
}

.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: -1px;
  border-bottom-left-radius: -1px;
}

.panel > .list-group {
  margin-bottom: 0;
}

.panel > .list-group .list-group-item {
  border-width: 1px 0;
  border-radius: 0;
}

.panel > .list-group:first-child .list-group-item:first-child {
  border-top: 0;
  border-top-right-radius: -1px;
  border-top-left-radius: -1px;
}

.panel > .list-group:last-child .list-group-item:last-child {
  border-bottom: 0;
  border-bottom-right-radius: -1px;
  border-bottom-left-radius: -1px;
}

.panel-heading + .list-group .list-group-item:first-child {
  border-top-width: 0;
}

.list-group + .panel-footer {
  border-top-width: 0;
}

.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
  margin-bottom: 0;
}

.panel > .table:first-child,
.panel > .table-responsive:first-child > .table:first-child {
  border-top-right-radius: -1px;
  border-top-left-radius: -1px;
}

.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
  border-top-left-radius: -1px;
}

.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
  border-top-right-radius: -1px;
}

.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
  border-bottom-right-radius: -1px;
  border-bottom-left-radius: -1px;
}

.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
  border-bottom-left-radius: -1px;
}

.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
  border-bottom-right-radius: -1px;
}

.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive {
  border-top: 1px solid #ddd;
}

.panel > .table > tbody:first-child > tr:first-child th,
.panel > .table > tbody:first-child > tr:first-child td {
  border-top: 0;
}

.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
  border: 0;
}

.panel > .table-bordered > thead > tr > th:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
.panel > .table-bordered > tbody > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
.panel > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-bordered > thead > tr > td:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
.panel > .table-bordered > tbody > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
.panel > .table-bordered > tfoot > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
  border-left: 0;
}

.panel > .table-bordered > thead > tr > th:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
.panel > .table-bordered > tbody > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
.panel > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-bordered > thead > tr > td:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
.panel > .table-bordered > tbody > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
.panel > .table-bordered > tfoot > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
  border-right: 0;
}

.panel > .table-bordered > thead > tr:first-child > td,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
.panel > .table-bordered > tbody > tr:first-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
.panel > .table-bordered > thead > tr:first-child > th,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
.panel > .table-bordered > tbody > tr:first-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
  border-bottom: 0;
}

.panel > .table-bordered > tbody > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
.panel > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-bordered > tbody > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
.panel > .table-bordered > tfoot > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
  border-bottom: 0;
}

.panel > .table-responsive {
  border: 0;
  margin-bottom: 0;
}

.panel-group {
  margin-bottom: 22px;
}

.panel-group .panel {
  margin-bottom: 0;
  border-radius: 0px;
}

.panel-group .panel + .panel {
  margin-top: 5px;
}

.panel-group .panel-heading {
  border-bottom: 0;
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
  border-top: 1px solid #ddd;
}

.panel-group .panel-footer {
  border-top: 0;
}

.panel-group .panel-footer + .panel-collapse .panel-body {
  border-bottom: 1px solid #ddd;
}

.panel-default {
  border-color: #ddd;
}

.panel-default > .panel-heading {
  color: #333333;
  background-color: #f5f5f5;
  border-color: #ddd;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #ddd;
}

.panel-default > .panel-heading .badge {
  color: #f5f5f5;
  background-color: #333333;
}

.panel-default > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #ddd;
}

.panel-primary {
  border-color: #00aac8;
}

.panel-primary > .panel-heading {
  color: #fff;
  background-color: #00aac8;
  border-color: #00aac8;
}

.panel-primary > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #00aac8;
}

.panel-primary > .panel-heading .badge {
  color: #00aac8;
  background-color: #fff;
}

.panel-primary > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #00aac8;
}

.panel-success {
  border-color: #d6e9c6;
}

.panel-success > .panel-heading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.panel-success > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #d6e9c6;
}

.panel-success > .panel-heading .badge {
  color: #dff0d8;
  background-color: #3c763d;
}

.panel-success > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #d6e9c6;
}

.panel-info {
  border-color: #bce8f1;
}

.panel-info > .panel-heading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.panel-info > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #bce8f1;
}

.panel-info > .panel-heading .badge {
  color: #d9edf7;
  background-color: #31708f;
}

.panel-info > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #bce8f1;
}

.panel-warning {
  border-color: #faebcc;
}

.panel-warning > .panel-heading {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.panel-warning > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #faebcc;
}

.panel-warning > .panel-heading .badge {
  color: #fcf8e3;
  background-color: #8a6d3b;
}

.panel-warning > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #faebcc;
}

.panel-danger {
  border-color: #ebccd1;
}

.panel-danger > .panel-heading {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.panel-danger > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #ebccd1;
}

.panel-danger > .panel-heading .badge {
  color: #f2dede;
  background-color: #a94442;
}

.panel-danger > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #ebccd1;
}

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
}

.embed-responsive.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

.embed-responsive.embed-responsive-4by3 {
  padding-bottom: 75%;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 0px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.well blockquote {
  border-color: #ddd;
  border-color: rgba(0, 0, 0, 0.15);
}

.well-lg {
  padding: 24px;
  border-radius: 0px;
}

.well-sm {
  padding: 9px;
  border-radius: 0px;
}

.close {
  float: right;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

.modal-open {
  overflow: hidden;
}

.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

.modal.fade .modal-dialog {
  -webkit-transform: translate3d(0, -25%, 0);
  transform: translate3d(0, -25%, 0);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}

.modal-content {
  position: relative;
  background-color: #fff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
  filter: alpha(opacity=0);
}

.modal-backdrop.in {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  min-height: 16.42857143px;
}

.modal-header .close {
  margin-top: -2px;
}

.modal-title {
  margin: 0;
  line-height: 1.42857143;
}

.modal-body {
  position: relative;
  padding: 20px;
}

.modal-footer {
  padding: 20px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}

.modal-footer .btn + .btn {
  margin-left: 5px;
  margin-bottom: 0;
}

.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}

.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 600px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }

  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }

  .modal-sm {
    width: 300px;
  }
}

@media (min-width: 768px) {
  .modal-lg {
    width: 900px;
  }
}

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  visibility: visible;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  filter: alpha(opacity=0);
}

.tooltip.in {
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.tooltip.top {
  margin-top: -3px;
  padding: 5px 0;
}

.tooltip.right {
  margin-left: 3px;
  padding: 0 5px;
}

.tooltip.bottom {
  margin-top: 3px;
  padding: 5px 0;
}

.tooltip.left {
  margin-left: -3px;
  padding: 0 5px;
}

.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #000;
  border-radius: 0px;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}

.tooltip.top-left .tooltip-arrow {
  bottom: 0;
  left: 5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}

.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  right: 5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}

.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}

.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}

.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  left: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}

.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  right: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  max-width: 276px;
  padding: 1px;
  text-align: left;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  white-space: normal;
}

.popover.top {
  margin-top: -10px;
}

.popover.right {
  margin-left: 10px;
}

.popover.bottom {
  margin-top: 10px;
}

.popover.left {
  margin-left: -10px;
}

.popover-title {
  margin: 0;
  padding: 8px 14px;
  font-size: 16px;
  font-weight: normal;
  line-height: 18px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-radius: -1px -1px 0 0;
}

.popover-content {
  padding: 9px 14px;
}

.popover > .arrow,
.popover > .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.popover > .arrow {
  border-width: 11px;
}

.popover > .arrow:after {
  border-width: 10px;
  content: "";
}

.popover.top > .arrow {
  left: 50%;
  margin-left: -11px;
  border-bottom-width: 0;
  border-top-color: #999999;
  border-top-color: rgba(0, 0, 0, 0.25);
  bottom: -11px;
}

.popover.top > .arrow:after {
  content: " ";
  bottom: 1px;
  margin-left: -10px;
  border-bottom-width: 0;
  border-top-color: #fff;
}

.popover.right > .arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-left-width: 0;
  border-right-color: #999999;
  border-right-color: rgba(0, 0, 0, 0.25);
}

.popover.right > .arrow:after {
  content: " ";
  left: 1px;
  bottom: -10px;
  border-left-width: 0;
  border-right-color: #fff;
}

.popover.bottom > .arrow {
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: #999999;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  top: -11px;
}

.popover.bottom > .arrow:after {
  content: " ";
  top: 1px;
  margin-left: -10px;
  border-top-width: 0;
  border-bottom-color: #fff;
}

.popover.left > .arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: #999999;
  border-left-color: rgba(0, 0, 0, 0.25);
}

.popover.left > .arrow:after {
  content: " ";
  right: 1px;
  border-right-width: 0;
  border-left-color: #fff;
  bottom: -10px;
}

.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out left;
  -o-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  line-height: 1;
}

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}

.carousel-inner > .active {
  left: 0;
}

.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel-inner > .next {
  left: 100%;
}

.carousel-inner > .prev {
  left: -100%;
}

.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}

.carousel-inner > .active.left {
  left: -100%;
}

.carousel-inner > .active.right {
  left: 100%;
}

.carousel-control {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 15%;
  opacity: 0.5;
  filter: alpha(opacity=50);
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.carousel-control.left {
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}

.carousel-control.right {
  left: auto;
  right: 0;
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}

.carousel-control:hover,
.carousel-control:focus {
  outline: 0;
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}

.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
  left: 50%;
  margin-left: -10px;
}

.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
  right: 50%;
  margin-right: -10px;
}

.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  font-family: serif;
}

.carousel-control .icon-prev:before {
  content: '\2039';
}

.carousel-control .icon-next:before {
  content: '\203a';
}

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center;
}

.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  border: 1px solid #fff;
  border-radius: 10px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
}

.carousel-indicators .active {
  margin: 0;
  width: 12px;
  height: 12px;
  background-color: #fff;
}

.carousel-caption {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.carousel-caption .btn {
  text-shadow: none;
}

@media screen and (min-width: 600px) {
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-prev,
  .carousel-control .icon-next {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    font-size: 30px;
  }

  .carousel-control .glyphicon-chevron-left,
  .carousel-control .icon-prev {
    margin-left: -15px;
  }

  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-next {
    margin-right: -15px;
  }

  .carousel-caption {
    left: 20%;
    right: 20%;
    padding-bottom: 30px;
  }

  .carousel-indicators {
    bottom: 20px;
  }
}

.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
  content: " ";
  display: table;
}

.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
  clear: both;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

.invisible {
  visibility: hidden;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.hidden {
  display: none !important;
  visibility: hidden !important;
}

.affix {
  position: fixed;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@-ms-viewport {
  width: device-width;
}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}

@media (max-width: 599px) {
  .visible-xs {
    display: block !important;
  }

  table.visible-xs {
    display: table;
  }

  tr.visible-xs {
    display: table-row !important;
  }

  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}

@media (max-width: 599px) {
  .visible-xs-block {
    display: block !important;
  }
}

@media (max-width: 599px) {
  .visible-xs-inline {
    display: inline !important;
  }
}

@media (max-width: 599px) {
  .visible-xs-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  .visible-sm {
    display: block !important;
  }

  table.visible-sm {
    display: table;
  }

  tr.visible-sm {
    display: table-row !important;
  }

  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  .visible-sm-block {
    display: block !important;
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  .visible-sm-inline {
    display: inline !important;
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .visible-md {
    display: block !important;
  }

  table.visible-md {
    display: table;
  }

  tr.visible-md {
    display: table-row !important;
  }

  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .visible-md-block {
    display: block !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .visible-md-inline {
    display: inline !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
}

@media (min-width: 1024px) {
  .visible-lg {
    display: block !important;
  }

  table.visible-lg {
    display: table;
  }

  tr.visible-lg {
    display: table-row !important;
  }

  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}

@media (min-width: 1024px) {
  .visible-lg-block {
    display: block !important;
  }
}

@media (min-width: 1024px) {
  .visible-lg-inline {
    display: inline !important;
  }
}

@media (min-width: 1024px) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}

@media (max-width: 599px) {
  .hidden-xs {
    display: none !important;
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  .hidden-sm {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hidden-md {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .hidden-lg {
    display: none !important;
  }
}

.visible-print {
  display: none !important;
}

@media print {
  .visible-print {
    display: block !important;
  }

  table.visible-print {
    display: table;
  }

  tr.visible-print {
    display: table-row !important;
  }

  th.visible-print,
  td.visible-print {
    display: table-cell !important;
  }
}

.visible-print-block {
  display: none !important;
}

@media print {
  .visible-print-block {
    display: block !important;
  }
}

.visible-print-inline {
  display: none !important;
}

@media print {
  .visible-print-inline {
    display: inline !important;
  }
}

.visible-print-inline-block {
  display: none !important;
}

@media print {
  .visible-print-inline-block {
    display: inline-block !important;
  }
}

@media print {
  .hidden-print {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .col-xlg-1, .col-xlg-2, .col-xlg-3, .col-xlg-4, .col-xlg-5, .col-xlg-6, .col-xlg-7, .col-xlg-8, .col-xlg-9, .col-xlg-10, .col-xlg-11, .col-xlg-12 {
    float: left;
  }

  .col-xlg-12 {
    width: 100%;
  }

  .col-xlg-11 {
    width: 91.66666667%;
  }

  .col-xlg-10 {
    width: 83.33333333%;
  }

  .col-xlg-9 {
    width: 75%;
  }

  .col-xlg-8 {
    width: 66.66666667%;
  }

  .col-xlg-7 {
    width: 58.33333333%;
  }

  .col-xlg-6 {
    width: 50%;
  }

  .col-xlg-5 {
    width: 41.66666667%;
  }

  .col-xlg-4 {
    width: 33.33333333%;
  }

  .col-xlg-3 {
    width: 25%;
  }

  .col-xlg-2 {
    width: 16.66666667%;
  }

  .col-xlg-1 {
    width: 8.33333333%;
  }

  .col-xlg-pull-12 {
    right: 100%;
  }

  .col-xlg-pull-11 {
    right: 91.66666667%;
  }

  .col-xlg-pull-10 {
    right: 83.33333333%;
  }

  .col-xlg-pull-9 {
    right: 75%;
  }

  .col-xlg-pull-8 {
    right: 66.66666667%;
  }

  .col-xlg-pull-7 {
    right: 58.33333333%;
  }

  .col-xlg-pull-6 {
    right: 50%;
  }

  .col-xlg-pull-5 {
    right: 41.66666667%;
  }

  .col-xlg-pull-4 {
    right: 33.33333333%;
  }

  .col-xlg-pull-3 {
    right: 25%;
  }

  .col-xlg-pull-2 {
    right: 16.66666667%;
  }

  .col-xlg-pull-1 {
    right: 8.33333333%;
  }

  .col-xlg-pull-0 {
    right: auto;
  }

  .col-xlg-push-12 {
    left: 100%;
  }

  .col-xlg-push-11 {
    left: 91.66666667%;
  }

  .col-xlg-push-10 {
    left: 83.33333333%;
  }

  .col-xlg-push-9 {
    left: 75%;
  }

  .col-xlg-push-8 {
    left: 66.66666667%;
  }

  .col-xlg-push-7 {
    left: 58.33333333%;
  }

  .col-xlg-push-6 {
    left: 50%;
  }

  .col-xlg-push-5 {
    left: 41.66666667%;
  }

  .col-xlg-push-4 {
    left: 33.33333333%;
  }

  .col-xlg-push-3 {
    left: 25%;
  }

  .col-xlg-push-2 {
    left: 16.66666667%;
  }

  .col-xlg-push-1 {
    left: 8.33333333%;
  }

  .col-xlg-push-0 {
    left: auto;
  }

  .col-xlg-offset-12 {
    margin-left: 100%;
  }

  .col-xlg-offset-11 {
    margin-left: 91.66666667%;
  }

  .col-xlg-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-xlg-offset-9 {
    margin-left: 75%;
  }

  .col-xlg-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-xlg-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-xlg-offset-6 {
    margin-left: 50%;
  }

  .col-xlg-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-xlg-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-xlg-offset-3 {
    margin-left: 25%;
  }

  .col-xlg-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-xlg-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-xlg-offset-0 {
    margin-left: 0%;
  }
}

@media (min-width: 1200px) {
  .col-xxlg-1, .col-xxlg-2, .col-xxlg-3, .col-xxlg-4, .col-xxlg-5, .col-xxlg-6, .col-xxlg-7, .col-xxlg-8, .col-xxlg-9, .col-xxlg-10, .col-xxlg-11, .col-xxlg-12 {
    float: left;
  }

  .col-xxlg-12 {
    width: 100%;
  }

  .col-xxlg-11 {
    width: 91.66666667%;
  }

  .col-xxlg-10 {
    width: 83.33333333%;
  }

  .col-xxlg-9 {
    width: 75%;
  }

  .col-xxlg-8 {
    width: 66.66666667%;
  }

  .col-xxlg-7 {
    width: 58.33333333%;
  }

  .col-xxlg-6 {
    width: 50%;
  }

  .col-xxlg-5 {
    width: 41.66666667%;
  }

  .col-xxlg-4 {
    width: 33.33333333%;
  }

  .col-xxlg-3 {
    width: 25%;
  }

  .col-xxlg-2 {
    width: 16.66666667%;
  }

  .col-xxlg-1 {
    width: 8.33333333%;
  }

  .col-xxlg-pull-12 {
    right: 100%;
  }

  .col-xxlg-pull-11 {
    right: 91.66666667%;
  }

  .col-xxlg-pull-10 {
    right: 83.33333333%;
  }

  .col-xxlg-pull-9 {
    right: 75%;
  }

  .col-xxlg-pull-8 {
    right: 66.66666667%;
  }

  .col-xxlg-pull-7 {
    right: 58.33333333%;
  }

  .col-xxlg-pull-6 {
    right: 50%;
  }

  .col-xxlg-pull-5 {
    right: 41.66666667%;
  }

  .col-xxlg-pull-4 {
    right: 33.33333333%;
  }

  .col-xxlg-pull-3 {
    right: 25%;
  }

  .col-xxlg-pull-2 {
    right: 16.66666667%;
  }

  .col-xxlg-pull-1 {
    right: 8.33333333%;
  }

  .col-xxlg-pull-0 {
    right: auto;
  }

  .col-xxlg-push-12 {
    left: 100%;
  }

  .col-xxlg-push-11 {
    left: 91.66666667%;
  }

  .col-xxlg-push-10 {
    left: 83.33333333%;
  }

  .col-xxlg-push-9 {
    left: 75%;
  }

  .col-xxlg-push-8 {
    left: 66.66666667%;
  }

  .col-xxlg-push-7 {
    left: 58.33333333%;
  }

  .col-xxlg-push-6 {
    left: 50%;
  }

  .col-xxlg-push-5 {
    left: 41.66666667%;
  }

  .col-xxlg-push-4 {
    left: 33.33333333%;
  }

  .col-xxlg-push-3 {
    left: 25%;
  }

  .col-xxlg-push-2 {
    left: 16.66666667%;
  }

  .col-xxlg-push-1 {
    left: 8.33333333%;
  }

  .col-xxlg-push-0 {
    left: auto;
  }

  .col-xxlg-offset-12 {
    margin-left: 100%;
  }

  .col-xxlg-offset-11 {
    margin-left: 91.66666667%;
  }

  .col-xxlg-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-xxlg-offset-9 {
    margin-left: 75%;
  }

  .col-xxlg-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-xxlg-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-xxlg-offset-6 {
    margin-left: 50%;
  }

  .col-xxlg-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-xxlg-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-xxlg-offset-3 {
    margin-left: 25%;
  }

  .col-xxlg-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-xxlg-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-xxlg-offset-0 {
    margin-left: 0%;
  }
}

.did-btn-normal {
  color: #fff;
  background-color: #5f5f5f;
  border-color: #525252;
}

.did-btn-normal:hover,
.did-btn-normal:focus,
.did-btn-normal:active,
.did-btn-normal.active,
.open > .dropdown-toggle.did-btn-normal {
  color: #fff;
  background-color: #464646;
  border-color: #343434;
}

.did-btn-normal:active,
.did-btn-normal.active,
.open > .dropdown-toggle.did-btn-normal {
  background-image: none;
}

.did-btn-normal.disabled,
.did-btn-normal[disabled],
fieldset[disabled] .did-btn-normal,
.did-btn-normal.disabled:hover,
.did-btn-normal[disabled]:hover,
fieldset[disabled] .did-btn-normal:hover,
.did-btn-normal.disabled:focus,
.did-btn-normal[disabled]:focus,
fieldset[disabled] .did-btn-normal:focus,
.did-btn-normal.disabled:active,
.did-btn-normal[disabled]:active,
fieldset[disabled] .did-btn-normal:active,
.did-btn-normal.disabled.active,
.did-btn-normal[disabled].active,
fieldset[disabled] .did-btn-normal.active {
  background-color: #5f5f5f;
  border-color: #525252;
}

.did-btn-normal .badge {
  color: #5f5f5f;
  background-color: #fff;
}

.btn {
  border-radius: 4px;
}

.btn-xs,
.btn-group-xs > .btn {
  border-radius: 2px;
}

.btn-link {
  font-weight: 300;
}

.no-padding {
  padding: 0 !important;
  margin: 0 !important;
}

.ios-touch-scroll-enabled {
  -webkit-overflow-scrolling: touch;
}

.ios-touch-scroll-disabled {
  -webkit-overflow-scrolling: auto;

}

.border-right-light-grey {
  border-right: solid 1px #ddd;
}

.border-top-light-grey {
  border-top: solid 1px #ddd;
}

.border-bottom-light-grey {
  border-bottom: solid 1px #ddd;
}

.authorizeButton {
  height: 40px;
  min-width: 150px;
  border: 1px solid #D3D3DC;
  border-radius: 20px;
  padding: 0 15px;
  color: #73738C;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
  transition-property: background-color, border-color, color, opacity;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 16px;
}

a.authorizeButton,
a.authorizeButton:focus {
  text-decoration: none;
  color: #73738C;
}

.authorizeButton--blue {
  background-color: #2C75C9;
  border-color: #2C75C9;
  color: white;
}

.authorizeButton:not([disabled]):focus,
.authorizeButton:not([disabled]):active {
  outline-color: #73738C !important;
}

.authorizeButton:not([disabled]):hover {
  background-color: #1C856E;
  border-color: #1C856E;
  color: white;
  text-decoration: none;
}

.authorizeButton[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.commonButton {
    font-size: 16px;
    vertical-align: middle;
    font-weight: 600;
    padding: 0 15px;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
    border-radius: 3px;
    background-color: #0070BE;
    color: white;
    transition: all 0.2s ease-in-out;
    transition-property: color, background-color, border-color, opacity, box-shadow;
    border: solid #0070BE 1px;
    text-transform: uppercase;
    white-space: nowrap;
    height: 40px;
    line-height: 40px;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.commonButton:focus {
    box-shadow: none !important;
}

/* SIZES */

.commonButton--mediumSize {
    font-size: 14px;
    padding: 0 10px;
    height: 35px;
    line-height: 35px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.07);
    font-weight: 500;
}

.commonButton--largeSize {
  font-size: 14px;
  padding: 0 20px;
  height: 50px;
  line-height: 40px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.07);
}

/* COLORS */

.commonButton--positive {
    background-color: #26C7A3;
    border-color: #26C7A3;
}

.commonButton--positive-empty {
  color: #26C7A3;
  border-color: #26C7A3;
  background-color: transparent;
}

.commonButton--negative {
    background-color: #D0021B;
    border-color: #D0021B;
}

.commonButton--warning {
    background-color: #F5A623;
    border-color: #F5A623;
}

.commonButton--lightGray {
    background-color: #9CAFDA;
    border-color: #9CAFDA;
}

.commonButton--gray {
    background-color: #7C8CAD;
    border-color: #7C8CAD;
}

.commonButton--white {
  background-color: white;
  border-color: white;
  color: #131313
}

.commonButton--secondaryWhite {
  border-color: white;
  background-color: transparent;
  color: white;
}

.commonButton--gray-darkText {
  background-color: #D3D3DC;
  border-color: #D3D3DC;
  color: #7C8CAD;
}

.commonButton--secondary {
    border-color: #9CAFDA;
    background-color: transparent;
    color: #7C8CAD;
}

.commonButton--transparentGray {
  background-color: transparent;
  border-color: #7C8CAD;
  color: #7C8CAD;
}

.commonButton--transparent {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* DISABLED */

.commonButton[disabled] {
    opacity: 0.5;
}

.commonButton:not([disabled]):hover {
    background-color: #26C7A3;
    color: white;
    border-color: #26C7A3;
}

.commonButton--positive:not([disabled]):hover {
  background-color: #0070BE;
  border-color: #0070BE;
}

/* WRAPPER */
.commonButtonsWrapper .commonButton:first-child {
  border-top-left-radius: 7px;
}

.commonButtonsWrapper .commonButton:last-child {
  border-bottom-right-radius: 7px;
}

.dropdown-shadow {
     box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
 }
@font-face {
  font-family: "Myriad Pro Black";
  src: url("../../fonts/myriad-pro/Myriad Pro Black/Myriad Pro Black.otf");
}
@font-face {
  font-family: "Myriad Pro Bold Condensed";
  src: url("../../fonts/myriad-pro/Myriad Pro Bold Condensed/Myriad Pro Bold Condensed.otf");
}
@font-face {
  font-family: "Myriad Pro Bold Condensed Italic";
  src: url("../../fonts/myriad-pro/Myriad Pro Bold Condensed Italic/Myriad Pro Bold Condensed Italic.otf");
}

.font-s {
  font-size: 14px;
}

.font-s-light-grey {
  font-size: 14px;
  color: #A1A1A1;
}

.font-m-light-black {
  font-size: 16px;
  color: #5f5f5f !important;
}

.font-s-bold {
  font-size: 14px;
  font-weight: bold;
}

.font-bold {
  font-weight: bold;
}

.font-weight-400 {
  font-weight: 400;
}

.form {

}

.formRequired label:after,
label.formRequired:after {
  content: "*";
  color: #20A78A;
}

.formGroup {
  width: 100%;
}

.formSet {
  display: flex;
}

.formSet .formGroup {
  flex: 1 1;
}

.formSet .formGroup:not(:last-child) {
  margin-right: 10px;
}

.form textarea,
.form label,
.form select,
.form input,
.form .customFormElement {
  width: 100%;
  display: block;
}

.formGroup:not(:last-child) {
  margin-bottom: 10px;
}

.form input,
.form select,
.form textarea,
.form .customFormElement {
  height: 42px;
  border: 2px solid #D7D7DC;
  border-radius: 3px;
  background-color: #FFFFFF;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  padding: 0 5px;
  transition: border-color 0.2s ease-in-out;
}

.form input[type="password"] {
  font-size: 2em;
  letter-spacing: 0.02em;
}

.formRequired .ng-touched.ng-valid,
.ng-touched.ng-valid.formRequired,
.formRequired .ng-dirty.ng-valid,
.ng-dirty.ng-valid.formRequired {
  border-color: #20A78A;
}

.ng-touched.ng-invalid,
.ng-dirty.ng-invalid {
  border-color: #C5021A;
}

.form input:focus,
.form input:active,
.form select:focus,
.form select:active,
.form textarea:focus,
.form textarea:active,
.form .customFormElement:focus,
.form .customFormElement:active {
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1) !important;
  outline: none;
}

.form label {
  font-size: 12px;
  font-weight: 600;
  color: #454E5C;
  letter-spacing: 1px;
  line-height: 19px;
  text-transform: uppercase;
}


/***
  Form Floating Label
***/

.form[formFloatingLabel] input,
.form[formFloatingLabel] select,
.form[formFloatingLabel] textarea,
.form[formFloatingLabel] .customFormElement {
  background-color: transparent;
  border-width: 1px;
  border-radius: 4px;
  box-shadow: none;
  height: 45px;
  padding: 15px;
  letter-spacing: 0.05em;
  text-shadow: 0 0 0;
}

.form[formFloatingLabel].form--disabled .formGroup {
  pointer-events: none;
}

.form[formFloatingLabel] textarea {
  height: auto;
}

.form[formFloatingLabel] :focus,
.form[formFloatingLabel] :active,
.form[formFloatingLabel] .formGroup--active .customFormElement {
  box-shadow: none !important;
  border-color: #389BFF !important;
}

.form[formFloatingLabel] .formGroup {
  position: relative;
  margin-top: 10px;
  margin-bottom: 0px;
}

.form[formFloatingLabel] label {
  font-size: 1.4rem;
  font-weight: normal;
  text-shadow: 0 0 0;
  left: 0;
  margin: 14px 10px 0;
  padding: 0 4px;
  position: absolute;
  top: 0;
  color: #898A8C;
  transition: all 0.2s ease-in-out;
  pointer-events: none;
  width: auto;
}

.form[formFloatingLabel] :focus ~ label,
.form[formFloatingLabel] .formControl--filled label,
.form[formFloatingLabel] .formGroup.formGroup--active label {
  font-size: 12px;
  transform: translateY(-22px);
  background: #E9F0FF;
}

.form[formFloatingLabel] :focus ~ label,
.form[formFloatingLabel] .formGroup.formGroup--active label {
  color: #389BFF !important;
  text-shadow: 0 0 0 #389BFF !important;
}


.form[formFloatingLabel] .formRequired.formControl--filled  .ng-touched.ng-valid ~ label,
.form[formFloatingLabel] .formControl--filled  .ng-touched.ng-valid.formRequired ~ label {
  color: #26C7A3;
}


.form[formFloatingLabel] .formControl--filled  .ng-touched.ng-invalid ~ label,
.form[formFloatingLabel] .formControl--filled  .ng-dirty.ng-invalid ~ label {
  color: #C5021A;
}

.unloggedForm {

}

.unloggedForm .formRequired label:after,
.unloggedForm label.formRequired:after {
  content: "*";
  color: #20A78A;
}

.unloggedForm .formGroup {
  width: 100%;
}

.unloggedForm .formSet {
  display: flex;
}

.unloggedForm .formSet .formGroup {
  flex: 1 1;
}

.unloggedForm .formSet .formGroup:not(:last-child) {
  margin-right: 15px;
}

.unloggedForm textarea,
.unloggedForm label,
.unloggedForm select,
.unloggedForm input,
.unloggedForm .customFormElement {
  width: 100%;
  display: block;
}

.unloggedForm .formGroup:not(:last-child) {
  margin-bottom: 3px;
}

.unloggedForm input,
.unloggedForm select,
.unloggedForm textarea,
.unloggedForm .customFormElement {
  font-size: 16px;
  height: 36px;
  border: 1px solid #D7D7DC;
  border-radius: 18px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  padding: 0 10px;
  transition: border-color 0.2s ease-in-out;
}

.unloggedForm input[type="password"] {
  font-size: 2em;
  letter-spacing: 0.02em;
}

.formRequired .ng-touched.ng-valid,
.ng-touched.ng-valid.formRequired,
.formRequired .ng-dirty.ng-valid,
.ng-dirty.ng-valid.formRequired {
  border-color: #20A78A;
}

.ng-touched.ng-invalid,
.ng-dirty.ng-invalid {
  border-color: #C5021A;
}

.unloggedForm input:focus,
.unloggedForm input:active,
.unloggedForm select:focus,
.unloggedForm select:active,
.unloggedForm textarea:focus,
.unloggedForm textarea:active,
.unloggedForm .customFormElement:focus,
.unloggedForm .customFormElement:active {
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1) !important;
  outline: none;
}

.unloggedForm label {
  font-size: 12px;
  font-weight: 500;
  color: #454E5C;
  letter-spacing: 1px;
  line-height: 19px;
  text-transform: uppercase;
}

.basic-container {
    background-color: white;
    border-radius: 3px;
    border: 0;
    padding: 5px;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
}
.border-none {
    border-width: 0;
}

.border-thin {
    border-width: 1px;
}

.border-mid {
    border-width: 2px;
}

.border-thick {
    border-width: 3px;
}
.padding-none {
    padding: 0;
}

.padding-mini {
    padding: 5px;
}

.padding-small {
    padding: 10px;
}

.padding-mid {
    padding: 15px;
}

.padding-large {
    padding: 20px;
}
.height-full {
  height: 100%;
}

.height-65 {
  height: 65px;
}

.line-height-65 {
  line-height: 65px;
}

.landingPage {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
}

.landingPageRWD-leftPadding {
    padding-left: 10px;
}

.landingPageRWD-rightPadding {
    padding-right: 10px;
}

.landingPageRWD-absoluteLeft {
    left: 0;
    right: 0;
}

.landingPageRWD-absoluteRight {
    left: 0;
    right: 0;
}

.landingPageRWD-padding {
    padding-left: 10px;
    padding-right: 10px;
}

@media (min-width: 1300px) {
    .landingPageRWD-leftPadding {
        padding-left: 17vw;
    }

    .landingPageRWD-rightPadding {
        padding-right: 17vw;
    }

    .landingPageRWD-padding {
        padding-left: 17vw;
        padding-right: 17vw;
    }

    .landingPageRWD-absoluteLeft {
        left: 17vw;
        right: 0;
    }

    .landingPageRWD-absoluteRight {
        left: 0;
        right: 17vw;
    }
}
.license-details h4, h5{
  font-weight: 400;
}

.license-details h4 {
  font-size: 20px;
}

.license-details h5 {
  font-size: 16px;
}

#owner-type-header {
  padding-right: 25px;
}

.license-list-item .did-tool-box {
  display: inline;
}

.sort-icon-top {
  position: absolute;
  font-size: 16px;
  right: 5px;
  top: 18px;
  cursor: pointer;
}

.sort-icon-top-selected {
  font-size: 20px;
  right: 3px;
  top: 16px;
}

.sort-icon-bottom {
  position: absolute;
  font-size: 16px !important;
  right: 5px;
  top: 30px;
  cursor: pointer;
}

.sort-icon-bottom-selected {
  font-size: 20px !important;
  right: 3px;
}

/* LAYOUT */

.popupBody {
  padding: 15px 20px;
}

.popupBody section:not(:first-child) {
  margin-top: 1em;
}

.popupBody .section-label {
  font-size: 12px;
  font-weight: 600;
  color: #454E5C;
  letter-spacing: 1px;
  line-height: 19px;
  text-transform: uppercase;
  display: block;
}

.popup--darkBackground .section-label {
  color: #454E5C;
}

.popupBody .section-content {
  font-size: 16px;
  width: 100%;
  color: #0D1C2E;
  text-overflow: ellipsis;
  overflow: hidden;
}

.popup-select {
  width: 100%;
}

.popup-textInput {
  height: 42px;
  border: 2px solid #D7D7DC;
  border-radius: 3px;
  background-color: #FFFFFF;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  width: 100%;
  padding: 0 5px;
}

.popup-textArea {
  border: 2px solid #D7D7DC;
  border-radius: 3px;
  background-color: #FFFFFF;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  width: 100%;
  padding: 0 5px;
}

.popup-errorMessage {
  color: #C30016;
  font-size: 13px;
  line-height: 21px;
  min-height: 21px;
}

.popup-textInput--invalid {
  border-color: #D0021B;
}

.popup-textInput:focus {
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1) !important;
}

.popupFooter {
  padding: 15px 20px;
  display: flex;
  justify-content: flex-end;
}

.popupFooter .commonButton:not(:last-child) {
  margin-right: 10px;
}

.popup--darkBackground {
  background-color: #EAE9EC;
}



.v-middle {
  position: absolute;
  margin: 0;
  top: 50%;
  transform: translate(0%, -50%);
}

.v-middle-icon {
  display: inline-block;
  vertical-align: middle;
}

.h-center {
  text-align: center;
}

.padding-top-10 {
  padding-top: 10px;
}

.padding-left-10 {
  padding-left: 10px;
}

.no-h-padding {
  padding-left: 0px;
  padding-right: 0px;
}

.resourcePlayer-infoBoxDropdown {
    min-width: 0;
}

.resourcePlayer-keywordContainer {
    display: inline-block;
}
.sidebar-menu {
  width: 254px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  display: flex;
  border-radius: 4px;
}

.sidebarMenu-padded {
  padding: 0 10px;
}

.sidebar-menu-wrapper {
  padding: 9px 0 35px 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.sidebar-menu-wrapper > sidebar-menu-button,
.sidebar-menu-wrapper > sidebar-menu-expanding-button {
  margin-left: 10px;
}

.sidebar-menu-line {
  height: 2px;
  width: 100%;
  background-color: #E9F0FF;
  margin-top: 7px;
  margin-bottom: 7px;
}

#confirm-removal-student-popup-modal label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin-right: 15px;
  font-size: 13px;
}

#confirm-removal-student-popup-modal input[type=radio] {
  display: none;
  position: static;
  margin-left: 0px;
}

#confirm-removal-student-popup-modal label:before {
  content: "";
  display: inline-block;

  width: 16px;
  height: 16px;

  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #ffffff;
  border: #00aac8 solid 2px;
}

#confirm-removal-student-popup-modal .radio label:before {
  border-radius: 8px;
}

#confirm-removal-student-popup-modal input[type=radio]:checked + label:before {
  content: "\2022";
  color: #00aac8;
  font-size: 30px;
  text-align: center;
  line-height: 13px;
}

#confirm-removal-student-popup-modal .warningContainer {
  width: calc(100% - 60px);
  margin-left: 30px;
}

#confirm-removal-student-popup-modal .warningField {
  padding: 10px;
  background: #fcf8e3;
  border-radius: 2px;
  border: #faebcc solid 1px;
  font-size: 12px;
  color: #8A6D3B;
}

#confirm-removal-student-popup-modal .warningPrompt {
  font-size: 13px;
}

#confirm-removal-student-popup-modal .form-control {
  margin-top: 5px;
}

#confirm-removal-student-popup-modal label {
  font-weight: 300;
}

.studentApp {
    font-family: 'Dosis', Helvetica, Arial, sans-serif;
}

.studentApp .commonButton {
    border-radius: 7px 3px 7px 3px;
}

.truncate {
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.anchor {
  cursor: pointer;
}

.anchor:hover {
  text-decoration: underline;
}

.form-control.did-admin-modal-search-input {
  width: 495px;
  height: 50px;
}

.did-admin-modal .form-group label {
  margin-bottom: 15px
}

.did-users-title .did-title-box {
  width: 85px;
}

.did-params-group {
  margin-bottom: 40px;
}

.did-params-grid {
  margin: 20px 10px;
}

.did-params-controls {
  display: inline-block;
  float: right;
}

.did-params-group-name {
  margin-right: 6px;
  margin-left: 13px;
  font-size: 20px;
  height: 32px;
  line-height: 40px;
  vertical-align: top;
}

.did-params-group-changed {
  font-size: 55%;
  display: inline-block;
}

.did-admin-space {
  padding: 20px 0;
}

.grade-field-header, .grade-field {
  padding: 0 15px;
  float: left;
  width: 20%;
  position: relative;
  min-height: 1px;
}

.grading-form .control-group, .manage-tutorials .control-group {
  float: right;
}

.manage-homepage .control-group {
  float: right;
}

.manage-homepage .control-group {
  float: right;
}

.grade-with-icon-type .row.did-grid-item {
  padding: 25px 0;
}

.grade-with-icon-type .grades-table .grade-field {
  padding: 10px 15px;
}

.grade-field-action button {
  float: left;
}

.grading-form .has-error input {
  border-color: #a94442 !important;
}

.grade-type-icon i {
  padding: 20px;
  border: dashed 1px #dcdcdc;
}

.grade-type-icon i.di, .grade-type-icon button:hover .di {
  font-size: 33px;
  line-height: 33px;
  height: 33px;
}

.grade-field-action button .di, .grade-field-action button:hover .di {
  font-size: 36px;
  line-height: 36px;
  height: 36px;
}

.grade-type-icon.image-view {
  position: relative;
  height: 56px;
}

.default-icon-view .help-block {
  margin-top: 26px;
}

.default-icon-view.has-error i {
  border-color: #a94442;
}

.grade-type-icon.image-view button {
  position: absolute;
  left: 0;
  top: -10px;
}

.grade-type-icon.image-view img {
  height: 75px;
  width: 75px;
  margin: 0 auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.grade-icon-edit {
  display: none;
}

.grade-type-icon.image-view button:hover .grade-icon-edit {
  display: block;
  margin: -76px auto 0 auto;
  height: 76px;
  width: 76px;
}

.grade-type-icon.image-view button:hover img {
  opacity: 0.5;
}

/*pseudo select*/
.select-pseudo {
  border-color: #dcdcdc !important;
}

.select-pseudo select {
  background: transparent !important;
  width: 100%;
  position: absolute;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.select-pseudo {
  width: 24%;
  height: 34px;
  background: white;
  border: 1px solid #ccc;
  position: relative;
}

.select-pseudo:active:before {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.select-pseudo:before {
  position: relative;
  top: 11px;
  right: 10px;
  width: 15px;
  display: inline-block;
  font-family: 'iconvault';
  font-style: normal;
  font-weight: 100;
  font-size: 14px;
  line-height: 1;
  float: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: url('');
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  content: url('../../../../../images/down_arrow.svg');
}

/*pseudo select end*/

/* settings groups */
.settings-statistics-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}

.settings-statistics-container .settings-statistics-box {
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 10px;
  padding: 10px;
  width: 49%;
  height: 77px;

  display: block;
  position: relative;

}

.settings-statistics-container .settings-statistics-box.left-box {
  margin-right: 1%;
}

.settings-statistics-container .settings-statistics-box.right-box {
  margin-left: 1%;
}

.settings-statistics-container .settings-statistics-box .settings-description {
  margin-left: 0;
  float: left;
  position: absolute;
}

.settings-statistics-container .settings-statistics-box .settings-button {
  float: right;
  margin-top: 15px;
}

.settings-statistics-container .settings-statistics-box .settings-button.settings-button-redeem {
  margin: 0;
  float: right;
}

/* settings groups - end */

/*admin tutorials*/
.manage-tutorials .mts-alert-info.alert {
  padding-left: 55px;
  position: relative;
}

.mts-margin-bottom.alert {
  margin-bottom: 20px;
}

.addProduct-page {
  position: relative;
}

.manage-tutorials .mts-alert-info.alert i.fa {
  font-size: 28px;
  margin-right: 10px;
  position: absolute;
  left: 15px;
  top: 13px;
}

.manage-tutorials header {
  position: relative;
}

.mts-container {
  display: block;
  position: absolute;
  right: 20px;
  background-color: #00AAC8;
  padding: 5px 7px;
  top: 15px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.mts-element {
  color: #ffffff;
  position: relative;
  cursor: pointer;
  line-height: 22px;
  padding: 0 20px;
  display: block;
  float: left;
  overflow: hidden;
  z-index: 2;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  width: 100px;
  -webkit-transition: color 0.5s;
  transition: color 0.5s;
}

.mts-element.mts-element-selected {
  color: #00AAC8;
  cursor: default;

}

.mts-slide {
  display: none;
  position: absolute;
  background-color: white;
  height: 22px;
  width: 100px;
  border: none;
  z-index: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.mts-slide.mts-slide-right {
  display: block;
  right: 7px;
  -webkit-transition: right 0.5s;
  transition: right 0.5s;
}

.mts-slide.mts-slide-left {
  display: block;
  right: 107px;
  -webkit-transition: right 0.5s;
  transition: right 0.5s;
}

.manage-tutorials .did-list-grid {
  margin-bottom: 20px;
}

.manage-tutorials .paper-view-layout .resources-cointainer .resource-box-container .resource-box .resource-box-image,
.tutorial-dragged-proxy .paper-view-layout .resources-cointainer .resource-box-container .resource-box .resource-box-image {
  display: list-item;
}

.manage-tutorials .tutorial-box.resource-box .resource-box-image img,
.tutorial-dragged-proxy .tutorial-box.resource-box .resource-box-image img {
  max-width: 230px;
  max-height: 150px;
  margin: 0 auto;
  width: auto;
}

.manage-tutorials .dragged-element {
  border: 3px dashed #5f5f5f;
}

.manage-tutorials .dragged-element .tutorial-box {
  visibility: hidden;
}

.img-group-single .icon-collections-thumbnail {
  font-size: 100px;
}

/*admin tutorials end*/

.stat-btn-fixed-width {
  width: 120px;
}

#param-row-watermarkText div:nth-child(2), #param-row-watermarkTimeout div:nth-child(2) {
  display: none;
}

#param-row-watermarkText div:nth-child(3), #param-row-watermarkTimeout div:nth-child(3) {
  width: 58.33333%;
}

/* Hide OneDrive in platform settings, as long as feature is disabled */
#param-row-oneDriveClientId {
  display: none !important;
}
.user-data {
  width: auto;
}

.imported-resources .section-header {
  max-width: 1000px;
  position: relative;
  padding-left: 70px;
}

.imported-resources .section-header .icon-back {
  font-size: 42px;
  position: absolute;
  left: 10px;
  top: 0;
  color: #5f5f5f;
}

.imported-resources .section-header .icon-play-outline {
  font-size: 42px;
  position: absolute;
  right: 10px;
  top: 0;
  color: #5f5f5f;
}

.imported-resources .edit-grid {
  padding: 20px;
  background: #fff;
  max-width: 1000px;
  margin-bottom: 10px;
}

.imported-resources .edit-grid label {
  font-weight: bold;
  padding: 15px 0 5px 0;
  display: block;
}

.imported-resources .edit-grid textarea {
  width: 100%;
  border: 1px solid #ccc;
  height: 150px;
}

.imported-resources .edit-grid input, .imported-resources .edit-grid select {
  width: 100%;
  border: 1px solid #ccc;
  height: 29px;
  padding: 0 5px;
}

.imported-resources .edit-grid .tags input {
  height: 26px;
  padding: 0;
}

.imported-resources .edit-grid input.error,
.imported-resources .edit-grid select.error,
.imported-resources .edit-grid textarea.error,
.imported-resources .edit-grid .error,
tags-input.error .tags {
  border-color: red !important;
}

.imported-resources .edit-grid div.error {
  color: red;
  border: none;
  font-size: 13px;
  padding-top: 5px;
}

.did-list-item .has-error {
  color: red;
}

.imported-resources .edit-grid .tags input {
  width: auto;
}

.imported-resources .no-file {
  border: 2px dashed #ccc;
  height: 300px;
  max-width: 400px;
  position: relative;
  overflow: hidden;
}

.imported-resources .has-file {
  border: none;
}

.imported-resources .no-file img {
  z-index: 2;
  position: absolute;
  left: -10000px;
  right: -10000px;
  top: -10000px;
  bottom: -10000px;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

.imported-resources .no-file input {
  font-size: 300px;
  width: 1000px;
  height: 500px;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  cursor: pointer;
}

.imported-resources .no-file span {
  font-size: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -34px 0 0 -24px;
  z-index: 1;
}

.imported-resources .thumbnail {
  width: 100%;
}

.imported-resources .resource-parent-key {
  padding: 0 35px 10px 0;
  position: relative;
}

.imported-resources .resource-action-icon {
  position: absolute;
  right: 0;
  top: -3px;
  font-size: 25px;
  cursor: pointer;
}

.imported-resources tags-input .tags .input {
  border: 0;
}

.resources-cointainer i.item-incomplete {
  margin-top: 8px;
  display: inline-block;
  color: #999 !important;
}

.imported-resources .no-resource-cover {
  border: 2px dashed #ccc;
  width: 100%;
  height: 300px;
  text-align: center;
  font-size: 200px;
  color: #ccc;
}

.resource-import-error {
  color: red;
  text-decoration: underline;
  cursor: pointer;
}

.resource-import-ready {
  color: #387eff;
  text-decoration: underline;
  cursor: pointer;
}

.did-scrollable::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

.did-scrollable::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(0, 0, 0, .1);
}

.did-scrollable::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}

.user-details .edit-form .form-group {
  /*margin-bottom: 2px;*/
}
.user-data {
  width: auto;
}

.authorizeForm-animation {
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-name: authorizeForms-entrance;
}

@keyframes authorizeForms-entrance {
  0%, 30% {
    transform: translateY(-50px);
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
  }
}

.login-roles-section {
  overflow: hidden;
}

.login-role-section {
  display: block;
  float: left;
  overflow: hidden;
  width: 50%;
  height: auto;
  padding: 50px;
}

.login-role-button {
  display: block;
  overflow: hidden;
  width: 100%;
  height: auto;
  cursor: pointer;
  color: #ffffff;
  background-color: #00AAC8;
  padding: 20px;
}

.login-role-section ul {
  list-style-type: disc;
}

.register-form-atg select:disabled {
  opacity: 0.7;
  background-color: #f0f0f0;
}

.smregister-screen iframe {
  visibility: hidden;
}

#no-access-page {
  padding: 20px 20px;
}

#no-access-page header {
  font-weight: 500;
  font-size: 20px;
  color: #868686;
}

.cloud-picker {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  text-align: center;
}

.cloud-picker-option {
  cursor: pointer;
  height: 60px;
  width: 32%;
  text-align: center;
  border: 1px dashed #868686;
  padding: 0;
  margin: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.cloud-picker-option.dropbox {
  background-image: url('../../../../../images/cloud/dropbox/Dropbox.png');
}

.cloud-picker-option.onedrive {
  background-image: url('../../../../../images/cloud/onedrive/OneDrive.png');
}

.cloud-picker-option.googledrive {
  background-image: url('../../../../../images/cloud/googledrive/GoogleDrive.png');
}

.cloud-picker-option > a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 60px;
  font-weight: bold;
}

.cloud-picker-logo {
  max-height: 60px;
}

.cloud-picker-option.is-disabled {
  border: 1px dashed #ccc;
}

.cloud-picker-option.is-disabled > a {
  color: #ccc;
  cursor: default;
}

.cloud-picker-option.is-disabled {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.resource-box .resource-box-image a.collection-thumbnail-anchor::after {
  content: '.';
  display: none;
  float: none;
}

.resource-box .resource-box-image a.collection-thumbnail-anchor:hover {
  text-decoration: none;
  color: #00aac8;
}

.resource-box .resource-box-image a.collection-thumbnail-anchor {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
}

.resource-box .resource-box-image a.collection-thumbnail-anchor img,
.resource-box .resource-box-image a.collection-thumbnail-anchor i {
  display: block;
  height: 50%;
  width: 50%;
  padding: 2px;
  margin: 0;
  float: left;
  cursor: inherit;
}

.resource-box .resource-box-image a.collection-thumbnail-anchor i.mediatype-icon {
  font-size: 50px;
}

.resource-box .resource-box-image a.collection-thumbnail-anchor i.icon-collections-thumbnail.multi-thumbnail {
  font-size: 50px;
  height: 50%;
  width: 50%;
  margin: 0;
}

.resource-box .resource-box-image a.collection-thumbnail-anchor .img-group-2:nth-child(2) i.icon-collections-thumbnail.multi-thumbnail {
  margin-left: 50%;
}

.resource-box .resource-box-image a.collection-thumbnail-anchor .img-group-2:nth-child(1) i.icon-collections-thumbnail.multi-thumbnail {
  margin-right: 50%;
}

.resource-box .resource-box-image a.collection-thumbnail-anchor .img-group-2 img,
.resource-box .resource-box-image a.collection-thumbnail-anchor .img-group-2 i.mediatype-icon {
  float: left;
}

.resource-box .resource-box-image a.collection-thumbnail-anchor .img-group-2 img {
  left: 25%;
}

.resource-box .resource-box-image a.collection-thumbnail-anchor .img-group-2 i {
  left: 25%;
}

.resource-box .resource-box-image a.collection-thumbnail-anchor .img-group-2:nth-child(2) img,
.resource-box .resource-box-image a.collection-thumbnail-anchor .img-group-2:nth-child(2) i.mediatype-icon {
  margin-left: 50%;
}

.resource-box .resource-box-image a.collection-thumbnail-anchor .img-group-single img,
.resource-box .resource-box-image a.collection-thumbnail-anchor .img-group-single i.mediatype-icon {
  float: none;
  height: 100%;
  width: 100%;
  font-size: 100px;
}

.resource-box .resource-box-image a.collection-thumbnail-anchor .img-group-single img {
  left: 50%;
}

.resource-box .resource-box-image a.collection-thumbnail-anchor .icon-collections-thumbnail {
  position: relative;
  height: 100%;
  width: 100%;
  font-size: 100px
}

.paper-view-layout .resources-cointainer .collection-box-container .resource-box .resource-box-additional-info {
  display: none;
  visibility: hidden;
}

.paper-view-layout .resources-cointainer .collection-box-container .resource-box .resource-box-additional-info .number-space {
  font-size: 16px;
  font-style: italic;
}

.paper-view-layout .resources-cointainer.horizontal .collection-box-container .resource-box .resource-box-additional-info {
  display: inherit;
  visibility: inherit;
  width: 60px;
  right: 165px;
}

.paper-view-layout .resources-cointainer.horizontal .collection-box-container .resource-box .resource-box-info {
  width: 165px;
}

.paper-view-layout .resources-cointainer.horizontal .collection-box-container .resource-box-info ul li {
  width: 33%;
}

.paper-view-layout .resources-cointainer.horizontal .collection-box-container .resource-box .resource-box-title span.counter {
  display: none;
  visibility: hidden;
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container.collection-box-container .resource-box .resource-box-title a {

}

.paper-view-layout .resources-cointainer .resource-box-container.collection-box-container .resource-box .resource-box-title .icon {
  float: left;
  width: 45px;
  font-size: 45px;
  padding: 0;
}

.paper-view-layout .resources-cointainer .resource-box-container.collection-box-container .resource-box .resource-box-title .resource-count {
  float: right;
  max-width: 20%;
  min-width: 10%;
}

.paper-view-layout .resources-cointainer .resource-box-container.collection-box-container .resource-box .resource-box-title .title {
  vertical-align: middle;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.link-disabled {
  cursor: default;
  pointer-events: none;
}

.resource-box .resource-box-image a.product-thumbnail-anchor .icon-product-thumbnail {
  position: relative;
  height: 100%;
  width: 100%;
  font-size: 100px;
}

.resource-box-container.resource-box-type-product.is-archived {
  opacity: .4;
}

.modal-grant-access .resources-cointainer {
  padding-bottom: 0;
}

.modal-grant-access .date-time-picker .date-picker-label {
  height: auto;
  margin-bottom: 0;
}

.modal-grant-access .date-time-picker .picker-label {
  margin-bottom: 5px;
}

/*list view*/

.product input[type="checkbox"]:before {
  content: "";
  display: block;
  border: 0;
  width: 20px;
  height: 20px;
  background: #fff url('../../../../../themes/basic/images/icon_unchecked.png') no-repeat;
}

.product input[type="checkbox"]:checked:before {
  background: url('../../../../../themes/basic/images/icon_checked.png') no-repeat;
}

.product .did-list-grid {
  display: table;
  table-layout: auto;
  width: 100%;
}

.product .did-tool-header {
  border: none !important;
  width: 121px;
  text-align: left;
  vertical-align: bottom;
  padding: 4px 26px 4px 13px;
  position: relative;
}

.product .did-title-header p {
  text-align: left;
  vertical-align: bottom;
  padding: 4px -1px 4px 13px;
  position: relative;

}

.did-tool-box {
  display: inline-block;
}

.did-tool-box i.sort-top, .did-tool-box i.sort-bottom, .did-title-box i.sort-bottom, .did-title-box i.sort-top {
  font-size: 14px;
  line-height: 0;
  width: 14px;
  display: inline-block;
  height: 14px;
  position: absolute;
  right: 10px;
  top: 14px;
  cursor: pointer;
}

.did-tool-box i.sort-bottom, .did-title-box i.sort-bottom {
  top: 26px;
}

.did-tool-box.did-tool-text {
  margin: 6px;
}

.did-tool-box.did-tool-text button.did-picture-button {
  background: rgb(242, 242, 242);
  border: 1px solid rgb(205, 205, 205);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.did-tool-box.did-tool-text button.did-picture-button i {
  display: none;
}

.product .did-tool-header p, .product .did-title-header p {
  margin: 0 !important;
  font-weight: 400;
}

.did-tool-box:hover i.sort-bottom, .did-tool-box:hover i.sort-top {
  font-size: 14px;
  line-height: 0;
  width: 14px;
  display: inline-block;
  height: 14px;
  position: absolute;
  right: 10px;
  top: 14px;
}

.product .did-tool-box:hover i.sort-bottom {
  top: 26px;
}

.product i.active {
  font-size: 18px !important;
  width: 18px !important;
  right: 8px !important;
}

@media (min-width: 1400px) {
  .product .did-tool-header {
    width: 130px;
  }
}

@media (min-width: 1600px) {
  .product .did-tool-header {
    width: 160px;
  }
}

.add-button {
  float: right;
  margin-right: 15px;
}

.loading:before {
  width: 97% !important;
  top: -7px;
}

.hideInput {
  opacity: 0;
  width: 2px;
  height: 2px;
  float: right;
}

.btn-group-padding-top {
  padding-top: 15px;
}

.my-products-loading {
  background: #FFF url('../../../../../images/preloader.gif') no-repeat center 20px;
  position: relative;
  min-height: 50px;
}

#myProductsListHeader .active {
  font-size: 18px !important;
  width: 18px !important;
  right: 8px !important;
}

#myProductsListHeader .did-title-box, #myProductsListHeader .did-tool-box {
  border: none;
  height: 50px;
}

.my-products .width-70 {
  width: 70%;
}

.my-products .width-15 {
  width: 15%;
}

.my-products .height-60 {
  line-height: 60px;
}

.tile-list-item-checkbox-margin {
  margin: 0 6px 0 0 !important;
}

.notification-bell {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 20px;
}

.notification-bell-icon {
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.notification-bell-icon.inactive {
  cursor: default;
  opacity: 0.8;
}

.notification-bell-icon > .badge {
  display: inline-block;
  min-width: 10px;
  position: absolute;
  right: 8px;
  top: 6px;
  padding: 4px 7px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  background-color: #ff3500;
  border-radius: 10px;
}

.notification-bell-icon.inactive > .badge {
  opacity: 0;
}

.notification-bell-icon:before {
  font-family: "iconvault";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
  content: '\e8b6';
  font-size: 48px;
  position: absolute;
  top: 6px;
  left: 5px;
}

.notification-image.icon-school-removed:after {
  content: '';
  width: 63px;
  height: 60px;
  border: 9px solid white;
  position: absolute;
  border-radius: 50%;
  background: transparent;
  margin-left: -13px;
  top: 0;
}

.icon-task-shared:before {
  font-family: "iconvault";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
  content: '\e846';
  font-size: 57px;
  position: absolute;
  left: -10px;
  top: calc(50% - 30px);
}

.icon-students-removed:before {
  font-family: "iconvault";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
  content: '\e8c9';
  font-size: 57px;
  position: absolute;
  left: -10px;
  top: calc(50% - 30px);

}

.icon-collection-shared:before {
  font-family: "iconvault";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
  content: '\e815';
  font-size: 57px;
  position: absolute;
  left: -10px;
  top: calc(50% - 30px);
}

.icon-collection-shared:after {
  font-family: "iconvault";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
  content: '\e84e';
  font-size: 13px;
  position: absolute;
  color: green;
  border-radius: 50%;
  background: white;
  left: 20px;
  top: 50%;
}

.icon-school-removed:before {
  font-family: "iconvault";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
  content: '\e870';
  font-size: 57px;
  position: absolute;
  left: -10px;
  top: calc(50% - 30px);

}

.notification .icon-check-outline, .notification .icon-close-outline {
  font-size: 30px;
  vertical-align: middle;
  cursor: pointer;
}

.notification-popup-container {
  position: absolute;
  right: -15px;
  top: 62px;
  width: 440px;
}

.notification-popup {
  position: relative;
  z-index: 11;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  box-shadow: 2px 4px 7px rgba(0, 0, 0, .35);
}

.notification-popup-header {
  height: 37px;
  line-height: 30px;
  padding-left: 2px;
  padding-right: 2px;
  font-size: 13px;
  color: #00AAC8;
  border-bottom: 2px solid #b1b1b1;
}

.notification-popup-header > span {
  font-weight: 300;
  cursor: pointer;
}

.notification-popup-header > span:hover {
  opacity: 0.8;
}

.notification-popup-body {
  height: 300px;
  padding: 5px 5px 5px 0;
  overflow-y: scroll;
  font-size: 13px;
}

.notification-popup .notification:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: calc(100% - 18px);
  left: 0;
  border-bottom: 1px solid #00AAC8;
}

.notification-popup ::-webkit-scrollbar {
  width: 6px; /* for vertical scrollbars */
  height: 6px; /* for horizontal scrollbars */
}

.notification-popup ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}

.notification-popup ::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.1);
}

.notification-popup-footer {
  height: 34px;
  line-height: 30px;
  padding-top: 3px;
  margin-top: 5px;
  font-size: 13px;
  color: #888;
  border-top: 2px solid #b1b1b1;
  text-align: center;
}

.notification-popup-footer > span {
  font-weight: 500;
  cursor: pointer;
}

.notification-popup-footer > span:hover {
  opacity: 0.8;
}

/* Animations */

.notification-popup-box.ng-hide-remove {
  transition: all 0.2s ease-out;
  opacity: 0;
}

.notification-popup-box.ng-hide-add {
  transition: all 0.1s linear;
  opacity: 1;
}

.notification-popup-box.ng-hide-remove.ng-hide-remove-active {
  opacity: 1;
}

.notification-popup-box.ng-hide-add.ng-hide-add-active {
  opacity: 0;
}


.notification-view .settings-checkbox {
  width: 90px;
  padding-left: 14px;
}

.notification-view .notification-padding-1 * {
  padding: 1px !important;
}

.notification-view .settings-checkbox-top-bar {
  width: 90px;
  padding-left: 14px;
}

.notification-view .settings-checkbox-type {
  padding-left: 0 !important;
}

.notification-view tbody > tr > td {
  vertical-align: middle;
}

.settings-checkbox {
  width: 90px;
  padding-left: 14px;
}

.settings-checkbox.disabled input[type="checkbox"].ios8-switch + label:before {
  background: #d9d9d9;
}

.settings-checkbox-top-bar {
  width: 90px;
  padding-left: 14px;
}

.settings-checkbox-type {
  padding-left: 0 !important;
}

.notification-topbar {
  /* ancestor element (header#top) has very high css specifity (because of using id)
     cannot override it using classes
  */
  margin: 0 10px 0 0 !important;
}

.notification-topbar > .dropdown {
  cursor: default;
}

.notification {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: auto;
  min-height: 60px;
}

.notification-image {
  width: 60px;
  min-height: 60px;
  height: auto;
}

.notification-body {
  width: 100%;
  height: 100%;
  padding: 6px;
  font-size: 13px;
}

.notification-content {
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -o-transition: all .1s ease;
  transition: all .1s ease;
  cursor: pointer;
}

.notification-content:hover {
  opacity: 0.8;
}

.notification-decision {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}

.notification-status {
  align-self: stretch;
  width: 20px;
  border-bottom: 1px solid white;
}

.notification-status:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 18px;
  right: 0;
  border-bottom: 1px solid white;
}

.notification-question {
  padding-right: 5px;
}

.notification-actions {
  display: flex;
}

.notification-action {
  -webkit-transition: all .15s ease;
  -moz-transition: all .15s ease;
  -o-transition: all .15s ease;
  transition: all .15s ease;
  margin: 0 4px;
  width: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 28px;
}

.notification-action:hover {
  font-size: 32px;
  opacity: 0.8;
}

.notification-status {
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear;
}

.notification-status.read {
  background: #f3f3f3;
}

.notification-status.read:after {
  content: '';
  display: block;
  position: absolute;
  right: 6px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: #5f5f5f;
  border-radius: 50%;
}

.notification-status.unread {
  background: #daeffd;
}

.notification-status.unread:hover {
  cursor: pointer;
  opacity: 0.8;
}

.notification-status.unread:after {
  content: '';
  display: block;
  position: absolute;
  right: 6px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: #00aac8;
  border-radius: 50%;
}

.didactus-page-header .notification {
  color: #5f5f5f;
}

/* Animations */

/*
  We're using CSS transitions for when
  the enter and move events are triggered
  for the element that has the .notification-list-item
  class
*/
.notification-list-item.ng-enter, .notification-list-item.ng-move {
  transition: all 0.35s linear;
  opacity: 0;
}

/*
 The ng-enter-active and ng-move-active
 are where the transition destination properties
 are set so that the animation knows what to
 animate.
*/
.notification-list-item.ng-enter.ng-enter-active,
.notification-list-item.ng-move.ng-move-active {
  opacity: 1;
}

.notification-view .notification {
  border-bottom: 1px solid #ccc;
}

.notification-view .notification-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notification-view .notification-content {
  max-width: 60%;
}

.notification-view .notification-decision {
  max-width: 40%;
  padding-right: 30px;
}

.notification-view .notification-question {
  padding-right: 30px;
}

.notification-view .notification-action {
  margin: 0 6px;
}

.notification-view .notification-list {
  padding-bottom: 30px;
}

.notification-view .notification-status {
  width: 20px;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
}

.notification-view .notification-filter {
  text-align: right;
  line-height: 45px;
  color: #00AAC8;
  border-bottom: 1px solid #ccc;
}

.notification-view .notification-filter > span {
  padding-left: 15px;
  font-weight: 500;
  cursor: pointer;
}

.notification-view .notification-filter > span:hover {
  opacity: 0.8;
}

/*report-compare-with-select-d*/
.report-form-section select {
  width: 200px;
}

.select-pseudo, .select-button-pseudo, .input-pseudo {
  border-color: #dcdcdc !important;
}

.report-to-form {
  display: inline-block;
  width: 29%;
  margin-right: 2%;
  position: relative;
  margin-bottom: 15px;
}

.report-to-form label {
  min-width: 100%;
}

.self_clear:after {
  content: "";
  clear: both;
  display: table;
}

.report-menu {
  position: absolute;
  background: white;
}

.report-form-section-first {
  margin: 3% 0 15px !important;
}

.report-form-section .report-menu li {
  padding: 0 3%;
  list-style: none;
  font-size: 16px;
}

.report-form-section .report-menu li button {
  padding-left: 23px;
  text-align: left;
  width: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #5f5f5f;
  display: inline-block;
  text-decoration: none;
}

.report-to-form .select-button-pseudo {
  border-radius: 0;
  color: #5F5F5F !important;
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none !important;
  position: relative;
}

.button-label-cut {
  display: inline-block;
  width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.5px 0 -5.5px 0;
}

.report-to-form button.select-button-pseudo:active, .report-to-form button.select-button-pseudo:focus, .report-to-form select-button-pseudo:hover, .report-to-form input:focus, .report-to-form input:active, .report-to-form input:visited .report-to-form input:hover {
  box-shadow: none !important;
  text-decoration: none !important;
}

.report-to-form ul {
  z-index: 1010;
  padding: 0;
  width: 103%;
  left: -3%;
  border: 1px #DCDCDC solid !important;
  margin-top: 6px;
}

.report-to-form ol {
  overflow: auto;
  overflow-x: hidden;
  max-height: 175px;
}

.report-to-form ol {
  padding: 0;
}

button .pseudoicon-arrow:before {
  position: absolute;
  top: 12px;
  right: 9px;
  width: 15px;
  display: inline-block;
  font-family: 'iconvault';
  font-style: normal;
  font-weight: 100;
  font-size: 14px;
  line-height: 1;
  float: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: url('../../../../../images/down_arrow.svg');
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

button:disabled .pseudoicon-arrow:before {
  content: url('');
}

.paper-view-layout .report-to-form > button:disabled {
  opacity: 0.7;
  background-color: #f0f0f0;
}

.report-to-form .cross-rotate:before {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.report-to-form .clear-input {
  position: absolute;
  top: 30px;
  right: 20px;
  display: inline-block;
  width: 15px;
  height: 15px;
  cursor: pointer;
  content: url('../../../../../images/cross.svg');

}

.report-to-form .input-pseudo {
  padding: 5px 36px;
  margin: 20px 0 15px;
  width: 100%;
  border-radius: 0;
  text-align: left;
  border: 1px #5F5F5F solid;
  /*    color: #5F5F5F;*/
  display: block;
  background: rgba(255, 255, 255, 0.5) url('../../../../../images/search.svg') no-repeat scroll 6px 6px / 22px;
}

.report-to-form hr {
  margin-top: 22px;
  margin-bottom: 10px;
  border: 0;
  border-top: 1px solid #5F5F5F !important;
}

::-webkit-scrollbar {
  width: 11px; /* for vertical scrollbars */
  height: 11px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.1);
}

/*report-type-select-d*/
.select-pseudo select {
  background: transparent !important;
  width: 100%;
  position: absolute;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.select-pseudo {
  width: 29%;
  height: 34px;
  background: white;
  border: 1px solid #ccc;
  position: relative;
}

.select-pseudo:active:before {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/*.select-pseudo:hover{
   border: 1px solid #5F5F5F;
}*/

.raport-clear-all {
  cursor: pointer;
  color: #CC0000;
  float: right;
  font-weight: 400;
  margin-bottom: 10px;
  margin-right: 10px;
}

.select-pseudo:before {
  position: relative;
  top: 11px;
  right: 10px;
  width: 15px;
  display: inline-block;
  font-family: 'iconvault';
  font-style: normal;
  font-weight: 100;
  font-size: 14px;
  line-height: 1;
  float: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: url('');
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  content: url('../../../../../images/down_arrow.svg');
}

.cross-rotate:before {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.task-date .task-schedule {
  display: inline-block;
  margin-bottom: 2%;
  width: 100%;
}

.task-date .date-time-picker .date-picker-label {
  height: 0;
  margin-bottom: 0;
}

.task-date .select-pseudo {
  width: 100%;
}

.task-date .task-schedule .date, .task-date .task-schedule .data-type-style {
  display: inline-block;
  width: 29%;
  margin-right: 2%;
  float: left;
}

.task-date .date-time-picker .date-picker {
  width: 100%;
  padding-right: 0;
}

.task-date .date-time-picker .date-picker input, .task-date .date-time-picker .time-picker input {
  height: 34px;
  border-radius: 0;
  border-right: 0;
}

.task-date .date-time-picker .date-picker button, .task-date .date-time-picker .time-picker button {
  height: 34px;
  border-radius: 0;
}

.task-date .date-time-picker .picker-label {
  margin-bottom: 8px;
}

/*.task-date .task-schedule .date {
    float: none;
}*/

.reports-style {
  padding: 4% 2%;
}

.reports-style .task-overview {
  margin-left: 8px !important;
  margin-right: 8px !important;
  padding: 0 !important;
}

.reports-style .task-overview button {
  float: right;
}

.report-date {
  margin-top: 2%;
}

.reports-style .form-group.report-form-section {
  margin-top: 2%;
}

.font-size-21 {
  font-size: 21px;
  font-weight: 400;
  margin-bottom: 16px;
}

.font-size-18 {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 3%;
}

.resource-list-header{
  margin-bottom: 15px;
}

.resource-list-header .header-label{
  float: left;
  margin-left: 8px;
}

.resource-list-header .header-big{
  margin-top: 8px;
}

.resource-list-header .tool-box-button{
  margin-top: -8px;
  float: right;
  margin-right: 5px;
}

.resource-list-header .layout-button-container{
  float: right;
  margin-right: 10px;
}

.resource-list-header .layout-button-container .did-picture-button{
  float: right;
}

.task-overview .resource-list-header .layout-button-container .did-picture-button{
  color: #5f5f5f;
}

.license-details .resource-list-header .layout-button-container .did-picture-button{
  color: #00aac8;
}

input[type=checkbox]:before {
  content: "";
  display: block;
  border: 0;
  width: 20px;
  height: 20px;
  background: #fff url('../../../../../themes/basic-hc/images/icon_unchecked.png') no-repeat;
  background: #fff url('../../../../../themes/basic/images/icon_unchecked.png') no-repeat;
}

input[type=checkbox]:checked:before {
  background: url('../../../../../themes/basic-hc/images/icon_checked.png') no-repeat;
  background: url('../../../../../themes/basic/images/icon_checked.png') no-repeat;
}

.medium-row {
  padding-top: 5px;
  margin-right: 0;
}

.info-tab {
  margin-top: 5px;
  margin-bottom: 5px;
  left: 0;
}

.resource-item-icon {
  font-size: 100px;
}

.resource-item-icon:before {
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 1;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.resourceLightboxMenu a:hover,
.resourceLightboxMenu a:focus,
.resourceLightboxMenu button:hover,
.resourceLightboxMenu button:focus {
  text-decoration: none;
}

.modal-dialog .modal-content .resourceLightboxPageSwitcher {
  width: auto;
  margin-right: 120px !important;
  text-align: center;
  vertical-align: middle;
  line-height: 2.5em;
  white-space: nowrap;
}

.resourceLightboxPageSwitcher a, .resourceLightboxPageSwitcher button {
  text-decoration: none;
  font-size: 28px;
  display: block;
  margin: -5px 0 0 0;
  padding: 0;
  z-index: 101;
  cursor: pointer;
  vertical-align: middle;
}

.modal-dialog .modal-content .resourceLightboxPageSwitcher a:hover,
.modal-dialog .modal-content .resourceLightboxPageSwitcher a:focus,
.modal-dialog .modal-content .resourceLightboxPageSwitcher button:hover,
.modal-dialog .modal-content .resourceLightboxPageSwitcher button:focus {
  text-decoration: none;
}

.modal-dialog .modal-content .resourceLightboxPageSwitcher a:first-child,
.modal-dialog .modal-content .resourceLightboxPageSwitcher button:first-child {
  display: inline-block;
}

.modal-dialog .modal-content .resourceLightboxPageSwitcher a:last-child,
.modal-dialog .modal-content .resourceLightboxPageSwitcher button:last-child {
  display: inline-block;
}

@media ( max-width: 600px) {
  .modal-dialog .modal-content .resourceLightboxPageSwitcher {
    width: 120px;
    right: 50px
  }

  .modal-dialog .modal-content .resourceLightboxPageSwitcher a,
  .modal-dialog .modal-content .resourceLightboxPageSwitcher button {
    font-size: 16px
  }

  .modal-dialog .modal-content .resourceLightboxPageSwitcher #pagesCounter {
    width: 80px;
    font-size: 16px
  }

  .system-modal-title .resourceLightboxTitle {
    width: 50%
  }
}

.modal-dialog .modal-content .resourceLightboxPageSwitcher .switcherDisabled {
  cursor: default
}

.modal-dialog .modal-content .resourceLightboxPageSwitcher #pagesCounter {
  text-align: center;
  font-size: 28px;
  z-index: 100
}

/*Full Screen*/

.modal-fullscreen {

}

.modal-fullscreen .modal-content {

  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.modal-backdrop.modal-backdrop-fullscreen.in {
  opacity: .97;
  filter: alpha(opacity=97);
}

/* .modal-fullscreen size: we use Bootstrap media query breakpoints */

.modal-fullscreen .modal-dialog {
  margin: 0;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

.modal-fullscreen .modal-body {
  /*margin-bottom: -69px;*/
  /*padding-bottom: 69px;*/
  /*overflow-y: scroll;*/
  display: inline-block;
}

.modal-fullscreen .modal-footer {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  z-index: 99999;
  background: #5E5E5E;
}

/*@media (min-width: 768px) {*/
/*.modal-fullscreen .modal-dialog {*/
/*width: 750px;*/
/*}*/
/*}*/
/*@media (min-width: 992px) {*/
/*.modal-fullscreen .modal-dialog {*/
/*width: 992px;*/
/*}*/
/*}*/
/*@media (min-width: 1200px) {*/
/*.modal-fullscreen .modal-dialog {*/
/*width: 1170px;*/
/*}*/
/*}*/


.resource-player-document a {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  text-align: center;
}

.resource-item-icon, resource-player-document .resource-item-icon {
  font-size: 200px;
}

@media ( max-height: 460px) {
  .resource-item-icon {
    font-size: 100px;
  }
}

@media ( max-height: 270px) {
  .resource-item-icon {
    font-size: 50px;
  }

  .resource-item-link {
    font-size: 16px;
  }
}

.resource-item-link,
.resource-player-document .resource-item-link {
  font-size: 20px;
}

#player-modal-dialog {
  margin-bottom: 0;
}

/*
  Resources Popup
*/

.resources-popup-only section#header,
.resources-popup-only nav#burger,
.resources-popup-only #homepage-footer {
  display: none;
}

.resources-popup-only .resources-overview {
  padding: 0 0 74px 0;
}

.resources-popup-only .did-tree-container {
  margin-left: 0;
  padding-top: 0;
  height: calc(100% - 155px);
}

.resources-popup-only #resources-screen {
  padding-top: 0;
}

.resources-popup-only #resourcesSite,
.resources-popup-only .resource-details {
  margin-top: 73px;
  margin-left: 14px;
}

.resources-popup-only .column-left {
  top: 78px;
  margin-left: 14px;
  width: 310px;
}

@media (min-width: 300px) {
  .resources-popup-only .column-right {
    padding: 5px 16px 0 243px;
  }
}

@media (min-width: 992px) {
  .resources-popup-only .column-right {
    padding: 5px 16px 0 313px;
  }
}

.resources-popup-only .resources-add-custom .panel-top {
  position: fixed;
  display: block;
  width: 100%;
  background: rgb(95, 95, 95);
  line-height: 72px;
  height: 72px;
  z-index: 1030;
}

.resources-popup-only .resources-add-custom .panel-top span {
  display: inline-block;
  color: #fff;
  padding-left: 15px;
}

.resources-popup-only .resources-add-custom .panel-top .picture-button {
  font-size: 50px;
  color: #fff;
  margin-top: 8px;
}

.resources-popup-only .resources-add-custom .panel-top .resourceLightboxMenu {
  position: absolute;
  top: 0;
}

.resources-popup-only .resources-add-custom .panel-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  background: rgb(95, 95, 95);
  z-index: 999;
  line-height: 72px;
  height: 72px;
  text-align: right;
  padding-right: 15px;
}

.resources-popup-only .resources-add-custom.span-length {
  color: #fff;
  padding-right: 10px;
}

.resources-popup-only .no-actions .resources-add-custom .wrapper {
  display: none;
}

.resources-popup-only .did-tool-box.custom-box {
  position: relative;
  height: 68px;
  border-top: 0 !important;
}

.resources-popup-only .did-tool-box.custom-box span {
  position: absolute;
  left: 0;
  top: 13px;
  z-index: 999;
}

.resources-popup-only .select-to-task-wrapper {
  width: auto;
  text-align: right;
  padding: 0 10px;
}

.resources-popup-only .select-to-product-wrapper {
  width: 137px;
  text-align: left;

}

.resources-popup-only .select-to-task-btn {
  background-color: #5F5F5F;
}

.resources-popup-only .select-to-task-ok-icon,
.resources-popup-only .select-to-task-ok-icon:hover {
  width: auto !important;
  line-height: 20px !important;
}

.resource-player-document .player-nav-buttons {
  background: none;
  border: none;
  position: absolute;
  top: 50%;
  font-size: 40px;
}

.resource-player-document .player-nav-buttons.left {
  left: 20px;
}

.resource-player-document .player-nav-buttons.right {
  right: 20px;
}

.resource-player-document .player-container {
  text-align: center;
}

.resource-player-document .player-insider {
  display: inline-block;
}

/* Fix for problems with embedded player on Firefox (DIDWEB-2237, DIDWEB-2496)
   Transform property for ".modal.fade .modal-dialog" and/or ".modal.in .modal-dialog"
   (Bootstrap classes) are problematic for <embed> elements on Firefox
*/
#player-modal-dialog {
  -moz-transform: none !important;
}

#player-modal-window {
  position: fixed;
}



.resource-preview {
  width: 100%;
  height: 100%;
  position: relative;
}

.resource-watermark-container {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #4FC4AC;
  opacity: 0.8;
  top: 0;
  left: 0;
  text-shadow: 1px 1px 3px black;
  z-index: 1;
}

.resource-preview-player {
  padding-top: 70px;
  width: 100%;
  height: 100%;
}

.resource-preview-player resource-player-library,
.resource-preview-player resource-player-other {
  position: relative;
}

.resource-watermark-text {
  width: 60%;
  height: auto;
  margin: 0 auto;
  text-align: center;
  margin-top: 100px;
  color: #ffffff;
  font-size: 26px;
  max-height: 500px;
  overflow-y: auto;
}

#toggle-filter input[type=radio] {
  display: none;
  position: static;
  margin-left: 0px;
}

#toggle-filter label:before {
  content: "";
  display: inline-block;

  width: 16px;
  height: 16px;

  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #ffffff;
  border: #00aac8 solid 2px;
}

#toggle-filter .radio label:before {
  border-radius: 8px;
}

#toggle-filter input[type=radio]:checked + label:before {
  content: "\2022";
  color: #00aac8;
  font-size: 30px;
  text-align: center;
  line-height: 13px;
}



.share-to-others .border-right {
  border-right-color: #dcdcdc;
}

.share-to-others .nav-tabs .active:after {
  box-shadow: 0 7px 0 #dcdcdc;
}

.paper-view-layout .resources-cointainer.horizontal .student-box-container .resource-box .resource-box-info {
  width: 110px;
}

.resources-cointainer.horizontal .student-box-container .resource-box-info ul li {
  width: 50%;
}

.paper-view-layout .resources-cointainer.horizontal .student-box-container .resource-box .resource-box-info.buttons-box-1 {
  width: 55px;
}

.resources-cointainer.horizontal .student-box-container .resource-box-info.buttons-box-1 ul li {
  width: 100%;
}

.paper-view-layout .resources-cointainer.horizontal .student-box-container.resource-box-container .resource-box .resource-box-title a,
.paper-view-layout .resources-cointainer.horizontal .student-box-container.resource-box-container .resource-box .resource-box-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-students-modal .resources-cointainer.horizontal .student-box-container .resource-box .resource-box-info {
  width: 55px;
}

.resource-box-container.student-box-container .resource-box-title a,
.resource-box-container.student-box-container .resource-box-title span {
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resources-cointainer.horizontal .resource-box .student-box-info {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 100px;
}
.resource-box-container.student-box-container .resource-item-icon {
  text-decoration: none;
}

.resource-box-container.student-box-container .resource-item-icon:hover:before {
  color: inherit;
}

.resource-box-container.student-box-container .resource-box-image a {
  text-decoration: none;
}

.add-students-modal .did-tool-box i {
  font-size: 24px;
}

.nav-tabs .active,
.nav-pills .active {
  font-weight: bold;
}

.share-to-others .nav-tabs li {
  margin-right: 20px;
}

.share-to-others .did-title {
  max-width: 250px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.share-to-others {
  width: 660px;
}

.share-to-others .nav-tabs {
  border-bottom: none;
}

.share-to-others .nav-tabs .active:after {
  content: "\a0";
  display: block;
  line-height: 3px;
}

.share-to-others .tab-pane-selected {
  margin: 20px 0;
}

.share-to-others .tab-pane .pane-title {
  width: 70%;
}

.share-to-others .tab-pane-selected .pane-title {
  width: 90%;
}

.share-to-others .did-scrollable.left-menu-popup, .did-scrollable.right-menu-popup {
  height: 260px;
}

.share-to-others .did-scrollable.left-menu-popup {
  padding-left: 0;
}

.share-to-others .modal-dialog .modal-content .modal-body span {
  padding: auto;
}

.share-to-others .modal-body {
  padding-bottom: 0;
}

.share-to-others .did-scrollable {
  overflow: hidden;
  overflow-y: auto;
  height: 230px;
}

.share-to-others .modal-footer {
  border: none;
  width: 100%;
  display: inline-block;
}

.share-to-others .did-tool-box {
  border-left: none !important;
  padding-right: 10px;
  padding-left: 10px;
}

.share-to-others .padding-select {
  padding: 10px 0;
}

.share-to-others .padding-select > span {
  text-align: right;
}

.share-to-others .people-list-checkbox {
  padding: 0 12px;
}

.share-to-others .nav-stacked .all-teacher {
  padding: 4px 0;
}

.share-to-others .border-right {
  border-right-style: solid;
  border-right-width: 1px;
}

.nav li, .nav li label {
  cursor: pointer;
}

:host .icon-arrow-down {
  float: right;
  font-size: 14px;
}

:host .icon-arrow-right {
  float: right;
  margin-top: 2px;
  font-size: 14px;
}

.did-picture-arrow-middle .icon-arrow-down,
.did-picture-arrow-middle .icon-arrow-right {
  float: none;
}

.share-to-others .did-tool-box button {
  width: 22px;
}

.share-to-others button.btn.btn-link.did-checkbox.people-list-checkbox {
  content: "";
  display: block;
  border: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  text-decoration: none;
  background: url(../../../../../themes/basic/images/icon_unchecked.png) no-repeat #fff;
}

.share-to-others button.btn.btn-link.did-checkbox.people-list-checkbox.checked {
  background: url(../../../../../themes/basic/images/icon_checked.png) no-repeat;
}

.share-to-others .nav-stacked > li + li {
  margin-left: 0;
}

.share-to-others .main-filter-group {
  margin-top: 4px;
  margin-left: 0;
}

.share-to-others .filter-group {
  margin-bottom: 12px;
  overflow: hidden;
}

.share-to-others .filter-subgroup {
  clear: both;
  font-size: 14px;
}

.share-to-others .filter-subgroup li {
  margin-top: 4px;
}

.share-to-others .filter-group .filter-group-name {
  display: block;
  float: left;
  width: 90%;
  font-style: normal;
}

.share-to-others .filter-group .filter-group-arrow-container {
  display: block;
  float: left;
}

.navigation-panel-container {
  height: 100%;
}

.did-nav-panel {
  display: block;
  height: 100%;
}

* + html .did-nav-panel #burger {
  margin-top: 0;
}

.did-nav-panel #burger {
  margin-top: 0;
}

#burger button {
  display: block;
  width: 100%;
  height: 65px;
  overflow: hidden;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  padding: 5px 0 0 0
}

#burger button i {
  display: block;
  width: 100%;
  height: 45px;
  font-size: 40px;
  line-height: 45px;
  vertical-align: bottom;
  overflow: hidden
}

.did-tree-container {
  top: 0;
  display: block;
  margin-left: 76px;
  padding-top: 76px;
  position: absolute;
  overflow-x: hidden;
  width: 305px;
  height: 100%;
}

.homepage-height-full .did-tree-container {
  padding-top: 0;
}

.did-tree-container.no-burger {
  margin-left: 0;
}

@media ( max-width: 992px) {
  .did-tree-container {
    width: 235px;
  }
}

.flat-list.ng-hide {
  margin-top: -100%
}

.flat-list.ng-show {
  /*margin-left: 100%*/
}

#nav-slides {
  /*width: 900px;*/
  height: auto;
  overflow: hidden;
  /*margin-left: -300px*/
}

#nav-slides > div {
  width: 300px;
  height: auto;
  min-height: 50px;
  float: left
}

#did-nav-content {
  position: relative;
  overflow: hidden;
  height: 100%;
  max-width: 100%;
  direction: ltr;
}

#did-nav-content {
  width: auto;
  height: 100%;
}

.nav-list ul li.empty-collections {
  background-color: transparent !important;
}

.nav-list ul li.empty-collections span {
  display: block;
  padding: 16px 32px 16px 16px;
  text-decoration: none;
  text-align: center;
}

.nav-list .student-task a {
  font-size: 15px;
  padding: 10px 12px 10px 12px;
}

.nav-list .student-task .student-task-title {
  text-overflow: ellipsis;
  overflow: hidden;
}

.student-result-title {
  display: block;
  text-decoration: none;
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-list .student-task .student-task-subject {
  font-size: 14px;
}

.nav-list .student-task .student-task-duedate {
  position: absolute;
  right: 0;
  margin: 0 12px 0 12px;
  font-style: italic;
  font-size: 14px;
}

.nav-list .title * {
  font-weight: 300;
}

.nav-list .title *:not(a) {

}

.nav-list.report-tree {
  padding-top: 32px;
}

/*CustomScrollbar styles*/
.mCSB_inside > .mCSB_container {
  margin-right: 0;
  overflow: hidden;
}

.mCSB_scrollTools {
  opacity: .5;
  right: -6px
}

.collections-teacher-show-all {
  font-size: 14px !important;
}

.collections-teacher-show-all .icon-arrow-right {
  font-size: 12px;
}


.awklt536 header.table .section-header-summary {
  text-align: right !important;
  width: 100% !important;
  padding-right: 20px !important;
}

@media (max-width: 992px) {

  .awklt536 header.table .section-header {
    position: relative !important;
  }

  .awklt536 header.table .section-header-title {
    width: 100% !important;
    position: absolute !important;
    left: 80px !important;
    top: 0;
    margin-left: 0;
    margin-top: 0;
    padding: 0;
  }

  .awklt536 header.table .section-header-title dl {
    width: 400px;
  }

  .awklt536 header.table .section-header-summary {
    padding-right: 0 !important;
  }

  .awklt536 .result .paper-view-layout.type-a .section-header-summary i, .awklt536 .result .paper-view-layout.type-a .section-header-summary svg {
    margin-left: 0;
  }
}

.row.did-row-offset-left {
  margin-left: 15px;
}

.form-horizontal.did-label-left label {
  text-align: left;
}

.did-col-fixed-150 {
  position: relative;
  min-height: 1px;
  padding-left: 8px;
  padding-right: 8px;
  float: left;
}

.did-col-fixed-150 {
  width: 150px;
}

.form-control.did-file-upload-name-control[disabled],
.form-control.did-file-upload-name-control[readonly] {
  cursor: default;
}

.list-inline > li:first-child {
  padding-left: 0
}

.caret.reverse-caret {
  content: "";
  border-top: 0;
  border-bottom: 4px solid;
}

.collapsed .caret.reverse-caret {
  content: "";
  border-bottom: 0;
  border-top: 4px solid;
}

.did-btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 300;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1.42857143;
  border-radius: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* didactus styles for overriding content media queries */
/* Portrait */
@media screen and (orientation: portrait) {
  .qp-player {
    background: inherit;
    height: 100%;
    position: static;
    width: 100%;
    z-index: auto;
  }

  .qp-player-body {
    width: 100%;
    min-height: auto;
  }

  .qp-assessment-view {
    display: block;
    width: 1024px;
  }
}

/* Landscape */
.player-orientation-portrait {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999;
}

.player-orientation-portrait .qp-player-body {
  width: 100%;
  min-height: 748px;
}

.player-orientation-portrait .qp-assessment-view {
  display: none;
}

/* overrides for did-list styles */
.awklt536 .did-title-box-md .did-title,
.awklt536 .did-title-box-md .did-subtitle {
  width: 100%;
  margin-left: -100px;
  padding-left: 100px;
}

.awklt536 .did-subtitle,
.awklt536 .did-title {
  width: 100% !important;
}

.awklt536 .did-title-box {
  width: 100%;
  padding-left: 5px;
}

.awklt536 .did-users-title .did-title-box {
  width: 85px;
}

.awklt536 .did-simple-box.type-c {
  width: 100%;
  padding-left: 5px;
}

.awklt536 .did-title-box-lg .did-title,
.awklt536 .did-title-box-lg .did-subtitle {
  width: 100%;
  margin-left: -35px;
  padding-left: 35px;
}

/* overrides for paper-view-layouts headers */

.awklt536 .paper-view-layout.type-a header .section-header .section-header-title.list-title {
  width: 100%;
  margin-left: -195px;
  padding-left: 203px;
}

.awklt536 .paper-view-layout.type-a header .section-header .section-header-title.wide {
  width: 100%;
  margin-left: -125px;
  padding-left: 133px;
}

.awklt536 .paper-view-layout.type-a header .section-header .section-header-title {
  width: 100%;
  margin-left: -495px;
  padding-left: 503px;
}

/* other overrides */

.awklt536 .paper-view-layout .resources-cointainer.horizontal .student-box-container.resource-box-container .resource-box .resource-box-title a,
.awklt536 .paper-view-layout .resources-cointainer.horizontal .student-box-container.resource-box-container .resource-box .resource-box-title span {
  width: 100%;
  margin-left: -120px;
  padding-left: 200px;
}

.awklt536 .paper-view-layout .resources-cointainer.horizontal .resource-box-container {
  width: 100%;
  margin-left: -1px;
  padding-left: 1px;
}

.awklt536 .paper-view-layout .resources-cointainer.horizontal.read-only .student-box-container.resource-box-container .resource-box .resource-box-title span {
  width: 100%;
  margin-left: -10px;
  padding-left: 90px;
}

.awklt536 .paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box.not-logged .resource-box-title a,
.awklt536 .paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box.not-logged .resource-box-title span {
  width: 100%;
  margin-left: -320px;
  padding-left: 400px;
}

.awklt536 .paper-view-layout .paper-view-tasks .title-with-label .section-header-title {
  width: 100%;
  margin-left: -260px;
  padding-left: 260px;
}

@media (max-width: 856px) {
  .awklt536 .paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-title a,
  .awklt536 .paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-title span {
    width: 100%;
    margin-left: -260px;
    padding-left: 3400px;
  }
}

@media (max-width: 756px) {
  .awklt536 .paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box.not-logged .resource-box-title a,
  .awklt536 .paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box.not-logged .resource-box-title span {
    width: 100%;
    margin-left: -160px;
    padding-left: 240px;
  }
}

.awklt536 #results-container .row:nth-of-type(1) .section-header-title {
  width: 100%;
  margin-left: -130px;
  padding-left: 130px;
}

.awklt536 #task-resources-container .row:nth-of-type(1) .section-header-title {
  width: 100%;
  margin-left: -190px;
  padding-left: 190px;
}

.awklt536 .task-overview .row .read-only.task-schedule {
  width: 100%;
  margin-left: -130px;
  padding-left: 130px;
}

/* overrides for modal item list*/

.awklt536 .list-item .title {
  width: 100%;
  margin-left: -260px;
  padding-left: 270px;
}

.date-time-picker-element {
  display: inline-flex;
}

.date-time-picker .date-picker-label {
  height: 30px;
  margin-bottom: 9px;
}

.date-time-picker .picker-label {
  margin-right: 20px;
  float: left;
  font-weight: bold;
}

.date-time-picker .picker-button {
  float: left;
  font-weight: 300;
}

.date-time-picker {
  display: inline-block;
}

.date-time-picker .date-picker {
  width: 306px;
  float: left;
  padding-right: 2px;
}

.date-time-picker .time-picker {
  float: left;
}

.date-time-picker .date-picker input, .date-time-picker .time-picker input {
  height: 38px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.date-time-picker-alert .alert.alert-warning {
  max-width: 306px;
}

.date-time-picker .date-picker button, .date-time-picker .time-picker button {
  height: 38px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.date-time-picker-element .time-picker {
  margin-top: 1px;
  margin-left: 5px;
}

.time-picker-element {
  display: inline-block;
}

.time-picker-element .hour, .time-picker-element .minute, .time-picker-element .colon, .time-picker-element .meridian {
  float: left
}

.time-picker-element .hour input, .time-picker-element .minute input, .time-picker-element .meridian button {
  margin-top: 3px;
  width: 50px;
  height: 38px;
  border-radius: 4px;
}

.time-picker-element .meridian {
  margin-top: 35px;
  margin-left: 2px;
}

.time-picker-element .colon {
  margin-top: 45px;
  margin-left: 1px;
  margin-right: 1px;
}

.time-picker-element .hour button, .time-picker-element .minute button {

}

.date-end .date-time-picker .date-picker {
  width: auto;
}

.date-start-end .date-time-picker .date-picker {
  width: auto;
}

.date-start-end {
  width: 100%
}

.date-start-end .task-schedule-alert, .task-schedule {
  display: inline-block !important;
  width: 100%;
}

.date-start-end .task-schedule .date {
  margin-right: 0 !important;
  width: 50%;
}


rzslider .rz-pointer::after {
  background: #ffffff none repeat scroll 0 0;
  border-radius: 17px;
  content: "";
  height: 19px;
  left: 1px;
  position: absolute;
  top: 1px;
  width: 18px;
}

rzslider .rz-pointer {
  background-color: lightgray;
  border-radius: 16px;
  cursor: pointer;
  height: 21px;
  top: -7px;
  width: 20px;
  z-index: 3;
}

rzslider .rz-pointer.rz-active::after {
  background-color: white;
}

rzslider .rz-bar {
  background: #00aac8 none repeat scroll 0 0;
  border-radius: 4px;
  height: 8px;
  left: 0;
  width: 100%;
  z-index: 1;
}

rzslider .rz-bubble {
  border: 1px solid lightgray;
  border-radius: 3px;
  bottom: auto;
  color: #55637d;
  cursor: default;
  padding: 1px 3px;
  top: 16px;
}

.rzslider_container {
  width: 620px;
}

/*==================Table global=====================*/
.did-table {
  display: table;
  width: calc(100% - 10px);
  margin: 5px;
  background: transparent;
  position: relative;
}

.did-table .did-table-row {
  width: 100%;
  display: table-row;
  position: relative;
  height: auto;
}

.did-table .did-table-row [class*="did-table-cell"] {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  line-height: 1.15;
  height: inherit;
  border-bottom: 1px solid;
  border-right: 1px solid;
  padding: 5px;
}

.did-table .did-table-row [class*="did-table-cell"]:last-child {
  border-right: none;
}

.did-table .did-table-row [class*="did-table-cell"].did-table-cell-centered {
  text-align: center;
}

.did-table .did-table-row .did-table-cell-1 {
  width: 100%;
}

.did-table .did-table-row .did-table-cell-2 {
  width: 50%;
}

.did-table .did-table-row .did-table-cell-3 {
  width: 33%;
}

.did-table .did-table-row .did-table-cell-3:last-child {
  width: 40%;
}

.did-table .did-table-row .did-table-cell-4 {
  width: 25%;
}

.did-table .did-table-row .did-table-cell-5 {
  width: 20%;
}

/*==================Table header=====================*/
.did-table .did-table-header {
  font-weight: 600;
  display: table-header-group;
}

.did-table .did-table-header .did-table-row:first-child {
  border-bottom-width: 2px;
}

.did-table .did-table-header .did-table-row [class*="did-table-cell"] {
  text-align: center;
  padding: 15px;
}

.did-table .did-table-header .did-table-row:hover {
  background: none;
}

.did-table .did-table-header .did-table-row:hover [class*="did-table-cell"]:hover {
  background: none;
}

/*==================Table body=====================*/
.did-table .did-table-body {
  display: table-row-group;
}

.did-table .did-table-body .did-table-row [class*="did-table-cell"] {
  padding: 10px 10px;
}

.did-table .did-table-body .did-table-row:last-child [class*="did-table-cell"] {
  border-bottom: none;
}

.modal-tutorial {
  width: 80%;
  height: 70%;
}

.modal-dialog.modal-tutorial {
  margin: 30px auto;
}

.modal-tutorial .modal-content {
  height: 100%;
}

.modal-backdrop.modal-backdrop-tutorial.in {
  opacity: 0.8;
}

.tutorial-body {
  text-align: center;
  height: 100%;
  width: 100%;
  position: relative;
}

.modal-tutorial .tutorial-body img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  width: auto;
  display: inline-block;
}

/*.tutorial-img-helper {
  padding-top: 100%;
}*/
.tutorial-img-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font: 0/0 a;
}

.tutorial-img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.tutorial-nav {
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

.tutorial-previous-tutorial {
  left: -7%;
}

.tutorial-next-tutorial {
  right: -7%;
}

.tutorial-footer {
  position: absolute;
  bottom: -75px;
  width: 100%;
  height: 60px;
}

.tutorial-page-index {
  font-size: 20px;
  text-align: center;
}

.tutorial-page-index span {
  padding: 10px;
  display: -webkit-inline-box;
}

.tutorial-do-not-show {
  text-align: right;
}

.tutorial-do-not-show a {
  padding: 10px;
}

.tutorial-nav button {
  height: 100px;
  width: 50px;
  border: none;
  font-size: 31px;
}

.tutorial-nav button,
.tutorial-nav button.btn-default[disabled],
.tutorial-nav button.btn-default:hover,
.tutorial-nav button.btn-default:active,
.tutorial-nav button.btn-default:focus {
  background: transparent;
}

.modal-open .modal.modal-tutorial-window {
  overflow-y: hidden;
}

.modal-tutorial .modal-content {
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.tutorial-nav-disabled {
  display: none;
}




.did-filters {
  padding: 20px 20px 0 20px;
}

.did-filters .filter-dropdown {
  display: inline-block;
  border: 1px solid;
  margin-right: 5px;
  margin-bottom: 12px;
}

.did-filters .filter-dropdown button {
  display: inline-block;
  padding: 12px;
  text-decoration: none;
}

.did-filters .filter-dropdown .pseudoicon:before {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\2b'
}

.did-filters .filter-dropdown .dropdown-menu {
  padding: 10px;
  margin: 10px 0 0 -1px
}

.did-filters .filter-dropdown .dropdown-menu li {
  padding: 0 0 5px 0
}

.did-filters .filter-dropdown .dropdown-menu li button {
  background-size: 20px;
  background-position: 5px 4px !important;
  padding: 3px 32px 0 32px
}

.did-filters .filter-dropdown .dropdown-menu li.filter-clear-group button {
  background: none;
  background-position: 0 0 !important;
  padding: 3px 0 0 0;
}

.did-filters .filter-dropdown .dropdown-menu .input-range {
  padding: 0
}

.did-filters .filter-dropdown .dropdown-menu .input-range li {
  padding: 6px 0 6px 0
}

.did-filters .filter-dropdown .dropdown-menu .input-range li button {
  padding: 6px 0 0 32px
}

.did-filters #filterDeposit .btn-info, .did-filters #filterDeposit .btn-primary {
  margin: 5px 10px 12px 0
}

.did-filters .dropdown.open .pseudoicon:before {
  content: '\2212'
}

.did-selected-filters {
  padding: 0 20px;
}

.did-selected-filters > div {
  display: inline-block;
  margin-top: 20px;
}

.did-selected-filters .btn {
  margin-right: 5px;
}

#filterContainer .filter-dropdown ul.dropdown-menu li button.dropdown-menu_check-button,
#filterContainer .filter-dropdown .dropdown-menu li.filter-radio-item button {
  padding-left: 23px;
  text-align: left;
  width: auto;
  padding-top: 0px;
  padding-bottom: 0px;
}

#filterContainer .filter-dropdown .dropdown-menu li.filter-radio-item button {
  padding-left: 45px;
}

.filter-btn-info-image img {
  margin-left: 5px;
}

.filter-input-single {
  margin-top: 10px;
}

.bottom-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0
}

.report-form-section .report-menu-radio li button,
#filterContainer .filter-dropdown .dropdown-menu li.filter-radio-item button {
  background: url('../../../../../images/input_radio_off.png') no-repeat center left;
}

.report-form-section .report-menu-radio li.item-checked button,
#filterContainer .filter-dropdown .dropdown-menu li.filter-radio-item.filter-checked button {
  background: url('../../../../../images/input_radio_on.png') no-repeat center left;
}

.report-form-section .report-menu-checkbox li button {
  background: url('../../../../../images/icon_unchecked.png') no-repeat center left;
}

.report-form-section .report-menu-checkbox li.item-checked button {
  background: url('../../../../../images/icon_checked.png') no-repeat center left;
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  min-height: 100%;
}

body:not(.login-page) {
  font-weight: 300;
}

html, body, #app-content, #app-content > div:first-child, #tasks-screen, #main-screen, #resources-screen, #homepage-screen {
  height: 100%;
  min-height: 100%;
}

pre {
  padding: 0;
}

input::-ms-clear {
  display: none;
}

.contact-modal-window .modal-dialog {
  width: 80%;
  max-width: 1400px;
}

#burger {
  width: 60px;
  height: 100%;
  overflow: hidden;
  display: block;
  margin-top: 76px;
  z-index: 1031
}

#burger a {
  display: block;
  width: 100%;
  height: 65px;
  overflow: hidden;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  padding: 5px 0 0 0
}

#burger a i {
  display: block;
  width: 100%;
  height: 45px;
  font-size: 40px;
  line-height: 45px;
  vertical-align: bottom;
  overflow: hidden
}

#burger.collapsed {
  height: 65px
}

.picture-button, .picture-button[disabled], fieldset[disabled] .picture-button {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  text-decoration: none;
}

.picture-button {
  cursor: pointer;
}

.picture-button, .picture-button:hover {
  border: none;
  text-decoration: none;
}

.dashboard {
  padding-top: 70px;
}

.dashboard-background {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  padding-bottom: 40px;
}

.dashboard #burger {
  display: none
}

.dashboard .navbar-toggle {
  display: none
}

.dashboard .navbar-header {
  float: left
}

.dashboard .navbar-default {
  height: 100%
}

.dashboard #dashboard-cards .dashboard-box {
  width: 100%;
  height: 290px;
  display: block;
  overflow: hidden;
  float: left;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  position: relative;
  margin: 8px 0;
  padding: 8px;
  text-shadow: 0 0 1px #000000;
  border-top: 4px solid;
}

.dashboard-box .full-list .title,
.dashboard-box .full-list .day p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 54px;
  height: 54px;
}

.dashboard-box .full-list .day p {
  font-size: 13px;
  margin-bottom: 0;
  text-align: right;
}

.dashboard #dashboard-cards .dashboard-box.marketing-tile {
  padding: 0;
}

.dashboard #dashboard-cards .dashboard-box.marketing-tile iframe {
  border: none;
  height: 100%;
  width: 100%;
}

.dashboard #dashboard-cards .dashboard-box
:nth-of-type(8) {
  border: none
}

.dashboard #dashboard-cards .dashboard-box h1, .dashboard #dashboard-cards .dashboard-box h2,
.dashboard #dashboard-cards .dashboard-box h3, .dashboard #dashboard-cards .dashboard-box h5,
.dashboard #dashboard-cards .dashboard-box h6 {
  text-align: center;
}

.dashboard #dashboard-cards .dashboard-box > h3:first-of-type a:hover,
.dashboard #dashboard-cards .dashboard-box > h3:first-of-type a:focus {
  text-decoration: none;
  background: none
}

.dashboard #dashboard-cards .dashboard-box h4 {
  font-weight: bold;
  font-size: 16px;
  line-height: 36px;
}

.dashboard #dashboard-cards .dashboard-box h4 a:hover, .dashboard #dashboard-cards .dashboard-box h4 a:focus {
  background: transparent !important
}

.dashboard #dashboard-cards .dashboard-box h4 i {
  font-size: 36px;
  vertical-align: middle
}

.dashboard #dashboard-cards .dashboard-box ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.dashboard #dashboard-cards .dashboard-box ul li,
.dashboard #dashboard-cards .dashboard-box ul li:last-child.full-list {
  line-height: 54px;
  height: 54px;
  border-top: 1px solid;
  font-size: 14px;
}

.dashboard #dashboard-cards .dashboard-box .no-icon li,
.dashboard #dashboard-cards .dashboard-box .no-icon li:last-child.full-list {
  line-height: 54px;
  height: 54px;
  border-top: 1px solid;
  padding-left: 10px;
  font-size: 14px;
}

.dashboard #dashboard-cards .dashboard-box .no-icon li:first-child {
  border-top: 2px solid;
}

.dashboard #dashboard-cards .dashboard-box ul li a {
  display: block;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard #dashboard-cards .dashboard-box ul li i,
.dashboard #dashboard-cards .dashboard-box ul li:last-child.full-list i {
  font-size: 36px;
  vertical-align: middle
}

.dashboard #dashboard-cards .dashboard-box ul li:last-child.full-list a {
  text-align: left;
}

.dashboard #dashboard-cards .dashboard-box ul li:last-child a {
  text-align: right
}

.dashboard #dashboard-cards .dashboard-box ul li:last-child a i {
  font-size: 12px;
  margin-top: 2px;
}

.dashboard #dashboard-cards .dashboard-box ul li:hover:last-child.full-list,
.dashboard #dashboard-cards .dashboard-box ul li:focus:last-child.full-list {
  text-decoration: none;
}

.dashboard #dashboard-cards .dashboard-box .di {
  display: block;
  margin: 32px auto 0 auto;
  width: 120px;
  height: 120px;
  font-size: 120px;
  line-height: 120px
}

.dashboard .resourceLightboxPageSwitcher {
  right: 170px
}

.resource-box-container.drag-destination.highlight {
  border: 3px solid;
}

.drag-destination.highlight .resource-box {
  background-color: transparent !important;
  opacity: 0.2;
}

.is-dragging {
  position: absolute;
  opacity: .5 !important;
  z-index: 1031;
  width: 240px;
  height: 280px;
  overflow: hidden
}

.drag-item {
  cursor: move
}

/*--------------------------Filter-----------------------------------------*/

#filterContainer .filter-dropdown {
  display: inline-block;
  border: 1px solid;
  margin-right: 5px;
  margin-bottom: 12px;
}

#filterContainer .filter-dropdown button {
  display: inline-block;
  padding: 12px;
  text-decoration: none;
}

#filterContainer .filter-dropdown .dropdown-menu button.btn {
  padding: 8px;
}

#filterContainer .filter-dropdown .pseudoicon:before {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\2b'
}

#filterContainer .glyphicon {
  font-size: 14px;
}

#filterContainer .filter-dropdown .dropdown-menu {
  padding: 10px;
  margin: 10px 0 0 -1px
}

#filterContainer .filter-dropdown .dropdown-menu li {
  padding: 0 0 5px 0
}

#filterContainer .filter-dropdown .dropdown-menu li button:not(.btn) {
  background-size: 20px;
  background-position: 5px 4px !important;
  padding: 3px 32px 0 32px
}

#filterContainer .filter-dropdown .dropdown-menu li.filter-clear-group {
  border-bottom: 1px solid
}

#filterContainer .filter-dropdown .dropdown-menu li.filter-clear-group button {
  background: none;
  background-position: 0 0 !important;
  padding: 3px 0 0 0;
}

#filterContainer .filter-dropdown .dropdown-menu .input-range {
  padding: 0
}

#filterContainer .filter-dropdown .dropdown-menu .input-range li {
  padding: 6px 0 6px 0
}

#filterContainer .filter-dropdown .dropdown-menu .input-range li button:not(.btn) {
  padding: 6px 0 0 32px
}

#filterContainer #filterDeposit .btn-info, #filterContainer #filterDeposit .btn-primary {
  margin: 5px 10px 12px 0
}

#searchLabelContainer {
  margin-left: 5px;
  float: left;
}

.btn.float-right {
  float: right;
}

#filterContainer .dropdown.open .pseudoicon:before {
  content: '\2212'
}

.btn.float-right {
  float: right;
}

.filters {
  min-height: 35px;
  margin-top: 40px;
  margin-bottom: 20px
}

.filters ul li {
  margin: 8px
}

.filters ul li.close-filters {
  float: right !important;
  text-align: center;
  padding: 0;
  font-size: 10px;
  line-height: 10px;
  width: 60px
}

.filters ul li .di {
  font-size: 28px;
  line-height: 28px
}

/*-----------------------------------------------------------------------------------------------*/

select optgroup {
  font-size: inherit;
  font-style: inherit;
  font-family: inherit
}

.didactus-select {
  padding: 5px;
  border: solid 1px;
  height: 45px;
  font-weight: 300;
}

.profile-language-select {
  width: 150px;
}

.didactus-select option {
  padding: 5px !important;
  font-weight: 300;
  border: solid 1px;
}

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
  height: auto
}

#main-screen, #homepage-screen, #tasks-screen, #resources-screen, #collections-screen, #settings-screen {
  padding-top: 70px
}

#homepage-screen.homepage-height-full {
  padding-top: 0;
}

.main-screen {
  padding-top: 70px;
}

#login-screen {
  height: 100%;
  padding-top: 70px
}

footer#homepage-footer {
  margin: 0;
}

#homepage-screen iframe, #homepage-footer iframe {
  width: 100%;
  overflow: hidden;
  position: relative;
  border: 0 none;
}

textarea.form-control {
  height: auto;
  min-height: 110px;
  resize: vertical
}

.did-params-group textarea.form-control {
  height: 36px;
  min-height: 36px;
}

input[type="date"] {
  line-height: 36px
}

.modal-dialog-resource {
  width: 90%
}

.modal-dialog-resource-fullscreen {
  width: 100%;
  height: 100%;
  margin-top: 0
}

.modal-dialog-resource-fullscreen .modal-content {
  height: 100%;
  border-radius: 0;
  border: none
}

.modal-dialog-resource-fullscreen #system-modal-body {
  padding-left: 0;
  padding-right: 0
}

#system-modal-window .modal-content button.close {
  font-size: 40px;
}

.close {
  padding: 5px;
}

#system-modal-window .system-modal-title .resourceLightboxTitle {
  width: 60%;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

#system-modal-window #system-modal-body {
  text-align: center
}

#system-modal-window #system-modal-body img {
  margin: 0 auto;
  width: 90%
}

#iframeContent {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden
}

.did-main-preloader {
  width: 100% !important;
  height: 50px;
  position: absolute;
  top: 44px;
  left: 20px;
}

.resourceLightboxPreloader, .did-preloader {
  width: 100% !important;
  height: 50px;
}

.resourceLightboxMenu {
  height: auto;
  position: absolute;
  right: 20px;
  line-height: 45px;
  text-align: right
}

.resourceLightboxMenu > a {
  width: 50px;
  text-decoration: none;
  font-size: 40px;
  display: inline;
  margin: 0;
  padding: 0;
  z-index: 101;
  cursor: pointer;
  text-align: center
}

.resourceLightboxMenu > a:hover, .resourceLightboxMenu > a:focus {
  text-decoration: none;
}

.resourceLightboxMenu > a:first-child:last-child {
  float: right
}

.resourceLightboxMenu .popover {
  width: 500px;
  max-width: 500px;
}

.resourceLightboxMenu .popover .popover-content {
  font-size: 16px
}

.resourceLightboxMenu .popover h1,
.resourceLightboxMenu .popover h2.primary-title {
  font-size: 16px;
  margin: 2px;
  padding: 0
}

.resourceLightboxMenu .popoverLoaded {
  left: -350px
}

.resourceLightboxMenu .popoverLoaded .arrow {
  left: 375px
}

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

.nav-list ul li {
  position: relative;
  margin-top: 0
}

.nav-list ul li hr {
  margin-top: 15px;
  margin-bottom: 14px;
  border-top: 1px solid #ffffff;
}

.nav-list ul li a,
.nav-list ul li button,
.base-menu .simple-list .nav-list ul li a {
  display: block;
  padding: 16px 32px 16px 16px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.nav-list ul li button {
  border: none;
  background: transparent;
  width: 100%;
  height: 100%;
  text-align: left;
}

.simple-list .nav-list ul li.item-selected a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-list ul li i {
  position: absolute;
  top: 16px;
  right: 16px;
  width: auto;
  padding: 0 2px 0 2px;
  height: auto;
  text-align: right;
}

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

/* Animation temporary disabled */
/*.flat-list {*/
/*-webkit-transition: all 1s ease-in-out;*/
/*-moz-transition: all 1s ease-in-out;*/
/*-ms-transition: all 1s ease-in-out;*/
/*-o-transition: all 1s ease-in-out;*/
/*transition: all 1s ease-in-out;*/
/*}*/

.flat-list li {
  position: relative;
  font-size: 16px
}

.flat-list li a {
  display: block;
  padding: 16px 32px 16px 16px;
  text-decoration: none
}

.flat-list li i {
  position: absolute;
  top: 16px;
  right: 16px;
  width: auto;
  padding: 0 2px 0 2px;
  height: auto;
  text-align: right;
}

.flat-list.scrollable-flat-list {
  overflow-y: auto;
  background-color: #f5f5f5;
}

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

.tree-list ul li {
  position: relative
}

.tree-list ul li a {
  display: block;
  padding: 16px 32px 16px 16px;
  text-decoration: none
}

.tree-list ul li a i {
  display: block;
  padding: 0;
  position: static;
  float: left;
  width: 32px;
  height: 100%
}

.tree-list ul li a i:hover {
  color: inherit
}

.tree-list ul li i {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  text-align: left;
  padding-top: 16px
}

.tree-list ul.grades li li a {
  margin-right: 32px;
  padding-right: 0
}

.tree-list ul.grades li li a i {
  display: block;
  padding: 0;
  position: static;
  float: left;
  width: 32px;
  height: 100%;
  margin-left: 20px
}

.tree-list ul.grades li li ul {
  display: none
}

.tree-list ul.grades li li li.selected > a > i {
  display: none
}

.tree-list ul.grades li.selected > a {
  margin-left: 16px
}

.nav-panel-tab {
  display: none;
  height: 100%;
  overflow: auto
}

.nav-panel-tab.active {
  display: block
}

.alert {
  margin-bottom: 0;
}

.alert-info {
  border-radius: 4px
}

.close-window {
  margin-top: -8px !important
}

.nav-list ul li.item-selected a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.paper-view-layout .form-date-checkbox {
  display: inline-block;
  margin-left: 10px;
  margin-top: 0;
  margin-bottom: 14px
}

.paper-view-layout #filterContainer {
  margin: 14px 10px;
}

.paper-view-layout .section-header .section-header-options a:hover,
.paper-view-layout .section-header .section-header-options a:focus {
  text-decoration: none;
}

.paper-view-layout .resources-cointainer {
  margin: 0;
  padding-bottom: 15px
}

.paper-view-layout .resources-cointainer .resource-box-container .resource-box {
  border-radius: 4px;
  padding: 5px
}

.paper-view-layout .resources-cointainer .resource-box-container .resource-box .resource-box-image {
  position: relative;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}

.paper-view-layout .resources-cointainer .resource-box-container .resource-box .resource-box-title {
  background-color: transparent
}

.paper-view-layout .resources-cointainer .resource-box-container .resource-box .resource-box-info {
  background-color: transparent;
  border-radius: 0 0 4px 4px;
  height: 60px
}

.paper-view-layout .resources-cointainer .resource-box-container .resource-box .resource-box-additional-info {
  background-color: transparent;
  border-radius: 0 0 4px 4px;
}

.paper-view-layout .resources-cointainer .resource-box-container .resource-box .resource-box-additional-info .number-space {
  width: auto;
  text-align: left;
  padding-left: 5px
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-additional-info .number-space {
  line-height: 50px;
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-additional-info .icon-space {
  line-height: 50px;
  height: 30px;
}

.paper-view-layout .resources-cointainer .resource-box-container .resource-box .resource-box-info .resource-box-delete {
  border-right: none !important
}

.paper-view-layout .resources-cointainer .resource-box-container .resource-box .resource-box-additional-info .resource-box-delete {
  border-right: none !important
}

.paper-view-layout .resources-cointainer .resource-box-container .resource-box .resource-box-additional-info ul li a {
  margin-top: 8px
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container {
  width: calc(100% - 1px);
  width: -webkit-calc(100% - 1px);
  width: -moz-calc(100% - 1px);
  float: left;
  border-top: 1px solid;
  display: block;
  margin: 0
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container:last-child {
  border-bottom: 1px solid;
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box {
  background-color: transparent;
  padding: 0
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-title {
  background-color: transparent;
  border-left: none;
  border-right: none
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-info {
  background-color: transparent;
  border-right: none;
  border-top: none;
  height: 60px
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-additional-info {
  background-color: transparent;
  border-right: none;
  border-top: none;
  height: 60px
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-info ul li {
  border-right: 1px solid;
  border-top: none
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-additional-info ul li {
  border-top: none
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-info ul li:last-child {
  border: none
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-additional-info ul li:last-child {
  border: none
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-additional-info ul li:last-child {
  border: none
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-info ul li a,
.paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-info ul li button {
  padding: 8px 0 10px 0
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-additional-info ul li a {
  padding: 8px 0 10px 0
}

.paper-view-layout .task-overview #resources-resources-container,
.paper-view-layout .collections-overview #resources-resources-container,
.paper-view-layout .resources-overview #resources-resources-container,
.paper-view-layout .classes-overview #resources-resources-container {
  margin-top: 14px
}

.collection-description {
  padding: 20px 0;
}

.paper-view-layout .collection-overview form label {
  font-size: 18px !important
}

.paper-view-layout .collection-overview .alert-info {
  border-radius: 4px;
  margin-left: -8px;
  margin-right: -8px
}

.paper-view-layout .paper-view-tasks .section-header .section-header-title {
  padding-left: 0;
}

.paper-view-layout .paper-view-tasks .section-header .section-header-title h1,
.paper-view-layout .paper-view-tasks .section-header .section-header-title h2.primary-title {
  font-size: 24px;
  font-weight: 400
}

.title-with-label .btn.btn-link.functional-button {
  margin-top: 5px;
}

.btn.btn-link.functional-button {
  background: inherit;
  padding-top: 0;
}

.btn.btn-link.functional-button[disabled] {
  opacity: 0.5;
}

.btn.btn-link.functional-button:hover, .btn.btn-link.functional-button:focus {
  text-decoration: none;
}

.profile-container {
  /*margin: 0 auto;*/
  /*max-width: 1170px;*/
  /*padding: 60px 0 60px 0 !important*/
}

.profile-area {
  position: fixed;
  left: 2px;
  right: 2px;
  top: 55px;
  height: calc(100% - 250px);
  overflow: auto;
}

.profile-container .masterheader header {
  margin-bottom: 22px;
  margin-left: 17px
}

.profile-container .masterheader .btn-close {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  background: transparent;
  font-size: 36px;
  margin-right: 17px;
}

.profile-container .primary-nav .user-menu ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.profile-container .primary-nav .user-menu ul li {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  border-left: 5px solid;
  cursor: pointer;
  font-size: 18px;
  line-height: 60px;
  padding-left: 14px
}

.profile-container .primary-nav .user-menu ul li a {
  text-decoration: none
}

.profile-container .primary-nav .profile-picture {
  position: relative;
  padding: 0;
}

.profile-container .primary-nav .profile-picture .edit-picture {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
  left: 50%;
  position: absolute;
  top: 50%
}

.profile-container .primary-nav .profile-picture .edit-picture i {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  font-size: 64px;
  opacity: .5
}

.profile-container .primary-nav .profile-picture .edit-picture i:hover,
.profile-container .primary-nav .profile-picture .edit-picture i:focus {
  opacity: 1
}

.profile-container .primary-content {
  padding-left: 25px;
  padding-right: 25px
}

.profile-container .primary-content h1,
.profile-container .primary-content h2.primary-title {
  margin-bottom: 22px
}

.profile-container .primary-content .btn-edit {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  border-radius: 4px;
  margin-bottom: 25px;
  margin-top: 22px;
}

.profile-container .primary-content .btn-edit a {
  text-decoration: none
}

@media ( min-width: 480px) {
  .container-same-height {
    display: table
  }

  .row-same-height {
    display: table-row
  }

  .col-same-height {
    display: table-cell;
    float: none
  }

  .col-top {
    vertical-align: top
  }

  .col-middle {
    vertical-align: middle
  }

  .col-bottom {
    vertical-align: bottom
  }

  .img-responsive {
    width: 100%
  }
}

.clear-paddings {
  padding: 0
}

.resource-box-container {
  width: 240px;
  display: inline-block;
  margin: 5px;
}

.resource-box-container.drag-proxy {
  height: auto;
}

.resource-box {
  margin: 0;
  position: relative;
  border-radius: 4px;
  padding: 5px;
}

.resource-box-additional-info {
  position: relative;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  text-align: left;
  overflow: hidden;
  background-color: transparent;
  margin: 0;
  border-radius: 4px;
  padding: 5px;
}

.resource-box .resource-box-image {
  width: 100%;
  height: 150px;
  overflow: hidden;
  text-align: center;
  padding: 0;
}

.resource-box .resource-box-image img, .resource-box .resource-box-image i {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.resource-box .resource-box-image a figure {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.resource-box .resource-box-image.tiles-0 a figure, .resource-box .resource-box-image.tiles-1 a figure {
  background-size: 100% 100%
}

.resource-box .resource-box-image.tiles-2 a figure {
  height: 50%
}

.resource-box .resource-box-image.tiles-3 a figure {
  height: 50%;
  float: left
}

.resource-box .resource-box-image.tiles-3 a figure:nth-of-type(1),
.resource-box .resource-box-image.tiles-3 a figure:nth-of-type(2) {
  width: 50%
}

.resource-box .resource-box-image.tiles-3 a figure:nth-of-type(3) {
  width: 100%
}

.resource-box .resource-box-image.tiles-4 a figure {
  float: left;
  height: 50%;
  width: 50%
}

.resource-box .resource-box-info {
  width: 100%;
  overflow: visible;
  background-color: transparent;
  border-radius: 0 0 4px 4px;
  height: 60px
}

.resource-box .resource-box-additional-info {
  width: 100%;
  overflow: visible;
  background-color: transparent;
  border-radius: 0 0 4px 4px;
}

.resource-box .resource-box-info ul {
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0
}

.resource-box .resource-box-additional-info ul {
  width: 160px;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0
}

.resource-box .resource-box-info ul.dropdown-menu li {
  float: none;
  height: 30px !important;
  width: 100%;
  text-align: left;
}

.resource-box .resource-box-info ul.dropdown-menu li a {
  float: none;
  font-size: medium !important;
  padding-left: 8px;
  padding-right: 8px;
  width: 100%;
}

.resource-box .resource-box-info .did-tool-box .dropdown.pull-right button.did-picture-button {
  padding-top: 0;
}

.resource-box .resource-box-info ul.dropdown-menu {
  padding-bottom: 70px;
  width: auto;
}

@media (max-width: 856px) {
  .paper-view-layout .resources-cointainer.horizontal .resource-box.logged .resource-box-additional-info ul {
    display: none !important;
    width: 0 !important;
  }

  .paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-title a,
  .paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box .resource-box-title span {
    width: calc(100% - 260px);
    width: -moz-calc(100% - 260px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 80px
  }
}

@media (max-width: 756px) {
  .paper-view-layout .resources-cointainer.horizontal .resource-box.not-logged .resource-box-additional-info ul {
    display: none !important;
    width: 0 !important;
  }

  .paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box.not-logged .resource-box-title a,
  .paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box.not-logged .resource-box-title span {
    width: calc(100% - 160px);
    width: -moz-calc(100% - 160px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 80px
  }
}

.resource-box .resource-box-info ul li {
  width: 25%;
  height: 100%;
  float: left;
  text-align: center
}

.paper-view-layout .resources-cointainer.horizontal .resource-box-container .resource-box.not-logged .resource-box-info ul li {
  width: 50%;
  text-align: center
}

.resource-box .resource-box-info ul li.ng-hide {
  width: 0;
  text-align: center
}

.resource-box .resource-box-additional-info ul li {
  width: 100%;
  height: 100%;
  float: left;
  text-align: center
}

.resource-box .resource-box-info ul li a,
.resource-box .resource-box-info ul li span,
.resource-box .resource-box-info ul li button {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 24px
}

.resource-box .resource-box-info ul li a,
.resource-box .resource-box-info ul li span {
  padding: 8px 0 10px 0;
}

.resource-box .resource-box-additional-info ul li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px 0 10px 0;
  font-size: 24px
}

.resources-cointainer {
  padding-bottom: 40px
}

.resources-cointainer.horizontal .resource-box-container {
  width: 100%;
  height: 60px
}

.resources-cointainer.horizontal .resource-box {
  width: 100%;
  position: relative
}

.resources-cointainer.horizontal .resource-box .resource-box-image {
  display: none
}

.resources-cointainer.horizontal .resource-box.not-logged .resource-box-info {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 120px;
}

.resources-cointainer.horizontal .resource-box .resource-box-info {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 220px;
}

.resources-cointainer.horizontal .resource-box .resource-box-additional-info {
  position: absolute;
  top: 0;
  right: 230px;
  display: block;
  width: 160px;
}

.resources-cointainer.horizontal .resource-box.not-logged .resource-box-additional-info {
  position: absolute;
  top: 0;
  right: 140px;
  display: block;
  width: 160px;
}

a {
  text-decoration: none;
  cursor: pointer;
  -o-transition: color .25s ease-in-out;
  -webkit-transition: color .25s ease-in-out;
  transition: color .25s ease-in-out
}

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

b, strong {
  font-weight: 500
}

.section-header {
  min-height: 60px;
  height: auto;
  list-style: none;
  padding: 0;
  line-height: 60px
}

.section-header.margin-bottom {
  margin: 0 0 8px 0
}

.section-header.padding-bottom {
  padding-bottom: 20px;
}

.margin-bottom {
  margin-bottom: 16px;
}

.section-header .section-header-title {
  min-height: 60px;
  height: auto;
  position: relative;
  margin: 0;
  padding: 0 0 0 16px;
  float: left
}

.section-header.light-color .section-header-title {
  padding: 0
}

.section-header .section-header-title h1, .section-header .section-header-title h2,
.section-header .section-header-title h3, .section-header .section-header-title h4 {
  font-size: 18px;
  line-height: 60px;
  margin: 0;
  padding: 0
}

.section-header .section-header-title h1 .di, .section-header .section-header-title h2 .di,
.section-header .section-header-title h3 .di, .section-header .section-header-title h4 .di {
  line-height: 60px;
  vertical-align: middle
}

.section-header .section-header-options {
  width: auto;
  min-height: 60px;
  height: auto;
  float: right;
  margin: 0;
  padding: 0
}

.section-header .section-header-options.options-left {
  float: left;
  position: relative;
  z-index: 1;
}

.section-header .section-header-options ul {
  margin: 2px 0 0 0;
  padding: 0;
  list-style: none;
  height: 60px;
}

.section-header .section-header-options ul li {
  display: inline-block;
  width: auto;
  height: 60px;
  vertical-align: top;
  text-align: center;
  border-left: 1px solid;
  cursor: pointer;
  font-weight: bold;

}

.section-header .section-header-options ul li:first-child {
  border-left: none;
}

.section-header .section-header-options ul li .did-picture-button {
  width: 100%;
  height: 100%;
  padding: 0 25px;
}

.section-header .section-header-options ul li a {
  border: none
}

.section-header .section-header-options ul li .di {
  line-height: 60px
}

.section-header .section-header-options ul li .di.small-icon {
  font-size: 13px
}

.section-header .section-header-options ul li a.btn {
  padding: 0
}

.section-header .section-header-options ul li.wide {
  width: auto;
}

.section-header nav.arrow-nav ul {
  padding: 0;
  list-style: none;
}

.section-header .section-header-title i.arrow {
  width: auto;
  height: 0;
  font-size: 0;
  line-height: 0;
  position: absolute;
  z-index: 1029
}

.section-header .section-header-title i.arrow-left:after,
.section-header .section-header-title i.arrow-right:after,
.section-header .section-header-title i.arrow-bottom:after,
.section-header .section-header-title i.arrow-top:after {
  content: ' ';
  position: absolute;
  border: 20px solid transparent;
  background-color: transparent
}

.section-header .section-header-title.list-title i.arrow-left:after {
  left: -16px;
  top: -40px;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  border-left: 10px solid
}

.section-header .section-header-title i.arrow-left:after {
  left: -20px;
  top: -40px;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  border-left: 10px solid
}

.section-header .section-header-title i.arrow-right:after {
  right: 2px;
  top: -40px;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  border-left: 10px solid
}

.section-header .section-header-title i.arrow-bottom:after {
  left: 0;
  top: 0;
  border-top: 10px solid;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent
}

.section-header .section-header-title i.arrow-top:after {
  left: 0;
  top: -90px;
  border-bottom: 10px solid;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent
}

.section-header.light-color.no-margin {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.section-summary.dark-color {
  margin-left: 0;
  margin-right: 0;
  padding: 8px;
}

.section-header-title.did-full-width {
  width: 100% !important;
}

.section-header.light-color a:hover, .section-header.light-color a:focus {
  text-decoration: none
}

#results-container .section-header-title h1, .resource-details .section-header-title h1,
#results-container .section-header-title h2.primary-title, .resource-details .section-header-title h2.primary-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.resource-details .section-header-title {
  width: 100%;
}

#results-container .row:nth-of-type(1) .section-header-title {
  width: calc(100% - 130px);
  width: -webkit-calc(100% - 130px);
  width: -moz-calc(100% - 130px)
}

#results-container .row:nth-of-type(1) .section-header-title h1,
#results-container .row:nth-of-type(1) .section-header-title h2.primary-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.section-header h2.primary-title {
  color: #5f5f5f !important;
}

.did-resource-tree .section-header h2.primary-title {
  color: #ffffff !important;
}

#task-resources-container .row:nth-of-type(1) .section-header-title {
  width: calc(100% - 190px);
  width: -webkit-calc(100% - 190px);
  width: -moz-calc(100% - 190px)
}

#task-resources-container .row:nth-of-type(1) .section-header-title h1,
#task-resources-container .row:nth-of-type(1) .section-header-title h2.primary-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

#main-view-container {
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

app-params-wrapper {
  height: 100vh;
  overflow-y: auto;
}

header#top {
  width: 100%;
  height: 60px;
  position: fixed;
  z-index: 1035;
  min-width: 600px
}

header#top .navbar-toggle {
  display: none
}

header#top > a:first-child {
  display: block;
  width: 60px;
  height: 100%;
  float: left;
  padding: 0 0 0 0;
  text-align: center;
  line-height: 60px
}

header#top > a:first-child:focus, header#top > a:first-child:active, header#top > a:first-child:hover, header#top > a:first-child:visited,
header#top .navbar-header a:active, header#top .navbar-header a:hover, header#top .navbar-header a:focus {
  text-decoration: none;
}

header#top > a:first-child .di {
  line-height: 60px
}

header#top.homepage > a:first-child {
  display: none
}

header#top .navbar-header {
  float: left
}

header#top h1 {
  margin: 0 16px 0 16px;
  line-height: 60px;
  width: 230px;
  float: left
}

header#top figure {
  height: 60px;
  width: auto;
  display: none
}

header#top figure img {
  width: auto;
  height: 46px;
  vertical-align: baseline;
  margin: 6px 16px 0 16px
}

@media ( max-width: 850px) {
  header#top figure {
    display: block
  }
}

header#top .navbar-nav {
  margin: 0 -8px
}

header#top .navbar-default {
  border: none;
  z-index: -1;
  height: 100%
}

header#top .navbar-default .navbar-collapse {
  border: none
}

header#top .navbar-default .navbar-toggle {
  border-color: transparent;
  margin: 13px 13px 0 0
}

header#top .navbar-default .navbar-toggle:hover, header#top .navbar-default .navbar-toggle:focus,
header#top .navbar-default .navbar-toggle:active {
  background-color: transparent;
}

header#top .navbar-default li a {
  margin: 0;
  padding: 0;
  line-height: 60px;
  text-align: center;
  font-weight: 300
}

header#top .navbar-default li button {
  margin: 0;
  padding: 0;
  text-align: center;
  font-weight: 300
}

header#top .dropdown-menu {
  border: none;
  padding: 0;
  border-radius: 4px
}

header#top .dropdown-menu li {
  width: 200px;
  background: transparent;
  padding: 0;
  border: none;
}

header#top .dropdown-menu li:last-child {
  border-radius: 0 0 4px 4px
}

header#top .dropdown-menu li a, header#top .dropdown-menu li button {
  line-height: 42px
}

header#top .dropdown-menu li button .searcher-element-name {
  display: inline-block;
  width: 91px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}

header#top .dropdown-menu li button .di {
  font-size: 20px;
  margin: 0;
  padding: 0 0 0 5px;
  line-height: 45px;
  height: 40px;
}

header#top .dropdown-menu li a:hover, header#top .dropdown-menu li a:focus, header#top .dropdown-menu li button:hover, header#top .dropdown-menu li button:focus {
  background: transparent
}

header#top .dropdown-menu li a {
  text-align: center
}

header#top .dropdown-menu li button {
  text-align: center;
  width: 100%;
}

header#top #form-search .dropdown-menu li button {
  text-align: left;
  width: 100%;
  padding: 0 10px 0 10px;
}

header#top .user-not-logged li {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  border-left: 1px solid;
  line-height: 60px;
  width: 120px
}

header#top .user-logged {
  width: 200px;
  height: 60px
}

header#top .user-logged .dropdown.open .logged-user-caret-container span {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  -o-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg)
}

header#top .user-logged .logged-user-nav-btn {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  padding: 0
}

header#top .user-logged .logged-user-nav-btn .logged-user-picture-container {
  position: relative;
  float: left;
  height: 60px;
  margin: 0;
  padding: 0;
  width: 60px
}

header#top .user-logged .logged-user-nav-btn .logged-user-picture-container .default-avatar {
  width: 80%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-size: contain;
}

header#top .user-logged .logged-user-nav-btn .logged-user-name-container {
  height: 60px;
  padding: 0;
  position: relative;
  width: 110px;
  word-spacing: 110px;
  float: left;
  margin: 0;
  text-align: left;
}

header#top .user-logged .logged-user-nav-btn .logged-user-name-container .first-name,
header#top .user-logged .logged-user-nav-btn .logged-user-name-container .last-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 0;
  margin-bottom: 2px;
  text-align: center;
}

header#top .user-logged .logged-user-nav-btn .logged-user-name-container .first-name {
  margin-top: 12px;
}

header#top .user-logged .logged-user-nav-btn .logged-user-name-container .name-container {
  position: absolute;
  top: 50%;
  left: 0;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
}

header#top .user-logged .logged-user-nav-btn .logged-user-name-container .name-container .first-name,
header#top .user-logged .logged-user-nav-btn .logged-user-name-container .name-container .last-name {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 100%;
  white-space: nowrap;
}

header#top .user-logged .logged-user-nav-btn .logged-user-caret-container {
  width: 20px;
  height: 60px;
  position: absolute;
  top: 0;
  padding-top: 28px;
  padding-left: 6px;
  right: 10px
}

header#top .user-logged .logged-user-nav-btn .logged-user-caret-container span {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  font-size: 12px;
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  display: block
}

header#top .user-logged .dropdown-menu {
  margin-top: 4px;
  position: absolute;
  width: 200px
}

header#top .user-logged .dropdown-menu:before {
  position: absolute;
  top: -4px;
  right: 10px;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 5px 5px;
  z-index: -2
}

header#top .user-logged .dropdown-menu li {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  width: 100%
}

header#top .user-logged .dropdown-menu li:first-child {
  border-radius: 4px 4px 0 0
}

header#top .user-logged .dropdown-menu li {
  border-bottom: 1px solid;
}

header#top .user-logged .dropdown-menu li:last-child {
  border-bottom: none;
}

header#top .user-logged .dropdown-menu li a, header#top .user-logged .dropdown-menu li button {
  line-height: 60px
}

header#top .user-logged .logged-nav-buttons {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  background-color: transparent;
  border: none;
  border-left: 1px solid;
  float: left;
  height: 60px
}

header#top .user-logged .logged-user-nav-btn {
  width: 200px
}

header#top .user-logged .logged-nav-icons {
  height: 32px;
  width: 32px
}

header#top .user-logged .profile-photo {
  border-radius: 50%;
  margin-top: 14px
}

#tree-slides-window {
  height: auto;
  margin: 0 auto 0 auto;
  overflow: hidden
}

#tree-slides-window #tree-slides-breadcrumb {
  margin: 0;
  padding: 16px 16px 16px 16px;
  overflow: auto;
  height: auto
}

.column-left {
  display: block;
  padding-top: 76px;
  overflow: auto;
  z-index: 500;
  width: 381px;
  height: 100%;
  position: fixed;
  -webkit-backface-visibility: hidden;
  left: 0;
  top: 0
}

.homepage-height-full .column-left {
  padding-top: 0;
}

.column-left.no-burger {
  width: 305px;
  min-height: 500px;
  margin-left: 10px;
}

.column-right {
  display: block;
}

.column-left .well {
  margin-bottom: 0
}

@media ( max-width: 992px) {
  .column-left {
    width: 311px;
  }

  .column-left.no-burger {
    width: 235px;
  }

  .section-header .section-header-title h1,
  .section-header .section-header-title h2.primary-title {
    display: block;
    width: 100%;
    position: relative;
  }

}

.column-right {
  padding: 5px 16px 0 331px
}

.column-right.no-burger {
  padding: 5px 16px 0 255px
}

@media ( min-width: 600px) {
  .column-right {
    padding: 5px 16px 0 331px
  }

  .column-right.no-burger {
    padding: 5px 16px 0 255px
  }
}

@media ( min-width: 992px) {
  .column-right {
    padding: 5px 16px 0 401px
  }

  .column-right.no-burger {
    padding: 5px 16px 0 325px
  }
}

.column-right.wide {
  padding: 5px 16px 0 76px;
}

.homepage-width-full .column-right.wide {
  padding-left: 16px;
}

.column-left.thin {
  width: 60px;
  overflow: hidden;
}

.column-left.thin .did-tree-container {
  display: none
}

figure.resource-preview {
  display: block;
  width: auto;
  padding-left: 15px;
}

figure.resource-preview img {
  width: 100% \9;
  display: block;
  max-width: 100%;
  height: auto
}

figure.resource-preview figcaption {
  -ms-word-break: break-all;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  padding: 16px;
  margin-bottom: 16px
}

figure.resource-preview figcaption {
  margin-bottom: 0;
}

figure.resource-preview figcaption pre, pre.clear-pre {
  border: none;
  margin: 0;
  word-break: keep-all;
  word-wrap: break-word;
  white-space: pre-wrap;

}

#filters-list {
  padding: 0;
  margin: 0
}

.di, .static-icon {
  font-size: 40px;
  margin: 0;
  padding: 0;
  line-height: 45px;
  height: 40px
}

#top .static-icon {
  line-height: 60px;
  height: 60px
}

a .di, button .di, #burger button, #top .static-icon, header#top a:first-child {
  -o-transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

a:hover .di, button:hover .di {
  font-size: 45px;
  height: 45px
}

a[disabled]:hover .di,
button[disabled]:hover .di {
  font-size: 40px;
  height: 40px
}

a:hover .di.disabled, button:hover .di.disabled {
  font-size: 40px;
  margin: 0;
  padding: 0;
  line-height: 45px;
  height: 40px
}

form .input-range {
  padding: 0 16px 0 16px
}

form .input-range label {
  padding-right: 8px
}

.resource-details .resource-details-starred {
  line-height: 60px;
  text-decoration: none;
  padding-right: 12px
}

.resource-details i.resource-details-starred {
  line-height: 50px;
  padding: 0;
  height: 50px;
  width: 50px;
}

.resource-details .section-header-title .resource-button {
  width: 60px;
  height: 60px;
  margin-top: -3px;
  margin-left: -12px;
  text-decoration: none;
}

.modal-link:hover {
  text-decoration: none
}

#new-collection-area, .new-task-area {
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
  cursor: pointer;
  width: 100%
}

.did-ellipsis-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.did-word-wrap {
  word-wrap: break-word;
}

.did-picture-frame-rb {
  margin-right: 20px;
  margin-bottom: 20px;
}

.did-picture-button.list-tooltip {
  height: 58px;
}

div.did-picture-frame-rb span .di {
  font-size: 250px;
  cursor: default;
}

.did-child-margin-right * {
  margin-right: 15px;
}

.did-child-margin-right *:last-child {
  margin-right: 0;
}

/*------------------------------------*\
    Same height columns fix
\*------------------------------------*/
@media (min-width: 992px) {
  .container-same-height {
    display: table;
    padding-left: 0;
    padding-right: 0;
  }

  .row-same-height {
    display: table-row;
  }

  .col-same-height {
    display: table-cell;
    float: none;
  }

  .col-middle {
    vertical-align: middle;
  }

  .img-responsive {
    width: 100%;
  }
}

/******************************************************************/

.striped-row {
  padding: 16px;
  margin-right: 0;
}

.border-bottom {
  border-bottom: 1px solid;
}

.border-top {
  border-top: 1px solid;
}

/*************************From search******************************/
.form-search {
  position: absolute;
  right: 682px;
}

.skin-switcher {
  position: absolute;
  right: 120px;
}

.skin-switcher .did-picture-button {
  position: absolute;
  right: 5px;
  top: 5px;
}

.skin-switcher .did-picture-button:hover .di {
  font-size: 40px;
}

.form-search-logged {
  position: absolute;
  right: 812px;
}

@media ( max-width: 1024px) {
  .form-search {
    right: 588px;

  }

  .form-search-logged {
    right: 708px;
  }
}

.no-margin {
  margin: 0 !important;
}

.margin-left {
  margin-left: 8px !important;
}

.margin-right {
  margin-left: 8px !important;
}

.margin-top {
  margin-top: 20px !important;
}

.position-fixed {
  position: fixed;
}

.reset-right {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.reset-left {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

#form-search {
  border-radius: 4px;
  border: none;
  height: 50px;
  margin-top: 5px;
  padding: 0;
  position: absolute;
  width: 500px
}

@media ( max-width: 1024px) {
  #form-search {
    width: 380px;
  }
}

@media ( max-width: 850px) {
  #form-search {
    width: 310px;
  }
}

@media ( max-width: 1024px) {
  #form-search {
    width: 400px;
  }
}

#form-search input[type="text"], #form-search input[type="search"] {
  border: none;
  box-shadow: none;
  display: block;
  float: left;
  height: 42px;
  margin-top: 4px;
  padding-left: 8px;
  padding-right: 0
}

@media ( min-width: 768px) {
  #form-search input[type="text"], #form-search input[type="search"] {
    width: 300px
  }
}

@media ( max-width: 1024px) {
  #form-search input[type="text"], #form-search input[type="search"] {
    width: 200px
  }
}

#form-search .dropdown {
  border-right: 1px solid;
  display: block;
  float: left;
  height: 50px;
  margin: 0;
  padding: 0 5px 0 0;
  width: 146px;
  z-index: 1;
}

#form-search .dropdown #dropdownSearch {
  border-radius: 4px;
  border: none;
  display: block;
  height: 42px;
  margin-left: 4px;
  margin-top: 4px;
  width: 136px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

#form-search .dropdown .dropdown-menu {
  display: none;
  min-width: 136px
}

#form-search .dropdown .dropdown-menu li {
  width: 100%
}

#form-search .dropdown .dropdown-menu li a i {
  font-size: 14px;
  margin-right: 6px
}

#form-search .dropdown.open .dropdown-backdrop {
  z-index: -1 !important
}

#form-search .dropdown.open #dropdownSearch {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

#form-search .dropdown.open .dropdown-menu {
  display: block;
  margin-left: 4px;
  position: relative;
  top: 2px;
  z-index: -1
}

#form-search .dropdown.open .dropdown-menu:before {
  position: absolute;
  top: -4px;
  right: 10px;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 5px 5px;
  z-index: -2
}

#form-search .dropdown.open .dropdown-menu li {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  border-bottom: 1px solid
}

#form-search .dropdown.open .dropdown-menu li:last-child {
  border: none
}

#form-search button[type="submit"] {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  border-radius: 4px;
  border: none;
  display: block;
  float: right;
  height: 42px;
  margin-right: 4px;
  margin-top: 4px;
  position: relative;
  width: 42px
}

#form-search button[type="submit"] i {
  font-size: 32px;
  left: 5px;
  line-height: 42px;
  position: absolute;
  top: 0
}

.breadcrumb-nav {
  list-style: none;
  border-radius: 0;
  margin-bottom: 0;
  -webkit-padding-start: 0;
  word-spacing: -2px;
}

.breadcrumb-header {
  line-height: 50px;
  height: auto;
  overflow: auto;
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
}

.breadcrumb-header .breadcrumb-header-title {
  min-height: 50px;
  height: auto;
  width: 100%;
  margin: 0;
  float: left;
}

.ng-hide-add, .ng-hide-remove {
  /* ensure visibility during the transition */
  display: block !important; /* yes, important */
}

.breadcrumb-menu {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-transition: all, linear 0.2s, ease-in-out;
  -moz-transition: all, linear 0.2s, ease-in-out;
  -o-transition: all, linear 0.2s, ease-in-out;
  transition: all, linear 0.2s, ease-in-out;
  opacity: 1;
}

.breadcrumb-menu.ng-hide {
  height: 0;
  opacity: 0;
}

.breadcrumb-carret {
  float: right;
  right: 20px;
  position: absolute;
}

.breadcrumb-nav > li {
  display: inline-block;
  margin-bottom: 0;
}

.breadcrumb-nav > li + li:before {
  content: "/\00a0";
  padding: 0 0 0 6px;
  color: #5f5f5f !important;
}

.resources-cointainer .resource-item-menu {
  position: relative;
  top: -52px;
  left: 42px;
}

.resources-cointainer.horizontal .resource-item-menu {
  position: relative;
  float: right;
  top: -34px;
  left: -190px;
}

.dropdown-menu.resource-item-dropdown > li > button {
  width: 100%;
  text-align: left;
}

.fileUpload {
  position: relative;
  overflow: hidden;
}

.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

.file-upload-input {
  position: relative;
  width: 85%;
}

input[type="file"] {
  height: 32px;
}

.file-upload-margin-right {
  margin-right: 10px !important;
}

.file-upload-margin-top {
  margin-top: 10px !important;
}

#system-modal-form-body {
  text-align: left;
}

.draggable-resource {
  position: absolute;
}

.read-only .resource-box-container {
  height: auto;
}

.resources-cointainer.horizontal.read-only .student-box-container .resource-box-title span {
  font-style: normal;
}

.task-overview .row .read-only.task-schedule {
  width: 50%;
}

/* - START - Task confirmation view (window) miscellaneous (use BEM naming convention)*/
.task-confirmation-view_section-header {
  max-width: 100%;
  min-height: 60px;
  height: 60px;
  line-height: 60px;
  /* for proper matching with bottom block*/
  padding-right: 22px;
  padding-left: 22px;
}

.task-confirmation-view_section-header_title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  font-size: 22px;
}

.task-confirmation-view_section-header_options {
  vertical-align: middle;
  /* for the narrowest width */
  max-width: 100%;
  overflow-x: hidden;
}

/* - END - Task confirmation view (window) miscellaneous*/

#task-resources-container .row:nth-of-type(1).schedule-wrapper .section-header-title {
  width: 100%;
}

.read-only.task-schedule .date {
  margin-right: 8px;
}

.read-only.task-schedule {
  float: left;
}

.task-schedule .date {
  float: left;
}

.task-schedule .date.date-from {
  margin-right: 10px;
}

.middle-header {
  font-size: 20px;
  padding-right: 15px;
  font-weight: 600;
}

/* webkit */

/* all */
::-webkit-input-placeholder {
  border: hidden;
}

::-moz-placeholder {
  border: hidden;
}

/* ie */
input:-moz-placeholder {
  border: hidden;
}

/* individual: webkit */
#input::-webkit-input-placeholder {
  border: hidden;
}

#input::-webkit-input-placeholder {
  font-family: sans-serif;
  text-decoration: overline;
  letter-spacing: 3px;
  border: hidden;
}

/* individual: mozilla */
#input::-moz-placeholder {
  font-family: sans-serif;
  text-decoration: overline;
  letter-spacing: 3px;
  border: hidden;
}

.resource-details .row .resource-details-dropdown-menu {
  height: 0;
}

.resource-details .row .resource-details-dropdown-menu .resource-item-menu {
  margin-top: -90px;
}

.alternative-resource-cover {
  text-align: center;
}

.alternative-resource-cover .big-media-type-icon {
  padding-top: 100px;
  padding-bottom: 100px;
}

.alternative-resource-cover .big-media-type-icon .di {
  font-size: 160px;
}

.row.tasks .body {
  height: 180px;
}

.keep-new-lines {
  white-space: pre-wrap;
}

.did-picture-button, .did-link-button {
  border: 0 none;
  background: transparent;
}

.modal-content.attach-file .modal-header .system-modal-title,
.modal-content.attach-file .modal-body .input-title {
  font-weight: 400;
}

.modal-content.attach-file .modal-body .input-title {
  font-size: 18px;
}

.modal-dialog .modal-content .modal-body p {
  text-align: left;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  padding: 5px;
}

.modal-dialog .modal-content .modal-body ul {
  list-style: none;
  padding: 5px;
}

.modal-dialog .modal-content .modal-body .content .fixed-width, .modal-dialog .modal-content .modal-body span {
  display: inline-block;
  vertical-align: bottom;
  max-width: 100%;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 15px;
}

.modal-body .modal-item-list .collection-table-body span {
  width: 80%;
}

.modal-dialog .modal-content .modal-body .content .fixed-width,
.modal-dialog .modal-content .modal-body span.help-block {
  display: inline-block;
  vertical-align: bottom;
  max-width: 100%;
  white-space: normal;
}

.modal-dialog .modal-content .modal-body span.input-group-btn {
  display: block;
  position: relative;
  white-space: nowrap;
  overflow: visible;
  width: 100%;
}

.modal-dialog .modal-content .modal-body [class*=form] [class*=col-] {
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
}

#player-modal-window {
  z-index: 3000;
}

#player-modal-window .modal-header {
  height: 70px;
}

#player-modal-window .modal-header .system-modal-title {
  padding-right: 115px;
}

#player-modal-window .modal-header .system-modal-title span {
  display: block;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.progress-chart {
  display: inline-block;
}

#dashboard-cards .dashboard-box .dashboard-icon {
  text-decoration: none;
}

.task-schedule-alert, .task-schedule {
  display: table-row;
}

.simple-list .title {
  font-weight: 300;
  padding: 16px 32px 16px 16px;
}

.base-menu .simple-list .title {
  font-weight: 300;
  padding: 16px 32px 16px 16px;
}

/*=================Just for admin schools list title==============*/

.admin-navigation-panel-schools .base-menu .simple-list .title * {
  font-weight: 300;
}

/*===============================================================*/

.section-header .section-header-title a[disabled] {
  opacity: .15;
  filter: alpha(opacity=15);
}

a div.resource-item-icon {
  text-decoration: none;
}

.row .back-button a {
  margin-top: 8px;
  margin-left: 16px;
  width: 50px;
}

.resource-box-container.resource-box-type-resource .row.resource-box .resource-box-image.tiles-1 a {
  text-decoration: none;
}

[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

.dropdown.pull-right {
  width: 100%;
}

.dropdown.pull-right .did-picture-button {
  padding: 0;
  width: 100%;
  height: 100%;
}

/*=================NoScript message==============*/
.noscript-message-wrapper {
  padding: 0.5em;
  font-size: 8vw;
  text-align: center;
  margin-top: 10vh;
}

.noscript-message-wrapper .secondary-text {
  font-size: 0.5em;
}

@media (min-width: 768px) {
  .noscript-message-wrapper {
    font-size: 4vw;
  }
}

/*-----------------------------------Body focus----------------------------*/
#form-search button[type="submit"]:focus,
#form-search button[type="submit"]:active,
header#top > a:first-child:focus,
header#top > a:first-child:active,
header#top .navbar-default li a:focus,
header#top .navbar-default li a:active,
.did-btn-normal:hover,
.did-btn-normal:focus,
.did-btn-normal:active,
.did-btn-normal.active,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active,
#form-search .dropdown #dropdownSearch:focus,
#form-search .dropdown #dropdownSearch:active,
#burger a:active,
#burger a:focus,
#burger button:active,
#burger button:focus,
header#top .navbar-header a:active,
header#top .navbar-default li button:active,
header#top .navbar-header a:focus,
header#top .navbar-default li button:focus,
header#top .dropdown-menu li a:active,
header#top .dropdown-menu li button:active,
header#top .dropdown-menu li a:focus,
header#top .dropdown-menu li button:focus,
.did-picture-button.dropdown-toggle button:active,
.did-picture-button.dropdown-toggle button:focus,
.dropdown.pull-right button.did-picture-button:active,
.dropdown.pull-right button.did-picture-button:focus,
.did-secondary-text-color button:active,
.did-secondary-text-color button:focus,
a:active,
a:focus,
button:focus,
button:active,
button.close:focus,
button.close:active,
.form-control:focus,
.form-control:active,
input:focus,
input:active,
select:focus,
select:active,
textarea:focus,
textarea:active,
div[role="link"]:focus,
div[role="link"]:active,
span[role="link"]:focus,
span[role="link"]:active {
  outline: 4px auto !important;
  text-decoration: none;
}

.resource-box-info a:hover,
.back-button a:hover,
.dashboard-box a:hover {
  text-decoration: none !important;
}

@media (min-width: 600px) {
  .form-horizontal .control-label {
    text-align: left !important;
    font-weight: 100;
  }
}

.profile-picture .default-avatar {
  width: 140px;
  height: 140px;
  background-size: contain;
}

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

.create-private-group-section {
  text-align: center;
  font-size: 30px;
  padding: 50px !important;
}

.create-private-group-section p {
  margin-top: 40px;
}

.large-info {
  text-align: center;
  font-size: 30px;
  padding: 50px !important;
}

.large-info .di,
.large-info .di:hover {
  font-size: 85px;
}

.large-info .li-text {
  margin-top: 40px;
}

.large-info .li-description {
  font-size: 22px;
}

/*background fix for android <= 5*/
.bgWrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  display: none;
  z-index: -1;
}

.bgwidth {
  width: 100%;
}

.bgheight {
  height: 100%;
}

.section-header-summary.pull-right {
  text-align: right;
}

@media ( min-width: 1024px) {
  .section-header-summary {
    width: 100%
  }
}

header.table.section-header-summary {
  float: right !important;
}

header.table.section-header.light-color {
  position: relative !important;
}

header.table.section-header-title {
  width: 100% !important;
  position: absolute !important;
  left: 70px !important;
  padding-right: 400px !important;
}

header.table {
  margin-bottom: 0;
}

section.wrapper {
  background: #ffffff;
  padding-bottom: 20px;
}

.dropdown-menu.sort-menu {
  top: 58px;
  white-space: nowrap;
  padding: 10px;
}

.dropdown-menu.sort-menu .header {
  border-bottom: solid 1px;
  padding: 0 5px 5px 5px;
  font-weight: bold;
}

.dropdown-menu.sort-menu li {
  display: block;
}

.dropdown-menu.sort-menu li a {
  line-height: 40px;
  position: relative;
  height: 40px;
  padding: 0 45px 0 5px;
  font-weight: 300;
}

.dropdown-menu.sort-menu li.selected a {
  font-weight: bold;
}

.dropdown-menu.sort-menu li a i,
.dropdown-menu.sort-menu li a:hover i {
  line-height: 40px;
  font-size: 40px;
  height: 40px;
  position: absolute;
  right: 0;
  top: 0;
  text-align: right;
}

.section-header .section-header-options ul.sort-menu {
  height: auto;
  padding: 10px;
}

.section-header .section-header-options ul.sort-menu li {
  display: block;
  text-align: left;
  width: 100%;
  height: auto;
  line-height: 2;
}

.mCSB_container {
  min-width: 100% !important;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.mCSB_container table * {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.result-header .section-header-summary {
  width: 500px;
}

.modal-body.modal-item-list {
  overflow-x: hidden !important;
  padding-left: 0;
  padding-right: 0;
}

table.modal-list {
  margin-left: -20px;
  margin-right: -20px;
  width: 600px;
}

table.modal-list.modal-list-clickable tr {
  cursor: pointer;
}

table.modal-list.modal-list-clickable tr:hover {
  background: #EEEEEE;
}

table.modal-list td {
  display: inline-block;
  line-height: 60px;
}

table.modal-list td.icon {
  width: 50px;
  font-size: 42px;
  border-right: 1px solid #e5e5e5;
  text-align: center;
}

table.modal-list td.title {
  width: 322px;
  padding: 0 10px;
}

table.modal-list td.counter {
  text-align: center;
  width: 50px;
}

table.modal-list td.date {
  border-left: 1px solid #e5e5e5;
  text-align: right;
  width: 156px;
}

.search-wide label {
  margin-right: 10px;
}

.search-wide form {
  text-align: right;
  margin-top: 10px
}

img.medium {
  max-width: 250px;
  max-height: 250px;
  width: auto;
  height: auto;
}

.form-group.submit {
  width: 52px;
  height: 47px;
  position: relative;
}

.form-group.submit button {
  position: absolute;
  right: 0;
}

.stats-table {
  padding: 10px 20px;
}

.loading {
  position: relative;
}

.loading:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  opacity: 0.8;
  z-index: 200;
  text-align: center;
}

.did-subtitle.smaller-title {
  font-size: 10px;
}

.customization-settings_bg-image-container {
  padding-top: 10px;
  max-width: 400px;
}

.customization-settings_bg-image-description {
  width: 100%;
  font-weight: 500;
  font-size: 12px;
  color: #909090;
  margin-top: 8px;
}

.customization-settings_bg-image-thumbnail {
  width: 200px;
  height: 150px;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.customization-settings_bg-image-container.defaultBG {
  background-size: cover;
  background-repeat: no-repeat;
}

.row-section {
  padding: 0 20px;
}

.row-section.top {
  padding-top: 20px;
}

.paper-view-layout.type-a .row-section .section-header .section-header-title,
.paper-view-layout.type-b .row-section .section-header .section-header-title {
  padding-left: 0;
}

.section-overview .section-header.light-color {
  overflow-y: hidden;
}

.light-color .did-tool-box:first-child a {
  text-align: left;
}

.info-tab {
  line-height: 1.2;
  margin-top: 12px;
}

.info-tab .row {
  margin-bottom: 12px;
}

.resourceLightboxMenu .dropdown {
  display: inline;

}

.resourceLightboxMenu .dropdown-menu {
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.resourceLightboxMenu .dropdown .popover {
  display: block;
  left: -442px;
  top: 2px;
}

.os-statistics .form-group-submit {
  display: inline-block;
  width: 170px;
  margin-left: 10px;
  position: relative;
  height: 40px;
}

.os-statistics .form-group-submit button {
  position: absolute;
  top: -6px;
  right: 0;
}

.scroll-x {
  overflow-x: scroll;
}

.scroll-x.for-table {
  min-width: 870px;
}

/*
    styles for alert cloud
*/
.alerter-injector {
  position: relative;
}

.alerter-container {
  left: calc(50% - 250px);
  position: fixed;
  top: 150px;
  width: 500px;
  z-index: 100;
}

.alerter {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  box-shadow: 5px 6px 3px rgba(0, 0, 0, 0.4);
  margin-bottom: 18px;
  padding: 8px 35px 8px 14px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
}

.alerter .fa {
  font-size: 20px;
  left: 12px;
  margin-right: 10px;
  position: absolute;
  top: 10px;
}

.alerter .fa-check {
  display: none;
}

.alerter.alert-success .fa-check {
  display: inline-block;
}

.alerter .icon_content {
  padding-left: 0;
}

.alerter.alert-success .outlet {
  padding-left: 30px;
}

.alert-heading {
  color: inherit;
}

.alerter .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 18px;
}

.alerter.alert-success {
  background-color: #b3edb4;
  color: #2b542c;
  border-color: #2b542c;
}

.alerter.alert-error {
  background-color: #eed5d6;
  color: #a94442;
  border: 1px solid #e5bfc6;
  font-size: 14px;
  padding: 13px 35px 13px 15px;
}

.alerter.alert-error .close {
  top: 1px;
}

/*
    styles for alert cloud - END
*/

/*
 checkbox like ios8 switcher
 */
input[type="checkbox"].ios8-switch {
  position: absolute;
  margin: 8px 0 0 16px;
}

input[type="checkbox"].ios8-switch + label {
  position: relative;
  padding: 23px 0 0 0;
  line-height: 2.0em;
}

input[type="checkbox"].ios8-switch + label:hover:after {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

input[type="checkbox"].ios8-switch:checked + label:after {
  margin-left: 23px;
}

input[type="checkbox"].ios8-switch:checked + label:before {
  background: #00aac8;
}

input[type="checkbox"].ios8-switch + label:before {
  content: "";
  position: absolute;
  display: block;
  left: -10px;
  top: 1px;
  width: 52px;
  border-radius: 4px;
  height: 30px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

input[type="checkbox"].ios8-switch + label:after {
  content: "";
  position: absolute;
  display: block;
  left: -5px;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

td.ios8-switch {
  padding-right: 40px !important;
  width: 80px;
}

td.ios8-switch.disabled input[type="checkbox"].ios8-switch + label:before {
  background: #d9d9d9;
}

/*
 checkbox like ios8 switcher - END
 */

/**
 nice looking did-checkbox
*/
label.did-checkbox {
  position: relative;
  padding-left: 30px;
}

.did-checkbox input[type="checkbox"] {
  opacity: 0;
  position: absolute;

}

.did-checkbox input[type="checkbox"] + span:before {
  background: url('../../../../../themes/basic/images/icon_unchecked.png') no-repeat;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  content: '';
  display: inline-block;
  position: absolute;
}

.did-checkbox input[type="checkbox"]:checked + span:before {
  background: url('../../../../../themes/basic/images/icon_checked.png') no-repeat;
}

/**
nice looking did-checkbox - END
*/

.paper-view-layout .resources-cointainer .resource-box-container .resource-box {
  border: 2px solid #f5f5f5;
}

.paper-view-layout .resources-cointainer .resource-box-container .resource-box.checked {
  background-color: rgba(255, 212, 85, 0.25);
  border: 2px solid #ffd455;
}

.paper-view-layout .resources-cointainer .resource-box-container .resource-box.disabled {
  background-color: rgba(186, 186, 186, 0.25);
  border: 2px solid #bfbfbf;
  opacity: 0.6;
}

.did-list-grid .did-list-item.checked {
  background-color: rgba(255, 212, 85, 0.25);
}

.did-list-grid .did-list-item.disabled {
  background-color: rgba(186, 186, 186, 0.25);
  opacity: 0.6;
}

.select-people button.btn.btn-link.did-checkbox.people-list-checkbox {
  content: "";
  display: block;
  border: 0;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  padding: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  text-decoration: none;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAA5SURBVHjaYmRYffw/AxUBEwOVAQuM8T/EgpESgxjXnPhPExeOGjhq4KiBowbSuTyElWeDzoUAAQYAcl0JEbPgBmAAAAAASUVORK5CYII=') no-repeat #ffffff;
}

.select-people button.btn.btn-link.did-checkbox.people-list-checkbox.checked {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEtSURBVHjaYmRYfZyBXMDEQAGgo2ZpTjY2JkZyNAdKC1110yfH5gQF0dUWqkDGr3//SdPsJMY3x1iJmZHx+99/pNksys661EwVqBPMZhFiYyFB8yJTZQkOVgj7wodv/KzMcCkWTNVafJyczExn338FsqPkRDwkBCDiE2+/KL708O9/HH4G6mnUkjnvojdBXwHIBcZKi7YsRKrv1vOCiw+QdaLYDHTPXjstY0FuINtGhNdVnB/oBEVudiB3+t2XQDsx3ciInLaBYQMMVT8pQSD7+NvPwCQhx8V+8PUn50PX0ezEohkCKjSk2nXkIOyn338Z7rn8+udvYpNnx41nWefvQ9hxp+/g0ok9tCGelONkBzp736tPeGKREU9+5mFh/vLnL5m5Cr/OAS0MAAIMAD8eXYzWa74qAAAAAElFTkSuQmCC') no-repeat;
}

.select-people .list-inline {
  margin: 0;
}

.select-people .alert-info {
  margin: 30px 0;
}

.select-people .did-scrollable {
  overflow: auto;
  max-height: 305px;
  min-height: 50px;
}

#school-add-students-selected {
  width: auto;
  margin: 0 -16px;
}

.select-people .nav-tabs li {
  cursor: pointer;
}

.select-people .nav-tabs .active {
  font-weight: bold;
}

.full-height {
  height: 100%;
  min-height: 100%;
}

.min-height-60 {
  min-height: 60px;
}

.nav-stacked > li {
  word-wrap: break-word;
}

.line-height-50 {
  line-height: 50px !important;
}

.font-size-14 {
  font-size: 14px !important;
}

.section-root .section-table-header {
  display: table;
  width: 100%;
}

.section-table-header .section-table-header-left-item {
  display: table-cell;
  vertical-align: middle;
}

.section-table-header .section-table-header-right-item {
  display: table-cell;
  vertical-align: middle;
  float: right;
}

.visually-hidden {
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.did-list-grid {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.product-resource .did-list-grid {
  table-layout: auto;
}

.did-list-grid .did-list-item {
  display: table-row;
}

.did-list-grid .did-row-group {
  display: table-row-group;
}

.did-list-grid .did-list-item *[class*="-box"] {
  display: table-cell;
  vertical-align: middle;
}

.did-tool-box {
  text-align: center;
  width: 60px;
  margin-right: -4px;
}

.did-tool-box.wide-tool-box {
  text-align: center;
  width: 120px;
  margin-right: -4px;
}

.did-tool-box > a, .did-tool-box > span {
  display: inline-block;
  padding: 1px;
  text-decoration: none;
  width: 58px;
}

.did-tool-box.wide-tool-box > a, .did-tool-box.wide-tool-box > span {
  display: inline-block;
  padding: 1px;
  text-decoration: none;
  width: 116px;
}

.did-tool-box i, .did-tool-box:hover i {
  line-height: 60px;
  width: 58px;
}

.did-tool-box .did-picture-button {
  min-width: 59px;
}

.did-player-box {
  text-align: center;
  width: 60px;
}

.did-list-item .did-tool-box .did-picture-button:hover i, .did-list-item .did-tool-box a:hover i {
  line-height: 60px;
}

.did-tool-box.wide-tool-box.did-result-table-header,
.did-tool-box.did-result-table-header,
.did-date-box.did-result-table-header {
  text-align: left;
  padding: 2px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: -4px;
  position: relative;
  line-height: 1;
}

.did-title-box.did-result-table-header,
.did-tool-box.wide-tool-box.did-result-table-header,
.did-tool-box.did-result-table-header,
.did-date-box.did-result-table-header {
  padding-bottom: 15px;
  font-weight: 400;
}

.did-tool-box.did-tool-box-progress {
  width: 95px;
}

.did-date-box {
  width: 102px;
  padding: 2px 10px;
  margin: -4px -4px -4px 0;
  white-space: nowrap;
  text-align: right;
  line-height: 60px;
}

.did-text-box {
  width: 220px;
  padding: 2px 10px;
  margin: -4px -4px -4px 0;
  overflow: hidden;
}

.did-status-box {
  width: 180px;
  padding: 2px 10px;
  margin: -4px -4px -4px 0;
  overflow: hidden;
}

@media (max-width: 1023px) {
  .did-text-box {
    width: 150px;
  }

  .did-status-box {
    width: 130px;
  }
}

@media (max-width: 767px) {
  .did-text-box {
    width: 130px;
  }

  .did-status-box {
    width: 110px;
  }
}

.did-title-box {
  padding: 2px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: -4px;
  position: relative;
}

.did-no-border {
  border: none !important;
}

.did-no-left-border {
  border-left: none !important;
}

.did-list-grid-rows-4 {
  max-height: 270px;
  overflow-y: auto;
}

.did-title,
.did-subtitle {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  float: left;
  clear: left;
  width: 100%;
}

.did-subtitle {
  font-size: 14px;
}

.did-title-box-md .did-title,
.did-title-box-md .did-subtitle {
  width: calc(100% - 100px);
  width: -webkit-calc(100% - 100px);
  width: -moz-calc(100% - 100px);
}

.did-title-box-lg .did-title,
.did-title-box-lg .did-subtitle {
  width: calc(100% - 35px);
  width: -webkit-calc(100% - 35px);
  width: -moz-calc(100% - 35px);
}

.did-summary {
  float: right;
}

.did-secondary-info {
  text-align: right;
}

.did-header-right-button {
  float: right;
  margin-right: 5px;
}

.did-header-right-button i {
  cursor: pointer;
}

.did-title-box.type-a .did-summary {
  -o-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%)
}

.did-title-box.type-a .did-summary.did-no-subtitle {
  -o-transform: none;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none
}

.did-title-box.type-a .did-title,
.did-title-box .did-title {
  font-size: 16px;
}

.did-title-box.type-a .did-subtitle {
  font-size: 14px;
}

.did-title-box.type-b {
  padding: 0 20px;
}

.did-title-box.type-c {
  padding: 0 16px 0 0;
}

.did-title-box.type-b .did-title {
  font-size: 18px;
  font-weight: 300;
  line-height: 60px;
}

.did-title-box.type-b .did-title.two-lines {
  font-size: 16px;
  font-weight: 300;
  line-height: 30px;
}

.did-list-item .did-tool-box .progress-chart {
  line-height: 60px;
  padding: 1px 6px;
}

.did-list-item .did-tool-box .progress-chart svg {
  vertical-align: middle;
}

.did-tool-box .dropdown-menu a {
  color: inherit;
}

.did-list-item .did-tool-box a[disabled],
.did-list-item .did-tool-box .btn.disabled,
.did-list-item .did-tool-box .btn[disabled],
.did-list-item .did-tool-box button[disabled],
.did-list-item .did-tool-box fieldset[disabled] .btn {
  opacity: .30;
  filter: alpha(opacity=30);
}

.did-show-grid .did-list-item *[class*="-box"] {
  border-top: 1px solid;
  border-left: 1px solid;
}

.did-tool-box.did-secondary-text-color.did-dropdown {
  border: none;
}

.did-show-grid .did-list-item:last-of-type *[class*="-box"] {
  border-bottom: 1px solid;
}

.did-show-grid .did-list-item:last-of-type *[class*="-box"] .did-tool-box {
  border: none;
}

.did-show-grid .did-list-item:last-of-type .did-list-item:not(:last-of-type) *[class*="-box"] {
  border-bottom: 0 none;
}

.did-show-grid .did-list-item *[class*="-box"]:first-child {
  border-left: 0 none;
}

.did-show-grid .did-list-item .did-tool-box.custom-box {
  border-top: 0;
  line-height: 60px;
}

.did-hide-bottom-grid *[class*="-box"] {
  border-bottom: 0 none !important;
}

.did-title-box i.arrow {
  width: auto;
  height: 0;
  font-size: 0;
  line-height: 0;
  position: absolute;
  z-index: 1029;
  left: 15px;
}

.did-title-box i.arrow-left:after {
  content: ' ';
  position: absolute;
  border: 20px solid transparent;
  background-color: transparent
}

.did-title-box i.arrow-left:after {
  left: -16px;
  top: 20px;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  border-left: 10px solid
}

/*============================Header style===========================*/
.items-overview .section-header .create-group-button .di {
  height: 60px;
  line-height: 60px;
  display: block;
}

.items-overview .section-header .create-group-button {
  vertical-align: middle;
}

.items-overview .picture-button {
  display: block;
  width: 60px;
  text-align: center;
  vertical-align: middle;
}

.did-tool-box.empty-tool-box {
  width: 0;
}

@media (max-width: 1023px) {
  .did-list-grid, .product .did-list-grid {
    display: table;
    table-layout: fixed;
    max-width: 100%;
    width: 100%;
  }
}

.did-loading-blend{
  background: url(../../../images/preloader_01.gif) no-repeat center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99999999;
}

.did-loading-blend .inner{
  background-color: rgba(220, 220, 220, 0.5);
  width: 100%;
  height: 100%;
}

.registration-label {
  line-height: 55px;
  font-weight: bold;
  font-size: 20px;
}

.registration-label a {
  text-decoration: underline;
}

.word-nowrap {
  white-space: nowrap;
}

.overflow-hidden {
  overflow: hidden;
}

.import-files-modal .drop-box {
  position: relative;
  border: 3px dashed #DDD;
  text-align: center;
  padding: 25px;
  margin: 10px;
}

.import-files-modal .drop-box input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}

@media ( min-width: 1024px) {
  .section-header-summary {
    width: 100%
  }
}

.modal-body.modal-item-list {
  overflow: auto;
  padding: 0 20px 1px 20px;
}

.modal-alert {
  height: 100px;
}

.list-item {
  border-top: 1px solid;
  margin: 0;
  cursor: pointer;
}

.list-item:first-child {
  border-top: 0 none;
}

.list-item dd, .list-item dt {
  display: inline-block;
  height: 59px;
  font-weight: 300;
}

.list-item dt {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-item .title {
  position: relative;
  padding: 10px;
  float: left;
  width: calc(100% - 260px);
  width: -webkit-calc(100% - 260px);
  width: -moz-calc(100% - 260px);
}

.list-item .title span {
  line-height: 39px;
  padding-left: 10px;
}

.list-item .icon {
  width: 50px;
  font-size: 42px;
  border-right: 1px solid;
  float: left;
  overflow: hidden;
  position: relative;
  top: -10px;
}

.list-item .counter {
  position: relative;
  padding: 17px;
  float: right;
  font-style: italic;
}

.list-item .date {
  position: relative;
  padding: 17px;
  float: right;
  border-left: 1px solid;
  width: 190px;
  text-align: right;
}

.multi-data-list {
  border: solid 1px;
  padding-bottom: 5px;
  padding-left: 5px;
}

.multi-data-list button {
  margin-top: 5px;
  margin-right: 5px;
}

.multi-data-list input {
  margin-top: 5px;
  margin-right: 5px;
  border: none;
  background-color: transparent;
  height: 30px;

}

.dropdown-menu.multi-data-list-dropdown {
  top: -15px;
}

.dropdown-menu.multi-data-list-dropdown > li > a {
  width: 100%;
  text-align: left;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-menu.multi-data-list-dropdown > li > a > span {
  margin: 3px 20px;
}

tags-input .tags {
  border-radius: 0;
}

tags-input .tags .tag-item,
tags-input .tags .input,
tags-input .autocomplete .suggestion-item,
tags-input .autocomplete .suggestion-item em {
  font: inherit;
  color: inherit;
}

tags-input .autocomplete .suggestion-item em {
  font-weight: bold;
}

tags-input.ng-invalid .tags.focused {
  border: 1px solid;
}

.did-tags-hidden .tags .tag-list {
  display: none;
  visibility: hidden;
}

tags-input .tags .tag-item {
  border: 1px solid;
  border-radius: 0;
}

tags-input .tags .tag-item .remove-button {
  color: inherit;
}

ti-autocomplete-match {
  display: table;
  table-layout: fixed;
  width: 100%;
}

ti-autocomplete-match ng-include {
  display: table-row;
}

ti-autocomplete-match ng-include *[class*="-box"] {
  display: table-cell;
}
.paper-view-layout.type-a,
.paper-view-layout.type-b {
  background-color: transparent
}

.paper-view-layout.type-a .section-overview .section-header {
  background-color: transparent
}

.paper-view-layout.type-a header .section-header {
  line-height: 88px;
}

.paper-view-layout.type-a header .section-header ul, .paper-view-layout.type-a header .section-header li {
  height: auto;
}

.paper-view-layout.type-a .section-header .section-header-title {
  padding-left: 8px
}

.paper-view-layout.type-a .section-header .section-header-title.list-title {
  padding-left: 16px
}

.paper-view-layout.type-a .section-header .section-header-title dl {
  margin: 5px 0;
}

.paper-view-layout.type-a .section-header .section-header-title dl dt input {
  width: 100%;
  border: none;
  background: none;
  text-overflow: ellipsis;
  margin-top: 1px;
  padding-left: 5px;
}

.paper-view-layout.type-a .section-header .section-header-title dl dd {
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.paper-view-layout.type-a header .section-header .section-header-title dl dt {
  font-size: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.paper-view-layout.type-a header .section-header .section-header-title.list-title {
  width: calc(100% - 195px);
}

.paper-view-layout.type-a header .section-header .section-header-title.wide {
  width: calc(100% - 125px);
}

.paper-view-layout.type-a header .section-header .section-header-title {
  width: calc(100% - 495px);
}

.paper-view-layout.type-a header .result-header.section-header .section-header-title {
  width: calc(100% - 595px);
}

@media ( max-width: 960px) {
  .paper-view-layout.type-a header .section-header .section-header-title {
    width: 65%
  }

  .paper-view-layout.type-a header .result-header.section-header .section-header-title {
    width: calc(100% - 60px);
  }
}

@media ( max-width: 1100px) {
  .paper-view-layout.type-a header .result-header.section-header .section-header-title {
    width: calc(100% - 60px);
  }

  .paper-view-layout.type-a .result-header.section-header .section-header-summary {
    float: right !important;
    padding: 0 28px 0 0 !important;
    width: 100%;
  }
}

.paper-view-layout.type-a .section-header.light-color .section-header-options .di.icon-back {
  padding-left: 13px;
}

.paper-view-layout.type-a .title-with-label .section-header {
  padding-left: 24px;
  margin-right: 16px !important;
  margin-left: 16px !important;
}

.paper-view-layout.type-a .title-with-label .section-header h1,
.paper-view-layout.type-a .title-with-label .section-header h2,
.paper-view-layout.type-a .title-with-label .section-header h3,
.paper-view-layout.type-a .title-with-label .section-header p {
  line-height: 3;
}

.paper-view-layout.type-a .title-with-label .section-header h1 {
  font-size: 24px;
  margin-bottom: 0
}

.paper-view-layout.type-a .title-with-label .section-header h2 {
  font-size: 18px;
  margin-bottom: 0
}

.paper-view-layout.type-a .title-with-label .section-header p {
  margin-bottom: 0;
  margin-top: 16px
}

.paper-view-layout.type-a .title-with-label .section-header-options {
  padding-right: 24px
}

.paper-view-layout.type-a .title-with-label .section-header-options.options-left {
  padding-right: 0;
}

.paper-view-layout.type-a .title-with-label .section-header-options.options-left li.option-back {
  width: 46px;
}

.paper-view-layout.type-a .section-header-summary {
  display: inline-block;
  padding-right: 24px
}

.paper-view-layout.type-a .section-header-summary dl {
  display: inline-block;
  margin: 0;
  text-align: left;
  vertical-align: middle;
}

.paper-view-layout.type-a .section-header-summary i, .paper-view-layout.type-a .section-header-summary svg {
  vertical-align: middle;
  margin-left: 40px;
  margin-right: 5px;
}

@media ( max-width: 1330px) {
  .paper-view-layout.type-a .section-header-summary {
    float: none !important;
    padding: 0 0 0 28px;
  }
}

.paper-view-layout.type-a .section-header .section-header-title h1,
.paper-view-layout.type-b .items-overview .section-header .section-header-title h1 {
  font-size: 22px;
  font-weight: 700;
}

.paper-view-layout.type-a .section-header .section-header-title h2,
.paper-view-layout.type-b .items-overview .section-header .section-header-title h2 {
  font-size: 20px;
  font-weight: 300;
}

.paper-view-layout.type-a .section-overview {
  clear: both;
}

.paper-view-layout.type-a .section-filter {
  padding: 20px 20px 0 20px;
  clear: both;
}

.paper-view-layout.type-b .items-overview .section-header {
  background-color: transparent;
  position: relative;
  min-height: 62px;
}

.paper-view-layout.type-b .items-overview .section-header .control-group {
  line-height: 60px;
  margin: 0 10px;
}

.paper-view-layout.type-b .items-overview .section-header .control-group select,
.paper-view-layout.type-b .items-overview .section-header .control-group label {
  display: inline-block;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .paper-view-layout.type-b .items-overview .section-header {
    overflow: hidden;
  }

  .paper-view-layout.type-b .items-overview .section-header .control-group {
    min-width: 100%;
    text-align: right;
    white-space: nowrap;
  }

  .paper-view-layout.type-b .items-overview .section-header .control-group .create-group-button {
    display: inline-block;
  }

  .paper-view-layout.type-b .items-overview .section-header .section-header-title {
    position: absolute;
  }
}

.paper-view-layout.type-b .items-overview .section-header .control-group label {
  padding: 0 5px;
}

.paper-view-layout.type-b .items-overview .section-header .control-group:after {
  content: '';
  visibility: hidden;
  display: block;
  clear: both;
}

.paper-view-layout.type-b .items-overview .section-header .control-group {
  height: 60px;
  width: auto;
}

.paper-view-layout a[disabled],
.paper-view-layout .btn.disabled,
.paper-view-layout button[disabled],
.paper-view-layout .btn[disabled],
.paper-view-layout fieldset[disabled] .btn {
  opacity: .15;
  filter: alpha(opacity=15);
}

.paper-view-layout.type-a .section-header .section-header-title .btn,
.paper-view-layout.type-a .section-overview label .btn,
.paper-view-layout.type-a .section-overview h2 .btn {
  margin-left: 20px;
  padding-right: 15px;
  padding-left: 15px;
}

.section-overview label {
  font-size: 18px;
  font-weight: 400;
}

.paper-view-layout .section-toolbox .did-tool-box {
  display: inline-block;
}

.paper-view-layout .section-toolbox.type-a {
  text-align: right;
  padding: 0 15px;
}

.paper-view-layout.type-a .section-overview .form-group h2 {
  font-weight: 400;
  font-size: 16px;
  line-height: 60px;
  margin: 0 0 6px 0;
  padding: 0;
}

.paper-view-layout.type-a .section-overview .form-group h2 button {
  margin-left: 20px;
}

.paper-view-layout .section-overview.section-overview-notitle {
  padding-top: 20px;
}

.paper-view-layout .section-header .did-list-item,
.paper-view-layout header .did-list-item {
  border: 0 none;
}

.section-overview .form-group:last-child {
  margin-bottom: 0;
  padding-bottom: 20px;
}

.paper-view-layout .form-group img {
  max-width: 200px;
  max-height: 200px;
  margin: 0 20px 0 20px;
}

button.profile-picture {
  background: none;
  border: none;
  display: block;
  margin: auto;
  width: 100%;
}

.my-subjects .col-margin {
  margin-top: 5px;
  margin-bottom: 5px;
}

.modal-dialog .modal-content .modal-body p {
  margin: auto;
  display: block;
}

.modal-dialog .modal-content .modal-header button {
  font-size: 40px;
  padding: 1px 6px;
}

@media (max-width: 1200px) {

  .did-list-grid .did-text-box {
    width: 115px;
  }

}

@media (max-width: 768px) {

  .name-container {
    display: none;
  }

  header#top .user-logged {
    width: auto;
  }

  header#top.admin-top .user-logged {
    width: 64px;
  }

  header#top .user-logged h5 {
    display: none;
  }

  header#top.admin-top .user-logged h5 {
    display: block;
  }

  header#top .user-logged .logged-user-nav-btn .logged-user-caret-container {
    display: none;
  }

  header#top.admin-top .user-logged .logged-user-nav-btn .logged-user-caret-container {
    display: none;
  }

  header#top .dropdown-menu li {
    width: 100%;
  }

  header#top .user-logged, header#top .user-logged .logged-user-nav-btn {
    width: 64px;
  }

  header#top .logged-user-name-container {
    display: none !important;
  }

  header#top.admin-top .logged-user-name-container {
    display: block !important;
  }

  header#top.admin-top .user-logged .logged-user-nav-btn {
    width: 64px;
  }

  .form-search .logged {
    right: 642px;
  }

  .form-search-logged {
    position: absolute;
    right: 575px !important;
  }

  #form-search {
    width: 400px;
  }

  .column-right.wide {
    display: table;
    max-width: 100%;
  }

  .table.search-result {
    max-width: 400px;
  }

  .task-overview .row.schedule-wrapper .read-only.task-schedule {
    width: 100%;
  }

}

@media (max-width: 992px) {

  .result .paper-view-layout.type-a .section-header-summary i, .result .paper-view-layout.type-a .section-header-summary svg {
    margin-left: 0;
  }

  .scroll-for-form, .scroll-x-wrapper {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .overflow-form {
    min-width: 588px;
  }

  .overflow-languages {
    min-width: 540px;
  }

}

.center {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.registration-form {
  width: 600px;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 40px;
}

.registration-form .button-row {
  width: 100%;
  text-align: center;
}

.registration-form button {
  height: 55px;
  width: 100%;
  font-size: 30px;
  padding-bottom: 7px;
  margin-top: 15px;
  margin-bottom: 10px;
  border: none;
  border-radius: 4px;
}

.registration-form select {
  height: 35px;
  border: solid 1px;
}

.registration-form h1 {
  width: 100%;
  font-size: 38px;
  text-align: center;
  padding-bottom: 15px;
}

.registration-form .star-text {
  font-size: 12px;
}

.form-row {
  padding-top: 5px;
  padding-bottom: 5px;
}

.authorize-background {
  background-attachment: fixed !important;
  background-size: cover !important;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -ms-background-size: cover !important;
  -o-background-size: cover !important;
}

.registration-form a {
  text-decoration: underline !important;
}

.registration-form a {
  text-decoration: underline !important;
}

.registration-form.resourceLightboxPreloader {
  width: 600px !important;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 40px;
  height: 50px;
}

/* Styles for main header */

header .did-title {
  font-size: 24px;
  font-weight: bold;
}

header .did-inline-editor {
  margin-top: 6px;
}

header .did-inline-editor input {
  width: 100%;
}

/* Styles for sections in content*/
.did-section-header.margin-bottom {
  margin-bottom: 8px;
}

.did-section-header .did-title-box {
  padding: 0;
}

.did-section-header .did-title h1 {
  font-size: 22px;
  font-weight: 400;
  line-height: 60px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.did-section-header .did-filter-box,
header .did-filter-box,
.section-filter .did-filter-box {
  border-left: 1px solid;
  text-align: center;
  width: 100px;
  padding: 0 5px;
}

.title-editor-hide {
  cursor: pointer;
  border: none;
  background-color: transparent !important;
}

.row.did-grid-header {
  font-weight: bold;
  margin-bottom: 10px;
}

.row.did-grid-item {
  padding: 10px 0;
  border-top: 1px solid;
  font-size: 14px;
}

.row.did-grid-item.word-wrap {
  word-wrap: break-word;
}

.row.did-grid-item input {
  font-size: 14px;
}

.row .did-col-label {
  padding-top: 7px;
}

.row input[type="checkbox"] {
  margin-top: 12px;
}

.row .did-col-label.did-col-key {
  word-break: break-all;
}

.imported-resources-grid .did-grid-header {
  font-weight: 400;
  font-size: 13px;
}

.imported-resources-grid .did-show-grid .did-grid-header *[class*="-box"] {
  border: none;
  padding-bottom: 10px;
}

.static-page {
  font-size: 13px;
}

.static-page h1,
.static-page h2,
.static-page h3,
.static-page h4,
.static-page h5,
.static-page h6 {
  color: #484f5e;
  margin: 20px 0;
  padding: 0;
  line-height: 1.1;
  font-weight: 400;
}

.static-page h1,
.static-page h2,
.static-page h3 {
  margin: 35px 0 20px 0;
}

.static-page h1.entry-title,
.static-page h1.page-title {
  line-height: 30px;
}

.static-page h2 {
  font-size: 24px;
}

.static-page h3 {
  font-size: 20px;
}

.static-page h4 {
  font-size: 18px;
}

.static-page p {
  padding: 0;
  margin: 5px 0 20px 0;
}

.static-page ul,
.static-page ol {
  margin: 0 0 15px 15px;
}

.static-page ul {
  list-style: disc;
  padding: 0;
}

.static-page a,
.static-page scroll-to-on-click {
  transition: all 0.1s ease-in-out;
  text-decoration: none;
  outline: none;
  color: #34c6f6;
  cursor: pointer;
}

.static-page a:hover,
.static-page scroll-to-on-click:hover {
  text-decoration: none;
  outline: none;
  color: #ff6565;
}

.static-page section {
  border: 1px solid #2F528F;
  border-radius: 5px;
  padding: 20px;
}

.static-page section h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 20px 0;
}

.static-page-logo {
  height: 50px;
  width: auto;
  margin-right: 10px;
}

.static-page-rightSize {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.static-page-rightSize h3 {
  margin: 0;
}

.entry-content {
  font-size: 15px;
}

.steps-modal {
}

.steps-modal-header {
  padding: 5px 20px;
}

.steps-modal-header .icon-back {
  line-height: 40px;
  font-size: 26px;
  margin-right: 12px;
}

.steps-modal-header > .close {
  font-weight: 100;
}

.steps-modal-header-title {
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #868686;
}

.steps-modal-body {
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  text-align: left;
}

.steps-modal-footer {
}

.steps-modal-label {
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #868686;
  line-height: 22px;
  margin: 0 0 25px;
}

/* Horizontal divider */
.steps-modal-divider {
  width: 100%;
  height: 30px;
  padding: 0 25%;
  margin: 20px 0;
  text-align: center;
}

.steps-modal-divider > hr {
  width: 40%;
  height: 15px;
  padding: 0;
  margin: 15px 0 0;
  border-top: 1px solid #ccc;
}

.steps-modal-divider-text {
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-size: 12px;
  color: #868686;
  text-align: center;
  line-height: 30px;
}

/* Local file upload button */
.local-upload {
  position: relative;
  width: 100%;
  height: 120px;
}

.local-upload-area {
  position: relative;
  display: flex;
  color: #868686;
  border: 2px dashed #868686;
  border-radius: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-repeat: no-repeat;
  background-position: center 16px;
  background-size: 60px 60px;
  background-image: url('../../../../../images/cloud/u310.png');
}

input[type="file"].local-upload-input {
  width: 100%;
  height: 100%;
}

.local-upload-label {
  position: absolute;
  bottom: 10px;
  width: 100%;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #797979;
  text-align: center;
  line-height: 20px;
}

.steps-modal-body .form-group + .form-group {
  margin-bottom: 25px;
}

.steps-modal-body .control-label {
  font-weight: 700;
  font-style: normal;
  font-size: 12px;
  color: #5E5E5E;
  margin-bottom: 10px;
}

.steps-modal-body .form-control {
  font-weight: 400;
  font-style: normal;
  text-align: left;
  font-size: 13px;
}

.steps-modal-body textarea.form-control {
  min-height: 100px;
}

.modal-dialog .modal-content .steps-modal-body span {
  padding: 0;
}

.steps-modal-footer {
  padding: 12px 20px;
}

.steps-modal-button {
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #FFF;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 3px;
  border: 1px solid transparent;
}

.steps-modal-summary {
  margin: 0;
}

.steps-modal-summary-info {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  text-align: left;
}

.steps-modal-image {
  display: block;
  width: 90px;
  height: 90px;
  margin: 20px auto 10px;
  outline: 2px dashed #444;
}

.steps-modal-file-description {
  margin-bottom: 15px;
}

.steps-modal-file-name {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  text-align: center;
}

.steps-modal-file-size {
  font-size: 13px;
  line-height: 22px;
  font-weight: 100;
  text-align: center;
}

.steps-modal-space-description {
}

.steps-modal-space-info {
  font-size: 13px;
  line-height: 22px;
  font-weight: 100;
  text-align: center;
  opacity: 0.75;
}

.steps-modal-uploading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 250px;
}

.steps-modal-uploading-hourglass {
  display: flex;
  width: 90px;
  height: 90px;
  margin-bottom: 25px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url('../../../../../images/preloader_03.gif');
}

.steps-modal-uploading-text {
  display: flex;
  font-size: 14px;
  color: #868686;
}

.steps-modal-summary-image {
  width: 100%;
  height: 75px;
  margin-top: 30px;
  margin-bottom: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url('../../../../../images/cloud/u291.png');
}

.has-error .steps-modal-summary-image {
  background-image: url('../../../../../images/cloud/u287.png');
}

.steps-modal .has-error {
  color: #c00;
}

/* GoogleDrive picker modal override
   (original z-index=1001 caused picker to hide beneath Didactus modal)
*/
.picker-dialog {
  z-index: 2001 !important;
}

.did-list-responsive-grid {
  border: 1px solid #dcdcdc;
  border-width: 0 0 1px;
}

.did-list-responsive-grid table {
  display: block;
}

.did-list-responsive-grid table tr:nth-of-type(odd) {

}

.did-list-responsive-grid table td,
.did-list-responsive-grid table th {
  padding: 6px;
  border: 1px solid #dcdcdc;
  border-bottom: 0;
  text-align: left;
}

.did-list-responsive-grid table th {
  border: 0;
}

.did-list-responsive-grid table td:first-child,
.did-list-responsive-grid table td:last-child {
  border-width: 1px 0;
}

.did-list-responsive-grid table td.col-title-type {
  width: 100%;
}

.did-list-responsive-grid table td.col-date-type {
  min-width: 100px;
}

.did-list-responsive-grid table .header-title {
  display: none;
}

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
  .did-list-responsive-grid table table,
  .did-list-responsive-grid table thead,
  .did-list-responsive-grid table tbody,
  .did-list-responsive-grid table th,
  .did-list-responsive-grid table td,
  .did-list-responsive-grid table tr {
    display: block;
  }

  .did-list-responsive-grid table {
    margin-bottom: 12px;
    border-bottom: 1px solid #dcdcdc;
  }

  .did-list-responsive-grid table:last-child {
    margin-bottom: 0;
  }

  .did-list-responsive-grid table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .did-list-responsive-grid table tr {
    border: 1px solid #ccc;
    border-width: 0 1px;
  }

  .did-list-responsive-grid table td {
    position: relative;
    text-align: center;
    border-width: 1px 0;
  }

  .did-list-responsive-grid table td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }

  .did-list-responsive-grid table .header-title {
    display: block;
    font-weight: bold;
  }

  .did-list-responsive-grid .did-date-box {
    padding: 0;
    margin: 0;
    line-height: 32px !important;
  }

  tbody.tbody-multiple-type {
    margin-bottom: 12px;
    border-bottom: 1px solid #dcdcdc;
  }

  tbody.tbody-multiple-type:last-child {
    margin-bottom: 0;
    border-bottom: 0;
  }

  .did-list-responsive-grid .did-title,
  .did-list-responsive-grid .did-subtitle {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    float: left;
    clear: left;
    width: 100%;
  }
}

.did-list-responsive-grid .did-date-box {
  width: 100%;
  text-align: center;
}


body.tablet .modal.fade {
  position: absolute;
}

body.tablet .column-left {
  float: left;
  height: 100%;
}

body.tablet .column-right {
  position: absolute;
  padding-top: 0;
  top: 76px;
  width: 100%;
  left: 0;
}

body.tablet header#top {
  position: fixed;
}

body.tablet .resource-box .resource-box-info ul li button, body.tablet .did-list-item button {
  padding: 0;
}

.did-text.type-a {
  font-weight: bold;
  white-space: nowrap;
}
.resources-cointainer .resource-box-title {
  font-weight: 300;
}

.resources-cointainer:not(.horizontal) .collection-box-container .resource-box-title,
.resources-cointainer:not(.horizontal) .resource-box-container .resource-box-title {
  position: relative;
  width: 100%;
  height: 60px;
  text-align: center;
}

.resources-cointainer:not(.horizontal) .collection-box-container .resource-box-title .title,
.resources-cointainer:not(.horizontal) .collection-box-container .resource-box-title .counter,
.resources-cointainer:not(.horizontal) .collection-box-container .resource-box-title .type-icon,
.resources-cointainer:not(.horizontal) .resource-box-container .resource-box-title .title,
.resources-cointainer:not(.horizontal) .resource-box-container .resource-box-title .counter,
.resources-cointainer:not(.horizontal) .resource-box-container .resource-box-title .type-icon {
  height: 60px;
  line-height: 60px;
  overflow: hidden;
}

.resources-cointainer:not(.horizontal) .collection-box-container .resource-box-title .type-icon,
.resources-cointainer:not(.horizontal) .resource-box-container .resource-box-title .type-icon {
  width: 42px;
  float: left;
}

.resources-cointainer:not(.horizontal) .collection-box-container .resource-box-title .type-icon i,
.resources-cointainer:not(.horizontal) .resource-box-container .resource-box-title .type-icon i {
  line-height: 42px;
  vertical-align: middle;
  display: inline-block;
}

.resources-cointainer:not(.horizontal) .collection-box-container .resource-box-title .type-icon i {
  font-size: 42px;
}

.resources-cointainer:not(.horizontal) .collection-box-container .resource-box-title .title,
.resources-cointainer:not(.horizontal) .resource-box-container .resource-box-title .title {
  text-align: left;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.resources-cointainer:not(.horizontal) .student-box-container .resource-box-title .title a,
.resources-cointainer:not(.horizontal) .collection-box-container .resource-box-title .title a,
.resources-cointainer:not(.horizontal) .resource-box-container .resource-box-title .title a,
.resources-cointainer:not(.horizontal) .student-box-container .resource-box-title .title span,
.resources-cointainer:not(.horizontal) .collection-box-container .resource-box-title .title span,
.resources-cointainer:not(.horizontal) .resource-box-container .resource-box-title .title span {
  line-height: 19px;
  font-size: 16px;
  vertical-align: middle;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  max-width: 100%;
}

.resources-cointainer:not(.horizontal) .collection-box-container .resource-box-title .counter,
.resources-cointainer:not(.horizontal) .resource-box-container .resource-box-title .counter {
  float: right;
  width: auto;
}

.resources-cointainer:not(.horizontal) .collection-box-container .resource-box-title .counter span,
.resources-cointainer:not(.horizontal) .resource-box-container .resource-box-title .counter span {
  font-size: 16px;
  line-height: 18px;
  vertical-align: middle;
  display: inline-block;
}

/*===================================Horizontal view========================================*/

.resources-cointainer.horizontal .resource-box-container .resource-box-title {
  width: calc(100% - 385px);
  width: -moz-calc(100% - 385px);
}

.resources-cointainer.horizontal .collection-box-container .resource-box-title {
  width: calc(100% - 165px);
  width: -moz-calc(100% - 165px);
}

.resources-cointainer.horizontal .resource-box-container .resource-box-title .type-icon,
.resources-cointainer.horizontal .resource-box-container .resource-box-title .counter,
.resources-cointainer.horizontal .resource-box-container .resource-box-title .title,
.resources-cointainer.horizontal .collection-box-container .resource-box-title .type-icon,
.resources-cointainer.horizontal .collection-box-container .resource-box-title .counter,
.resources-cointainer.horizontal .collection-box-container .resource-box-title .title {
  height: 100%;
  line-height: 60px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resources-cointainer.horizontal .resource-box-container .resource-box-title .type-icon,
.resources-cointainer.horizontal .collection-box-container .resource-box-title .type-icon {
  text-align: center;
  width: 60px;
  line-height: 60px;
  float: left;
  border-right: 1px solid;
}

.resources-cointainer.horizontal .resource-box-container .resource-box-title .type-icon i {
  vertical-align: middle;
}

.resources-cointainer.horizontal .collection-box-container .resource-box-title .type-icon i {
  line-height: 42px;
  font-size: 42px;
  vertical-align: middle;
}

.resources-cointainer.horizontal .collection-box-container .resource-box-title .counter {
  float: right;
  width: auto;
  margin-left: 10px;
  margin-right: 40px;
  font-style: italic;
}

.resources-cointainer.horizontal .student-box-container .resource-box-title .title span,
.resources-cointainer.horizontal .student-box-container .resource-box-title .title a,
.resources-cointainer.horizontal .resource-box-container .resource-box-title .title a,
.resources-cointainer.horizontal .collection-box-container .resource-box-title .title a {
  padding-left: 20px;
  display: inline-block;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

/*===================================Task's students list container========================================*/

.resources-cointainer.task-students-list-container.horizontal .resource-box-container .resource-box-title {
  width: calc(100% - 170px);
  width: -moz-calc(100% - 170px);
}

.avatar-container {
  position: relative;
  height: 200px;
}

.avatar-container input[type="checkbox"] {
  position: absolute;
  top: 12%;
  left: 8%;
  padding: 0 !important;
  margin: 0 !important;
  visibility: visible;
}

.avatar-container:hover input[type="checkbox"] {
  visibility: visible;
}

.avatar-container.avatar-checked input[type="checkbox"] {
  visibility: visible;
}


.row [class*="col-xs"].col-xs-bottom-buffer {
  padding-bottom: 8px;
}

.row [class*="col-xs"].col-xs-top-buffer {
  padding-top: 8px;
}

.row [class*="col-xs"].col-xs-vert-buffer {
  padding-top: 8px;
  padding-bottom: 8px;
}

.row [class*="col-xs"].col-xs-horiz-buffer {
  padding-left: 8px;
  padding-right: 8px;
}

.row [class*="col-xs"].col-xs-left-buffer {
  padding-left: 8px;
}

.row [class*="col-xs"].col-xs-right-buffer {
  padding-right: 8px;
}

.row [class*="col-"] > img.col-image-fit {
  width: 100%;
}

.row.row-vert-buffer {
  padding: 8px 0;
}

.row.row-vert-buffer {
  padding-bottom: 8px;
}

.row.row-top-buffer {
  padding-top: 8px;
}

.fulfill-container {
  position: relative !important;

}

.fulfill-container > .pull-right {
  float: right;
}

.fulfill-container > .pull-left {
  float: left;
}

.fulfill-container > .centered {
  float: none !important;
  overflow: hidden;
  position: relative;
}

.fulfill-container > .centered > .content {
  width: 100% !important;
  position: relative !important;
  display: inline-block !important;
}

.fulfill-container > .centered > .content .full-width {
  width: 100% !important;
}

.pull-down {
  position: absolute;
  bottom: 0;
}

.row.pull-down {
  right: 0;
  left: 0;
}

.relative {
  position: relative;
}

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

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

.text-align-center {
  text-align: center;
}

.padding-10 {
  padding: 10px;
}

.padding-left-10 {
  padding-left: 10px;
}

.padding-right-10 {
  padding-right: 10px;
}

.padding-top-10 {
  padding-top: 10px;
}

.padding-bottom-10px {
  padding-bottom: 10px;
}

:host >>> view-header {
  margin-bottom: 20px;
}

:host >>> .sidebar-menu-wrapper {
  padding: 9px 0 9px 0;
}

:host .importView-wrapper {
  display: flex;
}

:host import-accounts-job-list {
  position: relative;
  margin-left: 20px;
}

:host >>> view-header {
  margin-bottom: 20px;
}

:host >>> .sidebar-menu-wrapper {
  padding: 9px 0 9px 0;
}

:host .importAccountDetailsView-wrapper {
  display: flex;
}

:host import-account-list {
  position: relative;
  margin-left: 20px;
}

:host >>> view-header {
  margin-bottom: 20px;
}

.importClasslinkView-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

:host >>> .sidebar-menu-wrapper {
  padding: 9px 0 9px 0;
}

:host import-classlink-configuration-list {
  position: relative;
  margin-left: 20px;
  min-width: 715px;
}

:host view-header-button {
  width: 192px;
}

:host >>> view-header {
  margin-bottom: 20px;
}

:host >>> .sidebar-menu-wrapper {
  padding: 9px 0 9px 0;
}

:host .importView-wrapper {
  display: flex;
}

:host import-clever-configuration-list {
  position: relative;
  margin-left: 20px;
  min-width: 715px;
}
:host >>> view-header {
  margin-bottom: 20px;
}

:host >>> .sidebar-menu-wrapper {
  padding: 9px 0 9px 0;
}

:host .importView-wrapper {
  display: flex;
}

:host .importView-listContainer {
  position: relative;
  margin-left: 20px;
}

:host >>> view-header {
  margin-bottom: 20px;
}

.importEdlinkView-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

:host import-edlink-configuration-list {
  position: relative;
  margin-left: 20px;
  min-width: 715px;
}

:host >>> .sidebar-menu-wrapper {
  padding: 9px 0 9px 0;
}

:host .importView-wrapper {
  display: flex;
}

:host import-ed-link-job-list{
  position: relative;
  margin-left: 20px;
}

:host >>> view-header {
  margin-bottom: 20px;
}

:host >>> .sidebar-menu-wrapper {
  padding: 9px 0 9px 0;
}

:host .importView-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

:host import-one-roster-configuration-list {
  position: relative;
  margin-left: 20px;
  min-width: 715px;
}

:host view-header-button {
  width: 192px;
}

.completedResourcesView-wrapper{
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}
.sidebar-menu-wrapper {
  display: flex;
  flex-direction: column;
  width: 250px;
}

:host search-input {
  display: block;
  width: 300px;
  max-width: 30em;
  background: white;
  border-radius: 3px;
}

:host resource-list {
  margin-left: 20px;
  width: 100%;
  min-width: 0;
}

:host resource-categories-menu {
  overflow-y: scroll;
  overflow-x: hidden;
  margin-top: 20px;
  width: 254px;
  min-width: 0;
  flex: 0 0 auto;
}

.incompleteResourcesView-wrapper {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}

:host search-input {
  display: block;
  width: 300px;
  max-width: 30em;
  background: white;
  border-radius: 3px;
}

:host resource-list {
  width: 100%;
  margin-left: 20px;
  min-width: 0;
}

:host >>> view-header {
  margin-bottom: 20px;
}

:host .mainContent {
  min-width: 700px;
}

:host .formGroup label {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

:host .viewHeader-rightSide {
  display: flex;
  float: right;
  justify-content: space-between;
  flex: 1;
  align-items: center;
}

.resourceDetails-formWrapper--readonly {
  pointer-events: none;
}

.resourceDetailsView-wrapper {
  display: flex;
  flex-direction: column;
}

.resourceDetails-headerWrapper {
  display: flex;
  height: 190px;
  width: 100%;
  margin-bottom: 27px;
}

.resourceDetails-coverPreviewWrapper {
  width: 266px;
  height: 190px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  flex: 0 0 auto;
}

.resourceDetails-coverPreview,
.resourceDetails-thumbnail,
.resourceDetails-cover {
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
}

.resourceDetails-infoWrapper {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-right: 180px;
}

.resourceDetails-title {
  width: 100%;
  margin-bottom: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 30px;
  color: #43474C;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
}

.resourceDetails-description {
  flex: 1;
  width: 100%;
  color: #7F8083;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  max-height: 110px;
  margin-bottom: 10px;
  overflow: hidden;
}

.resourceDetails-infoWrapper view-header-button {
  width: 82px;
}

:host .resourceDetails-multiSelectInput {
  min-height: 45px;
}

:host .resourceDetails-formWrapper textarea {
  resize: none;
  min-height: 164px;
}

.resourceDetails-form {
  display: flex;
  width: 100%;
  padding-right: 150px;
}

:host .resourceDetails-leftSide {
  flex: 1;
  border-right: 1px solid #D3D3DC !important;
  padding-right: 30px;
  padding-bottom: 15px;
  min-width: 505px;
}

.resourceDetails-rightSide {
  padding-left: 30px;
  flex: 1;
  padding-bottom: 15px;
  min-width: 503px;
}

.resourceDetails-imagesContainer {
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
  height: 434px;
}

.resourceDetails-imageWrapper {
  width: 245px;
  height: 207px;
  display: flex;
  flex-direction: column;
  margin: 0 17px 10px 0;
}

.resourceDetails-imageWrapper label {
  height: 32px;
  color: #898A8C;
  font-size: 12px;
  font-weight: normal;
  line-height: 32px;
  position: relative;
  margin: 0;
}

.resourceDetails-image {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%;
  min-width: 245px;
  padding: 0;
}

:host .resourceDetails-imageIcon {
  border: 1px solid #D3D3DC;
  border-radius: 3px;
  font-size: 50px;
  color: #69789D;
}

.resourceDetails-image.resourceDetails-imageInvalid {
  border: 1px solid #C5021A;
  border-radius: 3px;
}

.resourceDetails-image input {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  font-size: 16px;
}

.resourceDetails-imageIconCover {
  width: 245px;
  font-size: 80px;
  background-color: #EAE9EC;
  color: #69789D;
}

.resourceDetails-parentKeyControlWrapper {
  position: relative;
}

.resourceDetails-parentKeyIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 10px;
  height: 45px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #69789D;
  cursor: pointer;
}

.resourceDetails-parentKeyError {
  color: #C30016;
  font-size: 12px;
  margin-top: 3px;
  display: block;
  margin-bottom: 0;
  height: 27px;
}

:host .form[formFloatingLabel].form--disabled [disabled] {
  opacity: 0.7;
}

@media (min-width: 1440px) {
  .resourceDetails-imagesContainer {
    height: 207px;
    flex-direction: row;
  }
}

:host {
  position: relative;
  width: 100%;
  height: 368px;
  min-width: 820px;
  display: block;
}

.licenseDetailsHeader-background {
  position: absolute;
  top: 10px;
  height: 353px;
  background-color: #EAE9EC;
  border-radius: 5px;
  width: 100%;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

.licenseDetailsHeader-content {
  position: absolute;
  height: 343px;
  top: 15px;
  right: 5px;
  left: 5px;
  background-color: #FFFFFF;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  display: flex;
}

.licenseDetailsHeader-cover {
  position: absolute;
  height: 330px;
  width: 276px;
  top: 5px;
  left: 5px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  background-color: white;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
}

.licenseDetailsHeader-cover-placeholder {
  font-size: 150px;
  background-color: #EAE9EC;
  color: #69789D;
  display: flex;
  justify-content: center;
  align-items: center;
}

.licenseDetailsHeader-description {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 24px 25px 4px 58px;
  left: 281px;
  height: 100%;
  right: 0;
}

.licenseDetailsHeader-title {
  display: flex;
  margin: 5px 0 15px 0;
  height: 40px;
  justify-content: space-between;
}

.licenseDetailsHeader-titleText {
  color: #2F415B;
  font-weight: 600;
  line-height: 40px;
  height: 40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 26px;
  padding-right: 15px;
}

.licenseDetailsHeader-expired-button {
  box-sizing: border-box;
  white-space: nowrap;
  background-color: white;
  height: 40px;
  border-radius: 3px;
  padding: 0 10px;
  border: 1px solid #CECECE;
  display: flex;
  color: #7C8CAD;
  font-weight: 600;
  font-size: 13px;
  vertical-align: middle;
  line-height: 40px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  opacity: 1;
}

.licenseDetailsHeader-expired-button:hover {
  color: black;
}

.licenseDetailsHeader-expired-textButton {
  text-transform: uppercase;
  padding-right: 10px;
}

.licenseDetailsHeader-expired-button i {
  font-size: 20px;
}

.licenseDetailsHeader-expired {
  opacity: 0.7;
}

.licenseDetailsHeader-table td {
  height: 20px;
  color: #6C7C91;
  line-height: 20px;
  font-size: 16px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 15px;
}

.licenseDetailsHeader-table {
  border-collapse: separate;
  border-spacing: 0 20px;
  height: 260px;
}

:host td:not(.licenseDetailsHeader-descriptionTitle) {
  max-width: 260px;
}

:host td.licenseDetailsHeader-descriptionTitle {
  font-weight: 600;
  max-width: 200px;
}

:host .icon-individual:before,
:host .icon-organization:before {
  padding-right: 7px;
}

:host td.licenseDetailsHeader-expired-statusField {
  color: #D0021B;
  font-weight: 600;
}

@media (max-width: 992px) {
  .licenseDetailsHeader-description {
    padding-left: 25px;
  }

  :host {
    min-width: 800px;
  }
}

:host {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 15px 0;
}

.licenseProductList-stripLayout .licenseProductList-product {
  width: 100%;
}

.licenseProductList-listHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.licenseProductList-listHeader-title {
  height: 23px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.7px;
  line-height: 23px;
  color: #43474C;
  margin-right: 10px;
}

.licenseProductList {
  display: flex;
  flex-wrap: wrap;
  margin: 5px;
}

.licenseProductList-product {
  margin-right: 19px;
  margin-bottom: 19px;
}

.licenseProductList-paginatorContainer {
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
}

host {
  position: relative;
  flex: 1;
  height: 100%;
  min-height: 0;
}

:host .licenseResourceList-list {
  display: flex;
  flex-direction: column;
}

.licenseResourceList-listHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.licenseResourceList-listHeader-title {
  height: 23px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.7px;
  line-height: 23px;
  color: #43474C;
  margin-right: 10px;
  text-transform: uppercase;
}


:host {
  margin-top:15px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

:host >>> .list-background {
  border-radius: 5px;
  background: white;
}

:host >>> .manageLicensesList-header {
  margin-bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}

:host >>> .paginator-container-bottom {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

:host >>> .tableList th:first-child table-list-header {
  margin-left: 10px;
}

:host >>> .tableList-column-product {
  min-width: 250px;
}

:host >>> .tableList-column-ownerName {
  width: 150px;
}

:host >>> .tableList-column-ownerType {
  width: 125px;
}

:host >>> .tableList-column-expDate {
  width: 150px;
}

:host >>> .tableList-column-status {
  width: 150px;
}

:host >>> .tableList-column-lti {
  width: 110px;
}

:host >>> .tableList-column-cartridge {
  width: 150px;
}

.manageLicensesList-search {
  min-width: 227px;
  width: 450px;
  height: 30px;
  background-color: #FFFFFF;
  border-radius: 3px;
  margin-right: 60px;
}

:host >>> .focusSearch-dropdown{
  z-index: 4;
}


:host view-header {
  margin-bottom: 20px;
}

.manageOrganisations-wrapper {
  display: flex;
}

.manageOrganisations-listContainer {
  margin-left: 20px;
  width: 100%;
  position: relative;
  min-width: 540px;
}


.manageOrganisationsCategory-listContainer {
  position: relative;
  margin-left: 20px;
  width: 100%;
}

:host .mainContent {
  display: flex;
  align-items: center;
  flex-direction: column;
}

:host h5 {
  color: black;
}

.manage-school-options {
  width: 100%;
  max-width: 850px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.manage-school-leftOptions, .manage-school-rightOptions {
  margin: 20px;
  display: flex;
}

.manage-school-rightOptions {
  min-width: 857px;
  flex-direction: column;
}

.manage-school-leftOptions {
  margin-bottom: 0;
  flex-direction: row;
}

:host .school-details-wrapper {
  width: 380px;
  margin-right: 30px;
}

.school-details-top-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #7C8CAD;
  font-size: 20px;
  font-weight: 500;
  line-height: 33px;
  margin-bottom: 10px;
  white-space: nowrap;
}

.school-details-editButton {
  margin-left: 15px;
  font-size: 25px;
  height: 37px;
  width: 37px;
  border: 1px solid #D3D3DC;
  border-radius: 3px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
  color: #7C8CAD;
  transition: all 0.2s ease-in-out;
}

.school-details-editButton:hover {
  background-color: #26C7A3;
  border-color: #26C7A3;
  color: white;
}

.school-details {
  height: auto;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  padding: 30px;
  color: #57616F;
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
  border-radius: 5px;
}

.school-details div {
  word-break: break-all;

}

:host view-header {
  align-self: stretch;
}


/* ACTIONS DROPDOWN */

.manage-school-actionsDropdownWrapper {
  position: relative;
  border-radius: 3px;
  display: flex;
  align-items: center;
}

.manage-school-actionsDropdownButton {
  cursor: pointer;
  background-color: #D3D3DC;
  color: #69789D;
  transition: all 0.15s ease-in-out;
  justify-content: space-between;
  padding: 0 8px;
  min-width: 150px;
  max-width: 200px;
}

.manage-school-actionsDropdown {
  width: 100%;
  right: 0;
}

.manage-school-actionsDropdownWrapper-dash {
  transform-origin: center center;
  color: #7C8CAD;
  margin-left: 10px;
  display: flex;
  align-items: center;
  align-self: stretch;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}

.manage-school-actionsDropdownItem {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: white;
  font-size: 14px;
  height: 30px;
  transition: background-color 0.2s ease-in-out;
  padding: 0 7px;
  white-space: nowrap;
}

@media (min-width: 1300px) {
  .manage-school-options {
    flex-direction: row;
    align-items: flex-start;
    max-width: none;
  }

  .manage-school-leftOptions {
    margin-bottom: 20px;
    flex-direction: column;
  }

  .manage-school-rightOptions {
    flex: 2;
  }

  :host .school-details-wrapper {
    margin-right: 0;
    margin-bottom: 16px;
  }
}

.organisation-details-header {
  display: contents;
}

.manage-school-loadingSpinner {
  z-index: 3;
}

.manageUser-profileSummary {
  margin-top: 15px;
}

/*
  GroupList styles
*/
.manageUser-groupList-wrapper {
  width: 100%;
  max-width: 550px;
  margin: 30px auto;
}

.manageUser-groupList-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.manageUser-groupList-label {
  display: flex;
  flex-direction: row;
  color: #69789D;
  font-size: 20px;
}

.manageUser-groupList-addToGroupButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  font-size: 16px;
  line-height: 16px;
  cursor: pointer;
  color: #7C8CAD;
  border-radius: 3px;
  border: 1px solid #D3D3DC;
  margin-left: 10px;
}

.manageUser-groupList-addToGroupButton:hover {
  color: #FFFFFF;
  background-color: #26C7A3;
}

.manageUser-groupList-container {
  background-color: #ffffff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 20px;
  height: 300px;
}

.manageUser-groupList {
  position: relative;
  overflow: hidden;
  min-height: 290px;
  max-height: 345px;
  overflow-y: auto;
}

.manageUser-groupListItem {
  width: 100%;
  height: 50px;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.manageUser-groupListItem:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 2px;
  background-color: #D3D3DC;
  display: block;
}

.manageUser-groupListItem:last-of-type:after {
  background-color: transparent;
}

.manageUser-groupListItem-name {
  padding-left: 20px;
  color: #454E5C;
  font-size: 14px;
  font-weight: 500;
  line-height: 50px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}

.manageUser-groupListItem-iconDelete {
  font-size: 20px;
  color: #7C8CAD;
  line-height: 50px;
  margin: 0 20px;
}

.manageUser-groupListItem-iconDelete:hover {
  color: #26C7A3;
  cursor: pointer;
}

.manageUser-groupList-paginator {
  float: right;
  margin-top: 10px;
}

:host view-header {
  margin-bottom: 20px;
}

.platformAdmin-wrapper {
  display: flex;
}

platform-admin-list {
  margin-left: 20px;
}

:host view-header {
  margin-bottom: 20px;
}

.platformAdmin-wrapper {
  display: flex;
}

.external-api-test-components-wrapper {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
}

:host view-header {
  margin-bottom: 20px;
}

.platformAdmin-wrapper {
  display: flex;
}

.platform-parameters-groups {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  margin-bottom: 20px;
}

.platform-parameters-groups-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.platform-parameters-groups-header .view-header-button--blue {
  font-weight: bold;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
}
:host view-header {
  margin-bottom: 20px;
}

.tutorialAdmin-wrapper {
  display: flex;
}

:host side-menu{
  margin-right: 20px;
}

.tutorial-type-dropdown-item {
  color: white;
  transition: all 0.2s ease-in-out;
  padding-left: 10px;
  height: 30px;
  cursor: pointer;
  line-height: 30px;
  width: 218px;
}

:host .manage-tutorials-content {
  display: flex;
  flex-direction: column;
}

:host >>> .tableList-column-2 {
  width: 60px;
}

:host >>> .tableList-column-3 {
  width: 180px;
}


:host product-details {
  margin-top: 20px;
}

:host .productDetails-details textarea {
  resize: none;
  min-height: 164px;
}

.productsList {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.productsList-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.productsList-header-rightSide,
.productsList-header-leftSide {
  display: flex;
  align-items: center;
}

.productsList-header-leftSide {
  height: 23px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.7px;
  line-height: 23px;
  color: #43474C;
  margin-right: 10px;
}

.productsList-header-layoutButton {
  margin-left: 10px;
}

.productsList-footer {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  margin-right: 10px;
}

.productsList .product {
  margin: 0 0 30px 15px;
}

.productsList-empty {
  color: #9EAAC2;
  font-size: 24px;
  text-align: center;
  width: 100%;
}

:host textarea {
  resize: none;
}

.manageProduct-addNewProduct-button {
  position: relative;
}

.manageProduct-dropdown {
  right: 0;
  width: 100%;
  z-index: 2;
}

.manageProduct-dropdown-item {
  color: white;
  transition: all 0.2s ease-in-out;
  padding-left: 10px;
  height: 30px;
  cursor: pointer;
  line-height: 30px;
}

.manageProduct-dropdown-item:hover {
  background-color: #003C98;
}

:host >>> view-header .viewHeader-title {
  min-width: 140px;
}

.singleProductDetails-resourceList {
  position: relative;
  flex: 1;
  height: 100%;
  min-height: 0;
}

:host .productDetails-list {
  display: flex;
  flex-direction: column;
}

:host .productDetails-details textarea {
  resize: none;
  min-height: 164px;
}

:host product-details {
  margin-top: 15px;
}

:host .productDetails-details-keywords {
  min-height: 45px;
}

.productDetails-listHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.productDetails-listHeader-leftSide {
  height: 23px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.7px;
  line-height: 23px;
  color: #43474C;
  margin-right: 10px;
}

.productDetails-listHeader-rightSide {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:host .productDetails-listHeader-rightSide view-header-button {
  margin-right: 15px;
}

:host .form[formFloatingLabel].form--disabled [disabled] {
  opacity: 0.7;
}

:host lazy-loading {
  max-height: 650px;
  max-width: 900px;
}

:host lazy-loading bottom-scroll {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

:host .resource-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
}

:host resource {
  margin: 10px;
}

:host .resource-stripVersion {
  max-width: 865px;
}

:host {
  width: 500px;
  padding: 0 25px;
}

.sidebar-menu-wrapper {
  padding: 9px 0 9px 0
}

:host view-header{
  margin-bottom: 20px;
}

:host .export-user-view-content {
  display: flex;
}

:host side-menu {
  margin-right: 20px;
}

:host .mainContent {
  display: flex;
  align-items: center;
  flex-direction: column;
}

:host .mainContent > * {
  width: 100%;
}

.manageUser-accountType {
  display: flex;
  align-items: center;
  margin-top: 5px;
  font-size: 20px;
  white-space: nowrap;
  justify-content: center;
  color: #6C7C91;
}

.manageUerStatus-dropdownItem {
  display: flex;
  transition: all 0.15s ease-in-out;
  white-space: nowrap;
  height: 24px;
  align-items: center;
  vertical-align: middle;
  padding-left: 8px;
  padding-right: 8px;
  line-height: 24px;
}

.manageUerStatus-dropdownItem:hover {
  color: white;
  background-color: #0070BE;
}

.manageUerStatus-dropdownIcon {
  color: rgba(0, 0, 0, 0.4);
  margin-left: 5px;
  transition: all 0.15s ease-in-out;
  line-height: 24px;
}

.manageUerStatus-dropdownIcon--active {
  transform: rotate(180deg) translateY(3px);
  color: #FFFFFF;
}

:host .sub-header {
  display: flex;
  margin-top: 20px;
}

:host .sub-header > * {
  margin-right: 23px;
}

.userStatus-dropdown {
  color: #0C1522;
  align-items: center;
  height: 24px;
  vertical-align: middle;
  position: relative;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  transition: all 0.15s ease-in-out;
}

.manageUserStatus-dropdown-wrapper {
  min-width: 100%;
  left: 0;
}

:host .currentStatus-editable {
  display: flex;
  padding: 1px 8px 0 8px;
}

.manageUserStatus-dropdown-editable--inactive {
  background-color: #26C7A3;
  border-radius: 3px;
  color: #FFFFFF;
  cursor: pointer;
}

.manageUserStatus-dropdown-editable--active {
  background-color: #26C7A3;
  border-radius: 3px 3px 0 0;
  color: #FFFFFF;
  cursor: pointer;
}

.manageUserStatus-dropdown-editable--inactive:hover {
  background-color: #0070BE;
}

.manageUserStatus-dropdown-editable--inactive:hover * i {
  color: #FFFFFF;
}

.manageUser-statistic {
  display: flex;
  align-items: flex-end;
}

.manageUser-statistic > * {
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
  text-align: center;
  white-space: nowrap;
  height: 23px;
  color: #0C1522;
}

.manageUser-statistic label {
  color: #69789D;
  margin: 0;
}

.manageUser-statistic i {
  color: #7C8CAD;
  margin-left: 4px;
  margin-bottom: 1px;
  font-size: 15px;
  font-weight: 400;
}

.manageUser-statistics-lastLogin,
.manageUser-statistics-loginNumber {
  margin-left: 6px;
  margin-bottom: 1px;
}

@media (min-width: 1300px) {
  :host .viewHeader-rightSide > view-header-button {
    margin-right: 60px;
  }
}

:host >>> view-header {
  margin-bottom: 20px;
}

:host >>> .sidebar-menu-wrapper {
  padding: 9px 0 9px 0;
}

:host .manageUserAccountsView-wrapper {
  display: flex;
}

:host manage-user-account-list {
  position: relative;
  margin-left: 20px;
}

:host view-header{
  margin-bottom: 20px;
}

:host .manage-user-jobs-view-wrapper {
  display: flex;
}

:host side-menu {
  margin-right: 20px;
}

:host view-header {
  margin-bottom: 20px;
}

:host .roleDetailsView-wrapper {
  display: flex;
}

:host privileges-list {
  position: relative;
  margin: 20px;
}

.roleDetailsView-header {
  display: flex;
  flex-direction: column;
}

.roleDetailsView-roleName {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  font-size: 36px;
  line-height: 36px;
  white-space: nowrap;
  font-weight: 600;
  color: #0D1C2E;
  min-width: 530px;
}

.roleDetailsView-bottomContainer {
  display: flex;
  flex-direction: column;
}

.roleDetailsView-roleDescription {
  min-width: 380px;
  width: 380px;
  display: flex;
  flex-direction: column;
  color: #7C8CAD;
  font-size: 20px;
  font-weight: 500;
  line-height: 33px;
  margin: 5px 20px 10px 20px;
  white-space: nowrap;
}

.roleDetailsView-roleDescriptionText {
  height: auto;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  padding: 30px;
  color: #57616F;
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
  border-radius: 5px;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.roleDetailsView-roleDescriptionLabel {
  height: 37px;
  margin-bottom: 10px;
}

@media (min-width: 1300px) {
  .roleDetailsView-bottomContainer {
    flex-direction: row;
  }
}




:host >>> view-header {
  margin-bottom: 20px;
}

:host >>> .sidebar-menu-wrapper {
  padding: 9px 0 9px 0;
}

:host .rolesAndPrivilegesView-wrapper {
  display: flex;
}

:host manage-roles-list {
  position: relative;
  margin-left: 20px;
}

:host {
    width: 500px;
}

.reopenAssignment-dateWrapper {
    position: relative;
}
stepper {
  margin: 10px;
}

.summary-wrapper {
  max-width: 700px;
  margin: 0 70px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.summary-wrapper section{
  margin-top: 0;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.summary-wrapper section label {
  line-height: 22px;
  margin-right: 5px;
  margin-bottom: 0;
}

.section-label-text {
  font-size: 16px;
}

:host >>> section div {
  font-size: 17px;
  color: #000000;
}

.quick-assign-details {
  color:#000000;
  font-size: 20px;
  font-weight: bold;
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.assignment-quick-pin-copy-btn {
  background:none;
  border: 1px solid #D3D3DC;
  font-size: 18px;
  border-radius: 4px;
  vertical-align: middle;
  text-align: center;
  transition: all 0.2s ease-in-out;
  color: #7C8CAD;
}

.assignment-quick-pin-copy-btn:hover {
  background-color: #26C7A3;
  color: white;
}

.quick-pin {
  color:#000000;
  font-size: 25px;
  font-weight: bold;
  margin-right: 10px;
}

.quick-pin-url-section {
  flex-direction: column;
}
.quick-assign-details-wrapper{
  display: flex;
  flex-direction: row;
}

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 100vw;
}

.studentAssignmentList-wrapper {
  padding-top: 70px;
}

.studentAssignmentList {
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0 0 120px;
  transition: all 0.3s ease-out;
  min-height: calc(100% - 75px);
}

:host >>> assignment-tile {
  margin: 10px 40px 40px 0;
}

.studentAssignmentList-noResults {
  color: #9EAAC2;
  font-size: 24px;
  text-align: center;
  width: 100%;
  height: calc(100% - 75px);
}

.studentAssignmentList-wrapper.studentAssignmentList-wrapper-noResults {
  padding-top: 0;
}

:host >>> loading-cover {
  z-index: 2;
}

@media only screen and (min-width: 900px) {
  .studentAssignmentList {
    padding-left: 148px;
  }
}

@media only screen and (min-width: 1060px) {
  .studentAssignmentList-wrapper.studentAssignmentList-wrapper-noResults {
    padding-top: 0;
  }

  .studentAssignmentList {
    padding-left: 206px;
  }
}

@media only screen and (min-width: 1500px) {
  .studentAssignmentList {
    min-height: calc(100% - 115px);
  }

  .studentAssignmentList-noResults {
    height: calc(100% - 115px);
  }
}


.assignmentsNavigationBar-wrapper {
  display: flex;
  background-color: white;
  border-radius: 5px;
  height: 50px;
  align-items: center;
  color: #57616F;
  font-size: 17px;
  vertical-align: middle;
  line-height: 20px;
  font-weight: 500;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
}

.assignmentsNavigationBar {
  background-color: transparent;
  border-radius: 5px;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  align-items: center;
  display: flex;
  cursor: pointer;
  transition: all 0.2s linear;
}

.assignmentsNavigationBar:hover {
  color: #23B597;
}

.assignmentsNavigationBar-btn-label {
  margin-left: 15px;
  margin-right: 15px;
}

.assignmentsNavigationBar-btn-assignment--expanded, .assignmentsNavigationBar-btn-assignment--expanded:hover {
  color: white;
  background: linear-gradient(90deg, #0072AD, #058ED6);
  height: 56px;
  transition: all 0.2s linear;
}

.assignmentsNavigationBar-btn-results--expanded, .assignmentsNavigationBar-btn-results--expanded:hover {
  color: white;
  background: linear-gradient(90deg, #0072AD, #058ED6);
  height: 56px;
  transition: all 0.2s linear;
  border-radius: 5px 0 0 5px;
}

.assignmentsNavigationBar-btn-results-triangle {
  height: 0;
  width: 0;
  transition: all 0.18s linear;
  position: relative;
  overflow: hidden;
  opacity: 0;
}

.assignmentsNavigationBar-btn-results-triangle.assignmentsNavigationBar-btn-results-triangle--expanded {
  height: 56px;
  width: 20px;
  margin-right: 12px;
  opacity: 1;
}

.assignmentsNavigationBar-btn-results-triangle-top {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.15s linear 0.03s;
}

.assignmentsNavigationBar-btn-results-triangle-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all 0.15s linear 0.03s;
}

.assignmentsNavigationBar-btn-results-triangle--expanded .assignmentsNavigationBar-btn-results-triangle-top {
  height: 50%;
  width: 100%;
  background: linear-gradient(62deg, #058ED6 48%, transparent 50%);
}

.assignmentsNavigationBar-btn-results-triangle--expanded .assignmentsNavigationBar-btn-results-triangle-bottom {
  height: 50%;
  width: 100%;
  background: linear-gradient(118deg, #058ED6 48%, transparent 50%);
}

.assignmentsNavigationBar-divider {
  background-color: #D8D8DD;
  border-radius: 0;
  width: 1px;
  height: 23px;
}

.assignmentsNavigationBar-resultsSubButton:hover {
  background-color: #23B597;
  border-color: #23B597;
  color: white;
}

.assignmentsNavigationBar-resultsSubButton {
  box-sizing: border-box;
  white-space: nowrap;
  height: 28px;
  background-color: white;
  border-radius: 3px;
  border: 1px solid #D3D3DC;
  padding: 0 10px;
  display: flex;
  align-items: center;
  color: #454E5C;
  font-size: 12px;
  vertical-align: middle;
  line-height: 28px;
  transition: all 0.2s ease-in-out;
  position: relative;
  margin-right: 12px;
  cursor: pointer;
}

.assignmentsNavigationBar-resultsSubButton--clicked {
  background-color: #0070BE;
  border-color: #0070BE;
  color: white;
}

.assignmentsNavigationBar-resultsSubButton:hover {
  background-color: #23B597;
  border-color: #23B597;
  color: white;
}

/* ================================== RWD */

@media only screen and (min-width: 810px) {
  .assignmentsNavigationBar-wrapper {
    height: 52px;
    line-height: 24px;
    font-size: 19px;
  }

  .assignmentsNavigationBar-resultsSubButton {
    height: 32px;
    line-height: 32px;
    font-size: 13px;
    margin-right: 15px;
  }

  .assignmentsNavigationBar-btn-results-triangle.assignmentsNavigationBar-btn-results-triangle--expanded,
  .assignmentsNavigationBar-btn-assignment--expanded, .assignmentsNavigationBar-btn-assignment--expanded:hover,
  .assignmentsNavigationBar-btn-results--expanded, .assignmentsNavigationBar-btn-results--expanded:hover {
    height: 55px;
  }

  .assignmentsNavigationBar-divider {
    height: 26px;
  }

  .assignmentsNavigationBar-btn-label {
    margin-left: 20px;
    margin-right: 20px;
  }

  .assignmentsNavigationBar-btn-results-triangle.assignmentsNavigationBar-btn-results-triangle--expanded {
    margin-right: 15px;
  }
}

@media only screen and (min-width: 1060px) {
  .assignmentsNavigationBar-wrapper {
    height: 55px;
    line-height: 28px;
    font-size: 22px;
  }

  .assignmentsNavigationBar-resultsSubButton {
    height: 37px;
    line-height: 37px;
    font-size: 14px;
    margin-right: 20px;
  }

  .assignmentsNavigationBar-btn-results-triangle.assignmentsNavigationBar-btn-results-triangle--expanded,
  .assignmentsNavigationBar-btn-assignment--expanded, .assignmentsNavigationBar-btn-assignment--expanded:hover,
  .assignmentsNavigationBar-btn-results--expanded, .assignmentsNavigationBar-btn-results--expanded:hover {
    height: 65px;
  }

  .assignmentsNavigationBar-divider {
    height: 30px;
  }

  .assignmentsNavigationBar-btn-label {
    margin-left: 30px;
    margin-right: 30px;
  }

  .assignmentsNavigationBar-btn-results-triangle.assignmentsNavigationBar-btn-results-triangle--expanded {
    margin-right: 20px;
  }
}


:host {
  display: block;
  width: 256px;
  min-width: 256px;
  margin-bottom: 10px;
  transition: box-shadow 200ms ease-in-out;
  border-radius: 7px;
  position: relative;
  height: 301px;
}

:host(:hover) {
  box-shadow: 0 0 30px 0 rgba(0,0,0,0.3) !important;
}

:host button:hover,
:host button:focus {
  box-shadow: 0 1px 6px 0 rgba(0,0,0,0.2) !important;
}

:host .icon {
  font-size: 1.2em;
}

:host .icon--large {
  font-size: 1.8em;
}

:host .icon-arrow-right {
  float: none;
  margin: 0;
}

:host .emphasized {
  color: #26C7A3;
}

.assignmentTile-thumbnail {
  border-radius: 7px 7px 0 0;
  width: 256px;
  height: 185px;
}

.assignmentTile-thumbnail-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 256px;
  height: 185px;
  cursor: pointer;
  border-radius: 7px 7px 0 0;
  overflow: hidden;
}

.assignmentTile-thumbnail-blend {
  background: linear-gradient(180deg, rgba(0,0,0,0) 20%,  rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.25) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.assignmentTile-playButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: white;
  font-size: 2.5em;
  background-color: #0071AF;
  border-radius: 50%;
  transition: background-color 0.2s ease-in-out;
}

.assignmentTile-playButton:hover {
  background-color: #23B597;
}

:host .assignmentTile-playButton .icon-play {
  font-size: 0.75em;
  margin-left: 5px;
  margin-bottom: 2px;
}

.assignmentTile-title {
  display: block;
  max-height: 52px;
  overflow: hidden;
  width: 100%;
  padding: 0.3em 0;
  font-weight: bold;
  color: white;
  font-size: 19px;
  line-height: 22px;
}

.assignmentTile-bottomPanel {
  position: relative;
  height: 116px;
  padding: 10px 15px;
  border-radius: 0 0 7px 7px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 20px;
}

.assignmentTile-bottomPanel-row {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.assignmentTile-date {
  letter-spacing: 0.12em;
}

.assignmentTile-bottomPanel-buttonsWrapper {
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 100%;
  padding: 0 1em;;
}

.assignmentTile-expandButton {
  width: 55px;
  background-color: #FFFFFF;
  color: #0072AD;
}

.assignmentTile-submitButton {
  width: 161px;
  background-color: #0072AD;
  color: #FFFFFF;
  letter-spacing: 0.05em;
}

.assignmentTile-button {
  position: relative;
  height: 50px;
  border-radius: 3px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: visible;
}


.assignmentTile-button:first-of-type {
  border-bottom-left-radius: 7px;
}

.assignmentTile-button:last-of-type {
  border-bottom-right-radius: 7px;
}

.assignmentTile-submitButton[disabled] {
  color: #7C8CAD;
  background-color: #D3D3DC;
  opacity: 1;
}

.assignmentTile-submitButton span {
  padding-left: 4px;
}

.assignmentTile-addonsCount {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(20%, -20%);
  background: #26C7A3;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  color: #FFFFFF;
  font-weight: 500;
  font-size: 14px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
}

.assignmentTile-comment-wrapper {
  background-color: darkorange;
  border: none;
  position: absolute;
  top: -2px;
  right: -2px;
  height: 40px;
  width: 60px;
  border-radius: 0 7px 0 25px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
  display: flex;
  z-index: 1;
  cursor: pointer;
}

.assignmentTile-comment-top-right {
  position: absolute;
  right: 20px;
  top: 1px;
}

.assignmentTile-grade-wrapper {
  position: absolute;
  top: -2px;
  left: -2px;
  height: 40px;
  width: 60px;
  border-radius: 7px 0 25px 0;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
  display: flex;
}

.assignmentTile-grade-corner {
  position: absolute;
  z-index: 0;
  height: 4px;
  width: 4px;
  background: #F8E71C;
  transform: rotateZ(45deg);
}

.assignmentTile-grade-corner-top-right {
  right: -2px;
  top: 1px;
}

.assignmentTile-grade-corner-bottom-left {
  left: 1px;
  bottom: -2px;
}

.assignmentTile-grade {
  color: #0D1C2E;
  font-weight: 600;
  height: 100%;
  width: 100%;
  border-radius: 7px 0 25px 0;
  background-color: #F8E71C;
  font-size: 20px;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 5px;
  z-index: 2;
}


/* STATUS - NEW */
:host(.assignmentTile--new) .assignmentTile-bottomPanel {
  color: #FFFFFF;
  background-color: #26C7A3;
}
:host(.assignmentTile--new) .assignmentTile-status {
  color: #FFFFFF;
}

:host(.assignmentTile--new) .assignmentTile-date {
  color: #FFFFFF;
}

/* STATUS - NOT STARTED */
:host(.assignmentTile--notStarted) .assignmentTile-bottomPanel {
  background-color: #F1F1F4;
}

:host(.assignmentTile--notStarted) .assignmentTile-status {
  color: #7C8CAD;
}

:host(.assignmentTile--notStarted) .assignmentTile-date {
  color: #7C8CAD;
}

:host(.assignmentTile--notStarted) .assignmentTile-title {
  color: #57616F;
}

/* STATUS - IN PROGRESS */
:host(.assignmentTile--inProgress) .assignmentTile-bottomPanel {
  background-color: #F1F1F4;
}

:host(.assignmentTile--inProgress) .assignmentTile-status {
  color: #0072AD;
}

:host(.assignmentTile--inProgress) .assignmentTile-date {
  color: #7C8CAD;
}

:host(.assignmentTile--inProgress) .assignmentTile-title {
  color: #57616F;
}

/* STATUS - HURRY */
:host(.assignmentTile--hurry) .assignmentTile-bottomPanel {
  background-color: #C31984;
}

:host(.assignmentTile--hurry) .assignmentTile-status {
  color: #FFFFFF;
}

:host(.assignmentTile--hurry) .assignmentTile-date {
  color: #FFFFFF;
}

/* STATUS - REOPENED */
:host(.assignmentTile--reopened) .assignmentTile-bottomPanel {
  background-color: #26C7A3;
}

:host(.assignmentTile--reopened) .assignmentTile-status {
  color: #FFFFFF;
}

:host(.assignmentTile--reopened) .assignmentTile-date {
  color: #FFFFFF;
}

/* STATUS - SUBMITTED */
:host(.assignmentTile--submitted) .assignmentTile-bottomPanel {
  background-color: #F1F1F4;
}

:host(.assignmentTile--submitted) .assignmentTile-status {
  color: #0072AD;
}

:host(.assignmentTile--submitted) .assignmentTile-date {
  color: #7C8CAD;
}

:host(.assignmentTile--submitted) .assignmentTile-title {
  color: #57616F;
}

/* STATUS - NEW GRADE */
:host(.assignmentTile--newGrade) .assignmentTile-bottomPanel {
  background-color: #26C7A3;
}

:host(.assignmentTile--newGrade) .assignmentTile-status {
  color: #FFFFFF;
}

:host(.assignmentTile--newGrade) .assignmentTile-date {
  color: #FFFFFF;
}

/* STATUS - GRADED */
:host(.assignmentTile--graded) .assignmentTile-bottomPanel {
  background-color: #F1F1F4;
}

:host(.assignmentTile--graded) .assignmentTile-status {
  color: #26C7A3;
}

:host(.assignmentTile--graded) .assignmentTile-date {
  color: #7C8CAD;
}

:host(.assignmentTile--graded) .assignmentTile-title {
  color: #57616F;
}

/* DROPDOWN */
:host .addonsDropdown {
  width: 100%;
  top: 0;
  left: 0;
  padding: 7px 15px;
  border-radius: 3px 3px 7px 7px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
  z-index: 10;
}

:host .dropdown-row {
  color: #57616F;
  font-size: 14px;
  font-weight: 600;
  line-height: 35px;
  vertical-align: inherit;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

:host .dropdown-row:hover {
  color: #26C7A3;
}

:host .dropdown-row-icon {
  padding-right: 10px;
  padding-left: 6px;
}

:host .dropdown-closeButton {
  color: #0072AD;
  font-size: 2em;
}


:host >>> .tableList-column-1 {
  width: 100px;
}

:host >>> .tableList-column-2,
:host >>> .tableList-column-3,
:host >>> .tableList-column-4 {
  width: 100px;
}

:host >>> .tableList-column-5 {
  width: 80px;
}

:host >>> .tableList-column-6,
:host >>> .tableList-column-7 {
  width: 60px;
}

:host >>> .tableList-column-8 {
  width: 140px;
}

@media (min-width: 1000px) {
  :host >>> .tableList-column-1,
  :host >>> .tableList-column-5 {
    width: 120px;
  }

  :host >>> .tableList-column-6,
  :host >>> .tableList-column-7 {
    width: 80px;
  }
}

@media (min-width: 1200px) {
  :host >>> .tableList-column-1 {
    width: 200px;
  }
}

@media (min-width: 1500px) {
  :host >>> .tableList-column-1 {
    width: 300px;
  }

  :host >>> .tableList-column-2,
  :host >>> .tableList-column-3,
  :host >>> .tableList-column-4,
  :host >>> .tableList-column-5,
  :host >>> .tableList-column-6 {
    width: 100px;
  }
}

@keyframes creation {
  from {
    opacity:0;
    transform: translateY(10px);
  }
  to {
    opacity:1;
    transform: translateY(0);
  }
}

:host {
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1035;
  color: #ffffff;
}

:host(.ribbon--hidden) {
  visibility: hidden;
  transition: all 0.5s ease-in-out;
}

:host >>> view-header-button {
  border: 1px solid;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0);
}

:host >>> view-header-button:not(:last-child) {
  margin-right: 10px;
}

.ribbon-top-bar {
  padding: 0 20px;
  align-items: center;
  justify-content: space-around;
  display: flex;
  flex-direction: row;
  background-color: #0e1c2c;
}

.ribbon-top-bar-submenu {
  margin: 10px;
  display: flex;
  flex: 1;
}

.ribbon-top-bar-submenu:first-child {
  justify-content: flex-start;
  align-items: center;
}

.ribbon-top-bar-submenu:last-child {
  justify-content: flex-end;
}

.ribbon-label {
  margin-right: 20px;
  margin-top: 5px;
}

.ribbon-resource-list {
  padding: 0 20px;
  background-color: rgba(14, 28, 44, 0.7);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  max-height: 0;
  transition: all 0.3s ease-in-out;
  overflow-x: auto;
  overflow-y: hidden;
}

.ribbon-resource-list::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 1);
}

.ribbon-resource-list::-webkit-scrollbar-track {
  background-color: rgba(207, 207, 207, 0.5);
}

:host(.ribbon--expanded) .ribbon-resource-list {
  max-height: 300px;
}

.ribbon-resource-item {
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  animation: creation 0.4s ease-in-out;
}

.ribbon-resource-item resource {
  display: flex;
  margin-bottom: 10px;
}

.ribbon-expand-collapse-button {
  display: flex;
  justify-content: center;
  font-size: 12px;
  color: #cfcfcf;
}

.ribbon-expand-collapse-button .icon-dash-down {
  transition: all 0.3s ease-in-out;
  transform: rotate(180deg) translateY(3px);
  margin-left: 12px;
}

:host(.ribbon--expanded) .icon-dash-down {
  transform: rotate(0deg);
}

.ribbon-button {
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

.ribbon-button:hover {
  color: #26C7A3;
}

:host(.ribbon--expanded) .ribbon-add-link-button {
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

:host(.ribbon--expanded) .ribbon-add-file-button {
  opacity: 1;
  transition: all 0.3s ease-in-out;
}




.assignments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
}

.assignments-title {
  font-weight: 300;
  color: #0C1522;
  alignment: left;
  font-size: 36px;
  line-height: 59px;
}

.assignments-listContainer {
  position: relative;
}

.assignments-listContainer-listWrapper {
  position: relative;
  z-index: 0;
}

.assignments-listContainer loading-cover {
  z-index: 1;
}

:host >>> view-header {
  margin-bottom: 20px;
}

.assignments-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
}

.bbs-investigation-item {
  height: 26px;
  width: 26px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 26px;
  margin-right: 4px;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.bbs-investigation-item-highlighted.bbs-investigation-item{
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
}

.bbs-investigation-label {
  max-height: 26px;
}

@media (min-width: 1000px) {
  .bbs-investigation-item {
    margin-right: 9px;
  }
}
.bbs-lesson-item {
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: #FFFFFF;
  padding: 3px;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  position: relative;
}

.bbs-lesson-item-hover {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  border: 2px solid;
  transition: border-color 0.3s ease-in-out;
  pointer-events: none;
}

.bbs-lesson-info {
  flex: 1 0 auto;
  border-radius: 3px;
  padding: 10px;
  position: relative;
  transition: background-color 0.3s ease-in-out;
  cursor: pointer;
}

.bbs-lesson-info:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 1px;
  background-color: #E1E7F3;
  display: block;
  transition: opacity 0.3s ease-in-out;
}

.bbs-lesson-info-highlighted.bbs-lesson-info:after {
  opacity: 0;
}

.bbs-lesson-investigations {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 66px;
  padding: 3px 10px 0 10px;
}

.bbs-lesson-title {
  font-weight: bold;
  font-size: 18px;
  color: black;
}

.bbs-lesson-subtitle {
  font-weight: 500;
  font-size: 16px;
  color: #454E5C;
}

.bbs-lesson-info-highlighted .bbs-lesson-title,
.bbs-lesson-info-highlighted .bbs-lesson-subtitle {
  transition: color 0.3s ease-in-out;
}

.bbs-lesson-info-highlighted .bbs-lesson-subtitle {
  color: white;
}

.bbs-lesson-info-highlighted .bbs-lesson-title {
  color: white;
}

.bbs-lesson-investigations-label {
  font-weight: 600;
  font-size: 14px;
  color: #454E5C;
}

.bbs-lesson-investigations-list {
  display: flex;
  min-height: 50%;
}

.bbs-unit-overview {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    height: 100%;
}

.bbs-unit-overview-title {
    flex: 1 0 70px;
    font-weight: 600;
    font-size: 18px;
    color: black;
    transition: all 0.3s ease-in-out;
    padding: 10px;
}

.bbs-unit-overview-highlighted .bbs-unit-overview-title {
    color: white;
}

.bbsUnitOverview-thumbnailContainer{
    width: 140px;
    height: 160px;
    overflow: hidden;
    position: relative;
}

.bbsUnitOverview-thumbnail{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: filter 0.3s ease-in-out;
}

.bbs-unit-overview:hover .bbsUnitOverview-thumbnail {
    filter: brightness(120%);
}

.createBookmarkFolder-body {
    width: 600px;
}

.createBookmarkFolder-label {
    text-transform: uppercase;
}

.deleteBookmarkFolder-body {
  width: 500px;
}

:host {
  width: 400px;
}

:host .folderSelect {
  height: 42px;
  position: relative;
  width: 100%;
}

:host .folderSelect-header {
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  cursor: pointer;
  border: 1px solid #D7D7DC;
  border-radius: 2px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}

:host .folderSelect--expanded {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

:host >>> dropdown {
  width: 100%;
  background-color: #F9F9F9;
  border: 1px solid #D7D7DC;
  border-top: none;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}

:host .foldersWrapper {
  max-height: 12.5em;
}

:host .folderItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10px;
  justify-content: space-between;
  height: 40px;
  width: 100%;
  color: rgba(0,0,0,0.7);
  cursor: pointer;
}

:host .folder-checkbox {
  font-size: 15px;
  color: #9CAFDA;
}

:host .folderItem:hover {
  color: #27BF92;
  background-color: rgba(38,199,163,0.1);
}

:host .folderItem:hover .folder-checkbox {
  color: #27BF92;
}

:host .folderItem--selected {
  color: #27BF92;
}

:host .folderItem--selected .folder-checkbox {
  color: #26C7A3;
}

:host .selectedCount {
  height: 16px;
  width: 66%;
  color: #0D1C2E;
  font-size: 16px;
  line-height: 16px;
}

:host .changeAll-btn {
  color: #69789D;
  font-size: 10px;
  font-weight: 600;
  text-align: right;
}

:host .toggleDropdown-btn {
  display: flex;
  transition: transform 0.15s ease-in-out;
}

:host .toggleDropdown-btn--active {
  transform: rotateZ(180deg);
}

:host .search-input {
  width: 100%;
  height: 50px;
  font-size: 15px;
  padding: 0 10px;
  border: none;
  color: #000000;
  background-color: #F9F9F9;
  caret-color: #27BF92;
  border-bottom: 1px solid #ececec;
}

:host .search-input:focus {
  box-shadow: none !important;
}

:host .folderName {
  height: 16px;
  font-size: 16px;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}

.bookmarkManage-buttons {
  flex: 1;
  position: relative;
  background-color: white;
  display: flex;
  justify-content: flex-end;
  transition: box-shadow 0.15s ease-in-out;
  padding: 15px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.bookmarkManage-buttonWrapper {
  flex: 1;
  display: flex;
}

.bookmarkManage-footer {
  padding-top: 0;
  padding-bottom: 0;
}

.bookmarkManage-buttons--shadow {
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}

.bookmarkManage-removeButtonWrapper {
  display: flex;
  transition: flex-grow 0.15s ease-in-out;
  flex: 1;
  margin-right: 15px;
}

.bookmarkManage-removeButton {
  flex: 1;
}

#warning-box {
  background-color: #FCF8E3;
  border: 1px solid #FAEBCC;
  border-radius: 5px;
  color: #8A6D3B;
  padding: 20px 20px;
  margin: 20px 0px;
  font-size: 14px;
}

:host {
  width: 100%;
  display: block;
  justify-content: center;
  align-content: center;
  overflow: auto;
}

:host >>> loading-spinner {
  width: 60px;
}

:host {
  display: flex;
  flex: 1;
  flex-direction: column;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background-color: #FFFFFF;
  padding: 3px;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  transition-property: background-color, border;
  max-width: 340px;
}

.flexLesson-title {
  font-weight: bold;
  font-size: 18px;
  color: black;
  margin: 30px 20px;
  letter-spacing: 0.05em;
  overflow: hidden;
  transition: none;
}

.flexLesson-title.flexLesson-title--selected {
  color: white;
}

:host {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  height: 100%;
  width: 140px;
  background-color: white;
  border-radius: 3px;
  border: 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

:host:hover .flexUnitOverview-label {
  color: white;
}

.flexUnitOverview-label {
  font-weight: 600;
  font-size: 18px;
  color: black;
  height: 60px;
  width: 100%;
  padding: 10px;
  transition: background-color 0.3s ease-in-out;
}

.flexUnitOverview-label.flexUnitOverview-label--selected {
  color: white;
}

.flexUnitOverview-thumbnailContainer {
  width: 140px;
  height: 160px;
}

:host {
    display: block;
}

.unloggedFooterHelp {
    background-color: #F2F2F2;
    padding-top: 45px;
    padding-bottom: 45px;
}

.unloggedFooterHelp-divider {
    display: flex;
    align-items: center;
}

.unloggedFooterHelp-image {
    width: 100px;
    height: 100px;
    margin-right: 55px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 100px;
}

.unloggedFooterHelp-description {
    flex: 1 1 auto;
    flex-direction: column;
}

.unloggedFooterHelp-title {
    font-size: 22px;
    font-weight: 900;
    color: #4A4A4A;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    max-width: 120px;
}

.unloggedFooterHelp-title:hover {
    text-decoration: underline;
}

.unloggedFooterHelp-text {
    display: flex;
}

.unloggedFooterHelp-textLeft {
    margin-right: 55px;
}

.unloggedFooterHelp-textLeft,
.unloggedFooterHelp-textRight {
    flex: 1 1;
    font-size: 14px;
    line-height: 22px;
}

.unloggedFooterHelp-mail {
  text-decoration: none !important;
}

:host {
  position: relative;
  background-repeat: no-repeat;
  background-size: auto 101%;
  -webkit-box-shadow: 0 0 2.5vw 0.5vw rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 0 0 2.5vw 0.5vw rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 2.5vw 0.5vw rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

:host(.landingPageCarouselCard--active) {
  cursor: initial;
}

:host * {
  pointer-events: none;
}

:host h2 {
  margin-top: 11px;
}

:host(.landingPageCarouselCard--active) * {
  pointer-events: initial;
}

/* ======================== INACTIVE BLEND */

.landingPageCarouselCard-inactiveBlend {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #5e5e5e;
  opacity: 0.55;
  transition: opacity 0.3s ease-in-out;
}

:host(:hover) .landingPageCarouselCard-inactiveBlend {
  opacity: 0.25;
}

:host(.landingPageCarouselCard--active) .landingPageCarouselCard-inactiveBlend {
  opacity: 0;
}

/* ======================== ACTIVE GRADIENT */

.landingPageCarouselCard-activeGradient {
  position: absolute;
  top: 35%;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
  transition: all 0.3s ease-in-out;
}

:host(.landingPageCarouselCard--active) .landingPageCarouselCard-activeGradient {
  opacity: 1;
}

/* ======================== TITLE */

.landingPageCarouselCard-title {
  position: absolute;
  top: 7%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: calc(28.4em - 170px);
  padding-right: calc(6em - 36px);
  transition: background-color 0.3s ease-in-out, border-radius 0.2s ease-out 0.2s;
  height: calc(80em - 480px);
  background-color: #FFFFFF;
  box-shadow: 0 0 calc(10em - 60px) 0 rgba(0, 0, 0, 0.1);
}

.landingPageCarouselCard-title--leftRound {
  border-bottom-left-radius: calc(40em - 240px);
  border-top-left-radius: calc(40em - 240px);
}

.landingPageCarouselCard-title--rightRound {
  border-bottom-right-radius: calc(40em - 240px);
  border-top-right-radius: calc(40em - 240px);
}

:host(.landingPageCarouselCard--active) .landingPageCarouselCard-title {
    transition: background-color 0.3s ease-in-out, border-radius 0.2s ease-in;
    background-color: #20A78A;
}

.landingPageCarouselCard-title-number {
    border-radius: 50%;
    width: calc(24em - 144px);
    height: calc(24em - 144px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: calc(2em - 12px) solid #2C75C9;
    transition: all 0.3s ease-in-out;
    transition-property: border-color, background-color, color;
    color: #2C75C9;
    margin-right: calc(10em - 60px);
}

.landingPageCarouselCard-title-number > span {
  font-size: calc(14em - 84px);
  font-weight: bold;
}

:host(.landingPageCarouselCard--active) .landingPageCarouselCard-title-number {
    color: white;
    background-color: #1C856E;
    border-color: #1C856E;
}

.landingPageCarouselCard-title-text {
  display: flex;
  align-items: center;
  font-size: calc(20em - 120px);
  font-weight: bold;
  color: #78797C;
  transition: color 0.3s ease-in-out;
}

:host(.landingPageCarouselCard--active) .landingPageCarouselCard-title-text {
  color: white;
}

.landingPageCarouselCard-title-arrowContainer {
  position: absolute;
  left: 100%;
  top: 0;
  height: 0;
  border-top: calc(40em - 240px) solid transparent;
  border-bottom: calc(40em - 240px) solid transparent;
  border-left: calc(22.4em - 134px) solid white;
  transition: border-left-color 0.3s ease-in-out, border-left-width 0.2s ease-in;
  transition-property: border-left-color, border-left-width;
}

.landingPageCarouselCard-title-arrowContainer--hidden {
  border-left-width: 0;
}

:host(.landingPageCarouselCard--active) .landingPageCarouselCard-title-arrowContainer {
    border-left-color: #20A78A;
    transition: border-left-color 0.3s ease-in-out, border-left-width 0.2s ease-out 0.2s;
}

/* ======================== DESCRIPTIONS */

.landingPageCarouselCard-descriptionContainer {
  position: absolute;
  display: flex;
  height: 86%;
  flex-direction: column;
  justify-content: flex-end;
}

.landingPageCarouselCard-descriptionWrapper {
  padding-left: calc(20em - 120px);
}

.landingPageCarouselCard-description {
  color: #FFFFFF;
  line-height: calc(40em - 240px);
  margin-bottom: calc(10em - 60px);
  position: relative;
  top: calc(10em - 60px);
  opacity: 0;
  transition: all 0.3s ease-in-out 0.1s;
  transition-property: opacity, top;
  text-shadow: calc(1.5em - 9px) calc(2.3em - 14px) 0 rgba(0, 0, 0, 0.5);
}

.landingPageCarouselCard-description h2 {
  font-size: calc(36em - 216px);
  line-height: normal;
  font-weight: 900;
  display: inline;
}

:host(.landingPageCarouselCard--active) .landingPageCarouselCard-description {
  transition: all 0.3s ease-in-out 0.0s;
  transition-property: opacity, top;
}

.landingPageCarouselCard-secondaryDescription {
  color: #FFFFFF;
  line-height: calc(22em - 132px);
  position: relative;
  transition: all 0.3s ease-in-out 0.1s;
  top: calc(10em - 60px);
  transition-property: opacity, top;
  opacity: 0;
  text-shadow: calc(1em - 6px) calc(2em - 12px) 0 rgba(0, 0, 0, 0.5);
  margin-bottom: calc(10em - 60px);
}

.landingPageCarouselCard-secondaryDescription h3 {
  font-size: calc(16em - 96px);
  line-height: normal;
  display: inline;
}

:host(.landingPageCarouselCard--active) .landingPageCarouselCard-secondaryDescription {
  transition: all 0.3s ease-in-out 0.2s;
  transition-property: opacity, top;
}

.landingPageCarouselCard-content {
  position: relative;
  top: calc(10em - 60px);
  opacity: 0;
  transition: all 0.3s ease-in-out 0.1s;
  transition-property: opacity, top;
}

:host(.landingPageCarouselCard--active) .landingPageCarouselCard-content {
  transition: all 0.3s ease-in-out 0.3s;
  transition-property: opacity, top;
  pointer-events: all;
}

:host(.landingPageCarouselCard--active) .landingPageCarouselCard-description,
:host(.landingPageCarouselCard--active) .landingPageCarouselCard-secondaryDescription,
:host(.landingPageCarouselCard--active) .landingPageCarouselCard-content {
  top: 0;
  opacity: 1;
}

/* ======================= IE / EDGE FIXES */

/* EDGE */
@supports (-ms-ime-align:auto) {
  .landingPageCarouselCard-secondaryDescription {
    text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .landingPageCarouselCard-description {
    text-shadow: 1.5px 2.3px 0 rgba(0, 0, 0, 0.5);
  }
}

/* IE 9+ */
@media screen and (min-width: 0\0
) {
  .landingPageCarouselCard-secondaryDescription {
    text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.5);
  }

  .landingPageCarouselCard-description {
    text-shadow: 1.5px 2.3px 0 rgba(0, 0, 0, 0.5);
  }
}

:host {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1 0 auto;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 70px;
  background-size: cover;
}

.quick-pin-login-form-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: end;
  align-items: end;
}

.quick-pin-login-form {
  background-color: #FFFFFF;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: 400px;
}

.main-navigation-item {
    text-align: center;
    color: #7C8CAD;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
    cursor: pointer;
    transition: color 0.2s;
}

.main-navigation-item--highlighted {
    color: #0d7bb8;
}

.main-navigation-item:hover {
    color: #0d7bb8;
    text-decoration: none;
}

.main-navigation-item-title {
    font-size: 14px;
    text-overflow: ellipsis;
    margin: 0;
}

.main-navigation-item-icon {
    font-size: 28px;
    margin-bottom: -2px;
}

:host .cap-sci-course-selector {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
}

:host .commonButton {
  background-color: white;
}

:host .cap-sci-course-button:hover {
  background-color: #26C7A3 !important;
  color: #000000;
}

:host .cap-sci-course-button--selected {
  font-weight: bold;
  border: 2px solid white;
}

:host .cap-sci-course-selector button:not(:last-child) {
  margin-right: 20px;
}

:host .unit-container {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

:host .ckit-course-selector {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
}

:host .course-button:hover {
  background-color: #26C7A3 !important;
  color: #000000;
}

:host .course-button--selected {
  font-weight: bold;
  border: 2px solid #26C7A3;
}

:host .ckit-course-selector button:not(:last-child) {
  margin-right: 20px;
}

:host .ckit-unit-wrapper {
  margin-top: 40px;
  width: 100%;
  table-layout: fixed;
}

:host .ckit-unit-row {
  height: 250px;
}

:host .ckit-unit-name {
  max-height: 50px;
  margin: auto 8px;
}

:host .ckit-unit-row:not(:last-child) {
  margin-bottom: 20px;
}

:host .ckit-unit-name-cell {
  text-align: start;
  font-family: "LuloCleanOne", Helvetica, Arial, sans-serif;
  font-weight: bolder;
  font-size: 14px;
  color: #000000;
  width: 270px;
}

:host .ckit-unit-products {
  width: 100%;
}

:host .ckit-unit-name-cell .table-cell-background {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

:host .ckit-unit-products .table-cell-background {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

:host .table-cell-background {
  background-color: #D3D3DC;
  min-width: 110px;
  height: 60px;
  display: flex;
  align-content: center;
  align-items: center;
}

:host .ckit-unit-products .table-cell-background {
  width: 100%;
}

:host {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.open_sci_ed-product-line-header__menu {
  display: flex;
  align-items: center;
}

:host .open-sci-ed-grade-header {
  width: 100%;
  height: 50px;
  border-radius: 5px;
  padding: 15px;
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 30px;
}

.open-sci-ed-grades-wrapper {
  display: flex;
  flex-direction: row;
  margin: 50px auto;
}

.open_sci_ed-product-line__products-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-right: 30px;
  width: 250px
}

.open-sci-ed-handbook-button {
  width: 200px;
  height: 50px;
  background-color: #0210ac;
  white-space: break-spaces;
  line-height: 16px;
  border-radius: 5px;
}

open-sci-ed-product-item {
  margin-bottom: 20px;
}

:host {
  font-family: "Myriad Pro Bold Condensed";
}
.stcms-all-subjects-wrapper {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.stcms-subject-wrapper {
  background-size: cover !important;
  display: flex;
  flex-direction: column;
  padding: 0 15px;
  width: 260px;
  height: 1350px;
  align-items: center;
}

.stcms-subject-title {
  font-family: "Myriad Pro Bold Condensed";
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  margin: 20px 0;
}

.stcms-subject-earth-science {
  color: #3A7C2C;
  background: url('images/stcms/earth-background.jpg') no-repeat center center;
}

.stcms-subject-life-science {
  color: #027DC0;
  background: url('images/stcms/life-background.jpg') no-repeat center center;
}

.stcms-subject-physical-science {
  color: #771D7B;
  background: url('images/stcms/physical-background.jpg') no-repeat center center;
}

.stcms-subject-research-module {
  color: #CC6C18;
  background: url('images/stcms/research-background.jpg') no-repeat center center;
}

:host {
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-tabs-component {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  z-index: 0;
}

.product-tabs-bottom-container {
  background-color: #d3d3dc;
  padding-top: 30px;
  padding-bottom: 50px;
  flex: 1 0 auto;
}

.product-tabs-component .content-background {
  background-color: #ffffff;
  border-radius: 0 5px 5px 5px;
  position: relative;
  padding: 20px;
  min-height: 300px;
}

.product-tabs-component .content-background.content-background-single {
  border-radius: 5px;
}

:host loading-cover {
  z-index: 1;
}

.product-tabs-bottom-container .content {
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  width: 100%;
  margin: 20px;
}

.product-tabs-loadingSpinner-container {
  display: flex;
  justify-content: center;
}

.product-tabs-loadingSpinner {
  flex: 0 1 130px;
}

:host {
  min-width: 682px;
  display: block;
  padding: 0 30px;
}

:host .field-description {
  height: 132px;
  resize: none;
}

:host >>> popup-header {
  padding: 20px 0;
}

:host .popupBody {
  padding: 10px 0 0 0;
  margin-top: 18px;
}

:host .popupFooter {
  padding: 30px 0px;
}

.local-upload {
  position: relative;
  width: 100%;
  height: 268px;
}

.fileUpload {
  position: relative;
  overflow: hidden;
}

.popup-local-upload-area {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #D3D3DC;
  border: 2px dashed #D3D3DC;
  border-radius: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.popup-local-upload-label {
  position: absolute;
  top: 38px;
  width: 100%;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #69789D;
  text-align: center;
  line-height: 16px;
}

.add-file-icon {
  display: flex;
  width: 100%;
  margin-top: 80px;
  justify-content: center;
}

.add-file-ract-dashed {
  margin-top: 15px;
  margin-left: 0px;
  box-sizing: border-box;
  height: 62px;
  width: 47px;
  border: 2px dotted #9CAFDA;
  background-color: #FFFFFF;
  border-radius: 3px;
}

.add-file-rect-solid {
  margin-top: 0px;
  margin-left: -35px;
  height: 60px;
  width: 45px;
}

.rect-solid-cut-corner {
  margin-top:10px;
  width: 45px;
  height: 50px;
  background-color: #9CAFDA;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  position: relative;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
}

.has-error .rect-solid-cut-corner {
  background-color: #C90017;
}

.rect-solid-cut-corner:before {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 10px solid #9CAFDA;
  border-right: 10px solid transparent;
  position: absolute;
  top:-10px;
  left:35px
}

.has-error .rect-solid-cut-corner:before {
  border-bottom: 10px solid #C90017;
}

.rect-solid-cut-corner:after {
  content: "";
  position: absolute;
  top:-10px;
  left:0;
  background-color: #9CAFDA;
  border-top-left-radius: 3px;
  width:35px;
  height:10px;
}

.has-error .rect-solid-cut-corner:after {
  background-color: #C90017;
}

.rect-solid-bottom {
  margin-top: 0px;
  margin-left: -30px;
  background-color: #9CAFDA;
  border-top-left-radius: 3px;
  width:35px;
  height:10px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
}

.di {
  font-size: 40px;
  line-height: 60px;
  height: 60px
}

.popup-upload-actionButton {
  cursor: pointer;
  height: 35px;
  border-radius: 3px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-upload-actionButton:hover {
  background-color: #26C7A3;
}

.popup-upload-buttonLabel {
  margin-left: 15px;
  margin-right: 15px;
}

.browse-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 37px;
}

.browseBtn {
  background-color: #EAE9EC00;
  border: 1px solid #9CAFDA;
  color: #69789D;
}

.browseBtn:hover {
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}

.cancelBtn {
  margin-left: 30px;
  background-color: #EAE9EC00;
  border: 1px solid #9CAFDA;
  color: #69789D;
  margin-top: 25px;
}

.cancelBtn:hover {
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}


.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

input[type="file"].local-upload-input {
  width: 100%;
  height: 100%;
}

.popup-divider {
  width: 100%;
  height: 30px;
  margin: 20px 0;
  text-align: center;
}

.popup-divider > hr {
  width: 45%;
  height: 15px;
  margin: 10px 0 0;
  border-top: 3px solid #D3D3DC;
}

.popup-divider-text {
  font-weight: 600;
  font-size: 14px;
  color: #69789D;
  text-align: center;
  line-height: 23px;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.drop-zone-header {
  color: #454E5C;
  font-size: 12px;
  font-weight: 600;
  line-height: 19px;
}

.lightText {
  color: #96A8D7;
}

.disabled-input-field {
  background-color: #EAE9EC;
}

.inputField {
  width: 100%;
}

.summary-info {
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  text-align: left;
  color: #27BF92;
}

.has-error .summary-info {
  color: #C90017;
}

.info-success {
  text-align: center;
}

.summary-image {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 15px;
  display: flex;
  justify-content: center;
}

.summary-image label {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  position: absolute;
  width: 100%;
  margin-left: -15px;
  margin-top: 25px;
}

.file-description {
  margin-bottom: 15px;
  color: #454E5C;
}

.has-error .file-description {
  color: #C90017;
}

.file-name {
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
}

.file-size {
  font-size: 12px;
  line-height: 16px;
  font-weight: 100;
  text-align: center;
}

.space-description {
}

.has-error .space-description {
  color: #C90017;
}

.space-info {
  font-size: 13px;
  line-height: 22px;
  font-weight: 100;
  text-align: center;
  opacity: 0.75;
}

.add-file-progess-bar {
  height: 35px;
  width: 100%;
}

.add-file-upload-progress {
  display: flex;
  justify-content: space-between;
}

.add-file-progess-bar-background {
  height: 35px;
  width: 100%;
  border-radius: 17px;
  background-color: #EAE9EC;
}

.add-file-progess-bar-progress {
  height: 35px;
  border-radius: 17px;
  background-color: #26C7A3;
  margin-top: -35px;
}

.upload-labels {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.uploadLabel {
  color: #454E5C;
  font-size: 12px;
  font-weight: 600;
  line-height: 19px;
  text-align: left;
  margin-left: 16px;
}

.percentageProgressLabel {
  color: #69789D;
  font-size: 16px;
  line-height: 16px;
  text-align: right;
  float: right;
}

:host {
  width: 682px;
  padding: 0 30px;
}

:host .field-description {
  height: 132px;
  resize: none;
}

:host >>> popup-header {
  padding: 20px 0;
}

:host .popupBody {
  padding: 10px 0 0 0;
}

:host .popupFooter {
  padding: 30px 20px;

}

:host {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  padding: 0 30px;
  background-color: transparent;
}

:host .field-description {
  height: 132px;
  resize: none;
}

:host >>> popup-header {
  padding: 20px 0;
}

:host >>> popup-header .close-btn {
  align-self: flex-start;
}

:host .popupBody {
  padding: 0;
}

.resourceDetails-field {
  font-weight: 600;
  color: black;
  line-height: 20px;
}

.resourceDetails-field-description {
  font-weight: 500;
}

.resourceDetails-keywordsWrapper {
  display: flex;
  flex-wrap: wrap;
}

.resourceDetails-coverWrapper {
  display: flex;
  justify-content: center;
  min-width: 500px;
  min-height: 300px;
  max-height: 90vh;
  max-width: calc(100% - 2*410px);
  position: relative;
  align-items: center;
  background-color: #d7d7dc;
  color: #9b9b9b;
  border-radius: 5px;
}

.resource-cover {
  max-width: 100%;
  max-height: 95vh;
  border-radius: 5px;
  box-shadow: 0 0 40px 0 rgba(0,0,0,0.3);
  width: 100%;
  height: 100%;
}

.coverContainer {
  max-height: 90vh;
  max-width: calc(100% - 2*410px);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.playButton {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  height: 100px;
  width: 100px;
  background-color: #FFFFFF;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
  border-radius: 50%;
  font-size: 40px;
  padding-left: 5px;
  cursor: pointer;
  transition: all 0.20s ease-in-out;
}

.playButton:hover {
  color: #26C7A3;
}

.noCover {
  width: 8em;
  height: 6em;
  font-size: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.resourceDetails-detailsWrapper {
  background: #FFFFFF;
  position: absolute;
  -ms-transform: translateY(-50%);
  right: 10px;
  align-items: baseline;
  max-height: 90%;
  overflow-y: auto;
  width: 410px;
  padding: 0 10px 0 25px;
  border-radius: 5px 0 0 5px;
  box-shadow: -20px 0 40px 0 rgba(0,0,0,0.2);
  animation: slideInFromRight 0.3s ease-out 0s 1;
}

.resourceDetails-detailsWrapper.closing {
  animation: slideOutToRight 0.3s ease-in 0s 1;
}

:host .popupFooter {
  padding: 30px 20px;
  display: flex;
  justify-content: center;
}


/* ANIMATIONS */

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
    -ms-transform: translateX(100%) translateY(-50%);
  }
  100% {
    transform: translateX(0%);
    -ms-transform: translateX(0%) translateY(-50%);
  }
}

@keyframes slideOutToRight {
  0% {
    transform: translateX(0%);
    -ms-transform: translateX(0%) translateY(-50%);
  }
  100% {
    transform: translateX(100%);
    -ms-transform: translateX(100%) translateY(-50%);
  }
}

:host {
  display: flex;
}

.backButton {
  margin-right: 12px;
}
.backButton view-header-button {
  height: 25px;
  line-height: 25px;
  font-size: 14px;
  margin-right: 0!important;
}

.backButton-inactive {
  pointer-events: none;
  opacity: 0.5;
}

:host {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

:host iframe {
  max-width: 100%;
  transition: height 0.2s ease-in-out;
}

:host {
    overflow-y: auto;
    display: block;
}

:host(.display-tile) {
  display: flex;
}

:host #checkbox-label {
  cursor: pointer;
  display: flex;
  margin: 10px 0 20px 5px;
}

:host #checkbox-label > div {
  margin-right: 5px;
  width: 14px;
}

:host #checkbox-label > div:focus {
  outline-color: #73738C !important;
}

.cloud-picker {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 60px;
  text-align: center;
}

.cloud-picker-option {
  height: 60px;
  width: 40%;
  text-align: center;
  border: 1px dashed #868686;
  padding: 0;
  margin: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.cloud-picker-option.dropbox {
  background-image: url('../../../../images/cloud/dropbox/Dropbox.png');
}

.cloud-picker-option.onedrive {
  background-image: url('../../../../images/cloud/onedrive/OneDrive.png');
}

.cloud-picker-option.googledrive {
  background-image: url('../../../../images/cloud/googledrive/GoogleDrive.png');
}

.cloud-picker-option > a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 60px;
  font-weight: bold;
}

.cloud-picker-logo {
  max-height: 60px;
}

.cloud-picker-option.is-disabled {
  border: 1px dashed #ccc;
}

.cloud-picker-option.is-disabled > a {
  color: #ccc;
  cursor: default;
}

.cloud-picker-option.is-disabled {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

:host {
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    display: block;
    position: relative;
    pointer-events: all;
    cursor: pointer;
}

:host(.customScrollbar--horizontal) {
    height: 14px;
    width: 100%;
}

:host:not(.customScrollbar--horizontal) {
    width: 14px;
    height: 100%;
}

.customScrollbar-padder {
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
}

.customScrollbar-indicator {
    position: absolute;
    top: 1px;
    left: 1px;
    background-color: white;
    border-radius: 6px;
    transition: all 0.05s ease-in-out;
}

:host(.customScrollbar--horizontal) .customScrollbar-indicator {
    bottom: 1px;
}

:host:not(.customScrollbar--horizontal) .customScrollbar-indicator {
    right: 1px;
}

:host {
  display: block;
  height: 42px;
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  padding: 0 10px;
}

:host .select-header {
  line-height: 40px !important;
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

:host .select--expanded {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.toggleDropdown-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-left: 5px;
  color: #9CAFDA;
  transition: all 0.2s ease-in-out;
  transform-origin: center center;
}

:host .select--expanded .toggleDropdown-btn {
  transform: rotate(180deg);
}

:host dropdown {
  width: 100%;
  background-color: #F9F9F9;
  border: 1px solid #D7D7DC;
  border-top: none;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  z-index: 2;
  top: 105%;
  left: 0;
}

:host(.mainSelect--disabled) {
  opacity: 0.7;
}

/***
  Select Item
***/

:host .selectItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10px;
  justify-content: space-between;
  height: 40px;
  width: 100%;
  color: rgba(0,0,0,0.7);
  cursor: pointer;
}

:host .selectItem:hover {
  color: #27BF92;
  background-color: rgba(38,199,163,0.1);
}

:host .selectItem--selected {
  color: #27BF92;
}

.selectedTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}


/***
  Theme blue
***/
:host(.custom-select--theme-blue) .selectItem:hover {
  color: #389BFF;
  background-color: rgba(56, 155, 255, 0.15);
}

:host(.custom-select--theme-blue) .selectItem--selected {
  color: #389BFF;
}

.datepicker-innerContainer {
    display: none;
}

:host {
    color: black;
}
.chartContainer {
    position: relative;
}

.doughnutChart {
    width: 240px;
    height: 240px;
}

:host .chartLabel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -5px;
}

.valueLabel {
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    line-height: 43px;
}

.additionalLabel {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 23px;
    color: #69789D;
    margin-top: -15px;
}

.chartContainer {
    position: relative;
}

.doughnutChart {
    width: 240px;
    height: 240px;
}

:host .chartLabel {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -5px;
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    line-height: 43px;
    color: #A1C9E7;
}

.darkText {
    color: #FFFFFF;
}
:host {
    position: absolute;
    top: 100%;
    opacity: 0;
    transition: all 0.15s ease-in-out;
    transition-property: opacity, transform;
    pointer-events: none;
    overflow: hidden;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    transform: rotateX(90deg);
    transform-origin: top center;
    background-color: #26C7A3;
}

:host(.dropdown--visible) {
    opacity: 1;
    pointer-events: auto;
    transform: rotateX(0deg);
}

:host(.dropdown--noTransition) {
    transition: none;
}

:host {
    position: relative;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
}

.filter {
    background-color: white;
    height: 30px;
    color: #454E5C;
    font-size: 14px;
    font-weight: 500;
    border-radius: 2px;
    vertical-align: middle;
    padding: 0 10px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    position: relative;
}

.filter-backdrop {
    background-color: #23B597;
    border-radius: 2px;
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    transition: all 0.3s ease-in-out;
}

.filter-backdrop--visible {
    top: 2px;
    opacity: 1;
}

.filter-plusIcon {
    margin-left: 8px;
    color: #57616F;
    font-size: 8px;
    transition: color 0.2s ease-in-out, transform 0.3s ease-in-out;
}

.filter dropdown {
    z-index: 1;
    left: 0;
    min-width: 100%;
    color: white;
}

.filter--highlighted {
    color: #26C7A3;
}

.filter:hover,
.filter--active {
    background-color: #23B597;
    color: white;
}

.filter:hover .filter-plusIcon,
.filter--active .filter-plusIcon {
    color: white;
}

.filter--active .filter-plusIcon {
    transform: rotate(360deg);
}

.filter-dropdownItem {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    white-space: nowrap;
    height: 30px;
    vertical-align: middle;
    padding-left: 8px;
    padding-right: 15px;
    line-height: 30px;
}

.filter-dropdownItem-checkbox {
    margin-right: 6px;
}

.filter-dropdownItem--selected {
    color: #0070BE;
}

.filter-dropdownItem:hover {
    color: white;
    background-color: #0070BE;
}


:host {
  display: flex;
}

:host search-input {
  width: 100%;
}

.focusSearch-optionSelect {
  position: relative;
  min-width: 100px;
}

.focusSearch-dropdown {
  right: 0;
  width: 100%;
}

.focusSearch-dropdown-item {
  color: white;
  transition: all 0.2s ease-in-out;
  padding-left: 10px;
  height: 30px;
  cursor: pointer;
  line-height: 30px;
}

.focusSearch-dropdown-item:hover {
  background-color: #003C98;
}

:host {
  color: #C30016;
  font-size: 12px;
  margin-top: 3px;
  display: block;
}

:host p {
  margin-bottom: 0;
}


:host {
    display: inline-block;
    height: 40px;
    width: 40px;
    font-size: 24px;
    transition: all 0.2s ease-in-out;
    color: #7C8CAD;
    line-height: 42px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    flex: 0 0 auto;
}

:host:hover {
    background-color: #26C7A3;
    color: white;
}

:host i:before {
  transition: transform 0.3s ease-in-out;
}

:host(.icon-button--rotated) i:before {
  transform: rotateZ(180deg);
}

/* ============== BORDERED STYLING ============== */
:host(.icon-button--bordered) {
  border: 1px solid #D3D3DC;
  font-size: 18px;
}

:host(.icon-button--bordered):hover {
  background-color: #26C7A3;
  border: 1px solid #26C7A3;
  color: white;
}


:host {
  border: 1px solid #D3D3DC;
  border-radius: 5px;
  padding: 5px 10px;
  line-height: 25px;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  color: #0B5AB0;
  font-size: 14px;
  font-weight: 600;
  margin: 5px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: all 0.20s ease-in-out;
}

:host(:hover) {
  background-color: #26C7A3;
  color: white;
}


:host {
    display: block;
    position: relative;
    height: 100%;
    -webkit-overflow-scrolling: auto;
}

:host bottom-scroll {
    height: 100%;
    width: 100%;
    -webkit-overflow-scrolling: auto;
}

.lazyLoading-loader {
    height: 50px;
    position: relative;
    margin: 10px 0;
}

:host {
  display: flex;
  flex-direction: column;
}

:host tabs {
  margin-left: 30px;
}

:host > div {
  flex: 1 0;
  background-color: white;
}

.massSelection-chooseTab {
  display: flex;
  position: relative;
}

.massSelection-selectTab {
  position: relative;
  flex-direction: column;
  display: flex;
}

.massSelection-selectTab--hidden {
  display: none;
}

.massSelection-menu {
  flex: 5;
  border-right: 2px solid #EAE9EC;
  position: relative;
  padding: 10px 0 10px 10px;
}

:host mass-selection-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.massSelection-chooseList {
  flex: 9;
  display: flex;
  flex-direction: column;
}

.massSelection-chooseTab--hidden {
  display: none;
}

.massSelection-chooseList-wrapper {
  position: relative;
  flex: 1;
  box-shadow: inset 3px 48px 55px -50px rgba(0,0,0,0.07);
}

.massSelection-chooseList-controls {
  height: 45px;
  padding-right: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.massSelection-chooseList-wrapper lazy-loading {
  position: absolute;
  left: 10px;
  right: 5px;
  top: 0;
  bottom: 0;
}

.massSelection-selectedList {
  flex: 1 0;
  position: relative;
  box-shadow: inset 3px 48px 55px -50px rgba(0,0,0,0.07);
}

.massSelection-selectedList-wrapper {
  position: absolute;
  left: 10px;
  right: 5px;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.massSelection-massSelect {
  text-transform: uppercase;
  color: #69789D;
  font-size: 10px;
  font-weight: 600;
  padding: 0 10px;
  transition: color 0.2s ease-in-out;
  cursor: pointer;
}

.massSelection-noStudents {
  display: flex;
  justify-content: center;
  padding: 20px 20px;
  font-size: 16px;
  color: #69789D;
}

.massSelection-massSelect:hover {
  color: #52D3B6;
}

.massSelection-selectedList-controls {
  height: 45px;
  padding-right: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@keyframes creation {
  from {
    opacity:0;
    transform: translateY(10px);
  }
  to {
    opacity:1;
    transform: translateY(0);
  }
}

:host {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1135;
  color: #ffffff;
}

:host(.mass-selection-ribbon--hidden) {
  visibility: hidden;
}

.mass-selection-ribbon-buttons {
  display: flex;
  flex: 1;
  opacity: 1;
  justify-content: space-between;
  margin: 10px 0;
}

:host(.mass-selection-ribbon--hidden) .remove-students-ribbon-buttons {
  opacity: 0;
}

.buttonsContainer {
  display: flex;
}

:host >>> .buttonsContainer view-header-button {
  border: 2px solid #FFFFFF;
  height: 44px;
  color: #ffffff;
  background-color: #0070BE;
  font-size: 16px;
  font-weight: 600;
  line-height: 44px;
  padding: 0 10px;
  margin-right: 18px;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

:host >>> .buttonsContainer view-header-button:hover {
  color: #ffffff;
  background-color: #26C7A3;
}

:host >>> .mass-selection-ribbon-buttons .buttonsContainer:last-child view-header-button {
  background-color: #D0021B;
  border: 2px;
  margin-left: 20px;
}

:host >>> .mass-selection-ribbon-buttons .buttonsContainer:last-child view-header-button:hover {
  color: #ffffff;
  background-color: #26C7A3;
}

.mass-selection-ribbon {
  padding: 0 150px 0 20px;
  align-items: center;
  justify-content: space-around;
  display: flex;
  flex-direction: row;
  background-color: #0070BE;
}

.mass-selection-ribbon-label {
  margin: 20px 38px 15px 150px;
  display: flex;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
}




:host {
  display: flex;
}

.miniStepper-step {
  width: 20px;
  height: 4px;
  background-color: white;
  border-radius: 3px;
  transition: opacity 0.2s ease-in-out;
}

.miniStepper-step:not(:last-child) {
  margin-right: 5px;
}

.miniStepper-step--inactive {
  opacity: 0.5;
}

:host {
  display: flex;
  height: auto !important;
}

:host .multiSelectInput-elementsContainer {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 132px;
}

:host .multiSelectInput-element {
  border: 1px solid #D7D7DC;
  border-radius: 3px;
  padding: 5px 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  margin-bottom: 3px;
  font-size: 0.7em;
  line-height: 100%;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  height: 23px;
}

:host .multiSelectInput-element--lastInserted {
  animation: multiSelectInput-insertedElementPulse 0.8s none;
}

:host .multiSelectInput-element:hover {
  color: white !important;
  background: #D0021B !important;
  border-color: #D0021B !important;
}

:host .multiSelectInput-textInput {
  border: none;
  display: inline-flex;
  width: auto;
  height: 23px;
  min-height: 0;
  font-size: 0.7em;
  padding: 5px 8px;
  flex: 1 1 auto;
}

:host .ng-touched.ng-invalid,
:host .ng-dirty.ng-invalid {
  color: #C5021A;
}

/*
  DISABLED STATE
*/

:host(.multiSelectInput--disabled) {
  pointer-events: none;
}


:host(.multiSelectInput--disabled) .multiSelectInput-textInput {
  display: none;
}


/*
  ANIMATION DEFINITION
*/

@keyframes multiSelectInput-insertedElementPulse {
  0% {
    background-color: inherit;
    border-color: #D7D7DC;
    color: inherit
  }
  30%, 50% {
    background-color: #26C7A3;
    border-color: #26C7A3;
    color: #FFFFFF;
  }
  100% {
    background-color: inherit;
    border-color: #D7D7DC;
    color: inherit;
  }
}

:host {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  background: white;
}

:host .thumbnail-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

:host .thumbnail-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 3em;
  background: #D3D3DC;
  color: #69789D;
}

:host(.thumbnails-count--1) .thumbnail-0{
  width: 100%;
  height: 100%;
  font-size: 2em;
}

:host(.thumbnails-count--1) .thumbnail-0 img {
  max-width: 100%;
  max-height: 100%;
}


:host(.thumbnails-count--2) .thumbnail-0 {
  width: calc(50% - 1px);
  height: 100%;
  margin-right: 1px;
}

:host(.thumbnails-count--2) .thumbnail-0 img {
  max-width: 256px;
  max-height: 100%;
}

:host(.thumbnails-count--2) .thumbnail-1 {
  width: 50%;
  height: 100%;
}

:host(.thumbnails-count--2) .thumbnail-1 img {
  max-width: 256px;
  max-height: 100%;
}


:host(.thumbnails-count--3) .thumbnail-0{
  width: calc(50% - 1px);
  height: 100%;
  margin-right: 1px;
}

:host(.thumbnails-count--3) .thumbnail-0 img {
  max-width: 256px;
  max-height: 100%;
}

:host(.thumbnails-count--3) .thumbnail-1 {
  width: 50%;
  height: calc(50% - 1px);
  margin-bottom: 1px;
}

:host(.thumbnails-count--3) .thumbnail-1 img {
  max-width: 100%;
  max-height: 100%;
}

:host(.thumbnails-count--3) .thumbnail-2 {
  width: 50%;
  height: 50%;
}

:host(.thumbnails-count--3) .thumbnail-2 img {
  max-width: 100%;
  max-height: 100%;
}


:host(.thumbnails-count--4) .thumbnail-0 {
  width: calc(50% - 1px);
  height: calc(50% - 1px);
  margin-bottom: 1px;
  margin-right: 1px;
}

:host(.thumbnails-count--4) .thumbnail-0 img {
  max-width: 100%;
  max-height: 100%;
}

:host(.thumbnails-count--4) .thumbnail-1 {
  width: 50%;
  height: 50%;
}

:host(.thumbnails-count--4) .thumbnail-1 img {
  max-width: 100%;
  max-height: 100%;
}

:host(.thumbnails-count--4) .thumbnail-2 {
  width: 50%;
  height: 50%;
}

:host(.thumbnails-count--4) .thumbnail-2 img {
  max-width: 100%;
  max-height: 100%;
}

:host(.thumbnails-count--4) .thumbnail-3 {
  width: calc(50% - 1px);
  height: calc(50% - 1px);
  margin-top: 1px;
  margin-left: 1px;
}

:host(.thumbnails-count--4) .thumbnail-3 img {
  max-width: 100%;
  max-height: 100%;
}

:host >>> tabs {
  display: flex;
}

:host >>> .my-membership-top-bar{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #69789D;
  font-size: 20px;
  margin-bottom: 10px;
}

:host >>> .my-membership-top-bar view-header-button{
  display: flex;
  background-color: rgba(0, 0, 0, 0);
  border:1px solid #D3D3DC;
}

:host >>> .my-membership-top-bar view-header-button:hover{
  display: flex;
  background-color: #26C7A3;
}

:host {
    font-size: 14px;
    font-weight: 500;
    color: #69789D;
    user-select: none;
    display: inline-flex;
    white-space: nowrap;
    align-items: baseline;
}


.paginator-button--active {
    color: #26C7A3;
    font-weight: 600;
}

.paginator-button {
    line-height: 32px;
    height: 30px;
    min-width: 25px;
    transition: all 0.3s ease-in-out;
    border-radius: 3px;
    padding: 0 6px;
    cursor: pointer;
    display: inline-flex;
    vertical-align: middle;
    justify-content: center;
}

.paginator-button:hover {
    background-color: #26C7A3;
    color: white;
}

.paginator-buttonIcon {
    font-size: 8px;
}

:host >>> .icon-dash-left {
    margin-right: 4px;
}

:host >>> .icon-dash-right {
    margin-left: 4px;
}

.paginator-pageNumberInput {
    background-color: #E2E3E9;
    border: 0;
    color: #69789D;
    border-radius: 3px;
    height: 30px;
    padding-left: 3px;
    width: 80px;
    box-shadow: none !important;
}

:host >>> form {
    display: inline-block;
}

.pieChartContainer {
    display: flex;
}

.pieChart {
    width: 240px;
    height: 240px;
}

.pie-chart-label {
    font-size: 20px;
}

line.pieline {
    stroke: #E9F0FF;
    stroke-linecap: squere;
    stroke-width: 1;
    pointer-events: none;
}

.pie-chart-legend {
    margin-top: 47px;
    margin-left: 0;
}

.legend-item {
    display: flex;
    margin-bottom: 13px;
    white-space: nowrap;
}

.legend-rect {
    height: 17px;
    width: 17px;
    border-radius: 1px;
}

.legend-label {
    height: 15px;
    font-size: 12px;
    font-weight: 500;
    line-height: 19px;
    margin-left: 5px;
}

.popup {
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    pointer-events: none;
    opacity: 0;
}

.popup-displayed {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.popup-background {
    background-color: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    animation-name: backgroundAppear;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 0.1s;
}

.popup-background-hidden {
    background-color: rgba(0,0,0,0);
}

.popup-content {
    background-color: transparent;
    width: auto;
    border-radius: 5px;
    box-shadow: 0 0 40px 0 rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0s linear 0s;
    position: relative;
    z-index: 2;
}

.popup-contentWrapper {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    animation-name: contentAppear;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-duration: 0.2s;
}

.popup-contentWrapper--smooth {
    transition: padding-top 0.15s ease-in-out, height 0.1s ease-in-out;
}

.popup-content-displayed {
    opacity: 1;
    transition: opacity 0.3s ease-in-out 0s;
}

/* Concrete popup default style */
.popup-body > * {
  display: block;
  max-width: 98vw;
  background-color: #FFFFFF;
  border-radius: 5px;
}

@keyframes contentAppear {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes backgroundAppear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.resource-player-list {
  display: flex;
  flex-wrap: wrap;
}

:host {
  height: 30px;
  border-radius: 3px;
  overflow: hidden;
  min-width: 100px;
}

.search-input-searchContainer {
  width: 100%;
  height: 100%;
}

.search-input-searchWrapper {
  width: 100%;
  display: flex;
  margin: 0;
  color: #7C8CAD;
  font-weight: 500;
  font-size: 14px;
  height: 100%;
  box-shadow: none !important;
  border-radius: 3px;
  position: relative;
}

.search-input-searchWrapper--clearable {
  background-color: #FFFFFF;
  color: #454E5C;
  border: 2px solid #26C7A3;
}

.search-input-searchBox {
  margin: 0;
  border: 0;
  background-color: transparent;
  color: #7C8CAD;
  font-weight: 500;
  font-size: 14px;
  height: 100%;
  box-shadow: none !important;
  box-sizing: border-box;
  flex: 1 0;
  border-radius: 3px 0 0 3px;
  padding-left: 10px;
  padding-right: 30px;
}

.search-input-searchBox:-webkit-autofill {
  -webkit-animation-name: input-autofill;
  -webkit-animation-fill-mode: both;
}

.search-input-searchBox--clearable {
  color: #454E5C;
}

.search-input-searchSubmit {
  margin: 0;
  border: 0;
  color: #7C8CAD;
  height: 100%;
  box-shadow: none !important;
  border-radius: 0 3px 3px 0;
  flex: 0 0;
  text-align: center;
  line-height: 26px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
}

.search-input-searchSubmit .search-input-iconBox {
  width: 30px;
  padding-right: 7px;
  padding-left: 7px;
}

.search-input-searchReset {
  color: #454E5C;
}

.search-input-searchReset i {
  font-size: 18px;
}

.search-input-searchSubmit, .search-input-searchReset i {
  transition: opacity 0.2s ease-in-out;
}

.search-input-searchBox {
  box-sizing: border-box;
  flex: 1 0;
  border-radius: 3px 0 0 3px;
  padding-left: 10px;
}


/* ============== LIGHT STYLING ============== */
:host(.search-input--light) {
  color: #D3D3DC;
  height: 40px;
}

:host(.search-input--light) .search-input-searchBox {
  background: transparent;
  border: 1px solid #D3D3DC;
}

:host(.search-input--light) .search-input-searchSubmit {
  background: transparent;
}

:host(.search-input--light) .search-input-searchWrapper{
  background-color: transparent;
  border: none;
}


@-webkit-keyframes input-autofill {
  to {
    color: #666;
    background: transparent;
  }
}

:host {
  display: block;
  height: 42px;
  position: relative;
  width: 100%;
  padding: 0 10px;
  opacity: 1;
  border: solid 2px;
  border-radius: 4px;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  border-color: inherit;
}

:host(.mainSelect--disabled) {
  opacity: 0.5;
}

:host .select-header {
  line-height: 40px !important;
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  min-height: 25px;
  padding: 0 5px;
}

:host .select-header-label {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #0D1C2E;
}

:host .select-header-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  margin-left: 15px;
}

:host .select--expanded {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

:host .select--expanded .toggleDropdown-btn {
  transform: rotate(180deg);
}

:host .toggleDropdown-btn {
  height: 100%;
  margin-left: 5px;
  color: #9CAFDA;
  transition: all 0.2s ease-in-out;
  transform-origin: center center;
}

:host .selectWrapper {
  max-height: 12.5em;
}

:host .select-dropdown {
  z-index: 100;
  top: 105%;
  left: 0;
  width: 100%;
  background-color: #F9F9F9;
}


:host .search-input {
  width: 100%;
  height: 50px;
  font-size: 15px;
  padding: 0 10px;
  border: none;
  color: #000000;
  background-color: #F9F9F9;
  caret-color: #27BF92;
  border-bottom: 1px solid #ececec;
}

:host .search-input:focus {
  box-shadow: none !important;
}

:host .unselectAll-btn {
  color: #69789D;
  font-size: 10px;
  font-weight: 600;
  text-align: right;
  margin-right: 10px;
}

:host {
    display: flex;
}

:host >>> sorting-button:not(:last-child) {
    margin-right: 10px;
}
:host {
  display: flex;
}

:host .step {
  display: flex;
  margin-right: 20px;
}

:host .stepIndex {
  width: 40px;
  height: 40px;
  font-weight: bold;
  border: 2px solid transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  transition-property: background-color, border-color;
  margin-right: 5px;
}

:host .stepDescription,
:host .stepTitle {
  transition: color 0.2s ease-in-out;
}

:host .stepDetails {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:host .stepTitle {
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

:host .stepDescription {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* STEP - PREVIOUS */

:host .step--prev .stepIndex {
  background-color: #7C8CAD;
  border-color: #7C8CAD;
  color: #f5f5f5;
}

:host .step--prev .stepTitle {
  color: #69789D;
}

:host .step--prev .stepDescription {
  color: #69789D;
}

/* STEP - CURRENT*/

:host .step--current .stepIndex {
  background-color: #26C7A3;
  border-color: #26C7A3;
  color: #FFFFFF;
}

:host .step--current .stepTitle {
  color: #27BF92;
}

:host .step--current .stepDescription {
  color: #454E5C;
}

/* STEP - NEXT */

:host .step--next .stepIndex {
  background-color: #FFFFFF;
  border-color: #8B9ED1;
  color: #8B9ED1;
  opacity: 0.8;
}

:host .step--next .stepTitle {
  color: #69789D;
}

:host .step--next .stepDescription {
  color: #8B9ED1;
}

:host {
  position: relative;
  display: block;
}

.sticky-wrapper {
  position: absolute;
}

.sticky-wrapper--sticky {
  position: fixed;
}
:host {
    position: relative;
    top: -9px;
}

.tableList {
    border-collapse: separate;
    border-spacing: 0 3px;
    position: relative;
    border: 0;
    padding: 0;
    font-size: 14px;
    width: 100%;
    font-weight: 500;
    color: #3b4662;
    vertical-align: middle;
    table-layout: fixed;
}

.tableList td {
    padding: 7px;
}

.tableList td {
    transition: all 0.2s ease-in-out;
    height: 30px;
}

.tableList td:nth-child(even),
.tableList th:nth-child(even){
    background-color: #F5F7FB;
}

.tableList td:nth-child(odd),
.tableList th:nth-child(odd){
    background-color: white;
}

.tableList th.tableList-headerGroup {
    background-color: transparent;
}

.tableList-headerGroup-titleWrapper {
    position: relative;
    width: 100%;
    height: 100%;
    top: 3px;
}

.tableList-headerGroup-title {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: white;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #69789D;
    font-weight: 600;
    font-size: 14px;
    line-height: 34px;
    text-align: center;
}

.tableList-headerGroup-titleWrapper {
    background-color: white;
}

.tableList-headerGroup-titleWrapper.tableList-headerGroup--visible {
    height: 34px;
}

.tableList th.tableList-headerCapCell {
    position: relative;
    height: 10px;
    background-color: transparent;
}

.tableList-headerCap {
    position: relative;
    top: 6px;
    height: 100%;
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: white;
}

.tableList-stickyHeader--sticky .tableList-headerCap {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.tableList tr {
    transition: box-shadow 0.2s ease-in-out;
}

.tableList tbody tr td {
    position: relative;
}

.tableList tbody tr:hover {
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
}

.tableList tbody tr:hover td:first-child{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.tableList tbody tr:hover td:last-child{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.tableList .tableList--mainItemProperty{
    color: #0B5AB0;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.tableList tbody tr:hover .tableList--mainItemProperty{
    color: #27BF92;
    text-decoration: underline;
}

.tableList tbody tr:hover td {
    color: #27BF92;
}

.tableList tbody tr:hover .tableList--hoverHighlight {
    color: #27BF92;
}

.tableList-stickyHeader {
    position: absolute;
    top: 3px;
    transition: box-shadow, opacity 0.2s ease-in-out;
    z-index: 2;
}
.tableList-stickyHeader.tableList-stickyHeader--sticky {
    position: fixed;
    top: 61px;
}

.tableList-stickyHeader--sticky tr {
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
}

.tableList-stickyHeader--hidden {
    opacity: 0;
    pointer-events: none;
}

.tableList-realHeader {
    visibility: hidden;
}

.tableList tbody tr:last-child td:first-child{
    border-bottom-left-radius: 6px;
}

.tableList tbody tr:last-child td:last-child{
    border-bottom-right-radius: 6px;
}

.tableList th {
    vertical-align: bottom;
}

@media (min-width: 1000px) {
    .tableList td {
        padding: 10px 15px;
    }
    .tableList td {
        height: 50px;
    }
}

/* EDGE */
@supports (-ms-ime-align:auto) {
    :host(.ms-fix-tableList) .tableList {
        table-layout: auto;
    }

    :host(.ms-fix-tableList) .tableList td {
        transition: none;
    }

    :host(.ms-fix-tableList) .tableList tr {
        transition: none;
    }

    :host(.ms-fix-tableList) .tableList .tableList--mainItemProperty {
        transition: none;
    }
}

/* IE 9+ */
@media screen and (min-width:0\0) {
    :host(.ms-fix-tableList) .tableList {
        table-layout: auto;
    }

    :host(.ms-fix-tableList) .tableList td {
        transition: none;
    }

    :host(.ms-fix-tableList) .tableList tr {
        transition: none;
    }

    :host(.ms-fix-tableList) .tableList .tableList--mainItemProperty {
        transition: none;
    }
}

/* COMPACT STYLING */

:host(.tableList--compact) >>> .tableList td:nth-child(even),
:host(.tableList--compact) >>> .tableList th:nth-child(even){
  background-color: transparent;
}

:host(.tableList--compact) >>> .tableList td:nth-child(odd),
:host(.tableList--compact) >>> .tableList th:nth-child(odd){
  background-color: transparent;
}

:host(.tableList--compact) >>> th:nth-child(even),
:host(.tableList--compact) >>> th:nth-child(odd) {
  transition: background-color 0.1s ease-in-out;
}

:host(.tableList--compact) >>> .tableList-stickyHeader--sticky th:nth-child(even),
:host(.tableList--compact) >>> .tableList-stickyHeader--sticky th:nth-child(odd) {
  background-color: white;
}

:host(.tableList--compact) >>> .tableList th.tableList-headerGroup {
  background-color: transparent;
}

:host(.tableList--compact) >>> .tableList-headerGroup-title {
  background-color: transparent;
  transition: background-color 0.1s ease-in-out;
}

:host(.tableList--compact) >>> .tableList-stickyHeader--sticky .tableList-headerGroup-title {
  background-color: white;
}

:host(.tableList--compact) >>> .tableList-headerGroup-titleWrapper {
  background-color: transparent;
  transition: background-color 0.1s ease-in-out;
}

:host(.tableList--compact) >>> .tableList-stickyHeader--sticky .tableList-headerGroup-titleWrapper {
  background-color: white;
}

:host(.tableList--compact) >>> .tableList th.tableList-headerCapCell {
  background-color: transparent;
}

:host(.tableList--compact) >>> .tableList-headerCap {
  background-color: transparent;
  transition: background-color 0.1s ease-in-out;
}

:host(.tableList--compact) >>> .tableList-stickyHeader--sticky .tableList-headerCap {
  background-color: white;
}

:host(.tableList--compact) >>> .tableList {
  border-collapse: collapse;
}

:host(.tableList--compact) >>> .tableList tbody tr {
  border-bottom: 1px solid #D3D3DC;
}

:host(.tableList--compact) >>> .tableList tbody tr:last-of-type {
  border-bottom: none;
}

:host(.tableList--compact) >>> .tableList tbody td {
  height: 25px;
}

:host(.tableList--compact) >>> .tableList td {
  padding: 10px 10px 10px 1px;
}

:host(.tableList--compact) >>> .tableList tr {
  transition: background-color 0.2s ease-in-out;
}

:host(.tableList--compact) >>> .tableList tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.02);
  box-shadow: initial;
}

:host {
  --custom-hover-background-color: #25C39F;
}

.tabs {
  display: flex;
  flex: 0 1 auto;
  padding-left: 4px;
  /*--custom-hover-background-color : blue*/
}

.tab {
  margin-right: 2px;
  cursor: pointer;
  height: 50px;
  position: relative;
  display: flex;
  flex: 0 1 auto;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  color: #6C7C91;
  font-size: 14px;
  transition: all 0.3s ease-in-out;
  z-index: 1;
  min-width: 0;
  line-height: 15px;
}

.tabs .tab:last-child {
  margin-right: 0;
}

.tabs .tab:not(.tab--highlighted):first-child .tab-background {
  border-radius: 5px 0 0 0;
}

.tabs .tab:not(.tab--highlighted):last-child .tab-background {
  border-radius: 0 5px 0 0;
}

.tab-title {
  position: relative;
  display: flex;
  flex: 0 1 auto;
  width: auto;
  justify-content: center;
  align-items: center;
  height: 100%;
  z-index: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 20px;
}

.tab-image {
  width: 100%;
  max-width: 150px;
}

.tab-background-cropper {
  position: absolute;
  left: -20px;
  right: -20px;
  top: -20px;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}


.tab-background {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 0;
  background-color: #EAE9EC;
  box-sizing: border-box;
  border-bottom: 0;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

.tab.tab--highlighted {
  color: black;
  z-index: 2;
}

.tab--highlighted .tab-background {
  border-radius: 5px 5px 0 0;
  left: 16px;
  right: 16px;
  background-color: #D3D3DC;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

.tab--highlighted .tab-underline {
  width: 20px;
}

.tab-underline {
  position: absolute;
  height: 4px;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 0;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

/*====================== HOVER */

.tab:not(.tab--highlighted):hover .tab-background {
  background-color: var(--custom-hover-background-color);
}

.tab:not(.tab--highlighted):hover {
  color: white;
}

/*====================== CONTRAST VERSION */

:host(.tabs-contrast) >>> .tab-background {
  background-color: #D3D3DC;
}

:host(.tabs-contrast) >>> .tab--highlighted .tab-background {
  background-color: #FFFFFF;
}

/*====================== LIGHT VERSION */

:host(.tabs-light) >>> .tab-background {
  background-color: #E5E4E7;
}

:host(.tabs-light) >>> .tab--highlighted .tab-background {
  background-color: #FFFFFF;
}

/*====================== DEFAULT AND COLOR VERSION */

:host(.tabs-color) >>> .tab-title,
:host(.tabs-default-color) >>> .tab-title {
  font-weight: bold;
}

:host(.tabs-color) >>> .tab:not(.tab--highlighted),
:host(.tabs-color) >>> .tab:not(.tab--highlighted):hover .tab-background,
:host(.tabs-default-color) >>> .tab:not(.tab--highlighted):hover {
  opacity: 0.6;
}

:host(.tabs-default-color) >>> .tab-background,
:host(.tabs-default-color) >>> .tab:not(.tab--highlighted):hover .tab-background {
  background-color: #E5E4E7;
}

:host(.tabs-default-color) >>> .tab--highlighted .tab-background {
  background-color: #D3D3DC;
}

:host(.tabs-default-color.tabs-light) >>> .tab--highlighted .tab-background {
  background-color: #FFFFFF;
}

/*====================== GRAY VERSION */

:host(.tabs-gray) >>> .tab-background {
  background-color: #D3D3DC;
}

:host(.tabs-gray) >>> .tab--highlighted .tab-background {
  background-color: #EAE9EC;
}

/*====================== SEPARATED VERSION */

:host(.tabs-separated) >>> .tab {
  -webkit-backface-visibility: hidden;
  height: 60px;
  margin-right: 8px;
}

:host(.tabs-separated) >>> .tab-background {
  border-radius: 5px 5px 0 0 !important;
}

:host(.tabs-separated) >>> .tab:not(.tab--highlighted):hover .tab-background {
  background-color: #D3D3DC;
}

/*====================== FIXED SIZE */

:host(.tabs-fixed-size) >>> .tab {
  flex: 0 0 auto;
}

@media only screen and (min-width: 800px) {
  :host(.tabs-separated) >>> .tab {
    height: 35px;
  }
}

@media only screen and (min-width: 1000px) {
  :host(.tabs-separated) >>> .tab {
    height: 40px;
  }
}

@media only screen and (min-width: 1100px) {
  :host(.tabs-separated) >>> .tab {
    height: 45px;
  }
}

@media screen and (min-width: 1200px) {
  :host(.tabs-separated) >>> .tab {
    height: 50px;
  }
}

@media screen and (min-width: 1300px) {
  :host(.tabs-separated) >>> .tab {
    height: 55px;
  }
}

@media screen and (min-width: 1300px) {
  :host(.tabs-separated) >>> .tab {
    font-size: 18px;
    line-height: 20px;
  }
}

@media (min-width: 1644px) {
  :host(.tabs-separated) >>> .tab {
    height: 80px;
  }
}

@media (min-width: 1450px) {
  :host(.tabs-separated) >>> .tab {
    margin-right: 20px;
  }
}

:host {
  display: block;
}

.templateSwitcher-wrapper {
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-duration: 0.15s;
}

/*ANIMATIONS*/

@keyframes templateSwitcher-nextLeave {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(-120px);
    opacity: 0;
  }
}

@keyframes templateSwitcher-nextEnter {
  0% {
    transform: translateX(120px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes templateSwitcher-backLeave {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(120px);
    opacity: 0;
  }
}

@keyframes templateSwitcher-backEnter {
  0% {
    transform: translateX(-120px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #26C7A3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #26C7A3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

:host {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 7px;
}

.userProfileSummary-firstName,
.userProfileSummary-secondName {
  color: #2D363A;
}

.userProfileSummary-lastName {
  color: #6C7C91;
}

.userProfileSummary-fullNameContainer {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.userProfileSummary-fullName {
  font-size: 36px;
  line-height: 36px;
  white-space: nowrap;
  font-weight: 600;
}

.userProfileSummary__info {
  font-size: 20px;
  margin-top: 5px;
  white-space: nowrap;
}

.userProfileSummary__info-label {
  color: #6C7C91;
}

.userProfileSummary__info-value {
  color: #2D363A;
}

.userProfileSummary-changePassword {
  display: inline-block;
  font-size: 22px;
  line-height: 22px;
  color: #7C8CAD;
  margin-left: 7px;
  border-radius: 3px;
  border: 1px solid #D3D3DC;
  padding: 0 7px;
}

.userProfileSummary-editButton {
  margin-left: 15px;
  font-size: 25px;
  height: 37px;
  width: 37px;
  border: 1px solid #D3D3DC;
  border-radius: 3px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
  color: #7C8CAD;
  transition: all 0.2s ease-in-out;
}

.userProfileSummary-editButton:hover {
  background-color: #26C7A3;
  border-color: #26C7A3;
  color: white;
}

:host {
  display: flex;
  align-items: center;
  color: #7D8DAD;
  font-size: 12px;
  line-height: 19px;
}

:host > *:nth-last-child(-n+2) {
  color: black
}

.viewBreadcrumb-element--clickable {
  cursor: pointer;
}

.viewBreadcrumb-divider {
  padding: 0 4px;
}

.viewBreadcrumb-divider--large,
.viewBreadcrumb-textLarge {
  font-size: 30px;
  line-height: 35px;
  font-weight: 300;
}

.viewBreadcrumb-image {
  height: 65px;
}

.viewBreadcrumb-image img {
  height: 100%;
}

.viewBreadcrumb-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewBreadcrumb-html-text {
  font-size: 20px;
}

:host {
    display: flex;
}

.viewHeader-mainWrapper {
    flex: 1;
    flex-direction: column;
    max-width: 100%;
}

.viewHeader-title {
    white-space: nowrap;
    color: #0C1522;
    font-weight: 300;
    font-size: 36px;
    margin: -7px 20px -7px 0;
    text-overflow: ellipsis;
    overflow: hidden;
}

.viewHeader-breadcrumb {
    white-space: nowrap;
    color: #69789D;
    font-weight: 500;
    font-size: 12px;
}

.viewHeader-description {
    white-space: nowrap;
    color: #69789D;
    font-weight: 500;
    font-size: 14px;
    margin-left: 73px;
}

.viewHeader-subWrapper {
    display: flex;
    align-items: center;
}

.viewHeader-content {
    display: flex;
    justify-content: space-between;
    flex: 1;
    align-items: center;
}

:host {
    position: relative;
    display: block;
}
:host {
  top: 0;
  display: flex;
  background-color: #FFFFFF;
  position: fixed;
  height: 70px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  justify-content: space-between;
  z-index: 1035;
}

:host loading-spinner {
  width: 30px;
}

.topBarAssignment-middleContainer {
  margin-left: 5vw;
  margin-top: 10px;
}

.topBarAssignment-menuControls {
  align-items: center;
  display: flex;
  margin-right: 20px;
}

.topBarAssignment-menuControls > * {
  margin-right: 10px;
}

.topBarAssignment-button-icon {
  color: #57616F;
  font-size: 14px;
  margin-right: 3px;
}

.topBarAssignment-instructionButton,
.topBarAssignment-attachFileButton,
.topBarAssignment-addCommentButton {
  height: 50px;
  align-items: center;
  white-space: nowrap;
  padding: 0 20px;
  vertical-align: center;
  border: 1px solid #CECECE;
  color: #57616F;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  transition: all 0.2s ease-in-out;
}

.topBarAssignment-instructionButton {
  border-radius: 7px 3px 3px 3px;
}

.topBarAssignment-attachFileButton {
  border-radius: 3px 3px 3px 3px;
}

.topBarAssignment-addCommentButton {
  border-radius: 3px 3px 7px 3px;
}

.topBarAssignment-instructionButton:hover,
.topBarAssignment-attachFileButton:hover,
.topBarAssignment-addCommentButton:hover{
  border: 1px solid #058ED6;
  color: #058ED6;
}

.topBarAssignment-instructionButton:hover .topBarAssignment-button-icon,
.topBarAssignment-attachFileButton:hover .topBarAssignment-button-icon,
.topBarAssignment-addCommentButton:hover .topBarAssignment-button-icon{
  color: #058ED6;
}

.topBarAssignment-instructionButton--active .topBarAssignment-button-icon,
.topBarAssignment-button-icon:hover {
  color: #FFFFFF;
}

.topBarAssignment-instructionButton--active,
.topBarAssignment-instructionButton--active:hover{
  background-color: #2D363A;
  border: 1px solid #2D363A;
  color: #FFFFFF;
}

.topBarAssignment-instructionButton--active:hover .topBarAssignment-button-icon{
  color: #FFFFFF;
}

.topBarAssignment-endDateLabel {
  white-space: nowrap;
  height: 50px;
  border-radius: 7px 3px 7px 3px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  transition: all 0.2s ease-in-out;
  font-weight: normal;
  pointer-events: none;
  text-transform: none;
  margin-right: 20px;

}

/* ============== INSTRUCTION POPUP */

.topBarAssignment-instructionPopup {
  height: auto;
  width: 567px;
  border-radius: 3px 10px 10px 10px;
  background-color: #2D363A;
  box-shadow: 0 2px 40px 0 rgba(0,0,0,0.2);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  margin-top: 20px;
}

.topBarAssignment-instructionPopup-text {
  padding: 30px 30px 30px 30px;
}

.topBarAssignment-instructionPopup-header >>> .header-title,
.topBarAssignment-instructionPopup-header >>> .close-btn {
  color: #FFFFFF; !important;
}

/* ================================== LOGO (LEFT) */

.topBarAssignment-logoContainer {
  justify-content: left;
  padding: 0 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.topBarAssignment-logo {
  height: 30px;
  width: auto;
  transition: filter 0.3s;
}

.topBarAssignment-logoContainer:hover .topBarAssignment-logo {
  filter: brightness(170%);
}

/* ================================== APP CONTROLS (RIGHT) */

.topBarAssignment-saveButtonWrapper {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin-right: 150px;
  margin-left: 20px;
}

.topBarAssignment-saveButtonWrapper:not(:last-child) > * {
  margin-right: 20px;
}

.topBarAssignment-leftContainer {
  display: flex;
}

.topBarAssignment-saveButton {
  box-sizing: border-box;
  white-space: nowrap;
  height: 50px;
  background-color: #23B597;
  border-radius: 7px 3px 7px 3px;
  border-color: transparent;
  padding: 0 20px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  font-size: 14px;
  vertical-align: middle;
  line-height: 20px;
  transition: all 0.2s ease-in-out;
  position: relative;
  cursor: pointer;
}

.topBarAssignment-saveButton:hover {
  transition: background-color 0.2s ease-in-out;
  background-color: #0070BE;
}

.topBarAssignment-saveButton-icon {
  color: #FFFFFF;
  font-size: 20px;
  margin-right: 3px;
}
.topBarAssignment-saveButton:not(:last-child) {
  margin-right: 20px;
}

/* ================================== RWD */

@media only screen and (min-width: 900px) {
  .topBarAssignment-logoContainer {
    padding: 0 25px;
  }

  .topBarAssignment-appControls > * {
    margin-right: 10px;
  }

  .topBarAssignment-saveButton-icon {
    margin-right: 10px;
  }
}

@media only screen and (min-width: 1060px) {
  .topBarAssignment-logo {
    height: 50px;
  }
}

@media only screen and (min-width: 1110px) {
  .topBarAssignment-appControls > * {
    margin-right: 20px;
  }
}

.groupsListItem {
  width: 100%;
  height: 50px;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.groupsListItem:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 2px;
  background-color: #D3D3DC;
  display: block;
}

.groupsListItem:last-of-type:after {
  background-color: transparent;
}

.groupsListItem-groupName {
  padding-left: 20px;
  color: #454E5C;
  font-size: 14px;
  font-weight: 500;
  line-height: 50px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}

.groupsListItem-iconDelete {
  font-size: 20px;
  color: #7C8CAD;
  line-height: 50px;
  margin: 0 20px;
}

.groupsListItem-iconDelete:hover {
  color: #26C7A3;
  cursor: pointer;
}

.content-container {
  margin-top: 30px;
}

.student-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.actionButton {
  cursor: pointer;
  height: 35px;
  border-radius: 3px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.actionButton:hover {
  background-color: #26C7A3;
}

.buttonLabel {
  margin-left: 15px;
  margin-right: 15px;
}

.student-details-content {
  width: 100%;
  display: flex;
  justify-content: center;
}

.student-avatar {
  width: 100px;
}

.student-groups-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.student-groups-container {
  width: 540px;
}

.student-groups-container .content-background {
  background-color: #ffffff;
  border-radius: 0 5px 5px 5px;
  position: relative;
  overflow: hidden;
  padding: 20px;
  min-height: 300px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

.student-tabs-group {
  padding: 0 0px;
}

.groups-list-paginator {
  float: right;
  margin-top: 10px;
}

:host {
  height: 50px;
  color: #8a8a8a;
}

/* Student first name and last name cells */
.studentsListItem-nameCell {
  padding: 0 20px;
}

.studentsListItem-name {
  color: #69789D;
  font-size: 15px;
  line-height: 20px;
}

.studentsListItem-nameCell:hover {
  cursor: pointer;
}

/* Student login cell */
.studentsListItem-loginCell {
  padding: 0 20px;
}

.studentsListItem-login {
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
  color: #69789D;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* Student icon set cell */
.studentsListItem-iconSetCell {
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  font-size: 20px;
  height: 50px;
}

.studentsListItem-iconSetCell div {
  color: #7C8CAD;
  cursor: pointer;
  padding-left: 10px;
}

.studentsListItem-iconSetCell div:hover {
  color: #26C7A3;
}

@media (min-width: 1000px) {
  .studentsListItem-iconSetCell div {
    padding-left: 20px;
  }
}

:host:hover .studentsListItem-icon {
  color: #26C7A3;
}

:host:hover .studentsListItem-icon--selected {
  color: #26C7A3;
}

.studentsListItem-icon--selected {
  color: #0070BE;
}

.studentsListItem-selectButtonCell {
  cursor: pointer;
  margin-right: 25px;
  padding-top: 5px;
}

.nameCellContainer {
  display: flex;
  height: 100%;
  align-items: center;
}

:host {
  background: white;
  display: block;
}

#passwordInput {
  width: 100%;
}

.changeStudentPassword-body {
    width: 600px;
}

.changeStudentPassword-label {
    text-transform: uppercase;
}

:host{
  display: flex;
  flex-direction: column;
  position: relative;
}

.my-licenses-top-bar{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #69789D;
  font-size: 20px;
  margin-bottom: 10px;
}

.myLicenses-emptyContentContainer {
  background-color: white;
  padding: 20px 0;
  border-radius: 5px;
}

:host loading-cover {
  z-index: 2;
}
:host {
  display: flex;
  flex-direction: column;
}

:host >>> .my-settings-top-bar{
  font-size: 20px;
  color: #69789D;
  margin-bottom: 10px;
}

:host {
  display: block;
  width: 100%;
}

:host loading-cover {
  z-index: 3;
}

:host >>> .tableListHeader .tableListHeader-label {
  padding-left: 10px;
}

:host >>> .tableList-column-type,
:host >>> .tableList-column-name {
  width: 130px;
}

:host >>> .tableList-column-status,
:host >>> .tableList-column-startDate {
  width: 80px;
}

@media (min-width: 1000px) {

  :host >>> .tableList-column-type,
  :host >>> .tableList-column-name {
    width: 140px;
  }

  :host >>> .tableList-column-status,
  :host >>> .tableList-column-startDate {
    width: 90px;
  }
}

.importAccountsJobList-paginatorWrapper {
  display: flex;
  justify-content: flex-end;
}

:host >>> .import-accounts-list-menu {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px
}

:host >>> view-header-button {
  max-width: 130px;
}

:host {
  display: block;
  width: 100%;
}


:host .importAccountsDetailsList-tableList {
  border-radius: 5px;
  background: white;
  min-width: 660px;
  padding: 0 10px;
}

:host empty-content {
  background: white;
}

:host >>> .tableList-column-isSchoolAdmin,
:host >>> .tableList-column-isDistrictAdmin {
  width: 88px;
}

.importAccountsDetailsList-controls {
  display: flex;
  justify-content: flex-end;
}

:host {
  display: block;
  width: 100%;
}

.tableList-header-district-name,
.tableList-header-job-status {
  background: #FFFFFF;
}

.importClasslinkConfigurationList-controlsWrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 20px;
}

.importClasslinkConfigurationList-controlsRight {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

:host >>> .tableList-column-path {
  width: 250px;
}

:host >>> .tableList-column-district-name,
:host >>> .tableList-column-date,
:host >>> .tableList-column-job-status {
  width: 170px;
}

:host >>> .tableList-column-actions {
  width: 185px;
}

:host loading-cover {
  z-index: 3;
}

:host tr {
  min-height: 50px;
}

:host {
  display: block;
  width: 100%;
}

.tableList-header-date,
.tableList-header-actions {
  background: #FFFFFF;
}

.importCleverConfigurationList-controlsWrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 20px;
}

.importCleverConfigurationList-controlsRight {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

:host >>> .tableList-header-date,
:host >>> .tableList-header-job-status {
  justify-content: center;
}

:host >>> .tableList-column-actions {
  width: 185px;
}

:host loading-cover {
  z-index: 3;
}

:host tr {
  min-height: 50px;
}

:host {
  display: block;
  width: 100%;
}

:host loading-cover {
  z-index: 3;
}

:host >>> .tableListHeader .tableListHeader-label {
  padding-left: 10px;
}

:host >>> .tableList-column-type,
:host >>> .tableList-column-name {
  width: 130px;
  min-width: 80px;
}

:host >>> .tableList-column-status,
:host >>> .tableList-column-startDate {
  width: 80px;
}

@media (min-width: 1000px) {

  :host >>> .tableList-column-type,
  :host >>> .tableList-column-name {
    width: 140px;
  }

  :host >>> .tableList-column-status,
  :host >>> .tableList-column-startDate {
    width: 90px;
  }
}

.importContentJobList-paginatorWrapper {
  display: flex;
  justify-content: flex-end;
}

:host >>> .import-content-list-menu {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px
}



:host {
  display: block;
  width: 100%;
}

.tableList-header-district-name,
.tableList-header-job-status {
  background: #FFFFFF;
}

.importEdLinkConfigurationList-controlsWrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 20px;
}

.importEdLinkConfigurationList-controlsRight {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

:host >>> .tableList-column-path {
  width: 250px;
}

:host >>> .tableList-column-district-name,
:host >>> .tableList-column-date,
:host >>> .tableList-column-job-status {
  width: 170px;
}

:host >>> .tableList-column-actions {
  width: 185px;
}

:host loading-cover {
  z-index: 3;
}

:host tr {
  min-height: 50px;
}

:host .popupBody {
  width: 600px;
}

:host .section-message {
  margin-bottom: 15px;
}

:host {
  display: block;
  width: 100%;
}

.tableList-header-district-name,
.tableList-header-job-status {
  background: #FFFFFF;
}

.importOneRosterConfigurationList-controlsWrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 20px;
}

.importOneRosterConfigurationList-controlsRight {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

:host >>> .tableList-column-path {
  width: 250px;
}

:host >>> .tableList-column-district-name,
:host >>> .tableList-column-date,
:host >>> .tableList-column-job-status {
  width: 170px;
}

:host >>> .tableList-column-actions {
  width: 185px;
}

:host loading-cover {
  z-index: 3;
}

:host tr {
  min-height: 50px;
}

:host {
  min-width: 500px;
  display: block;
}

.local-upload {
  position: relative;
  width: 100%;
  height: 268px;
}

.fileUpload {
  position: relative;
  overflow: hidden;
}

.popup-local-upload-area {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #D3D3DC;
  border: 2px dashed #D3D3DC;
  border-radius: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.popup-local-upload-label {
  position: absolute;
  top: 38px;
  width: 100%;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #69789D;
  text-align: center;
  line-height: 16px;
}

.add-file-icon {
  display: flex;
  width: 100%;
  margin-top: 80px;
  justify-content: center;
}

.add-file-ract-dashed {
  margin-top: 15px;
  margin-left: 0px;
  box-sizing: border-box;
  height: 62px;
  width: 47px;
  border: 2px dotted #9CAFDA;
  background-color: #FFFFFF;
  border-radius: 3px;
}

.add-file-rect-solid {
  margin-top: 0px;
  margin-left: -35px;
  height: 60px;
  width: 45px;
}

.rect-solid-cut-corner {
  margin-top:10px;
  width: 45px;
  height: 50px;
  background-color: #9CAFDA;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  position: relative;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
}

.has-error .rect-solid-cut-corner {
  background-color: #C90017;
}

.rect-solid-cut-corner:before {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 10px solid #9CAFDA;
  border-right: 10px solid transparent;
  position: absolute;
  top:-10px;
  left:35px
}

.has-error .rect-solid-cut-corner:before {
  border-bottom: 10px solid #C90017;
}

.rect-solid-cut-corner:after {
  content: "";
  position: absolute;
  top:-10px;
  left:0;
  background-color: #9CAFDA;
  border-top-left-radius: 3px;
  width:35px;
  height:10px;
}

.has-error .rect-solid-cut-corner:after {
  background-color: #C90017;
}

.rect-solid-bottom {
  margin-top: 0px;
  margin-left: -30px;
  background-color: #9CAFDA;
  border-top-left-radius: 3px;
  width:35px;
  height:10px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
}

.popup-upload-actionButton {
  cursor: pointer;
  height: 35px;
  border-radius: 3px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-upload-actionButton:hover {
  background-color: #26C7A3;
}

.popup-upload-buttonLabel {
  margin-left: 15px;
  margin-right: 15px;
}

.browse-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 37px;
}

.browseBtn {
  background-color: #EAE9EC00;
  border: 1px solid #9CAFDA;
  color: #69789D;
}

.browseBtn:hover {
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}

.cancelBtn {
  margin-left: 30px;
  background-color: #EAE9EC00;
  border: 1px solid #9CAFDA;
  color: #69789D;
  margin-top: 25px;
}

.cancelBtn:hover {
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}


.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

input[type="file"].local-upload-input {
  width: 100%;
  height: 100%;
}

.summary-info {
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  text-align: left;
  color: #27BF92;
}

.has-error .summary-info {
  color: #C90017;
}

.info-success {
  text-align: center;
}

.summary-image {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 15px;
  display: flex;
  justify-content: center;
}

.summary-image label {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  position: absolute;
  width: 100%;
  margin-left: -15px;
  margin-top: 25px;
}

.file-description {
  margin-bottom: 15px;
  color: #454E5C;
}

.has-error .file-description {
  color: #C90017;
}

.file-name {
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
}

.file-size {
  font-size: 12px;
  line-height: 16px;
  font-weight: 100;
  text-align: center;
}

.space-description {
}

.has-error .space-description {
  color: #C90017;
}

.add-file-upload-progress {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


:host {
  min-width: 500px;
  display: block;
}

.local-upload {
  position: relative;
  width: 100%;
  height: 268px;
}

.fileUpload {
  position: relative;
  overflow: hidden;
}

.popup-local-upload-area {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #D3D3DC;
  border: 2px dashed #D3D3DC;
  border-radius: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.popup-local-upload-label {
  position: absolute;
  top: 38px;
  width: 100%;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #69789D;
  text-align: center;
  line-height: 16px;
}

.add-file-icon {
  display: flex;
  width: 100%;
  margin-top: 80px;
  justify-content: center;
}

.add-file-ract-dashed {
  margin-top: 15px;
  margin-left: 0px;
  box-sizing: border-box;
  height: 62px;
  width: 47px;
  border: 2px dotted #9CAFDA;
  background-color: #FFFFFF;
  border-radius: 3px;
}

.add-file-rect-solid {
  margin-top: 0px;
  margin-left: -35px;
  height: 60px;
  width: 45px;
}

.rect-solid-cut-corner {
  margin-top:10px;
  width: 45px;
  height: 50px;
  background-color: #9CAFDA;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  position: relative;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
}

.has-error .rect-solid-cut-corner {
  background-color: #C90017;
}

.rect-solid-cut-corner:before {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 10px solid #9CAFDA;
  border-right: 10px solid transparent;
  position: absolute;
  top:-10px;
  left:35px
}

.has-error .rect-solid-cut-corner:before {
  border-bottom: 10px solid #C90017;
}

.rect-solid-cut-corner:after {
  content: "";
  position: absolute;
  top:-10px;
  left:0;
  background-color: #9CAFDA;
  border-top-left-radius: 3px;
  width:35px;
  height:10px;
}

.has-error .rect-solid-cut-corner:after {
  background-color: #C90017;
}

.rect-solid-bottom {
  margin-top: 0px;
  margin-left: -30px;
  background-color: #9CAFDA;
  border-top-left-radius: 3px;
  width:35px;
  height:10px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
}

.popup-upload-actionButton {
  cursor: pointer;
  height: 35px;
  border-radius: 3px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-upload-actionButton:hover {
  background-color: #26C7A3;
}

.popup-upload-buttonLabel {
  margin-left: 15px;
  margin-right: 15px;
}

.browse-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 37px;
}

.browseBtn {
  background-color: #EAE9EC00;
  border: 1px solid #9CAFDA;
  color: #69789D;
}

.browseBtn:hover {
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}

.cancelBtn {
  margin-left: 30px;
  background-color: #EAE9EC00;
  border: 1px solid #9CAFDA;
  color: #69789D;
  margin-top: 25px;
}

.cancelBtn:hover {
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}


.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

input[type="file"].local-upload-input {
  width: 100%;
  height: 100%;
}

.summary-info {
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  text-align: left;
  color: #27BF92;
}

.has-error .summary-info {
  color: #C90017;
}

.info-success {
  text-align: center;
}

.summary-image {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 15px;
  display: flex;
  justify-content: center;
}

.summary-image label {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  position: absolute;
  width: 100%;
  margin-left: -15px;
  margin-top: 25px;
}

.file-description {
  margin-bottom: 15px;
  color: #454E5C;
}

.has-error .file-description {
  color: #C90017;
}

.file-name {
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  text-align: center;
}

.file-size {
  font-size: 12px;
  line-height: 16px;
  font-weight: 100;
  text-align: center;
}

.space-description {
}

.has-error .space-description {
  color: #C90017;
}

.add-file-upload-progress {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


:host {
  border: solid 1px #20A78A;
  background-color: transparent;
  border-radius: 4px;
  display: block;
  margin-top: 20px;
}

:host .list-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  transform: translateY(-20px);
}

:host label {
  position: relative;
  transform: translateY(-23px);
  background: #E9F0FF;
  color: #26C7A3;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 12px;
  width: fit-content;
}

.resource-import-job-item {
  margin: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

:host {
  border: solid 1px #20A78A;
  background-color: transparent;
  border-radius: 4px;
  display: block;
}

:host .list-wrapper {
  display: flex;
  flex-wrap: wrap;
  transform: translateY(-20px);
}

:host .list-wrapper .product-item {
  flex: 1 1 auto;
  margin: 5px;
  border: solid 1px #cfcfcf;
  border-radius: 4px;
  padding: 5px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

:host .list-wrapper .product-item:hover {
  color: white;
  background-color: #26C7A3;
}

:host label {
  position: relative;
  transform: translateY(-23px);
  background: #E9F0FF;
  color: #26C7A3;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 12px;
  width: fit-content;
}

:host .licenseProduct-thumbnail {
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  border-radius: 2px;
}

.licenseProductTile-wrapper,
.licenseProductStrip-wrapper {
  border-radius: 4px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-in-out;
}

.licenseProductTile-wrapper:hover,
.licenseProductStrip-wrapper:hover {
  box-shadow: 0 0 0 2px #0072AD, 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

.licenseProductTile-iconCover,
.licenseProductStrip-iconCover {
  background-color: #EAE9EC;
  color: #69789D;
}

.licenseProductTile-title,
.licenseProductStrip-title {
  color: #43474C;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

.licenseProductTile-info:hover .licenseProductTile-title,
.licenseProductStrip-title:hover {
  color: #0072AD;
}

/* ================== TILE ================== */

.licenseProductTile-wrapper {
  height: 206px;
  width: 301px;
}

.licenseProductTile-content {
  height: 134px;
  display: flex;
  cursor: pointer;
  padding: 16px;
}

.licenseProductTile-cover {
  height: 100%;
  width: 103px;
  margin-right: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.licenseProductTile-iconCover {
  font-size: 50px;
}

.licenseProductTile-title {
  height: 100%;
  width: 146px;
}

/* ================== STRIP ================== */

.licenseProductStrip-wrapper {
  height: 100px;
  width: 100%;
}

.licenseProductStrip-content {
  height: 100%;
  padding: 15px;
  display: flex;
}

.licenseProductStrip-cover {
  height: 70px;
  width: 54px;
  margin-right: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.licenseProductStrip-iconCover {
  font-size: 30px;
}

.licenseProductStrip-title {
  cursor: pointer;
  height: 100%;
  flex: 1;
}

:host >>> td:first-child div {
  margin-left: 10px;
}

:host >>> .myLicensesListItem-ownerType i {
  margin-right: 2px;
  color: #0072AD;
}

:host >>> .myLicensesListItem-ltiLinkButton {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: normal;
  padding: 0 5px;
  margin: 0 2px;
}

:host >>> .myLicensesListItem-ltiCartridgeButton {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: normal;
  padding: 0 5px;
  margin: 0 2px;
}

:host >>> .clickable {
  cursor: pointer;
}

:host {
  display: block;
}

.manageSchoolList-paginatorContainer {
  display: flex;
  justify-content: flex-end;
}

.manageSchoolsList-headerButtonContainer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

:host >>> .tableList-column-actions {
  width: 200px;
}

:host .tabs-wrapper {
  width: 100%;
  margin: 1em auto;
}

.manageDistrictTabs-contentBackground {
  background-color: #ffffff;
  border-radius: 0 5px 5px 5px;
  position: relative;
  overflow: hidden;
  padding: 20px 25px;
  min-height: 290px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

:host .mainContent {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.manage-district-options {
  width: 100%;
  max-width: 850px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.manage-district-leftOptions, .manage-district-rightOptions {
  margin: 20px;
  display: flex;
  flex-direction: column;
}

.manage-district-rightOptions {
  min-width: 857px;
}

.manage-district-leftOptions {
  margin-bottom: 0;
}

:host view-header {
  align-self: stretch;
}

@media (min-width: 1300px) {
  .manage-district-options {
    flex-direction: row;
    align-items: flex-start;
    max-width: none;
  }

  .manage-district-leftOptions {
    margin-bottom: 20px;
  }

  .manage-district-rightOptions {
    flex: 2;
  }
}

.organisation-details-header {
  display: contents;
}

.manage-district-loadingSpinner {
  z-index: 3;
}

/* LAST SYNCHRO DATE HEADER */

:host .sub-header {
  display: flex;
  width: 100%;
  margin-top: 20px;
}

:host .sub-header > * {
  margin-right: 23px;
}

.synchro-info {
  display: flex;
  align-items: flex-end;
}

.synchro-info > * {
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
  text-align: center;
  white-space: nowrap;
  height: 23px;
  color: #0C1522;
}

.synchro-info label {
  color: #69789D;
  margin: 0;
}

.synchro-info i {
  color: #7C8CAD;
  margin-left: 4px;
  margin-bottom: 1px;
  font-size: 15px;
  font-weight: 400;
}

.synchro-info-date {
  margin-left: 6px;
  margin-bottom: 1px;
}

:host .tabs-wrapper {
  width: 100%;
  margin: 1em auto;
}

.manageGroupTabs-contentBackground {
  background-color: #ffffff;
  border-radius: 0 5px 5px 5px;
  position: relative;
  overflow: hidden;
  padding: 20px 25px;
  min-height: 290px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

.manage-teacher-list-add-teacher-button {
  position: relative;
  overflow: visible;
  min-width: 145px;
}

:host .mainContent {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.manage-group-options {
  width: 100%;
  max-width: 850px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.manage-group-leftOptions, .manage-group-rightOptions {
  flex: 1;
  margin: 20px;
  display: flex;
  flex-direction: column;
}

.manage-group-leftOptions {
  margin-bottom: 0;
}

.manage-group-rightOptions {
  min-width: 857px;
}

:host view-header {
  align-self: stretch;
}

:host .manageGroup-organisationDetailsHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 1300px) {
  .manage-group-options {
    flex-direction: row;
    align-items: flex-start;
    max-width: none;
  }
  .manage-group-leftOptions {
    flex: 1;
    margin-bottom: 20px;
  }
  .manage-group-rightOptions {
    flex: 2;
  }
}

:host {
  display: block;
}

.tableList-header-joinCode {
  background: #FFFFFF;
}

.manage-organisations-district-list-controls-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 20px;
}

.manage-organisations-district-list-controls-left {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.manage-organisations-district-list-control-search {
  display: block;
  width: 100%;
  max-width: 30em;
  background: white;
  border-radius: 3px;
}

.manage-organisations-district-list-controls-right {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

:host loading-cover {
  z-index: 3;
}

:host tr {
  min-height: 50px;
}

:host {
  display: block;
}

.manageOrganisationsSchoolList-controlsWrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 20px;
}

.manageOrganisationsSchoolList-controls-left {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.manageOrganisationsSchoolList-control-filter {
  margin-right: 15px;
  z-index: 3;
}

.manageOrganisationsSchoolList-control-search {
  display: block;
  width: 100%;
  background: white;
  border-radius: 3px;
}

.manageOrganisationsSchoolList-controls-right {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

:host loading-cover {
  z-index: 3;
}

.manage-organisations-menu-buttons-wrapper {
  max-height: 18em;
  overflow-y: auto
}

.manage-school-actionsDropdownWrapper--expanded .manage-school-actionsDropdownButton {
  background-color: #26C7A3;
  border-color: #26C7A3;
  color: white;
}

.manage-school-actionsDropdownButton:hover,
.manage-school-actionsDropdownWrapper--expanded {
  background-color: #26C7A3;
  border-color: #26C7A3;
  color: white;
}

.manage-school-actionsDropdownButton:hover .manage-school-actionsDropdownWrapper-dash {
  color: white;
}

.manage-school-actionsDropdownWrapper--expanded .manage-school-actionsDropdownWrapper-dash {
  transform: rotate(180deg);
  color: white;
}

.manage-school-actionsDropdownButton:focus {
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.1) !important;
}

.manage-school-actionsDropdownItem:hover {
  background-color: #003C98;
}

:host .tabs-wrapper {
  width: 100%;
  margin: 1em auto;
}

.manageSchoolTabs-contentBackground {
  background-color: #ffffff;
  border-radius: 0 5px 5px 5px;
  position: relative;
  overflow: hidden;
  padding: 20px 25px;
  min-height: 290px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

:host {
  display: block;
}

.manageAdminList-paginatorContainer {
  display: flex;
  justify-content: flex-end;
}

.manageAdminsList-headerButtonContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

:host >>> .tableList-column-actions {
  width: 140px;
}

:host >>> .tableList-column-title {
  width: 180px;
}

:host >>> .tableList-column-code {
  width: 180px;
}

:host >>> .tableList-column-status {
  width: 110px;
}

:host >>> .tableList-column-expiry {
  width: 110px;
}

:host >>> .tableList-column-button {
  width: 110px;
}

:host >>> .tableList-column-cartridge {
  width: 110px;
}

:host tr:hover {
  cursor: pointer;
}

.manage-license-list {
  display: flex;
  flex-direction: column;
  border-radius: 0 5px 5px 5px;
  background-color: #FFFFFF;
  position: relative;
}

.manage-license-listButtonWrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.manage-license-listContainer {
  width: 100%;
}

.manage-license-listPaginatorContainer {
  display: flex;
  justify-content: flex-end;
}

:host {
  background: #FFFFFF;
  display: block;
}

.manage-student-list-add-student-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.manage-student-list-paginatorWrapper {
  display: flex;
  justify-content: space-between;
}

:host >>> .tableList-column-1 {
  width: 50px;
}

.tableList-header-manage-student-column-template {
  overflow: visible !important;
}

.manage-student-add-student-dropdown {
  z-index: 100;
  right: 0;
  width: 100%;
  min-width: 150px;
  max-width: 250px;
}

.manage-student-add-student-dropdown-item,
.manage-student-add-student-dropdown-largeItem {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.manage-student-add-student-dropdown-item {
  padding: 0 10px;
  justify-content: flex-start;
  color: white;
  font-size: 14px;
  height: 30px;
  font-weight: normal;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease-in-out;
}

.manage-student-add-student-dropdown-item:hover {
  background-color: #0070BE;
}

.manage-student-add-student-dropdown-largeItem {
  margin: 5px;
  background-color: white;
  display: flex;
  color: #0070BE;
  font-size: 16px;
  font-weight: 600;
  padding: 0 10px;
  height: 40px;
  border-radius: 3px;
  text-transform: uppercase;
  transition: color 0.2s ease-in-out;
}

.manage-student-add-student-dropdown-largeItem:hover {
  color: #26C7A3;
}

.manage-student-list-add-student-button {
  position: relative;
  overflow: visible;
  min-width: 150px;
}

.manage-student-list-add-student-button--expanded {
  background-color: #0070BE;
  border-color: #0070BE;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.manage-student-list-search-input {
  width: 100%;
  max-width: 200px;
}

:host {
  background: #FFFFFF;
  display: block;
}

:host >>> .tableList-column-1 {
  width: 50px;
}

:host >>> .tableList-column-2 {
  width: 150px;
}

.manage-teacher-list-search-input {
  width: 100%;
  max-width: 200px;
}

.manage-teacher-list-search-input-wrapper {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.manage-teacher-list-paginatorWrapper {
  display: flex;
  justify-content: flex-end;
}

.manage-user-list-warning-label {
  width: 100%;
  text-align: center;
  color: red;
}

:host {
  width: 380px;
}

.organisation-description-top-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #7C8CAD;
  font-size: 20px;
  font-weight: 500;
  line-height: 33px;
  margin-bottom: 10px;
  white-space: nowrap;
}

.organisation-description-editButton {
  margin-left: 15px;
  font-size: 25px;
  height: 37px;
  width: 37px;
  border: 1px solid #D3D3DC;
  border-radius: 3px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
  color: #7C8CAD;
  transition: all 0.2s ease-in-out;
}

.organisation-description-editButton:hover {
  background-color: #26C7A3;
  border-color: #26C7A3;
  color: white;
}

.organisation-description-text {
  height: auto;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  padding: 30px;
  color: #57616F;
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
  border-radius: 5px;
  word-wrap: break-word;
  white-space: pre-wrap;
}

:host {
  width: 380px;
}

.organisation-detail-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #7C8CAD;
  font-size: 20px;
  font-weight: 500;
  line-height: 33px;
}

.organisation-detail-editButton {
  height: 37px;
  width: 37px;
  border: 1px solid #D3D3DC;
  border-radius: 3px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
  color: #7C8CAD;
}

.organisation-detail-editButton:hover {
  background-color: #26C7A3;
  border-color: #26C7A3;
  color: white;
}

.organisation-detail-text {
  height: auto;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  padding: 30px;
  color: #57616F;
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
}

.organisation-details-header-name {
  display: flex;
  align-items: center;
  margin-top: 15px;
  font-size: 36px;
  line-height: 36px;
  white-space: nowrap;
  font-weight: 600;
  color: #0D1C2E;
}

.organisation-details-header-code {
  display: flex;
  align-items: center;
  margin-top: 15px;
  font-size: 20px;
  line-height: 36px;
  white-space: nowrap;
  color: #7C8CAD;
}

.organisation-details-header-demo-label {
  margin-left: 15px;
  font-weight: bold;
}

.editButton {
  margin-left: 15px;
  font-size: 25px;
  height: 37px;
  width: 37px;
  border: 1px solid #D3D3DC;
  border-radius: 3px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
  color: #7C8CAD;
  transition: all 0.2s ease-in-out;
}

.editButton:hover {
  background-color: #26C7A3;
  border-color: #26C7A3;
  color: white;
}

.generateButton {
  display: flex;
  justify-content: center;
  line-height: 15px;
  margin-left: 15px;
  font-size: 15px;
  height: 25px;
  width: 25px;
  border: 1px solid #D3D3DC;
  border-radius: 2px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
  color: #7C8CAD;
  transition: all 0.2s ease-in-out;
}

.generateButton:hover {
  background-color: #26C7A3;
  border-color: #26C7A3;
  color: #FFFFFF;
}

:host {
  display: block;
}

:host .platformAdminList-tableList {
  border-radius: 5px;
  background: white;
  min-width: 510px;
}

.platformAdminList-paginatorContainer {
  display: flex;
  justify-content: flex-end;
  margin: 5px 0;
}

.platformAdminList-headerButtonContainer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

:host >>> .tableList-column-actions,
:host >>> .tableList-header-actions {
  width: 220px;
  padding-right: 20px;
}

:host >>> .tableList-column-administrator,
:host >>> .tableList-header-administrator {
  padding-left: 20px;
  min-width: 270px;
}

:host {
  display: block;
}

:host .demoLinkList-tableList {
  border-radius: 5px;
  background: white;
  min-width: 660px;
}

:host empty-content {
  background: white;
}

.demoLinkList-controlsWrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 15px;
}

.demoLinkList-controlsLeft {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.demoLinkList-controlsSearch {
  display: block;
  width: 100%;
  max-width: 30em;
  background: white;
  border-radius: 3px;
}

.demoLinkList-controlsRight {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.demoLinkList-paginatorContainer {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}

.demoLinkList-headerButtonContainer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

:host >>> .tableList-column-demoLink,
:host >>> .tableList-header-demoLink {
  padding-left: 5px;
  min-width: 150px;
}

:host >>> .tableList-column-status,
:host >>> .tableList-header-status {
  width: 80px;
}

:host >>> .tableList-column-startDate,
:host >>> .tableList-header-startDate,
:host >>> .tableList-column-endDate,
:host >>> .tableList-header-endDate {
  width: 120px;
}

:host >>> .tableList-column-actions,
:host >>> .tableList-header-actions {
  width: 190px;
  padding-right: 20px;
}

@media (min-width: 1210px) {
  :host >>> .tableList-header-demoLink {
    padding-left: 20px;
    min-width: 160px;
  }

  :host >>> .tableList-column-startDate,
  :host >>> .tableList-header-startDate,
  :host >>> .tableList-column-endDate,
  :host >>> .tableList-header-endDate {
    width: 160px;
  }
}

@media (min-width: 1254px) {
  :host >>> .tableList-header-demoLink {
    padding-left: 20px;
    min-width: 180px;
  }

  :host >>> .tableList-column-startDate,
  :host >>> .tableList-header-startDate,
  :host >>> .tableList-column-endDate,
  :host >>> .tableList-header-endDate {
    width: 180px;
  }
}

:host view-header {
  margin-bottom: 20px;
}

.demoLink-wrapper {
  display: flex;
}

demo-link-list {
  margin-left: 20px;
}


.active-checkbox-input {
  display: none;
}
.active-checkbox-label {
  display: flex;
  justify-content: center;
  font-size: 20px;
}

.parameters-group__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.parameters-group__group-description {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

.parameters-group__buttons {
  display: flex;
  flex-direction: row;
}

.parameters-group__submitButtons {
  margin-right: 10px;
  transition: opacity 0.1s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.parameters-group__submitButtons--visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.1s ease-in-out;
}

:host >>> .tableList-column-active {
  width: 70px
}

:host >>> .tableList-column-button {
  width: 120px
}

.parameters-group__group-action {
  display: flex;
  flex-direction: column;
  margin-right: 4px;
}

.parameters-group__group-action .icon-button {
  font-size: 16px;
  line-height: 26px;
  height: 24px;
  width: 24px;
}

.parameters-group__group-detail {
  display: flex;
  flex-direction: row;
}

:host stepper {
  margin-bottom: 20px;
}

.edit-tutorial-thumbnail-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.edit-tutorial-thumbnail-wrapper img {
  width: 200px;
}

:host {
  width: 400px;
}

:host view-header {
  margin-bottom: 20px;
}

:host side-menu{
  margin-right: 20px;
}

:host .manage-single-tutorial__main-content{
  display: flex;
}

:host .manage-single-tutorial__tutorial-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

:host .manage-single-tutorial__header {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
:host .manage-single-tutorial__tutorial-detail {
  margin: 15px 0;
}
:host .manage-single-tutorial__header-buttons {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}
:host .manage-single-tutorial__header-buttons button {
  margin: 5px;
}

:host .tutorial-page-list {
  margin:auto;
  width:100%;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
}

:host {
  cursor: pointer;
}

:host .manage-tutorial-button {
  font-size: 20px;
  line-height: 40px;
  -o-transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

:host .manage-tutorial-button:hover {
  background-color: #27BF92;
  color: #3b4662;
}

:host >>> .button-wrapper {
  display: flex;
  justify-content: end;
}

:host {
  margin:10px;
  width: 200px;
}
.manageTutorialPage-wrapper {
  border-radius: 4px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-in-out;
}

.manageTutorialPage-wrapper:hover {
  box-shadow: 0 0 0 2px #0072AD, 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

.manageTutorialPage-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.manageTutorialPage-info {
  height: 200px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.manageTutorialPage-cover {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin:auto;
}

.manageTutorialPage-thumbnail {
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  border-radius: 2px;
}
.manageTutorialPage-title {
  color: #43474C;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manageTutorialPage-info:hover .manageTutorialPage-title,
.manageTutorialPage-title:hover {
  color: #0072AD;
}

.manageTutorialPage-actions {
  height: 24px;
  color: #767690;
  display: flex;
  justify-content: space-between;
  font-size: 19px;
}

.manageTutorialPage-groupActions {
  width: 57px;
  display: flex;
  justify-content: space-between;
  transition: all 0.2s ease-in-out;
}

.manageTutorialPage-icon {
  height: 24px;
  width: 24px;
  text-align: center;
  line-height: 24px;
  transition: all 0.2s ease-in-out;
}

.manageTutorialPage-icon:hover {
  color: #0072AD;
  cursor: pointer;
}

:host {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 15px 0;
}

.manageProductList-stripLayout .manageProductList-product {
  width: 100%;
}

.manageProductList-header {
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin-bottom: 23px;
}

.manageProductList {
  display: flex;
  flex-wrap: wrap;
  margin: 5px;
}

.manageProductList-search {
  min-width: 227px;
  width: 350px;
  background-color: #FFFFFF;
  border-radius: 3px;
  margin-right: 60px;
}

.manageProductList-product {
  margin-right: 19px;
  margin-bottom: 19px;
}

.manageProductList-paginatorContainer {
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
}

:host {
  min-width: 600px;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  max-width: 100vw;
  padding: 10px 20px;
  background-color: #EAE9EC;
}

:host .popupBody {
  width: 100%;
  display: flex;
  flex-direction: column;
}

:host .manageProducts-header {
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  width: 100%;
}

:host .manageProducts-header--left,
.manageProducts-header--center,
.manageProducts-header--right {
  display: flex;
  flex: 1 1;
  align-items: center;
  width: 100%;
}

:host .manageProducts-header--left {
  justify-content: flex-start;
}

:host .manageProducts-header--center {
  justify-content: center;
}

:host .manageProducts-header--right {
  justify-content: flex-end;
}

.manageProductList-stripLayout .manageProductList-product {
  width: 100%;
}

.manageProductList-header {
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin-bottom: 23px;
}

:host .manageProductList {
  display: flex;
  flex-wrap: wrap;
  margin: 20px;
  overflow-y: scroll;
}

.manageProductList-search {
  min-width: 227px;
  width: 350px;
  background-color: #FFFFFF;
  border-radius: 3px;
  margin-right: 60px;
}

.manageProductList-product {
  margin-right: 19px;
  margin-bottom: 19px;
}

.manageProductList-paginatorContainer {
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
}

.manageProducts-closeButton {
  margin-right: 20px;
}

.simpleProduct-tile {
  display: flex;
  position: relative;
  margin-top: 13px;
}

.simpleProduct-tileContainer {
  height: 332px;
  width: 204px;
  border-radius: 3px;
  background-color: #FFFFFF;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
  top: 0px;
  left: 0px;
  margin-left: 5px;
}

.simpleProduct-thumbnail {
  border-radius: 3px 3px 0 0;
  height: 272px;
  width: 204px;
  background-color: white;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
}

.simpleProduct-labelContainer {
  width: 204px;
  max-height: 60px;
}

.simpleProduct-labelContainer-background {
  background-color: #FFFFFF;
  border-radius: 0 0 3px 3px;
}

.simpleProduct-labelContainer-text {
  max-height: 40px;
  width: 180px;
  color: #57616F;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  margin: 12px 12px 8px 12px;
  overflow: hidden;
}

.simpleProduct-expired-background {
  height: 332px;
  width: 214px;
  border-radius: 5px;
  background-color: #EAE9EC;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  margin-top: 5px;
  transition: background-color 0.2s ease-in-out;
}

:host:hover >>> .simpleProduct-expired-background,
:host:hover >>> .simpleProduct-expired-background--expired {
  background-color: #26C7A3;
}

.simpleProduct-expired-background--expired {
  background-color: #C31984;
  transition: background-color 0.2s ease-in-out;
}

.simpleProduct-expired-buttonContainer {
  height: 26px;
  width: 84px;
  border-radius: 5px;
  background-color: #C31984;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  vertical-align: center;
  cursor: pointer;
  align-items: center;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  left: 0;
  margin-left: 63px;
  margin-top: -13px;
  transition: all 0.2s ease-in-out;
}

.simpleProduct-expired-buttonContainer:hover {
  background-color: #26C7A3;
}

.simpleProduct-expired-button-icon {
  margin-left: 14px;
  font-size: 14px;
  margin-right: 10px;
  padding-top: 3px;
}

:host .manageProduct-thumbnail {
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  border-radius: 2px;
}

:host .manageProduct-icon {
  height: 24px;
  width: 24px;
  text-align: center;
  line-height: 24px;
  transition: all 0.2s ease-in-out;
}

:host .manageProduct-icon:hover {
  color: #0072AD;
  cursor: pointer;
}

.manageProductTile-wrapper,
.manageProductStrip-wrapper {
  border-radius: 4px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-in-out;
}

:host(.manageProduct--selected) .manageProductTile-wrapper,
:host(.manageProduct--selected) .manageProductStrip-wrapper,
.manageProductTile-wrapper:hover,
.manageProductStrip-wrapper:hover {
  box-shadow: 0 0 0 2px #0072AD, 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

.manageProductTile-iconCover,
.manageProductStrip-iconCover {
  background-color: #EAE9EC;
  color: #69789D;
}

.manageProductTile-title,
.manageProductStrip-title {
  color: #43474C;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

.manageProductTile-info:hover .manageProductTile-title,
.manageProductStrip-title:hover {
  color: #0072AD;
}

.manageProductTile-groupExport,
.manageProductStrip-groupExport {
  display: flex;
  justify-content: center;
  align-items: center;
}

.manageProductTile-exportCheckbox,
.manageProductStrip-exportCheckbox {
  font-size: 21px;
  height: 26px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

:host(.manageProduct--selected) .manageProductTile-exportCheckbox,
:host(.manageProduct--selected) .manageProductStrip-exportCheckbox,
.manageProductTile-exportCheckbox:hover,
.manageProductStrip-exportCheckbox:hover {
  color: #0072AD;
}

/* ================== TILE ================== */

.manageProductTile-wrapper {
  height: 206px;
  width: 301px;
}

.manageProductTile-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.manageProductTile-info {
  height: 134px;
  margin-bottom: 16px;
  display: flex;
  cursor: pointer;
}

.manageProductTile-cover {
  height: 100%;
  width: 103px;
  margin-right: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.manageProductTile-iconCover {
  font-size: 50px;
}

.manageProductTile-title {
  height: 100%;
  width: 146px;
}

.manageProductTile-actions {
  height: 24px;
  color: #767690;
  display: flex;
  justify-content: space-between;
  font-size: 19px;
}

.manageProductTile-groupActions {
  width: 57px;
  display: flex;
  justify-content: space-between;
  transition: all 0.2s ease-in-out;
}

/* ================== STRIP ================== */

.manageProductStrip-wrapper {
  height: 100px;
  width: 100%;
}

.manageProductStrip-content {
  height: 100%;
  padding: 15px;
  display: flex;
}

.manageProductStrip-cover {
  height: 70px;
  width: 54px;
  margin-right: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.manageProductStrip-iconCover {
  font-size: 30px;
}

.manageProductStrip-title-actions-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  flex: 1;
}

.manageProductStrip-title {
  cursor: pointer;
  max-height: 40px;
}

.manageProductStrip-groupActions {
  width: 65px;
  color: #767690;
  display: flex;
  justify-content: space-between;
  font-size: 19px;
}

:host {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 15px 0;
}

.manageProductList-stripLayout .manageProductList-product {
  width: 100%;
}

.manageProductList-header {
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin-bottom: 23px;
}

.manageProductList {
  display: flex;
  flex-wrap: wrap;
  margin: 5px;
}

.manageProductList-search {
  min-width: 227px;
  width: 350px;
  background-color: #FFFFFF;
  border-radius: 3px;
  margin-right: 60px;
}

.manageProductList-product {
  margin-right: 19px;
  margin-bottom: 19px;
}

.manageProductList-paginatorContainer {
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
}

.licenseDetails-periodControlWrapper {
  position: relative;
}

.licenseDetails-period-months {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 16px;
  height: 100%;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #777777;
  pointer-events: none;
}

.licenseDetails-periodInput {
  padding-right: 75px;
}

:host .form[formFloatingLabel].form--disabled [disabled] {
  opacity: 0.7;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

:host {
  display: flex;
  flex-direction: column;
  min-width: 587px;
}

.productDetails-header {
  margin-bottom: 27px;
  height: 189px;
}

.productDetails-content {
  display: flex;
}

.productDetails-details {
  flex: 3;
  min-width: 0;
  border-right: 1px solid #D3D3DC;
  padding-right: 30px;
  padding-bottom: 15px;
}

.productDetails-list {
  padding-left: 30px;
  flex: 10;
  min-width: 0;
  padding-bottom: 15px;
}

:host {
  display: block;
  width: 100%;
}

:host loading-cover {
  z-index: 3;
}

:host >>> .tableListHeader .tableListHeader-label {
  padding-left: 10px;
}
:host >>> .tableList-column-buttons{
  width: 140px;
}
:host >>> .tableList-column-name {
  width: 90px;
}

:host >>> .tableList-column-status,
:host >>> .tableList-column-startDate {
  width: 80px;
}

@media (min-width: 1000px) {
  :host >>> .tableList-column-status,
  :host >>> .tableList-column-startDate {
    width: 90px;
  }
}

.exportUserJobList-paginatorWrapper {
  display: flex;
  justify-content: flex-end;
}

:host >>> view-header-button {
  max-width: 130px;
}

:host {
  width: 400px;
}

:host .popupBody {
  display: flex;
  flex-direction: column;
}

:host form {
  margin-bottom: 20px;
}

:host >>> .tableList-column-districtName {
  width: 650px;
}

:host tr:hover {
  cursor: pointer;
}

.user-district-list {
  display: flex;
  flex-direction: column;
  border-radius: 0 5px 5px 5px;
  background-color: #FFFFFF;
  position: relative;
}

.user-district-list-container {
  width: 100%;
}

.user-district-list-paginatorContainer {
  display: flex;
  justify-content: flex-end;
}

:host >>> .tableList-column-title {
  width: 170px;
}

:host >>> .tableList-column-licensee {
  width: 170px;
}

:host >>> .tableList-column-licenseeType {
  width: 110px;
}

:host >>> .tableList-column-expiryDate {
  width: 110px;
}

:host >>> .tableList-column-status {
  width: 90px;
}

:host tr:hover {
  cursor: pointer;
}

.user-license-list {
  display: flex;
  flex-direction: column;
  border-radius: 0 5px 5px 5px;
  background-color: #FFFFFF;
  position: relative;
}

.user-license-list-container {
  width: 100%;
}

.user-license-list-paginatorContainer {
  display: flex;
  justify-content: flex-end;
}

:host >>> .tableList-column-schoolName {
  width: 325px;
}

:host >>> .tableList-column-districtName {
  width: 325px;
}

:host >>> .tableList-column-3 {
  width: 105px;
}

:host tr:hover {
  cursor: pointer;
}

.user-school-list {
  display: flex;
  flex-direction: column;
  border-radius: 0 5px 5px 5px;
  background-color: #FFFFFF;
  position: relative;
}

.user-school-list-container {
  width: 100%;
}

.user-school-list-paginatorContainer {
  display: flex;
  justify-content: flex-end;
}

.manageUser-headerButtonContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

:host .tabs-wrapper {
  max-width: 100%;
  margin: 30px 20px;
  min-width: 700px;
}

:host >>> tabs .tabs {
  padding-right: 4px;
}

.manageUserTabs-contentBackground {
  background-color: #ffffff;
  border-radius: 0 0 5px 5px;
  position: relative;
  overflow: hidden;
  padding: 20px 25px;
  min-height: 290px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

@media (min-width: 1100px) {
  :host .tabs-wrapper {
    margin-left: 40px;
    margin-right: 40px;
  }
}

@media (min-width: 1300px) {
  :host .tabs-wrapper {
    margin-left: 60px;
    margin-right: 60px;
  }
}

:host {
  display: block;
  width: 100%;
  margin-left: 20px;
}

:host >>> .tableListHeader .tableListHeader-label {
  padding-left: 10px;
}

:host >>> .tableList-column-firstName,
:host >>> .tableList-column-lastName {
  width: 120px;
}

:host >>> .tableList-column-login {
  width: 90px;
}

:host loading-cover {
  z-index: 3;
}

@media (min-width: 1000px) {

  :host >>> .tableList-column-firstName,
  :host >>> .tableList-column-lastName {
    width: 130px;
  }

  :host >>> .tableList-column-login {
    width: 100px;
  }
}

.manageUserAccountList-paginatorWrapper {
  display: flex;
  justify-content: flex-end;
}

:host >>> .manage-user-account-list-menu {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px
}

.manage-user-account-list-menu-rightSide {
  display: flex;
  float: right;
  justify-content: space-between;
  align-items: center;
}

:host >>> view-header-button {
  max-width: 130px;
  margin-left: 15px;
}

.manage-user-account-list-search-input {
  display: block;
  width: 100%;
  max-width: 30em;
  background: white;
  border-radius: 3px;
}

:host {
  display: block;
  width: 100%;
}

:host loading-cover {
  z-index: 3;
}

:host >>> .tableListHeader .tableListHeader-label {
  padding-left: 10px;
}
:host >>> .tableList-column-buttons{
  width: 140px;
}
:host >>> .tableList-column-name {
  width: 90px;
}

:host >>> .tableList-column-status,
:host >>> .tableList-column-startDate {
  width: 80px;
}

@media (min-width: 1000px) {
  :host >>> .tableList-column-status,
  :host >>> .tableList-column-startDate {
    width: 90px;
  }
}

.exportUserJobList-paginatorWrapper {
  display: flex;
  justify-content: flex-end;
}

:host >>> view-header-button {
  max-width: 130px;
}

:host {
  display: block;
}

:host .privilegesList-tableList {
  border-radius: 5px;
  background: white;
  min-width: 510px;
}

:host empty-content {
  background: white;
  height: 323px;
}

.privilegesList-paginatorContainer {
  display: flex;
  justify-content: flex-end;
  margin: 5px 0;
}

:host >>> .tableList-column-name,
:host >>> .tableList-header-name {
  padding-left: 20px;
  min-width: 270px;
}

:host {
  display: block;
  width: 100%;
}

:host .manageRolesList-tableList {
  border-radius: 5px;
  background: white;
  min-width: 500px;
}

:host empty-content {
  background: white;
}

.manageRolesList-paginatorContainer {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}

:host >>> .tableList-header-name {
  padding-left: 15px;
  min-width: 270px;
}

:host {
  top: 0;
  display: flex;
  background-color: #FFFFFF;
  position: fixed;
  height: 70px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  justify-content: space-between;
  z-index: 1035;
}

:host loading-spinner {
  width: 30px;
}

.topBarAssignment-middleContainer {
  margin-left: 5vw;
  margin-top: 10px;
}

.topBarAssignment-menuControls {
  align-items: center;
  display: flex;
  margin-right: 20px;
}

.topBarAssignment-menuControls > * {
  margin-right: 10px;
}

.topBarAssignment-button-icon {
  color: #57616F;
  font-size: 14px;
  margin-right: 3px;
}

.topBarAssignment-instructionButton,
.topBarAssignment-attachFileButton,
.topBarAssignment-addCommentButton {
  height: 50px;
  align-items: center;
  white-space: nowrap;
  padding: 0 20px;
  vertical-align: center;
  border: 1px solid #CECECE;
  color: #57616F;
  background-color: #FFFFFF;
  cursor: pointer;
  display: flex;
  transition: all 0.2s ease-in-out;
}

.topBarAssignment-instructionButton {
  border-radius: 7px 3px 3px 3px;
}

.topBarAssignment-attachFileButton {
  border-radius: 3px 3px 3px 3px;
}

.topBarAssignment-addCommentButton {
  border-radius: 3px 3px 7px 3px;
}

.topBarAssignment-instructionButton:hover,
.topBarAssignment-attachFileButton:hover,
.topBarAssignment-addCommentButton:hover{
  border: 1px solid #058ED6;
  color: #058ED6;
}

.topBarAssignment-instructionButton:hover .topBarAssignment-button-icon,
.topBarAssignment-attachFileButton:hover .topBarAssignment-button-icon,
.topBarAssignment-addCommentButton:hover .topBarAssignment-button-icon{
  color: #058ED6;
}

.topBarAssignment-instructionButton--active .topBarAssignment-button-icon,
.topBarAssignment-button-icon:hover {
  color: #FFFFFF;
}

.topBarAssignment-instructionButton--active,
.topBarAssignment-instructionButton--active:hover{
  background-color: #2D363A;
  border: 1px solid #2D363A;
  color: #FFFFFF;
}

.topBarAssignment-instructionButton--active:hover .topBarAssignment-button-icon{
  color: #FFFFFF;
}

.topBarAssignment-endDateLabel {
  white-space: nowrap;
  height: 50px;
  border-radius: 7px 3px 7px 3px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  transition: all 0.2s ease-in-out;
  font-weight: normal;
  pointer-events: none;
  text-transform: none;
  margin-right: 20px;

}

/* ============== INSTRUCTION POPUP */

.topBarAssignment-instructionPopup {
  height: auto;
  width: 567px;
  border-radius: 3px 10px 10px 10px;
  background-color: #2D363A;
  box-shadow: 0 2px 40px 0 rgba(0,0,0,0.2);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  margin-top: 20px;
}

.topBarAssignment-instructionPopup-text {
  padding: 30px 30px 30px 30px;
}

.topBarAssignment-instructionPopup-header >>> .header-title,
.topBarAssignment-instructionPopup-header >>> .close-btn {
  color: #FFFFFF; !important;
}

/* ================================== LOGO (LEFT) */

.topBarAssignment-logoContainer {
  justify-content: left;
  padding: 0 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.topBarAssignment-logo {
  height: 30px;
  width: auto;
  transition: filter 0.3s;
}

.topBarAssignment-logoContainer:hover .topBarAssignment-logo {
  filter: brightness(170%);
}

/* ================================== APP CONTROLS (RIGHT) */

.topBarAssignment-saveButtonWrapper {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin-right: 150px;
  margin-left: 20px;
}

.topBarAssignment-saveButtonWrapper:not(:last-child) > * {
  margin-right: 20px;
}

.topBarAssignment-leftContainer {
  display: flex;
}

.topBarAssignment-saveButton {
  box-sizing: border-box;
  white-space: nowrap;
  height: 50px;
  background-color: #23B597;
  border-radius: 7px 3px 7px 3px;
  border-color: transparent;
  padding: 0 20px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  font-size: 14px;
  vertical-align: middle;
  line-height: 20px;
  transition: all 0.2s ease-in-out;
  position: relative;
  cursor: pointer;
}

.topBarAssignment-saveButton:hover {
  transition: background-color 0.2s ease-in-out;
  background-color: #0070BE;
}

.topBarAssignment-saveButton-icon {
  color: #FFFFFF;
  font-size: 20px;
  margin-right: 3px;
}

/* ================================== RWD */

@media only screen and (min-width: 900px) {
  .topBarAssignment-logoContainer {
    padding: 0 25px;
  }

  .topBarAssignment-appControls > * {
    margin-right: 10px;
  }

  .topBarAssignment-saveButton-icon {
    margin-right: 10px;
  }
}

@media only screen and (min-width: 1060px) {
  .topBarAssignment-logo {
    height: 50px;
  }
}

@media only screen and (min-width: 1110px) {
  .topBarAssignment-appControls > * {
    margin-right: 20px;
  }
}

.student-assignment-details {
  width: 100%;
  min-height: 100vh;
  background-color: #027EBF;
}

.student-assignment-details-instruction {
  background-color: #2D363A;
  color: #FFFFFF;
  width: 100%;
  padding: 5px 10px;
}

.student-assignment-details-instruction-label {
  font-weight: bold;
  letter-spacing: 0.06em;
  line-height: 30px;
}

.student-assignment-details-teacher {
  float: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin:  1em;
  font-weight:  bold;
  letter-spacing: 0.05em;
  font-size: 0.9em;
  white-space:  nowrap;
  color: #FFFFFF;
}

.student-assignment-details-resourcesList {
  display: block;
  margin-top: 15px;
  padding: 0 10px;
}

.student-assignment-details-header {
  color: #FFFFFF;
  font-size: 25px;
  font-weight: 500;
  line-height: 32px;
  margin-bottom: 20px;
  text-align: left;
}

@media only screen and (min-width: 768px) {
  .student-assignment-details-teacher {
    flex-direction: row;
  }

  .student-assignment-details-instruction {
    padding: 10px 50px;
  }

  .student-assignment-details-resourcesList {
    margin-top: 20px;
    padding: 0 50px;
  }

  .student-assignment-details-header {
    font-size: 30px;
    line-height: 38px;
  }
}

@media only screen and (min-width: 1000px) {
  .student-assignment-details-instruction {
    padding: 15px 150px;
  }

  .student-assignment-details-resourcesList {
    margin-top: 47px;
    padding: 0 150px;
  }
}

:host >>> .popupBody {
  max-width: 40vw;
  min-width: 300px;
  white-space: pre-wrap;
}

:host .resource-title-cell {
  width:35%;
  vertical-align: top;
}

:host .teacher-comment-cell {
  word-break: break-all;
}

@media (min-width: 1200px) {
  :host >>> .popupBody {
    max-width: 600px;
  }
}

.assignment-feedback-popup__table {
  width: 100%
}

:host td {
  padding: 10px;
  border: solid white 3px;
}

:host tr:nth-child(odd) td {
  background-color: #cfcfcf;
}

:host tr:nth-child(even) td {
  background-color: #e7e7e7;

}

:host .assignment-comment {
  padding: 10px;
  background-color: #e7e7e7;
}

:host >>> .popupBody {
    min-width: 500px;
}

.assignmentAttachmentPopup-downloadAttachment {
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.assignmentAttachmentPopup-downloadAttachment:focus {
    box-shadow: none !important;
}

.assignmentAttachmentPopup-downloadAttachment:hover {
    text-decoration: none;
}

.assignmentAttachmentPopup-downloadAttachment-name {
    color: #606976;
    transition: color 0.2s ease-in-out;
}

.assignmentAttachmentPopup-downloadAttachment-button {
    color: #8896B3;
    background-color: #D3D3DC;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    padding: 7px;
    border-radius: 3px;
    font-weight: 600;
    line-height: 100%;
    vertical-align: middle;
}

.assignmentAttachmentPopup-downloadAttachment:hover .assignmentAttachmentPopup-downloadAttachment-name {
    color: #0070BE;
}

.assignmentAttachmentPopup-downloadAttachment:hover .assignmentAttachmentPopup-downloadAttachment-button {
    color: white;
    background-color: #0070BE;
}

.popupBody .assignmentAttachmentPopup-downloadAttachment:not(:last-child) {
    border-bottom: solid #EAE9EC 2px;
}

:host {
  position: relative;
  display: block;
  padding: 20px 0;
}

:host >>> .tableListHeader-title {
  white-space: normal !important;
  line-height: 15px !important;
}

:host >>> .tableListHeader-titles {
  padding: 0 10px !important;
}

:host >>> .tableList-column-empty {
  width: 5px;
}

:host >>> .tableList-column-action,
:host >>> .tableList-header-action {
  width: 24px;
}

:host >>> .tableList-column-2 {
  width: 15px;
}

:host >>> .tableList-column-name {
  width: 80px;
}

:host >>> .tableList-column-additional-text,
:host >>> .tableList-column-comment {
  width: 60px;
  min-width: 40px;
}

:host >>> .tableList-column-attachments,
:host >>> .tableList-column-submitted,
:host >>> .tableList-column-resource {
  width: 40px;
}

:host >>> .tableList-column-question {
  transition: width 0.8s ease-in-out;
  width: 0.000001px;
}

:host(.assignmentResultsList--questionsNoTransition) >>> .tableList-column-question,
:host(.assignmentResultsList--questionsUnrolled) >>> .tableList-column-question {
  width: 40px;
}

:host(.assignmentResultsList--questionsNoTransition) >>> .tableList-column-question {
  transition: none;
}

:host >>> .tableList-column-cumulative,
:host >>> .tableList-column-questions,
:host >>> .tableList-column-time,
:host >>> .tableList-column-grade {
  width: 40px;
}

:host >>> .tableList-header-question.open-question .tableListHeader-title {
  border-radius: 3px;
  padding: 3px 15px;
  background-color: #0070BE;
  color: white;
  letter-spacing: 0.05em;
}

:host >>> #tableListHeader-Grade .tableListHeader-icon {
  font-size: 21px;
  padding-top: 5px;
  transition: color 0.2s ease-in-out;
}

@media (min-width: 900px) {
  :host >>> .tableList-column-name {
    width: 100px;
  }
}

@media (min-width: 1000px) {
  :host >>> .tableList-column-name {
    width: 120px;
  }
}

@media (min-width: 1200px) {
  :host >>> .tableList-column-grade,
  :host >>> .tableList-column-resource {
    width: 35px;
  }

  :host(.assignmentResultsList--questionsNoTransition) >>> .tableList-column-question,
  :host(.assignmentResultsList--questionsUnrolled) >>> .tableList-column-question {
    width: 40px;
  }
}

.assignmentResultList-resourceHover {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

:host loading-cover {
  z-index: 9;
}

.assignmentResultsList-resourcePreview {
  position: absolute;
  z-index: 9;
  transform: translateX(-50%);
}

/*============= EXPANDED WIDTHS =============*/

:host >>> .tableList-column-submitted,
:host >>> .tableList-column-cumulative,
:host >>> .tableList-column-time,
:host >>> .tableList-column-questions,
:host >>> .tableList-column-attachments,
:host >>> .tableList-column-comment,
:host >>> .tableList-column-additional-text,
:host >>> .tableList-column-action {
  transition: width 0.8s ease-in-out;
}

:host(.assignmentResultsList--expanded) >>> .tableList-column-submitted,
:host(.assignmentResultsList--expanded) >>> .tableList-column-cumulative,
:host(.assignmentResultsList--expanded) >>> .tableList-column-time,
:host(.assignmentResultsList--expanded) >>> .tableList-column-questions,
:host(.assignmentResultsList--expanded) >>> .tableList-column-attachments,
:host(.assignmentResultsList--expanded) >>> .tableList-column-comment,
:host(.assignmentResultsList--expanded) >>> .tableList-column-additional-text,
:host(.assignmentResultsList--expanded) >>> .tableList-column-action {
  width: 0.000001px;
}

:host(.assignmentResultsList--expanded) >>> .assignmentResultList-action >>> icon-button {
  opacity: 0;
}

/*============= TRACKERS =============*/

:host >>> .tableList-header-resource {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  transition-property: color, background-color;
}

:host >>> .tableList-header-resource:hover {
  cursor: pointer;
  background-color: #26C7A3;
  color: white;
}

.assignmentResultsList-tracker {
  position: absolute;
  z-index: 9;
  pointer-events: none;
}

.assignmentResultsList-tracker-top {
  position: absolute;
  top: -67px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  cursor: pointer;
  transition: top 0.2s ease-in-out;
}

.assignmentResultsList-expander .assignmentResultsList-tracker-top {
  top: -2px;
}

.assignmentResultsList-tracker-top:hover .assignmentResultsList-tracker-top-title {
  background-color: #7CDDC7;
}

.assignmentResultsList-expander .assignmentResultsList-tracker-top {
  left: -10px;
  right: -10px;
}

.assignmentResultsList-tracker-background {
  position: absolute;
  top: -44px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background-color: rgba(38, 199, 163, 0.1);
  border: 2px solid #26c7a3;
  transition: top 0.2s ease-in-out;
}

.assignmentResultsList-expander .assignmentResultsList-tracker-background {
  top: 10px;
}

.assignmentResultsList-tracker-top-title {
  height: 25px;
  color: white;
  background-color: #26C7A3;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  border-radius: 2px;
  transition: background-color 0.2s ease-in-out;
}

.assignmentResultsList-expander .assignmentResultsList-tracker-top-title {
  height: 42px;
  font-size: 30px;
}

.assignmentResultsList-tracker-top-icon {
  color: #26C7A3;
  font-size: 30px;
  height: 50px;
  margin-top: -5px;
  display: flex;
  justify-content: center;
  transition: height 0.2s ease-in-out;
  line-height: 10px;
}

.assignmentResultsList-highlighter .assignmentResultsList-tracker-background {
  right: -2px;
  border-right: 0;
}

.assignmentResultsList-collapser .assignmentResultsList-tracker-background {
  background-color: transparent;
  box-shadow: inset 0 0 30px 5px rgba(0, 0, 0, 0.15);
}

:host(.assignmentResultsList--sticky) :not(.assignmentResultsList-expander) .assignmentResultsList-tracker-top {
  top: -32px;
}

:host(.assignmentResultsList--sticky) :not(.assignmentResultsList-expander) .assignmentResultsList-tracker-background {
  top: -9px;
}

:host(.assignmentResultsList--sticky) :not(.assignmentResultsList-expander) .assignmentResultsList-tracker-top-icon {
  height: 15px;
}

.assignmentResultsList-rightWhiteout,
.assignmentResultsList-leftWhiteout {
  position: absolute;
  z-index: 9;
  pointer-events: none;
  background-color: white;
  opacity: 0.5;
  top: 23px;
  left: 0;
  bottom: 32px;
  right: 0;
}

.assignmentResultsList-rightWhiteout {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.assignmentResultsList-leftWhiteout {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.assignmentResultsList-collapser-scrollbar {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 2px);
  height: 20px;
  background-color: #26C7A3;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 3px;
}

.assignmentResultsList-collapser-scrollbar-backdrop {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: #7CDDC7;
}

.assignmentResultsList-collapser-scrollbar-indicator {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  background-color: white;
  border: 1px transparent;
  box-sizing: border-box;
  border-radius: 5px;
  transition: left 0.5s ease-in-out;
  pointer-events: all;
}

/* EDGE */
@supports (-ms-ime-align:auto) {
  :host >>> .tableList-column-question {
    transition: width 0.0001s;
  }

  .assignmentResultsList-tracker-top {
    transition: none;
  }

  :host >>> .tableList-column-submitted,
  :host >>> .tableList-column-cumulative,
  :host >>> .tableList-column-time,
  :host >>> .tableList-column-questions,
  :host >>> .tableList-column-attachments,
  :host >>> .tableList-column-comment,
  :host >>> .tableList-column-additional-text,
  :host >>> .tableList-column-action {
    transition: none;
  }
}

@media screen and (min-width: 0\0
) {
  :host >>> .tableList-column-question {
    transition: width 0.0001s;
  }

  .assignmentResultsList-tracker-top {
    transition: none;
  }

  :host >>> .tableList-column-submitted,
  :host >>> .tableList-column-cumulative,
  :host >>> .tableList-column-time,
  :host >>> .tableList-column-questions,
  :host >>> .tableList-column-attachments,
  :host >>> .tableList-column-comment,
  :host >>> .tableList-column-additional-text,
  :host >>> .tableList-column-action {
    transition: none;
  }
}

:host >>> .mainLayout-rwdContainer {
  position: relative;
}

:host >>> .mainLayout-mainContent {
  position: relative;
}
:host >>> .quick-assign-details-wrapper{
  display: flex;
  flex-direction: row;
  margin-right: 10px;
}

.assignmentDetails-listWrapper {
  z-index: 0;
  position: relative;
}

:host empty-content {
  padding: 20px 0;
}

:host assignment-results-list-filters {
  z-index: 1;
  position: relative;
}

:host >>> loading-cover {
  z-index: 2;
}

.assignmentDetails-listControls {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-start;
  margin-left: 0;
}

.assignmentDetails-filterLabel {
  display: flex;
  justify-content: flex-end;
}

.assignmentDetails-listHeader {
  color: #0C1522;
  font-size: 24px;
  font-weight: 300;
  line-height: 39px;
  flex: 1 1 auto;
  white-space: nowrap;
  max-width: 300px;
}

.viewHeader-rightSide {
  display: flex;
  float: right;
  justify-content: space-between;
  flex: 1;
  align-items: center;
}

.assignmentDetails-listFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
}

:host .actionButton {
  cursor: pointer;
  height: 35px;
  border-radius: 3px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
}

.actionButton:hover {
  background-color: #26C7A3;
}

.markAsGradedBtn {
  background-color: #9CAFDA;
}

.setAsArchivedBtn {
  background-color: #7C8CAD;
}

.gradeAllOpenBtn {
  background-color: #26C7A3;
}

.gradeAllOpenBtn:hover {
  background-color: #0070BE;
}

:host .sub-header {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

:host .sub-header > * {
  margin-right: 23px;
}

:host .sub-header label {
  color: #69789D;
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}

.assignmentStatus-dropdown {
  color: #0C1522;
  align-items: center;
  height: 24px;
  vertical-align: middle;
  position: relative;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  transition: all 0.15s ease-in-out;
}

.assignmentStatus-dropdown-editable-inactive {
  background-color: #26C7A3;
  border-radius: 3px;
  color: #FFFFFF;
  cursor: pointer;
}

.assignmentStatus-dropdown-editable-active {
  background-color: #26C7A3;
  border-radius: 3px 3px 0 0;
  color: #FFFFFF;
  cursor: pointer;
}

.assignmentStatus-dropdown-editable-inactive:hover {
  background-color: #0070BE;
}

.assignmentStatus-dropdown-editable-inactive:hover * i {
  color: #FFFFFF;
}

.assignmentStatus-dropdown-wrapper {
  min-width: 100%;
  left: 0;
}

:host .currentStatus-editable {
  display: flex;
  padding: 1px 8px 0 8px;
}

.dropdown-icon {
  color: rgba(0, 0, 0, 0.4);
  margin-left: 5px;
  transition: all 0.15s ease-in-out;
  line-height: 24px;
}

.dropdown-icon-active {
  transform: rotate(180deg) translateY(3px);
  color: #FFFFFF;
}

.status-dropdownItem {
  display: flex;
  transition: all 0.15s ease-in-out;
  white-space: nowrap;
  height: 24px;
  align-items: center;
  vertical-align: middle;
  padding-left: 8px;
  padding-right: 8px;
  line-height: 24px;
}

.status-dropdownItem:hover {
  color: white;
  background-color: #0070BE;
}

.info-icon {
  color: rgba(0, 0, 0, 0.4);
  margin-right: 5px;
}

.edit-icon {
  color: rgba(0, 0, 0, 0.4);
  margin-left: 5px;
  margin-right: 5px;
}

.edit-icon--noneditable {
  margin-right: 0;
}

.edit-icon--noneditable:hover {
  color: rgba(0, 0, 0, 0.4);
}

.assignmentStartDate {
  display: flex;
  align-items: flex-end;
}

.assignmentEndDate {
  display: flex;
  align-items: flex-end;
}

.assignmentDateGroup {
  display: flex;
  align-items: flex-end;
  margin-left: 5px;
  color: #0C1522;
  height: 24px;
}

.assignmentDateGroup label {
  color: #0C1522;
  margin-top: 1px;
}

.assignmentDateGroup-editable {
  color: #FFFFFF;
  border-radius: 3px;
  background-color: #26C7A3;
  cursor: pointer;
}

.assignmentDateGroup-editable:hover {
  background-color: #0070BE;
}

.assignmentDateGroup-editable:hover > * {
  color: #FFFFFF;
}

.assignmentDateGroup-editable label {
  color: #FFFFFF;
  cursor: pointer;
}

.assignmentDateGroup label {
  margin-left: 3px;
}

.assignmentRemainingTime {
  display: flex;
  align-items: flex-end;
}

.assignmentRemainingTimeGroup label {
  margin-left: 5px;
  color: #0C1522;
}

.assignmentDetails-content {
  display: flex;
  margin-top: 30px;
  flex-direction: column;
}

.quick-assignment-details-wrapper {
  display: flex;
}

.quick-assignment-details {
  margin-right: 20px;
}

@media (min-width: 1000px) {
  .assignmentDetails-content {
    margin-right: 20px;
  }
}

@media (min-width: 1400px) {
  .assignmentDetails-content {
    flex-direction: row;
  }
}

.assignmentDetails-content-leftSide {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
}

.assignmentDetails-instructions {
  display: flex;
  flex-direction: column;
  min-width: 400px;
  overflow-y: auto;
  max-height: 400px;
}

.assignmentDetails-instructions-title {
  display: block;
  color: #454E5C;
  font-size: 14px;
  font-weight: 600;
  line-height: 23px;
}

.assignmentDetails-instructions-content {
  display: block;
  color: #454E5C;
  font-size: 16px;
  font-weight: normal;
  line-height: 22px;
  margin: 30px 0 10px 0;
}

.main-chart-wrapper {
  float: right;
  min-width: 770px;
  width: 80%;
}

.assignmentDetails-charts {
  display: flex;
  margin-top: 50px;
}

.assignmentDetails-chart {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.assignmentDetails-chart:first-child {
  margin-left: -50px;
}

.assignmentDetails-chart:not(:last-child) {
  margin-right: -60px;
}

.assignmentDetails-chart-title {
  margin: 0 auto;
  color: #454E5C;
  font-size: 14px;
  font-weight: 600;
  line-height: 23px;
  text-align: center;
}

.reassign-btn-wrapper {
  display: flex;
  margin-top: auto;
}

.reassignBtn {
  background-color: #EAE9EC00;
  border: 1px solid #9CAFDA;
  color: #69789D;
}

.reassignBtn:hover {
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}

.rectangle-line {
  height: 1px;
  width: 100%;
  background-color: #D3D3DC;
  margin-bottom: 40px;
}

.assignmentDetails-datepicker {
  background-color: #26C7A3;
  border-radius: 3px;
  height: 23px;
  width: 100%;
  line-height: 23px;
  color: #FFFFFF;
  padding-left: 4px;
  font-size: 14px;
  margin-left: 2px;
  transition: all 0.15s ease-in-out;
  white-space: nowrap;
  position: relative;
}

.assignmentDetails-datepicker--disabled {
  pointer-events: none;
  background-color: transparent;
  color: #0C1522;
}

.assignmentDetails-datepicker:after {
  content: '';
  font-family: "iconvault";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
  border-radius: 3px;
  text-align: center;
  vertical-align: middle;
  transition: all 0.15s ease-in-out;
  margin-left: 3px;
  margin-right: 3px;
  font-size: 15px;
}

.assignmentDetails-datepicker:after {
  content: "\e8ea";
  background-color: #26C7A3;
  color: #167761;
}

.assignmentDetails-datepicker--disabled:after {
  content: "\e8e8";
  background-color: transparent;
  color: #7C8CAD;
}

.assignmentDetails-datepicker:hover,
.assignmentDetails-datepicker:hover:after {
  color: white;
  background-color: #0070BE;
  cursor: pointer;
}

.assignmentDetails-reassignButton {
  width: 108px;
}

.assignmentDetails-addStudentsButton {
  width: 160px;
}

.assignmentDetails-exportButton {
  margin-left: 20px;
  padding: 0 20px;
  width: 160px;
}

.assignmentDetails-listHeaderWrapper {
  display: flex;
  margin-right: 40px;
  flex-direction: column;
  justify-content: space-between;
}

.assignmentDetails-listHeaderWrapper-leftSide {
  display: flex;
  margin-bottom: 20px;
}

.assignmentDetails-buttons-inInstructions {
  display: none;
}

.assignmentDetails-editButton {
  border: 1px solid #D3D3DC;
  border-radius: 3px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  color: #7C8CAD;
  transition: all 0.2s ease-in-out;
}

.assignmentDetails-editButton:hover {
  background-color: #26C7A3;
  border-color: #26C7A3;
  color: white;
}

.assignmentDetails-editNameButton {
  font-size: 25px;
  height: 37px;
  width: 37px;
}

.assignmentDetails-editDescriptionButton {
  height: 28px;
  width: 28px;
}

@media (min-width: 1000px) {
  .assignmentDetails-charts {
    margin-right: -20px;
  }

  .assignmentDetails-listHeaderWrapper {
    flex-direction: row;
  }

  .assignmentDetails-listControls {
    justify-content: flex-end;
    margin-left: 30px;
  }

  .assignmentDetails-listHeaderWrapper-leftSide {
    margin-bottom: 0;
  }
}

.assignmentDetails-buttons {
  margin-left: 15px;
}

@media (min-width: 1400px) {
  .assignmentDetails-charts {
    margin-right: 0;
    margin-bottom: -40px;
    margin-top: 0;
  }

  .assignmentDetails-content-leftSide {
    padding-bottom: 20px;
    margin-right: 35px;
  }

  .assignmentDetails-buttons-inInstructions {
    margin-top: 10px;
    display: flex;
    float: left;
    justify-content: flex-start;
    flex: 1;
    align-items: start;
  }

  .assignmentDetails-buttons-underContent {
    display: none;
  }
}

.assignmentsListItem-dropdown {
  background-color: #E9F0FF;
  padding-top: 1px;
  padding-right: 8px;
  height: 30px;
  line-height: 30px;
  border-radius: 3px;
  color: #69789D;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.assignmentsListItem-dropdown--hiding {
  background-color: transparent;
}

:host:hover >>> .assignmentsListItem-dropdown--hiding.isStatusEditable {
  background-color: #E9F0FF;
}

.isActionVisible .assignmentsListItem-dropdown,
.isStatusVisible .assignmentsListItem-dropdown--hiding.isStatusEditable {
  background-color: #26C7A3;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.assignmentsListItem-dropdown--hiding .icon-dash-down {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

:host:hover >>> .assignmentsListItem-dropdown--hiding .icon-dash-down {
  opacity: 1;
}

.assignmentsListItem-nameCell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.assignmentsListItem-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.assignmentsListItem-seeDetails {
  margin-left: 2px;
  color: #8B9ED1;
  font-weight: 600;
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  display: none;
}

.assignmentsListItem-dropdownLabel {
  transition: color 0.2s ease-in-out;
  padding-left: 8px;
  flex: 1 0 auto;
}

.isActionVisible .assignmentsListItem-dropdownLabel,
.isStatusVisible .assignmentsListItem-dropdownLabel {
  color: #FFFFFF;
  font-weight: 500;
}

:host:hover >>> .tableList-cell--editable .assignmentsListItem-dropdownLabel {
  color: #26C7A3;
}

:host td {
  white-space: nowrap;
}

:host table-list-edit-button {
  opacity: 0;
}

:host:hover >>> .assignmentsListItem-seeDetails {
  opacity: 1;
}

@media (min-width: 1000px) {
  .assignmentsListItem-seeDetails {
    display: inline;
    margin-left: 10px;
  }

  :host td {
    text-align: left;
  }
}

.dropdown-item {
  height: 30px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 30px;
  background-color: #26C7A3;
}

.dropdown-item:hover {
  background-color: #0070BE;
}

:host dropdown {
  left: 0;
  z-index: 1;
}

:host datepicker-dropdown {
  z-index: 1;
}

.assignmentListItem-dropdown {
  width: 100%;
}

.assignmentListItem-datepickerDropdown {
  border-radius: 3px;
}

.assignmentsListItem-statusCell .isStatusNotEditable {
  pointer-events: none;
  cursor: auto;
}

.assignmentsListItem-dropdown .icon-dash-down {
  transition: all 0.15s ease-in-out;
  line-height: 30px;
}

.isActionVisible .icon-dash-down,
.isStatusVisible .icon-dash-down {
  transform: rotate(180deg);
  color: #FFFFFF;
}

.dropdown-item-text {
  color: #FFFFFF;
  height: 23px;
  line-height: 23px;
  padding: 4px 4px 3px 8px;
}

.assignmentsListItem-dateCell {
  cursor: pointer;
}

.assignmentsListItem-datepicker {
  position: relative;
}

.assignmentsListItem-dateCell--disabled {
  pointer-events: none;
  cursor: auto;
}

.assignmentsListItem-dateCell--disabled .assignmentsListItem-datepicker {
  opacity: 0.5;
}

.assignmentsListItem-actionCell {
  position: relative;
}

.assignmentsListItem-actions {
  display: flex;
  align-items: center;
}

.icon-button--bordered {
  margin-left: 20px;
}

.assignmentsListItem-iconButton {
  width: 35px;
  height: 35px;
  font-size: 20px;
  line-height: 35px;
}

.assignmentsListItem-datepicker:after {
  content: '\e8ea';
  font-family: "iconvault";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
  border-radius: 3px;
  text-align: center;
  vertical-align: middle;
  transition: opacity 0.1s ease-in-out;
  margin-left: 3px;
  background-color: #26C7A3;
  width: 30px;
  height: 30px;
  color: white;
  font-size: 16px;
  line-height: 32px;
  opacity: 0;
}

:host:hover :not(.assignmentsListItem-dateCell--disabled) .assignmentsListItem-datepicker:after {
  opacity: 1;
}
.quick-assign-pin-wrapper{
  text-align: center;
}

.assignment-quick-pin-copy-btn {
  background:none;
  border: 1px solid #D3D3DC;
  font-size: 18px;
  border-radius: 4px;
  vertical-align: middle;
  text-align: center;
  transition: all 0.2s ease-in-out;
  color: #7C8CAD;
}

.assignment-quick-pin-copy-btn:hover {
  background-color: #26C7A3;
  color: white;
}

.addStudents {
    position: relative;
    z-index: 1;
    width: 700px;
}

.createAssignment-assignBlend {
    z-index: 2;
}

:host .popupBody {
  height: 150px;
}

:host .student-item-wrapper {
  display: flex;
}

:host .student-item-wrapper--disabled{
  color: #a2a2a2;
}

.createAssignment {
    position: relative;
    z-index: 1;
}

.createAssignment-assignBlend {
    z-index: 2;
}

.createAssignment-stepperContainer {
    margin-top: 15px;
    margin-bottom: 15px;
}

.createAssignment-resourceTile {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 15px;
}

.createAssignment-dateWrapper {
    position: relative;
}

.createAssignment-datepickerDropdown {
    left: 0;
    top: calc(100% + 5px);
}

.createAssignment-description {
    width: 700px;
    padding: 0 70px;
}

.createAssignment-schedule {
    display: flex;
}

.createAssignment-schedule-start {
    margin-right: 15px;
}

.createAssignment-schedule-start,
.createAssignment-schedule-end {
    flex: 1;
}

.createAssignment-removeResource {
    color: #0B5AB0;
    font-size: 16px;
    transition: color 0.2s ease-in-out;
    cursor: pointer;
    margin-top: 5px;
    margin-left: 15px;
}

.createAssignment-removeResource:hover {
    color: #52D3B6;
}

.createAssignment-resourceList {
    max-width: 864px;
    min-height: 225px;
}

.createAssignment-studentContainer {
    padding: 15px 0 0 0;
}

:host student-selection {
    position: relative;
    height: 500px;
    z-index: 1;
}

.createAssignment-studentSelectionWrapper {
  position: relative;
}

.createAssignment-studentSelection {
  position: relative;
  height: 500px;
  z-index: 1;
}

.createAssignment-studentContainer-shadow {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    box-shadow: inset 3px -48px 55px -50px rgba(0,0,0,0.2);
    pointer-events: none;
}

.createAssignment {
    position: relative;
    z-index: 1;
}

.createAssignment-assignBlend {
    z-index: 2;
}

.createAssignment-stepperContainer {
    margin-top: 15px;
    margin-bottom: 15px;
}

.createAssignment-resourceTile {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 15px;
}

.createAssignment-dateWrapper {
    position: relative;
}

.createAssignment-datepickerDropdown {
    left: 0;
    top: calc(100% + 5px);
}

.createAssignment-description {
    width: 700px;
    padding: 0 70px;
}

.createAssignment-schedule {
    display: flex;
}

.createAssignment-schedule-start {
    margin-right: 15px;
}

.createAssignment-schedule-start,
.createAssignment-schedule-end {
    flex: 1;
}

.createAssignment-removeResource {
    color: #0B5AB0;
    font-size: 16px;
    transition: color 0.2s ease-in-out;
    cursor: pointer;
    margin-top: 5px;
    margin-left: 15px;
}

.createAssignment-removeResource:hover {
    color: #52D3B6;
}

.createAssignment-resourceList {
    max-width: 864px;
    min-height: 225px;
}

.createAssignment-studentContainer {
    padding: 15px 0 0 0;
}

:host student-selection {
    position: relative;
    height: 500px;
    z-index: 1;
}

.createAssignment-studentSelectionWrapper {
  position: relative;
}

.createAssignment-studentSelection {
  position: relative;
  height: 500px;
  z-index: 1;
}

.createAssignment-studentContainer-shadow {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    box-shadow: inset 3px -48px 55px -50px rgba(0,0,0,0.2);
    pointer-events: none;
}

.radio-input {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.radio-input input {
  width: 25px;
  height: 25px;
  margin: 5px;
}

.number-input {
  width: 45px;
}

.instructions-area{
  resize: none;
  height: 100px;
}

.bbs-lesson-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.bbs-lesson-group bbs-lesson-group-title {
    margin-bottom: 10px;
}

.bbs-lesson-group-lessons {
    flex: 1 0 auto;
    display: flex;
    align-content: stretch;
    align-items: stretch;
}

.bbs-lesson-group-lessons bbs-lesson-item {
    flex: 1 1 0px;
    margin-right: 10px;
}

.bbs-lesson-group-lessons bbs-lesson-item:last-child {
    margin-right: 0;
}

:host {
  width: 150px;
  height: 220px;
  margin-right: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

:host:hover {
  outline: solid 2px;
}

:host(:not(.cap-sci-product-item--inactive)) {
  cursor: pointer;
}

:host .cap-sci-product-thumbnail {
  height: 130px;
}

:host .cap-sci-product-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
}
:host .cap-sci-product-title-wrapper {
  background-color: #ffffff;
  height: 90px;
  width: 100%;
  display: flex;
  overflow: hidden;
}

:host .cap-sci-product-title {
  padding: 2px;
  width: 100%;
  margin: auto;
  text-align: center;
}

.cap-sci-product-item--inactive .cap-sci-product-thumbnail,
.cap-sci-product-item--inactive .title {
  filter: grayscale(100%) opacity(60%);
}

:host {
  width: 150px;
  height: 220px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
}

:host:hover {
  outline: solid 2px;
}

:host(:not(.ckit-product-item--inactive)) {
  cursor: pointer;
}

:host .ckit-product-thumbnail {
  height: 130px;
}

:host .ckit-product-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
}
:host .ckit-product-title-wrapper {
  background-color: #ffffff;
  height: 90px;
  width: 100%;
  display: flex;
  overflow: hidden;
}

:host .ckit-product-title {
  padding: 2px;
  width: 100%;
  margin: auto;
  text-align: center;
}

.ckit-product-item--inactive .ckit-product-thumbnail,
.ckit-product-item--inactive .title {
  filter: grayscale(100%) opacity(60%);
}

:host {
  width: 250px;
  height: 340px;
  display: flex;
  flex-direction: column;
}

:host:hover .open_sci_ed-product-thumbnail,
:host:hover .open-sci-ed-product-title {
  border-color: #ffa621;
  background-color: #ffa621;
  color: white !important;
}

:host(:not(.open_sci_ed-product-item--inactive)) {
  cursor: pointer;
}

:host .open_sci_ed-product-thumbnail {
  border: #0210ac 2px;
  border-style: solid solid none;
  height: 250px;
  width: 250px;
  -webkit-transition: background 0.2s ease-in-out; /* For Safari 3.0 to 6.0 */
  transition: background 0.2s ease-in-out; /* For modern browsers */
}

:host .open_sci_ed-product-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
}

:host .open-sci-ed-product-title {
  height: 90px;
  background-color: #ffffff;
  padding: 10px;
  border: #0210ac 2px solid;
  text-align: center;
  -webkit-transition: background 0.2s ease-in-out; /* For Safari 3.0 to 6.0 */
  transition: background 0.2s ease-in-out; /* For modern browsers */
}

.open_sci_ed-product-item--inactive .open_sci_ed-product-thumbnail,
.open_sci_ed-product-item--inactive .open-sci-ed-product-title {
  filter: grayscale(100%) opacity(60%);
}

:host {
  width: 100%;
  height: 325px;
  display: flex;
  margin-bottom: 25px;
  color: #FFFFFF;
  font-family: "Myriad Pro Bold Condensed";
}

:host(:not(.stcms-product-item--inactive)) {
  cursor: pointer;
}

:host:not(.stcms-product-item--inactive):hover .stcms-product-item__background {
  outline: #ece22b solid 10px;
  font-family: "Myriad Pro Bold Condensed Italic";
}

.stcms-product-item__background {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background-image: url('images/stcms/product-item-frame.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 50px;
  padding: 10px;
}

.stcms-product-item__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  border-radius: 40px;
}

.stcms-product-item__title {
  display: flex;
  align-items: center;
  height: 100%;
  margin-top: 20px;
  padding: 0 30px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

.stcms-product-item__thumbnail {
  margin-bottom: 30px;
  width: 160px;
  height: 140px;
  border: solid #ffffff 2px;
}

.stcms-product-item--inactive {
  filter: grayscale(100%) opacity(60%);
}

.stcms-subject-earth-science .stcms-product-item__frame {
  background-color: #3A7C2C;
}

.stcms-subject-life-science .stcms-product-item__frame {
  background-color: #027DC0;
}

.stcms-subject-physical-science .stcms-product-item__frame {
  background-color: #771D7B;
}

.stcms-subject-research-module .stcms-product-item__frame {
  background-color: #CC6C18;
}

.resource-menu {
  background: transparent;
  display: flex;
  width: 100%;
  max-width: 250px;
  flex: 1 1 0;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 61px;
  font-size: 21px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.resource-checkbox-wrapper {
  font-weight: 500;
  cursor: pointer;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resource-checkbox {
  border: none;
  background: none;
  width: 15px;
  height: 15px;
  vertical-align: baseline;
  margin-right: 6px;
  text-align: center;
}

.resource-checkbox:active,
.resource-checkbox:focus {
  box-shadow: none !important;
}

.layout--button {
  height: 40px;
  border-radius: 3px;
  background-color: #0070BE;
  width: 184px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

:host {
    left: 0;
    top: calc(100% + 5px);
    color: black;
    position: absolute;
}

:host dropdown {
    border-radius: 5px;
}
:host {
    display: flex;
}

:host >>> filter-component:not(:last-child) {
    margin-right: 20px;
}

.filterGroup-clearFiltersButton {
  position: relative;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
}

.filterGroup-clearFiltersButton-backdrop {
  background-color: red;
  border-radius: 3px;
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  opacity: 1;
  height: 100%;
  transition: all 0.3s ease-in-out;
}

.filterGroup-clearFiltersButton-content {
  background-color: white;
  height: 30px;
  color: red;
  font-size: 14px;
  font-weight: 500;
  border-radius: 3px;
  vertical-align: middle;
  padding: 0 10px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  position: relative;
}

.filterGroup-clearFiltersButton-content:hover {
  background-color: red;
  color: white;
}

.create-lti-school-details {
  width: 543px;
}

:host .textInput--invalid {
  border-color: #D0021B;
}

.createSchool-details {
  width: 543px;
}

.createSchool-stateDropdown {
  left: 0;
  top: calc(100% + 5px);
}

.createSchool-addressWrapper-first,
.createSchool-addressWrapper-second {
  display: flex;
}

.createSchool-state,
.createSchool-phone {
  margin-right: 15px;
}

.createSchool-state,
.createSchool-phone,
.createSchool-email,
.createSchool-zipCode {
  flex: 1;
}

:host .textInput--invalid {
  border-color: #D0021B;
}


:host {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out 0.2s;
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}

:host(.loadingCover--activated) {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.05s;
}

:host(.loadingCover--withBlend) {
  background-color: rgba(231, 231, 231, 0.6);
}

:host loading-spinner {
  flex: 0 1 120px;
}

:host {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999999;
  pointer-events: none;
}
.loadingSpinner {
  position: relative;
  transform: rotate(70deg);
  max-width: 120px;
  overflow: hidden;
}

.loadingSpinner:after {
  content: '';
  display: block;
  padding-top: 100%;
}

.loadingSpinner-svg {
  animation: rotate 1.1s infinite ease;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.loadingSpinner-svg-circle{
  stroke: #999999;
  stroke-width: 4;
  fill: none;
  stroke-dasharray: 15, 200;
  stroke-linecap: round;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

:host {
  cursor: pointer;
  width: 100%;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #454E5C;
  font-size: 14px;
  height: 50px;
  border-bottom: 2px solid #EAE9EC;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
  transition-property: border-color, color;
}

.massSelectionItem-name {
  flex: 1 0;
}

.massSelectionItem-icon {
  color: #7C8CAD;
  transition: color 0.2s ease-in-out;
}

:host(.massSelectionItem--selected) .massSelectionItem-icon {
  color: #0070BE;
}

:host:hover .massSelectionItem-icon {
  color: #52D3B6;
}

:host(.massSelectionItem--selected) {
  color: #0070BE;
}

:host:hover {
  color: #52D3B6;
  border-color: #52D3B6;
}

:host(.massSelectionItem--disabled) {
  color: #9b9b9b;
  border-color: #9b9b9b;
}

:host(.massSelectionItem--disabled) .massSelectionItem-icon {
  color: #9b9b9b;
}

:host {
  position: relative;
  padding: 10px 0 10px 10px;
}

.massSelectionMenu-header {
  color: #0B5AB0;
  margin: 15px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
}

:host empty-content {
  height: auto;
}

:host {
  padding: 10px 30px 25px 30px;
  border: none !important;
}

.massSelectionSearch-wrapper {
  width: 100%;
  display: flex;
  position: relative;
  height: 42px;
  border: 2px solid #D7D7DC;
  color: #7C8CAD;
  background-color: #FFFFFF;
  padding: 2px;
}

.massSelectionSearch-box {
  border: none !important;
  background-color: #FFFFFF !important;
  color: #7C8CAD !important;
  height: 100%;
  width: 100%;
  padding: 0 8px;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: none !important;
}

.massSelectionSearch-box::placeholder {
  color: #7C8CAD;
}

.massSelectionSearch-box--clearable {
  color: #454E5C !important;
}

.massSelectionSearch-wrapper--clearable {
  background-color: #FFFFFF;
  color: #454E5C;
  border: 2px solid #26C7A3;
}

.massSelectionSearch-submit {
  color: #7C8CAD;
  height: 100%;
  box-shadow: none;
  border-radius: 0 3px 3px 0;
  flex: 0 0;
  text-align: center;
  line-height: 26px;
  cursor: pointer;
  display: flex;
  position: absolute;
  right: 4px;
  top: 0;
  align-items: center;
}

.massSelectionSearch-submit .studentSelection-iconBox {
  width: 30px;
  padding: 0 7px;
  font-size: 21px;
}

.massSelectionSearch-reset i {
  font-size: 19px;
  color: #454E5C;
}

.massSelectionSearch-submit, .studentSelectionSearch-reset i {
  transition: opacity 0.2s ease-in-out;
}

.section-label {
  font-size: 12px;
  font-weight: 600;
  color: #454E5C;
  letter-spacing: 1px;
  line-height: 19px;
  text-transform: uppercase;
  display: block;
}

.my-membership-list {
  display: flex;
  flex-direction: column;
  border-radius: 0 5px 5px 5px;
  background-color: #FFFFFF;
  position: relative;
  padding: 0 20px;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1)
}

:host empty-content {
  padding: 30px 0;
}

.my-membership-list-item {
  cursor: default;
  border:none;
  display: flex;
  height: 50px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

:host .my-membership-list-item:not(:last-of-type) {
  border-bottom: 2px solid #EAE9EC;
}

.my-membership-list-item > * {
  flex: 1;
  padding: 0 10px;
}

:host paginator {
  margin-top: 10px;
}

.my-membership-noDistrict {
  color: silver;
}

:host {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 20px;
  padding: 1em 1em 0 1em;
}

:host >>> .header-title {
  font-size: 20px;
  color: #0D1C2E;
  font-weight: 600;
  letter-spacing: 0.03em;
}

:host >>> .close-btn {
  background-color: transparent;
  border: none;
  color: #9CAFDA;
  cursor: pointer;
  font-size: 29px;
  text-decoration: none;
  transition: color ease-in-out 0.15s;
  margin-left: 20px;
}

:host >>> .close-btn:hover {
  color: black
}


:host {
  min-width: 450px;
}

:host #comment {
  resize: none;
  padding: 10px;
  height: 220px;
  border: 1px solid #D7D7DC;
  border-radius: 10px;
  background-color: rgba(216,216,216,0);
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.05);
}

:host .popupBody {
  padding: 15px 20px 0 20px;
}

:host .popupFooter {
  padding: 5px 15px 30px 15px
}

:host .commonButton {
  min-width: 120px;
  line-height: 49px;
  display: flex;
  justify-content: center;
  align-items: center;
}

:host .icon {
  font-size: 1.5em;
}

:host .icon-close-cross {
  font-size: 2em;
}

:host .icon-save-arrow {
  margin-right: 4px;
}

:host {
    min-width: 500px;
}

.change-password-header {
  background: #EAE9EC;
  border-radius: 5px 5px 0 0;
}

.change-password-header .close-btn {
  color: #0D1C2E !important;
}

.change-password-header .close-btn:hover {
  color: #FFFFFF !important;
}

.changePasswordPopupBody {
  background-image: linear-gradient(0deg, white 67%, #EAE9EC 33%);
}

.changePassword-old-password {
  margin-bottom: 26px;
}

:host .popupBody {
    width: 500px;
}

.createSchool {
    position: relative;
    z-index: 1;
}

.createSchool-creatingBlend {
    z-index: 2;
}

.createSchool-stepperContainer {
    margin-top: 15px;
    margin-bottom: 15px;
}

.create-school-popup-body {
  min-width: 716px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.createSchool-describeSchool {
    width: 543px;
}

:host .field-description {
  height: 201px;
  resize: none;
}

:host >>> .createSchool-adminsSelect-noSelectedAdminsInfo {
  font-size: 12px;
  margin: 2px;
}

:host .textInput--invalid {
  border-color: #D0021B;
}

:host checkbox {
  margin-right: 20px;
}

:host >>> .popupBody {
  max-width: 40vw;
  min-width: 300px;
  white-space: pre-wrap;
  word-break: break-all;
}

@media (min-width: 1200px) {
  :host >>> .popupBody {
    max-width: 600px;
  }
}

:host {
    min-width: 600px;
}

.massSelectionPopup {
  background-color: white;
  position: relative;
  z-index: 1;
}

.massSelectionPopup-body {
  padding: 15px 0 0 0;
  width: 700px;
}

.massSelectionPopup-selectionWrapper {
  position: relative;
}

.massSelectionPopup-selection {
  position: relative;
  height: 500px;
  z-index: 1;
}

.massSelectionPopup-selectionWrapper-shadow {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  box-shadow: inset 3px -48px 55px -50px rgba(0,0,0,0.2);
  pointer-events: none;
}

.massSelectionPopup-assignBlend {
  z-index: 2;
}

.your-schools-tab-container {
  display: flex;
  align-content: center;
  border-radius: 0 0 5px 5px;
  background-color: #EAE9EC;
  padding: 13px 30px 13px 30px;
}

.your-schools-list-wrapper {
  width: 650px;
  max-height: 30em;
  margin-left: 10px;
  min-height: 214px;
}

.schoolsList-noResults {
  color: #9EAAC2;
  font-size: 24px;
  text-align: center;
  width: 100%;
}

.join-school-tab-container{
  padding-top: 30px;
  align-content: center;
  border-radius: 0 0 5px 5px;
  background-color: #EAE9EC;
  width: 720px;
  height: 240px;
}

.join-school-form-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.join-school-enter-code {
  width: 540px;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
}

.join-button {
  min-width: 98px;
  margin-left: 20px;
  margin-bottom: 10px;
}

.join-school-divider {
  width: 100%;
  height: 30px;
  padding: 0 70px;
  margin: 0px 0;
  text-align: center;
}

.join-school-divider > hr {
  width: 45%;
  height: 15px;
  padding: 0;
  margin: 15px 0 0;
  border-top: 1px solid #ccc;
}

.join-school-divider-text {
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-size: 12px;
  color: #868686;
  text-align: center;
  line-height: 30px;
}

.join-school-createButton {
  display: block;
  margin: 20px auto;
  background-color: #7C8CAD;
  color: #FFFFFF;
  border: solid #7C8CAD 1px;
}

:host {
    min-width: 500px;
}
:host .popupBody {
  width: 600px;
}

:host .section-message {
  margin-bottom: 15px;
}

:host {
  min-width: 550px;
  padding: 5px;
}

.student-attachments-upload-file-button {
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
}

.student-attachments-list {
  display: flex;
  flex-direction: column;
  max-height: 15em;
  overflow: auto;
}

.student-attachments-list-element {
  display: flex;
  flex: 0 0 auto;
  height: 50px;
  margin-top: 8px;
}

.student-attachments-list .commonButtonsWrapper {
  display: flex;
}

.student-attachments-list .commonButton {
  height: 100%;
  margin: 0px 5px;
  box-shadow: none;
}

.student-attachments-list .commonButton a {
  color: inherit;
  transition: none;
}

.student-attachments-list .commonButton a:hover {
  text-decoration: none;
}

.student-attachments-list-element-name {
  width: 100%;
  margin-right: 15px;
  vertical-align: middle;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #CECECE;
}

.student-attachments-list-element:last-child .student-attachments-list-element-name {
  border-bottom: none;
}

.student-attachments-list--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  font-size: 24px;
  color: #9EAAC2;
}

:host {
  min-width: 550px;
  padding: 5px;
}

:host >>> .popupBody {
  height: 265px;
}

:host >>> .state-list-item {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 5px;
  transition: all 0.2s ease-in-out;
  background-color: #FFFFFF;
}

:host >>> .state-list-item:hover {
  background-color: #cfcfcf;
  font-weight: bold;
  cursor: pointer;
}

:host>>>.state-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

:host>>>.state-name {
  padding-left: 10px;
  padding-right: 20px;
}

:host>>>.last-modified {
  text-align: right;
  padding-right: 20px;
}

:host>>>.start-session{
  width: 100%;
  padding-left: 10px;
  color:#0D1C2E;
  font-weight: 600;
}

:host >>> .remove-state-icon-button {
  height: 24px;
  width: 24px;
  text-align: center;
  line-height: 24px;
  transition: all 0.2s ease-in-out;
}

:host >>> .remove-state-icon-button:hover {
  color: #0072AD;
  cursor: pointer;
}

:host >>> .state-play-icon-button {
  color: #69789D;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  transition-property: text-shadow, color;
}

:host >>>.state-play-icon-button:hover {
  color: #0072AD;
  cursor: pointer;
}

:host >>>.divider {
  display: flex;
  flex-direction: row;
  color: #0D1C2E;
  font-weight: 600;
}

:host >>>.divider:before,
:host >>>.divider:after {
  content: "";
  flex: 1 1;
  border-bottom: 1px solid;
  margin: auto;
}

:host >>>.divider:before {
  margin-right: 10px
}

:host >>>.divider:after {
  margin-left: 10px
}

.statePopupFooter {
  padding: 15px 20px;
  display: flex;
  justify-content: flex-start;
}

:host >>> .popupBody {
  max-width: 40vw;
  min-width: 300px;
  white-space: pre-wrap;
  word-break: break-all;
}

@media (min-width: 1200px) {
  :host >>> .popupBody {
    max-width: 600px;
  }
}

:host .popupBody {
  width: 600px;
  height: 200px;
  margin-bottom: 20px;
  padding: 15px 20px;
}

:host .section-message {
  margin-bottom: 15px;
}

.textAreaInput {
  width: 100%;
  height: 100%;
}

:host .videoPopup-iFrame {
  border-width: 0px;
  overflow: hidden;
  box-shadow: 0 0 1px grey;
}

.resource-list-item {
  position: relative;
  height: 274px;
  width: 246px;
  border-radius: 10px;
  margin: 0 35px 50px 0;
}

.resource-list-item-comment-button {
  background-color: darkorange;
  border: none;
  position: absolute;
  top: -2px;
  right: -2px;
  height: 40px;
  width: 60px;
  border-radius: 0 7px 0 25px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
  display: flex;
  z-index: 1;
  cursor: pointer;
}

.resource-list-item-comment-button-icon {
  position: absolute;
  right: 20px;
  top: 1px;
}

.resource-list-item--highlighted {
  width: 255px;
  height: 185px;
  border: 5px solid #FFFFFF;
  box-shadow: 0 0 30px 0 rgba(0,0,0,0.4);
  margin: 30px 30px 25px 25px;
  cursor: default;
}

.resource-list-item-thumbnail-container {
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  width: 246px;
  height: 215px;
  display: block;
}

.resource-list-item-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 155px;
  text-align: center;
}

.resource-title-label {
  color: #FFFFFF;
  font-size: 19px;
  font-weight: bold;
  line-height: 22px;
  padding: 0 10px;
  margin: 8px 0;
  letter-spacing: 1px;
  max-height: 44px;
  overflow: hidden;
  width: 100%;
}

.resource-item-playButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: white;
  font-size: 2.5em;
  background-color: #23B597;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.resource-item-playButton:hover {
  background-color: #0071AF !important;
}

.resource-list-item--visited .resource-item-playButton {
  background-color: #0071AF;
}

.resource-list-item--visited .resource-item-playButton:hover {
  background-color: #23B597 !important;
}

:host .resource-item-playButton .icon-play {
  font-size: 0.6em;
  margin-left: 5px;
  margin-bottom: 2px;
}

.selection-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10px;
  justify-content: space-between;
  height: 40px;
  width: 100%;
  color: rgba(0,0,0,0.7);
  cursor: pointer;
}

.selection-item:hover {
  color: #27BF92;
  background-color: rgba(38,199,163,0.1);
}

.selection-item--selected {
  color: #27BF92;
}

.selection-item .selection-item-label {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-menu-button-wrapper {
  height: 36px;
  width: 100%;
  display: flex;
  position: relative
}

.sidebar-menu-button-content {
  white-space: nowrap;
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  left: 0px;
  color: #454E5C;
  font-weight: 500;
  font-size: 16px;
  background-color: transparent;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.20s ease-in-out;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

.sidebar-menu-button-content.isActive {
  background-color: #EAE9EC;
}

.sidebar-menu-button-content.isActive,
:host(.sidebar-menu-button--highlighted) .sidebar-menu-button-content {
  color: #0B5AB0;
}

.sidebar-menu-button-content.isActive:hover,
:host(.sidebar-menu-button--highlighted) .sidebar-menu-button-content:hover,
.sidebar-menu-button-content:hover {
  color: #27BF92;
}

.sidebar-menu-button-text {
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
  padding-left: 9px;
}

.sidebar-menu-button-arrow {
  top: 0;
  right: 10px;
  bottom: 0;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 18px solid transparent;
  transition: all 0.20s ease-in-out;
}

.sidebar-menu-button-arrow.isActive {
  border-left-color: #EAE9EC;
}

.sidebarMenu-expandingButton-top {
    display: flex;
    cursor: pointer;
}

.sidebarMenu-expandingButton-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #9B9B9B;
    transition: color 0.2s ease-in-out;
}

.sidebarMenu-expandingButton-icon > i{
    transition: transform 0.2s ease-in-out;
    transform: translateY(15%) rotate(-90deg) ;
    transform-origin: 50% 25%;
    margin-right: 2px;
}

:host(.sidebarMenu-expandingButton--open) > .sidebarMenu-expandingButton-top > .sidebarMenu-expandingButton-icon > i {
    transform: translateY(15%) rotate(0deg);
}

.sidebarMenu-expandingButton-content {
    padding-left: 25px;
    display: none;
}

:host(.sidebarMenu-expandingButton--open) > .sidebarMenu-expandingButton-content {
    display: block;
}

:host(.sidebarMenu-expandingButton--highlighted) > .sidebarMenu-expandingButton-top > .sidebarMenu-expandingButton-icon {
    color: #0070BE;
}

:host(.sidebarMenu-expandingButton--highlighted) > .sidebarMenu-expandingButton-top:hover > .sidebarMenu-expandingButton-icon,
.sidebarMenu-expandingButton-top:hover > .sidebarMenu-expandingButton-icon {
    color: #27BF92;
}

.sidebarMenu-expandingButton-innerButton {
    flex: 1;
}

.sidebar-menu-header-wrapper {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 33px;
  position: relative;
  display: flex;
  align-items: center;
}

.sidebar-menu-header-text {
  color: #0C1522;
  font-weight: 500;
  font-size: 20px;
  line-height: 33px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 10px;
  position: absolute;
  right: 40px;
  top: 0;
  bottom: 0;
  left: 20px;
}

.sidebar-menu-header-icon {
  line-height: 19px;
  width: 20px;
  font-size: 19px;
  color: #0070BE;
  position: absolute;
  right: 20px;
  cursor: pointer;
  transition: all 0.20s ease-in-out;
}

.sidebar-menu-header-icon:hover {
  color: #27BF92;
}

:host {
    height: 30px;
    width: 30px;
    border-radius: 3px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    color: #7C8CAD;
    font-size: 20px;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    line-height: 30px;
}

:host(.sortingButton--active) {
    color: #26C7A3;
}

:host:hover {
    background-color: #26C7A3;
    color: white;
}
:host {
    width: 30px;
    height: 30px;
    display: inline-block;
    color: #7C8CAD;
    background-color: #E9F0FF;
    border-radius: 2px;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

:host:hover {
    background-color: #26C7A3;
    color: white;
}

:host {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.tableListHeader {
    position: relative;
    width: 100%;
    height: 45px;
}

.tableListHeader-icon {
    width: 100%;
    height: 30px;
    color: #D3D3DC;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: 30px;
}

.tableListHeader--sortable {
    cursor: pointer;
}

.tableListHeader-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    vertical-align: middle;
    line-height: 23px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    color: #7E8CAB;
    transition: background-color 0.2s ease-in-out;
}

.tableListHeader-cap {
    background-color: white;
    height: 6px;
    width: 100%;
}

.tableListHeader-titles {
    padding: 5px 7px;
    transition: color 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    min-width: 0;
    justify-content: center;
}

.tableListHeader-title,
.tableListHeader-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tableListHeader-title {
    font-weight: 600;
}

.tableListHeader-subtitle {
    font-weight: 500;
    font-size: 12px;
    line-height: 10px;
}

.tableListHeader-sortingIcons {
    display: inline-flex;
    flex-direction: column;
    font-size: 11px;
    line-height: 11px;
    justify-content: center;
    margin-right: 7px;
    align-items: flex-start;
    color: #D1D7E4;
}

.tableListHeader-sortIcon-secondary,
.tableListHeader-sortIcon-main {
    transition: color 0.2s ease-in-out;
}

.tableListHeader-sortIcon-secondary {
    transform: scaleY(-1);
    margin-bottom: 2px;
}

.tableListHeader-sortIcon-secondary.tableListHeader-sortingIcon--active,
.tableListHeader-sortIcon-main.tableListHeader-sortingIcon--active,
.tableListHeader--withActiveSort .tableListHeader-titles {
    color: #0070BE;
}

.tableListHeader-icon a {
  color: #D3D3DC;
}

.tableListHeader-icon a:hover {
  cursor: pointer;
  color: #26C7A3;
}

/* ============== TEMPLATE ON HOVER ============== */

.tableListHeader-hoverTemplate {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    transform: rotateX(90deg);
    transform-origin: bottom center;
    transition: all 0.2s ease-in-out;
    transition-property: transform, opacity;
}

@media (min-width: 1000px) {
    .tableListHeader-titles {
        padding: 10px 7px 10px 20px;
    }
    .tableListHeader-sortingIcons {
        margin-right: 20px;
    }
}

.tableListHeader-templateContainer {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  min-width: 0;
  width: 100%;
}

/* ============== CENTERED ============== */

.tableListHeader--centered .tableListHeader-titles {
    padding: 10px 0;
    text-align: center;
}

.tableListHeader--centered .tableListHeader-wrapper {
    justify-content: center;
}

/* ============== COMPACT STYLING ============== */
.tableList--compact .tableListHeader-titles {
  padding: 5px 1px !important;
}

@media (min-width: 1000px) {
  .tableList--compact .tableListHeader-titles {
    padding: 5px 6px 5px 1px !important;
  }
}

.tableList--compact .tableListHeader {
  height: 60px !important;
}

.viewHeaderButton-icon {
    size: 14px;
    color: #7C8CAD;
    transition: all 0.2s ease-in-out;
    text-align: center;
    display: inline-block;
    transform-origin: center center;
}

.viewHeaderButton--space {
    width: 7px;
}

.viewHeaderButton-text {
  text-overflow: ellipsis;
  overflow: hidden;
}

:host {
    color: #7a7a9b;
    font-weight: 500;
    size: 12px;
    background-color: #D3D3DC;
    border-radius: 3px;
    padding: 0 7px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
    height: 30px;
    line-height: 32px;
    display: flex;
    justify-content: space-between;
}

:host(.viewHeaderButton--reverse) {
  flex-direction: row-reverse;
}

:host(.viewHeaderButton--active),
:host:hover {
    color: white;
    background-color: #26C7A3;
}

:host(.viewHeaderButton--active) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

:host:hover >>> .viewHeaderButton-icon {
    color: white;
}

:host(.viewHeaderButton--active) .viewHeaderButton-icon {
    transform: rotate(180deg);
    color: white;
    line-height: 33px;
}

/*
  VIEW HEADER BUTTON: BLUE VERSION
*/
:host(.view-header-button--blue) {
  background-color: #0070BE;
  color: white;
}

:host(.view-header-button--blue) .viewHeaderButton-icon {
  color: white;
}

:host(.view-header-button--blue):hover {
  background-color: #26C7A3;
}

/*
  VIEW HEADER BUTTON: GREEN VERSION
*/
:host(.view-header-button--green) {
  background-color: #26C7A3;
  color: white;
}

:host(.view-header-button--green) .viewHeaderButton-icon {
  color: white;
}

:host(.view-header-button--green):hover {
  background-color: #0070BE;
}

/*
  VIEW HEADER BUTTON: RED VERSION
*/
:host(.view-header-button--red) {
  background-color: #c72626;
  color: white;
}

:host(.view-header-button--red) .viewHeaderButton-icon {
  color: white;
}

:host(.view-header-button--red):hover {
  background-color: #26C7A3;
}

/*
  VIEW HEADER BUTTON: GREY VERSION
*/
:host(.view-header-button--grey) {
  background-color: #D3D3DC;
}

:host(.view-header-button--grey) .viewHeaderButton-icon {
  color: #7C8CAD;
}

:host(.view-header-button--grey):hover {
  background-color: #7C8CAD;
}
:host(.view-header-button--grey):hover .viewHeaderButton-icon {
  color: #D3D3DC;
}

/*
  VIEW HEADER BUTTON: GREY-INVERSE VERSION
*/
:host(.view-header-button--grey-inverse) {
  background-color: #7C8CAD;
}

:host(.view-header-button--grey-inverse) .viewHeaderButton-icon {
  color: #D3D3DC;
}

:host(.view-header-button--grey-inverse):hover {
  background-color: #D3D3DC;
}
:host(.view-header-button--grey-inverse):hover .viewHeaderButton-icon {
  color: #7C8CAD;
}

:host >>> .tableList-column-title {
  width: 120px;
}

:host >>> .tableList-column-owner {
  width: 100px;
}

:host >>> .tableList-column-owner-type {
  width: 50px;
}

:host >>> .tableList-column-expiry {
  width: 80px;
}

:host >>> .tableList-column-status {
  width: 75px;
}

:host tr:hover {
  cursor: pointer;
}

@media (min-width: 800px) {
  :host >>> .tableList-column-owner-type {
    width: 90px;
  }
}

:host >>> .listItem-error {
  cursor: pointer;
  color: #ff0000;
}

:host >>> .listItem-error:hover {
  color: #ff0000;
  text-decoration: underline;
}

:host >>> .listItem-success {
  cursor: pointer;
  color: #0070BE;
}

:host >>> .listItem-success:hover {
  color: #0070BE;
  text-decoration: underline;
}

:host >>> .listItem-bolded {
  font-weight: 600;
  opacity: 0.9;
}

:host >>> .listItem-done {
  pointer-events: none;
}

:host {
  width: 500px;
}

:host stepper {
  margin-bottom: 20px;
}

.import-accounts-action-type-select,
.import-accounts-organisation-select {
  padding: 0 10px;
}

:host {
  width: 100%;
}

:host >>> td {
  vertical-align: top;
}

.importAccountDetailsListItem-cell {
  font-weight: 500;
  font-size: 12px;
  background-color: #ffffff;
  border-radius: 3px;
  padding: 0 7px;
  transition: all 0.1s ease-in-out;
  white-space: nowrap;
  height: 30px;
  min-height: 30px;
  line-height: 32px;
  display: flex;
  border: 1px solid #D3D3DC;
  overflow: hidden;
  text-overflow: ellipsis;
}

.importAccountDetailsListItem-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 30px;
}
.importAccountDetailsListItem-cell--error {
  border-color: #C30016;
}

.importAccountDetailsList-error {
  color: #C30016;
  font-size: 12px;
  margin-top: 3px;
  display: block;
  margin-bottom: 0;
}

:host {
  padding: 1px 0;
  box-shadow: none !important;
}

:host >>> .listItem-error {
  cursor: pointer;
  color: #ff0000;
}

:host >>> .listItem-error:hover {
  color: #ff0000;
  text-decoration: underline;
}

.import-classlink-configuration-wrapper {
  padding: 0;
  background-color: transparent !important;
}

.import-classlink-configuration-container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.import-classlink-configuration-container:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

.import-classlink-configuration-header {
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
}

.import-classlink-header-cell {
  flex: 1;
  display: flex;
  font-size: 16px;
  line-height: 27px;
  font-weight: 600;
  text-align: center;
  justify-content: center;
}

.import-classlink-configuration-header > *:not(:first-child) {
  padding-left: 10px;
}

.import-classlink-header-path {
  justify-content: flex-start;
  max-width: 240px;
}

.config-path {
  text-overflow: ellipsis;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  width: 240px;
}

.import-classlink-item-menu {
  display: flex;
  justify-content: flex-end;
}

.import-classlink-item-menu icon-button {
  margin-left: 10px;
}

.import-classlink-configuration-expand-button.import-classlink-configuration-expand-button--expanded {
  border-color: #26C7A3;
}

.import-classlink-configuration-content {
  padding: 0;
  height: 0;
  background: #FFFFFF;
  transition: max-height 0.5s ease-in-out;
}

.import-classlink-configuration-job {
  display: flex;
  align-items: center;
  height: 50px;
  background-color: #F1F1F2;
  color: #0D1C2E;
  border-radius: 3px;
  transition: all 0.2s ease-in-out;
  margin: 2px 0;
  justify-content: space-between;
  padding: 0 10px;
  border: 1px solid transparent;
  cursor: pointer;
}

.import-classlink-configuration-job > * {
  flex: 1;
}

.import-classlink-configuration-job:hover {
  border-color: #26C7A3;
  color: #26C7A3;
}

.import-classlink-configuration-job-status {
  font-size: 16px;
  font-weight: bold;
  line-height: 15px;
  letter-spacing: 0.03em;
  border-bottom: 0 solid #26C7A3;
}

.import-classlink-configuration-job-button {
  display: flex;
  justify-content: flex-end;
}

/* EXPANDED STATE */
:host(.import-classlink-configuration-list-item--expanded) .import-classlink-configuration-wrapper {
  padding: 15px 0;
}

:host(.import-classlink-configuration-list-item--expanded) .import-classlink-configuration-container {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

:host(.import-classlink-configuration-list-item--expanded) .import-classlink-configuration-content {
  height: 280px;
  padding: 0 10px 10px 10px;
  flex: 1 0 auto;
}

:host(.import-classlink-configuration-list-item--expanded) .import-classlink-configuration-header {
  color: #26C7A3;
}

.import-classlink-startJob-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.import-classlink-startJob-disabled:hover {
  border: 1px solid #D3D3DC;
  background-color: transparent;
  color: #7C8CAD;
}
.import-classlink-startJob-control {
  display: flex;
  align-items: center;
}

.import-classlink-startJob-control [class*='icon-'] {
  line-height: 0.9;
}

:host {
  min-width: 500px;
}

@media (min-width: 700px) {
  :host {
    min-width: 600px;
  }
}

:host .textInput--invalid {
  border-color: #D0021B;
}


:host {
  min-width: 500px;
}

@media (min-width: 700px) {
  :host {
    min-width: 600px;
  }
}

:host {
  padding: 1px 0;
  box-shadow: none !important;
}

:host >>> .listItem-error {
  cursor: pointer;
  color: #ff0000;
}

:host >>> .listItem-error:hover {
  color: #ff0000;
  text-decoration: underline;
}

.import-clever-configuration-wrapper {
  padding: 0;
  background-color: transparent !important;
}

.import-clever-configuration-container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.import-clever-configuration-container:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

.import-clever-configuration-header {
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
}

.import-clever-header-cell {
  flex: 1;
  display: flex;
  font-size: 16px;
  line-height: 27px;
  font-weight: 600;
  text-align: center;
  justify-content: center;
}

.import-clever-configuration-header > *:not(:first-child) {
  padding-left: 10px;
}

.import-clever-header-district-name {
  justify-content: flex-start;
  max-width: 240px;
}

.import-clever-item-menu {
  display: flex;
  justify-content: flex-end;
}

.import-clever-item-menu icon-button {
  margin-left: 10px;
}

.import-clever-configuration-expand-button.import-clever-configuration-expand-button--expanded {
  border-color: #26C7A3;
}

.import-clever-configuration-content {
  padding: 0;
  height: 0;
  background: #FFFFFF;
  transition: max-height 0.5s ease-in-out;
}

.import-clever-configuration-job {
  display: flex;
  align-items: center;
  height: 50px;
  background-color: #F1F1F2;
  color: #0D1C2E;
  border-radius: 3px;
  transition: all 0.2s ease-in-out;
  margin: 2px 0;
  justify-content: space-between;
  padding: 0 10px;
  border: 1px solid transparent;
  cursor: pointer;
}

.import-clever-configuration-job > * {
  flex: 1;
}

.import-clever-configuration-job:hover {
  border-color: #26C7A3;
  color: #26C7A3;
}

.import-clever-configuration-job-status {
  font-size: 16px;
  font-weight: bold;
  line-height: 15px;
  letter-spacing: 0.03em;
  border-bottom: 0 solid #26C7A3;
}

.import-clever-configuration-job-button {
  display: flex;
  justify-content: flex-end;
}

/* EXPANDED STATE */
:host(.import-clever-configuration-list-item--expanded) .import-clever-configuration-wrapper {
  padding: 15px 0;
}

:host(.import-clever-configuration-list-item--expanded) .import-clever-configuration-container {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

:host(.import-clever-configuration-list-item--expanded) .import-clever-configuration-content {
  height: 280px;
  padding: 0 10px 10px 10px;
  flex: 1 0 auto;
}

:host(.import-clever-configuration-list-item--expanded) .import-clever-configuration-header {
  color: #26C7A3;
}

.import-clever-startJob-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.import-clever-startJob-disabled:hover {
  border: 1px solid #D3D3DC;
  background-color: transparent;
  color: #7C8CAD;
}
.import-clever-startJob-control {
  display: flex;
  align-items: center;
}

.import-clever-startJob-control [class*='icon-'] {
  line-height: 0.9;
}

:host {
  min-width: 500px;
}

@media (min-width: 700px) {
  :host {
    min-width: 600px;
  }
}

:host .textInput--invalid {
  border-color: #D0021B;
}

:host {
  width: 175px;
  z-index: 3;
}

:host >>> dropdown {
  width: 100%;
}

:host >>> .listItem-error {
  cursor: pointer;
  color: #ff0000;
}

:host >>> .listItem-error:hover {
  color: #ff0000;
  text-decoration: underline;
}

:host >>> .listItem-bolded {
  font-weight: 600;
  opacity: 0.9;
}


:host {
  width: 175px;
  z-index: 4;
}

:host >>> dropdown {
  width: 100%;
}
.edlink-providers-select{
  min-width: 120px;
  z-index: 4;
}

:host {
  padding: 1px 0;
  box-shadow: none !important;
}

:host >>> .listItem-error {
  cursor: pointer;
  color: #ff0000;
}

:host >>> .listItem-error:hover {
  color: #ff0000;
  text-decoration: underline;
}

.import-edlink-configuration-wrapper {
  padding: 0;
  background-color: transparent !important;
}

.import-edlink-configuration-container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.import-edlink-configuration-container:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

.import-edlink-configuration-header {
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
}

.import-edlink-header-cell {
  flex: 1;
  display: flex;
  font-size: 16px;
  line-height: 27px;
  font-weight: 600;
  text-align: left;
  justify-content: left;
}

.import-edlink-configuration-header > *:not(:first-child) {
  padding-left: 10px;
}

.import-edlink-header-path {
  justify-content: flex-start;
  max-width: 240px;
}

.config-path {
  text-overflow: ellipsis;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  width: 240px;
}

.import-edlink-item-menu {
  display: flex;
  justify-content: flex-end;
}

.import-edlink-item-menu icon-button {
  margin-left: 10px;
}

.import-edlink-configuration-expand-button.import-edlink-configuration-expand-button--expanded {
  border-color: #26C7A3;
}

.import-edlink-configuration-content {
  padding: 0;
  height: 0;
  background: #FFFFFF;
  transition: max-height 0.5s ease-in-out;
}

.import-edlink-configuration-job {
  display: flex;
  align-items: center;
  height: 50px;
  background-color: #F1F1F2;
  color: #0D1C2E;
  border-radius: 3px;
  transition: all 0.2s ease-in-out;
  margin: 2px 0;
  justify-content: space-between;
  padding: 0 10px;
  border: 1px solid transparent;
  cursor: pointer;
}

.import-edlink-configuration-job > * {
  flex: 1;
}

.import-edlink-configuration-job:hover {
  border-color: #26C7A3;
  color: #26C7A3;
}

.import-edlink-configuration-job-status {
  font-size: 16px;
  font-weight: bold;
  line-height: 15px;
  letter-spacing: 0.03em;
  border-bottom: 0 solid #26C7A3;
}

.import-edlink-configuration-job-button {
  display: flex;
  justify-content: flex-end;
}

.edlink-download-log-button {
  font-size: 12px;
}


/* EXPANDED STATE */
:host(.import-edlink-configuration-list-item--expanded) .import-edlink-configuration-wrapper {
  padding: 15px 0;
}

:host(.import-edlink-configuration-list-item--expanded) .import-edlink-configuration-container {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

:host(.import-edlink-configuration-list-item--expanded) .import-edlink-configuration-content {
  height: 280px;
  padding: 0 10px 10px 10px;
  flex: 1 0 auto;
}

:host(.import-edlink-configuration-list-item--expanded) .import-edlink-configuration-header {
  color: #26C7A3;
}

.import-edlink-startJob-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.import-edlink-startJob-disabled:hover {
  border: 1px solid #D3D3DC;
  background-color: transparent;
  color: #7C8CAD;
}
.import-edlink-startJob-control {
  display: flex;
  align-items: center;
}

.import-edlink-startJob-control [class*='icon-'] {
  line-height: 0.9;
}

:host {
  padding: 1px 0;
  box-shadow: none !important;
}

:host >>> .listItem-error {
  cursor: pointer;
  color: #ff0000;
}

:host >>> .listItem-error:hover {
  color: #ff0000;
  text-decoration: underline;
}

.importOneRosterConfiguration-wrapper {
  padding: 0;
  background-color: transparent !important;
}

.importOneRosterConfiguration-container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.importOneRosterConfiguration-container:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

.importOneRosterConfiguration-header {
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
}

.importOneRoster-header-cell {
  flex: 1;
  display: flex;
  font-size: 16px;
  line-height: 27px;
  font-weight: 600;
  text-align: center;
  justify-content: center;
}

.importOneRosterConfiguration-header > *:not(:first-child) {
  padding-left: 10px;
}

.importOneRoster-header-path {
  justify-content: flex-start;
  max-width: 240px;
}

.config-path {
  text-overflow: ellipsis;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  width: 240px;
}

.importOneRoster-item-menu {
  display: flex;
  justify-content: flex-end;
}

.importOneRoster-item-menu icon-button {
  margin-left: 10px;
}

.importOneRosterConfiguration-expand-button.importOneRosterConfiguration-expand-button--expanded {
  border-color: #26C7A3;
}

.importOneRosterConfiguration-content {
  padding: 0;
  height: 0;
  background: #FFFFFF;
  transition: max-height 0.5s ease-in-out;
}

.importOneRosterConfiguration-job {
  display: flex;
  align-items: center;
  height: 50px;
  background-color: #F1F1F2;
  color: #0D1C2E;
  border-radius: 3px;
  transition: all 0.2s ease-in-out;
  margin: 2px 0;
  justify-content: space-between;
  padding: 0 10px;
  border: 1px solid transparent;
  cursor: pointer;
}

.importOneRosterConfiguration-job > * {
  flex: 1;
}

.importOneRosterConfiguration-job:hover {
  border-color: #26C7A3;
  color: #26C7A3;
}

.importOneRosterConfiguration-job-status {
  font-size: 16px;
  font-weight: bold;
  line-height: 15px;
  letter-spacing: 0.03em;
  border-bottom: 0 solid #26C7A3;
}

.importOneRosterConfiguration-job-button {
  display: flex;
  justify-content: flex-end;
}

/* EXPANDED STATE */
:host(.importOneRosterConfiguration-list-item--expanded) .importOneRosterConfiguration-wrapper {
  padding: 15px 0;
}

:host(.importOneRosterConfiguration-list-item--expanded) .importOneRosterConfiguration-container {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

:host(.importOneRosterConfiguration-list-item--expanded) .importOneRosterConfiguration-content {
  height: 280px;
  padding: 0 10px 10px 10px;
  flex: 1 0 auto;
}

:host(.importOneRosterConfiguration-list-item--expanded) .importOneRosterConfiguration-header {
  color: #26C7A3;
}

.import-oneRoster-startJob-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.import-oneRoster-startJob-disabled:hover {
  border: 1px solid #D3D3DC;
  background-color: transparent;
  color: #7C8CAD;
}
.import-oneRoster-startJob-control {
  display: flex;
  align-items: center;
}

.import-oneRoster-startJob-control [class*='icon-'] {
  line-height: 0.9;
}

:host {
  min-width: 500px;
}

@media (min-width: 700px) {
  :host {
    min-width: 600px;
  }
}

:host .textInput--invalid {
  border-color: #D0021B;
}


:host {
  min-width: 500px;
}

@media (min-width: 700px) {
  :host {
    min-width: 600px;
  }
}

:host .popupBody {
  width: 600px;
}

:host dropdown {
  z-index: 4;
  right: 0;
  width: 100%;
}

.license-status-dropdown-item {
  color: white;
  transition: all 0.2s ease-in-out;
  padding-left: 10px;
  height: 30px;
  cursor: pointer;
  line-height: 30px;
}

.license-status-dropdown-item:hover {
  background-color: #003C98;
}

.manageSchoolListItem-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.manageSchoolListItem-manageButton {
  min-width: 150px;
}

.manageSchoolListItem-buttons {
  display: flex;
  justify-content: flex-end;
}

.manageSchoolListItem-buttons > *:not(:last-child){
  margin-right: 10px;
}

.manage-school-list-item-deleteButton {
  width: 35px;
  height: 35px;
  font-size: 20px;
  line-height: 35px;
}

:host {
  padding: 1px 0;
  box-shadow: none !important;
}

.manageOrganisationsDistrictListItem-wrapper {
  padding: 0;
  background-color: transparent !important;
}

.manageOrganisationsDistrictListItem-container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.manageOrganisationsDistrictListItem-container:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

.manageOrganisationsDistrictListItem-header {
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  cursor: pointer;
}

.manageOrganisationsDistrictListItem-header-left {
  display: flex;
  height: 27px;
  flex: 2;
  padding-left: 10px;
  font-size: 16px;
  font-weight: bold;
  line-height: 27px;
}

.manageOrganisationsDistrictListItem-header-demo-label {
  margin-left: 15px;
}

.manageOrganisationsDistrictListItem-header-center {
  display: flex;
  height: 23px;
  flex: 1;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 23px;
  text-align: right;
}

.manageOrganisationsDistrictListItem-header-right {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.manageOrganisationsDistrictListItem-expand-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2px;
  margin-left: 3em;
}

.manageOrganisationsDistrictListItem-expand-button.manageOrganisationsDistrictListItem-expand-button--expanded {
  border-color: #26C7A3;
}

.manageOrganisationsDistrictListItem-content {
  padding: 0;
  height: 0;
  background: #FFFFFF;
  transition: max-height 0.5s ease-in-out;
}

.manageOrganisationsDistrictListItem-school {
  display: flex;
  align-items: center;
  height: 50px;
  background-color: #F1F1F2;
  color: #0D1C2E;
  border-radius: 3px;
  transition: all 0.2s ease-in-out;
  margin: 2px 0;
  justify-content: space-between;
  padding: 0 10px;
  border: 1px solid transparent;
  cursor: pointer;
}

.manageOrganisationsDistrictListItem-school:hover {
  border-color: #26C7A3;
  color: #26C7A3;
}

.manageOrganisationsDistrictListItem-schoolName {
  font-size: 16px;
  font-weight: bold;
  line-height: 15px;
  letter-spacing: 0.03em;
  border-bottom: 0px solid #26C7A3;
}

/* EXPANDED STATE */
:host(.manage-organisations-district-list-item--expanded) .manageOrganisationsDistrictListItem-wrapper {
  padding: 15px 0;
}

:host(.manage-organisations-district-list-item--expanded) .manageOrganisationsDistrictListItem-container {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

:host(.manage-organisations-district-list-item--expanded) .manageOrganisationsDistrictListItem-content {
  height: 280px;
  padding: 0 10px 10px 10px;
  flex: 1 0 auto;
}

:host(.manage-organisations-district-list-item--expanded) .manageOrganisationsDistrictListItem-header {
  color: #26C7A3;
}

:host {
  height: 50px;
  cursor: pointer;
}

:host >>> .popupBody {
  min-width: 716px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

:host >>> .createDistrict-form {
  width: 543px;
}

:host >>> .createDistrict-field-description {
  height: 201px;
  resize: none;
}

:host >>> .createDistrict-adminsSelect-noSelectedAdminsInfo {
  font-size: 12px;
  margin: 2px;
}

:host checkbox {
  margin-right: 20px;
}

.manageGroupListItem-manageButton {
  min-width: 150px;
}

.manageGroupListItem-buttons {
  display: flex;
  justify-content: flex-end;
}

.manageGroupListItem-buttons > *:not(:last-child){
  margin-right: 10px;
}

.manage-group-list-item-deleteButton {
  width: 35px;
  height: 35px;
  font-size: 20px;
  line-height: 35px;
}

.manage-group-list-item-selectionIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #7C8CAD;
  transition: color 0.2s ease-in-out;
}

:host:hover .manage-group-list-item-selectionIcon {
  color: #26C7A3;
  cursor: pointer;
}

:host:hover .manage-group-list-item-selectionIcon--selected {
  color: #26C7A3;
}

.manage-group-list-item-selectionIcon .manage-group-list-item-selectionIcon--selected {
  color: #0070BE;
}

.manageGroupsList-headerButtonContainer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.manageGroupsList {
  display: flex;
  flex-direction: column;
  border-radius: 0 5px 5px 5px;
  background-color: #FFFFFF;
  position: relative;
}

.manageGroupsList-listContainer {
  width: 100%;
}

.manageGroupList-paginatorContainer {
  display: flex;
  justify-content: flex-end;
}

:host >>> .tableList-column-1 {
  width: 40px;
}

.addStudents {
    position: relative;
    z-index: 1;
    width: 700px;
}

.createAssignment-assignBlend {
    z-index: 2;
}

.editSchoolAddress {
  position: relative;
  z-index: 1;
}

.editSchoolAddress-creatingBlend {
  z-index: 2;
}

.editSchoolAddress-popup-body {
  min-width: 716px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

:host .textInput--invalid {
  border-color: #D0021B;
}


:host >>> .popupBody {
  min-width: 716px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

:host >>> .upgradeSchoolToDistrict-form {
  width: 543px;
}

:host >>> .upgradeSchoolToDistrict-field-description {
  height: 201px;
  resize: none;
}

:host {
  width: 550px;
}

.manage-admin-list-item-buttons-cell {
  text-align: end;
}

.manage-admin-list-item-deleteButton {
  width: 35px;
  height: 35px;
  font-size: 20px;
  line-height: 35px;
}

:host {
  height: 55px;
}

:host >>> .manageLicensesListItem-ltiCartridgeButton {
  display: none;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: normal;
  padding: 0 5px;
  margin: 0 2px;
}

.manage-license-status-active {
  color: #26C7A3
}

.manage-license-status-expired {
  color: #F5A623
}

.manage-license-status-terminated {
  color: #D0021B
}

:host {
  height: 55px;
}

.manage-student-list-item--clickable {
  cursor: pointer;
}

.manage-student-list-item-actions-cell {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100% !important;
}

.manage-student-list-item-selectionIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #7C8CAD;
  transition: color 0.2s ease-in-out;
}

:host:hover .manage-student-list-item-selectionIcon {
  color: #26C7A3;
}

:host:hover .manage-student-list-item-selectionIcon--selected {
  color: #26C7A3;
}

.manage-student-list-item-selectionIcon.manage-student-list-item-selectionIcon--selected {
  color: #0070BE;
}

.manage-student-list-item-deleteButton {
  width: 35px;
  height: 35px;
  font-size: 20px;
  line-height: 35px;
}

:host {
  height: 55px;
}

.manage-teacher-list-item--clickable {
  cursor: pointer;
}

.manage-teacher-list-item-actions-cell {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100% !important;
}

.manage-teacher-list-item-selectionIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #7C8CAD;
  transition: color 0.2s ease-in-out;
}

:host:hover .manage-teacher-list-item-selectionIcon {
  color: #26C7A3;
  cursor: pointer;
}

:host:hover .manage-teacher-list-item-selectionIcon--selected {
  color: #26C7A3;
}

.manage-teacher-list-item-selectionIcon.manage-teacher-list-item-selectionIcon--selected {
  color: #0070BE;
}

.manage-teacher-list-item-buttons-cell {
  text-align: end;
}

.manage-teacher-list-item-deleteButton {
  width: 35px;
  height: 35px;
  font-size: 20px;
  line-height: 35px;
}

.platformAdminListItem-fullName,
.platformAdminListItem-roles {
  padding-left: 15px;
}

.platformAdminListItem-roles {
  color: silver;
}

.platformAdminListItem-buttons {
  display: flex;
  justify-content: flex-end;
}

.platformAdminListItem-buttons > *:not(:last-child) {
  margin-right: 10px;
}

.platformAdminListItem-button {
  width: 35px;
  height: 35px;
  font-size: 20px;
  line-height: 35px;
}

.platformAdminListItem-fullName {
  white-space: nowrap;
}

.addPlatformAdminPopup {
  background-color: white;
  position: relative;
  z-index: 1;
}

.addPlatformAdminPopup-stepperContainer {
  margin-top: 15px;
  margin-bottom: 15px;
}

.addPlatformAdminPopup-body {
  padding: 15px 0 0 0;
  width: 700px;
}

.addPlatformAdminForm {
  width: 660px;
  padding: 0 70px;
}

.addPlatformAdminForm-adminSelect {
  padding: 0 5px;
}

.addPlatformAdminPopup-selectionWrapper {
  position: relative;
}

.addPlatformAdminPopup-selection {
  position: relative;
  height: 500px;
  z-index: 1;
}

.demoLinkListItem-demoLink div {
  padding-left: 5px;
}

.demoLinkListItem-demoLink div,
.demoLinkListItem-startDate,
.demoLinkListItem-endDate {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.demoLinkListItem-buttons {
  display: flex;
  justify-content: flex-end;
}

.demoLinkListItem-buttons > *:not(:last-child) {
  margin-right: 10px;
}

.demoLinkListItem-description {
  color: silver;
}

.demoLinkListItem-button {
  height: 35px;
  line-height: 35px;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: normal;
  padding: 0 5px;
  margin: 0 2px;
}

.demoLinkListItem-iconButton {
  width: 35px;
  height: 35px;
  font-size: 20px;
  line-height: 35px;
}

@media (min-width: 1254px) {
  .demoLinkListItem-demoLink div {
    padding-left: 20px;
  }
}

:host .popupBody {
  padding: 15px 60px 0 60px;
}

.createDemoLinkForm .select-pseudo {
  min-width: 300px;
}

.createDemoLinkForm >>> select {
  min-width: 300px;
}

.createDemoLinkForm-link {
  width: 100%;
  margin-top: 20px;
  min-width: 710px;
}

.createDemoLinkForm-link input{
  width: 100%
}

.createDemoLinkForm-dateWrapper {
  position: relative;
}

.createDemoLinkForm-statusSelect {
  padding: 0 10px;
}

.createDemoLinkForm-schoolSelect {
  padding: 0 5px;
}

:host .field-description {
  height: 201px;
  resize: none;
  padding: 6px;
}

:host .popupBody {
  padding: 15px 60px 0 60px;
}

.editDemoLinkForm .select-pseudo {
  min-width: 300px;
}

.editDemoLinkForm >>> select {
  min-width: 300px;
}

.editDemoLinkForm-link {
  width: 100%;
  margin-top: 20px;
  min-width: 710px;
}

.editDemoLinkForm-link input{
  width: 100%
}

.editDemoLinkForm-dateWrapper {
  position: relative;
}

.editDemoLinkForm-statusSelect {
  padding: 0 10px;
}

.editDemoLinkForm-schoolSelect {
  padding: 0 5px;
}

:host .field-description {
  height: 201px;
  resize: none;
  padding: 6px;
}

:host .popupBody {
  width: 500px;
}

:host .section-message {
  margin-bottom: 15px;
}

:host .alert-warning {
  padding: 10px;
  font-size: 14px;
  margin-bottom: 10px;
}

:host .manageProduct-thumbnail {
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  border-radius: 2px;
}

:host .manageProduct-icon {
  height: 24px;
  width: 24px;
  text-align: center;
  line-height: 24px;
  transition: all 0.2s ease-in-out;
}

:host .manageProduct-icon:hover {
  color: #0072AD;
  cursor: pointer;
}

.manageProductTile-wrapper,
.manageProductStrip-wrapper {
  border-radius: 4px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-in-out;
}

:host(.manageProduct--selected) .manageProductTile-wrapper,
:host(.manageProduct--selected) .manageProductStrip-wrapper,
.manageProductTile-wrapper:hover,
.manageProductStrip-wrapper:hover {
  box-shadow: 0 0 0 2px #0072AD, 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

.manageProductTile-iconCover,
.manageProductStrip-iconCover {
  background-color: #EAE9EC;
  color: #69789D;
}

.manageProductTile-title,
.manageProductStrip-title {
  color: #43474C;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

.manageProductTile-info:hover .manageProductTile-title,
.manageProductStrip-title:hover {
  color: #0072AD;
}

.manageProductTile-groupExport,
.manageProductStrip-groupExport {
  display: flex;
  justify-content: center;
  align-items: center;
}

.manageProductTile-exportCheckbox,
.manageProductStrip-exportCheckbox {
  font-size: 21px;
  height: 26px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

:host(.manageProduct--selected) .manageProductTile-exportCheckbox,
:host(.manageProduct--selected) .manageProductStrip-exportCheckbox,
.manageProductTile-exportCheckbox:hover,
.manageProductStrip-exportCheckbox:hover {
  color: #0072AD;
}

/* ================== TILE ================== */

.manageProductTile-wrapper {
  height: 100%;
  width: 301px;
}

.manageProductTile-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.manageProductTile-info {
  height: 134px;
  margin-bottom: 16px;
  display: flex;
  cursor: pointer;
}

.manageProductTile-cover {
  height: 100%;
  width: 103px;
  margin-right: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.manageProductTile-iconCover {
  font-size: 50px;
}

.manageProductTile-title {
  height: 100%;
  width: 146px;
}

.manageProductTile-actions {
  height: 24px;
  color: #767690;
  display: flex;
  justify-content: space-between;
  font-size: 19px;
}

.manageProductTile-groupActions {
  width: 57px;
  display: flex;
  justify-content: space-between;
  transition: all 0.2s ease-in-out;
}

/* ================== STRIP ================== */

.manageProductStrip-wrapper {
  height: 100px;
  width: 100%;
}

.manageProductStrip-content {
  height: 100%;
  padding: 15px;
  display: flex;
}

.manageProductStrip-cover {
  height: 70px;
  width: 54px;
  margin-right: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.manageProductStrip-iconCover {
  font-size: 30px;
}

.manageProductStrip-title-actions-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  flex: 1;
}

.manageProductStrip-title {
  cursor: pointer;
  max-height: 40px;
}

.manageProductStrip-groupActions {
  width: 65px;
  color: #767690;
  display: flex;
  justify-content: space-between;
  font-size: 19px;
}

:host {
  min-width: 600px;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  max-width: 100vw;
  padding: 10px 20px;
  background-color: #EAE9EC;
}

:host .popupBody {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.manageProductResources-header view-header-button {
  margin-right: 10px;
}

.manageProductResources-header view-header-button .viewHeaderButton-icon {
  font-size: 20px;
  margin-right: 4px;
}

.manageProductResources-header {
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  width: 100%;
}

.manageProductResources-header--left,
.manageProductResources-header--center,
.manageProductResources-header--right {
  display: flex;
  flex: 1 1;
  align-items: center;
  width: 100%;
}

.manageProductResources-header--left {
  justify-content: flex-start;
}

.manageProductResources-header--center {
  justify-content: center;
}

.manageProductResources-header--right {
  justify-content: flex-end;
}

.manageProductResources-header-text {
  white-space: nowrap;
  color: #0C1522;
  font-weight: 300;
  font-size: 36px;
  margin: -7px 20px -7px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}

.manageProductResources-search {
  display: block;
  width: 100%;
  max-width: 250px;
  background: white;
  border-radius: 3px;
}

.manageProductResources-resourcesWrapper {
  display: flex;
  margin-top: 20px;
  height: 100%;
}

.manageProductResources-resourcesContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.manageProductResources-resourceTree {
  overflow-y: scroll;
  overflow-x: hidden;
  margin-right: 20px;
  width: 254px;
  min-width: 0;
  flex: 0 0 auto;
}

.manageProductResources-resourceList {
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  height: auto;
}

.manageProductResources-resource {
  margin-bottom: 10px;
}

.manageProductResources-resourceList--tileLayout .manageProductResources-resource {
  margin-right: 10px;
  margin-bottom: 40px;
}

.manageProductResources-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
}

:host {
  display: flex;
  height: 100%;
}

.productDetailsHeader-thumbnail {
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  border-radius: 2px;
}

.productDetailsHeader-cover {
  height: 100%;
  flex: 0 0 142px;
  margin-right: 19px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.productDetailsHeader-iconCover {
  width: 142px;
  font-size: 80px;
  background-color: #EAE9EC;
  color: #69789D;
}

.productDetailsHeader-rightContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  margin-right: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.productDetailsHeader-name,
.productDetailsHeader-nameTextInput {
  transition: all 0.2s ease-in-out;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  height: 32px;
  border-radius: 4px;
  padding: 0 7px;
  width: 100%;
}

.productDetailsHeader-name {
  display: flex;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  margin-bottom: 20px;
}

.productDetailsHeader-name.productDetailsHeader-name--disabled {
  pointer-events: none;
}

.productDetailsHeader-name:not(.productDetailsHeader-name--disabled):hover {
  color: #7a7a9b;
  background-color: #D3D3DC;
  border-color: transparent;
}

.productDetailsHeader-nameTextInput {
  border-width: 1px;
}

.productDetailsHeader-name .productDetailsHeader-text {
  width: 100%;
  margin-right: 5px;
  display: inline-block;
  flex: 1 1 100%;
}

.productDetailsHeader-name .productDetailsHeader-icon {
  transition: opacity 0.2s ease-in-out;
  visibility: hidden;
  opacity: 0;
  flex-grow: 0;
  flex-shrink: 0;
}

.productDetailsHeader-name:not(.productDetailsHeader-name--disabled):hover .productDetailsHeader-icon {
  visibility: visible;
  opacity: 1;
}

.productDetailsHeader-submitButtons {
  align-self: flex-end;
  margin-right: 10px;
  transition: opacity 0.1s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.productDetailsHeader-submitButtons--visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.1s ease-in-out;
}

.productDetailsHeader-submitButtons button {
  margin-right: 10px;
}

.productDetailsHeader-actions {
  display: flex;
  height: 30px;
  min-width: 66px;
}

.productDetailsHeader-sub-actions {
  display: flex;
  justify-content: space-between;
}

.productDetailsHeader-sub-actions view-header-button {
  margin-right: 15px;
  width: 30px;
}

.productDetailsHeader-updateAction {
  width: 205px;
}

.productDetailsHeader-action--disabled {
  pointer-events: none;
  opacity: 0.5;
}

.productDetailsHeader-cover input {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  font-size: 16px;
}

@media (min-width: 1500px) {
  .productDetailsHeader-submitButtons {
    margin-right: 0;
  }
}

:host >>> .listItem-error {
  color: #ff0000;
}

:host >>> .listItem-error:hover {
  color: #ff0000;
  text-decoration: underline;
}

:host >>> .listItem-success {
  color: #0070BE;
}

:host >>> .listItem-success:hover {
  color: #0070BE;
  text-decoration: underline;
}

:host >>> .listItem-bolded {
  font-weight: 600;
  opacity: 0.9;
}

:host >>> .listItem-in-progress {
  pointer-events: none;
}

.download-log-button {
  font-size: 12px;
}

.exportUserJobListItem-buttons {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.exportUserJobListItem-buttons button {
  width: 123px;
}

.exportUserJobListItem-buttons button:first-child {
  margin-bottom: 5px;
}

@media (min-width: 1295px) {
  :host >>> .exportUserJobListItem-buttons {
    flex-direction: row;
  }

  .exportUserJobListItem-buttons button:first-child {
    margin-right: 10px;
    margin-bottom: 0;
  }
}


:host {
  height: 55px;
}

:host {
  height: 55px;
}

.user-license-list-status-active {
  color: #26C7A3
}

.user-license-list-status-expired {
  color: #F5A623
}

.user-license-list-status-terminated {
  color: #D0021B
}

.user-license-list-status-ownerType {
  white-space: nowrap;
}


:host {
  height: 55px;
}

.user-school-list-item-noDistrict {
  color: silver;
}

.manage-user-school-list-item-deleteButton {
  width: 35px;
  height: 35px;
  font-size: 20px;
  line-height: 35px;
}

.manage-user-school-list-item__deleteButtonCell {
  display: flex;
  justify-content: center;
}


:host {
  height: 50px;
  color: #8a8a8a;
}

/* User first name and last name cells */
.userAccountListItem-nameCell {
  padding: 0 20px;
  font-weight: 600;
}

.userAccountListItem-name {
  color: #69789D;
  font-size: 15px;
  line-height: 20px;
}

.userAccountListItem-nameCell:hover {
  cursor: pointer;
}

/* User login cell */
.userAccountListItem-loginCell {
  padding: 0 20px;
}

.userAccountListItem-login {
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
  color: #69789D;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* User icon set cell */
.userAccountListItem-iconSetCell {
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  font-size: 20px;
  height: 50px;
}

.userAccountListItem-iconSetCell div {
  color: #7C8CAD;
  cursor: pointer;
  padding-left: 10px;
}

.userAccountListItem-iconSetCell div:hover {
  color: #26C7A3;
}

@media (min-width: 1000px) {
  .userAccountListItem-iconSetCell div {
    padding-left: 20px;
  }
}

:host:hover .userAccountListItem-icon {
  color: #26C7A3;
}

:host:hover .userAccountListItem-icon--selected {
  color: #26C7A3;
}

.userAccountListItem-icon--selected {
  color: #0070BE;
}

.userAccountListItem-selectButtonCell {
  cursor: pointer;
  margin-right: 25px;
  padding-top: 5px;
}

.nameCellContainer {
  display: flex;
  height: 100%;
  align-items: center;
}

:host >>> .listItem-error {
  color: #ff0000;
}

:host >>> .listItem-error:hover {
  color: #ff0000;
  text-decoration: underline;
}

:host >>> .listItem-success {
  color: #0070BE;
}

:host >>> .listItem-success:hover {
  color: #0070BE;
  text-decoration: underline;
}

:host >>> .listItem-bolded {
  font-weight: 600;
  opacity: 0.9;
}

:host >>> .listItem-in-progress {
  pointer-events: none;
}

.download-log-button {
  font-size: 12px;
}

.exportUserJobListItem-buttons {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.exportUserJobListItem-buttons button {
  width: 123px;
}

.exportUserJobListItem-buttons button:first-child {
  margin-bottom: 5px;
}

@media (min-width: 1295px) {
  :host >>> .exportUserJobListItem-buttons {
    flex-direction: row;
  }

  .exportUserJobListItem-buttons button:first-child {
    margin-right: 10px;
    margin-bottom: 0;
  }
}


.privilegesListItem-name {
  padding-left: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 35px;
  line-height: 35px;
}

.manageRolesListItem-name div {
  padding-left: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.manageRolesListItem-buttons {
  display: flex;
  justify-content: flex-end;
}

.manageRolesListItem-buttons > *:not(:last-child) {
  margin-right: 10px;
}

.manageRolesListItem-button {
  height: 35px;
  line-height: 35px;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-weight: normal;
  padding: 0 5px;
  margin: 0 2px;
}

.manageRolesListItem-iconButton {
  width: 35px;
  height: 35px;
  font-size: 20px;
  line-height: 35px;
}

:host {
    display: flex;
    align-items: center;
}

.assignmentResultsListFilter-group {
    display: flex;
    align-items: center;
}

.assignmentResultsListFilter-group:not(:last-child) {
    margin-right: 18px;
}

.assignmentResultsListFilter-label {
    font-size: 14px;
    font-weight: 500;
    margin-right: 12px;
    text-transform: uppercase;
}

.assignmentResultsListFilter-filter {
    cursor: pointer;
    position: relative;
    height: 25px;
    padding: 0 8px;
    font-size: 12px;
    background-color: #D3D3DC;
    border-radius: 3px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: #69789D;
    min-width: 60px;
    transition: all 0.15s ease-in-out;
    justify-content: space-between;
    transition-property: opacity, box-shadow, background-color, color, border-bottom-left-radius, border-bottom-right-radius;
}

.assignmentResultsListFilter-filter--selected {
    background-color: white;
    color: black;
    font-weight: 600;
}

.assignmentResultsListFilter-filter--dropdownVisible:not(.assignmentResultsListFilter-filter--disabled) {
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
    background-color: #23B597;
    color: white;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.assignmentResultsListFilter-filter--disabled {
    opacity: 0.4;
}

.assignmentResultsListFilter-filter--disabled,
.assignmentResultsListFilter-filter--disabled * {
    cursor: not-allowed;
}

.assignmentResultsListFilter-filter--disabled dropdown {
    display: none;
}

.assignmentResultsListFilter-option {
    padding: 4px 8px;
    transition: background-color 0.15s ease-in-out;
    white-space: nowrap;
}

.assignmentResultsListFilter-option:hover {
    background-color: #0377BC;
}

.assignmentResultsListFilter-dash {
    color: #7C8CAD;
    font-size: 10px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    align-self: stretch;
    transition: all 0.15s ease-in-out;
    transition-property: transform, color;
    font-weight: 500;
    cursor: pointer;
}

.assignmentResultsListFilter-filter--dropdownVisible:not(.assignmentResultsListFilter-filter--disabled) .assignmentResultsListFilter-dash {
    transform: rotate(180deg);
    color: white;
}

:host dropdown {
    left: 0;
    min-width: 100%;
    font-weight: 500;
    color: white;
}
.assignmentResultList-nameCell {
  display: flex;
  align-items: center;
  height: 100%;
}

.assignmentResultList-gradeCell,
.assignmentResultList-resourceCell-score,
.assignmentResultList-additionalTextCell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  overflow: hidden;
}

.assignmentResultList-editableText {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 30px;
  line-height: 30px;
}

.assignmentResultList-iconEdit {
  display: inline-block;
  height: 28px;
  width: 28px;
  line-height: 30px;
  font-size: 14px;
  margin-left: auto;
}

.assignmentResultList-iconEdit__hidden {
  opacity: 0;
  transition: all 0.2s ease-in-out;
  transition-property: color, background-color, opacity;
  pointer-events: none;
  cursor: none;
}

td:hover >>> .assignmentResultList-iconEdit {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}

.assignmentResultList--inactiveText,
.assignmentResultList-scoreCell {
  color: #8B9ED1;
  cursor: pointer;
}

.assignmentResultList-questionCell,
.assignmentResultList-resourceCell {
  position: relative;
}

.assignmentResultList-openQuestionCell assignment-score {
  padding: 0 5px;
  background-color: #0070BE;
  color: white;
  font-weight: 600;
  font-size: 11px;
  line-height: 13px;
  height: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: bottom;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

.assignmentResultList-topCap {
  position: absolute;
  top: -4px;
  height: 4px;
  left: 0;
  right: 0;
}

:host >>> td.assignmentResultList-gradeCell {
  position: relative;
}

.assignmentResultList-gradeCell dropdown {
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  box-shadow: none;
}

.gradeCellInput {
  text-align: center;
  background-color: #E2E3E9;
  border: 0;
  color: #69789D;
  border-radius: 3px;
  height: 30px;
  padding-left: 3px;
  width: 80%;
  box-shadow: none !important;
}

:host >>> td:not(.assignmentResultList-nameCell) {
  text-align: center;
  white-space: nowrap;
  padding-left: 0;
  padding-right: 0;
}

.assignmentResultList-attachmentsCell,
.assignmentResultList-commentCell {
  font-size: 22px;
  line-height: 24px;
  vertical-align: middle;
}

.assignmentResultList-attachmentsCell {
  color: #26C7A3;
  position: relative;
}

.assignmentResultList-attachmentsCount {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 14px;
  line-height: 14px;
  vertical-align: bottom;
}

.assignmentResultList-commentCell {
  color: #7C8CAD;
}

.assignmentResultList-gradeButton {
  padding: 0 3px;
  background-color: #0070BE;
  color: white;
  font-weight: 600;
  font-size: 11px;
  line-height: 13px;
  height: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: bottom;
  border-radius: 3px;
}

.assignmentResultList--clickable {
  cursor: pointer;
}

.assignmentStudentSelectionItem-icon {
  color: #7C8CAD;
  transition: color 0.2s ease-in-out;
}

:host:hover .assignmentStudentSelectionItem-icon {
  color: #26C7A3;
}

:host:hover .assignmentStudentSelectionItem-icon--selected {
  color: #26C7A3;
}

.assignmentStudentSelectionItem-icon--selected {
  color: #0070BE;
}

.assignmentResultList-selectButtonCell {
  cursor: pointer;
}

.assignmentResultList-iconDelete {
  width: 30px;
  height: 30px;
  font-size: 18px;
  line-height: 30px;
  border: 1px solid #D3D3DC;
  opacity: 1;
  transition: all 0.8s ease-in-out;
}

.assignment-result__add-feedback-button {
  width: 21px;
  height: 21px;
  font-size: 8px;
  line-height: 21px;

}

:host .popupBody{
  width: 600px;
}

:host .form textarea{
  height: 120px;
}

:host {
  display: flex;
  flex-direction: column;
}

:host tabs {
  margin-left: 30px;
}

:host > div {
  flex: 1 0;
  background-color: white;
}

.massSelection-chooseTab {
  display: flex;
  position: relative;
}

.massSelection-selectTab {
  position: relative;
  flex-direction: column;
  display: flex;
}

.massSelection-selectTab--hidden {
  display: none;
}

.massSelection-menu {
  flex: 5;
  border-right: 2px solid #EAE9EC;
  position: relative;
  padding: 10px 0 10px 10px;
}

:host edlink-group-menu-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.massSelection-chooseList {
  flex: 9;
  display: flex;
  flex-direction: column;
}

.massSelection-chooseTab--hidden {
  display: none;
}

.massSelection-chooseList-wrapper {
  position: relative;
  flex: 1;
  box-shadow: inset 3px 48px 55px -50px rgba(0,0,0,0.07);
}

.massSelection-chooseList-controls {
  height: 45px;
  padding-right: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.massSelection-chooseList-wrapper lazy-loading {
  position: absolute;
  left: 10px;
  right: 5px;
  top: 0;
  bottom: 0;
}

.massSelection-selectedList {
  flex: 1 0;
  position: relative;
  box-shadow: inset 3px 48px 55px -50px rgba(0,0,0,0.07);
}

.massSelection-selectedList-wrapper {
  position: absolute;
  left: 10px;
  right: 5px;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.massSelection-massSelect {
  text-transform: uppercase;
  color: #69789D;
  font-size: 10px;
  font-weight: 600;
  padding: 0 10px;
  transition: color 0.2s ease-in-out;
  cursor: pointer;
}

.massSelection-noStudents {
  display: flex;
  justify-content: center;
  padding: 20px 20px;
  font-size: 16px;
  color: #69789D;
}

.massSelection-massSelect:hover {
  color: #52D3B6;
}

.massSelection-selectedList-controls {
  height: 45px;
  padding-right: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.bbs-lesson-group-title {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.bbs-lesson-group-title-item {
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
}

.bbs-lesson-group-title-rounded:first-child {
    border-radius: 3px 0 0 3px;
}

.bbs-lesson-group-title,
.bbs-lesson-group-title-item {
    transition: all 0.3s ease-in-out;
}

@media ( min-width: 1000px) {
    .bbs-lesson-group-title-item{
        font-size: 18px;
    }
}
.resource-menu-icon {
  color: #69789D;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  transition-property: text-shadow, color;
}

.resource-menu-icon:hover {
  color: #26C7A3;
}

.icon-bookmark--active {
  color: #26C7A3;
}

.icon-bookmark--active.resource-menu-icon:hover {
  text-shadow: 0 0 8px #26eeca;
}

.schools-list-item {
  width: 622px;
  border-radius: 2px;
  background-color: #FFFFFF;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
  padding: 20px;
  margin-bottom: 10px;
}

.schools-list-item:hover {
  box-shadow: 0 2px 0 0 #26C7A3, 0 0 5px 0 rgba(0,0,0,0.1);
}

.schools-list-item--selected {
  border: 2px solid #0070BE;
}

.schools-list-item--selected:hover{
  box-shadow: none;
}

.schools-list-item:hover .schools-list-item-header-schoolName {
  color: #26C7A3;
}

.schools-list-item--selected:hover .schools-list-item-header-schoolName--selected {
  color: #0B5AB0;
}

.schools-list-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: -10px;
}

.schools-list-item-header-schoolName {
  height: 30px;
  color: #0C1522;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
}

.schools-list-item-header-schoolName--selected {
  color: #0B5AB0;
}

.schools-list-item-buttonChoose {
  height: 30px;
  border-radius: 3px;
  background-color: #D3D3DC;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  color: #69789D;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  padding: 7px 20px;
}

.schools-list-item-buttonChoose:hover {
  background-color: #26C7A3;
  color: #FFFFFF;
}

.schools-list-item-header-schoolSelectedLabel {
  height: 16px;
  color: #0B5AB0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.schools-list-item-schoolCode {
  height: 19px;
  color: #69789D;
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
}

.schools-list-item-schoolAddress {
  display: flex;
  height: 23px;
  color: #69789D;
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
  margin-top: 4px;
}

.schools-list-item-schoolContact {
  display: flex;
  height: 23px;
  color: #69789D;
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
}

.schools-list-item-icon {
  margin-right: 11px;
}

.schools-list-item-schoolContact-phone {
  display: flex;
}

.schools-list-item-schoolContact-email {
  display: flex;
  margin-left: 56px;
}

:host {
  height: 50px;
  color: #8a8a8a;
}

.myLicensesListItem-ownerType {
  white-space: nowrap;
  text-align: center;
}

.myLicensesListItem-ownerType-text {
  display: none;
}

@media (min-width: 800px) {
  .myLicensesListItem-ownerType-text {
    display: inline;
  }

  .myLicensesListItem-ownerType {
    text-align: left;
  }
}

:host {
  min-width: 400px;
}

.statusDropdownButton-icon {
  size: 14px;
  color: #7C8CAD;
  transition: all 0.2s ease-in-out;
  text-align: center;
  display: inline-block;
  transform-origin: center center;
}

:host {
  color: #7a7a9b;
  font-weight: 500;
  size: 12px;
  background-color: #ffffff;
  border-radius: 3px;
  padding: 0 7px;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  vertical-align: middle;
  height: 30px;
  line-height: 32px;
  display: flex;
  justify-content: space-between;
  border: 1px solid #D3D3DC;
}

:host(.statusDropdownButton--active):not(.statusDropdownButton--disabled),
:host:not(.statusDropdownButton--disabled):hover{
  cursor: pointer;
  color: white !important;
  background-color: #23B597;
  border-color: #23B597;
}

:host(.statusDropdownButton--active) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

:host:hover >>> .statusDropdownButton-icon {
  color: white;
}

:host(.statusDropdownButton--active) .statusDropdownButton-icon {
  transform: rotate(180deg);
  color: white;
  line-height: 33px;
}


:host {
  margin: 5px;
}
:host .manageProduct-thumbnail {
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  border-radius: 2px;
}

:host .manageProduct-icon {
  height: 24px;
  width: 24px;
  text-align: center;
  line-height: 24px;
  transition: all 0.2s ease-in-out;
}

:host .manageProduct-icon:hover {
  color: #0072AD;
  cursor: pointer;
}

.manageProductTile-wrapper,
.manageProductStrip-wrapper {
  border-radius: 4px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-in-out;
}

:host(.manageProduct--selected) .manageProductTile-wrapper,
:host(.manageProduct--selected) .manageProductStrip-wrapper,
.manageProductTile-wrapper:hover,
.manageProductStrip-wrapper:hover {
  box-shadow: 0 0 0 2px #0072AD, 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

.manageProductTile-iconCover,
.manageProductStrip-iconCover {
  background-color: #EAE9EC;
  color: #69789D;
}

.manageProductTile-title,
.manageProductStrip-title {
  color: #43474C;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

.manageProductTile-info:hover .manageProductTile-title,
.manageProductStrip-title:hover {
  color: #0072AD;
}

.manageProductTile-groupExport,
.manageProductStrip-groupExport {
  display: flex;
  justify-content: center;
  align-items: center;
}

.manageProductTile-exportCheckbox,
.manageProductStrip-exportCheckbox {
  font-size: 21px;
  height: 26px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

:host(.manageProduct--selected) .manageProductTile-exportCheckbox,
:host(.manageProduct--selected) .manageProductStrip-exportCheckbox,
.manageProductTile-exportCheckbox:hover,
.manageProductStrip-exportCheckbox:hover {
  color: #0072AD;
}

/* ================== TILE ================== */

.manageProductTile-wrapper {
  height: 206px;
  width: 301px;
}

.manageProductTile-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.manageProductTile-info {
  height: 134px;
  margin-bottom: 16px;
  display: flex;
  cursor: pointer;
}

.manageProductTile-cover {
  height: 100%;
  width: 103px;
  margin-right: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.manageProductTile-iconCover {
  font-size: 50px;
}

.manageProductTile-title {
  height: 100%;
  width: 146px;
}

.manageProductTile-actions {
  height: 24px;
  color: #767690;
  display: flex;
  justify-content: space-between;
  font-size: 19px;
}

.manageProductTile-groupActions {
  width: 57px;
  display: flex;
  justify-content: space-between;
  transition: all 0.2s ease-in-out;
}

/* ================== STRIP ================== */

.manageProductStrip-wrapper {
  height: 100px;
  width: 100%;
}

.manageProductStrip-content {
  height: 100%;
  padding: 15px;
  display: flex;
}

.manageProductStrip-cover {
  height: 70px;
  width: 54px;
  margin-right: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.manageProductStrip-iconCover {
  font-size: 30px;
}

.manageProductStrip-title-actions-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  flex: 1;
}

.manageProductStrip-title {
  cursor: pointer;
  max-height: 40px;
}

.manageProductStrip-groupActions {
  width: 65px;
  color: #767690;
  display: flex;
  justify-content: space-between;
  font-size: 19px;
}

:host {
  display: inline;
}


:host {
    position: relative;
    padding: 10px 0 10px 10px;
}

:host .massSelectionMenu-header {
    color: #0B5AB0;
    margin: 15px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
}

:host empty-content {
    height: auto;
}

.panel--wrapper-container {
    border: 2px solid #7C8CAD;
    margin: 6px 0;
    transition: all 0.2s ease-in-out;
}

.panel--header {
    background-color: #fff;
    color: #454E5C;
    cursor: pointer;
    padding: 5px 10px;
    width: 100%;
    height: 50px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    transition: 0.4s;
    letter-spacing: 1px;
}
.panel--header:hover {
    color: #26C7A3;
}

.panel--header::after {
    content: '\e806';
    color: #7C8CAD;
    font-weight: bold;
    font-family: "iconvault";
    font-style: normal;
    font-weight: 600;
    font-variant: normal;
    text-transform: none;
    float: right;
    margin-left: 5px;
    transition: transform 0.3s ease-in-out;
}

.panel--body {
    padding: 0 10px;
    background-color: white;
    height: 0;
    overflow-y: auto;
    transition: max-height 0.2s ease-out;
}
.panel--body .massSelection-selectedList-controls {
    padding-right: 0;
}

.panel--body .massSelectionItem--selected:last-child {
    border-bottom: none;
}

.panel--expanded .panel--header {
    color: #26C7A3;
    border-bottom: 2px solid #7C8CAD;
    outline: unset !important;
}

.panel--expanded .panel--header::after {
    color: #26C7A3;
    transform: rotateZ(180deg);
}
.panel--expanded .panel--body {
    height: auto;
    max-height: 200px;
}
.panel--body .massSelection-selectedList-controls {
    border-bottom: 2px solid #EAE9EC;
}

.bbs-lesson-group-title-end-wrapper {
    height: 40px;
    width: 14px;
    position: relative;
    overflow: hidden;
}

.bbs-lesson-group-title-end {
    border-top: 20px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 20px solid transparent;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.3s ease-in-out;
}
.bbs-lesson-group-title-start-wrapper {
    height: 40px;
    width: 10px;
    position: relative;
}

.bbs-lesson-group-title-start {
    border-top: 20px solid transparent;
    border-right: 0 solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 20px solid transparent;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s ease-in-out;
}
.cap-sci-product-header {
  display: flex;
  flex-direction: row;
  height: 100px;
  justify-content: space-between;
}

.cap-sci-product-header__identity{
  display: flex;
}

.cap-sci-product-header__image {
  cursor: pointer;
  width: 170px;
  display: flex;
}

.cap-sci-product-header__image img {
  width: 100%;
  object-fit: fill;
}

.cap-sci-product-header__title {
  display: flex;
  align-items: center;
  font-size: 25px;
}

.ckit-product-header {
  display: flex;
  flex-direction: row;
  height: 100px;
  justify-content: space-between;
}

.ckit-product-header__identity{
  display: flex;
}

.ckit-product-header__image {
  cursor: pointer;
  width: 170px;
  display: flex;
}

.ckit-product-header__image img {
  width: 100%;
  object-fit: fill;
}

.ckit-product-header__title {
  display: flex;
  align-items: center;
  font-size: 25px;
}

.ckit-product-header__categories {
  display: flex;
  align-items: center;
}

.ckit-product-header__categories button:not(:last-child) {
  margin-right: 20px;
}

:host .mainContent {
  margin-bottom: 20px;
}

.flexProduct-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.flexProduct-header-image {
  height: 60px;
  cursor: pointer;
}

.flexProduct-header img {
  height: 100%;
}

.flexProduct-header-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 18px;
  padding-left: 12px;
}

:host {
    display: block;
}
.authorize-background {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding-top: 70px;
    background-size: cover;
}

.gc-landing-header {
    font-size: 16px;
    color: #0D1C2E;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 10px;
    margin-top: 0;
    line-height: 28px;
}

.gc-landing-form {
    padding: 20px;
    width: 400px;
}

.gc-landing-form-wrapper {
    background-color: #FFFFFF;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#skipToContent a {
  padding: 6px 15px;
  position: absolute;
  top: -40px;
  left: 0;
  color: white;
  border-right: 1px solid #1C856E;
  border-bottom: 1px solid #1C856E;
  border-bottom-right-radius: 8px;
  background: #1C856E;
  transition: top 0.3s ease-out;
  z-index: 1036;
}

#skipToContent a:focus {
  position: absolute;
  left: 0;
  top: 0;
  outline-color: transparent;
  transition: top 0.3s ease-in;
}

:host {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
}

:host main-layout {
  background-color: white;
}

:host help-tabs {
  position: relative;
  z-index: 1;
}

:host .bottomContent {
  margin-top: 20px;
}

:host back-button {
  font-family: "Catamaran", Helvetica, Arial, sans-serif;
}

.help-title {
  color: #404E54;
  font-size: 26px;
  font-weight: 900;
  line-height: 32px;
  margin-top: 10px;
}

.help-description {
  margin-top: 10px;
  margin-bottom: 30px;
  color: #767690;
  line-height: 22px;
  font-size: 16px;
  max-width: 460px;
}

.help-templateContainer {
  overflow-x: hidden;
}

.help-button {
  height: 50px;
  min-width: 210px;
  border: 1px solid #D3D3DC;
  border-radius: 25px;
  padding: 0 30px;
  color: #767690;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
  transition-property: background-color, border-color, color;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin: 10px 0;
}

.help-button:hover {
  background-color: #26C7A3;
  border-color: #26C7A3;
  text-decoration: none;
  color: white;
}

.help-doubleContainer {
  display: flex;
  align-items: center;
  padding: 50px 0;
}

.help-doubleContainer-left {
  flex: 3;
  margin: 0 40px;
}

.help-doubleContainer-right {
  flex: 4;
}

.help-doubleContainer-right img {
  width: 100%;
  height: auto;
}

.help-videoBrowserRatio {
  position: relative;
  width: 100%;
  padding-top: 65.714%; /*calculated from browser image behind video (height / width = 460px / 700px)*/
}

.help-videoBrowser {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url('/images/help/browser.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

:host iframe {
  position: relative;
  /* these values position the iframe correctly in the browser image */
  top: 4.34782%;
  left: 0.28571%;
  height: 95.2173%;
  width: 99.4285%;
  border-radius: 5px;
  overflow: hidden;
}

.help-logoContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.help-logo {
  height: 40px;
}

.help-logo:not(:last-child) {
  margin-right: 20px;
}

.help-text {
  color: #767690;
  font-size: 20px;
  line-height: 22px;
  max-width: 500px;
}

.help-bottomMargin {
  margin-bottom: 40px;
}

.help-assignmentsHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 40px;
}

.help-assignmentsHeader-title {
  font-weight: 900;
  color: #4A4A4A;
  font-size: 28px;
  margin: 20px 0;
}

.help-assignments-navigation-buttons-wrapper {
  margin: 20px auto;
  max-width: 1000px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.help-assignment-navigation-button,
.help-assignment-navigation-thumbnail {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 50px;
  background: none;
  font-weight: 900;
  color: #4A4A4A;
  font-size: 15px;
  border: 1px solid #D3D3DC;
  border-radius: 5px;
  width: 230px;
  height: 125px;
  justify-content: center;
}

.help-assignment-navigation-button .icon-assignment,
.help-assignment-navigation-thumbnail .icon-assignment {
  font-size: 50px;
  color: #7C8CAD;
}

.help-assignment-navigation-button .icon-quick-share,
.help-assignment-navigation-thumbnail .icon-quick-share {
  font-size: 50px;
  color: #0278bc;
}

.icon-share-to-google-classroom {
  height: 50px;
  margin: 10px;
}

.help-assignment-navigation-button:hover,
.help-scroll-to-top-button:hover {
  color: #23B597;
  border-color: #23B597;
}

.dark-section {
  background-color: #D3D3DC;
}


.dark-section .help-text, .help-button, .help-assignment-navigation-thumbnail  {
  color: #4A4A4A;
  border-color: #4A4A4A
}

.help-scroll-to-top-button {
  color: #4A4A4A;
  margin: 20px auto;
  border: 1px solid #4A4A4A;
  background-color: #FFFFFF;
  border-radius: 25px;
}

.help-assignment-section {
  display: flex;
  flex-direction: column;
}

:host {
  display: flex;
  flex-direction: column;
  padding-top: 70px;
  height: 100%;
}

:host landing-page-description {
  flex: 1 0 auto;
}

:host view-breadcrumb {
  margin-bottom: 30px;
}

:host {
  display: flex;
  flex-direction: column;
  padding-top: 70px;
  height: 100%;
}

.register-header {
  font-size: 20px;
  color: #0D1C2E;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
  margin-top: 0;
  line-height: 28px;
}

.register-mainContainer {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
}

.register-form {
  background-color: #FFFFFF;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  border-radius: 4px;
  padding: 20px;
  position: relative;
}

.register-buttons {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

:host form-errors {
  margin-left: 10px;
}

:host view-breadcrumb {
  margin-bottom: 28px;
}

:host .bottomContent {
  margin-top: 28px;
}

:host view-breadcrumb >>> .viewBreadcrumb-image {
  height: 44px;
}

:host view-breadcrumb >>> .viewBreadcrumb-divider--large {
  margin: 5px;
}

:host view-breadcrumb >>> .viewBreadcrumb-html-text {
  font-family: "LuloCleanOne", Helvetica, Arial, sans-serif;
}



:host {
  text-align: start;
  font-family: "LuloCleanOne", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #000000;
}

:host table {
  margin-top: 40px;
}

:host th {
  height: 100px;
  width: 16em;
}

:host td {
  vertical-align: top;
  height: 260px;
}

:host td:first-child .table-cell-background {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

:host td:last-child .table-cell-background {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

:host .table-cell-background {
  background-color: #D3D3DC;
  min-width: 110px;
  height: 179px;
}

:host .table-cell-background ssftc-grid-item {
  top: -20px
}

:host .grade-text-container {
  position: relative;
  top: 30px;
  left: 20px;
}

@media (min-width: 1200px) {
  :host td {
    height: 370px;
  }
}

:host view-breadcrumb{
  margin-bottom: 20px;
}

:host view-breadcrumb >>> .viewBreadcrumb-image {
  height: 50px;
}

:host .bottomContent{
  background: url('images/stcms/stcms-tab-background.jpg');
}

:host >>> product-tabs {
  padding: 20px;
}

:host .list-container {
  margin-top: 15px;
}

:host .licenseResourceList-descriptionWrapper {
  margin-top: 15px;
}


:host .mainContent {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.adminProfile-options {
  width: 100%;
  max-width: 850px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.adminProfile-leftOptions, .adminProfile-rightOptions {
  flex: 1;
  margin: 20px;
  display: flex;
  flex-direction: column;
}

.adminProfile-leftOptions {
  margin-bottom: 0;
}

:host my-licenses {
  margin-top: 20px;
}

:host view-header {
  align-self: stretch;
}

@media (min-width: 1300px) {
  .adminProfile-options {
    flex-direction: row;
    align-items: flex-start;
    max-width: none;
  }
  .adminProfile-leftOptions {
    flex: 1;
    margin-bottom: 20px;
  }
  .adminProfile-rightOptions {
    flex: 2;
  }
}

.bbs-product-view-background {
    background-color: #D3D3DC;
}

:host .mainContent {
  margin-bottom: 20px;
}

:host .main-bottom-container {
    display: flex;
    flex-direction: column;
}

.main-bottom-container product-tabs {
    flex: 1 0;
}

:host view-breadcrumb {
    margin-bottom: 20px;
}

.bbs-product-structure {
    display: flex;
    flex: 1 0 auto;
    align-items: stretch;
}

.bbs-product-structure bbs-unit-overview {
    margin-right: 10px;
}

.bbs-product-structure-content {
    flex: 1 1 auto;
    display: flex;
}

.bbs-product-structure-content bbs-lesson-group {
    flex: 1 1 0px;
    margin-right: 10px;
}

.bbs-product-structure-content bbs-lesson-group:last-child {
    margin-right: 0;
}

:host {
  display: block;
  position: relative;
}

.bbs-product-line .rounded-corners {
  border-radius: 5px;
}

.bbs-product-line thead tr {
  background-color: transparent;
}

.bbs-product-line td {
  width: 20em;
  height: 17em;
}

.bbs-product-line .centered-items {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bbs-product-line .header-cell {
  padding-top: 5px;
  padding-bottom: 5px;
  height: 4em;
  text-align: center;
  color: #ffffff;
}

.bbs-product-line .header-cell-background {
  margin: auto;
  width: 15em;
  height: 90%;
}

.bbs-product-line .table-cell-background {
  width: 100%;
  height: 65%;
}

.bbs-product-line tr:nth-child(even) .table-cell-background {
  background-color: transparent;
  border-top: solid;
  border-bottom:solid;
  border-width: 1px;
  border-color: #cfcfcf;
}
.bbs-product-line tr:nth-child(even) td:first-child  .table-cell-background {
  border-left: solid;
  border-width: 1px;
  border-color: #cfcfcf;
}
.bbs-product-line tr:nth-child(even) td:last-child  .table-cell-background {
  border-right: solid;
  border-width: 1px;
  border-color: #cfcfcf;
}

.bbs-product-line tr:nth-child(odd) .table-cell-background {
  background-color: #D3D3DC;
}

.bbs-product-line tbody td:first-child .table-cell-background {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.bbs-product-line tbody td:last-child .table-cell-background {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.bbs-product-line .table-cell {
  text-align: center;
}

:host view-breadcrumb {
  margin: 20px 0;
}

.bbsProductLine-grade {
  padding-top: 1em;
  padding-left: 1.3em;
  font-size: 16px;
  color: #0C1522;
}

@media (min-width: 1200px) {
  .bbsProductLine-grade {
    font-size: 24px;
  }
}

:host {
  border-radius: 5px;
  background-color: #fffeff;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

:host(:not(.bbsProductItem--inactive)) {
  cursor: pointer;
}

.bbsProductItem-categoryColor {
  width: 10px;
  display: inline;
}

.bbsProductItem-content {
  display: flex;
  flex-direction: column;
}

.bbsProductItem-thumbnailContainer{
  width: 200px;
  height: 116px;
  overflow: hidden;
  position: relative;
}

.bbsProductItem-thumbnail{
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.bbsProductItem-titleContainer {
  height: 75px;
  position: relative;
}

.bbsProductItem-titleContainer-background,
.bbsProductItem-titleContainer-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.bbsProductItem-titleContainer-background {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

:host(:not(.bbsProductItem--inactive)):hover .bbsProductItem-titleContainer-background {
  opacity: 1;
}

.bbsProductItem-titleContainer-text {
  color: #0C1522;
  padding: 10px 20px;
  font-size: 14px;
  line-height: 20px;
  transition: color 0.2s ease-in-out;
}

:host(:not(.bbsProductItem--inactive)):hover .bbsProductItem-titleContainer-text {
  color: white;
}

.bbsProductItem-inactiveCover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.7;
}

@media (min-width: 1200px) {
  .bbsProductItem-thumbnailContainer {
    width: 250px;
    height: 145px;
  }
  .bbsProductItem-titleContainer-text {
    font-size: 20px;
  }
}
.bookmarks-sidebar-menu-folders-wrapper {
  max-height: 20em;
  margin-left: 10px;
  transition: all 0.2s ease-in-out;
}

.sidebarSharedFolderList-top {
  display: flex;
  padding-left: 19px;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

.sidebarSharedFolderList-top:hover,
.sidebarSharedFolderList-top:hover .sidebarSharedFolderList-icon {
  color: #27BF92;
}

.sidebarSharedFolderList-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #9B9B9B;
  padding-right: 3px;
  transition: color 0.2s ease-in-out;
}

.sidebarSharedFolderList-icon i {
  transition: transform 0.2s ease-in-out;
  transform: translateY(15%) rotate(-90deg);
  transform-origin: 50% 25%;
  margin-right: 2px;
}

.sidebarSharedFolderList-icon.sidebarSharedFolderList--open i {
  transform: translateY(15%) rotate(0deg);
}

.sidebarSharedFolderList-content {
  display: none;
}

.sidebarSharedFolderList-content.sidebarSharedFolderList--open {
  display: block;
}

:host >>> view-header-button {
  margin-right: 20px;
}

:host >>> view-header {
  margin-bottom: 20px;
}

.bookmarksView-wrapper {
  display: flex;
  align-items: flex-start;
}

.bookmarksView-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.bookmarksView-header-title {
  color: #0C1522;
  font-size: 36px;
  font-weight: 300;
}

.viewHeader-leftSide {
  display: flex;
}

.viewHeader-rightSide > * {
  margin-left: 15px;
}

.viewHeader-rightSide .bookmarksView-deleteButton {
  margin-left: 80px;
}

.bookmarksView-wrapper bookmarks-menu {
  margin-right: 25px;
}

.bookmarksView-list {
  position: relative;
  flex: 1;
  min-height: 300px;
  min-width: 0;
}

.bookmarksHeader-rejectButton,
.bookmarksHeader-acceptButton {
  color: #FFFFFF;
  height: 25px;
  border-radius: 2px;
  width: 99px;
  font-weight: 600;
  display: flex;
  margin-right: 20px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  align-items: center;
}

.bookmarksHeader-rejectButton {
  background-color: #D0021B;
}

.bookmarksHeader-acceptButton {
  background-color: #26C7A3;
}

.bookmarksHeader-rejectButton:hover,
.bookmarksHeader-acceptButton:hover {
  transition: all 0.2s ease-in-out;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
}

:host .bookmarksHeader-rejectButton-icon,
:host .bookmarksHeader-acceptButton-icon {
  font-size: 24px;
  padding: 0 5px;
  line-height: 23px;
}

:host .bookmarksHeader-rejectButton-text,
:host .bookmarksHeader-acceptButton-text {
  font-size: 14px;
  line-height: 27px;
  height: 25px;
}



.cookie-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  direction: ltr;
  min-height: 30px;
  z-index: 99999;
  color: #ffffff;
  background-color: #222b2f;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.cookie-bar button {
  display: inline-block;
  font-family: Raleway, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  float: right;
  text-transform: uppercase;
  transition: all 300ms ease;
  width: auto;
  min-width: inherit;
  letter-spacing: 0;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  margin: 0 20px;
  line-height: 20px;
  background: #555f63;
  border: none;
  color: #dddddd;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
}

.cookie-text-section {
  line-height: 1.35;
  padding: 10px 0 0;
  font-size: 12px;
  text-align: center;
  color: rgba(255,255,255,0.8);
}

.cookie-button-section {
  padding: 10px 0 0;
}

.createLinkForm .select-pseudo {
  min-width: 300px;
}

.createLinkForm >>> select {
  min-width: 300px;
}

.createLink-link {
  width: 100%;
  margin-top: 20px;
  min-width: 710px;
}

.createLink-link input{
  width: 100%
}

.app-pagination {
  padding-left: 280px;
  padding-right: 220px;
}

.app-pagination .container {
  display: table-cell;
  vertical-align: middle;
}

.app-pagination-size {
  float: left;
  display: table;
  vertical-align: middle;
  height: 50px;
  width: 280px;
  margin-left: -280px;
}

.app-pagination-size select {
  margin-right: 10px;
  margin-left: 10px;
}

.app-pagination-pages {
  display: table;
  vertical-align: middle;
  user-select: none;
  width: 100%;
  height: 50px;
}

.app-pagination-pages .container {
  text-align: center;
}

.app-pagination-pages .selected-page {
  font-weight: 500;
  color: #5f5f5f;
}

.app-pagination-page-input {
  float: right;
  display: table;
  vertical-align: middle;
  height: 50px;
  width: 200px;
  margin-right: -220px;
}

.app-pagination-page-input input {
  border: 1px solid #ccc !important;
  width: 60px !important;
  margin-left: 15px;
}

.app-pagination-pages .container a {
  margin-right: 2px;
}

:host {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  color: #454E5C;
  position: relative;
}

:host >>> .header {
  color: #0C1522;
  font-size: 20px;
  font-weight: 500;
  margin: 20px;
}

:host >>> .settings-element {
  display: flex;
  margin: 0 20px 20px 20px;
  color: #454E5C;
}

:host >>> .divider {
  border: 1px solid #EAE9EC;
}

:host >>> .choose-languge-element {
  margin-top: 20px;
  flex-direction: column;
}

:host >>> .language-dropdown-header {
  font-size: 12px;
}

:host >>> .language-dropdown {
  display: flex;
  justify-content: space-between;
  max-width: 150px;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
  background-color: white;
  border: 1px solid #D3D3DC;
  padding: 0 10px;
  align-items: center;
  color: #454E5C;
  font-size: 14px;
  vertical-align: middle;
  line-height: 37px;
  transition: all 0.2s ease-in-out;
}

:host .language-dropdown--expanded {
  background-color: #26C7A3;
  color: white;
}

:host .language-dropdown dropdown {
  left: 0;
  width: 100%;
}

:host >>> .language-dropdown:hover {
  background-color: #26C7A3;
  color: white;
}

:host >>> .language-dropdown .rotated-180{
  transform: rotate(180deg);
}

:host >>> .language-dropdown .icon-dash-down {
  transition: transform 0.2s ease-in-out;
}

:host >>> .dropdown-item {
  padding-left: 10px;
  justify-content: flex-start;
  align-items: center;
  color: white;
  font-size: 14px;
  height: 30px;
  transition: background-color 0.2s ease-in-out;
}

:host >>> .dropdown-item:hover {
  background-color: #003C98;
}

:host >>> .toggle-element {
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
}


:host {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9EAAC2;
  text-align: center;
}

.emptyContent-icon {
  font-size: 115px;
  line-height: 115px;
  padding-top: 10px;
}

.emptyContent-header {
  color: #57616F;
  font-size: 24px;
  font-weight: 800;
  line-height: 40px;
  margin: 20px 25px 10px 25px;
}

.emptyContent-descriptionText {
  color: #7C8CAD;
  max-width: 500px;
  overflow-wrap: break-word;
  font-weight: 500;
  line-height: 20px;
  font-size: 16px;
}

:host(.emptyContent--mini) .emptyContent-icon {
  font-size: 75px;
  line-height: 75px;
}

:host(.emptyContent--mini) .emptyContent-header {
  font-size: 18px;
  line-height: 30px;
  margin: 5px 0;
}

:host(.emptyContent--mini) .emptyContent-descriptionText {
  max-width: 400px;
  line-height: 16px;
  font-size: 14px;
}

:host * {
  display: inline;
}

.interactiveText-keyword {
  cursor: pointer;
  font-weight: bold;
  text-decoration: underline;
  transition: all 0.15s ease-in-out;
}

.interactiveText-keyword:hover {
  border-radius: 3px;
  background-color: #1C856E;
  color: white;
}

.enrichedHtml {
  width: 100%;
  position: relative;
  overflow-y: hidden;
  display: flex;
}

.enrichedHtml-iFrame {
  width: 100%;
}

.enrichedHtml-contentContainer {
  justify-content: center;
  align-items: center;
}

.enrichedHtml-placeholder {
  width: 0;
}

:host {
  display: flex;
  flex: 1 0 auto;
  height: 220px;
  width: 100%;
}

:host flex-unit-overview {
  margin-right: 10px;
}

.flexProductStructure-content {
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 100%;
}

.flexProductStructure-content flex-lesson-item {
  margin-right: 10px;
}

.flexProductStructure-content flex-lesson-item:last-child {
  margin-right: 0;
}

:host .popupBody {
  width: 600px;
}

:host {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #59687E;
}

.loggedFooter-logo {
    margin-right: 10px;
    height: 25px;
}

.loggedFooter-logo img {
    height: 100%;
}

.loggedFooter-links,
.loggedFooter-copyright {
    font-weight: bold;
}

.loggedFooter-textContainer {
    flex: 1;
    display: flex;
    justify-content: space-between;
}

.loggedFooter-information {
    display: flex;
    flex-direction: column;
    padding-right: 10px;
}

.loggedFooter-links {
    display: flex;
    align-items: center;
    white-space: pre-line;
}

.loggedFooter-linksSet {
    flex-direction: column;
    display: flex;
    align-items: center;
    white-space: pre-line;
}

.loggedFooter-linksSet:first-child {
    padding-right: 10px;
}

.loggedFooter-links a {
    color: #59687E;
    box-shadow: none !important;
    white-space: nowrap;
}

.loggedFooter-linkSpacer {
    display: none;
}

.loggedFooter-container {
    width: 100%;
    border-top: 1px solid #D3D3DC;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
}

:host .studentFooter {
    font-size: 12px;
    font-family: 'Dosis', Helvetica, Arial, sans-serif;
}

@media (min-width: 1000px) {
    .loggedFooter-logo {
        margin-right: 16px;
    }
    .loggedFooter-linkSpacer {
        display: block;
    }
    .loggedFooter-linksSet {
        flex-direction: row;
    }
    .loggedFooter-linksSet:first-child {
        padding-right: 0;
    }
}

@media ( min-width: 1500px) {
    .loggedFooter-container {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

:host {
    display: block;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
}

.unloggedFooter-links {
    background-color: #252525;
    padding-top: 45px;
    padding-bottom: 45px;
    display: flex;
    justify-content: flex-start;
}

.unloggedFooter-logo {
    height: 25px;
}

.unloggedFooter-logo img {
    height: 100%;
}

.unloggedFooter-linkGroup {
    flex: 1 1 auto;
}

.unloggedFooter-linkGroup:not(:last-child) {
    margin-right: 50px;
}

.unloggedFooter-linkGroupTitle {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    line-height: 22px;
}

:host a {
    display: block;
    color: #FFFFFF;
    line-height: 22px;
    opacity: 0.7;
    font-size: 12px;
}

.unloggedFooter-carolinaInfo {
    background-color: #161A1B;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.unloggedFooter-carolinaInfo img {
    margin-right: 25px;
    height: 25px;
}

.unloggedFooter-carolinaInfo span {
    font-size: 12px;
    color: #FFFFFF;
    opacity: 0.6;
}

@media (min-width: 1000px) {
    .unloggedFooter-linkGroup:not(:last-child) {
        margin-right: 100px;
    }
}

:host {
    position: relative;
    width: 100%;
    height: 368px;
    min-width: 820px;
    display: block;
}

.genericProductDetails-background {
    position: absolute;
    top: 10px;
    height: 353px;
    background-color: #EAE9EC;
    border-radius: 5px;
    width: 100%;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

.genericProductDetails-content {
    position: absolute;
    height: 343px;
    top: 15px;
    right: 5px;
    left: 5px;
    background-color: #FFFFFF;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    display: flex;
}

.genericProductDetails-cover {
    position: absolute;
    height: 368px;
    width: 276px;
    top: -15px;
    left: 5px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    background-color: white;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}

.genericProductDetails-description {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 24px 25px 4px 58px;
    left: 281px;
    height: 100%;
    right: 0;
}

.genericProductDetails-title {
    display: flex;
    margin: 5px 0 15px 0;
    height: 40px;
    justify-content: space-between;
}

.genericProductDetails-titleText {
    color: #2F415B;
    font-weight: 600;
    line-height: 40px;
    height: 40px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 26px;
    padding-right: 15px;
}

.genericProductDetails-expired-button {
    box-sizing: border-box;
    white-space: nowrap;
    background-color: white;
    height: 40px;
    border-radius: 3px;
    padding: 0 10px;
    border: 1px solid #CECECE;
    display: flex;
    color: #7C8CAD;
    font-weight: 600;
    font-size: 13px;
    vertical-align: middle;
    line-height: 40px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
    opacity: 1;
}

.genericProductDetails-expired-button:hover {
    color: black;
}

.genericProductDetails-expired-textButton {
    text-transform: uppercase;
    padding-right: 10px;
}

.genericProductDetails-expired-button i {
    font-size: 20px;
}

.genericProductDetails-expired {
    opacity: 0.7;
}

.genericProductDetails-table td {
    height: 20px;
    color: #6C7C91;
    line-height: 20px;
    font-size: 16px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 15px;
}

.genericProductDetails-table {
    border-collapse: separate;
    border-spacing: 0 20px;
    height: 260px;
}

:host td:not(.genericProductDetails-descriptionTitle) {
    max-width: 260px;
}

:host td.genericProductDetails-descriptionTitle {
    font-weight: 600;
    max-width: 200px;
}

:host .icon-individual:before,
:host .icon-organization:before {
    padding-right: 7px;
}

:host td.genericProductDetails-expired-statusField {
    color: #D0021B;
    font-weight: 600;
}

@media (max-width: 992px) {
  .genericProductDetails-description {
    padding-left: 25px;
  }

  :host {
    min-width: 800px;
  }
}

.genericProduct-logo {
  max-height: 100px;
  cursor: pointer;
}

:host generic-product-tabs {
  margin-top: 35px;
}

:host generic-product-details {
  margin-bottom: 40px;
}

.genericProductTabs-content {
    transition: border-radius 0.2s ease-in-out;
    background-color: white;
    border-radius: 0 5px 5px 5px;
    position: relative;
    padding: 20px;
    min-height: 300px;
    margin-bottom: 70px;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
}

.genericProductTabs-content--fullRound {
    border-radius: 5px;
}
.genericProduct-tile {
  display: flex;
  position: relative;
  margin-top: 13px;
}

.genericProduct-tileContainer {
  height: 332px;
  width: 204px;
  border-radius: 3px;
  background-color: #FFFFFF;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
  margin-left: 5px;
}

.genericProduct-thumbnail {
  border-radius: 3px 3px 0 0;
  height: 272px;
  width: 204px;
  background-color: white;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
}

.genericProduct-labelContainer {
  width: 204px;
  max-height: 60px;
}

.genericProduct-labelContainer-background {
  background-color: #FFFFFF;
  border-radius: 0 0 3px 3px;
}

.genericProduct-labelContainer-text {
  max-height: 40px;
  width: 180px;
  color: #57616F;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  margin: 12px 12px 8px 12px;
  overflow: hidden;
}

.genericProduct-expired-background {
  height: 332px;
  width: 214px;
  border-radius: 5px;
  background-color: #EAE9EC;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  margin-top: 5px;
  transition: background-color 0.2s ease-in-out;
}

:host:hover >>> .genericProduct-expired-background,
:host:hover >>> .genericProduct-expired-background--expired {
  background-color: #26C7A3;
}

.genericProduct-expired-background--expired {
  background-color: #C31984;
  transition: background-color 0.2s ease-in-out;
}

.genericProduct-expired-buttonContainer {
  height: 26px;
  width: 84px;
  border-radius: 5px;
  background-color: #C31984;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  vertical-align: center;
  cursor: pointer;
  align-items: center;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  left: 0;
  margin-left: 63px;
  margin-top: -13px;
  transition: all 0.2s ease-in-out;
}

.genericProduct-expired-buttonContainer:hover {
  background-color: #26C7A3;
}

.genericProduct-expired-button-icon {
  margin-left: 14px;
  font-size: 14px;
  margin-right: 10px;
  padding-top: 3px;
}

:host {
  display: block;
}

.genericProductsList {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin: 20px 0 20px 50px;
}

.genericProductsList-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 10px;
}

.genericProductsList-header-rightSide,
.genericProductsList-header-leftSide {
  display: flex;
  align-items: center;
}

.genericProductsList-footer {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  margin-right: 10px;
}

.genericProductsList .generic-product {
  margin: 0 0 30px 15px;
}

.genericProductsList-empty {
  color: #9EAAC2;
  font-size: 24px;
  text-align: center;
  width: 100%;
}

.topBar-loggedOut {
  position: absolute;
  width: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  z-index: 1035;
  border-bottom: 1px solid #EAE9EC;
  transition: border-bottom-color 0.05s ease-in-out;
}

@media (max-width: 1300px) {
  .topBar-loggedOut {
    padding: 0 35px;
  }
}

.topBar-loggedOut--sticky {
  border-bottom-color: transparent;
}

.topBar-loggedOut-links {
  display: flex;
  align-items: center;
  height: 100%;
}

.topBar-loggedOut-links > :not(:last-child) {
  margin-right: 15px;
}

.topBar-loggedOut img {
  height: 40px;
}

.topBar-loggedOut-support {
  font-size: 14px;
  color: #73738C;
}

.topBar-loggedOut-support:hover {
  transition: color 0.1s ease-in-out;
  color: black;
}

.topBar-loggedOut-roleArea {
  height: 69px;
  display: flex;
  align-items: center;
  align-self: stretch;
  position: relative;
}

.topBar-loggedOut-roleDropdown {
  position: absolute;
  top: 4px;
  left: -10px;
  right: -10px;
  height: 0px;
  z-index: 1;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
  background-color: #FFFFFF;
  border-radius: 25px;
  display: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
  visibility: hidden;
}

.topBar-loggedOut-navigation {
  display: flex;
  width: 416px;
  justify-content: space-between;
  margin-bottom: 0;
}

.topBar-loggedOut-roleDropdown-bottom {
  height: 0px;
  border-top: 1px solid #D3D3DC;
  padding: 3px 10px 10px 10px;
  align-self: flex-end;
  width: 100%;
  position: relative;
  flex-direction: column;
  display: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

/* this expands the dropdown area, so that it is easier to click the create button */
.topBar-loggedOut-roleDropdown-bottom:before {
  content: '';
  position: absolute;
  top: 0;
  left: -20px;
  right: -20px;
  bottom: -20px;
}

.topBar-loggedOut-roleDropdown-createA {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: italic;
  font-size: 16px;
  color: #73738C;
}

.topBar-loggedOut-roleDropdown-or {
  position: absolute;
  font-size: 16px;
  color: #73738C;
  left: 50%;
  top: 0;
  transform: translate(-50%, -60%);
  background-color: white;
  padding: 0 10px;
}

a.topBar-loggedOut-button:focus,
.topBar-loggedOut-button {
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #73738C;
  font-size: 16px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid #D3D3DC;
  padding: 0 35px 0 15px;
  transition: all 0.1s ease-in-out;
  transition-property: background-color, border-color, color;
  z-index: 2;
}

a.topBar-loggedOut-button.topBar-loggedOut-button--create,
.topBar-loggedOut-button.topBar-loggedOut-button--create {
  background-color: #1C856E;
  border-color: #1C856E;
  color: white;
  padding: 0;
}

a.topBar-loggedOut-button.topBar-loggedOut-button--create:focus:hover,
a.topBar-loggedOut-button.topBar-loggedOut-button--create:hover,
a.topBar-loggedOut-button:focus:hover,
.topBar-loggedOut-button:hover {
  background-color: #2C75C9;
  border-color: #2C75C9;
  color: white;
  text-decoration: none;
}

a.topBar-loggedOut-button.topBar-loggedOut-button--create:focus,
a.topBar-loggedOut-button.topBar-loggedOut-button--create:active {
  outline-color: #73738C !important;
}

.topBar-loggedOut-button-iconContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #2C75C9;
  font-size: 24px;
  margin-right: 12px;
  transition: color 0.1s ease-in-out;
}

.topBar-loggedOut-button:hover .topBar-loggedOut-button-iconContainer {
  color: white;
}

.topBar-loggedOut-roleArea:hover .topBar-loggedOut-roleDropdown,
.topBar-loggedOut-roleArea:hover .topBar-loggedOut-roleDropdown-bottom,
ul li.active > .topBar-loggedOut-roleDropdown,
ul li.active .topBar-loggedOut-roleDropdown-bottom {
  pointer-events: auto;
  opacity: 1;
  display: flex;
  visibility: visible;
}

.topBar-loggedOut-roleArea:hover .topBar-loggedOut-roleDropdown,
ul li.active > .topBar-loggedOut-roleDropdown {
  height: 172px;;
}

.topBar-loggedOut-roleArea:hover .topBar-loggedOut-roleDropdown-bottom,
ul li.active .topBar-loggedOut-roleDropdown-bottom {
  height: 107px;;
}

:host {
    display: flex;
    height: 56px;
}

.helpStepper-step {
    display: flex;
    padding: 0 10px;
    border-top: 1px solid #D3D3DC;
    border-bottom: 1px solid #D3D3DC;
    align-items: center;
    position: relative;
    transition: all 0.1s ease-in-out;
    transition-property: border-color;
    cursor: pointer;
}

.helpStepper-step--first {
    border-left: 1px solid #D3D3DC;
    border-bottom-left-radius: 28px;
    border-top-left-radius: 28px;
}

.helpStepper-step--last {
    border-right: 1px solid #D3D3DC;
    border-bottom-right-radius: 28px;
    border-top-right-radius: 28px;
}

.helpStepper-step:hover {
    border-color: #26C7A3;
}

.helpStepper-step.helpStepper-step--active {
    border-color: #3777BE;
    cursor: initial;
}

.helpStepper-step:not(.helpStepper-step--first) {
    padding: 0 10px 0 30px;
}

.helpStepper-stepNumber {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    width: 24px;
    color: #767690;
    border: 2px solid #D3D3DC;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
    transition: all 0.1s ease-in-out;
    transition-property: border-color, color;
}

.helpStepper-step:hover .helpStepper-stepNumber {
    border-color: #26C7A3;
    color: #26C7A3;
}

.helpStepper-step.helpStepper-step--active .helpStepper-stepNumber {
    border-color: #3777BE;
    color: #3777BE;
}

.helpStepper-stepText {
    font-size: 16px;
    color: #505070;
    font-weight: 600;
    transition: color 0.1s ease-in-out;
}

.helpStepper-step:hover .helpStepper-stepText {
    color: #26C7A3;
}

.helpStepper-step.helpStepper-step--active .helpStepper-stepText {
    color: #3777BE;
}

.helpStepper-divider {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-left: 20px solid #D3D3DC;
    border-right: 0 solid transparent;
    transition-property: border-color;
}

.helpStepper-step:not(.helpStepper-step--active):hover + .helpStepper-step:not(.helpStepper-step--active) .helpStepper-divider,
.helpStepper-step:hover .helpStepper-divider {
    border-left-color: #26C7A3;
}

.helpStepper-step.helpStepper-step--active + .helpStepper-step .helpStepper-divider,
.helpStepper-step.helpStepper-step--active .helpStepper-divider {
    border-left-color: #3777BE;
}

.helpStepper-dividerMask {
    position: absolute;
    left: -1px;
    top: 0;
    height: 100%;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-left: 20px solid white;
    border-right: 0 solid transparent;
}

@media ( min-width: 1200px) {
    .helpStepper-step {
        padding: 0 50px;
    }
    .helpStepper-step:not(.helpStepper-step--first) {
        padding: 0 50px 0 70px;
    }
}
:host {
    display: block;
}

.helpTabs-stickyWrapper {
    transition: box-shadow 0.05s ease-in-out;
    box-shadow: 0 0 30px 0 rgba(0,0,0,0.15);
}

.helpTabs-layout {
    display: flex;
    align-items: flex-end;
    background-color: white;
}

.helpTabs-layout-side {
    border-bottom: 1px solid #D3D3DC;
    transition: border-bottom 0.1s ease-in-out;
}

:host(.helpTabs--sticky) .helpTabs-layout-side {
    border-bottom-color: transparent;
}

.helpTabs-layout-center {
    flex: 1;
    background-color: #F2F2F2;
    border-radius: 5px 5px 0 0;
    height: 56px;
    display: flex;
}

.helpTabs-tab {
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #78797C;
    font-weight: 600;
    font-size: 16px;
    flex: 1 1 auto;
    text-align: center;
    border: 1px solid transparent;
    border-bottom: 1px solid #D3D3DC;
    border-radius: 5px 5px 0 0;
    transition: all 0.1s ease-in-out;
    transition-property: border-color, background-color, color;
}

.helpTabs-tab--active {
    border: 1px solid #D3D3DC;
    border-bottom-color: transparent;
    background-color: white;
}

.helpTabs-tab:not(.helpTabs-tab--active):hover {
    background-color: #23B597;
    color: white;
    cursor: pointer;
}

:host(.helpTabs--sticky) .helpTabs-tab {
    border-bottom-color: transparent;
}

.helpTabs-divider {
    width: 1px;
    height: 100%;
    border-bottom: 1px solid #D3D3DC;
    display: flex;
    justify-content: center;
    align-items: center;
}

:host(.helpTabs--sticky) .helpTabs-divider {
    border-bottom-color: transparent;
}

.helpTabs-divider-line {
    height: 24px;
    width: 100%;
    background-color: #D8D8D8;
    transition: background-color 0.1s ease-in-out;
}

.helpTabs-divider-line--hidden {
    background-color: transparent;
}
:host {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
}

.landingPageCarousel-proportionalContainer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: black;
    display: flex;
}

:host landing-page-carousel-card {
    transition: flex-grow 0.4s ease-in-out;
}

.landingPageCarousel-button {
    height: calc(50em - 300px);
    min-width: calc(210em - 1260px);
    border: calc(1em - 6px) solid white;
    border-radius: calc(25em - 150px);
    padding: 0 calc(30em - 180px);
    color: white;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    transition-property: background-color, border-color;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.landingPageCarousel-button:hover {
    background-color: #1C856E;
    border-color: #1C856E;
    text-decoration: none;
}

.landingPageCarousel-button span {
    font-size: calc(14em - 84px);
}

.landingPageCarousel-button--blue:hover {
    background-color: #2C75C9;
    border-color: #2C75C9;
}

:host {
  display: block;
  background-color: white;
}

.landingPage-description {
  padding-top: 70px;
  padding-bottom: 70px;
}

.landingPage-description-title,
.landingPage-description-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

.landingPage-description-title {
  font-weight: 900;
  font-size: 28px;
  color: #404E54;
  margin-bottom: 40px;
  text-align: center;
}

.landingPage-description-text {
  font-size: 18px;
  color: #73738C;
  margin-bottom: 30px;
  text-align: center;
}

.landingPage-description-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

.landingPage-pointWrapper {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex: 0 0 100%;
  margin-top: 20px;
  cursor: pointer;
  border-radius: 3px;
  transition: box-shadow 0.2s ease-in-out;
}

.landingPage-pointWrapper:hover {
  box-shadow: 0 0 10px lightgrey;
}

.landingPage-point {
  margin-top: 20px;
  margin-bottom: 10px;
  width: 80%;
  min-width: 260px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  border: none;
}

.landingPage-point img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 35px;
}

.landingPage-point-title {
  font-size: 18px;
  font-weight: 600;
  color: #404E54;
  margin: 0 5px 20px 5px;
  text-align: center;
}

.landingPage-point-text {
  text-align: center;
  font-size: 15px;
  color: #73738C;
  margin: 0 5px;
  width: 100%;
}

@media (min-width: 600px) {
  .landingPage-pointWrapper {
    flex: 0 0 50%;
  }
}

@media (min-width: 1100px) {
  .landingPage-pointWrapper {
    flex: 0 0 25%;
  }
}

@media (min-width: 1300px) {
  .landingPage-pointWrapper {
    flex: 0 0 50%;
  }
}

@media (min-width: 1600px) {
  .landingPage-pointWrapper {
    flex: 0 0 25%;
  }
}


:host {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1 0 auto;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding-top: 70px;
  background-size: cover;
}

.login-form {
  padding: 20px;
  width: 400px;
}

.login-form-header {
  font-size: 20px;
  color: #0D1C2E;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
  margin-top: 0;
  line-height: 28px;
}

.login-form-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login-form-wrapper {
  background-color: #FFFFFF;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.divider {
  display: flex;
  flex-direction: column;
}

.divider-line {
  margin-left: 50%;
  height: 130px;
  border-left: 1px solid #cccccc;
}

.login-form-divider-text {
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-size: 12px;
  color: #868686;
  text-align: center;
  line-height: 30px;
}

.login-quick-pin-form-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:host {
  height: calc(100%);
  padding-top: 70px;
  position: relative;
  display: block;
}

:host iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.importMAuthor {
  position: relative;
  z-index: 1;
}

.importMAuthor-assignBlend {
  z-index: 2;
}

.importMAuthor-stepperContainer {
  margin-top: 10px;
  margin-bottom: 15px;
}

.importMAuthor-credentials,
.importMAuthor-content {
  width: 550px;
  padding: 0 45px;
}

:host .projectSelect,
:host .lessonSelect {
  margin-bottom: 10px;
}

:host .contentIds {
  height: 42px;
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}

:host .contentIds-header {
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

:host .contentIds-header {
  border: 1px solid #D7D7DC;
  border-radius: 2px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  background-color: #F9F9F9;
  padding: 0 10px;
  cursor: pointer;
}

:host .contentIds--expanded {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

:host .toggleDropdown-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  color: #9CAFDA;
  transition: all 0.2s ease-in-out;
  transform-origin: center center;
}

:host .contentIds--expanded .toggleDropdown-btn {
  transform: rotate(180deg);
}

:host .lessonsWrapper {
  max-height: 12.5em;
}

:host .lessonItem--selected {
  color: #27BF92;
}

:host .lessonItem--selected .lesson-checkbox {
  color: #26C7A3;
}

:host .contentIds--inactive {
  opacity: 0.5;
  pointer-events: none;
}

:host .lessonName {
  height: 16px;
  font-size: 16px;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}

:host .selectedCount {
  height: 16px;
  width: 66%;
  color: #0D1C2E;
  font-size: 16px;
  line-height: 16px;
}

:host dropdown {
  width: 100%;
  background-color: #F9F9F9;
  border: 1px solid #D7D7DC;
  border-top: none;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  z-index: 2;
}

:host .contentItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10px;
  justify-content: space-between;
  height: 40px;
  width: 100%;
  color: rgba(0,0,0,0.7);
  cursor: pointer;
}

:host .contentItem:hover {
  color: #27BF92;
  background-color: rgba(38,199,163,0.1);
}

:host .contentId-inputItem {
  height: 42px;
  padding: 0 10px;
  width: 100%;
  border: 1px solid #D7D7DC;
  border-radius: 3px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1)!important;
  background-color: #F9F9F9;
  color: rgba(0,0,0,0.7);
  margin-bottom: 20px;
}




:host {
  min-height: 100vh;
  padding-top: 70px;
  display: flex;
  flex-direction: column;
}

:host main-navigation {
  margin: 0 30px 5px 0;
}

.mainLayout-topContainer {
  display: flex;
  align-items: flex-start;
  padding: 20px 20px 0 20px;
}

.mainLayout-page {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  z-index: 1;
}

.mainLayout-bottomContainer {
  flex: 1 0 auto;
}

.mainLayout-mainContent {
  flex: 1 1 auto;
  min-width: 0;
}

.fillWhole .mainLayout-topContainer {
  padding: 0;
}

/*=============================================== DIVIDER */

.mainLayout-page--divided .mainLayout-topContainer {
  padding-bottom: 40px;
}

.mainLayout-page--divided .mainLayout-bottomContainer {
  border-top: 1px solid #D3D3DC;
  padding-top: 40px;
}

/*=============================================== RWD */

.mainLayout-rwd-sideWidth {
  width: 10px;
}

.mainLayout-rwdContainer {
  padding-left: 10px;
  padding-right: 10px;
}

.bottomContent {
  width: 100%;
}

@media ( min-width: 1000px) {
  .mainLayout-rwdContainer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .mainLayout-rwd-sideWidth {
    width: 20px;
  }
}

@media ( min-width: 1500px) {
  .mainLayout-topContainer {
    padding: 20px 150px 0 20px;
  }

  .mainLayout-rwd-sideWidth {
    width: 150px;
  }
}



:host(.main-navigation--hidden) {
  display: none;
}

.main-navigation {
    display: inline-block;
    width: 100px;
    padding: 9px 0;
    overflow: hidden;
    margin-bottom: 12px;
}

.main-navigation .main-navigation-item {
    width: 100%;
    margin: 9px 0;
}

@media ( min-width: 1500px) {
  :host(.main-navigation--hidden) {
    display: inline-block;
    visibility: hidden;
  }
}

:host {
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.grade-question-header-cell {
  display: flex;
  flex-direction: row;
  height: 70px;
  border-bottom: solid 0;
  align-content: center;
}

.grade-question-header-cell:first-child {
  z-index: 1;
}

.grade-question-header-cell > div {
  display: flex;
  flex-direction: row;
  width: 70%;
  height: 50%;
  justify-content: space-between;
  align-content: center;
  margin: auto;
}

:host >>> .rectangle {
  background-color: #FFFFFF;
  border-bottom: 1px solid #D7D7DC;
}

:host >>> .grade-input {
  border: 1px solid #26C7A3;
  border-radius: 10px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
}

:host >>> .resource-name {
  color: #6C7C91;
  font-size: 20px;
  line-height: 33px;
}

:host >>> .question-label {
  color: #57616F;
  font-size: 20px;
  font-weight: 600;
  line-height: 33px;
}

:host >>> .bottom-label {
  height: 49px;
  font-size: 30px;
  font-weight: bold;
  line-height: 49px;
}

:host >>> .user-name {
  margin-left: 18px;
  flex: 4;
  color: #0D1C2E;
  overflow: hidden;
}

:host >>> .result-number-wrapper {
  flex:1;
  display: flex;
  margin-right: 18px;
}

:host >>> .percent, .total-results {
  color: #D3D3DC;
}

:host >>> .result-number {
  color: #7C8CAD;
}

:host >>> .grade-wrapper {
  display: flex;
  width: 200px;
  justify-content: space-between;
  margin-right: 18px;
}

:host >>> .grade-wrapper > form {
  width: 50px;
}

:host >>> .close-btn {
  cursor: pointer;
  margin: auto 0;
  font-size: 25px;
}

:host >>> .students-paginator-button {
  border: solid 1px;
  line-height: 28px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: #ffffff;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  display: inline-flex;
  vertical-align: middle;
  justify-content: center;
  margin: 8px 0;
}

:host >>> .students-paginator-button:hover {
  background-color: #26C7A3;
  color: white;
  transition: all 0.2s ease-in-out;
  border: solid 1px #26C7A3;
}

:host >>> .students-paginator-button:disabled {
  color: #cfcfcf;
  pointer-events: none;
}

:host {
  display: flex;
  flex-direction: row;
}

.open-sci-ed__unit-overview-wrapper {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin-right: 50px;
  -webkit-transition: 0.2s ease-in-out; /* For Safari 3.0 to 6.0 */
  transition: 0.2s ease-in-out; /* For modern browsers */
}

.open-sci-ed__unit-overview-wrapper:hover {
  border: #0210ac 2px; !important
  background-color: #6e6e6e !important;
}

.open-sci-ed__thumbnail {
  overflow: hidden;
  width: 180px;
  height: 180px;
  border: #0210ac 2px;
  border-style: solid solid none;
}

.open-sci-ed__thumbnail img {
  width: 100%;
  height: 100%;
}

.open-sci-ed__lesson-structure {
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 230px;
  width: 100%;
}

.open-sci-ed__all-lesson-sets {
  display: flex;
  flex-direction: row;
}

.open-sci-ed__lesson-set-wrapper {
  display: flex;
  flex-direction: column;
  margin-right: 5px;
  width: 100%;
  max-width: 250px;
  height: 175px;
}

.open-sci-ed__lesson-set-header {
  text-align: center;
  background-color: #FFFFFF;
  border-radius: 5px 5px 0 0;
  margin-bottom: 5px;
  padding: 5px;
}

.open-sci-ed__lesson-set {
  background-color: #FFFFFF;
  border-radius: 0 0 5px 5px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.open-sci-ed__lesson-button {
  display: flex;
  color: #FFFFFF;
  cursor: pointer;
  margin: 5px;
  width: 25px;
  height: 25px;
  text-align: center;
  border-radius: 5px;
  padding: 2px;
  justify-content: center;
  -webkit-transition: 0.2s ease-in-out; /* For Safari 3.0 to 6.0 */
  transition: 0.2s ease-in-out; /* For modern browsers */
}

.open-sci-ed__lesson-button:hover {
  border: #0210ac 2px; !important
  background-color: #6e6e6e !important;
}

.open-sci-ed__lesson-button--selected {
  border: #ffa621 solid 2px;
  background-color: #ffa621 !important;
  color: white !important;
  padding: 0;
}

.open-sci-ed__lesson-title {
  border-radius: 5px;
  padding: 5px;
  margin-top: 5px;
  color: #FFFFFF;
  border: #0210ac 2px solid;
  display: inline-block;
}

.open-sci-ed__unit-text {
  padding: 12px;
  border: #0210ac 2px solid;
  text-align: center;
  color: #FFFFFF;
}

.open-sci-ed__unit-overview-wrapper--selected .open-sci-ed__thumbnail,
.open-sci-ed__unit-overview-wrapper--selected .open-sci-ed__unit-text {
  border: #ffa621 solid 2px;
  background-color: #ffa621 !important;
  color: white !important;
}

:host {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 90px;
  pointer-events: none;
}

.overlayMessage-alertContainer {
  position: absolute;
  top: 0;
  left: -400px;
  height: 30px;
  width: 200px;
}

:host {
    display: inline-flex;
    justify-content: space-between;
    min-width: 450px;
    max-width: 700px;
    color: white;
    font-size: 17px;
    background-color: #003C98;
    min-height: 60px;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
    border-radius: 5px;
    padding: 12px;
    animation-name: enter;
    animation-duration: 0.2s;
    animation-timing-function: ease-out;
    margin-bottom: 25px;
    pointer-events: auto;
    cursor: pointer;
}

.overlayMessage-title {
    font-weight: bold;
}

.overlayMessage-closeIcon {
    font-size: 17px;
    margin-left: 10px;
}

/* TYPE COLORING */

:host(.overlayMessage--warning) {
    background-color: #F5A623;
}

:host(.overlayMessage--positive) {
    background-color: #26C7A3;
}

:host(.overlayMessage--negative) {
    background-color: #D0021B;
}

/* ANIMATION */

:host(.overlayMessage--leave) {
    animation-fill-mode: forwards;
    animation-name: leave;
    animation-timing-function: ease-in;
}

:host(.overlayMessage--collapse) {
    opacity: 0;
    animation-name: collapse;
    animation-timing-function: ease-in-out;
}

@keyframes enter {
    from {
        opacity: 0;
        transform: translateX(-250px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes leave {
    from {
        opacity: 1;
        transform: translateX(0px);
    }
    to {
        opacity: 0;
        transform: translateX(250px);
    }
}

@keyframes collapse {
    to {
        height: 0;
        min-height: 0;
        padding: 0;
        margin-bottom: 0;
    }
}


:host >>> main-layout {
  background: linear-gradient(180deg, #7C8CAD 0%, #7C8CAD 170px, #EAE9EC 170px, #EAE9EC 100%);
  height: auto;
}

:host >>> bbs-product-line, open-sci-ed-product-line  {
  padding: 21px 0px 30px 0px;
}

:host tabs img {
  height: 35px;
}

:host >>> tabs {
  height: 80px;
  display: flex;
  align-items: flex-end;
}

:host >>> .product-line__footer {
  display: flex;
  align-items: end;
}

.redeem-code-form {
  display: flex;
  flex-direction: column;
}

.redeem-code-group {
  width: 600px;
  padding: 15px;
}

.redeem-code-button-wrapper {
  display: flex;
  flex:1;
  flex-direction: row-reverse;
  padding-bottom: 15px;
  padding-right: 15px;
  margin-top: 15px;
}

.redeem-code-levelSelect,
.redeem-code-organisationSelect {
  padding: 0 10px;
}

.redeem-code-input {
  font-family: sans-serif;
}

.resourceList {
    display: flex;
    flex-wrap: wrap;
}

.resourceList-header-rightSide,
.resourceList-header-leftSide {
    display: flex;
    align-items: center;
}

.resourceList-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.resourceList-header-extraContent {
    margin-left: 10px;
}

:host >>> resource {
    margin-bottom: 10px;
}

:host >>> .resourceList-tileLayout resource {
    margin-right: 10px;
    margin-bottom: 40px;
}

.resourceList-emptyMessage {
    color: #9EAAC2;
    font-size: 24px;
    text-align: center;
    width: 100%;
}

:host filter-group {
    margin-right: 15px;
}

.resourceList-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
}

:host(.resource-stripVersion) {
  width: 100%;
}

.resource-strip {
  width: 100%;
  height: 90px;
  max-width: 100vw;
  background-color: #EAE9EC;
  color: #59687E;
  border-radius: 5px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.15s ease-out;
  display: flex;
  align-items: center;
  white-space: nowrap;
  opacity: 1;
  pointer-events: auto;
}

.resource-strip-inactive {
  opacity: 0.5;
  pointer-events: none;
}

.resource-strip-highlighted {
  background-color: #0070BE;
  color: #FFFFFF;
}

.resource-strip:hover {
  background-color: #26C7A3;
  color: #FFFFFF;
}

.resource-strip-content {
  height: 80px;
  min-width: 0;
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 3px 0 0 3px;
  /*box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);*/
  margin-left: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.resource-strip-content-nonassignable {
  margin-right: 5px;
}

.resource-strip-info-wrapper {
  margin-left: 10px;
  margin-right: 10px;
  width: 60%;
}

.resource-strip-title {
  font-family: "Catamaran", Helvetica, Arial, sans-serif;
  max-width: 100%;
  font-size: 18px;
  color: #0C1522;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resource-strip-category {
  max-width: 100%;
  color: #69789D;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resource-strip-icons-external-wrapper {
  height: 80px;
  border-radius: 0 3px 3px 0;
  /*box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);*/
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-content: center;
}

.resource-strip-icons-wrapper {
  margin: auto;
  display: flex;
  justify-content: center;
  align-content: center;
}

.resource-strip-icons-wrapper resource-menu {
  width: 100px;
}

.resource-strip-icons-wrapper .icon-play {
  padding: 29px 0;
}

.resource-strip-content:hover ~ .resource-strip-icons-external-wrapper .icon-play {
  color: #26C7A3;
}

.resource-strip-quickAssign-icon {
  width: 30px;
  font-size: 20px;
  line-height: 61px;
  color: #69789D;
  transition: all 0.2s ease-in-out;
  transition-property: text-shadow, color;
  margin: auto;
}

.resource-strip-quickAssign-icon:hover {
  color: #26C7A3;
  cursor: pointer;
}

.checkbox-strip-wrapper {
  margin-right: 10px;
  width: 180px;
}

.resource-tile {
  width: 255px;
  height: 363px;
  position: relative;
}

.resource-tile.isInactive {
  pointer-events: none;
  opacity: 0.5;
}

.resource-tile-background {
  width: 100%;
  height: 356px;
  top: 7px;
  position: absolute;
  background-color: #EAE9EC;
  color: #69789D;
  border-radius: 5px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  transition: background-color 0.15s ease-in-out;
}

.resource-tile-background.resource-tile-highlighted {
  background-color: #0070BE;
  color: #FFFFFF;
}

.resource-tile-wrapper {
  position: absolute;
  left: 5px;
  right: 5px;
  height: 100%;
}

.resource-tile-content {
  width: 100%;
  height: 331px;
  background-color: #FFFFFF;
  border-radius: 3px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  position: relative;
}

.resource-tile:hover .resource-tile-background {
  background-color: #26C7A3;
  transition: background-color 0.15s ease-in-out;
}

.resource-tile-top-container {
  height: 88px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.resource-tile-title-container {
  width: 100%;
  color: #454E5C;
  padding: 0 15px;
  margin: 11px 0 8px 0;
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex: 1;
}

.resource-tile-title {
  overflow: hidden;
  max-height: 2em;
}

.resource-tile-title--higher {
  max-height: 4em;
}

.checkbox-tile-wrapper {
  cursor: pointer;
  width: 100%;
  height: 32px;
  display: flex;
  overflow: hidden;
  align-items: center;
  color: #69789D;
}

.resource-tile-icons-wrapper {
  width: 100%;
  height: 61px;
}

.category-tile {
  color: #69789D;
  font-size: 13px;
  font-weight: 500;
  line-height: 25px;
  width: 100%;
  height: 32px;
  padding: 5px;
  overflow: hidden;
  transition: color 0.15s ease-in-out;
}

.checkbox-tile-wrapper.resource-tile-highlighted {
  font-weight: 500;
  color: #022986;
}

.category-tile.resource-tile-highlighted {
  color: #B2D3EA;
}

.resource-tile:hover .category-tile {
  color: #FFFFFF;
  transition: color 0.15s ease-in-out;
}

.resource-tile .image-tile-class {
  margin-top: 7px;
  width: 100%;
  height: 175px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #EAE9EC;
  color: #69789D;
  font-size: 60px;
  cursor: pointer;
}

.resource-tile-thumbnail-wrapper {
  margin-top: 7px;
  width: 100%;
  height: 175px;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.resource-tile-thumbnail {
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
}

.checkbox-tile-wrapper resource-toggler {
  flex: 1 1 auto;
}

.resource-tile-quickAssign-icon {
  font-size: 20px;
  line-height: 27px;
  height: 27px;
  width: 31px;
  transition: all 0.2s ease-in-out;
  transition-property: text-shadow, color;
}

.resource-tile-quickAssign-icon:hover {
  color: #26C7A3;
  cursor: pointer;
}

/* ================== TILE MINI ================== */

.resource-tileMini {
  width: 153px;
  height: 181px;
  position: relative;
  cursor: pointer;
}

.resource-tileMini-mainContainer {
  position: absolute;
  left: 3px;
  right: 3px;
  height: 157px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  background-color: white;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.resource-tileMini-categoryContainer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 5px;
  border-radius: 5px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  background-color: #0070BE;
  transition: background-color 0.15s ease-out;
  color: white;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.resource-tileMini-thumbnail-wrapper {
  width: 100%;
  height: 105px;
  position: relative;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  overflow: hidden;
}

.resource-tileMini-thumbnail {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.resource-tileMini-thumbnailIcon {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #EAE9EC;
  color: #69789D;
  font-size: 60px;
}

.resource-tileMini-titleContainer {
  color: #0C1522;
  font-size: 14px;
  line-height: 18px;
  padding: 11px;
  overflow: hidden;
  flex: 1;
  display: flex;
}

.resource-tileMini-category {
  height: 24px;
  padding: 0 5px;
  opacity: 0.7;
  vertical-align: middle;
  line-height: 25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:host:hover >>> .resource-tileMini-categoryContainer {
  background-color: #26C7A3;
}

.share-to-google-classroom-button {
  margin: auto 5px;
  width: 28px;
  height: 27px;
  border: none;
  display: grid;
  align-content: center;
  justify-content: center;
  background-color: #000000;
}
.share-to-google-classroom-button__icon {
  width: 28px;
  height: 28px;
  position: relative;
}

.share-to-google-classroom-button__icon:hover {
  opacity: 80%;
}

.quick-assign-button {
  color: #0278bc;
  background: none;
  border: none;
  display: flex;
  align-content: center;
  justify-content: center;
  margin-right: 10px;
}

.tooltip-inner {
  white-space: pre-line;
}

.player-body{
  position: relative;
  height: calc(100% - 70px);
  width: 100%;
}

.player-body--bigHeader {
  height: calc(100% - 140px);
}

.resource-player-library {
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  height: 100%;
  width: 100%;
}

.resource-button {
    cursor: pointer;
    width: 150px;
    height: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    border-radius: 3px;
    background-color: #0070BE;
    color: white;
    border: solid #0070BE 1px;
    font-size: 16px !important;
    font-weight: 600;
    position: absolute;
    right: 10px;
}

.resource-button:focus {
  box-shadow: none !important;
}

.resource-button:not([disabled]):hover {
  background-color: #26C7A3;
  color: white;
  border-color: #26C7A3;
}

.searchView-wrapper {
  display: flex;
}

.searchView-wrapper resource-categories-menu {
  margin-right: 25px;
}

.searchView-list {
  position: relative;
  flex: 1;
  height: 100%;
  min-width: 0;
}

.searchView-header {
  margin-bottom: 20px;
}

:host {
  display: inline-flex;
  position: relative;
  padding: 3px;
  transition: all 0.3s ease-in-out;
  width: 2.8em;
}

:host .ssftc-lesson-background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}

:host .ssftc-lessons-svg {
  position: relative;
  left: 0;
  top: 0;
}

:host .ssftc-lesson-outerCircle,
:host .ssftc-lesson-ringCircle {
  transition: all 0.3s ease-in-out;
}

:host(.ssftc-lesson--selectable) {
  cursor: pointer;
}

@media (min-width: 1260px) {
  :host {
    padding: 5px;
    width: 3.8em;
  }
}

:host {
  display: flex;
  flex-direction: row;
}

:host .ssftc-structure-background {
  margin-left: -30px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  text-align: start;
  transition: all 0.3s ease-in-out;
  font-family: "LuloCleanOne", Helvetica, Arial, sans-serif;
}

:host .ssftc-structure-thumbnail {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 160px;
  height: 206px;
}

:host .ssftc-structure-label-background {
  width: 160px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: #ffffff;
  color: black;
  height: 67px;
}

:host .ssftc-structure-label-text {
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

:host .ssftc-thumbnail-wrapper {
  z-index: 2;
  cursor: pointer;
  width: 160px;
  height: 273px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

:host .ssftc-lessons-background {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  margin-right: 20px;
  max-height: 185px;
  background-color: #ffffff;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  height: 110px;
}

:host .ssftc-lessons-wrapper {
  display: flex;
  align-content: center;
  justify-content: space-around;
  padding-left: 15px;
}

:host .ssftc-lessons-background--expanded {
  height: 185px;
}

:host .ssftc-lessons-header {
  display: flex;
  justify-content: space-between;
  color: #000000;
  padding: 12px 40px 10px 50px;
  font-weight: 400;
  height: 42px;
  line-height: 22px;
  letter-spacing: -3.5px;
}

:host .ssftc-lessons-wrapper ssftc-lesson {
  height: 80px;
  margin-top: 20px;
  margin-bottom: 20px;
}

:host .ssftc-lesson-title-wrapper {
  display: flex;
  flex-direction: row;
  padding: 24px 60px 20px 50px;
  height: 42px;
  letter-spacing: -3.5px;
  font-size: 18px;
}

:host .ssftc-lesson-title-wrapper--expanded {
  height: 100%;
}

:host .ssftc-lesson-title {
  padding-left: 10px;
  font-weight: 400;
}

:host .ssftc-question-wrapper {
  display: flex;
  padding-left: 23px;
  font-size: 12px;
  height: 75px;
  padding-bottom: 7px;
  align-items: center;
}

:host .ssftc-question-wrapper--focusQuestion {
  padding-left: 15px;
}

:host .ssftc-question-wrapper ssftc-lesson {
  font-size: 16px;
  margin-right: 12px;
}

:host .ssftc-lesson-question {
  font-size: 15px;
  color: #000000;
}

.ssftc-lesson-item-background {
  width: 100%;
  height: 100%;
  max-height: 110px;
  display: flex;
  justify-content: space-around;
}

.ssftc-challenge-background {
  background-color: #E5F1F8;
}

.ssftc-challenge-background:last-child {
  border-top-right-radius: 10px;
}

.p-icon {
  width: 65px;
}

:host {
  width: 165px;
  border-radius: 5px;
  background-color: #fffeff;
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  transition: all 0.3s ease-in-out;
}

:host(:not(.ssftcProductItem--inactive)) {
  cursor: pointer;
}

.ssftcProductItem-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.ssftcProductItem-thumbnailContainer {
  width: 100%;
  height: 149px;
  overflow: hidden;
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.ssftcProductItem-titleContainer {
  height: 90px;
  position: relative;
}

.ssftcProductItem-titleContainer-text {
  font-weight: 100;
  padding: 3px 7px;
  color: #000000;
  font-size: 10px;
  line-height: 13px;
  width: 100%;
  height: 100%;
  text-align: start;
  font-family: "LuloCleanOne", Helvetica, Arial, sans-serif;;
}

.ssftcProductItem-inactiveCover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.7;
}


@media (min-width: 1200px) {
  :host {
    width: 221px;
  }

  .ssftcProductItem-thumbnailContainer {
    height: 199px;
  }

  .ssftcProductItem-titleContainer {
    height: 121px;
  }

  .ssftcProductItem-titleContainer-text {
    padding: 5px 10px;
    font-size: 13px;
    line-height: 18px;
  }

  .ssftcProductItem-titleContainer-text::first-line {
    line-height: 25px;
  }
}

:host {
  display: block;
  width: 65px;
  height: 65px;
  margin-right: 20px;
  border-radius: 50px;
}

:host:hover,
.stcms-lesson-button--selected {
  outline: solid 8px #ece22b;
}

:host:hover:not(.stcms-lesson-button--selected){
  cursor: pointer;
  transform: scale(110%);
}

:host {
  font-family: "Myriad Pro Bold Condensed";
}

.stcms-product-structure {
  padding-bottom: 30px;
}

.stcms-product__unit-overview {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}

.stcms-product__unit-question-background {
  height: 100px;
  width: 100%;
  background-color: #FFFFFF;
  /*background: linear-gradient(90deg, white, transparent);*/
  /*box-shadow: inset -10px -10px 10px #E9F0FF;*/
  z-index: -1;
  border-radius: 5px;
}

.stcms-product__unit-question {
  color: black;
  padding: 20px;
  font-size: 20px;
}

.stcms-product__unit-overview__background {
  height: 150px;
  width: 280px;
  border-radius: 50px;
}

.stcms-product__unit-overview__thumbnail {
  background: url('images/stcms/unit-overview-background.svg');
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.stcms-product__unit-overview__background:not(.stcms-product__unit-overview-thumbnail--selected) {
  cursor: pointer;
}

.stcms-product__unit-overview__background:not(.stcms-product__unit-overview-thumbnail--selected):hover {
  transform: scale(110%);
  font-style: italic;
}

.stcms-product__unit-overview__background:hover,
.stcms-product__unit-overview__background--selected {
  outline: solid 8px #ece22b;
  font-style: italic;
}

.stcms-product__unit-title-label {
  background-color: #011e41;
  color: #FFFFFF;
  font-size: 20px;
  width: 100%;
  text-align: center;
  padding: 10px;
  border-radius: 50px 50px 0 0;
}

.stcms-product__unit-title {
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin: auto;
  padding: 0 10px;
}

.stcms-product__lessons-group {
  background-color: #FFFFFF;
  /*background: linear-gradient(transparent, #FFFFFF);*/
  /*box-shadow: inset -10px -10px 10px #E9F0FF;*/
  border-radius: 5px;
}

.stcms-product__lesson-group__title {
  color: black;
  margin: 0 20px;
  font-size: 20px;
}

.stcms-product__lessons-button-group {
  display: flex;
  padding: 10px 20px;
}

.stcms-product__lesson-question-group {
  color: black;
  font-size: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
}

.stcms-product__lesson-title {
  fonte-weight: bold;
}

.stcms-font-normal {
  font-family: "Catamaran", Helvetica, Arial, sans-serif;
}

.quick-assignment-details {
  width: 100%;
  min-height: 100vh;
  background-color: #027EBF;
}

.quick-assignment-details-instruction {
  background-color: #2D363A;
  color: #FFFFFF;
  width: 100%;
  padding: 5px 10px;
}

.quick-assignment-details-instruction-label {
  font-weight: bold;
  letter-spacing: 0.06em;
  line-height: 30px;
}

.quick-assignment-details-teacher {
  float: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin:  1em;
  font-weight:  bold;
  letter-spacing: 0.05em;
  font-size: 0.9em;
  white-space:  nowrap;
  color: #FFFFFF;
}

.quick-assignment-details-resourcesList {
  display: block;
  margin-top: 15px;
  padding: 0 10px;
}

.quick-assignment-details-header {
  color: #FFFFFF;
  font-size: 25px;
  font-weight: 500;
  line-height: 32px;
  margin-bottom: 20px;
  text-align: left;
}

@media only screen and (min-width: 768px) {
  .quick-assignment-details-teacher {
    flex-direction: row;
  }

  .quick-assignment-details-instruction {
    padding: 10px 50px;
  }

  .quick-assignment-details-resourcesList {
    margin-top: 20px;
    padding: 0 50px;
  }

  .quick-assignment-details-header {
    font-size: 30px;
    line-height: 38px;
  }
}

@media only screen and (min-width: 1000px) {
  .quick-assignment-details-instruction {
    padding: 15px 150px;
  }

  .quick-assignment-details-resourcesList {
    margin-top: 47px;
    padding: 0 150px;
  }
}

:host {
  display: flex;
  flex-direction: column;
}

.studentProfile-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 80px;
}

:host empty-content {
  margin: 20px 0;
}

:host .tabs-wrapper {
  width: 100%;
  max-width: 550px;
  margin: 1em auto;
}

:host .content-container {
  margin-top: 30px;
}

.studentProfile-contentBackground {
  background-color: #ffffff;
  border-radius: 0 5px 5px 5px;
  position: relative;
  overflow: hidden;
  padding: 20px;
  min-height: 290px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

:host .joinSchoolButton {
  margin: 10px 0;
}

.studentProfile-mySchool,
.studentProfile-myGroup {
  height: 50px;
  display: flex;
  align-items: center;
  color: #596370;
  font-size: 16px;
}

.studentProfile-myGroup > * {
  margin: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /*flex+ellipsis fix*/
}

.studentProfile-mySchool:not(:last-child) {
  border-bottom: 1px solid #D3D3DC;
}

.studentProfile-myGroup:not(:last-child) {
  border-bottom: 1px solid #D3D3DC;
}

.studentProfile-mySchool-name,
.studentProfile-myGroup-name {
  flex: 2;
}

.studentProfile-myGroup-school {
  flex: 3;
}

:host paginator {
  margin-top: 3px;
}

:host .studentApp-school-name {
  font-size: 1.1em;
  color: #3a3a3a;
  width: 100%;
  font-weight: 600;
  padding: 5px 0 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

:host .studentApp-school-detail {
  color: #5B5F62;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 5px;
}

:host >>> .tableListHeader .tableListHeader-label {
  padding-left: 10px;
}

:host >>> .tableList-column-firstName,
:host >>> .tableList-column-lastName {
  width: 120px;
}

:host >>> .tableList-column-login {
  width: 90px;
}

:host >>> .tableList-column-4 {
  width: 90px;
}

@media (min-width: 1000px) {

  :host >>> .tableList-column-firstName,
  :host >>> .tableList-column-lastName {
    width: 130px;
  }

  :host >>> .tableList-column-login {
    width: 100px;
  }

  :host >>> .tableList-column-4 {
    width: 130px;
  }
}

.students-sidebar-menu-groups-wrapper {
  max-height: 13em;
  padding-left: 10px;
  height: auto;
}

@keyframes creation {
  from {
    opacity:0;
    transform: translateY(10px);
  }
  to {
    opacity:1;
    transform: translateY(0);
  }
}

:host {
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1035;
  color: #ffffff;
}

:host(.students-ribbon--hidden) {
  visibility: hidden;
}

.students-ribbon-buttons {
  display: flex;
  opacity: 1;
}

:host(.students-ribbon--hidden) .students-ribbon-buttons {
  opacity: 0;
}

:host >>> .students-ribbon-buttons view-header-button {
  border-radius: 3px;
  height: 44px;
  color: #ffffff;
  background-color: #26C7A3;
  font-size: 16px;
  font-weight: 600;
  line-height: 44px;
  padding: 0 10px;
}

:host >>> .students-ribbon-buttons view-header-button:last-child:hover {
  color: #ffffff;
  background-color: #0B5AB0;
}

:host >>> .students-ribbon-buttons view-header-button:not(:last-child) {
  margin-right: 18px;
  background-color: #ffffff;
  border: 2px solid #D3D3DC;
  color: #69789D;
}

:host >>> .students-ribbon-buttons view-header-button:not(:last-child):hover {
  background-color: #26C7A3;
  border-color: transparent;
  color: #ffffff;
}

.students-ribbon {
  padding: 0 20px;
  align-items: center;
  justify-content: space-around;
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
}

.students-ribbon-label {
  margin-left: 150px;
  margin-top: 20px;
  margin-bottom: 15px;
  display: flex;
  flex: 1;
  color: #0B5AB0;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
}

.students-ribbon-buttons:first-child {
  justify-content: flex-start;
}

.students-ribbon-buttons:last-child {
  justify-content: flex-end;
}




:host view-header {
    margin-bottom: 20px;
}

.studentsView-wrapper {
  display: flex;
}

.studentsView-controls {
    display: flex;
    justify-content: flex-end;
}

.studentsView-listContainer {
    position: relative;
    margin-left: 20px;
    width: 100%;
}

.studentsView-listWrapper {
    position: relative;
    z-index: 0;
}

.studentsView-listContainer loading-cover {
    z-index: 1;
}

:host >>> view-header-button {
  margin-right: 20px;
}

:host .mainContent {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.teacherProfile-options {
  width: 100%;
  max-width: 850px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.teacherProfile-leftOptions, .teacherProfile-rightOptions {
  flex: 1;
  margin: 20px;
  display: flex;
  flex-direction: column;
}

.teacherProfile-leftOptions {
  margin-bottom: 0;
}

:host my-licenses {
  margin-top: 20px;
}

:host view-header {
  align-self: stretch;
}

@media (min-width: 1300px) {
  .teacherProfile-options {
    flex-direction: row;
    align-items: flex-start;
    max-width: none;
  }
  .teacherProfile-leftOptions {
    flex: 1;
    margin-bottom: 20px;
  }
  .teacherProfile-rightOptions {
    flex: 2;
  }
}
:host {
    top: 0;
    display: flex;
    background-color: #FFFFFF;
    position: fixed;
    height: 70px;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
    width: 100%;
    justify-content: space-between;
    z-index: 1035;
    transition: box-shadow 0.05s ease-in-out;
}

:host(.topBar--sticky) {
    box-shadow: none;
}

:host loading-spinner {
    width: 30px;
}

/* ================================== LOGO (LEFT) */

.topBar-logoContainer {
    justify-content: left;
    padding: 0 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.topBar-logo {
    height: 30px;
    width: auto;
    transition: filter 0.3s;
    filter: brightness(100.0001%);
}

.topBar-logoContainer:hover .topBar-logo {
    filter: brightness(170%);
}

/* ================================== SEARCH (CENTER) */

.topBar-searchContainer {
    flex: 1;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    width: 100%;
    background-color: #E9F0FF;
    color: #7C8CAD;
}

/* ================================== APP CONTROLS (RIGHT) */

.topBar-appControls {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin-left: 5px;
}

.topBar-appControls > * {
    margin-right: 5px;
}

.topBar-button {
    box-sizing: border-box;
    white-space: nowrap;
    height: 37px;
    background-color: white;
    border-radius: 3px;
    border: 1px solid #D3D3DC;
    padding: 0 10px;
    display: flex;
    align-items: center;
    color: #454E5C;
    font-size: 14px;
    vertical-align: middle;
    line-height: 37px;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.topBar-button:not(.topBar-button--disabled) {
    cursor: pointer;
}

.topBar-userButton {
    color: #0B5AB0;
}

.topBar-button:not(.topBar-button--disabled):hover,
.topBar-button--expanded {
    background-color: #23B597;
    border-color: #23B597;
    color: white;
}

.topBar-button:not(.topBar-button--disabled):hover .topBar-button-dash,
.topBar-button--expanded .topBar-button-dash {
    color: white;
}

.topBar-button-dash {
    margin-left: 5px;
    color: #9CAFDA;
    transition: all 0.2s ease-in-out;
    transform-origin: center center;
}

.topBar-button--expanded .topBar-button-dash {
    transform: rotate(180deg);
}

.topBar-button.topBar-button--disabled .topBar-button-dash {
    display: none;
}

.topBar-button:focus {
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.1) !important;
}

.topBar-userButton-icon {
    color: #57616F;
    font-size: 20px;
    margin-right: 3px;
    transition: all 0.2s ease-in-out;
}

.topBar-button:not(.topBar-button--disabled):hover .topBar-userButton-icon,
.topBar-button--expanded .topBar-userButton-icon {
    color: white;
}

.topBar-userButton-lastName {
    display: none;
}

.topBar-userButton-firstName {
    display: none;
}

.topBar-dropdown {
    right: 0;
}

.topBar-dropdown-user {
    width: 100%;
    min-width: 150px;
    max-width: 250px;
}

.topBar-dropdown-item,
.topBar-dropdown-largeItem {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.topBar-dropdown-item {
    padding-left: 25px;
    justify-content: flex-start;
    color: white;
    font-size: 14px;
    height: 30px;
    transition: background-color 0.2s ease-in-out;
}

.topBar-dropdown-item:hover {
    background-color: #003C98;
}

.topBar-dropdown-largeItem {
    margin: 5px;
    background-color: white;
    display: flex;
    color: #0070BE;
    font-size: 16px;
    font-weight: 600;
    padding: 0 10px;
    height: 40px;
    border-radius: 3px;
    text-transform: uppercase;
    transition: color 0.2s ease-in-out;
}

.topBar-dropdown-largeItem:hover {
    color: #26C7A3;
}

:host .icon-logout {
    color: #57616F;
    font-size: 20px;
    margin-right: 10px;
}

.joinSchoolBtn {
  color: #ffffff;
  background-color: #066fa0;
}

/* ================================== RWD */

@media only screen and (min-width: 768px) {
    .topBar-logo {
        height: 50px;
    }
    .topBar-logoContainer {
        padding: 0 25px;
    }
    .topBar-appControls > * {
        margin-right: 10px;
    }
    .topBar-userButton-firstName {
        display: block;
    }
    .topBar-userButton-icon {
        margin-right: 10px;
    }
    .topBar-searchContainer {
        flex: 0 1 150px;
    }
}

@media only screen and (min-width: 1000px) {
    .topBar-searchContainer {
        flex: 0 1 300px;
    }
    .topBar-appControls > * {
        margin-right: 20px;
    }
    .topBar-userButton-lastName {
        display: block;
    }
    .topBar-button-dash {
        margin-left: 15px;
    }
}

:host {
  top: 0;
  display: flex;
  flex: 1 0 auto;
  background-color: #FFFFFF;
  position: fixed;
  height: 70px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  justify-content: space-between;
  z-index: 1035;
  transition: box-shadow 0.05s ease-in-out;
  font-family: 'Dosis', Helvetica, Arial, sans-serif;
}

:host(.topBarStudent--hidden) {
  display: none;
}

:host(.topBarStudent--sticky) {
  box-shadow: none;
}

:host loading-spinner {
  width: 30px;
}

.topBarStudent-assignmentNavigationBar {
  margin: 35px 10px 0 10px;
}

/* ================================== LOGO (LEFT) */

.topBarStudent-logoContainer {
  justify-content: flex-start;
  padding: 0 10px;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.topBarStudent-logoWrapper {
  height: 30px;
}

.topBarStudent-logo {
  height: 100%;
  width: auto;
  transition: filter 0.3s;
}

.topBarStudent-logoContainer:hover .topBarStudent-logo {
  filter: brightness(170%);
}

/* ================================== APP CONTROLS (RIGHT) */

.topBarStudent-appControls {
  align-items: center;
  display: flex;
  flex: 1 0 auto;
  justify-content: flex-end;
  margin-left: 5px;
}

.topBarStudent-appControls > * {
  margin-right: 5px;
}

.topBarStudent-leftContainer {
  display: flex;
  flex: 1 0 auto;
}

.topBarStudent-userButton-wrapper {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.topBarStudent-userButton-wrapper--expanded {
  margin-top: 31px;
}

.topBarStudent-schoolButton,
.topBarStudent-userButton {
  box-sizing: border-box;
  white-space: nowrap;
  height: 37px;
  background-color: white;
  border-radius: 3px;
  border: 1px solid #D3D3DC;
  padding: 0 10px;
  display: flex;
  align-items: center;
  color: #454E5C;
  font-size: 14px;
  vertical-align: middle;
  line-height: 37px;
  transition: color 0.2s ease-in-out, padding 0.05s ease-in-out, height 0.05s ease-in-out;
  position: relative;
}

.topBarStudent-userButton {
  color: #0070BE;
  position: relative;
  top: 0;
  left: 0;
}

.topBarStudent-userButton:not(.topBarStudent-button--expanded):hover {
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  border-color: transparent;
  border-bottom: none;
  background-color: #23B597;
  cursor: pointer;
  color: white;
}

.topBarStudent-userButton.topBarStudent-button--expanded {
  background: #0070BE;
  border-color: #0070BE;
  border-bottom: none;
  color: white;
  border-radius: 3px 3px 0 0;
  height: 50px;
  padding-bottom: 13px;
}

.topBarStudent-button-triangle {
  width: 100%;
  height: 0;
  display: flex;
}

.topBarStudent-button-triangle-left {
  width: 50%;
  height: 100%;
  background: linear-gradient(13deg, transparent 50%, #0070BE 55%);
  transition: all 0.1s ease-in-out;
}

.topBarStudent-button-triangle-right {
  width: 50%;
  height: 100%;
  background: linear-gradient(167deg, #0070BE 45%, transparent 50%);
  transition: all 0.1s ease-in-out;
}

.topBarStudent-button-triangle--expanded {
  height: 17px;
}

.topBarStudent-userButton:focus {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1) !important;
}

.topBarStudent-userButton-icon {
  color: #57616F;
  font-size: 20px;
  margin-right: 3px;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.topBarStudent-userButton:not(.topBarStudent-button--expanded):hover .topBarStudent-userButton-icon,
.topBarStudent-button--expanded .topBarStudent-userButton-icon {
  color: white;
}

.topBarStudent-userButton-lastName {
  display: none;
}

.topBarStudent-userButton-firstName {
  display: none;
}

:host .icon-logout {
  color: #7C8CAD;
  font-size: 20px;
  margin-right: 0;
}

.topBarStudent-logoutButton {
  box-sizing: border-box;
  white-space: nowrap;
  height: 37px;
  background-color: white;
  border-radius: 3px;
  border: 1px solid #D3D3DC;
  padding: 0 7px;
  display: flex;
  align-items: center;
  color: #7C8CAD;
  font-size: 14px;
  vertical-align: middle;
  line-height: 37px;
  transition: all 0.2s ease-in-out;
  position: relative;
}

.topBarStudent-logoutButton:hover {
  background-color: #23B597;
  border-color: #23B597;
  cursor: pointer;
}

.topBarStudent-logoutButton:hover .topBarStudent-icon-logout {
  color: white;
}

/* ================================== RWD */

@media only screen and (min-width: 900px) {
  .topBarStudent-logoContainer {
    padding: 0 25px;
  }

  .topBarStudent-appControls > * {
    margin-right: 10px;
  }

  .topBarStudent-userButton-firstName {
    display: block;
  }

  .topBarStudent-userButton-icon {
    margin-right: 10px;
  }
}

@media only screen and (min-width: 1060px) {
  .topBarStudent-logoWrapper {
    height: 50px;
  }
}

@media only screen and (min-width: 1110px) {
  .topBarStudent-appControls > * {
    margin-right: 20px;
  }

  .topBarStudent-userButton-lastName {
    display: block;
  }

  .topBarStudent-button-triangle--expanded {
    height: 19px;
  }
}

:host {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100vw;
  min-height: 100vh;
  background-color: #0070BE;
  padding: 30px;
  color: white;
  max-width: 100vw;
}

.tutorialPopup-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-duration: 0.15s;
}

.tutorialPopup-title {
  font-weight: 300;
  font-size: 36px;
  max-width: 80vw;
}

.tutorialPopup-description {
  margin-top: 5px;
  font-size: 20px;
  max-width: 80vw;
}

.tutorialPopup-image {
  margin-top: 40px;
  max-width: 80vw;
  box-shadow: 0 0 40px 0 rgba(0,0,0,0.3);
  border-radius: 5px;
}

:host mini-stepper {
  margin-top: 15px;
}

.tutorialPopup-buttons {
  margin-top: 35px;
}

.tutorialPopup-doNotShowAgain {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin-top: 20px;
}

.tutorialPopup-checkbox {
  font-size: 12px;
  margin-right: 5px;
}

.tutorialPopup-buttons > *:not(:last-child) {
  margin-right: 10px;
}

.tutorialPopup-buttons > * {
  min-width: 100px;
}

:host .commonButton--white:not(:hover) {
  color: #0070BE;
}

.tutorialPopup-doNotShowAgain {
  position: relative;
  cursor: pointer;
}

.tutorialPopup-closeButton {
  position: absolute;
  right: 6%;
  top: 4%;
  cursor: pointer;
  font-size: 2em;
  text-decoration: none;
  transition: color ease-in-out 0.15s;
}

@keyframes nextLeave {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(-120px);
    opacity: 0;
  }
}

@keyframes nextEnter {
  0% {
    transform: translateX(120px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes backLeave {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(120px);
    opacity: 0;
  }
}

@keyframes backEnter {
  0% {
    transform: translateX(-120px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

/*!
 * Datepicker v0.6.4
 * https://github.com/fengyuanchen/datepicker
 *
 * Copyright (c) 2014-2017 Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2017-11-24T14:38:19.628Z
 */

.datepicker-container {
  background-color: #fff;
  direction: ltr;
  font-size: 12px;
  left: 0;
  line-height: 30px;
  position: fixed;
  top: 0;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 210px;
  z-index: -1;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.datepicker-container::before,
.datepicker-container::after {
  border: 5px solid transparent;
  content: " ";
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.datepicker-dropdown {
  border: 1px solid #ccc;
  -webkit-box-shadow: 0 3px 6px #ccc;
  box-shadow: 0 3px 6px #ccc;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  position: absolute;
  z-index: 1;
}

.datepicker-inline {
  position: static;
}

.datepicker-top-left,
.datepicker-top-right {
  border-top-color: #39f;
}

.datepicker-top-left::before,
.datepicker-top-left::after,
.datepicker-top-right::before,
.datepicker-top-right::after {
  border-top: 0;
  left: 10px;
  top: -5px;
}

.datepicker-top-left::before,
.datepicker-top-right::before {
  border-bottom-color: #39f;
}

.datepicker-top-left::after,
.datepicker-top-right::after {
  border-bottom-color: #fff;
  top: -4px;
}

.datepicker-bottom-left,
.datepicker-bottom-right {
  border-bottom-color: #39f;
}

.datepicker-bottom-left::before,
.datepicker-bottom-left::after,
.datepicker-bottom-right::before,
.datepicker-bottom-right::after {
  border-bottom: 0;
  bottom: -5px;
  left: 10px;
}

.datepicker-bottom-left::before,
.datepicker-bottom-right::before {
  border-top-color: #39f;
}

.datepicker-bottom-left::after,
.datepicker-bottom-right::after {
  border-top-color: #fff;
  bottom: -4px;
}

.datepicker-top-right::before,
.datepicker-top-right::after,
.datepicker-bottom-right::before,
.datepicker-bottom-right::after {
  left: auto;
  right: 10px;
}

.datepicker-panel > ul {
  margin: 0;
  padding: 0;
  width: 102%;
}

.datepicker-panel > ul::before,
.datepicker-panel > ul::after {
  content: " ";
  display: table;
}

.datepicker-panel > ul::after {
  clear: both;
}

.datepicker-panel > ul > li {
  background-color: #fff;
  cursor: pointer;
  float: left;
  height: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 30px;
}

.datepicker-panel > ul > li:hover {
  background-color: rgb(229, 242, 255);
}

.datepicker-panel > ul > li.muted,
.datepicker-panel > ul > li.muted:hover {
  color: #999;
}

.datepicker-panel > ul > li.highlighted {
  background-color: rgb(229, 242, 255);
}

.datepicker-panel > ul > li.highlighted:hover {
  background-color: rgb(204, 229, 255);
}

.datepicker-panel > ul > li.picked,
.datepicker-panel > ul > li.picked:hover {
  color: #39f;
}

.datepicker-panel > ul > li.disabled,
.datepicker-panel > ul > li.disabled:hover {
  background-color: #fff;
  color: #ccc;
  cursor: default;
}

.datepicker-panel > ul > li.disabled.highlighted,
.datepicker-panel > ul > li.disabled:hover.highlighted {
  background-color: rgb(229, 242, 255);
}

.datepicker-panel > ul > li[data-view="years prev"],
.datepicker-panel > ul > li[data-view="year prev"],
.datepicker-panel > ul > li[data-view="month prev"],
.datepicker-panel > ul > li[data-view="years next"],
.datepicker-panel > ul > li[data-view="year next"],
.datepicker-panel > ul > li[data-view="month next"],
.datepicker-panel > ul > li[data-view="next"] {
  font-size: 18px;
}

.datepicker-panel > ul > li[data-view="years current"],
.datepicker-panel > ul > li[data-view="year current"],
.datepicker-panel > ul > li[data-view="month current"] {
  width: 150px;
}

.datepicker-panel > ul[data-view="years"] > li,
.datepicker-panel > ul[data-view="months"] > li {
  height: 52.5px;
  line-height: 52.5px;
  width: 52.5px;
}

.datepicker-panel > ul[data-view="week"] > li,
.datepicker-panel > ul[data-view="week"] > li:hover {
  background-color: #fff;
  cursor: default;
}

.datepicker-hide {
  display: none;
}