/*
@font-face {
  font-family: 'Karla Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Karla Regular'), url('../fonts/google/Karla-Regular.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Karla Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Karla Italic'), url('../fonts/google/Karla-Italic.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Karla Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Karla Bold'), url('../fonts/google/Karla-Bold.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Karla BoldItalic';
  font-style: normal;
  font-weight: normal;
  src: local('Karla BoldItalic'), url('../fonts/google/Karla-BoldItalic.woff') format('woff');
  font-display: swap;
}
*/

:root {
  --color: #495057;
  --background-color: #f7f7f7;

  --fixed-header-bgc: #212529;
  --fixed-header-color: #ADB5CB;

  --heading-color: #3c6e71;
  --button-bgc: #45A2F1;
  --button-text-color: #ffffff;
  --button-border-color: #ADB5CB;
  --link-color: #45A2F1;
  --link-color-visited: #284b63;

  --wallet-button-bgc: #02B875; 

  --escrow-created-name: #02B875;

}

body {
  /* font-family: 'Karla Regular'; */
  font-size: 0.8rem;
  margin: 0 auto;
  font-display: swap;

  color: #495057;
  background-color: #ffffff;

}
/*
Dark: #212529 (Header)

Text: #495057 

Link: #45A2F1 (and Button - Blue)

Purple: #7952B3

Green: #02B875 (Button)

Lt Grey: #ADB5CB (Inactive)
*/

body.light-theme {
  background-color: #ffffff;
  color: #495057 ;

  --wallet-button-bgc: #3c6e71;

  --fixed-header-bgc: #212529;
  --fixed-header-color: #ADB5CB;

  --heading-color: #3c6e71;
  --button-bgc: #45A2F1;
  --button-text-color: #ffffff;
  --button-border-color: #ADB5CB;

  --link-color: #45A2F1;
  --link-color-visited: #284b63;

  --wallet-button-bgc: #02B875; 
  --escrow-created-name: #02B875;


}
body.dark-theme {
  background-color: #353535;
  color: #f7f7f7;

  --border-color-light: #cccccc;

  --heading-color: #60B4ED;
  --button-bgc: #284b63;
  --button-text-color: #ffffff;
  --button-border-color: #ADB5CB;

  --link-color: #3c6e71;
  --link-visited-color: #3c6e71;

  --fixed-header-bgc: #353535;
  --fixed-header-color: #f7f7f7;

  --wallet-button-bgc: #3c6e71;
  --escrow-created-name: #02B875;

}

.appContainer {
  display: grid;
  grid-template-rows: 3rem  auto auto;  /* Removed 1 after removing status bar */
  grid-template-columns: auto;
  grid-template-areas: "header" ;
}

.hiddenRow {
  padding: 0 !important;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  /*width: 120px;*/
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 0.2rem 0.5rem 0.2rem 0.5rem;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* Bootstrap Overrides */

.btn-primary {
  color: var(--button-text-color);
  background-color: var(--button-bgc);
  border-color: var(--button-border-color)
}

a {
  color: var(--link-color)
}

a:visited {
  color: var(--link-color-visited)
}

button.accordion-button {
  font-size: 0.8rem;
}

h3, h4, h5 {
  color: var(--heading-color) ; 
  font-weight: bold;
 /* margin-left: -0.25rem; */
}

h3 {
  margin: 0.5rem 0 0.5rem 0;
  font-size: 0.85rem;
}

h5 {
  margin: 0.3rem 0 0.3rem 0;
  font-size: 0.75rem;
}

/*
button {
  padding: 0.4rem 0.5rem 0.4rem 0.5rem;
  cursor: pointer;
  border-radius:0.15rem;
  outline:0;
  border: none;
  background-color: var(--button-bgc) ; 
  color: var(--button-text-color) ;
  font-size: 0.8rem;
}

button:disabled {
  background-color: lightgray;
  color: #ffffff;
}

button:hover {
  background-color: #637d8e;
  color: #ffffff;
}
*/

span.escrowCreatedName {
  font-weight:bold;
  font-size: 1.1rem;
  color: var(--escrow-created-name)
}

div.walletHeaderButton {
  margin-right: 0.4rem;
}


div.walletSelectDiv {
  margin-left: 1.5rem;
  cursor:pointer;
  display: grid; 
  grid-template-rows: auto auto;
  align-items:left;
  align-content: left;
  text-align:left;
  grid-gap: 0.7rem;
}

div.walletStatusText {
  text-align:center;
  font-size: 1rem;
  margin: 1rem 0 1rem 0;

}

button.walletHeaderButton {
  font-weight: normal;
  font-size: 0.7rem;
  max-width: 0.5fr;
  margin: 0.1rem;
  padding: 0.4rem 0.5rem 0.4rem 0.5rem;
  background-color: var(--wallet-button-bgc);
  color: #ffffff;

}


.walletButton {

  padding: 0.3rem 0.5rem 0.3rem 0.5rem;
  margin: 1rem 0 0.5rem 0;
  border-radius:0.15rem;
  outline:0;
  border: none;
  background-color: #ffffff;
}

.walletButton:hover {
  background-color: #ffffff;
}

/*
input[type=email] {
  padding:0.3rem;
  margin:0.1rem 0 0.3rem 0; 
  border-radius:0.25rem;
}

input[type=text] {
  padding:0.3rem;
  margin:0.1rem 0 0.3rem 0; 
  border-radius:0.25rem;
}

select {
  padding:0.3rem;
  margin:0.1rem 0 0.3rem 0; 
  border-radius:0.25rem;
}

textarea {
  padding:0.3rem;
  margin:0.1rem 0 0.3rem 0; 
  border-radius:0.25rem;
}
*/

div.progressPopup {

  z-index: 101;
  display: none;

  font-size: 1rem;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0rem;
  left: 0rem;
  background-color: #fff;
 /* border: 1px solid #555; */
  color: #293241;

  align-items:center;
  align-content: center;
  text-align:center;

}

div.progressText {
  font-size: 1.1rem;
  padding: 5rem 2rem 3rem 2rem;
  text-align: center;
}


div.popupWallet {

  z-index: 101;
  display: none;
  width: 70%;
  max-width: 20rem;
  position: fixed;
  top: 5rem;
  left: 2rem;
  background-color: #000;
  border: 1px solid #555;
  color: #fff;

}

.fixed-header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-area: header;
  align-items:center;
  align-content: center;
  background-color: var(--fixed-header-bgc);
  color: var(--fized-header-color);;
  font-size: 0.9rem;
  font-weight: normal;
}

header {
  position: sticky;
  top: 0;
}

.homeicon {
  font-size: 1.5rem;
  color: #fff;
  padding-right: 0.5rem;
}
.homeicon:hover {
  cursor: pointer;
}
.refreshicon {
  font-size: 1.5rem;
  padding-right: 1.2rem;
  padding-left: 1rem;
  color: greenyellow;
}
.refreshicon:hover {
  cursor: pointer;
}
.menuicon {
  font-size: 1.5rem;
  color: #ccc;
  padding-left: 1rem;
  padding-right: 1rem;
}
.menuicon:hover {
  cursor: pointer;
}
div.headerTitle {
  padding-left: 0.1rem;
  padding-top: 0.2rem;
  text-align: left;
  min-width: 60%;
  font-size: 0.8rem;
  color: var(--fixed-header-color)
}
div.headerTitle:hover {
  cursor: pointer;
}

.bigWordWrap {
 /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
 /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
 /* Instead use this non-standard one: */
  word-break: break-word;
 /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}


/* Preloader */
#preloader {
  display: none;
  top: 50%;
  left: 50%;
  position: absolute;
  color: #000;
}

#popupmenu {
  display: none;
}

/*
.popupmenuHead {
  font-size: 1.1rem;
  font-weight: bold;
  padding-left: 1.5rem;
  color: #ccc;
  line-height:3rem;
  width:80%;
  text-align:left;
}

.popupMenuSubHead {
  color: #ccc;
  padding-left: 1rem;
}
div.popupmenuItems {
  background-color: #303030;
  border-top: 1px solid #ccc;
  padding: 1rem 0 1.5rem 0;
}
.popupClose {
  color: #ccc;
  font-size: 1.6rem;
  padding: 0.6rem 1rem 0 0;
}

*/
ul.popupmenu {
  margin:0;
  padding: 0;
  line-height:1.8rem;
  list-style: none;
}
li.popupmenu {
  color: var(--link-color);
  margin: 0;
  padding-left: 2rem;
  font-size: 0.9rem;
}
li.popupmenu:hover {
  background-color: #fff;
  color: #B92773;
  font-weight:bold;
  cursor: pointer;
}
li.popupmenu:active {
  background-color: #fff;
  color: #B92773;
}
.popupicon {
  font-size: 0.8rem;
  
  padding-right: 0.5rem;
}



/* Generic Popup Section */
/*
#popupWrapper {
  z-index: 100;
  display: none;
  width: 70%;
  max-width: 20rem;
  position: fixed;
  top: 3.5rem;
  left: 2rem;
  background-color: #000;
  border: 1px solid #555;
  color: #fff;
}
.popupHeading {
  font-size: 1.1rem;
  font-weight: bold;
  color: #ccc;
  line-height:3rem;
  width:80%;
  text-align:left;
  padding-left: 1rem;
}
.popupClose {
  color: #ccc;
  font-size: 1.6rem;
  padding: 0.6rem 1rem 0 0;
  text-align:right 
}
div.popupContentSection {
  background-color: #303030;
  border-top: 1px solid #ccc;
  padding-top: 1.3rem;
}
.popupInfoText {
  padding: 0 0 0.5rem 1rem;
  color: red;
}
*/


.formLabel {
  font-size: 0.8rem;
  font-weight: bold;
}

.formSubLabel {
  font-weight: bold;
  font-size: 0.7rem;
  font-style: italic;
}

.formText {
  font-size: 0.8rem;
  font-style: italic;
}

/*
div.send1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  text-align:center;
  font-size: 0.75rem;
  padding: 0.5rem;
}
*/

div.sendAmounts {
  font-size: 0.8rem; 
  line-height: 1.2rem;

}

div.sendAmountsDiv {
  display: grid;
  grid-template-columns: 1fr 2fr ;
  align-items: left;
  text-align:left;
  grid-gap: 0.2rem 0.2rem;
  /* padding: 0.5rem; */
  margin-bottom: 0.5rem;

}

 
#app {
  margin-top: 0.5rem;
}


/* NAV OPTIONS */

div.navOptions {
  font-size: 0.7rem;
  display: grid;
  grid-template-columns: 1.2rem auto auto auto auto;
  padding: 0.6rem;
  align-items: center;
  border-bottom: 1px solid var(--border-color-light);
  background-color: #d9d9d9;
  color: #353535;
}
div.navItem {
  text-align:center;
  cursor:pointer;
  align-items: center;
}

div.navItemActive {
  text-align:center;
  cursor:pointer;
  align-items: center;
  font-weight: bold;
  color: #3c6e71; 
}

/* Receive Page */



.receiveEscrowInput:disabled {
  color: lightgray;
}

.receiveEscrowButton:disabled {
  background-color: lightgray;
}

div.sendGetWallets {
  border-top: 1px solid;
  margin-top: 4rem;
  padding-top: 0.5rem
}

div.receiveGetWallets {
  margin-top: 1rem;
  border-top: 1px solid #ccc;
  padding-top: 0.75rem
}

div.receiveWalletList {
  
  font-size: 0.8rem;
  display: grid;
  grid-template-columns:  auto auto;
  text-align:center;
  grid-gap: 0.4rem 0.4rem;
}

div.receive1 {
  padding-bottom: 0.75rem;
  font-size: 0.8rem; 
  line-height: 1.2rem;

}

/* Account Page */

div.columnHead {
  font-weight: bold;
  font-size: 0.9rem;
}

div.sectionHead {
  font-weight: bold;
  font-size: 1rem;
}

div.accountEscrows {
  margin: 0.5rem 1rem 1rem 1rem;
  font-size: 0.9rem;
  display: grid;
  grid-template-columns:  auto auto auto auto auto;
  grid-gap: 0.2rem 0.2rem;
}

div.accountAssets {

  margin: 0.5rem 1rem 1rem 1rem;
  font-size: 0.9rem;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 0.2rem 0.2rem;
  /* border: 1px solid var(--border-color-light); */

}

div.contractAssets {

  margin: 0.5rem 1rem 1rem 1rem;
  font-size: 0.9rem;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 0.2rem 0.2rem;
  /* border: 1px solid var(--border-color-light); */

}

/* Twitter User Result */

span.profileName {
  font-weight: bold;
  font-size: 0.9rem;
}

img.profileImage {
  border-radius: 50%;
}

div.userResults {
  margin-top: 1rem;
}

div.userResultSpinner {
  text-align:center;
  margin-top: 2rem;
}

div.userResult {
  display:none;
  margin-top: 0.2rem;
  border-top: 1px solid var(--border-color-light);
  font-size: 0.8rem;
  display: grid;
  grid-template-columns: 3.5rem auto ;
  padding: 0.5rem 0.1rem 0 0.1rem;
  align-items: left;
}


/* Status Bar */

div.statusbar {
  font-size: 0.7rem;
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 0.2rem 1rem 0rem 0rem;
  align-items: center;
}
div.statusbar1 {
  text-align:left;
  cursor:pointer;
  align-items: center;
  /* border-right: 1px solid var(--border-color-light); */
}
div.statusbar2 {
  cursor:pointer;
  text-align:center;
  align-items: center;
  font-style:italic;
  color: var(--author-color);
}

div.statusbar3 {
  color: var(--fixed-header-color);
  text-align:right;
  cursor:pointer;
  align-items: center;
  font-size: 0.7rem;
  padding-right: 1rem;
  /* border: 1px solid var(--border-color-light); */
}