// http://ionicframework.com/docs/v2/theming/


// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

// Material Design Sidemenu
.align-center {
  text-align: center;
}

.highlight {
  background-color: #f4f4f4;
}

.center {
  display: block;
  margin: 0 auto;
}

.vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.top-radius {
  border-radius: 10% 10% 0 0;
}

.bottom-radius {
  border-radius: 0 0 10% 10%;
}

.round {
  border-radius: 50%;
}

.transparent-header {
  // This is just to make the header transparent and button/icon with white color
  .toolbar-content,
  .back-button {
    color: white;
  }
  .toolbar-background,
  ion-navbar,
  ion-header {
    background: transparent !important;
    background-color: transparent !important;
  }
  .header-md::after,
  .toolbar-background-ios {
    background-image: none;
    border-bottom: 0;
  }
  .header-ios .toolbar-background-ios,
  .footer-ios .toolbar-background-ios {
    border: 0;
  }
  // ---
}


// Sidemenu with avatar
#menu-avatar {
  .user-avatar {
    padding: .5em;
  }
  h3,
  .label {
    color: white;
    font-weight: bold;
  }
  .item {
    background: transparent;
  }
  ion-content {
    background: linear-gradient(48deg, rgba(230, 0, 0, 0.8) 0%, rgba(230, 0, 0, 0.86) 28%, rgba(0, 0, 0, 0.98) 93%, rgba(0, 0, 0, 1) 100%);
  }
  .menu-inner {
    background: rgba(255, 255, 255, .3);
  }
}


#loggedInMenu {
  .menu-header {
    padding: 5px 15px;
    background-image: url('../assets/img/background/orange.png');
    background-size: cover;
    color: white;
    .name {
      font-weight: 500;
      margin-bottom: 3px;
      //text-align: center;
    }
    .e-mail {
      margin-top: 0;
      margin-bottom: 5px;
    }
  }
  .user-avatar {
    padding: .5em;
    //height: 12vh;
    height: 18vh;
  }
}