body
{
    padding-top: 50px;
    padding-bottom: 40px;
    font-family: "Lucida Grande", "Open Sans", "Lucida Sans", sans-serif;
    text-rendering: optimizeLegibility;
}

input, button, select, textarea
{
  font-family: "Lucida Grande", "Open Sans", "Lucida Sans", sans-serif;
}

.navbar-inner
{
  background-color: #fff;
  background-image: initial;
  /* color: #343a40; */
  /* background-color: #d6e7ec;
  background-image: -moz-linear-gradient(top, #d6e7ec, #a0bfc8);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d6e7ec), to(#a0bfc8));
  background-image: -webkit-linear-gradient(top, #d6e7ec, #a0bfc8);
  background-image: -o-linear-gradient(top, #d6e7ec, #a0bfc8);
  background-image: linear-gradient(to bottom, #d6e7ec, #a0bfc8);
  background-repeat: repeat-x;
  border-color: #d6e7ec;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd6e7ec', endColorstr='#ffa0bfc8', GradientType=0); */
}

.hero-unit
{
    display: block;
    position: relative;
    font-size: 1.1em;
    line-height: 1.4em;
    padding: 2em;
}

/*.hero-unit h1
{
    position: relative;
    font-size: 2em;
    line-height: 1.2em;
    margin-bottom: 0.5em;
    margin-top: 0;
}*/

.form-horizontal .control-label
{
    text-align: left;
    width: 4em;
}

.form-horizontal input
{
    width: 18em;
}

.form-horizontal .controls
{
    margin-left: 7em;
    width: 19em;
}

div.ui-dialog .form-horizontal .controls {
  width: 70%
}

div.ui-dialog .form-horizontal input, div.ui-dialog .form-horizontal textarea
{
    width: 100%;
}

.navbar a.brand {
  padding: 0;
  padding-right: 20px;
  font-size: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
}
.form-horizontal .navbar-inner h1 a.brand
{
    font-size: 1.2em;
    color: #333;
}

/* .navbar-inner .brand
{
  padding-left: 44px;
  background-image:url("../img/LD_icon.png");
  background-repeat: no-repeat;
} */

.navbar-inner .nav .active > a
{
    background-color: #f9f9f9;
    color: #111;
}

.navbar-inner .brand, .navbar-inner .nav > li > a {
  color: #333;
  /* text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); */
}

.navbar-inner .brand img {
  margin-right: 0.6em;
}

#logoph {
  background-image: url("../assets/brand/LD_ico_42.png");
  width: 42px;
  height: 42px;
}

.navbar-inner .brand:hover {
  text-decoration: underline;
}

.navbar-inner .nav > li > a:hover,
.navbar-inner .brand:focus,
.navbar-inner .nav > li > a:focus {
  color: #111111;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  background-color: #efefef;
}

.navbar-inner .nav .active > a:hover, .navbar-inner .nav .active > a:focus
{
  color: #333;
  /* background-color: #a0bfc8; */
}

footer
{
    border-top: 1px solid #dedede;
    margin-top: 0.9em;
    padding-top: 0.9em;
}

#viewer, #ppcviewer, #editor
{
  clear: both;
}

h1
{
    font-size: 2.2em;
}

h2
{
    font-size: 1.6em;
}

#registerBtn
{
    padding-left: 0;
}

.listview .tla
{
  position: relative;
  /*float: left;*/
  /*border: 1px solid black;*/
  /*height: 22em;*/
  overflow: hidden;
  /*background-color: #eee;
  padding: 0.5em 0.4em;
  margin-bottom: 0.5em;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;*/
  clear: both;
  transition: height 0.5s;
  -webkit-transition: height 0.5s; /* Safari */
}

.tla .title, .tla .duration, .tla .groupSize, .timeline-properties .title, .timeline-properties .durationHolder, .timeline-properties .groupSizeHolder
{
  display: inline;
}

.tla .duration:before
{
  content:'(';
}

#viewer .tla .duration:after
{
  content:', ';
}

.tla .groupSize:after
{
  content:')';
}

.tla .notes, .timeline-properties .notes, .tla .resources
{
  margin-top: 0.333em;
  margin-left: 0.333em;
}

.tla .title
{
  font-size: 1.1em;
  font-weight: bold;
}

.teachingMethod
{
  position: absolute;
  bottom: 0;
  right: 0;
}

.tla.inactive
{
  transition: height 0.5s;
  -webkit-transition: height 0.5s; /* Safari */
  overflow: hidden;
  /*height: 2.1em;*/
  /*cursor: pointer;*/
}

#editor .session.blockview .tla.inactive
{
  cursor: inherit;
}

#editor .teacherPresence a[data-value]:before, #editor .onlineOrFace2Face a[data-value]:before {
  margin-left: -5px;
}

#editor .teacherPresence a[data-value]:after, #editor .onlineOrFace2Face a[data-value]:after
{
  margin-top: -18px;
  margin-left: 17px;
  z-index: 12;
  display: block;
  position: absolute;
}

#editor .syncLearning a[data-value]:after
{
  margin-top: -21px;
  margin-left: 10px;
  z-index: 12;
  display: block;
  position: absolute;
  font-size: 11px;
}

#editor .teacherPresence a[data-value="true"]:after, #editor .onlineOrFace2Face a[data-value="true"]:after, #editor .syncLearning a[data-value="true"]:after
{
  content: "\2714";
}

#editor .teacherPresence a[data-value="false"]:after, #editor .onlineOrFace2Face a[data-value="false"]:after
{
  content: "\2716";
}

.timeline-controls:after
{
  content: ' ';
  clear: both;
  position: relative;
  display: block;
  float: none;
  padding-top: -1em;
}

.timeline-controls, .browser-controls
{
  clear: both;
  position: relative;
  display: block;
  /*border: 1px solid white;*/
  /*clear: both;*/
}

.tla.active.well
{
  /*background-color: #fdfdfd;*/
  border-color: #a3a3ff;
  border-width: 2px;
}

.tla .notes
{
  width: 70%;
}

.tla .properties, .tla .minimised.progress
{
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  height: 200px;
  /*border: 1px solid black;*/
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
 }

 .tla .minimised.progress
 {
    /*width: 15em;*/
    margin: 1em 0.4em;
    height: 1.8em;
    /*padding: 0.667em 0.667em;*/
 }

.property-text
{
  font-size: 0.8em;
  padding-top: 0;
  padding-left: 0.4em;
}

.tla .properties
{
  font-size: 0.8em;
}

.tla .properties .progress
{
  overflow: hidden;
  height: 0.9em;
  margin-bottom: 0.4em;
}

.bar.acquisition
{
  /*295D7D*/
  background-color: #67DBF2;
  background-image: -moz-linear-gradient(top, #6ae2fa, #61cde3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6ae2fa), to(#61cde3));
  background-image: -webkit-linear-gradient(top, #6ae2fa, #61cde3);
  background-image: -o-linear-gradient(top, #6ae2fa, #61cde3);
  background-image: linear-gradient(to bottom, #6ae2fa, #61cde3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6ae2fa', endColorstr='#ff61cde3', GradientType=0);
}

.bar.collaboration
{
  /*F7757F*/
  background-color: #FFCD00;
  background-image: -moz-linear-gradient(top, #FFCD00, #FFCD00);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFCD00), to(#FFCD00));
  background-image: -webkit-linear-gradient(top, #FFCD00, #FFCD00);
  background-image: -o-linear-gradient(top, #FFCD00, #FFCD00);
  background-image: linear-gradient(to bottom, #FFCD00, #FFCD00);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffFFCD00', endColorstr='#ffFFCD00', GradientType=0);
}

.bar.discussion
{
  /*98BDC7*/
  background-color: #7AAEEA;
  background-image: -moz-linear-gradient(top, #7AAEEA, #7AAEEA);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7AAEEA), to(#7AAEEA));
  background-image: -webkit-linear-gradient(top, #7AAEEA, #7AAEEA);
  background-image: -o-linear-gradient(top, #7AAEEA, #7AAEEA);
  background-image: linear-gradient(to bottom, #7AAEEA, #7AAEEA);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7AAEEA', endColorstr='#ff7AAEEA', GradientType=0);
}

.bar.inquiry
{
  /*6BAD7D*/
  background-color: #F8807F;
  background-image: -moz-linear-gradient(top, #F8807F, #F8807F);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F8807F), to(#F8807F));
  background-image: -webkit-linear-gradient(top, #F8807F, #F8807F);
  background-image: -o-linear-gradient(top, #F8807F, #F8807F);
  background-image: linear-gradient(to bottom, #F8807F, #F8807F);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffF8807F', endColorstr='#ffF8807F', GradientType=0);
}

.bar.practice
{
  /*FAFAFC*/
  background-color: #BB98DC;
  background-image: -moz-linear-gradient(top, #BB98DC, #BB98DC);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#BB98DC), to(#BB98DC));
  background-image: -webkit-linear-gradient(top, #BB98DC, #BB98DC);
  background-image: -o-linear-gradient(top, #BB98DC, #BB98DC);
  background-image: linear-gradient(to bottom, #BB98DC, #BB98DC);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffBB98DC', endColorstr='#ffBB98DC', GradientType=0);
}

.bar.production
{
  /*F7757F*/
  background-color: #BDEA75;
  background-image: -moz-linear-gradient(top, #BDEA75, #BDEA75);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#BDEA75), to(#BDEA75));
  background-image: -webkit-linear-gradient(top, #BDEA75, #BDEA75);
  background-image: -o-linear-gradient(top, #BDEA75, #BDEA75);
  background-image: linear-gradient(to bottom, #BDEA75, #BDEA75);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffBDEA75', endColorstr='#ffBDEA75', GradientType=0);
}

.bar.online {
  /* #2B5B80 */
  background-color: #BECBDB;
  background-image: -moz-linear-gradient(top, #BECBDB, #BECBDB);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#BECBDB), to(#BECBDB));
  background-image: -webkit-linear-gradient(top, #BECBDB, #BECBDB);
  background-image: -o-linear-gradient(top, #BECBDB, #BECBDB);
  background-image: linear-gradient(to bottom, #BECBDB, #BECBDB);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffBECBDB', endColorstr='#ffBECBDB', GradientType=0);
}

.bar.f2f {
  /* #BECBDB */
  background-color: #2B5B80;
  background-image: -moz-linear-gradient(top, #2B5B80, #2B5B80);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2B5B80), to(#2B5B80));
  background-image: -webkit-linear-gradient(top, #2B5B80, #2B5B80);
  background-image: -o-linear-gradient(top, #2B5B80, #2B5B80);
  background-image: linear-gradient(to bottom, #2B5B80, #2B5B80);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2B5B80', endColorstr='#ff2B5B80', GradientType=0);
}

.bar.teacherPresent {
  /* #73604C */
  background-color: #73604C;
  background-image: -moz-linear-gradient(top, #73604C, #73604C);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#73604C), to(#73604C));
  background-image: -webkit-linear-gradient(top, #73604C, #73604C);
  background-image: -o-linear-gradient(top, #73604C, #73604C);
  background-image: linear-gradient(to bottom, #73604C, #73604C);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff73604C', endColorstr='#ff73604C', GradientType=0);
}

.bar.teacherNotPresent {
  /* #d3c0ac */
  background-color: #d3c0ac;
  background-image: -moz-linear-gradient(top, #d3c0ac, #d3c0ac);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d3c0ac), to(#d3c0ac));
  background-image: -webkit-linear-gradient(top, #d3c0ac, #d3c0ac);
  background-image: -o-linear-gradient(top, #d3c0ac, #d3c0ac);
  background-image: linear-gradient(to bottom, #d3c0ac, #d3c0ac);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd3c0ac', endColorstr='#ffd3c0ac', GradientType=0);
}

.bar.wholeGroup {
  /* #477453 */
  background-color: #477453;
  background-image: -moz-linear-gradient(top, #477453, #477453);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#477453), to(#477453));
  background-image: -webkit-linear-gradient(top, #477453, #477453);
  background-image: -o-linear-gradient(top, #477453, #477453);
  background-image: linear-gradient(to bottom, #477453, #477453);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff477453', endColorstr='#ff477453', GradientType=0);
}

.bar.groupWork {
  /* #6BAD7D */
  background-color: #6BAD7D;
  background-image: -moz-linear-gradient(top, #6BAD7D, #6BAD7D);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6BAD7D), to(#6BAD7D));
  background-image: -webkit-linear-gradient(top, #6BAD7D, #6BAD7D);
  background-image: -o-linear-gradient(top, #6BAD7D, #6BAD7D);
  background-image: linear-gradient(to bottom, #6BAD7D, #6BAD7D);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6BAD7D', endColorstr='#ff6BAD7D', GradientType=0);
}

.bar.individualWork {
  /* #B6D7BF */
  background-color: #B6D7BF;
  background-image: -moz-linear-gradient(top, #B6D7BF, #B6D7BF);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B6D7BF), to(#B6D7BF));
  background-image: -webkit-linear-gradient(top, #B6D7BF, #B6D7BF);
  background-image: -o-linear-gradient(top, #B6D7BF, #B6D7BF);
  background-image: linear-gradient(to bottom, #B6D7BF, #B6D7BF);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffB6D7BF', endColorstr='#ffB6D7BF', GradientType=0);
}

.bar.synchronous {
  background-color: #B07D87;
  background-image: -moz-linear-gradient(top, #B07D87, #B07D87);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#B07D87), to(#B07D87));
  background-image: -webkit-linear-gradient(top, #B07D87, #B07D87);
  background-image: -o-linear-gradient(top, #B07D87, #B07D87);
  background-image: linear-gradient(to bottom, #B07D87, #B07D87);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffB07D87', endColorstr='#ffB07D87', GradientType=0);
}

.bar.asynchronous {
  background-color: #E0CCD0;
  background-image: -moz-linear-gradient(top, #E0CCD0, #E0CCD0);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E0CCD0), to(#E0CCD0));
  background-image: -webkit-linear-gradient(top, #E0CCD0, #E0CCD0);
  background-image: -o-linear-gradient(top, #E0CCD0, #E0CCD0);
  background-image: linear-gradient(to bottom, #E0CCD0, #E0CCD0);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffE0CCD0', endColorstr='#ffE0CCD0', GradientType=0);
}

.tla .minimised.progress, .tla.inactive .properties
{
  display: none;
  border: 0;
}

.tla.inactive .minimised.progress, .tla.active .properties
{
  display: block;
}

.teachingMethod .group img
{
  height: 16px;
  width: 16px;
  margin: 4px;
}

.session.listview .tla div.properties
{
  display: none;
}

.session.blockview .tla canvas.properties, .session.blockview .tla.active canvas.properties, .session.blockview .tla.inactive canvas.properties
{
  display: none;
}

.session.blockview .timeline
{
  padding: 0.1em 0 0.2em 0;
  /*border: 1px solid black;*/
  height: 20em;
  max-height:21em;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  width: 100%;
  /*background-color: #ddd;*/
  width: 100%;
  /*background-color: rgb(217, 217, 217); */
  z-index: 15;
  display: block;
  overflow: scroll;
}

.session.blockview .tla
{
  position: relative;
  float: left;
  border: 1px solid black;
  height: 19em;
  /*width: 14em; for simplicity assume 1em=14px*/
  width: 196px;
  overflow: hidden;
  clear: right;
  background-color: #eee;
  padding: 0.5em 0.4em;
  margin-bottom: 0.5em;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  transition: width 0.5s;
}

/*.session.blockview .tla.active .properties, .session.blockview .tla.inactive .properties
{
  display: block;
  position: absolute;
  top:5em;
  left: 0.4em;
  width: 90%;
}*/

.session.blockview .tla .properties
{
  display: block;
  position: absolute;
  top: 4em;
  left: 3%;
  width: 92%;
}

.session.blockview .tla.inactive .properties
{
  display: none;
}

.session.blockview .tla.inactive .minimised.progress
{
  display: block;
  position: absolute;
  left: 1%;
  top: 3em;
  width: 92%;
}

.property-value
{
  display: inline;
  position: absolute;
  right: 0;
}

.session.blockview .tla .title
{
  font-weight: normal;
  font-size: 0.8em;
  /*outline: 1px solid blue;*/
}

.session.listview .tla .title
{
  width: 50em;
  display: inline-block;
}

.session.listview .notes.well
{
  position: relative;
  top: 0;
  display: block;
  float: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-height: inherit;
}

.session.blockview .tla .name
{
  font-size: 0.667em;
}

.session.blockview .tla.active .title
{
  font-weight: bold;
}

.session.blockview .tla .minimised.progress, .session.blockview .tla .duration, .session.blockview .tla .groupSize, .session.blockview .tla .notes
{
  display: none;
}

.timeline-properties
{
  position: relative;
  display: block;
  clear: both;
  height: 10em;
  margin-top: 2em;
}

.tlas-presentation
{
  position: relative;
  display: block;
  clear: both;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #efefef;
  padding: 1em;
}

.session.listview .timeline-properties
{
  display: none;
}

.session
{
  overflow: hidden;
}

.timeline-properties.hidden
{
  display: none;
}

.timeline-properties .title
{
  font-size: 1.2em;
  font-weight: bold;
}

.timeline-properties .durationHolder, .timeline-properties .groupSizeHolder
{
  position: absolute;
  font-size: 1em;
  right: 1em;
  top: 0;
}

.timeline-properties .durationHolder
{
  right: 4em;
}

.timeline-properties .notes
{
  margin-top: 1em;
  margin-right: 8em;
}

.blockview .tla .title
{
  display: block;
  white-space:nowrap;
  overflow:hidden;
  overflow-y: auto;
  text-overflow: ellipsis;
}

.tbltype, .tblDesignTitle, .tblControls, .tblOwner
{
  position: relative;
  display: block;
  float: left;
  line-height: 2em;
}

.tbltype
{
  width: 3.2em;
  clear: left;
}

.tblDesignTitle
{
  width: 60%;
}

.tblDesignTitle a
{
  color: #333;
}

.tblControls
{
  width: 6em;
}

.tblControls a
{
  text-decoration: none;
  color: #000;
}

.tblOwner
{
  width: 20%;
}

.header .tbltype, .header .tblDesignTitle, .header .tblControls, .header .tblOwner
{
  font-weight: bold;
}

a.icon-module, a.icon-block, a.icon-session
{
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  *margin-right: .3em;
  margin-left: 0.75em;
  line-height: 22px;
  vertical-align: text-top;
  background-image: url("../img/ppc_icons.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}

a.icon-module {
  background-position: 0      0;
}

a.icon-block {
  background-position: 0 -24px;
}

a.icon-session {
  background-position: 0 -48px;
}

#browser:after
{
  content:'';
  display:block;
  clear: both;
}

ul.dropdown-menu.active
{
  display: block;
  top: 80%;
}

#helperIframe
{
  display: none;
  /*outline: 1px solid red;*/
}

.session.blockview .timeline-viewer
{
  width: 100%;
  height: 21.4em;
  overflow: hidden;
  background-color: rgb(217, 217, 217);
}

#editor .session.blockview .timeline-viewer {
  overflow-x: scroll;
}

.session.blockview .timeline
{
  position: relative;
  overflow: hidden;
  display: flex;
  overflow-x: auto;
}

#editor .session.blockview .timeline
{
  overflow-x: hidden;
}

.session.listview .timeline
{
  position: relative;
  overflow: hidden;
  width: 100%;
}

.dl-horizontal.column
{
  float: left;
  width: 35%;
  /*outline: 1px dotted blue;*/
}

.last+*
{
  clear: both;
}

/*.usersettings .icon-cog
{
  font-size: 1.3em;
}*/

.help-inline.hidden
{
  display: none;
}

.help-inline.text-error {
  color: #b94a48;
}

#listing
{
  float: left;
  width: 100%;
}

.sla .duration:before, .sla .duration:after
{
  content:'';
}


.sla
{
  position: relative;
  padding-left: 1em;
  margin-right: 210px;
  width: 80%;
  /*outline: 1px dashed purple;*/
}

.sla.Read, .sla.Read.Watch.Listen
{
  border-left: 1em solid #67DBF2;
}

.sla.Collaborate
{
  border-left: 1em solid #FFCD00;
}

.sla.Investigate
{
  border-left: 1em solid #F8807F;
}

.sla.Discuss
{
  border-left: 1em solid #7AAEEA;
}

.sla.Practice
{
  border-left: 1em solid #BB98DC;
}

.sla.Produce
{
  border-left: 1em solid #BDEA75;
}


.sla .type, .sla .durationHolder, .sla .groupsizeHolder, .sla .duration, .sla .groupsize, .sla i
{
  position: relative;
  float: left;
  /*outline: 1px solid blue;*/
}

.sla .teacherPresenceHolder, .sla .attachments, .sla .onlineHolder, .sla .syncHolder
{
  position: relative;
  margin-left: 1em;
}

#ppcviewer .sla .syncActivityHolder, #ppcviewer .sla .attachments {
  padding: 2px 8px;
}
/* .sla .teacherPresence, .sla .onlineOrFace2Face
{
  font-size: 1.5em;
} */


/* .sla .duration, .sla .groupsize, .sla .attachmentNo
{
  padding-left: 1.2em;

} */

.sla .description
{
  margin-left: 14em;
  width: 50%;
  margin-right: 230px;

  /*outline: 1px solid #eaeaea;*/
}

#ppcviewer .sla .description
{
  width: 100%;
}

#ppcviewer .sla:after, #editor .sla:after
{
  content: '';
  display: block;
  clear: both;
}

.sla i
{
  position: absolute;
  /* bottom: 0.3em; */
  width: 1.2em;
}

.sla .notes
{
  clear: both;
}

#ppcviewer .listview .tla, #editor .listview .tla
{
  min-height: 4em;
  transition: height 0.5s;
  -webkit-transition: height 0.5s; /* Safari */
}

#ppcviewer .listview .tla.inactive, #editor .listview .tla.inactive
{
  /*height: 2.1em;*/
  transition: height 0.5s;
  -webkit-transition: height 0.5s; /* Safari */
}

#ppcviewer .sla:nth-child(even), #editor .sla:nth-child(even)
{
  background-color: #eee;
}

#ppcviewer canvas.sessionpie, #editor canvas.sessionpie, #editor canvas.cvssessionpie
{
  position: absolute;
  right: 4px;
  top: 4px;
}

.sessionInfo
{
  position: relative;
  min-height: 230px;
}

.tla .resources.well, .tla .notes.well
{
  float: left;
}

#ppcviewer .tla .resources.well
{
  float: none;
  padding: 0;
  border: 0;
  box-shadow: none;
  background-color: transparent;
}

/*#ppcviewer .tla .resources, #editor .tla .resources
{
  width: 30%;
  height: 5em;
}*/

#statusMsg.alert
{
  position: fixed;
  top: 3em;
  right: 0;
  opacity: 0.75;
  z-index: 42;
}

#editor .session.blockview .timeline
{
  height: 39em;
  max-height:39em;
}

#ppcviewer .session.blockview .timeline {
    height: 40em;
    max-height: 40em;
}

#ppcviewer .session.blockview .timeline-viewer, #editor .session.blockview .timeline-viewer
{
  height: 40em;
}

#ppcviewer .session.blockview .tla, #editor .session.blockview .tla
{
  padding-top: 25px;/* solid #eff5cc;*/
  min-width: 410px;
  width: 410px;
  height: 36.4em;
  /*outline: 1px solid blue;*/
}

#ppcviewer .session.blockview .tla .title, #editor .session.blockview .tla .title textarea
{
  font-size: 1em;
  height: 50px;
  background-color: #fff;
  white-space: normal;
}

#ppcviewer .session.blockview .tla .title
{
  border: 1px solid #c9cbcc;
  border-top: 1px solid #6d6f70;
}

#ppcviewer div.attachments span.btnViewResources, #ppcviewer div.resources span.btnViewResources
{
    cursor: pointer;
/*    border: 1px solid #eee;
    border-radius: 4px;*/
/*    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(42, 42, 42, 0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(42, 42, 42, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(42, 42, 42, 0.6);*/
}

#editor .session.blockview .tla .title textarea
{
  width: 96%;
  margin-bottom: 0;
}

#editor .session.blockview .sla .description textarea
{
  padding: 4px 6px;
  font-size: 0.8em;
  width: 100%;
}

#editor .sessionInfo select {
  font-size: 0.8em;
}

#ppcviewer .session.blockview .tla .minimised.progress, #editor .session.blockview .tla .minimised.progress
{
  position: absolute;
  z-index: 10;
  top: 2px;
  /*bottom: 1.667em;*/
  margin-top: 0px;
  /*bottom: -100em;*/
  margin-left: 2px;
  height: 20px;
  width: 97%;
  display: block;
}

#editor .session.blockview .tla .minimised.progress
{
  z-index: 1;
  width: 94%;
  background-color: transparent;
}

#editor .session.blockview .tla .minimised.progress .bar
{
  -webkit-transition: width 0.25s; /* Safari */
  transition: width 0.25s;
}

#ppcviewer .sla *,
#editor .session.blockview .tla .sla .column,
#editor .session.blockview .tla .sla .column.two,
#editor .session.blockview .tla .sla .column.three,
#editor .sla *
{
  position: relative;
  float: none;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

#ppcviewer .session.blockview .tla .sla .durationHolder, #ppcviewer .session.blockview .tla .sla .groupsizeHolder
{
  padding-top: 4px;
}

#editor .session.blockview .sla .type select
{
  /*width: 94%;*/
  padding-left: 1px; /*0.3em;*/
  height: 1.6em;
  font-size: 10px;
  height: 22px;
}

#editor .session.blockview .sla .type select option
{
  padding-left: 4px;
}

/*#editor .session.blockview .sla .type select option[value="Acq"]
{
  background-color: #67DBF2;
}

#editor .session.blockview .sla .type select option[value="Col"]
{
   background-color: #FFCD00;
}

#editor .session.blockview .sla .type select option[value="Inq"]
{
  background-color: #F8807F;
}

#editor .session.blockview .sla .type select option[value="Dis"]
{
  background-color: #7AAEEA;
}

#editor .session.blockview .sla .type select option[value="Pra"]
{
  background-color: #BB98DC;
}

#editor .session.blockview .sla .type select option[value="Pro"]
{
  background-color: #BDEA75;
}*/

.session .sla, .slas li
{
  list-style-type: none;
  display: block;
}

#ppcviewer .session.blockview .sla, #editor .session.blockview .sla
{
  padding-bottom: 0.2em;
  padding-left: 0.3em;
  /*outline: 1px solid red;*/
  width: 92%;
  margin-top: 0.4em;
}

#ppcviewer .session.blockview .sla {
  width: 95%;
}

#editor .session.blockview .sla
{
  width: 98%;
  /*border-left: 10px solid #dd0;*/
  border-left-width: 10px;
}

#editor .sla .column {
  display: inline-block;
}

#ppcviewer .sla .type, #ppcviewer .sla .durationHolder, #ppcviewer .sla .groupsizeHolder,
#ppcviewer .sla .teacherPresenceHolder, #ppcviewer .sla .onlineHolder, #ppcviewer .sla .syncHolder
{
  /* float: left; */
  display: block;
  width: 3em;
  /* clear: none; */
  /*outline: 1px solid lime;*/
}

#editor .sla .groupsizeHolder
{
  position: relative;
}

#ppcviewer .sla .type
{
  width: 9em;
  padding-top: 4px;
}

#editor .sla .type
{
  min-width: 7em;
  max-width: 8em;
}

#ppcviewer .sla .durationHolder, #ppcviewer .sla .groupsizeHolder, #editor .sla .durationHolder
{
  width: 3.5em;
}

#ppcviewer .sla .duration, /*#ppcviewer .tla .notes, #ppcviewer .tla .resources,*/
#editor .sla .duration, #editor .tla .resources, #editor .sla .groupsize
{
  position: relative;
  display: inline;
}

#ppcviewer .sla .description, #editor .sla .description
{
  clear: left;
}

#ppcviewer .session.blockview .tla, #editor .session.blockview .tla
{
  position: relative;
  /* margin-bottom: 20em; */
  /* outline: 3px solid red; */
}

#editor .session.listview .tla.inactive .notes, #editor .session.listview .tla.inactive .resources
{
  display: none;
}

/*#ppcviewer .tla .resources/*, #editor .session.blockview .tla .resources
{
  position: absolute;
  bottom: 22%;
  padding: 0;
  width: 94%;
  max-height: 3%;
  overflow-y: auto;
}*/

#editor .session.blockview .sessionBar .tlaDurationHolder
{
  padding-left: 8px;
  font-size: 12px;
  /* width: 5%;
  max-width: 20px; */
  float: left;
  position: relative;
  height: 2em;
}

#designerPage.el .session.blockview .sessionBar .tlaDurationHolder {
  padding-left: 4px;
}

#editor .session.blockview .sessionBar .resources
{
  margin: 0;
  float: right;
}

#editor .session.blockview .sessionBar .resources .input-prepend.input-append
{
  margin-bottom: 0;
}

#editor .session.blockview .sessionBar>*
{
  display: block;
  float: left;
}

#editor .session.blockview .sessionBar .tlaDurationHolder .add-on, #editor .session.blockview .sessionBar .tlaDurationHolder input
{
  position: relative;
  font-size: 14px;
  line-height: 14px;
  height: 14px;
  width: 14px;
}

#editor .session.blockview .sessionBar .tlaDurationHolder input
{
  display: inline;
  font-size: 12px;
  width: 2em;
}

/*#editor .tla .resources
{
  font-size: 12.5px;
  height: 2em;
  bottom: 10em;
  max-height: 2em;
  padding-left: 14px;
  outline: 1px solid maroon;
  overflow: hidden;
  width: auto;
  padding-right: 5px;
  right: 0;

}*/

#editor .session.blockview .tla .notes textarea
{
  width: 96%;
}

#ppcviewer .session.blockview .slas, #editor .session.blockview .slas
{
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: 0;
  transition: max-height 0.3s ease;
}

#ppcviewer .session.blockview .slas, #editor .session.blockview div.tla:not(.notes-hidden) .slas
{
    height: 64%;
}


#ppcviewer .session.blockview .tla .resources ul, #editor .session.blockview .tla .resources ul
{
  display: none;
}

#ppcviewer .ui-state-highlight, #editor .ui-state-highlight
{
  height: 7em;
  line-height: 1.2em;
  border: 1px dotted black;
  background-color: rgba(255,255,210, 0.75);
}

#ppcviewer .session.blockview .ui-state-highlight-tla, #editor .session.blockview .ui-state-highlight-tla
{
  height: 40em;
  line-height: 0.2em;
  border: 1px dotted black;
  width: 385px;
  background-color: rgba(255,255,210, 0.75);
  display: block;
  float: left;
}
/*#ppcviewer .ui-state-highlight-tla { height: 39em; width: 10px; outline: 1px solid red;}*/

#ppcviewer ul.slas, #editor ul.slas, #editor ul.slas, #editor ul.slas
{
  min-height: 2em;
  margin-left: 0;
}

#editor .dl-horizontal input, #editor .dl-horizontal .input-append .add-on
{
  font-size: 11px;
  line-height: 12px;
  height: 14px;

}

#editor .dl-horizontal textarea
{
  height: 5em;
  font-size: 75%;
}

#editor span.add-on.icon-time,
#editor span.add-on.icon-group,
#editor span.add-on.icon-plus,
#editor span.add-on.icon-paper-clip,
#editor .session.blockview .resouces span.add-on.icon-plus,
#editor .session.blockview .resources span.add-on.icon-paper-clip,
#editor .session.blockview .deleteBtn
{
  width: 1.5em;
}

#editor .session.blockview .resources span.add-on.icon-plus,
#editor .session.blockview .resources span.add-on.icon-paper-clip,
#editor .session.blockview input.attachmentNo,
#editor .session.blockview .deleteBtn
{
  /*outline: 1px solid blue;*/
  line-height: 20px;
  padding: 0 2px;
}

#editor .sla input.duration, #editor .sla .groupsizeHolder input.groupsize, #editor .session.blockview input.attachmentNo
{
  width: 2.2em;
  text-align: right;
  padding-right: 5px;
  font-size: 11px;
}

#editor .session.blockview input.attachmentNo
{
  width: 1.4em;
}

#editor .session.blockview .sla .column * {
  display: inline-block;
  vertical-align: top;
}

#editor .session.blockview .sla .teacherPresenceHolder a.btn.icon-user, #editor .session.blockview .sla .onlineHolder a.btn.icon-globe, #editor .session.blockview .sla .syncHolder a.btn
{
  display: inline-block;
  width: 2em;
  padding-top: 3px;
  text-align: center;
  height: 17px;
  margin-bottom: 1px;
  vertical-align: top;
}

#editor .session.blockview .sla .attachments .btn.btnViewResources.icon-paper-clip, #editor .session.blockview .sla .attachments .btn.btnAttachResource.icon-plus
{
  display: inline-block;
  width: 28px;
  height: 22px;
  font-size: 16px;
  padding-top: 2px;
  vertical-align: top;
  box-sizing: border-box;
}

.badge.badge-transparent
{
  top: -4px;
  background-color: inherit;
  color: #333;
  text-shadow: none;
  font-family: "Lucida Grande", "Open Sans", "Lucida Sans", sans-serif;
}

#editor .session.blockview .sla .description
{
  width: 94%;
}

#editor .session.blockview .sla .teacherPresence a.btn
{
  margin-right: 0
}

#editor .session.blockview .tla .addSLA .btn
{
  font-size: 12px;
  line-height: 14px;
}

#editor .session.blockview .addSLA
{
  display: inline;
}

#editor .draghandle
{
  position: absolute;
  /*outline: 1px solid red;*/
  margin-left: -12px;
  margin-top: 2px;
  width: 5px;
  height: 20px;
  height: 95%;
  cursor: move;
  background-image: url("../img/grippy_large.png");
  /*background-image: url("../img/draghandle.png");*/
  background-repeat: no-repeat;
  /*opacity: 0.75;*/
}

#editor .tla>.draghandle
{
  z-index: 10;
  /*outline: 1px solid blue;*/
  margin-left: 4px;
  margin-top: -20px;
  height: 16px;
  width: 8px;
}

#editor .draghelper .deleteBtn
{
  display: none;
}

.draghelper
{
  opacity: 0.95;
}

#editor .session .tla .deleteBtn
{
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  width: 16px;
  z-index: 2;
}

#editor .session.blockview .tla .sla .deleteBtn
{
  position: relative;
  display: inline-block;
  margin-left: -4px;
  /* margin-right: 5px;
  width: 16px;
  height: 20px;
  padding-right: 4px; 
  border: 1px solid pink; */
}

#editor .session.blockview .tla .deleteBtn button
{
  padding: 0;
  margin: 0;
  /*padding-top: 3px;*/
  margin: 2px 0;
  font-size: 12px;
  height: 12px;
  padding: 0 1px;
  margin-top: -8px;
/*  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;*/
}

#editor .session.blockview .tla .sla .deleteBtn button
{
  height: 16px;
  margin-top: 0px;
  max-width: 16px;
}

#editor .session .tla .deleteBtn .icon-remove
{
  vertical-align: top;
  display: inherit;
  line-height: 10px;
}

#editor .session .tla .sla .deleteBtn .icon-remove
{
  /* display: inline; */
  line-height: 15px;
}

.ui-dialog
{
  z-index: 1000;
}

.ui-sortable-helper
{
  -webkit-box-shadow: inset 0 20px 20px rgba(0, 0, 0, 0.075), 0 0 42px rgba(42, 42, 42, 0.6);
  -moz-box-shadow: inset 0 20px 20px rgba(0, 0, 0, 0.075), 0 0 42px rgba(42, 42, 42, 0.6);
  box-shadow: inset 0 20px 20px rgba(0, 0, 0, 0.075), 0 0 42px rgba(42, 42, 42, 0.6);
}

#addTLAMenu.active
{
  /*position: relative;*/
  display: block;
}

#login-form .controls button
{
  float: right;
}

#register
{
    /*clear: both;*/
    display: block;
}

#forgotForm fieldset
{
  margin-bottom: 4em;
}

.icon-info-sign
{
  color: #0099ff;
}

#progressbar .ui-progressbar-value
{
  background-color: #ccc;
}

/*.progress-label {
  position: absolute;
  left: 50%;
  top: 4px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
}*/

a.disabled i
{
  color: #aaa;
}

#editor .nav.nav-tabs li
{
  font-style: inherit;
}
#editor .nav.nav-tabs li.changed
{
  font-style: italic;
}

#editor dt.outcomes
{
  position: relative;
  padding-bottom: 1.2em;
}

#editor dd.outcomes
{
  /*outline: 1px solid blue;*/
  max-height: 12em;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #eeeeee;
}

#editor .btnAddOutcome
{
  position: absolute;
  padding: 0.2em;
  margin: 0;
  font-size: 0.75em;
  line-height: 1.2em;
  right: 0;
  bottom: 0;
}

#editor dd.outcomes ul
{
  margin: 0;
  padding: 0;
}

#editor dd.outcomes li
{
  list-style: none;
  position: relative;
  padding-top: 0.3em;
  overflow-y: auto;
  overflow-x: hidden;
}

#editor dd.outcomes li .btnClose
{
    position: absolute;
    display: block;
    font-size: 10px;
    line-height: 10px;
    width: 12px;
    padding: 0;
    right: 5px;
    top: 15px;
    z-index: 2;
}

#editor dd.outcomes .verb
{
    position: absolute;
    margin-left: 0.6em;
    font-size: 0.8em;
    /*outline: 1px solid red;*/
    z-index: 1;
    background-color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid white;
}

#editor dd.outcomes textarea
{
    position: relative;
    margin-top: 0.8em;
    padding-top: 1em;
    margin-left: 0.2em;
    margin-right: 0.2em;
    height: 1em;
    overflow: hidden;
}

#editor dd.outcomes textarea:focus
{
    left: auto;
    position: relative;
    margin-top: 0.8em;
    padding-top: 1em;
    width: 92%;
    margin-left: 0.2em;
    margin-right: 0.2em;
    height: 4em;
    display: block;
}

.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close
{
  /*display: none;*/
  right: 0.6em;
}

.oneDesign:hover
{
  background-color: #eeeeee;
}

div.oneDesign
{
  display: block;
  float: left;
  height: auto;
  width: 100%;
  clear: left;
}

#ppcviewer .sla div.icon-stack [class^="icon-"]
{
  position: absolute;
}

#ppcviewer .sla div.icon-stack .icon-stack-base
{
  font-size: 1.8em;
}

.popupError:before
{
  font-family: FontAwesome;
  content: '\f071';
  display: block;
  position: absolute;
  top: 0.5em;
  left: 0.2em;
  font-size: 3.8em;
  color: #dd0000;
}

.popupError
{
  padding-left: 4em;
}

#floatingError
{
    position: absolute;
    bottom: 0;
    left: 0;
}

#editor dd.outcomes .outcomeListing
{
    min-height: 2em;
}

#editor dd.outcomes .outcomeListing span
{
    color: #777777;
    font-size: 0.9em;
}


#viewerPage dd.outcomes ul.hidden
{
    height: 0;
    margin: 0;
    padding: 0;
}

#viewerPage dd.outcomes ul
{
    margin-left: 0;
    list-style-type: none;
    display: block;
}

#viewerPage dd li.outcome span.verb
{
    font-weight: bold;
}

#viewerPage dd li.outcome span.verb:after
{
    content: ': ';
    position: relative;
    display: inline;
}

#viewerPage .tla .notes
{
  display: block;
  float: none;
  width: 98.5%;
  background-color: transparent;
  border: 0px;
  box-shadow: none;
  padding: 0;
  overflow-y: auto;
}

#viewerPage .session.listview .tla .notes {
    columns: 200px;
}

#viewerPage .blockview .tla .notes
{
  height: 6em;
}

#browser th a
{
    color: #000;
}
#browser table
{
    border-collapse: collapse;
    border: 1px solid black;
}

#browser td, #browser th {
  border: 1px solid #999;
  padding: 0.5rem;
  text-align: left;
}

#aag #sidebar
{
  min-height: 100%;
  z-index: 2;
  position: absolute;
  width: 30em;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  text-shadow: 0 1px rgba(255,255,255,0.3);
  background: #e5eaf4;
}

#browserPage .nav.usersettings .onlyShowBelow
{
  display: none;
}

#browserPage .usersettings.belowFold .onlyShowBelow
{
  display: inline-block;
}

.btnAttachResource, .btnViewResources
{
  cursor: pointer;
}

.modal-backdrop
{
  background-color: #fff;
}

.tinybtn
{
  font-size: 10px;
  line-height: 10px;
  width: 12px;
  padding: 0;
}

.btnIcon
{
  /*font-size: 10px;*/
  /*line-height: 10px;*/
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 0.5em;
  background-color: transparent;
}

a.btnIcon
{
  text-decoration: none;
  color: #444;
}

a.btnIcon:hover
{
  background-color: #eee;
  font-weight: bold;
}

a.btn-danger:link, a.btn-danger:visited
{
  background-color: transparent;
  background-image: none;
}

a.btn-danger:hover
{
  background-color: #da4f49;
}

ul.listOfResources
{
  list-style-type: none;
  margin-left: 0.5em;
}

.lastModified
{
  color: #aaa;
  font-size: 0.75em;
  padding-left: 0.75em;
}

#editor #zoomIn
{
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  top: -4px;
  left: -1px;
  z-index: 10;
}

#editor #zoomIn i
{
  font-size: 10px;
  cursor: pointer;
  color: #424242;
}

#zoomIn.hidden
{
  display: none;
}

form.zoomIn
{
  height: 90%;
}

form.zoomIn #zoomInComponent
{
  display: block;
  width: 95%;
  height: 95%;
}

/* Many thanks to Lea Verou http://lea.verou.me/css3patterns/#diagonal-stripes */
body.next .navbar-inner .navbar-inner a.brand
{
  background-color: black;
  background-image: url("../img/warningStripe.png");
  background-repeat: repeat-x;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,0,1) 35px, rgba(255,255,0,1) 70px);
}

/* Cookie notification banner */
body.cookie-banner-on {
    padding-bottom: 6em;
}
.cb-wrapper {
    box-sizing: border-box;
    background-color: #000;
    color: #fff;
    padding: 1em;
    position: fixed;
    z-index: 1000;
}
.cb-bottom {
    bottom: 0;
    left: 0;
    right: 0;
}
.cb-wrapper .cb-consent {
    float: right;
}
.cb-wrapper .cb-message {
    margin: 0;
    line-height: 2em;
}

/* Loader for ajax pagination (and other things) */
@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}
.categories, .designs {
    position: relative;
}
.categories {
    overflow: hidden;
}
.loading-mask {
    min-height: 3.5em;
}
.loading-mask:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 5;
}

.loading-mask:after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 1em;
    left: 50%;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    border: 2px solid #ddd;
    border-top-color: #0088cc;
    animation: spinner .6s linear infinite;
    z-index: 10;
}

/* Scrollbar fix... mainly for Firefox
 * Ensures scrollbar is displayed, whether needed or not */
html {
    overflow-y: scroll;
}

#rightside
 {
   /* padding: 0;
   margin: 0;
   display: inline-block;
   width: 95%; */
   /* border: 1px solid blue; */
   transition: width 0.3s ease;
 }

 /* Full screen functionality in designer */
  #designerPage.fullscreen div.container {
    width: 95%;
    min-width: 95%;
    margin-right: 0px;
  }

  #designerPage.fullscreen #leftside
  {
    display: none;
  }

  #designerPage.fullscreen #rightside ul.nav.nav-tabs
  {
    display: none;
  }

  /* #designerPage.fullscreen #rightside .sessionInfo
  {
    transition: height 0.3s ease;
  } */

  #designerPage.fullscreen #rightside .dl-horizontal.column
  {
    height: 0;
    transition: height 0.3s ease;
  }

  #designerPage.fullscreen #rightside
  {
    width: 95%;
  }

  #designerPage.fullscreen #rightside div.timeline-controls
  {
    width: 100%;
  }

  #designerPage.fullscreen #rightside div.sessionInfo{
    /* max-height: 40em; */
    opacity: 0;
    transition: visibility 0s linear, opacity 0.1s linear;
    visibility: hidden;
  }

  #designerPage.fullscreen #rightside div.sessionInfo{
    min-height: 0;
  }

  #designerPage #rightside div.sessionInfo{
    opacity: 1;
    transition: opacity 0.3s linear;
  }
  #designerPage #rightside div.global.progress, 
  #designerPage #rightside div.onlinef2f, 
  #designerPage #rightside div.teacherPresence, 
  #designerPage #rightside div.wgichart,
  #designerPage #rightside div.syncChart
  {
    display: none;
  }

  #designerPage.fullscreen #rightside div.maximisedCharts {
    display: flex;
    justify-content: space-between;
  }

  #designerPage.fullscreen #rightside div.maximisedCharts div.progress {
    display: inline-block;
    height: 40px;
    margin: 0 1em 9px 0;
  }

  #designerPage.fullscreen #rightside div.maximisedCharts div.global.progress
  {
    width: 435px;
    margin-right: 0;
  }

  #designerPage.fullscreen #rightside div.onlinef2f.progress {
    width: 100px;
  }

  #designerPage.fullscreen #rightside div.teacherPresence.progress {
    width: 100px;
  }

  #designerPage.fullscreen #rightside div.syncChart.progress {
    width: 100px;
  }

  #designerPage.fullscreen #rightside div.wgichart.progress {
    width: 200px;
  }

  #designerPage.fullscreen #editor .session.blockview
  {
    margin-top: -40px;
  }

  #designerPage.fullscreen #editor .session.blockview .timeline-viewer
  {
    height: 80vh;
  }

  #designerPage.fullscreen #editor .session.blockview .timeline
  {
    height: 75vh;
    max-height: 75vh;
  }

  #designerPage.fullscreen #editor .session.blockview .tla
  {
    height: 74vh;
    /* width: 450px; */
  }


#viewerPage .dl-horizontal dt, #designerPage .dl-horizontal dt {
  width: 162px;
}

/*
 * Validation in designer
 */
 #editor span.add-on.error
 {
  background-color: #f2dede;
  color: #b94a48;
 }

 /*
  * Width fix for hours and minutes in session properties
  */
  #editor .dl-horizontal input.twoem
  {
    width: 2em;
  }

  /*
   * Button notes
   */
  #editor .tla .notes button.btnNotes
  {
    padding-top: 0;
    padding-bottom: 0;
  }

  #editor .session.blockview .tla .notes textarea {
    transition: height 0.3s ease;
    font-size: 0.8em;
    height: 7em;
  }

  #editor .session.blockview .tla.notes-hidden .notes textarea {
    /* transition: height 0.3s ease; */
    height: 0;
    /* visibility: hidden; */
    /* margin: 10px; */
  }

  #editor .session.blockview .tla .tlasouth {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 9em;
    transition: height 0.3s ease;
    z-index: 20;
  }

  #editor .session.blockview .tla.notes-hidden .tlasouth {
    height: 2.7em;
    transition: height 0.3s ease;
  }

  #designerPage.fullscreen #editor .session.blockview .tla .tlasouth
  {
    bottom: 10px;
    /* transition: height 0.3s ease, visibility 0.3s ease; */
  }

  #editor .session.blockview .tla .tlasouth .notes, #editor .session.blockview .tla .tlasouth .sessionBar {
    position: relative;
    display: block;
    width: 97%;
    /* border: 1px solid red; */
  }

  #editor .session.blockview .sessionBar
  {
    display: block;
    height: 1.8em;
    /* position: absolute;
    bottom: 22%;
    padding: 0;
    width: 94%; */
    /*max-height: 22px;
    overflow-y: none;*/
    /* margin: 4px 0; */
    /*outline: 2px solid red;*/
  }

  #editor .tla .tlasouth .notes
  {
    width: 94%;
  }

#editor .tla .notes
{
  /* bottom: 0;
  width: 91%; */
  margin-left: 0;
}

#editor .tla .tlasouth .notesbutton {
  padding-left: 8px;
}

#designerPage.el .tla .tlasouth .notesbutton {
  padding-left: 4px;
}

#editor .tla .tlasouth .notesbutton a.btnNotes {
  font-size: 12px;
  line-height: 14px;
}

#editor div.tla.notes-hidden .slas {
  max-height: 79%;
  transition: max-height 0.3s ease;
}

#editor .tlasouth div.resources .btnViewResources {
  padding: 4px;
  display: inline-block;
  width: 28px;
  height: 24px;
  font-size: 16px;
  /* padding-top: 2px; */
  vertical-align: top;
  box-sizing: border-box;
  padding-bottom: 4px;
}

#editor .tlasouth div.resources .btnViewResources .attachmentNo { 
  top: -7px;
  margin-left: -9px;
  background-color: transparent;
}

#editor .tlasouth div.resources .btn.icon-plus.btnAttachResource.tlaResources {
  padding: 5px;
  vertical-align: top;
  padding-bottom: 3px;
  margin-top: 0;
  display: inline-block;
  padding-top: 4px;
}

#designerPage.fullscreen #editor div.tla.notes-hidden .slas {
  max-height: 82%;
  transition: max-height 0.3s ease;
}

#designerPage.fullscreen #editor div.tla .slas {
  max-height: 66%;
  transition: max-height 0.3s ease;
}

span.add-on.icon-group.classSize, .groupsizeHolder.wholeClass i.icon-group {
  color: #477453;
}

#browserPage li.searchIPS>a.btnSearchIPS {
  display: inline-block;
  margin-left: -45px;
  transition: margin 0.5s ease;
  z-index: 9999;
}

#browserPage li.searchIPS a.notVisible {
  display: inline-block;
  margin-left: 0px;
  transition: margin 0.5s ease;
}

#browserPage li.searchIPS div.input-prepend {
  margin-bottom: 2px;
  margin-top: 4px;
  display: inline-block;
}

#browserPage li.searchIPS input {
  margin-bottom: 4px;
  transition: width 0.5s ease;
}

#browserPage li.searchIPS input.hidden {
  width: 0;
  visibility: hidden;
  transition: width 0.5s ease, visibility 0.1s ease;
}

#browserPage li.searchIPS #btnScopes {
  margin-bottom: 8px;
  margin-right: -4px;
  height: 30px;
  padding: 0 4px;
}

#browserPage li.searchIPS .btnScopesGroup>ul.dropdown-menu {
    margin-top: -6px;
}

#browserPage li.searchIPS .btnScopesGroup>ul.dropdown-menu>li.active {
    font-weight: bold;
}

#browserPage li.searchIPS .btnScopesGroup>ul.dropdown-menu>li.active>a {
    font-weight: inherit;
    color: #fff;
}

#browserPage img.iconScope {
  width: 18px;
  height: 18px;
}

.p-1 {
  padding: 0.25rem !important;
}

@media (min-width: 1024px) {
  .container, .navbar .container {
    width: 1000px;
  }
}

@media (max-width: 1023px) {
  .dl-horizontal dt {
    float: none;
    width: auto;
    clear: none;
    text-align: left;
  }
  
  .dl-horizontal dd {
    margin-left: 0;
  }

}

.flexrow {
  display: flex;
}

.flexrow>div {
  flex-grow: 1;
  flex-wrap: nowrap;
  /* outline: 1px solid red; */
}

.flexrow>.icon-stack {
  display: initial;
}

.mbz-export-footer-class {
    display: block !important;
}

.mbz-export-footer-class #showMBZDialog {
    margin: 4px 0.5em;
    margin-left: 0;
}

.mbz-export-footer-class .form-inline {
  margin-bottom: 0;
  margin-top: 1em;
}

.mbz-swal-container #moodleExportSection 
{
    width: 92%;
    text-align: right;
}

.mbz-swal-container .swal2-content {
  font-size: 1em;
}

.mbz-swal-container h2.swal2-title {
  font-size: 1.6em;
}

.mbz-swal-container .swal2-popup {
  font-size: inherit;
}

.settings-form h2 {
  /* padding-top: 24px;
  padding-bottom: 12px;
  margin-bottom: 12px; */
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: 0.4pt;
}

.settings-form section+section {
  margin-top: 2em;
  border-top: 1px solid #fafafa;
}

.settings-form section {
  margin-bottom: 2em;
}

.settings-form section div {
  margin-bottom: 1.5em;
  max-width: 29em;
}

.settings-form section div+div {
  margin-top: 1.5em;
}

.settings-form {
  margin-bottom: 3em;
}

.settings-form .explanation {
  font-size: 0.8em;
  color: #808080;
}

#editor .session.online a.icon-globe[data-value='false'] {
  color: #b94a48;
}