main {
    float:left;
    clear:left;
    width:100%;
	padding:0 var(--global-padding-sides);
}

h1 {
	font-size:6em;
	font-weight:100;
	text-align: center;
    text-transform: capitalize;
}

h2 {
    font-size:3em;
    font-weight: 100;
}

.login,
.forgot {
    margin:5% auto;
    display:block;
    width:500px;
    max-width:100%;
    background-color:var(--bgblue);
    padding:3em;
    box-shadow:5px 0 5em var(--darkblue);
    border-radius:0.5em;
}

    input,
    textarea {
        margin-bottom: 1em;
        line-height:1.6;
    }

    label {
        margin-bottom:0.5em;
        font-size:1.4em;
    }

        label span {
            opacity:0.4;
        }

    .alt a {
        background-color:var(--darkblue);
        padding:1em;
        margin:0 0.5em 0 0;
        text-decoration: none;
    }

    .login .submit-btn,
    .forgot .submit-btn {
        cursor: pointer;
        margin:1em 0 3em;
        padding:1.5em;
    }

    .forgot .submit-btn {
        margin-bottom:0;
    }

.account {
    display:grid;
    grid-template-columns: 1fr 4fr;
    grid-gap:3em;
}    

    .account .items {
        display:grid;
        grid-template-columns:1fr;
        grid-gap:1em;
    }

    .account .item {
        display:grid;
        grid-template-columns: 75px 1fr 120px;
        grid-gap:1em;
        padding-bottom:1em;
        border-bottom:1px dotted var(--blue);
    }

        .account .item:last-of-type {
            padding-bottom:0;
            border-bottom:0;
        }

        .account .item > img {
            width:100%;
            border-radius:0.5em;
        }

        .account .item h3 {
            font-size:1.6em;
            margin:0;
        }

        .account .item a {
            text-decoration: none;
        }

        .account .item a:hover {
            text-decoration: underline;
        }

        .account .item p {
            margin:0;
        }

    .account .right {
        display:Grid;
        grid-template-columns: repeat(12,1fr);
        grid-gap:1em;
        grid-auto-flow: dense;
    }

    .new-alert,
    .upgrade {
        display:grid;
        grid-template-columns: 75px 1fr 150px;
        grid-gap:3rem;
        grid-column: 1/-1;
    }

        .new-alert h2,
        .upgrade h2 {
            margin-bottom:0;
        }

        .new-alert .blue-btn,
        .upgrade .blue-btn {
            width:100%;
        }

#hello {
    font-size:3em;
    line-height:1.1;
}

.actions {
    margin-bottom:3em;
}

    .actions a {
        float:left;
        clear:left;
    }

.stats {
    display:grid;
    grid-template-columns: 1.5fr 1fr;
    grid-gap:1em;
    grid-column: 1/-1;
}

    .chart {
        background-color:var(--darkblue);
        padding:2em 2em 1em 2em;
        display:grid;
        grid-gap:1px;
        border-radius:0.5em;
    }

    .stats .chart {
        position:relative;
        height:145px;
        border:0;
    }

    .stats .hours,
    .stats .stats-days {
        border:1px solid #ddd;
        border-radius:1em;
        margin-bottom:5em;
    }

        .x-axis {
            display:grid;
            grid-gap:1px;
            height:30px;
            padding:0 2em 2em 2em;
        }

            .x-axis p{
                text-align: center;
                margin:0;
                line-height:1;
            }

    .chart > div {
        position:relative;
        display:grid;
        grid-template-rows: 1fr 1.5em;
        grid-gap:5px;
        transition:background-color 0.5s ease;
    }

        .timeperiod {
            position:relative;
        }

        .bar {
            position:absolute;
            width:100%;
            left:0;
            bottom:0;
            background-color:var(--blue);
            border-radius:3px 3px 0 0;
            transition:background-color 0.5s ease;
        }

        .chart > div:hover {
            background-color:#fff1;
            border-radius:3px;
        }

            .timeperiod:hover .bar {
                background-color:var(--beige);
            }

            .chart > div:hover p.day {
                color:var(--beige);
            }

        .month,
        .day {
            border-left:1px solid var(--bgblue);
        }

        .bar.now {
            opacity:0.6;
        }

        .hover {
            display: none;
            position: absolute;
            bottom:calc(100% + 0.5em);
            background-color:var(--darkblue);
            border:1px solid var(--blue);
            border-radius:0.5em;
            padding:0.25em;
            text-align: center;
            left:50%;
            width:120px;
            transform:translateX(-50%);
        }

            .hover p {
                margin:0;
            }

        .timeperiod:hover .hover {
            display:block;
            line-height: 1;
        }

        .monthlabel {
            position:absolute;
            font-size:1.1em;
            margin-left:0.25em;
            line-height:1;
            z-index:1;
        }

        .chart .day {
            color:var(--blue);
            width:100%;
            text-align: center;
            font-size:1em;
            border-left:0;
            margin:0;
            line-height:1;
            transition:color 0.5s ease;
        }

            .chart .day.first {
                border-left:1px solid var(--bgblue);
            }

    .stats .numbers {
        background-color:var(--darkblue);
        padding:2em;
        display:grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
        grid-gap:1em;
        border-radius:0.5em;
        text-align: center;
    }
    
        .large_num,
        .medium_num {
            font-size:7em;
            font-weight:100;
            line-height:1;
            margin:0;
        }
    
        .medium_num {
            font-size:4em;
            color:var(--lblue);
        }

        .numbers p {
            text-transform: capitalize;
            margin:0;
            line-height:1.2;
            color:var(--lblue);
        }

        .numbers .large_num,
        .large_num ~ p {
            color:var(--beige);
        }

.blue-box {
    display: block;
    float:left;
    clear:left;
    width: 100%;
    background-color: var(--bgblue);
    padding: 3em;
    box-shadow: 5px 0 5em var(--darkblue);
    border-radius: 0.5em;
    margin-bottom:1em;
}

.blue {
    color:var(--lblue);
}

.faves,
.pop {
    grid-column:span 6;
}

    .faves .item {
        grid-template-columns: 40px 1fr;
    }

        .faves p.price {
            color:var(--lblue);
        }

    .image img {
        border-radius:0.25rem;
    }

.popular .item {
    grid-template-columns: 40px 1fr min-content 100px;
    margin-bottom:1em;
}

    .popular .item-stats {
        display:grid;
        grid-template-columns: 1fr;
        grid-gap:0.5em;
    }

        .popular .item-stats > div {
            display:grid;
            grid-template-columns: 1fr 1.25em;
            grid-gap:0.5em;
        }

        .popular .item-stats img {
            width:1.5em;
            align-self:center;
        }

        .popular .item-stats p {
            line-height:1;
            margin:0;
            text-align: right;
            align-self: center;
        }

    .pop-bars {
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap:0.5em;
    }

    .fave-bar {
        height:100%;
        background-color:var(--blue);
        border-radius:0 0.5em 0.5em 0;
    }

    .view-bar {
        height:100%;
        border:1px solid var(--blue);
        border-radius:0 0.5em 0.5em 0;
    }

.popup,
.stats-popup {
    display:none;
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    background-color:#000a;
    backdrop-filter: blur(10px);
    z-index:100;
}

    .popup.show {
        display:block;
    }

    .popup .inner,
    .stats-popup .inner {
        position:absolute;
        width:800px;
        max-width:90%;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        background-color:var(--bgblue);
        padding:3em;
        border-radius:0.5em;
    }

    .popup h2 {
        margin-bottom:0.5em;
    }
    
    .popup ul,
    .popup ol {
        margin:2em;
    }

        .popup li {
            padding-left:1em;
            font-size:1.4em;
            margin-bottom:0.5em;
        }

    .popup p {
        font-size: 1.4em;
        margin-bottom:1em;
    }

    .popup input {
        margin-bottom:1em;
    }

    .popup .submit-btn,
    .popup .submit {
        cursor: pointer;
        /* margin:1em 0 0; */
        padding:1.5em;
        width:200px;
        float:right;
        transition:background-color 0.25s ease-in-out;
    }

        .popup .submit-btn:hover {
            background-color:var(--blue);
        }

    .cancel {

        float:left;
        width:200px;
    }

    .dblue-btn {
        float:left;
        background-color:var(--darkblue);
        font-size:1.3em;
        text-decoration: none;
        padding:1.5em 2em;
        transition:background-color 0.25s ease-out;
        border-radius:0.25em;
        text-align: center;
    }

        .dblue-btn:hover {
            background-color:var(--lblue);
        }
    
        .yes-delete,
        .yes-change {
            background-color:var(--darkred);
            clear:none !important;
        }
    
            .popup .submit-btn.yes-delete:hover,
            .popup .submit-btn.yes-change:hover {
                background-color:var(--red);
            }
    
        .warning {
            font-size:2em;
            color:var(--red);
            margin-bottom:1em;
        }

    .close {
        position: absolute;
        background-color:var(--darkblue);
        font-size:1.8em;
        text-decoration: none;
        padding:0.75em;
        right:1.7em;
        top:0;
        transition:background-color 0.25s ease-out;
        border-radius:0 0 0.25em 0.25em;
    }

        .close:hover {
            background-color:var(--blue);
        }

    #del-msg-popup form {
        width:100%;
        float:right;
    }

    #del-msg-popup input {
        float:right;
        width:200px;
        clear:none;
    }

    .reply {
        margin-top:1em;
    }

    .reply textarea {
        border:1px solid var(--beige);
        margin-bottom:1em;
        padding:1em;
    }

.top {
    display:grid;
    grid-template-columns: 1fr 250px;
    grid-gap:2em;
}

    .top select {
        float:right;
        border:1px solid var(--beige);
        padding:0.75em 1em;
    }

.my-listings {
    display:grid;
    grid-template-columns: 1fr;
}

    .my-listings .new-listing-btn {
        margin-top:1em;
        float:left;
    }

.tabs a {
    float:left;
    display:block;
    font-size:1rem;
    text-decoration: none;
    padding:0.75rem 1rem;
    background-color:var(--darkblue);
    border-radius:0.25rem 0.25rem 0 0;
    border-bottom:1px solid var(--bgblue);
    margin-right:0.1rem;
    color:var(--lblue);
}

    .tabs a.active {
        color:var(--beige);
        border-bottom:1px solid var(--darkblue);
    }

.listing-type {
    border-radius:0 0.5em 0.5em 0.5em;
    display:none;
}

    .listing-type.active {
        display:block;
    }

.listings .item-stats {
    display:block;
}

    .listings .item-stats > div,
    .listings .item-stats > a {
        display:block;
        float:right;
        /* border:1px solid var(--blue); */
        text-align: center;
        padding:0.75em;
        border-radius:0.25em;
        min-width:40px;
        text-decoration: none;
        transition:background-color 0.5s ease-out;
    }

        .listings .item-stats form {
            display:none;
        }

        .listings .item-stats img {
            height:1.5em;
            margin:0 auto;
        }

        .listings .item-stats p,
        .listings .item-stats input {
            margin:0.25em 0 0;
            line-height:1em;
            font-size:1.2em;
            padding:0;
        }

        .listings .item-stats a:hover {
            background-color: var(--blue);
        }

    .listings .item {
        grid-template-columns: 50px 1fr 200px;
        margin-bottom:1em;
    }

    .nophoto {
        border:1px solid var(--blue);
        padding:1.5em;
        border-radius:0.5em;
    }

.stats-popup .chart {
    height:200px;
    margin-bottom:2em;
}

    .stats-popup h2 {
        margin-bottom:0.5em;
    }

    .stats-popup h3 {
        font-size:1.6em;
    }

    .stat {
        float:left;
        cleaR:left;
        width:100%;
        margin-bottom:2em;
    }

    .stat p {
        font-size: 2em;
    }

    .stat p.small_title {
        font-size:1.1em;
    }

    .stat p span {
        color:var(--lblue);
    }

.account .timeperiod {
    cursor: pointer;
}

.day-popup .inner {
    max-height:90vh;
    overflow-y:auto;
}

    .day-list {
        margin-top:2em;
    }

    .day-list > div {
        display:grid;
        grid-template-columns: 30px 1fr 200px;
        grid-gap:1em;
        margin-bottom:1em;
    }

        .day-list > div > img {
            border-radius:0.25em;
        }

        .day-list .stats {
            display:grid;
            grid-template-columns: 50px 1fr;
            grid-gap:1em;
            margin:0;
        }

        .day-list .stats p {
            text-align: right;
        }

        .day-list .bar-outer {
            position:relative;
        }

        .day-list .bar {
            position:absolute;
            left:0;
            top:0;
            height:100%;
            background-color:var(--blue);
            border-radius:0 0.25em 0.25em 0;
        }

.msg {
    border:2px solid green;
    padding:1em;
    margin-bottom:2em;
    border-radius:0.5em;
}

    .msg p {
        margin:0;
        color:green;
    }

/* Alerts (Mini) */
.alert-mini {
    border-bottom:1px dotted var(--blue);
    display:grid;
    grid-template-columns: 25px 1fr;
    grid-gap:1em;
    padding-block:1em;
}

    .alert-mini h2 {
        font-size:1.3rem;
        margin-bottom:0;
    }

    .alert-mini p.date {
        margin-bottom:0;
        line-height: 1;
        color:var(--lblue);
    }

    .alert-mini > img {
        margin-top:2px;
    }

    .alert-mini:last-of-type {
        margin-bottom:2em;
    }