:root {
    --color-main-950: #172554;
    --color-main-900: #1e3a8a;
    --color-main-800: #1e40af;
    --color-main-700: #1d4ed8;
    --color-main: #2563eb;
    --color-main-500: #3b82f6;
    --color-main-400: #60a5fa;
    --color-main-300: #93c5fd;
    --color-main-200: #bfdbfe;
    --color-main-100: #dbeafe;
    --color-main-50: #eff6ff;
    --color-gray: #4b5563;
    --color-gray-950: #030712;
    --color-gray-900: #111827;
    --color-gray-800: #1f2937;
    --color-gray-700: #374151;
    --color-gray-600: #4b5563;
    --color-gray-500: #6b7280;
    --color-gray-400: #9ca3af;
    --color-gray-300: #d1d5db;
    --color-gray-200: #e5e7eb;
    --color-gray-100: #f3f4f6;
    --color-gray-50: #f9fafb;
    --size-button-radius-small: 3px;
    --size-button-radius-default: 8px;
    --size-button-radius-big: 16px;
    --space-1: 8px;
    --space-2: 16px;
    --app-height: 100%;
    --default-line-height: 42px
}

html {
    touch-action: manipulation
}

html,body {
    padding: 0;
    margin: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

* {
    outline: none
}

body {
    color: #1f2937;
    -webkit-user-select: none
}

.f-card {
    background: var(--color-gray-50);
    border-radius: var(--size-button-radius-small);
    margin: 12px;
    padding: 12px;
    text-align: center
}

.flex {
    display: flex
}

.flex-1 {
    flex: 1
}

.row>.item {
    float: left
}

.row :after {
    content: "";
    display: block;
    clear: both
}

.f-show {
    display: block!important
}

.f-hide {
    display: none!important
}

.f-dialog {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center
}

.f-dialog.show {
    display: block
}

.f-dialog__mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 999
}

.f-dialog__panel {
    width: 220px;
    background: #fff;
    min-height: 100px;
    z-index: 1001;
    border-radius: var(--size-button-radius-big);
    position: relative;
}

.f-alert__title {
    text-align: center;
    padding: 1em;
    font-weight: 700
}

.f-alert__text {
    text-align: center;
    padding: 0 1em;
    max-height: 480px;
    overflow: auto
}

.f-alert__buttons {
    padding: var(--space-2)
}

.f-alert__buttons .f-button {
    margin: 0
}

.f-button {
    display: inline-block;
    background: var(--color-main);
    color: #fff;
    padding: 0 var(--space-2);
    border-radius: var(--size-button-radius-default);
    margin: 0 var(--space-2);
    font-size: 16px;
    cursor: pointer;
    line-height: var(--default-line-height);
    height: var(--default-line-height)
}

.f-button .f-button__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: var(--default-line-height);
    height: var(--default-line-height);
    text-align: center
}

.f-button.f-touching {
    background: var(--color-main-500)
}

.f-button-block {
    text-align: center;
    display: block
}

.f-button-plain {
    background: var(--color-gray-100);
    color: var(--color-gray-800)
}

.f-button-plain.f-touching {
    background: var(--color-gray-50);
    color: var(--color-gray-400)
}

.f-button-disabled {
    background: var(--color-gray-50);
    color: var(--color-gray-400);
    cursor: not-allowed
}

.f-button .f-button__icon {
    display: inline-block;
    vertical-align: top;
    font-size: 22px
}

.f-button-text {
    background: none;
    color: var(--color-main);
    padding: 0 8px;
    margin: 0
}

.f-button-text.f-touching {
    background: var(--color-main-50);
    background: none;
    color: var(--color-main-400)
}

body {
    color: #303133;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

.wrap {
    background: #fff;
    padding: 10px 15px;
    border-radius: 3px
}

@media (max-width: 700px) {
    body,html {
        padding:0;
        margin: 0
    }
}

@media (min-width: 701px) {
    body {
        background:#fafafa
    }

    .wrap {
        width: 670px;
        margin: 0 auto;
        border: 1px solid #F2F6FC
    }
}

#list img {
    width: 100%;
    display: block
}

html,body {
    height: 100%
}

.bottom {
    width: 100%
}

.bottom img {
    display: block;
    width: 136px;
    margin: 80px auto 32px
}

.item {
    display: block;
    margin: 16px 0;
    border-radius: 25px;
    overflow: hidden
}

.f-dialog__panel {
    width: 80%!important;
    max-width: 480px
}

.f-alert__title {
    color: #997261;
    padding: 5px
}

.f-alert__text {
    text-align: left;
    top: 30px;
    max-height: calc(100vh - 180px);
    overflow: auto
}

.f-alert__text h4 {
    margin: .25em 0
}

.f-alert__text p {
    text-indent: 2em;
    text-align: justify;
    margin: .25em 0
}

.header {
    text-align: center;
    color: #555;
    letter-spacing: 2px;
    font-size: 14px
}

.logo {
    width: 64px;
    margin: 30px auto 0;
    display: block
}