/* ========================
INCLUDE STYLES AND COMPONENTS
===================== */

// 1. Abstracts
@import 'abstracts/mixins';
@import 'abstracts/variables';

// 2. Base stuff
@import 'base/helpers';
@import 'base/typography';

// 3. Components
@import 'components/navigation';
@import 'components/buttons';
@import 'components/forms';
@import 'components/elements';
@import 'components/items';
@import 'components/lists';

// 4. Layout
@import 'layout/spacing';
@import 'layout/layout';
@import 'layout/layout-dark';
@import 'layout/responsive';


.ps-block--earning-count small {
    font-weight: 600;
    color: #666;
    font-size: 16px
}

.ps-block--earning-count h3 {
    margin-bottom: 0;
    font-size: 30px
}

.ps-block--stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    border-radius: 20px;
    max-width: 300px
}

.ps-block--stat > * {
    flex-basis: 100%
}

.ps-block--stat p {
    margin-bottom: 0;
    color: #999
}

.ps-block--stat h4 {
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 600
}

.ps-block--stat h4 small {
    margin-left: .5em;
    font-size: 14px
}

.ps-block--stat h4 i {
    margin-right: .25em
}

.ps-block--stat h4 span {
    font-weight: 600
}

.ps-block--stat .asc {
    color: #80bc00
}

.ps-block--stat .desc {
    color: #fc6b00
}

.ps-block--stat .ps-block__left {
    max-width: 50px
}

.ps-block--stat .ps-block__left span {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: #fff
}

.ps-block--stat .ps-block__left i {
    color: #fcb800;
    font-size: 20px
}

.ps-block--stat .ps-block__content {
    padding-left: 28px
}

.ps-block--stat.yellow {
    background-color: #fcf9ef
}

.ps-block--stat.pink {
    background-color: #f9ece5
}

.ps-block--stat.green {
    background-color: #f0f5e7
}


.ps-card .ps-card__morelink {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 500;
    line-height: 1em;
    color: #09f
}

.ps-card .ps-card__morelink i {
    transform: translateY(1px);
    margin-left: .25em;
    font-size: .85em;
    line-height: 1em
}

.ps-card .ps-card__morelink:hover {
    color: #fcb800
}

.ps-card .ps-card__header {
    padding-bottom: 30px
}

.ps-card .ps-card__header h4 {
    font-size: 22px;
    font-weight: 600;
    color: #222;
    margin-bottom: 0
}

.ps-card .ps-card__footer {
    padding-top: 30px
}

.ps-card--small .ps-card__header h4 {
    font-size: 16px;
    font-weight: 500
}

.ps-card--statics .ps-card__header {
    position: relative;
    display: flex;
    justify-content: space-between
}

.ps-card--statics .ps-card__sortby {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center
}

.ps-card--statics .ps-card__sortby .form-group--select .form-control {
    border: none;
    height: 30px
}

.ps-card--statics .ps-card__sortby .form-group--select i {
    right: 0
}

.ps-card--statics .ps-block--stat {
    margin-bottom: 15px
}

.ps-card--statics .ps-block--stat:last-child {
    margin-bottom: 0
}

.ps-card--top-country figure {
    position: relative;
    padding-left: 25px
}

.ps-card--top-country figure:before {
    content: '';
    position: absolute;
    top: .5em;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #fcb800
}

.ps-card--top-country figure strong {
    font-weight: 600
}

.ps-card--top-country figure.yellow:before {
    background-color: #fcb800
}

.ps-card--top-country figure.red:before {
    background-color: #fc6b00
}

.ps-card--top-country figure.green:before {
    background-color: #80bc00
}

.ps-card--top-country figure.cyan:before {
    background-color: #a6d9d0
}

.ps-card--top-country img {
    display: block;
    margin-bottom: 10px
}

.ps-card--sale-report .ps-card__footer p {
    margin-bottom: 0;
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    color: #222
}

.ps-card--sale-report .ps-card__footer p:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #fcb800
}

.ps-card--sale-report .ps-card__footer a {
    display: block;
    text-align: right
}

.ps-card--sale-report .ps-card__footer a i {
    position: relative;
    top: 2px
}

.ps-card--order-information .ps-card__content strong {
    font-weight: 500;
    color: #222
}

.ps-card--order-information .ps-card__content h5 {
    font-weight: 600
}

.ps-card--earning .ps-card__information {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center
}

.ps-card--earning .ps-card__information i {
    color: #666;
    font-size: 30px
}

.ps-card--earning .ps-card__information strong {
    font-weight: 600;
    color: #222;
    font-size: 24px
}

.ps-card--earning .ps-card__information small {
    font-size: 16px
}

.ps-card--earning .ps-card__status {
    padding-top: 30px;
    padding-left: 30px
}

.ps-card--earning .ps-card__status p {
    position: relative;
    padding-left: 20px
}

.ps-card--earning .ps-card__status p strong {
    margin-right: 30px
}

.ps-card--earning .ps-card__status p:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%
}

.ps-card--earning .ps-card__status p.yellow:before {
    background-color: #fcb800
}

.ps-card--earning .ps-card__status p.red:before {
    background-color: #fc6b00
}

.ps-card--earning .ps-card__status p.green:before {
    background-color: #80bc00
}

.ps-card--earning .ps-card__chart {
    position: relative;
    z-index: 10
}

@media (min-width: 1200px) {
    .table-responsive {
        overflow-x: initial
    }
}

.ps-table {
    background-color: #fff
}

.ps-table .dropdown-menu {
    padding: 0
}

.ps-table .dropdown-menu a.dropdown-item {
    font-size: 13px
}

.ps-table strong {
    font-weight: 600
}

.ps-table thead {
    border-bottom: 1px solid #ededed
}

.ps-table thead tr th {
    border: none;
    color: #999;
    background-color: #fff
}

.ps-table tbody tr td {
    padding: 12px 10px;
    border: none;
    margin: 0 auto;
    vertical-align: middle
}

.ps-table tbody tr td:last-child {
    text-align: right
}

.ps-table tbody tr:nth-child(even) td {
    background-color: #f3f4f8
}

.ps-dashboard .ps-card {
    margin-bottom: 30px
}

.ps-dashboard .ps-section__left {
    padding-right: 0
}

.ps-dashboard .ps-section__left .ps-card {
    margin-bottom: 60px
}

.ps-dashboard .ps-section__right .ps-block--stat {
    margin: 0 auto 20px
}

@media screen and (min-width: 1200px) {
    .ps-dashboard {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: flex-start
    }
    .ps-dashboard > * {
        flex-basis: 100%
    }
    .ps-dashboard .ps-section__left {
        padding-right: 30px
    }
    .ps-dashboard .ps-section__left .ps-card {
        margin-bottom: 30px
    }
    .ps-dashboard .ps-section__right {
        max-width: 300px;
        padding-left: 30px;
        border-left: 1px solid #e6e6e6
    }
}

.btn-sm {
    i {
        vertical-align: initial;
    }
}

@media screen and (min-width: 1680px) {
    .ps-dashboard .ps-section__left {
        padding-right: 75px
    }
    .ps-dashboard .ps-section__right {
        max-width: 380px;
        padding-left: 80px
    }
}

.main-header {
    .vendor-name {
        vertical-align: top;
        margin-top: 10px;
        display: inline-block;
    }

    .dropdown-toggle {
        &:after {
            top: 45%;
        }
    }
}
