/* Standard elements */
html {
  font-size: 1em;
  -webkit-text-size-adjust: 1em;
  -ms-text-size-adjust: 1em;
  font-family: Roboto, Helvetica, Arial, sans-serif;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

body {
  border: 0;
  font-size: 100%;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  padding: 0;
  font-family: 'Roboto Condensed', sans-serif;
  width: 100vw;
}

h1,h2,h3,h4,h5 {
  -webkit-font-smoothing: antialiased;
 }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

div,article,aside,section {
  border: 0;
  backface-visibility: hidden;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  outline: none;
}

canvas {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

button {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

p, label, h1, h2, h3, h4, h5, h6, tr, td {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

button {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input, input:active, input:focus, input:focus-within, input:hover, input:visited,
select, select:active, select:focus, select:focus-within, select:hover, select:visited,
textarea, textarea:active, textarea:focus, textarea:focus-within, textarea:hover, textarea:visited {
  font-size: 1em;
}

input[type="range"] {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-ms-track {
  cursor: pointer;
}

input[type="checkbox"]:checked,
input[type="checkbox"]:not(:checked),
input[type="radio"]:checked,
input[type="radio"]:not(:checked) {
  display: none;
}

input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
}
input:-internal-autofill-selected {
  background-color: transparent;
}

input::placeholder {
  color: #7f8fa4;
  opacity: 0.5;
}

input::-webkit-input-placeholder {
  color: #7f8fa4;
  opacity: 0.5;
}

input::-moz-input-placeholder {
  color: #7f8fa4;
  opacity: 0.5;
}

textarea::placeholder {
  color: #7f8fa4;
  opacity: 0.5;
}

textarea::-webkit-input-placeholder {
  color: #7f8fa4;
  opacity: 0.5;
}

textarea::-moz-input-placeholder {
  color: #7f8fa4;
  opacity: 0.5;
}

textarea::-webkit-scrollbar {
  width: 10px;
	background-color: transparent;
}

textarea::-webkit-scrollbar-track {
	background-color: transparent;
}

textarea::-webkit-scrollbar-thumb {
  height: 6px;
  border: 4px solid rgba(0, 0, 0, 0);
  background-color: #ccc;
  background-clip: padding-box;
  border-radius: 7px;
}

textarea::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

textarea::-webkit-scrollbar-corner {
  background-color: transparent;
}


/* Base elements */

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

.TImageElement {
  display: block;
}

.TNavElement {
  margin: 0;
  padding: 0;
}

.TButtonElement {
  display: block;
  border: 0;
  font-size: 1em;
}

.TButtonElement:focus {
  outline: none;
  border: 0;
}

.TInputElement {
  border: 0;
  margin: 0 auto;
}

.TInputElement:focus {
  outline: none;
}

.TInputCheckBoxElement {
  border: 0;
  border-radius: 0;
  float: left;
  margin-right: .5em;
  background: transparent;
}

.TTextAreaElement {
  resize: none;
}


/* Custom Elements */

.TSwapList {
  width: 100%;
  border-spacing: 0px;
}

.TSwapListHeaderCell {
  border-width: 0px;
  padding: 0 1em;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.TSwapListHeader {
  background-color: #e6eaee;
  border-color: #e6eaee;
  color: #9C215B;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.78em;
  height: 3.2em;
  outline-color: #e6eaee;
  outline-style: solid;
  outline-width: 1px;
}

.TSwapListItem {
  background: #fffc;
  border-color: #dfe2e5;
  border-radius: 0.3em;
  border-style: solid;
  border-width: 1px;
  color: #354052;
  max-width: 80em;
  margin: 2em 0;
  width: 100%;
}

.TSwapListItem > .TTableDataCellElement {
  padding: 1em 1em;
  max-width: 27em;
  font-weight: 400;
  color: #354052;
  border-bottom: 1px solid #dfe2e5;
}


.TNtwHeading {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
}

.TNtwParagraph {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  font-size: 1.2em;
  line-height: 1.4;
  margin-top: 0.2em;
}

.TNtwWarning {
  color: #f00;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  margin: 0.2em;
}

.TNtwCustomInputContainer {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 1em 0 1em;
  overflow: visible;
  position: relative;
}

.TNtwInputText {
  border: 1px solid #abb0b2;
  border-radius: 3px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  padding: 0.5em;
  position: relative;
  margin: 1em 0 0;
}

.TNtwInputText:focus {
  border-color: #333;
}

.TNtwInputText > .TNtwIcon {
  position: absolute;
  min-width: 1em;
  min-height: 1em;
  background-color: #f00;
}

.TNtwInputPassword {
  border: 1px solid #abb0b2;
  border-radius: 3px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  padding: 0.5em;
  position: relative;
  margin: 1em 0 0;
}

.TNtwInputPassword:focus {
  border-color: #333;
}

.TNtwInputPassword > .TNtwIcon {
  position: absolute;
  min-width: 1em;
  min-height: 1em;
  background-color: #f00;
}

.TNtwInputDate {
  border: 1px solid #abb0b2;
  border-radius: 3px;
  padding: 0.5em;
  margin: 1em 0 2em;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  margin: 1em 0 0;
}

.TNtwInputDate:focus {
  border-color: #333;
}

.TNtwIcon {
  width: 1.5em;
  height: 1.5em;
  color: #fff;
}

.TNtwCloseIcon {
  height: 1em;
  width: 1em;
  padding: 1em;
  color: #4a4a4a;
}

.TNtwButton {
  border-radius: 3px;
  background-color: #74b391;
  border: 1px solid #ABB0B2;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  max-width: 10em;
  margin: 1em auto 3em;
  padding: 0.5em 1em;
  text-align: center;
  text-transform: uppercase;
}

.TNtwButton > .TNtwIcon {
  margin-right: 0.5em;
  order: -1;
}

.TNtwButton:focus {
  border: 1px solid #333;
  outline: thin dotted;
  outline-offset: -2px;
}

.TNtwButton:active {
  outline: thin dotted;
  outline-offset: -2px;
}

.TNtwTitleBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.TNtwTitleBar > .TNtwHeading {
  margin: 0.5em;
}

.TTableDataCellElement > .TNtwButton {
  margin: 0 auto;
}

.TTableDataCellElement > .TNtwButton > .TNtwIcon {
  margin-right: 0;
}

.TNtwAddButton {
  margin: 0 auto;
}

.TNtwCollapseButton {
  width: 2em;
  height: 2em;
  position: absolute;
  right: 1em;
  top: 1.35em;
  color: #000;
}

.TMainSwapBoardItem {
  background-color: #fffc;
  margin-bottom: 1em;
  padding: 1em;
  border-radius: 3px;
  border: 1px solid #e4e6e7;
  box-shadow: 1px 1px 4px #bbc1c3aa;
}

.TMainSwapBoardItem > p {
  padding: 0;
  margin: 0;
  line-height: 1.4;
  font-weight: 300;
}

.TMainSwapBoardItem > p > b {
  font-weight: 500;
}

.TMainSwapBoard {
  position: relative;
}

.TNtwSwapInnerOverlay {
  width: 75%;
  max-width: 40em;
  border: 1px solid #ABB0B2;
  border-radius: 0.5em;
  background-color: #fffe;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
}

.TNtwSwapInnerOverlay > .TNtwForm {
  display: flex;
  flex-direction: column;
  padding: 1em;
  box-sizing: border-box;
}

.TNtwSwapOverlay {
  position: fixed;
  width: 100%;
  width: 100vw;
  background-color: rgba(0,0,0,0.65);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 20;
}

/* THEMIS Dialogs */

.TNtwSwapCustomDialog {
  position: fixed;
  width: 100%;
  width: 100vw;
  left: 0;
  background-color: rgba(0,0,0,0.65);
  display: flex;
  justify-content: center;
  align-items: center;
}

.TNtwSwapDialogSimple {
  height: 100%;
  height: 100vh;
  z-index: 9999;
  left: 0;
}

.TNtwSwapCustomInnerDialog {
  width: 65%;
  position: fixed;
  max-width: 23em;
  border: 1px solid #ABB0B2;
  border-radius: 0.5em;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

.TNtwSwapCustomInnerDialog > h3 {
  text-align: center;
  padding: 1em;
  margin: 0.5em;
  color: #333;
}

.TNtwSwapCustomInnerDialog > div {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #ABB0B2;
}

.TNtwSwapCustomInnerDialog > div > button {
  background-color: #fff;
  padding: 1em;
  width: 100%;
  font-weight: 600;
  margin: 0;
}


.TNtwSwapInnerLoginDialog {
  width: 75%;
  max-width: 40em;
  border: 1px solid #ABB0B2;
  border-radius: 0.5em;
  background-color: #fffe;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
}

.TNtwSwapInnerLoginDialog > .TNtwForm {
  display: flex;
  flex-direction: column;
  padding: 0.5em;
  box-sizing: border-box;
}

.TNtwSwapInnerLoginDialog > .TNtwForm > button {
  margin: 1em auto;
}

.TNtwSwapInnerLoginDialog > .TNtwForm > div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.TNtwSwapInnerLoginDialog > .TNtwForm > div > .TNtwInputText{
  margin: 0.5em;
}

.TNtwSwapInnerLoginDialog > .TNtwForm > div > label {
  min-width: 10em;
}

.TNtwSwapLoginDialog {
  position: fixed;
  width: 100%;
  width: 100vw;
  background-color: rgba(0,0,0,0.65);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 20;
}

.TLoginPage {
  background-color: #fffc;
  border-radius: 3px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0.5em;
  width: 10%;
  min-width: 24em;
}

.TLoginPage > .TNtwHeading {
  margin-left: 0.6em;
}

.TLoginPage > .TNtwForm > button {
  margin: 1em auto;
}

.TLoginPage > .TNtwForm > div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.TLoginPage > .TNtwForm > div > .TNtwInputText{
  margin: 0.5em;
}

.TLoginPage > .TNtwForm > div > .TNtwInputPassword{
  margin: 0.5em;
}

.TLoginPage > .TNtwForm > div > label {
  min-width: 8em;
}

.TNtwForm {
  display: flex;
  flex-direction: column;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  overflow: visible;
  width: 100%;
}

.TNtwCompleteList {
  background-color: #fff;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 4;
}

.TNtwCompleteList > li {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
  list-style-type: none;
}

.TNtwCompleteList > li:hover {
  background-color: #e9e9e9;
}

.TNtwActiveItem {
  background-color: #e9e9e9;
  background-color: DodgerBlue !important;
  color: #fff;
}

.TMainAddItemMask {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.TMainAddItemMaskItem {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  margin-bottom: 2em;
}

.TMainAddItemMaskItem > .TNtwInputText {
  margin: 1em 0 0;
}

.TMainSwapList {
  margin-bottom: 2em;
  position: relative;
}

.TFilterContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1em 0;
}

.TFilterContainer > .TNtwIconButton {
  margin: 0 1em;
}

#FilterLabel {
  padding-right: 0.5em;
}

#FilterInput {
  min-width: 400px;
  flex: 1;
  margin: 1em 0;
}

.TMainSwapRegister {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.TMainPage {
  background-color: #fff8;
  border-radius: 3px;
  box-sizing: border-box;
  margin: 1em auto;
  max-width: 1000px;
  width: 100%;
  padding: 0 1em;
  text-align: left;
  overflow: visible;
}

.TPageInfo {
  background-color: #fff8;
  border-radius: 3px;
  box-sizing: border-box;
  margin: 1em auto;
  max-width: 1000px;
  width: 100%;
  padding: 0 1em;
  text-align: left;
  overflow: visible;
}

@media only screen and (max-width: 1000px) {
  .TMainPage {
    margin: 0;
    /* min-height: 100%; */
  }

  .TNtwSwapInnerOverlay {
    width: 88%;
  }
}

.TLoginScreen {
  background-image: url("bg.jpg");
  background-position: center;
  background-size: cover;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100vh;
  position: fixed;
  overflow-y: scroll;
  justify-content: center;
  align-items: center;
}

.TMainScreen {
  background-image: url("bg.jpg");
  background-position: center;
  background-size: cover;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100vh;
  position: fixed;
  overflow-y: scroll;
}