body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace
}

.header {
    z-index: 0;
    height: 170px;
    display: flex;
    flex: 1 1;
    background: #e9f2ff;
    margin-bottom: 55px;
    position: relative;
    align-items: center;
    justify-content: center;
    text-align: center
}

.header .bg-img {
    height: 170px;
    width: 100%;
    margin-top: 85px
}

.header .logo-img {
    background-color: transparent;
    position: absolute;
    height: 66px;
    width: 102px;
    z-index: 999999999;
    align-self: center;
    justify-content: center;
    margin-top: 10px
}

.tab-list-item {
    list-style: none;
    margin-bottom: -1px;
    padding: .5rem .75rem;
    color: #6a737d;
    font-size: 14px;
    display: flex;
    flex: 1 1;
    justify-content: center
}

.tab-list-active {
    border-bottom: 2px solid #037dd6;
    color: #037dd6
}

.tab-list {
    border-bottom: 1px solid #d6d9dc;
    padding-left: 0;
    display: flex;
    flex: 1 1;
    flex-direction: row
}

.tab-content {
    display: flex;
    flex: 1 1;
    padding-left: 8px;
    padding-right: 8px
}

.autocomplete {
    position: absolute;
    top: 163px;
    z-index: 999999;
    height: 42px;
    left: 16px;
    right: 16px;
    background: #fff;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .25);
    border-radius: 20px;
    padding-left: 16px;
    padding-right: 16px;
    display: flex
}

.autocomplete-input {
    width: 100%;
    font-size: 16px;
    outline-width: 0;
    border: 0;
    -webkit-appearance: none
}

.dapp-category-container {
    display: flex;
    flex: 1 1;
    min-width: 50%
}

.dapp-category {
    display: flex;
    flex: 1 1;
    height: 64px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    border-radius: 8px;
    text-align: center;
    align-items: center;
    min-width: 150px;
    margin: 7px;
    padding-left: 15px;
    padding-right: 8px
}

.dapp-category:nth-child(2n) {
    margin-right: 0
}

.dapp-category-icon {
    font-size: 32px;
    line-height: 32px;
    width: 32px;
    height: 32px
}

.dapp-category-name {
    display: flex;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #24292e;
    padding: 8px
}

.explore-dapps {
    display: flex;
    flex: 1 1;
    flex-direction: row;
    padding-bottom: 18px;
    flex-wrap: wrap
}

.dapp {
    display: flex;
    margin-bottom: 15px;
    padding: 10px 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    border-radius: 8px;
    flex-direction: row
}

.dapp:active {
    opacity: .5
}

.dapp-logo {
    margin-top: 2px;
    width: auto;
    min-width: 48px;
    height: 48px;
    border-radius: 9px;
    margin-right: 16px
}

.dapp-logo-small {
    min-width: 32px;
    height: 32px
}

.dapp-name {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    align-items: center;
    color: #24292e;
    text-align: left;
    margin-bottom: 3px;
    margin-top: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.dapp-name-small {
    font-size: 16px;
    line-height: 22px
}

.dapp-desc {
    margin-top: 0;
    margin-bottom: 0;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    text-align: left;
    color: #6a737d
}

.dapp-content {
    width: 80%
}

.dapp-url {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    text-align: left;
    color: #037dd6;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block
}

.dapp-close {
    width: 16px;
    height: 16px;
    padding: 5px;
    position: absolute;
    right: 0;
    margin-right: 17px;
    margin-top: -5px;
    text-align: center;
    background-color: transparent;
    display: block;
    box-sizing: content-box;
    border: 0
}

.favorites-empty {
    min-height: 255px;
    display: flex;
    flex: 1 1;
    align-items: center;
    justify-content: center
}

.favorites {
    width: 100%
}

.dapp {
    margin-left: 8px;
    margin-right: 8px
}

.take-a-tour-wrapper {
    position: relative;
    display: flex;
    flex: 1 1;
    margin-bottom: 30px
}

.take-a-tour {
    margin-left: 16px;
    display: flex;
    flex: 1 1;
    height: 48px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    padding: 16px
}

.take-a-tour,
.take-a-tour-logo {
    margin-right: 16px;
    border-radius: 8px
}

.take-a-tour-logo {
    width: 38px;
    height: 38px;
    padding: 5px;
    box-shadow: 0 0 4px rgba(0, 0, 0, .25)
}

.take-a-tour-content {
    display: flex;
    flex: 1 1;
    flex-direction: column
}

.take-a-tour-content h3 {
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    margin-bottom: 5px
}

.take-a-tour-content h3,
.take-a-tour-content p {
    display: flex;
    flex: 1 1;
    color: #24292e;
    font-family: Roboto;
    font-style: normal
}

.take-a-tour-content p {
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
    text-align: left;
    margin-top: 0
}

.take-a-tour-close {
    width: 16px;
    height: 16px;
    padding: 5px;
    position: absolute;
    right: 0;
    margin-right: 22px;
    margin-top: 10px;
    text-align: center;
    background-color: transparent;
    display: block;
    box-sizing: content-box;
    border: 0
}

.navbar {
    background-color: #fff;
    display: flex;
    flex: 1 1;
    flex-direction: row;
    margin-bottom: 15px
}

.navbar-back {
    position: absolute;
    margin: 16px;
    border: 0;
    background-color: transparent;
    padding-top: 5px;
    padding-bottom: 5px
}

.navbar h1 {
    margin-top: 18px;
    display: flex;
    flex: 1 1;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #000
}

body {
    background-color: #f5f7f8;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.App {
    font-family: Roboto, sans-serif;
    padding-bottom: 0;
    max-width: 768px;
    margin: auto;
    position: relative
}

a {
    text-decoration: none
}

a:active {
    opacity: .5
}

button:focus {
    outline: 0
}

button:active {
    opacity: .5
}

.animated-wrapper-rule {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    z-index: 99999999
}

.category-wrapper {
    margin-left: 15px;
    margin-right: 15px;
    padding-bottom: 15px
}

@media only screen and (max-width:321px) {
    body {
        overflow-x: hidden
    }
    .dapp-category {
        width: 136px;
        min-width: 0
    }
}

/*# sourceMappingURL=main.e61f8f4f.chunk.css.map */