/*!
 * Argent CSS v0.2 (https://argent.xyz/)
 * Copyright 2018 Argent
 * Authored by Graeme Blackwood
 */
:root {
  /* Argent colour palette */
  --argent-orange: rgb(255, 135, 91);
  --argent-orange-transparent: rgba(255, 135, 91, 0.1);
  --argent-orange-wcag: rgb(243, 106, 61);
  --argent-orange-reversed: rgb(0, 120, 164);
  --argent-green-wcag: rgb(2,187,168);
  --argent-black:  rgb(51, 51, 50);
  --argent-black-transparent: rgba(51, 51, 50, 0.08);
  --argent-dark-charcoal: rgb(92, 91, 89);
  --argent-light-charcoal: rgb(143, 142, 140);
  --argent-clay: rgb(194, 192, 190);
  --argent-dark-sand: rgb(235, 233, 230);
  --argent-sand: rgb(245, 243, 240);
  --argent-mayo: rgb(250, 248, 245);

  --danger: rgb(193, 32, 38);
}

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

html,
body,
#root {
  min-height: 100vh;
  width: 100%;
  margin: 0;
}

#root {
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  -ms-flex: 1 1 auto!important;
  flex: 1 1 auto!important;
}


/* Bootstrap overrides */
.show {
  display: block;
}

.alert {
  border: 0;
  border-radius: 8px;
}

.alert-warning {
  color: var(--argent-orange-wcag);
  background-color: var(--argent-orange-transparent);
}


.logo {
  display: block;
  width: 120px;
  height: 35px;
  background-image: url("../images/argent-logo.svg");
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
}


@media (min-width: 576px) {
  .logo {
    width: 160px;
    height: 47px;
  }
}


.logo-orange-white {
  background-image: url("../images/argent-logo-orange-white.svg");
}

.logo-white-black {
  background-image: url("../images/argent-logo-white-black.svg");
}

.logo-orange-black {
  background-image: url("../images/argent-logo-orange-black.svg");
}

.ren {
  display: block;
  width: 86px;
  height: 86px;

  background-image: url("../images/ren-white.svg");
  background-repeat: no-repeat;
  background-size: cover;


  /* SVG background recolouring is not widely supported yet
  background: #ffffff;
  -webkit-mask:  url("../images/ren-white.svg") no-repeat 50% 50%;
  mask: url("../images/ren-white.svg") no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  */


  margin: 0;
}

.ren-white {
  background-image: url("../images/ren-white.svg");
}

.ren-orange {
  background-image: url("../images/ren-orange.svg");
}




.icon-medium,
.icon-twitter,
.icon-telegram,
.icon-github {
  display: block;
  width: 5vh;
  height: 5vh;
  margin-left: 1rem;
  margin-right: 1rem;

  overflow: hidden;
  text-indent: -500em;
}

.icon-medium {
  background: url("../images/icons/icon-medium.svg") no-repeat;
  background-size: cover;

  transition: transform 0.3s 0.5s ease-in-out;
}

.icon-twitter {
  background: url("../images/icons/icon-twitter.svg") no-repeat;
  background-size: cover;

  transition: transform 0.3s 0.6s ease-in-out;
}

.icon-telegram {
  background: url("../images/icons/icon-telegram.svg") no-repeat;
  background-size: cover;

  transition: transform 0.3s 0.7s ease-in-out;
}

.icon-github {
  background: url("../images/icons/icon-github.svg") no-repeat;
  background-size: cover;

  transition: transform 0.3s 0.7s ease-in-out;
}

.icon-argent-guard {
  background: url("../images/icons/icon-argent-guard-orange.svg") no-repeat;
  background-size: cover;

  transition: transform 0.3s 0.7s ease-in-out;
}

.inverted {
  color: #ffffff;
}

.inverted:focus,
.inverted:hover {
  color: #ffffff;
}

/* Co-branding */
iframe {
  width: 100%;
  height: 100%;
  border: 0;
}


.logo-ledger {
  display: block;
  width: 188px;
  height: 51px;
  background: url("../images/logo-ledger.svg") no-repeat;
  background-size: cover;
  margin: 0;
}

.app-store-buttons {
  display: flex;
  width: 270px;
  justify-content: space-between;
}

.app-store {
  display: block;
  width: 120px;
  height: 40px;
  background: url("../images/app-store.svg") no-repeat;
  background-size: cover;
  margin: 0;
}

.app-store-black {
  background: url("../images/app-store-black.svg") no-repeat;
}

.google-play {
  display: block;
  width: 135px;
  height: 40px;
  background: url("../images/google-play.svg") no-repeat;
  background-size: cover;
  margin: 0;
}

.google-play-black {
  background: url("../images/google-play-black.svg") no-repeat;
}



/* Emojihash */
.emojihash {
  display: inline-block;
  position: relative;
  font-size: 1.625em;
  letter-spacing: 0.3em;
  min-width: 7.85em;
  margin: 0.5em 0;
}



/* Global header */
body.global-header-active {
  padding-top: 3em;
}

.global-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3em;

  background: var(--argent-black);
  position: fixed;
  z-index: 1;
  top: 0;
}

.global-header .logo {
  width: 86px;
  height: 25px;
}




/* Global footer */
.global-footer {
  flex: 1;
  background: var(--argent-black);
  color: #ffffff;
}

.global-footer > .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 3em;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.global-footer a {
  margin-left: 1rem;
  margin-right: 1rem;
}

.global-footer .terms {
  margin-left: auto;
}






/*
 * Social icons – currently only used on homepage. Will go in footer in future
 */
.social-media {
  display: flex;
  align-items: center;
  justify-content: center;
}






/*
 * Font Awesome
 */
.fa-external-link-alt {
  color: var(--argent-dark-charcoal);
}





/* Wallet avatar defaults */
/* TODO: Break into a separate module and apply to the signer list and user.argent.xyz screens */

.wallet-avatar {
  display: flex;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background-color: var(--argent-orange);
  color: #ffffff;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  baseline-shift: -2px;
  position: relative;
}