ionic.app.scss

/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

//$royal:                           #030055 !default;
//$assertive:                       #ff7a00 !default;
//$balanced:                        #33cd5f !default;

//$dark:                              #030055 !default; // bleu foncé uCoin App
//$assertive:
//
// #94c11f !default;
//$balanced:                        #94c11f !default;

$light:                           #fff !default;
$active:                          #b2e0ff !default;
$stable-100-bg:                   #f2f2f2 !default;
$stable-900-bg:                   #e0e0e0 !default;
$positive-900-bg:                 #1A237E !default;
$dark-100-bg:                     #555 !default;

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

// Add robotodraft fonts (need for ionic material)
$RobotoDraftFontPath: "../lib/robotodraft/fonts";
$RobotoDraftFontName: "RobotoDraft";
$RobotoDraftFontVersion: "1.1.0";

@import "www/lib/robotodraft/sass/robotodraft";

// Include all of Ionic-Material
@import "www/lib/ionic-material/src/scss/index";

// Cesium icons
// The path for Cesiumicons font files, relative to the built CSS in www/css
$cesiumicons-font-path: "../fonts" !default;
@import "./icons/cesiumicons";

// Include ion-digit-keyboard
@import "www/lib/ion-digit-keyboard/src/ion-digit-keyboard";

// --------------------------------------------------
// Responsive: Utility classes
// --------------------------------------------------
$screen-xxs-max:                  400px;
$screen-xs:                       401px;
$screen-xs-max:                   767px;
$screen-sm:                       768px;
$screen-sm-max:                   991px;
$screen-md:                       992px;
$screen-md-max:                   1199px;
$screen-lg:                       1200px;

// Resolution for left menu show/hide
$screen-nomenu-max:               $screen-xs-max;
$screen-menu:                     $screen-sm;

// IE10 on Windows Phone 8
// IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In
// other words, say on a Lumia, you'll get 768px as the device width,
// meaning users will see the tablet styles and not phone styles.
//
// Alternatively you can override this with JS (see source below), but
// we won't be doing that here given our limited scope.
//
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
//
// Additional doc: http://getbootstrap.com/css/#responsive-utilities-classes
//

// ----------------------------------
// Smaller device: Phones (<401px)
// ----------------------------------
@media screen and (max-width: $screen-xxs-max) {
  @-ms-viewport {
    width: 320px;
  }
  .no-padding-xxs {
    padding: 0 !important;
  }
}

// ----------------------------------
// Extra small device: Phones (<767px)
// ----------------------------------
@media screen and (max-width: $screen-xs-max) {
  .hidden-xs {
    display: none !important;
    visibility: hidden !important;
  }

  .padding-top-xs {
    padding-top: 10px;
  }
}

@media screen and (min-width: $screen-sm) {
  .hidden-xs {
    display: inherit;
    visibility: visible;
  }
  .row.hidden-xs {
    display: flex !important;
  }
  .button.hidden-xs {
    display: inline-block;
  }
}

@media screen and (max-width: $screen-xs-max) {
  .visible-xs {
    display: inherit !important;
    visibility: visible !important;
  }
  .button.visible-xs {
    display: inline-block !important;
  }
}

@media screen and (min-width: $screen-sm) {
  .visible-xs {
    display: none !important;
    visibility: hidden !important;
  }
}

@media screen and (max-width: $screen-xs-max) {
  .padding-xs {
    padding: 16px !important;
  }
  .no-padding-xs {
    padding: 0 !important;
  }
  .no-margin-xs {
    margin: 0 !important;
  }
}

// ----------------------------------
// Small devices: Tablets (≥768px)
// ----------------------------------
@media screen and (min-width: $screen-sm) and (max-width: $screen-sm-max) {
  .hidden-sm,
  .row.hidden-sm,
  .row-header.hidden-sm {
    display: none !important;
    visibility: hidden !important;
  }
  .badge {
    text-overflow: ellipsis !important;
    white-space: nowrap;
    overflow: hidden !important;
    max-width: 400px !important;
    display: inline-block !important;
  }
  .badge:empty {
    display: none !important;
  }
  .padding-sm {
    padding: 16px !important;
  }
  .no-padding-sm {
    padding: 0 !important;
  }
  .no-margin-sm {
    margin: 0 !important;
  }
}

@media screen and (min-width: $screen-sm) {
  .item-toggle .toggle {
    right: 32px;
  }
}

@media screen and (min-width: $screen-md) {
  .hidden-sm {
    display: inherit;
    visibility: visible;
  }
  .row.hidden-sm {
    display: flex !important;
  }
  .button.hidden-sm {
    display: flex;
  }
  .button.button-icon.hidden-sm {
    display: inline-block;
  }
  .pull-right,
  .pull-left {
    .button.hidden-sm {
      display: inline-block;
    }
  }
}

@media screen and (max-width: $screen-xs-max) {
  .hidden-sm {
    display: inherit;
    visibility: visible;
  }
}

@media screen and (max-width: $screen-sm-max) {
  .visible-sm {
    display: inherit !important;
    visibility: visible !important;
  }
  .button.visible-sm {
    display: inline-block !important;
  }
}

@media screen and (min-width: $screen-md) {
  .visible-sm {
    display: none;
    visibility: hidden;
  }
}

@media screen and (max-width: $screen-xs-max) {
  .visible-sm {
    display: none;
    visibility: hidden;
  }
}

@media screen and (min-width: $screen-md) {
  body {
    cursor: inherit;
  }
}

// ----------------------------------
// Medium devices: Desktops (≥992px)
// ----------------------------------
@media screen and (min-width: $screen-md) and (max-width: $screen-md-max) {
  .hidden-md {
    display: none !important;
    visibility: hidden !important;
  }
  .badge {
    text-overflow: ellipsis !important;
    white-space: nowrap;
    overflow: hidden !important;
    max-width: 400px !important;
    display: block !important;
  }
  .badge:empty {
    display: none !important;
  }
}

@media screen and (min-width: $screen-lg) {
  .hidden-md {
    display: inherit;
    visibility: visible;
  }
}

@media screen and (max-width: $screen-sm-max) {
  .hidden-md {
    display: inherit;
    visibility: visible;
  }
}

@media screen and (min-width: $screen-md) and (max-width: $screen-md-max) {
  .visible-md {
    display: inherit !important;
    visibility: visible !important;
  }
}

@media screen and (min-width: $screen-lg) {
  .visible-md {
    display: none;
    visibility: hidden;
  }
}

@media screen and (max-width: $screen-sm-max) {
  .visible-md {
    display: none;
    visibility: hidden;
  }
}

// ----------------------------------
// Large devices: Desktops (≥1200px)
// ----------------------------------
@media screen and (min-width: $screen-lg) {
  .hidden-lg {
    display: none !important;
    visibility: hidden !important;
  }
  .visible-lg {
    display: inherit !important;
    visibility: visible !important;
  }
  .badge {
    text-overflow: ellipsis !important;
    white-space: nowrap;
    overflow: hidden !important;
    max-width: 450px !important;
    display: block !important;
  }
  .badge:empty {
    display: none !important;
  }
}

@media screen and (max-width: $screen-md-max) {
  .hidden-lg {
    display: inherit;
    visibility: visible;
  }
}

@media screen and (max-width: $screen-md-max) {
  .visible-lg {
    display: none;
    visibility: hidden;
  }
}

@media screen and (max-width: $screen-sm) {
  .no-padding-xs {
    padding: inherit;
  }
}

@media screen and (max-width: $screen-xs-max) {
  .no-margin-xs {
    margin: 0 !important;
  }
}

@media screen and (min-width: $screen-md) {
  html, body, .scroll, .disable-user-behavior {
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important;
    -webkit-touch-callout: default !important;
    -webkit-tap-highlight-color: $positive;
    -webkit-user-drag: none !important;
    touch-action: auto !important;
    -ms-touch-action: auto !important;
    -ms-content-zooming: none !important;
  }
}

/* ============
 Left menu
=============== */

// Screen without left menu
@media screen and (max-width: $screen-nomenu-max) {
  .hidden-nomenu {
    display: none !important;
    visibility: hidden !important;
  }
  .visible-nomenu {
    display: unset;
    visibility: visible !important; }
}
@media screen and (min-width: $screen-menu) {
  .visible-nomenu {
    display: none !important;
    visibility: hidden !important;
  }
}
.menu.menu-left {

  background-color: whitesmoke;
  .item {
    opacity: 0.75;
    color: black;
  }

  .item-button-right > .button,
  .item-button-right .item-content > .button,
  .item-button-right > .buttons,
  .item-button-right .item-content > .buttons {
    top: 8px !important;
  }

  .item.active {
    background-color: $active !important;

    .item-content {
      background-color: transparent;
    }
  }

  .item-menu-disable {
    color: $dark !important;
  }

  .item-spacer {
    flex: 1 1 auto;
  }

  .item-actions {
    min-height: 55px !important;
  }

  .item-closeable:hover {
    cursor: pointer;
  }


  .item-closeable {
    .close {
      position: absolute;
      right: 5px;
      top: 5px;
    }
  }
  .item-closeable:hover {
    .close {
      @extend .ion-close;
    }
  }
}


// Menu on small screens
@media screen and (max-width: $screen-sm-max) {
  .menu.menu-left {

    // Compact menu item (reduce height, etc.)
    .item.item-divider {
      min-height: 2px;
      height: 2px;
      padding-top: 0;
      padding-bottom: 0;
    }

    .item,
    .item.item-complex .item-content {
      height: 40px;
      min-height: 40px;
      padding-top: 10px;
      padding-bottom: 10px;

      .badge {
        top: 10px;
        padding: 2px 6px;
        font-size: 12px;
      }
    }

    .item.item-complex {
      padding-top: 0;
    }

    .item.item-button-right .button {
      height: 30px;
      min-height: 30px;
      top: 4px;
    }

    .item-spacer {
      display: none;
      visibility: hidden;
    }

    // Hide footer on small screen
    ion-content.has-footer {
      bottom: 0 !important; /*ignore footer*/
    }

    .bar-header {
      background-color: $positive-900-bg;
      color: #fff;
      height: 150px;
      padding-right: 0 !important;

      .platform-ios.platform-cordova & {
        height: calc(constant(safe-area-inset-top) + 150px);
        height: calc(env(safe-area-inset-top) + 150px);
      }

      .hero {
        height: 150px;
        box-shadow: none; // not need (define in bar-header)

        .content {
          bottom: 0;
        }
      }
    }

    .has-header {
      top: 150px;

      .platform-ios.platform-cordova & {
        top: calc(constant(safe-area-inset-top) + 150px);
        top: calc(env(safe-area-inset-top) + 150px);
      }
    }

  }

}

// Menu for NOT small screens
@media screen and (min-width: $screen-md) {
  .menu.menu-left {

    .list {
      height: 100%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .item.item-divider {
      min-height: 5px;
      height: 5px;
    }

    .footer a {
      font-size: 14px ! important;
      color: grey !important;
    }
  }
}

@media screen and (min-width: $screen-md) {
  .menu.menu-left {
    background-image: url('../../resources/logo/svg/white/logo.large.empty.transparent.svg');
    background-repeat: no-repeat;
    background-position: -500px -100px;
    background-size: 1024px 1024px;
    background-color: whitesmoke;
    height: 100%;
  }
}

/**********
   Fix or extend generic CSS
**********/
html, body {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.item.item-icon-right.item-select,
.item.item-icon-right .item-select {
  select {
    right: 48px;
    padding: 0 20px 0 16px;
  }
}

.item.item-icon-right.item-select:after,
.item.item-icon-right .item-select:after {
  right: 56px;
}

/**********
   Unit popover
**********/

.popover-unit .item.selected,
#unitPopover .item.selected {
  background-color: $stable;
}

/**********
   Share popover
**********/

@media (max-width: $screen-xs-max) {
  .popover-share {
    width: auto;
  }
}

// Fix for iOS 11+
.ios ion-content {
  pointer-events: auto;
}

.popover-share {
  height: 110px;

  .bar {
    box-shadow: none !important;
  }

  .bar-header {
    height: 20px;

    .title {
      font-size: 12px;
      font-weight: bold;
      height: 20px;
      line-height: 19px;
      max-width: 260px;
      margin: 0 5px;
      text-align: left;
    }

    span {
      @extend .gray;
      font-size: 10px;
      height: 20px;
      position: absolute;
      right: 0;
      top: 0;
      margin: 0 5px;
      display: block;
    }
  }

  .has-header {
    top: 20px;
  }

  .has-footer {
    bottom: 40px;
  }

  .bar-footer {
    color: $positive;
    height: 40px;

    .button-icon {
      padding: 0 5px;
    }

    .button-close {
      @extend .gray;
      @extend .padding-right;
      @extend .padding-bottom;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }


  .item {
    padding: 5px;

    input {
      border: 1px solid grey;
      border-radius: 3px;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
    }

    input:focus {
      border-color: $positive;
      outline: 0;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 8px #08c;
    }
  }

  .list .item {
    border-bottom: 0 !important;
  }
}


/**********
   Notifications popover
**********/
.popover-light,
.popover-notification {

  .bar-header, .bar-footer {
    height: 30px;

    .title {
      color: black;
      text-align: left;
      left: 0 !important;
      font-size: 14px;
      line-height: 30px;
    }

    .pull-right {
      margin-right: 10px;
    }

    .pull-left {
      margin-left: 10px;
    }

    a {
      font-size: 14px;
      text-decoration: none;
      line-height: 30px;
    }
  }

  .has-footer {
    bottom: 28px;
  }

  .has-header {
    top: 30px;
  }

  .item.unread {
    background-color: rgb(236, 240, 247) !important;
    border-color: rgb(221, 223, 226) !important;
  }

  .item-avatar {
    padding-top: 12px;
    padding-bottom: 8px;
    padding-left: 76px;
    padding-right: 10px;
    min-height: 80px !important;

    h4 {
      i.icon {
        font-size: 18px !important;
        line-height: 12px !important;
        vertical-align: middle !important;
      }
    }
  }

  .item-avatar > img:first-child,
  .item-avatar .item-image,
  .item-avatar .item-content > img:first-child,
  .item-avatar .item-content .item-image {
    top: 12px;
    left: 10px;
  }

  /* use for invitation buttons */
  .button.button-small {
    height: 30px;
    font-size: 12px;
    padding: 0 5px !important;
    line-height: 30px;
  }
}

.popover-invitation,
.popover-network,
.popover-peer-info {
  width: 420px;
}

.popover-wallets {
  .item-avatar {
    padding-left: 95px !important;
    .icon:last-child {
      display: none;
    }
  }
}

/**********
   Network
**********/
.popover-peer-info,
.popover-endpoints {
  .item .badge {
    right: 16px !important;
  }

  .item .badge.badge-secondary {
    top: 35px !important;
  }
}


/**********
   Unit popover
**********/

.popover-unit {
  height: 108px;
  max-width: 115px;
}

/**********
   Notifications view
**********/

.view-notification {

  .item.unread {
    background-color: rgb(236, 240, 247) !important;
    border-color: rgb(221, 223, 226) !important;
  }

  ion-item {
    h4 {
      i.icon {
        font-size: 18px !important;
        line-height: 12px !important;
        vertical-align: middle !important;
      }
    }
  }
}


/* ============
 Buttons
=============== */
.bar.bar-header {
  // Special case for "more options" icon
  .button.button-clear.button-icon.ion-android-more-vertical,
  .button.button-clear.button-icon i.ion-android-more-vertical {
    padding-left: 8px;
    padding-right: 8px;
  }
}

// Avoid to have not align button on bar-header
.bar .buttons.pull-right, .bar .title + .button:last-child, .bar .title + .buttons, .bar > .button + .button:last-child, .bar > .button.pull-right {
  top: 0 !important;
}

// Avoid different between home view and other view (space between last button and left border)
.bar.bar-header {
  padding-right: 5px !important;

  .buttons-right .right-buttons {
    margin-left: 0 !important;
  }
}

.bar .title + .buttons.buttons-right {
  right: 5px;
}

.button-icon {
  border-color: transparent;
  box-shadow: none !important;
}

.button-small-padding {
  padding: 0 7px !important;
}


.button-text {
  @extend .button-clear;
  @extend .button-positive;

  color: grey !important;
  font-size: 12px;
}

.button-text.button-small {
  @extend .button-small;
  padding: 5px 2px;
  font-size: 12px !important;
}

.button-text-positive {
  color: $positive !important;
}

.button-text-stable {
  color: #b2b2b2 !important;
}

.button-text-dark {
  @extend .dark;
}

.popup-buttons .button.icon-right,
.popup-buttons .button.icon-left {
  padding-left: 32px !important;
  padding-right: 32px !important;
  line-height: 42px;
}

.button-fab-bottom-left.has-footer,
.button-fab-bottom-right.has-footer {
  bottom: 64px !important;
}

/* ============
 Home page
=============== */

#home .ribbon {
  position: fixed;
  top: 15px;
  right: -110px;
  z-index: 500;
  transform: rotate(45deg);
  text-align: center;
  width: 300px;
  text-decoration: none;
  box-shadow: 0 0 5px #000;
  a:first-child {
    opacity: 1 !important;
  }
  a {
    opacity: 0.7;
    width: 100%;
  }

  a:hover {
    opacity: 1;
    font-size: 16px;
  }
}
#home h4.welcome .badge {
  display: inline-block !important;
  vertical-align: bottom;
}
#home .logo {
  margin-top: 15px;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

#home .center {
  float: none;
  text-align: center;
  display: inline-block;
}

#home .center .button {
  display: inline-block;
}

@media screen and (max-width: $screen-xs-max) {
  #home .logo {
    height: 96px;
    background-image: url('../img/logo_96px.png');
    background-size: 96px 96px;
  }
  #home .footer {
    display: none;
  }
}

@media screen and (min-width: $screen-sm) and (max-width: $screen-sm-max) {
  #home .logo {
    height: 144px;
    background-image: url('../img/logo_144px.png');
    background-size: 144px 144px;
  }
  #home .button {
    max-width: 350px;
    margin-top: 20px;
  }
}

@media screen and (min-width: $screen-md) {
  #home .logo {
    height: 200px;
    background-image: url('../img/logo_200px.png');
    background-size: 200px 200px;
  }

  #home .button {
    max-width: 350px;
    margin-top: 20px;
  }
}


@media screen and (min-width: $screen-md) {

  .circle-bg-dark {
    background-image: url('../../resources/logo/svg/white/logo.large.empty.transparent.svg');
    background-repeat: no-repeat;
    background-position: -725px -145px;
    background-size: 1024px 1024px;
  }

}

.gray {
  color: grey !important;

  b {
    color: grey !important;
  }
}

.gray, .positive {
  a {
    color: inherit;
  }

  a:hover {
    color: inherit;
  }

  a:visited {
    color: inherit;
  }
}

.item a {
  text-decoration: none;
}

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

.avatar-member {
  background-image: url('../img/person.png');
}

.avatar.disable {
  opacity: 0.7;
}

.avatar-wallet {
  background-image: url('../img/card.png');
}

/* ----
    Popup alert
   ---- */

.popup-container.warning,
.popup-container.confirm {
  .popup {
    min-width: 250px !important;
    width: 350px !important;
  }

  .popup-head {
    h1, h2, h3, h5, h6, p {
      color: white;
    }
  }
}

.popup-container.warning {
  .popup-head {
    background-color: $assertive;
  }
}

.popup-container.confirm {
  .popup-head {
    background-color: $positive;
  }
}

.popup-container.large {
  .popup {
    min-width: 250px !important;
    width: 350px !important;
  }
}

/******
* 'ion-refresher'
*******/

.platform-android {
  .scroll-refresher {
    z-index: 50;
  }
}

/******
* Wallet view
*******/
.view-wallet {

  .hero {
    height: 200px;

    h4:after {
      content: ' ';
      display: inline-block;
    }
  }

  .item-text-wrap {
    white-space: normal !important;
  }

  .item .comment {
    font-style: italic !important;
  }

  .item h3 .gray {
    font-size: 11px ! important;
  }

  .list .item span {
    display: inline;
  }

  .item-divider .badge {
    top: 16px !important;
  }

  .item.item-wallet-event {
    padding-top: 5px;
    padding-bottom: 5px;
    min-height: 30px;
    max-height: auto;
    height: auto;
  }

  .item.item-wallet-event:last-child {
    min-height: 48px;
  }

  .item.item-icon-left.item-wallet-event .icon {
    font-size: 17px;
    height: 18px;
    top: 6px;
  }

}

/* --
  QR code
-- */

.view-wallet,
.view-wallet-tx,
.view-identity,
.view-identity-tx {
  .qrcode {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    background: white;
    z-index: 5;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transition: all 0.2s ease-in-out !important;
    transition: all 0.2s ease-in-out !important;
    overflow: hidden;
    svg, img {
      display: unset;
      float: right;
      width: 0;
      height: 0;
      z-index: 5;
      transition: all 0.2s ease-in-out !important;
    }
  }

  .qrcode.on {
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 7px;
    svg, img {
      width: 50px;
      height: 50px;
    }
  }

  .qrcode.on.active {
    margin: 0 !important;
    padding: 0;
    width: 200px;
    height: 200px;
    svg, img {
      width: 224px;
      height: 224px;
      margin: -12px -12px;
    }
  }
}

@media screen and (max-width: $screen-sm-max) {
  .view-wallet,
  .view-wallet-tx,
  .view-identity,
  .view-identity-tx {

    .qrcode.on.active {
      width: calc(min(100vh - 125px, 100vw));
      height: 100%;
      z-index: 10001;
      svg, img {
        width: calc(100%);
        height: 100%;
        margin: 0;
      }
    }
  }
}

@media screen and (min-width: $screen-md) {
  .view-wallet,
  .view-wallet-tx,
  .view-identity,
  .view-identity-tx {

    .qrcode.on.active .footer {
      display: none;
      visibility: hidden;
    }
  }
}

.popover-wallet-actions {
  height: 400px;
}

/******
* Wallet TX view
*******/
@media screen and (max-width: $screen-sm-max) {
  .view-wallet-tx {

    .hero {
      height: 100px;
    }
  }
}

@media screen and (min-width: $screen-md) {
  .view-wallet-tx {

    .hero {
      height: 140px;
    }
  }
}

.view-wallet-tx {

  .item-text-wrap {
    white-space: normal !important;
  }

  .item .comment {
    font-style: italic !important;
  }

  .item h3 .gray {
    font-size: 11px ! important;
  }

  .list .item span {
    display: inline;
  }

  .item-divider .badge {
    top: 16px !important;
  }
}

.stable-100-bg {
  background-color: $stable-100-bg !important;
}

/******
* TX view (wallet or identity)
*******/

.item-tx{
  border-top: solid 1px lightgray !important;
  padding-bottom: 6px;
  padding-top: 8px;
  margin: 0 !important;


  .badge-energized {
    background-color: rgba(255, 201, 0, 0.3);
    color: #888 !important;
  }
  .badge {
    right : 1% !important;
    top: 13px;
  }
  .badge-white {
    background-color: white; // Fix issue #847
  }

  .vertical-center{
    position: absolute;
    top: 30%;
    width: 40%;
  }

  p.comment{
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  p.text-wrap {
    white-space: normal;
    a {
      white-space: nowrap;
    }
  }

  .col-pubkey {
    max-width: 80%;

    .pubkeys {
      display: block;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-height: 130px;
      overflow: hidden;
    }
  }
}



.expert-mode .item-tx {
  .item-note {
    top : 8%;
  }
  .badge-secondary {
    top : calc(8% + 23px) !important;
  }
}


/******
* Identity view
*******/

.view-identity {
  // Default wallet color
  --background-color: #{$dark-100-bg};

  .member {
    --background-color: #{$positive-900-bg};
  }

  .hero {
    height: 200px;
    background-color: var(--background-color);
  }


}


/******
* Cards
*******/


.card .card-header,
.card .card-header {
  font-size: 90%;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.card.stable-900-bg,
.card .stable-900-bg,
.item.stable-900-bg,
.item .stable-900-bg,
.item-complex .item-content .stable-900-bg,
.item-radio .item-content .stable-900-bg {
  background-color: $stable-900-bg !important;
}

.card .item {
  background: inherit;
}

.card.stable-bg,
.card .stable-bg,
.item.stable-bg,
.item .stable-bg,
.item-complex .item-content .stable-bg,
.item-radio .item-content .stable-bg {
  background-color: $stable !important;
}


.card .card-header {
  padding-top: 5px !important;
  padding-bottom: 0 !important;
  min-height: 25px;
}

.card .item .card-footer {
  margin-bottom: 5px;
}

.card .card-avatar,
.card.card-avatar {
  .avatar {
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.26);
    top: 7px;
    background-color: #D9D9D9;
  }

  img.avatar {
    border: 0;
    min-height: 54px;
    min-width: 54px;
  }

  .item.item-avatar {
    padding-top: 10px;
    padding-bottom: 2px;
    min-height: 45px !important;
    margin-bottom: 1px;
  }

  .card-footer {
    padding-left: 88px;
    overflow: hidden;

    .pull-right {
      a {
        margin-right: 8px;
      }
    }
  }
}

a.underline:focus,
.underline a:focus,
.a.underline:active,
.underline a:active,
a.underline:hover,
.underline a:hover {
  outline: 1px !important;
  text-decoration: underline !important;
}

.animate-fade-slide-in .expanded .item,
.animate-fade-slide-in .expanded.item,
.animate-fade-slide-in-right .expanded .item,
.animate-fade-slide-in-right .expanded.item,
.animate-ripple .expanded .item,
.animate-ripple .expanded.item,
.card-avatar-small.expanded .item,
.card-avatar-small .expanded .item,
.card-avatar-small.expanded .card.card-comment,
.card-avatar-small .expanded .card.card-comment {
  @extend .done;
  @extend .in;
}

.card-avatar-small.card,
.card-avatar-small .card,
.card-avatar-small .card.card-avatar,
.card-avatar-small .card .card-avatar {

  min-height: 45px;

  .avatar,
  .item-avatar .avatar {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.26);
    height: 30px !important;
    width: 30px !important;
    left: 5px !important;
  }

  .item.item-avatar {
    min-height: 25px !important;
    padding-left: 42px !important;
  }

  .card-footer {
    padding-top: 0;
    padding-left: 42px !important;
  }
}


.gallery .card-gallery,
.gallery .card.card-gallery {
  margin-bottom: 15px !important;
  float: left;
  display: block;

  img {
    max-height: 150px;
  }
}

.gallery .card-gallery-new {
  max-height: 199px;
}

.list .item.text-left {
  text-align: left !important;
}

.list .item.text-center {
  text-align: center !important;
}

.list .item.text-right {
  text-align: right !important;
}

.list .item-divider.item-divider-top-border {
  border-top: solid 1px rgba(0, 0, 0, 0.12);
}


.lookupForm .list {
  .item.item-avatar {
    min-height: 80px !important;

    .item-content {
      //min-height: 46px;
    }
  }

  // checkbox
  .item.item-avatar.item-checkbox .item-content {
    padding-left: 47px;
    min-height: auto !important;
    height: auto !important;
  }
}


/************************
   Additional motions
*************************/

.fade-in {
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: translate3d(-30px, 1px, 0);
  -webkit-transition: all 1s ease-in-out;
}

.fade-in.on {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0, 0, 0);
}

/**********
   Item > Avatar
**********/

.item-avatar {
  min-height: 80px !important;
}

.item-avatar > i:first-child,
.item-avatar > img:first-child,
.item-avatar i.item-image:first-child,
.item-avatar img.item-image:first-child,
.item-avatar .item-content > i:first-child,
.item-avatar .item-content > img:first-child,
.item-avatar .item-content i.item-image:first-child,
.item-avatar .item-content img.item-image:first-child,
.item-avatar-left > i:first-child,
.item-avatar-left > img:first-child,
.item-avatar-left i.item-image:first-child,
.item-avatar-left img.item-image:first-child,
.item-avatar-left .item-content > i:first-child,
.item-avatar-left .item-content > img:first-child,
.item-avatar-left .item-content i.item-image:first-child,
.item-avatar-left .item-content img.item-image:first-child {
  color: #D9D9D9;
  background-color: #f8f8f8;
  border: solid 1px #D9D9D9;
  overflow: hidden !important;
  font-size: 45px !important;
  line-height: 56px;
  width: 100% !important;
  max-height: 56px !important;
  max-width: 56px !important;
  top: 12px !important;
}

.item-avatar > .icon:first-child:before,
.item-avatar .icon.item-image:first-child:before,
.item-avatar .item-content > .icon:first-child:before,
.item-avatar.item-icon-right .icon:first-child:before,
.item-avatar.item-icon-right .icon-help:first-child:before,
.item-avatar.item-icon-right .icon-alert:first-child:before,
.item-avatar.item-icon-right #menu .footer .icon-help:first-child:before,
#menu .footer .item-avatar.item-icon-right .icon-help:first-child:before {
  width: 56px !important;
}


.item-avatar.item-icon-right .icon:last-child,
.item-avatar.item-icon-right .icon-help:last-child,
.item-avatar.item-icon-right .icon-alert:last-child,
.item-avatar.item-icon-right.ink .icon.ion-ios-arrow-right,
.item-avatar.item-icon-right #menu .footer .icon-help:last-child,
#menu .footer .item-avatar.item-icon-right .icon-help:last-child {
  left: auto;
}

/**********
   Item > Left icon position
**********/

.item.item-icon-left > i.avatar:first-child {
  position: absolute;
  display: flex;
  height: 100%;
  align-items: center;
  font-size: 16px;
  left: 16px;
  top: 8px;
  max-height: 32px;
  max-width: 32px;
}

.item.item-checkbox.item-avatar > i.avatar:first-child,
.item.item-checkbox.item-avatar > i.item-image:first-child,
.item.item-checkbox.item-avatar .item-content > i.avatar:first-child,
.item.item-checkbox.item-avatar .item-content > i.item-image:first-child,
.item.item-checkbox.item-avatar * > i.avatar:first-child,
.item.item-checkbox.item-avatar * > i.item-image:first-child,
.item.item-checkbox.item-avatar * .item-content > i.avatar:first-child,
.item.item-checkbox.item-avatar * .item-content > i.item-image:first-child {
  left: 65px;
}

.item.item-checkbox.item-avatar .item-content,
.item.item-checkbox .item-content .item-avatar {
  padding-left: 65px;
}

/**********
   Item > Right icon position
**********/

// Workaround to force the right arrow to stay on the left
// (because the ink effect, a div.ink-ripple can be the last-child)
.item-icon-left.item-icon-right.ink .icon.ion-ios-arrow-right {
  left: auto;
}

@media screen and (max-width: $screen-xs-max) {
  // Reduce right space on the right icon
  .item.item-icon-right > .icon:last-child,
    // Workaround to force the right arrow to stay on the left
    // (because the ink effect, a div.ink-ripple can be the last-child)
  .item.item-icon-right > .icon.ion-ios-arrow-right {
    right: 1px;
  }
}

/**********
   Item > Other properties
**********/

.item em {
  font-weight: bold !important;
}

@media screen and (max-width: $screen-sm-max) {
  .item .badge {
    right: 16px;
  }
}


@media screen and (min-width: $screen-md) {
  .list .item.item-border-large {
    margin-bottom: 1px;
    border-bottom: solid 1px #ccc !important;
  }
  .list.item-border-large {
    .item {
      border-bottom: solid 1px #ccc !important;
      margin: 0 0px 1px;
    }

    .item-divider {
      border-top: 0;
    }
  }
}

.item.item-no-border {
  border-width: 0;
}

.list .item.item-border {
  border-bottom: solid 1px #ccc !important;
  margin-bottom: 1px;
}

.list .item.item-small-height {
  padding-top: 2px;
  padding-bottom: 0;
  min-height: 24px;

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

  .badge.badge-balanced,
  .badge.badge-positive,
  .badge.badge-assertive,
  .badge.badge-royal,
  .badge.badge-calm,
  .badge.badge-energized {
    top: 1px !important;
    padding-top: 3px !important;
    padding-bottom: 2px !important;
  }
}

/**********
   Form validation
**********/

.form-errors:first-child {
  margin: 5px 0;
}

.form-errors:last-child {
  margin: 5px 0 0;
}

.form-error {
  padding: 0 16px;
  font-size: 12px;
  color: red;
  vertical-align: middle;
  text-align: end;
  top: 0;
  position: relative;
}

.item-input-error {
  border-bottom: 2px solid red !important;
}

// See login screen (pubkey form)
.item-input.item-button-right {
  input,
  textarea {
    margin-right: 100px;
  }

  .button,
  button {
    top: 6px;
  }
}

.item-input.item-button-right.item-floating-label {
  input,
  textarea {
    padding-right: 100px;
  }

  .button {
    top: inherit;
    bottom: 6px;
  }

  .button-icon {
    height: inherit;
  }
}

/**********
   Badge
**********/

/*
 Badge inside an item
*/
.item.item-icon-right .badge,
.item.item-button-right .badge {
  right: 43px;
}

@media screen and (max-width: $screen-xs-max) {
  .badge {
    text-overflow: ellipsis !important;
    white-space: nowrap;
    overflow: hidden !important;
    max-width: 300px !important;
    display: block !important;
  }

  .badge:empty {
    display: none !important;
  }

  .item.item-button-right .badge,
  .item.item-icon-right .badge {
    right: 26px !important;
  }
}

/*
 Editable badge
*/

$ionicon-var-badge-editable: $ionicon-var-edit + "\00a0";

.badge-editable:hover {
  cursor: pointer;
  @extend .badge-assertive;
}

.badge-editable:hover:before {
  @extend .ion;
  content: $ionicon-var-badge-editable;
}

/*
 Badge inside toolbar's button
*/
.platform-ipad {
  .bar-title {
    border-color: $button-dark-border;
    background-color: $dark;
    background-image: linear-gradient(0deg,$button-dark-border,$button-dark-border 50%,transparent 50%);

    .title {
      background-color: white;
      margin-left: 0;
      margin-right: 0;
      height: 44px;
    }
  }
}

.bar {
  .badge-button {
    margin: 0 !important;
    padding: 0 4px !important;
    font-size: 10px;
    position: absolute !important;
    top: 5px;
    right: 3px;
  }
}

/**********
   Editable text
**********/

.text-editable:hover {
  cursor: pointer;
  @extend .positive;
}

.text-editable:hover:after {
  @extend .ion;
  content: $ionicon-var-edit;
}

.item h2 .text-editable:hover:after {
  font-size: 14px;
}

/**********
   Modals
**********/

.modal.modal-full-height {
  bottom: 0;
}

// Force modal as fullscreen, on xs screen
@media screen and (max-width: $screen-xs-max) {
  .modal {
    top: 0 !important;
    left: 0 !important;
    bottom: 0;
    min-height: 100% !important;
    width: 100% !important;
  }
}

@media screen and (max-width: $screen-sm-max) {
  .modal {
    bottom: 0;

    // Hide swiper on tablet
    .swiper-pagination {
      visibility: hidden !important;
    }
  }
  // Force 'full-height' modals to be align on top
  // Otherwise
  .modal.modal-full-height {
    top: 0;

    ion-content.keyboard-up .scroll {
      min-height: calc(100% + 67px);
    }
  }
}

@media (min-width: $screen-md) {
  .modal.modal-full-height {
    min-height: 80%;
  }
}


.modal.about .bar.bar-header .button + .title {
  left: 0 !important; /* avoid title offset on large screens, if button are 'visible-xs')'*/
}

/**********
   Item buttons
**********/

.item-button-right > .button,
.item-button-right .item-content > .button,
.item-button-right > .buttons,
.item-button-right .item-content > .buttons {
  top: 16px;

}

.item-button-right > .button.button-small,
.item-button-right .item-content > .button.button-small,
.item-button-right > .buttons .button-small,
.item-button-right .item-content > .buttons .button-small {
  font-size: 14px;
}

.item.large-button-bar {
  @extend .padding;
  @extend .text-center;
  margin-bottom: 10px;
}

/**********
   Item avatar
**********/

.item-avatar-left-padding {
  padding-left: 95px;
}

/**********
   Item thumbnail
**********/

.item-thumbnail-left-padding {
  padding-left: 106px;
}

.item.item-thumbnail-left, .item-thumbnail-left {
  min-height: 100px !important;
}

.item-thumbnail-left > i:first-child,
.item-thumbnail-left i.item-image,
.item-thumbnail-left .item-content > i:first-child,
.item-thumbnail-left .item-content i.item-image {
  color: $item-default-active-bg;
  background-color: $stable;
  overflow: hidden !important;
  font-size: 50px !important;
  line-height: 80px;
  padding: 0 15px;
  background-position: center;
  background-size: cover;
  display: inline-block;
}


@media screen and (max-width: $screen-xxs-max) {
  .card > .item.item-thumbnail-left,
  .item-thumbnail-left,
  .item-thumbnail-left .item-content {
    padding-left: 84px !important;
  }

  .item-thumbnail-left > img:first-child,
  .item-thumbnail-left img.item-image,
  .item-thumbnail-left .item-content > img:first-child,
  .item-thumbnail-left .item-content img.item-image {
    max-width: 70px;
    max-height: 70px;
  }

  .item h2 {
    font-size: 13px !important;
  }
}

/**********
   Item icons
**********/

.item-icon-left-padding {
  padding-left: 40px;
}

.item-icon-right-padding {
  padding-right: 40px;
}

.text-keep-lines {
  white-space: pre-line !important;
}

.text-italic {
  font-style: italic !important;
}


/**********
   Screen - identity Certifications
**********/

.certifications .item-divider .badge {
  top: 16px !important;
}

.certifications-lg .avatar-large {
  left: auto;
  position: relative;
  font-size: 55px !important;
  height: 88px;
  width: 88px;
  color: #D9D9D9;
  background-color: $stable-900-bg;
  border: solid 1px #D9D9D9;
}

/**********
   Specific modes (demo, readonly)
**********/

/* -- readonly mode -- */

.visible-readonly {
  display: none;
  visibility: hidden;
}

body.readonly {

  .hidden-readonly {
    display: none;
    visibility: hidden;
  }
  .visible-readonly {
    display: inherit !important;
    visibility: visible !important;
  }
}

/* -- demo mode -- */

.visible-demo {
  display: none;
  visibility: hidden;
}

body.demo {

  .hidden-demo {
    display: none;
    visibility: hidden;
  }
  .visible-demo {
    display: inherit !important;
    visibility: visible !important;
  }
}

.badge-app-mode {
  font-weight: bold;
  color: whitesmoke !important;
  top: 10px;
  padding: 0 4px;
  text-transform: uppercase;
  user-select: none;
}
#menu .badge-app-mode.left {
  position: absolute;
  font-size: 12px;
  left: 1px;
  transform-origin: 26px 5px;
  transform: rotate(-10deg);
}
#menu .badge-app-mode.right {
  position: absolute;
  font-size: 14px;
  right: 1px;
  transform-origin: 26px 5px;
  transform: rotate(10deg);
}
#menu .badge-app-mode.left:hover {
  padding: 1px 4px;
  font-size: 13px;
  transform: rotate(-15deg);
}
#menu .badge-app-mode.right:hover {
  padding: 2px 5px;
  font-size: 16px;
  transform: rotate(15deg);
}
/**********
   Help
**********/
.icon-help {
  @extend .icon;
  @extend .positive;
  @extend .ion-ios-help-outline;

  font-size: 38px;
  vertical-align: middle;
}

.icon-alert {
  @extend .icon;
  @extend .assertive;
  @extend .ion-android-alert;

  font-size: 38px;
  vertical-align: middle;
}

#menu .footer .icon-help {
  @extend .icon;
  @extend .calm;
  @extend .ion-ios-help-outline;
  font-size: 25px !important;
  position: absolute;
  left: 12px;
  top: 8px;
  z-index: 99;
}
#menu .footer .icon-help:hover {
  @extend .ion-ios-help;
  color: $positive !important;
  font-size: 31px !important;
  top: 6px;
  left: 11px;
  transform: rotate(10deg);
}

  /**********
     Help Tip
  **********/

.popover-helptip {
  background-color: rgba(68, 68, 68, 0.85) !important;
  height: auto !important;

  .button-close {
    @extend .gray;
    padding: 8px;
    height: 25px;
    font-size: 18.2px;
  }

  a,
  a:active,
  a:hover {
    text-decoration: underline;
  }
}

.popover-helptip.popover-bottom {
  margin-top: 12px !important;
}

// Empeche les clignotement du backdrop, pendant le feature tour
.nobackdrop .popover-backdrop.active {
  background-color: transparent !important;
}

.helptip-anchor {
  display: block;
  position: absolute;
  width: 100%;
  bottom: 0;
}

.helptip-anchor-center {
  @extend .helptip-anchor;
  text-align: center;
}

.helptip-anchor-left {
  @extend .helptip-anchor;
  text-align: left;
}

.helptip-anchor-right {
  @extend .helptip-anchor;
  text-align: right;
}

.helptip-anchor a:before,
.helptip-anchor-left a:before,
.helptip-anchor-right a:before {
  content: " ";
}


@media (max-width: $screen-xs-max) {
  .popover-helptip {
    width: auto;
  }
}

.popover-helptip {
  .icon.icon-left {
    @extend .pull-left;
    font-size: 30px;
    position: relative;
    top: 8px;
    left: 8px;
  }

  .icon.icon-right {
    @extend .pull-right;
    font-size: 30px;
    position: relative;
    top: 8px;
    right: 8px;
  }

  .icon.icon-center {
    @extend .pull-right;
    font-size: 30px;
    width: 100%;
    text-align: center;
    position: relative;
    top: 8px;
    height: 0;
  }

  .icon.icon-bottom-right {
    @extend .pull-right;
    font-size: 30px;
    position: relative;
    bottom: 8px;
    right: 8px;
  }

  .icon.icon-bottom-left {
    @extend .pull-left;
    font-size: 30px;
    position: relative;
    bottom: 8px;
    left: 8px;
  }

  .icon.icon-bottom-center {
    @extend .pull-right;
    font-size: 30px;
    position: relative;
    width: 100%;
    bottom: 8px;
    text-align: center;
    height: 0;
  }
}

/**********
   Profile popover
**********/

.popover.popover-profile {
  height: 200px;

  .avatar {
    height: 90px;
    width: 90px;
    left: 20px;
    top: 20px;
  }

  .avatar {
    border: solid 1px #D9D9D9;
  }

  .bar.bar-footer {
    height: 58px;

    .col .button {
      max-width: inherit;
      width: 100%;
      padding: 5px 0;
      margin: 0;
    }
  }

  .bar .button-positive {
    background-color: $positive !important;
  }

  .bar .button-stable {
    color: $dark !important;
  }
}

.bar-header .button-icon {
  .avatar {
    height: 35px;
    width: 35px;
    position: relative;
    left: 4px;
    top: 4px;
    border: solid 1px #D9D9D9;
  }

  .avatar.active {
    background-color: $stable-900-bg;
  }

  .avatar {
    height: 31px;
    width: 31px;
    position: relative;
    left: 0;
    top: 6px;
  }

}

.bar-header .button-clear.button-peer {
  display: block;
  height: 44px;
  padding-top: 6px;
  padding-bottom: 6px;
  margin: 0;

  * {
    height: 32px;
    line-height: 32px;
  }
}

// Locale flags
.bar-header .button.flag  {
  height: 44px;
  padding-top: 6px;
  padding-bottom: 6px;
  .flag-image {
    position: relative;
    bottom: 0;
    width: 32px !important;
    height: 32px !important;
  }
}

.list {
  .badge.badge-secondary,
  .badge .badge-secondary {
    font-size: 12px;
    font-style: italic;
    top: 37px;
    font-weight: normal !important;
    margin-right: 0;
    padding: 3px 8px;
  }

  .item-avatar .badge.badge-avatar {
    position: absolute !important;
    left: 60px !important;
    right: inherit !important;
    top: 15px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    font-size: 10px;
  }
}

/**********
  Login method popover
**********/

.popover.popover-login-methods {
  height: 280px;
  width: 290px;
}

.popover.popover-login-methods.auth {
  height: 204px;
}

@media (max-width: $screen-xs-max) {
  .popover.popover-login-methods {
    height: 256px;
  }

  .popover.popover-login-methods.auth {
    height: 204px;
  }
}


/**********
  Item peer
**********/

.ion-es-user-api:before {
  content: url('../img/logo.small.cs.dune.svg');
}

.ion-bma-tor-api:before {
  content: url('../img/logo_tor_32px.png');
}


.row-header {
  border-bottom: solid 1px #ccc !important;
  margin: 0;
  min-height: 28px !important;
}

.col-header {
  text-align: center;
  display: block !important;
}

.col-15 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 15%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 15%;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  max-width: 15%;
}

.col-border-left {
  border-left: solid 1px #ccc !important;
}

.col-border-right {
  border-right: solid 1px #ccc !important;
}

.ion-spinner-small {
  height: 14px;
  width: 14px;
  line-height: 14px;
  margin: 0;
  padding: 0;

  svg {
    height: 14px;
    width: 14px;
  }
}

.icon-secondary {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 16px;
  left: 25px;
  top: -7px;
}

/**********
   Drop zone component
**********/

div[drop-zone] {
  border: 2px dashed #bbb;
  border-radius: 5px;
  padding: 15px;
  text-align: center;
  font: 20pt bold;
  color: #bbb;
  margin-bottom: 20px;
  cursor: pointer;

  .list .item,
  .item {
    text-align: left;
  }
}

div[drop-zone]:hover {
  background-color: $stable-100-bg;
}

.hero .button-fab-top-right,
.hero .button-fab-top-left,
.button-fab-hero.button-fab-top-right,
.button-fab-hero.button-fab-top-left {
  top: 170px !important;
}

.button.button-fab.mini,
.bar .button.button-fab.mini {
  min-width: 40px;
  min-height: 40px;
}

.hero .button-fab-top-right.mini,
.hero .button-fab-top-left.mini,
.button-fab-hero.button-fab-top-right.mini,
.button-fab-hero.button-fab-top-left.mini {
  top: 178px !important;
}


.text-no-transform {
  text-transform: inherit;
}

.item-icon-event,
.button-icon-event {
  text-transform: inherit;
  pointer-events: none !important;

  .icon,
  .icon-event {
    pointer-events: all !important;
  }
}

/**********
  Wot identity
**********/
.hero.dark-100-bg {
  background-color: $dark-100-bg;
}

.hero.positive-900-bg {
  background-color: $positive-900-bg !important;
}

.hero.stable-bg {
  background-color: #f8f8f8 !important;
}

.popover-locked-outputs {
  .item .badge {
    right: 16px !important;
  }
}

/************************
 Animation hide/show
*************************/
.animate-show-hide.ng-hide {
  opacity: 0;
}

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
  transition: all linear 0.3s;
}

/**********
  join wizard modal
**********/
.modal iframe.iframe-license {
  width: 100%;
  height: calc(100% - 171px) !important;
}

@media screen and (max-width: $screen-xs-max) {
  .modal iframe.iframe-license {
    height: calc(100% - 104px);
  }
}

@media screen and (min-width: $screen-sm) and (max-width: $screen-sm-max) and (min-height: 600px) {
  .modal iframe.iframe-license {
    height: calc(100% - 171px);
  }
}

@media screen and (min-width: $screen-md) {
  .modal iframe.iframe-license {
    height: calc(100% - 171px);
  }

  .modal.modal-license iframe.iframe-license {
    height: calc(100% - 111px) !important;
  }
}

/**********
  Help modal
**********/
.modal.modal-help {

  .row.selected {
    @extend .energized-100-bg;

    .col:first-child {
      font-weight: bold;
    }
  }
}

@media screen and (max-width: $screen-xs-max) {
  .modal.modal-help {
    .row .col:first-child {
      font-weight: bold;
    }

    h2 {
      padding-left: 10px;
    }
  }
}

/**********
  Login modal
**********/
.modal.modal-login {

  .item.item-icon-right.item-text-wrap {

    .item-content {
      margin-right: 58px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}

/**********
   Locales popover (used by cesump API)
**********/

.popover-locales {
  height: 284px;
  width: 200px;

  .item {
    height: 48px;
    padding-left: 60px;

    .avatar {
      border-radius: 0;
    }
  }
}

/**********
   Button tabs
**********/

.buttons-tabs {
  display: block;
  height: 57px;
  border: 0;
  padding: 16px 16px 0 16px;
  overflow: hidden;

  .button.button-tab:first-child {
    border-top-left-radius: 15px;
  }

  .button.button-tab:last-child {
    border-top-right-radius: 15px;
  }

  .button.button-tab.active {
    background-color: $active;
  }
}

.buttons-tabs.border-bottom {
  border-bottom: solid 1px #ccc !important;
}

@media screen and (max-width: $screen-xs-max) {
  .buttons-tabs {
    padding: 10px 10px 0 10px;

    .button.button-tab {
      padding: 2px 10px 0 10px !important;
    }
  }
}

/* -- likes -- */
.hero .likes {
  .gray {
    color: white !important;
  }
  a.positive,
  .positive a,
  .positive i,
  .positive {
    color: $calm !important;
  }
}

.view-wallet .hero .likes a {
  user-select: none !important;
  pointer-events: none;
}

/**********
  feed (home page)
**********/

.feed {
  .card {
    background-color: rgba(0,0,0,0.3);
    color: lightgrey;
  }

  h1, h2, h3, h4, h5 {
    color: white !important;
  }

  ul {
    list-style: unset;
    padding-left: 40px;
  }
  a  {
    color: inherit;
  }

  .feed_header,
  .card .header {
    height: 25px;
    color: grey !important;
    a:hover {
      color: $positive !important;
    }
    .avatar {
      margin-top: -6px;
      margin-left: -6px;
      height: 30px;
      width: 30px;
      border: 1px solid $positive;
    }
    .avatar-left-padding {
      padding-left: 30px;
    }
  }

  .feed-title,
  .card .title {
    margin-top: 5px;
    font-size: 18pt;
    a {
      color: white !important;;
    }
  }

  .feed-content,
  .card .content {
    text-align: start;
    color: lightgrey !important;
  }
  .feed-footer,
  .card .footer {
    a:hover {
      color: $positive !important;
    }
  }
}