/* general gubbins */

ul.list-adminLink,
ul.adminSection,
div.list-button-bar ul,
div.action-list ul {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

ul.list-adminLink li,
ul.adminSection li,
div.list-button-bar ul li,
div.action-list ul li {
  display: inline-block;
  margin-bottom: 4px;
}

ul.tags,
ul.categories,
ul.keywords {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  display: inline; /* good for blogger, but everywhere? */
}

ul.tags li,
ul.categories li,
ul.keywords li {
  display: inline;
  white-space: nowrap;
  margin-right: 5px;
}

ul.tags li.active,
ul.categories li.active,
ul.keywords li.active {
  font-weight: bold;
}

form .form-hidden {
  display: none;
}

span.form-required-mark {
  color: red;
}

/* indent the help text then move the (i) symbol into the space */
form .help-block {
  position: relative;
  margin-left: 24px;
}

form .help-block i.icon {
  position: absolute;
  left: -24px;
}

#registration-location {
  font-weight: bold;
}

.nowrap {
  white-space: nowrap;
}

/* some communities have a really long name with no spaces */
h1 {
  word-wrap: break-word;
}

/* url box on application form */
#community_details input#folder_name {
  display: inline-block;
  width: auto;
}

/* telecum-number form widget */
.form-control.telecom-subscriber-number,
.form-control.telecom-extension {
  display: inline-block;
  width: auto;
}

/* try not to break in headers of lists where we have the sort button */
.list-header a {
  white-space: nowrap;
}

.image-widget img {
  max-width: 300px;
  display: block;
  margin-bottom: 10px;
}

/* we have div.pagination wrapping ul.pagination for bs 2.x and 3.x, so in 3.x take out
 * the margins around the inner */
.pagination .pagination {
  margin: 0;
}

.user-message ul {
  list-style: none;
  padding-left: 0;
}

/* override width that wysiwyg might add, which breaks resposnive layout */
table {
  max-width: 100%;
}

table.fullWidth {
  width: 100% !important;
}

iframe {
  max-width: 100%;
}

.breadcrumb>li.youarein {
  color: #666;
}

.breadcrumb>li.first::before {
  content: " ";
}

/* block level button with a dropdown, make the dropdown wide */
.btn-block+ul.dropdown-menu {
  min-width: 100%;
}

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


/* calendar */

table.calendar th,
table.calendar td {
  padding: 4px 2px;
  text-align: center;
}

table.calendar td.hasactivity {
  font-weight: bold;
}

/* uses text-muted instead
table.calendar td.past a {
  color: #999;
}
*/

table.mini-calendar tr td {
  padding: 0;
}

table.mini-calendar td a,
table.mini-calendar td span {
  display: inline-block;
  padding: 5px;
  width: 100%;
}

.blogger_portlet table caption,
.package-calendar table caption {
  text-align: center;
  padding-top: 0;
  padding: 0;
}

.package-calendar .pagination,
.package-calendar .btn.today {
  margin: 0;
}

.package-calendar .btn.today {
  float: left;
}

.cal-frm-compact .input-sm {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}


.package-calendar nav.calendar-pagination {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding-bottom: 8px;
}

.package-calendar .mini-calendar {
  margin-top: 8px;
}

.package-calendar .event {
  overflow: hidden;
}

.package-calendar .event .image {
  text-align: center;
  float: left;
  width: 40%;
  margin-bottom: 10px;
}

.package-calendar .event.hasimage .eventInfo {
  float: right;
  width: 60%;
  padding-left: 15px;
}

.package-calendar .event h2 {
  margin-top: 0;
}

.package-calendar .event .description {
  margin: 40px 0;
}

.package-calendar .event .table {
  margin: 40px 0;
}

.package-calendar .actions {
  text-align: right;
}

/* month grid */
.package-calendar .month-grid {
  table-layout: fixed;
  width: 100%;
}

.package-calendar .month-grid td {
  width: 14.2857%;
  padding: 5px 0 5px 5px;
}

.package-calendar .month-grid td .add {
  margin-right: 5px;
}

.package-calendar .month-grid td .cellcontent {
  overflow: hidden;
  min-height: 100px;
}

.package-calendar .month-grid .event {
  white-space: nowrap;
  min-width: 97%;
  text-align: left;
  font-size: 11px;
}

/* month/week list */
.package-calendar .day-list,
.package-calendar .week-list,
.package-calendar .month-list {
  table-layout: fixed;
  width: 100%;
}

.package-calendar .day-list td.day-time {
  width: 4em;
}

.package-calendar .week-list td.day-date,
.package-calendar .month-list td.day-date {
  width: 5em;
}

.package-calendar .week-list td.day-weekday,
.package-calendar .month-list td.day-weekday {
  width: 3em;
}

@media (min-width: 768px) {
  .package-calendar .week-list td.day-weekday {
    width: 6em;
  }
}

.package-calendar .day-list td.day,
.package-calendar .week-list td.day,
.package-calendar .month-list td.day {
  width: 100%;
  padding: 5px 0 5px 5px;
}

.package-calendar .day-list td.day-add,
.package-calendar .week-list td.day-add {
  width: 3em;
}

.package-calendar .day-list td .cellcontent,
.package-calendar .week-list td .cellcontent,
.package-calendar .month-list td .cellcontent {
  overflow: hidden;
}

.package-calendar .day-list .event,
.package-calendar .week-list .event,
.package-calendar .month-list .event {
  text-align: left;
  min-width: 98%;
  margin: 1px 0px;
}


@media (max-width: 767px) {
  .package-calendar .event .image {
    float: none;
    width: 100%;
    margin-bottom: 10px;
  }

  .package-calendar .event.hasimage .eventInfo {
    float: none;
    width: 100%;
    padding-left: 0;
  }
}


/* file storage */

/* prevent long filenames making the table too wide */
.package-file-storage .filename {
  word-break: break-word;
}


/* survey */

.question_number {
  display: none;
}

.surveyResponse .question {
  margin-bottom: 20px;
  overflow: hidden;
  clear: both;
}

@media (min-width: 768px) {
  .surveyResponse .question_text {
    float: left;
    width: 200px;
    text-align: right;
  }

  .surveyResponse .block_question_text,
  .surveyResponse .question_response,
  .surveyResponse .btn {
    margin-left: 220px;
  }
}

div.question_text,
div.question_text p {
  display: inline;
  font-weight: bold;
}

table.blockWidget th,
table.blockWidget td {
  text-align: center;
}


/* forums */

@media (min-width: 768px) {
  #package-forums .list-paginator {
    float: left;
    margin: 10px 0;
  }

  #forumSearch {
    float: right;
    margin: 10px 0;
  }

  #forumSearch #search_text {
    width: 250px;
  }
}

#package-forums .message .details {
  display: block;
  width: 100%;
  padding: 0 0 5px;
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 24px;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

#forum-thread .level0 {
  margin-left: 0;
}

#forum-thread .level1 {
  margin-left: 20px;
}

#forum-thread .level2 {
  margin-left: 40px;
}

#forum-thread .level3 {
  margin-left: 60px;
}

#forum-thread .level4 {
  margin-left: 80px;
}

#forum-thread .level5 {
  margin-left: 100px;
}

#forum-thread .level6 {
  margin-left: 120px;
}

#forum-thread .level7 {
  margin-left: 140px;
}

#forum-thread .level8 {
  margin-left: 160px;
}

#forum-thread .level9 {
  margin-left: 180px;
}

#forum-thread .level10 {
  margin-left: 200px;
}

/* photo-album */

#package-photo-album #photoAlbum,
#package-photo-album #photoAlbumContents {
  margin-top: 10px;
}

#package-photo-album .photo_album_nav {
  margin: 0;
  width: 100%;
  text-align: center;
}

#photoAlbum ul,
#photoAlbumContents ul {
  list-style: none;
  padding: 0;
}

#photoAlbum .frame {
  position: relative;
}

#photoAlbum .frame svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

#photoAlbum .frame .folder i.full,
#photoAlbum .frame .album i.full {
  display: block;
  font-size: 120px;
  line-height: 120px;
  transition: color .2s ease-in-out;
}

#photoAlbum .frame .folder i.overlay,
#photoAlbum .frame .album i.overlay {
  position: absolute;
  font-size: 20px;
  top: 5px;
  left: 10px;
  transition: color .2s ease-in-out;
}

/* only when viewing a photo, not a photo in a grid */
#package-photo-album .photoContainer .photo {
  height: auto;
  width: auto;
  max-height: 100%;
  max-height: calc(100vh - 100px);
  max-width: 100%;
  opacity: 1.0;
  filter: alpha(opacity=100);
}

.thumbnail {
  text-align: center;
  margin-bottom: 20px;
  overflow: hidden;
  /* nice to make padding bigger but need to do it in bootstrap.css as if we override it here we can't have borderless boxes */
  /*padding: 10px;*/
}

/* add noboxes class to FIL includelet for thumbnails with no border */
.includelet.noboxes .thumbnail {
  border: 0;
  padding: 0;
}

/* for the list of things in a grid - use flexbox to make each thumbnail the same height */
.row.grid {
  display: flex;
  flex-wrap: wrap;
}

.row.grid .item {
  padding-bottom: 20px;
}

.row.grid .item .thumbnail {
  height: 100%;
  margin-bottom: 0;
}

/* blogger */

.blogger_title h2 {
  margin-top: 0;
}

.blogger_entry .image {
  margin-bottom: 10px;
}

/* polls */

.poll table {
  border-collapse: separate;
  width: 100%;
}

.poll table tr td {
  border: 0;
  padding: 0 1em 3px 0;
}

.poll .progress {
  margin: 0;
}

.poll table tr td.optionResult {
  width: 3em;
}

.poll table tr td.optionBar {
  text-align: left;
  width: 50%;
  padding: 0;
}

.includelet.poll .control-label {
  display: none;
}

/* used for FAQs app and the Accordion includelet - put a pop-up/down arrow in the panel title */

.panel-heading .accordion-toggle .panel-title {
  position: relative;
}
.panel-heading .accordion-toggle .panel-title:after {
  font-family: 'Glyphicons Halflings';
  content: "\e114";
  position:absolute;
  top: 0; 
  right: 0;
}
.panel-heading .accordion-toggle.collapsed .panel-title:after {
  content: "\e080";
}
.panel-heading .accordion-toggle .panel-title span {
  padding-right: 50px;
  display: inline-block;
}


/* includelets (panels in bootstap speak) */

/* clearfix includelet contents */
.panel:before,
.panel:after,
.panel .panel-body:before,
.panel .panel-body:after,
.panel .list-group:before,
.panel .list-group:after {
  display: table;
  content: " ";
}

.panel:after,
.panel .panel-body:after,
.panel .list-group:after {
  clear: both;
}

.panel .content h1,
.panel .content h2,
.panel .content h3,
.panel .content h4,
.panel .list-group h1,
.panel .list-group h2,
.panel .list-group h3,
.panel .list-group h4,
.nextEvents h3,
.nextEvents h4,
.latestPosts h3,
.latestPosts h4,
.list-group h1,
.list-group h2,
.list-group h3,
.list-group h4 {
  font-size: 20px;
  line-height: 22px;
  margin-top: 0;
}

/* two adjoining panel-body (can happen in weird case in filtered item list */
.panel-body+.panel-body {
  padding-top: 0;
}

/* don't colour links in panel headers (as then panel-primary is invisible) */
.panel-heading a {
  color: inherit;
}

/* remove margin from the last thing in a panel or div
   (or the last paragraph inside the last thing) */
.panel-body>*:last-child,
.panel-body>*:last-child p:last-child:not(.date),
.well:not(.footer)>*:last-child,
.well:not(.footer)>*:last-child p:last-child:not(.date) {
  margin-bottom: 0;
}

/*  last child of last child of last child.... of panel-body */
.panel-body>*:last-child,
.panel-body>*:last-child>*:last-child,
.panel-body>*:last-child>*:last-child>*:last-child,
.panel-body>*:last-child>*:last-child>*:last-child>*:last-child,
.panel-body>*:last-child>*:last-child>*:last-child>*:last-child>*:last-child {
    margin-bottom: 0;
}
.list-group-item>*:last-child,
.list-group-item>*:last-child>*:last-child,
.list-group-item>*:last-child>*:last-child>*:last-child,
.list-group-item>*:last-child>*:last-child>*:last-child>*:last-child,
.list-group-item>*:last-child>*:last-child>*:last-child>*:last-child>*:last-child {
    margin-bottom: 0;
}
.thumbnail>*:last-child,
.thumbnail>*:last-child>*:last-child,
.thumbnail>*:last-child>*:last-child>*:last-child,
.thumbnail>*:last-child>*:last-child>*:last-child>*:last-child,
.thumbnail>*:last-child>*:last-child>*:last-child>*:last-child>*:last-child {
    margin-bottom: 0;
}

/* and remove top margins from first children (usually a header) */
.panel-body>*:first-child,
.panel-body>*:first-child>*:first-child,
.panel-body>*:first-child>*:first-child>*:first-child,
.panel-body>*:first-child>*:first-child>*:first-child>*:first-child,
.panel-body>*:first-child>*:first-child>*:first-child>*:first-child>*:first-child {
    margin-top: 0;
}
.list-group-item>*:first-child,
.list-group-item>*:first-child>*:first-child,
.list-group-item>*:first-child>*:first-child>*:first-child,
.list-group-item>*:first-child>*:first-child>*:first-child>*:first-child,
.list-group-item>*:first-child>*:first-child>*:first-child>*:first-child>*:first-child {
    margin-top: 0;
}
.thumbnail>*:first-child,
.thumbnail>*:first-child>*:first-child,
.thumbnail>*:first-child>*:first-child>*:first-child,
.thumbnail>*:first-child>*:first-child>*:first-child>*:first-child,
.thumbnail>*:first-child>*:first-child>*:first-child>*:first-child>*:first-child {
    margin-top: 0;
}

/* remove top margin on first thing in any column (header usually!) */
.col > *:first-child,
.col > *:first-child > *:first-child,
.col > *:first-child > *:first-child > *:first-child {
  margin-top:0;
}

/* a bit controversial? Always no margin on first thing in the Content Item includelet
 * this is really so if there's a hidden includelet (e.g an image) then you don't get a big empty space before the
 * content - if the thing above is displayed then it should have a bottom margin anyway */
.contentItemFull > *:first-child,
.contentItemFull > *:first-child > *:first-child,
.contentItemFull > *:first-child > *:first-child > *:first-child {
  margin-top:0;
}

img,
.panel img,
video,
.panel video {
  height: auto;
  max-width: 100%;
}

.image-caption {
  border-left: 1px solid gray;
  margin-top: 0.5em;
  padding-left: 0.5em;
  font-size: 95%;
  margin-bottom: 30px; /* images with a caption get a bit more breathing space */
}

audio {
  height: 32px;
  width: 100%;
}

/* tinymce always adds pointless width/height so lets try to make it full width, more like images */
audio,
video {
  display: block;
  width: 100%;
}

img.pull-left,
img[align="left"],
img[style*="float: left"],
img[style*="float:left"],
video.pull-left,
video[align="left"],
video[style*="float: left"],
video[style*="float:left"],
audio.pull-left,
audio[align="left"],
audio[style*="float: left"],
audio[style*="float:left"] {
  margin: 5px 15px 0px 0px;
}

img.pull-right,
img[align="right"],
img[style*="float: right"],
img[style*="float:right"],
video.pull-right,
video[align="right"],
video[style*="float: right"],
video[style*="float:right"],
audio.pull-right,
audio[align="right"],
audio[style*="float: right"],
audio[style*="float:right"] {
  margin: 5px 0px 0px 15px;
}

/* make tabs/pills a bit smaller in includelets */
.includelet .nav>li>a,
.well .nav>li>a,
.panel .nav>li>a {
  padding: 4px 7px;
}

.includelet .nav li.title,
.well .nav li.title,
.panel .nav li.title {
  padding: 4px 7px;
  font-weight: bold;
}

.includelet .sortOptions:not(.panel-body) {
  margin: 10px 0;
}

.includelet .more {
  margin: 10px 0 0 0;
  text-align: right;
}

.includelet .thumbnail .more {
  margin-right: 10px;
}

/* main title at top of well, no top margin */
.well .commonHeader h3 {
  margin-top: 0;
  font-size: 20px;
}

.thumbnail .commonHeader h3 {
  font-size: 20px;
  margin-top: 0;
}

.subcol .well .commonHeader h3,
.subcol .thumbnail .commonHeader h3 {
  font-size: 18px;
}

.teaser .image {
  margin-bottom: 10px;
  width: 100%;
}

/* image to left in wider columns on bigger screens if not a thumbnail */
@media (min-width: 768px) {
  .col:not(.subcol) div:not(.thumbnail)>.teaser .image {
    margin-right: 10px;
    margin-bottom: 0;
    float: left;
    width: 20%;
    text-align: center;
  }
  .col:not(.subcol) div:not(.thumbnail)>.teaser .itembody {
    text-align: left;
  }
}

.thumbnail .teaser.left {
  text-align: left;
  padding: 10px;
}

.thumbnail .teaser.left .image {
  float: left;
  margin-right: 20px;
  width: 20%; /* needs a width to use fixed aspect ratio */
}

.thumbnail .teaser.left .commonHeader h3 {
  margin-top: 5px;
}

/* if the teaser-left has an image then don't add the top margin so that they align more nicely */
.thumbnail .teaser.left .image + .itembody .commonHeader h3 {
  margin-top: 0;
}

.teaser,
.teaser .itembody {
  overflow: hidden;
}

.metadata .image {
  margin-bottom: 20px;
}

.events .date,
.teaser .date,
.teaser .metadata {
  /*color: #595959; can't change as we don't know the theme's background */
  font-size: 80%;
}

.teaser .item-keywords,
.teaser .item-categories {
  font-size: 90%;
}

.teaser .item-keywords .keyword-title,
.teaser .item-categories .category-title {
  font-weight: bold;
}

.metadata-footer {
  border-top: 1px dotted #999999;
  color: #999;
  font-size: 80%;
  font-weight: bold;
  margin-top: 10px;
  padding-top: 2px;
  clear: left;
}

.contactInformation .panel-body {
  padding-bottom: 0;
}

.contactInformationMap,
.contactInformationText {
  margin-bottom: 10px !important;
}

.contactInformationMap iframe {
  width: 100%;
  height: 400px;
}

@media (min-width: 992px) {

  .medcol .contactInformationMap,
  .medcol .contactInformationText {
    width: 100%;
  }

  .subcol .contactInformationMap iframe {
    height: 265px;
  }
}

.contactInformation p {
  display: block;
  position: relative;
  padding-left: 28px;
}

.contactInformation p svg {
  position: absolute;
  font-size: 18px;
  top: 3px;
  left: 0;
}

.contactInformationEmail a {
  word-wrap: break-word;
}

.contactInformationSocial {
  padding-left: 28px;
}

.contactInformationSocial svg {
  font-size: 24px;
  margin-top: 10px;
  margin-right: 10px;
}

/* to indicate that they're clickable */
.slider-gallery .thumbnail,
.relatedImageGallery .thumbnail {
  cursor: pointer;
}

.slider-gallery .row.grid .item .thumbnail,
.relatedImageGallery .row.grid .item .thumbnail {
  height: auto;
}

.relatedImageGalleryModal .modal-content {
  text-align: center;
}

.slider-gallery .modal-body img,
.slider-gallery .modal-body video,
.relatedImageGalleryModal .modal-body img,
.relatedImageGalleryModal .modal-body video {
  max-height: calc(100vh - 200px);
  width: auto;
  margin: 0 auto;
}

/* nextEvents, latestPosts, slider in grid mode, all format in the same way */

.nextEvents:after,
.latestPosts:after {
  content: "";
  display: table;
  clear: both;
}
.nextEvents .more,
.latestPosts .more {
  margin: 0;
}

.nextEvents .addEvent {
  float: right;
  margin-top: 10px;
  margin-top: 10px;
}

.latestPosts .subtitle {
  font-size: 110%;
}

.nextEvents .eventItem,
.latestPosts .postItem {
  overflow: hidden;
}

.nextEvents .eventItem .image,
.latestPosts .postItem .image {
  margin-bottom: 10px;
  text-align: center;
}

/* in a full column on wider layout put the image to the left and text to the right */
/* (and only if grid_mode is one wide or not present) */
@media (min-width: 768px) {
  .col:not(.subcol) .filteredItemList:not(.grid-narrow) .thumbnail .teaser:not(.left),
  .col:not(.subcol) .nextEvents:not(.grid-narrow) .eventItem.thumbnail,
  .col:not(.subcol) .latestPosts:not(.grid-narrow) .postItem.thumbnail {
    text-align: left;
  }

  .col:not(.subcol) .filteredItemList:not(.grid-narrow) .thumbnail .teaser:not(.left) .image,
  .col:not(.subcol) .nextEvents:not(.grid-narrow) .eventItem .image,
  .col:not(.subcol) .latestPosts:not(.grid-narrow) .postItem .image {
    margin-bottom: 0;
    float: left;
    width: 35%;
  }

  .col:not(.subcol) .filteredItemList:not(.grid-narrow) .thumbnail .teaser:not(.left) .image + .itembody,
  .col:not(.subcol) .nextEvents:not(.grid-narrow) .eventItem.hasimage .eventInfo,
  .col:not(.subcol) .latestPosts:not(.grid-narrow) .postItem.hasimage .postInfo {
    float: right;
    width: 65%;
    padding-left: 15px;
  }

  .col:not(.subcol) .nextEvents:not(.grid-narrow) .eventItem.thumbnail.noimage .eventInfo,
  .col:not(.subcol) .latestPosts:not(.grid-narrow) .postItem.thumbnail.noimage .postInfo {
    padding-left: 5px;
  }
}


/* take out the standard padding and add back into the columns, so that
   when the image wraps above/below we don't get extra spacing */
.customInclude .panel-body {
  padding-top: 0;
  padding-bottom: 0;
}

.customInclude .panel-body .customIncludeContent,
.customInclude .panel-body .customIncludeGraphic {
  margin-top: 15px;
  margin-bottom: 15px;
}

.customIncludeContent>*:first-child {
  margin-top: 0;
}

/* so when it wraps underneath with no panel the text doesn't touch the image */
.customInclude:not(.panel-body) .customIncludeGraphic {
  margin-bottom: 15px;
}

.customInclude img.graphic {
  width: 100%;
}


.filtered-item-list-categories .list-group-item h3 {
  margin: 0;
}

/* make some sub columns go wide when used in a narrow column */
.subcol .fullsubcol {
  width: 100%;
  float: none;  /* allow column margins to collapse */
  left: 0;  /* to counter pushed/pulled columns */
}

/* quick fix to force forms in narrow columns to be non-horizontal */
.subcol .panelcol,
.subcol .control-label,
.subcol .controls,
.subcol .form-control,
.subcol .form-buttons {
  width: 100%;
  margin-left: 0;
  text-align: left;
}

.subcol .form-buttons {
  text-align: right;
}

/* lone button goes right, buttons in an 'actions' div get righted as one */
.subcol a.btn {
  float: right;
}

.subcol .actions {
  float: right;
}

.subcol .actions a.btn {
  float: none;
}


.slider .slider-image-wrapper,
.slider .slider-text {
  width: 100%;
  float: left;
}

.slider .slider-title {
  margin-top: 0;
}

/* centre images in carousel */
.slider .item img {
  margin: 0 auto;
}

/* 'withtext' really meains 'images with text to right' */

.slider.slider-withtext .hasimage .slider-text,
.slider.slider-withtextunder .hasimage .slider-text {
  padding: 10px 0 0 0;
}

/* if it's wide and not a subcol, put the text next to the image */
@media (min-width: 768px) {
  .col:not(.subcol) .slider.slider-withtext:not(.grid-narrow) .hasimage .slider-image-wrapper {
    width: 50%;
  }
  .col:not(.subcol) .slider.slider-withtext:not(.grid-narrow) .hasimage .slider-text {
    width: 50%;
    padding: 0 0 0 15px;
    text-align: left;
  }
}

/* if it's a carousel put text centre unless it's to the right of the image */
.slider.slider-carousel .slider-text {
  text-align: center;
}
@media (min-width: 768px) {
  .col:not(.subcol) .slider.slider-carousel.slider-withtext:not(.grid-narrow) .slider-text {
    text-align: left;
  }
}


.carousel-indicators {
  position: static;
  width: auto;
  margin: 10px 0 0 0;
  padding: 0;
  text-align: right;
}

.carousel-indicators li {
  border: 1px solid #555;
  width: 14px;
  height: 14px;
}

.carousel-indicators .active {
  background-color: #555;
  width: 16px;
  height: 16px;
}


/* use 'fade' instead of 'slide' for a different carousel style */
/* see https://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide */
/* there can be a brief jump of height as active is removed from one div before adding to the next but haven't
 * found a good way to solve this in CSS and don't want to rewrite the bootstrap carousel component! */
.carousel.fade {
  opacity: 1;
}
.carousel.fade .item {
  transition: opacity ease-out .7s;
  left: 0;
  opacity: 0;
  top: 0;
  position: absolute;
  width: 100%;
  display: block;
  z-index: 5;
}
.carousel.fade .item.active {
  opacity: 1;
  top: auto;
  position: relative;
  z-index: 10;
}


/* have all responsive images and videos fill the space (this is important as some bootstrap styles otherwise win) */
.embed-responsive img,
.embed-responsive video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* directory */

.directorySearch .control-label {
  display: none;
}

.directoryList .pagination {
  margin-top: 0;
}

.directoryList thead {
  display: none;
}

.directoryList .logo {
  width: 100px;
  height: 100px;
  margin: 10px 0;
  float: left;
  background-image: url(/resources/themes/voiceWatermark80.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
}

.directoryList .text {
  padding-left: 110px;
}

.directoryList .name {
  padding: 5px 0;
  font-size: 120%;
}

.page .directoryList TR TD .name A {
  display: block;
}

.page .directoryList TR TD .description,
.page .directoryList TR TD .distance {
  padding: 0 5px 5px 5px;
}

/* notifications panel */
#package-notifications form .notification {
  width: 100%;
  overflow: hidden;
}

#package-notifications form ul {
  list-style: none;
}

#package-notifications form .open {
  float: left;
  width: 1em;
}

#package-notifications form .open a {
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

#package-notifications form .enabled {
  float: left;
}

#package-notifications form .interval {
  float: right;
}

/* Inline Editing */

div.inline-edit {
  margin: 1em 0;
}

div.inline-edit .form-element {
  margin-top: 1em;
}

div.inline-edit label {
  margin: 0;
}

div.inline-edit-includelet {
  margin: 1em 0;
  width: 100%;
}

div.inline-edit-includelet-top {
  padding: 0.5em;
  background-color: #FFE2DF;
  border: 1px solid #FFC5BF;
  color: #333;
  border-radius: 0.6em 0.6em 0 0;
  -moz-border-radius: 0.6em 0.6em 0 0;
  -webkit-border-radius: 0.6em 0.6em 0 0;
}

div.inline-edit-includelet-bottom {
  padding: 0.5em;
  border: 1px solid #FFC5BF;
  border-top: 0;
}

div.inline-edit-includelet-top p {
  margin: 0;
}

div.inline-edit-includelet-top a {
  margin: 0 0 0 0.5em;
  float: right;
}

/* to add a shadow to anything */
.shadow {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

/* utility classes to override some margins and paddings */

.padding-top-0 {
  padding-top: 0 !important;
}

.padding-bottom-0 {
  padding-bottom: 0 !important;
}

.padding-top-10 {
  padding-top: 10px !important;
}

.padding-bottom-10 {
  padding-bottom: 10px !important;
}

.padding-top-20 {
  padding-top: 20px !important;
}

.padding-bottom-20 {
  padding-bottom: 20px !important;
}

.padding-top-30 {
  padding-top: 30px !important;
}

.padding-bottom-30 {
  padding-bottom: 30px !important;
}

.padding-top-40 {
  padding-top: 40px !important;
}

.padding-bottom-40 {
  padding-bottom: 40px !important;
}

.padding-top-50 {
  padding-top: 50px !important;
}

.padding-bottom-50 {
  padding-bottom: 50px !important;
}

.padding-top-60 {
  padding-top: 60px !important;
}

.padding-bottom-60 {
  padding-bottom: 60px !important;
}

.padding-top-70 {
  padding-top: 70px !important;
}

.padding-bottom-70 {
  padding-bottom: 70px !important;
}

.padding-top-80 {
  padding-top: 80px !important;
}

.padding-bottom-80 {
  padding-bottom: 80px !important;
}

.padding-top-90 {
  padding-top: 90px !important;
}

.padding-bottom-90 {
  padding-bottom: 90px !important;
}

.padding-top-100 {
  padding-top: 100px !important;
}

.padding-bottom-100 {
  padding-bottom: 100px !important;
}

.margin-top-0 {
  margin-top: 0 !important;
}

.margin-bottom-0 {
  margin-bottom: 0 !important;
}

.margin-top-10 {
  margin-top: 10px !important;
}

.margin-bottom-10 {
  margin-bottom: 10px !important;
}

.margin-top-20 {
  margin-top: 20px !important;
}

.margin-bottom-20 {
  margin-bottom: 20px !important;
}

.margin-top-30 {
  margin-top: 30px !important;
}

.margin-bottom-30 {
  margin-bottom: 30px !important;
}

.margin-top-40 {
  margin-top: 40px !important;
}

.margin-bottom-40 {
  margin-bottom: 40px !important;
}

.margin-top-50 {
  margin-top: 50px !important;
}

.margin-bottom-50 {
  margin-bottom: 50px !important;
}

.margin-top-60 {
  margin-top: 60px !important;
}

.margin-bottom-60 {
  margin-bottom: 60px !important;
}

.margin-top-70 {
  margin-top: 70px !important;
}

.margin-bottom-70 {
  margin-bottom: 70px !important;
}

.margin-top-80 {
  margin-top: 80px !important;
}

.margin-bottom-80 {
  margin-bottom: 80px !important;
}

.margin-top-90 {
  margin-top: 90px !important;
}

.margin-bottom-90 {
  margin-bottom: 90px !important;
}

.margin-top-100 {
  margin-top: 100px !important;
}

.margin-bottom-100 {
  margin-bottom: 100px !important;
}

.margin-top--10 {
  margin-top: -10px !important;
}

.margin-top--20 {
  margin-top: -20px !important;
}

.margin-top--30 {
  margin-top: -30px !important;
}

.margin-top--40 {
  margin-top: -40px !important;
}

.margin-top--50 {
  margin-top: -50px !important;
}

.margin-top--60 {
  margin-top: -60px !important;
}

.margin-top--70 {
  margin-top: -70px !important;
}

.margin-top--80 {
  margin-top: -80px !important;
}

.margin-top--90 {
  margin-top: -90px !important;
}

.margin-top--100 {
  margin-top: -100px !important;
}

.margin-bottom--10 {
  margin-bottom: -10px !important;
}

.margin-bottom--20 {
  margin-bottom: -20px !important;
}

.margin-bottom--30 {
  margin-bottom: -30px !important;
}

.margin-bottom--40 {
  margin-bottom: -40px !important;
}

.margin-bottom--50 {
  margin-bottom: -50px !important;
}

.margin-bottom--60 {
  margin-bottom: -60px !important;
}

.margin-bottom--70 {
  margin-bottom: -70px !important;
}

.margin-bottom--80 {
  margin-bottom: -80px !important;
}

.margin-bottom--90 {
  margin-bottom: -90px !important;
}

.margin-bottom--100 {
  margin-bottom: -100px !important;
}