/* Login Page */

.wrap-form-login button {
    padding: 10px 20px;
}

.wrap-form-login input {
    margin-left: auto;
    width: 90%;
}

.form-main-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80vh;
}


/* Regular Pages Layout*/

.classic-layout {
    display: flex;
    height: 100vh;
    /* 1, 3 */
    flex-direction: column;
}

.classic-layout-header,
.classic-layout-footer {
    flex: none;
    /* 2 */
}

.classic-layout-body {
    display: flex;
    flex: 1 0 auto;
    /* 2 */
    flex-direction: column;
    padding: var(--space);
}

.classic-layout-content {
    margin-top: var(--space);
}

.classic-layout-nav {
    order: -1;
}

.classic-layout-nav,
.classic-layout-ads {
    padding: 1em;
    border-radius: 3px;
    /*background: rgba(147, 128, 108, 0.1);*/
}

@media (min-width: 768px) {
    .classic-layout-body {
        flex-direction: row;
        flex: 1;
    }
    .classic-layout-content {
        flex: 1;
        /*padding: 0 var(--space-lg);
        margin: 0;*/
    }
    .classic-layout-nav,
    .classic-layout-ads {
        flex: 0 0 12em;
    }
    .wrap-assets div {
        flex: 1;
    }
}


/* Utilities*/

.text-center {
    text-align: center;
}


/* Ordered Lists */


/* css list with numeber circle background -------------- */

.numberlist {
    width: 450px;
}

.numberlist ol {
    counter-reset: li;
    /*list-style: none;*/
    list-style: decimal;
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
}

.numberlist ol ol {
    margin: 0 0 0 2em;
}

.numberlist a {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    /*padding: .4em;*/
    margin: .5em 0;
    background: #FFF;
    color: #444;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
}

.numberlist a:hover {
    background: #cbe7f8;
    text-decoration: underline;
}

.numberlist a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    color: #FFF;
}


/* End css list with numeber circle background -------------- */

.unlist {
    list-style: none;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.unlist li {
    cursor: pointer;
}

.unlist li:hover {
    text-shadow: 0 0 black;
    text-decoration: underline;
}