.paragraph {
    font-family: Helvetica, Arial, sans-serif;
    color: #505072
}

.title {
    font-family: Helvetica, Arial, sans-serif !important;
}


.table {
    width: 100%;
    font-family: var(--font);
    background: var(--table-bg-color);
    border-color: var(--table-border-color);
}

.table .is-striped {
    tr {
      &:not(.is-selected):nth-child(even) {
        background: var(--table-striped-bg-color);
      }
    }
}

.table th {
    padding: 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    border-color: var(--table-border-color);
    color: var(--table-th-color);
    font-family: Helvetica, Arial, sans-serif !important;
}

.table td {
    vertical-align: middle;
    padding: 0.75rem;
    border-color: var(--table-border-color);
  
    &.is-default {
      color: var(--light-text);
    }
  
    &.is-medium {
      color: #505072;
      font-family: Helvetica, Arial, sans-serif !important;
    }
  
    &.is-main {
      color: var(--primary);
    }
  
    &.is-blue {
      color: var(--info);
    }
  
    &.is-green {
      color: var(--success);
    }
  
    &.is-orange {
      color: var(--orange);
    }
  
    &.is-red {
      color: var(--red);
    }
}

.nft-details-wrapper {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.nft-preview-holder {
    position: sticky;
    top: 110px;

    img {
        display: block;
        width: 100%;
        border-radius: 0.85rem;
    }
}

.nft-info {
    background: var(--card-bg-color);
    border: 1px solid var(--card-border-color);
    border-radius: 1rem;
    margin-left: auto;
    transition: box-shadow 0.3s;
    height: 100%;

    .nft-info-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.75rem 1.75rem 0;

        .action {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            padding: 0;
            background: var(--wrap-bg-color);
            border: 1px solid var(--wrap-border-color);
            height: 36px;
            width: 36px;
            border-radius: 50%;
            margin-left: 0.5rem;
            color: var(--primary);
            cursor: pointer;
            transition: box-shadow 0.3s;

            &:hover {
                box-shadow: var(--spread-shadow);
            }
        }
    }

    .nft-info-price {
        padding: 1rem 1.75rem;
        font-family: var(--font);

        .eth-price {
            font-size: 1.1rem;
            font-weight: 600;
        }

        .collection-rank,
        .dollar-price {
            font-size: 0.9rem;
            color: var(--light-text);
        }
    }

    .nft-info-description {
        padding: 0 1.75rem;
    }

    .nft-info-links {
        display: flex;
        align-items: center;
        padding: 2rem 1.75rem;

        .nft-info-link {
            flex: 1 1 0;

            > span {
                font-family: var(--font);
                font-size: 0.85rem;
                color: var(--light-text);
            }

            .nft-info-link-inner {
                display: flex;
                align-items: center;

                > span {
                    color: var(--title-color);
                    font-weight: 500;
                    font-size: 0.9rem;
                    font-family: var(--font);
                    margin-left: 0.5rem;
                }
            }
        }
    }

    .nft-info-tabs {
        padding: 0 1.75rem 1.75rem;

        .nft-info-tabs-inner {
            background: var(--wrap-muted-color);
            border-radius: 0.85rem;
            padding: 1rem;
            :deep(.tabs) {
                font-size: 0.9rem;
            }

            .active-bids {
                .active-bid {
                    display: flex;
                    align-items: center;

                    .meta {
                        margin-left: 0.5rem;

                        span {
                            display: block;
                            font-family: var(--font);

                            &:first-child {
                                font-size: 0.9rem;
                                color: var(--title-color);
                                font-weight: 500;
                            }

                            &:nth-child(2) {
                                font-size: 0.8rem;
                                color: var(--light-text);
                            }
                        }
                    }

                    &:not(:last-child) {
                        margin-bottom: 0.75rem;
                    }
                }
            }

            .current-bid {
                display: flex;
                background: var(--card-bg-color);
                border-radius: 0.75rem;
                margin-top: 1.5rem;
                font-family: var(--font);
                box-shadow: var(--light-box-shadow);

                .small-label {
                    font-size: 0.85rem;
                    color: var(--light-text);
                }

                .highest-bid {
                    flex: 1 1 0;
                    border-right: 1px solid var(--card-border-color);
                    padding: 1rem;
                    font-family: var(--font);

                    .highest-bid-value {
                        display: block;

                        .highest-bid-dollar,
                        .highest-bid-eth {
                            display: block;
                        }

                        .highest-bid-eth {
                            font-weight: 700;
                            font-size: 1.25rem;
                        }

                        .highest-bid-dollar {
                            color: var(--medium-text);
                            font-size: 0.9rem;
                        }
                    }
                }

                .bid-countdown {
                    flex: 1 1 0;
                    padding: 1rem;

                    .auction-timer {
                        display: flex;

                        .timer-block {
                            text-align: center;

                            span {
                                display: block;
                                font-family: var(--font);

                                &:first-child {
                                    font-size: 1.1rem;
                                    font-weight: 500;
                                    color: var(--title-color);
                                }

                                &:nth-child(2) {
                                    font-size: 0.7rem;
                                    color: var(--light-text);
                                }
                            }

                            &:not(.is-separator) {
                                flex: 1 1 0;
                            }
                        }
                    }
                }
            }
        }
    }

    .nft-info-action {
        padding: 0 1.75rem 1.75rem;
        :deep(.button) {
            flex: 1 1 0;
        }
    }

    &:hover {
        box-shadow: var(--spread-shadow);
    }
}

.job-wrapper {
    padding-bottom: 4rem;

    .back-link {
        font-family: var(--font);
        display: flex;
        align-items: center;
        color: var(--primary);

        .iconify {
            margin-right: 0.5rem;
            transition: transform 0.3s;
        }

        &:hover {
            .iconify {
                transform: translateX(-0.25rem);
            }
        }
    }

    .job-header {
        display: flex;
        align-items: center;
        padding: 0 0 2.5rem;
        border-bottom: 1px solid var(--card-border-color);

        .left {
            display: flex;
            align-items: center;

            .job-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 80px;
                width: 80px;
                background: var(--wrap-bg-color);
                border: 1px solid var(--wrap-border-color);
                border-radius: 50%;
                box-shadow: var(--light-box-shadow);

                img {
                    display: block;
                    width: 68px;
                    height: 68px;
                    border-radius: 50%;
                }
            }

            .meta {
                margin-left: 1rem;
                line-height: 1.2;

                .job-title {
                    font-family: var(--font-alt);
                    font-size: 1.75rem;
                    font-weight: 700;
                }

                .job-subtitle {
                    font-family: var(--font);
                    font-size: 1rem;
                    font-weight: 400;
                    color: var(--light-text);

                    .iconify {
                        font-size: 0.9rem;
                    }
                }
            }
        }

        .right {
            margin-left: auto;
        }
    }

    .job-body {
        padding-top: 2.5rem;

        .column.is-7 {
            border-right: 1px solid var(--wrap-border-color);
            padding-right: 4rem;
        }

        h3 {
            font-family: var(--font-alt);
            font-weight: 600;
            font-size: 1.15rem;
            color: var(--title-color);
            margin-bottom: 0.75rem;
        }

        :deep(p),
        p {
            font-family: var(--font);
            font-size: 1rem;
            color: var(--light-text);
        }

        .requirements-list {
            list-style-type: none;
            font-family: var(--font);
            font-size: 1rem;
            color: var(--medium-text);
            margin-bottom: 2rem;
            padding-top: 0.75rem;
            padding-left: 0;

            li {
                display: flex;
                align-items: center;
                margin-bottom: 0.75rem;

                .block-icon {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 30px;
                    width: 30px;
                    min-width: 30px;
                    border-radius: 50%;
                    background: var(--wrap-muted-color);
                    color: var(--primary);
                    margin-right: 10px;

                    .iconify {
                        font-size: 0.8rem;
                    }
                }
            }
        }

        .recommended-skills {
            padding: 1.5rem 0;

            .skill-block {
                display: flex;
                align-items: center;
                margin-bottom: 1.5rem;

                img {
                    display: block;
                    height: 40px;
                    width: 40px;
                    min-width: 32px;
                    border-radius: 50%;
                    background: var(--wrap-muted-color);
                }

                p {
                    font-family: var(--font);
                    font-size: 0.95rem;
                    color: var(--medium-text);
                    margin-left: 16px;
                    margin-bottom: 0;
                }
            }
        }

        .apply-card {
            position: sticky;
            top: 100px;
            background: var(--card-bg-color);
            border: 1px solid var(--card-border-color);
            border-radius: 0.75rem;
            padding: 2rem;
            box-shadow: var(--light-box-shadow);

            .action {
                .button {
                    height: 48px;
                }
            }
        }
    }
}

@media (max-width: 767px) {
    .nft-info {
        .nft-info-head {
            flex-direction: column-reverse;
            align-items: flex-start;
            padding: 1.25rem 1.25rem 0;

            .actions {
                margin-left: auto;
            }

            .action {
                margin: 0 0.25rem 0.75rem;
            }
        }

        .nft-info-action,
        .nft-info-description,
        .nft-info-links,
        .nft-info-price,
        .nft-info-tabs {
            padding-left: 1.25rem;
            padding-right: 1.25rem;
        }

        .nft-info-tabs {
            .nft-info-tabs-inner .current-bid {
                flex-direction: column;

                .highest-bid {
                    border-right: none;
                    border-bottom: 1px solid var(--card-border-color);
                }
            }
        }
    }

    .job-wrapper {
        .job-header {
            flex-direction: column;

            .left {
                flex-direction: column;
                text-align: center;

                .job-icon {
                    margin-bottom: 0.75rem;
                }

                img {
                    height: 60px;
                    width: 60px;
                    min-width: 60px;
                }

                .meta {
                    margin-left: 0;
                }
            }

            .right {
                margin: 20px auto 0;

                .button {
                    min-width: 240px;
                }
            }
        }

        .job-body {
            .column.is-7 {
                padding-right: 0.5rem;
                border: none;
            }
        }

        > .button-wrap {
            text-align: center;
        }
    }
}

.text-block {
    white-space: pre-wrap; // or pre-line
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .nft-info {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .nft-preview-holder {
        img {
            width: 100%;
        }
    }
}