/* Empty. Add your own CSS if you like */
    .scroll-content {
        background-color: #eee;
    }

    .scroll {
        height: 100%;
    }

    #login.scroll-content {
        display: table !important;
        width: 100% !important;
        height: 100% !important;
    }

    #login.scroll-content .scroll {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    .uppercase {
        text-transform: uppercase;
        font-weight: 500;
    }

    .popover-backdrop.active {
        background-color: rgba(0, 0, 0, 0.3);
    }

    .avatar {
        position: absolute;
        top: 16px;
        left: 16px;
        max-width: 40px;
        max-height: 40px;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eeeeee;
        color: #888888;
        padding-top:10px;
        font-size:16px;
        text-align:center;
        vertical-align: middle;
    }

    .active-order .avatar {
        background-color: #fff;
        color: rgb(230,180,0);
    }

    .item.active-order {
        background-color: rgba(230,180,0,0.1);
    }

    .item.active-contact {
        background-color: rgba(40,165,76,0.1);
    }

    .item.active-product {
        background-color: rgba(107,70,229,0.1);
    }



/* FONT SIZE */
    .item {
        font-size:14px;
    }

    .item h2 {
        font-size:14px;
    }

    .material-icons.fs-36 {
        font-size:36px;
    }

    .material-icons.fs-48 {
        font-size:48px;
    }

/* PADDING */
    .padding-0 {
        padding: 0;
    }

    .padding-left-70 {
        padding-left:70px;
    }

    .padding-left-140 {
        padding-left:70px;
    }

    .padding-left-90 {
        padding-left:90px;
    }

    #padding-header {
        paddig-top: 44px;
    }

/* MARGIN */
    .margin-0 {
        margin: 0;
    }

    .margin-5 {
        margin: 5px;
    }


/* HEADER BARS */
    .bar.bar-pink {
        border-color: #E91E63;
        background-color: #E91E63;
        border:none;
        color: #fff;
    }

    .bar.bar-pink .title {
        color: #fff;
    }

    .bar.bar-pink .button {
        color: #fff;
    }

    .bar.bar-purple {
        border-color: purple;
        background-color: purple;
        border:none;
        color: #fff;
    }

    .bar.bar-purple .title {
        color: #fff;
    }

    .bar.bar-purple .button {
        color: #fff;
    }

/* BACKGROUNDS */
    .bg-lightgrey {
        background-color: #eee;
    }

    .bg-white {
        background-color: #fff;
    }

    .bgLight {
        background-color: #cccccc;
        color: #fff;
    }

    .bgPink {
        background-color: #E91E63;
        color: #fff;
    }

    .bgCalm {
        background-color: #11c1f3;
        color: #fff;
    }

    .bgBalanced {
        background-color: #28a54c;
        color: #fff;
    }

    .bgPositive {
        background-color: #0c63ee;
        color: #fff;
    }

    .bgEnergized {
        background-color: #e6b400;
        color: #fff;
    }


/* HEADERS */

    .header {
        font-weight:700;
    }

    .headerPositive {
        border-top:2px solid #0c63ee;
    }

    .headerPositiveStrong {
        border-top:10px solid #0c63ee;
    }

    .headerPositive p {
        color: #0c63ee;
    }

    .headerCalm {
        border-top:2px solid #11c1f3;
    }

    .headerCalmStrong {
        border-top:10px solid #11c1f3;
    }

    .headerBalanced {
        border-top:2px solid #28a54c;
    }

    .headerBalancedStrong {
        border-top:10px solid #28a54c;
    }


    .headerDark {
        border-top:2px solid #111;
    }

    .headerDark p {
        color: #111;
    }

    .headerEnergized {
        border-top:2px solid #e6b400;
    }

    .headerEnergizedStrong {
        border-top:10px solid #e6b400;
    }


    .headerRoyal {
        border-top:2px solid #6b46e5;
    }





    .headerPink {
        border-top:2px solid deeppink;
    }

    .headerPinkStrong {
        border-top:10px solid deeppink;
    }

    .headerPurple {
        border-top:2px solid purple;
    }

    .headerPurpleStrong {
        border-top:10px solid purple;
    }

    .headerRoyal {
        border-top:2px solid #6b46e5;
    }

    .headerRoyalStrong {
        border-top:10px solid #6b46e5;
    }

    .headerBrown {
        border-top:2px solid brown;
    }

    .headerBrownStrong {
        border-top:10px solid brown;
    }

    /* BORDERS */
    .borderPositive {
        border:2px solid #0c63ee;
    }

    .borderCalm {
        border:2px solid #11c1f3;
    }

    .borderBalanced {
        border:2px solid #28a54c;
    }

    .borderDark {
        border:2px solid #111;
    }

    .borderEnergized {
        border:2px solid #e6b400;
    }

    .borderRoyal {
        border:2px solid #6b46e5;
    }

    .borderPink {
        border:2px solid #E91E63;
    }


/* BODIES */
    .bodyRoyal {
        background-color: #6b46e5;
    }

/* COLORS */
    .pink {
        color: #E91E63;
    }

    .energized {
        color: #e6b400;
    }

    .positive {
        color: #0c63ee;
    }

    .calm {
        color: #11c1f3;
    }

    .white {
        color: #fff;
    }

    .balanced {
        color: #28a54c;
    }

    .brown {
        color: brown;
    }

    .purple {
        color: purple;
    }

    .grey {
        color: rgb(68,68,68);
    }




/* TIMELINE */

    .timeline {
        margin: 20px 0 0;
        padding: 0;
        list-style: none;
        position: relative; }
    .timeline:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #f5f5f5;
        left: 20%;
        margin-left: -42px; }
    @media screen and (max-width: 320px) {
        .timeline:before {
            left: 21%; } }
    .timeline > li {
        position: relative; }
    .timeline > li .tmlabel {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: 0 0 5px 20%;
        padding: 0.5em;
        font-size: 1.1em;
        font-weight: 300;
        line-height: 1.4;
        position: relative;
        margin-right: 15px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
    .timeline > li .tmlabel h4 {
        margin-top: 0;
        margin: 0px 0;
        padding: 10px 0 10px 0;
        font-size:14px; }
    .timeline > li .tmlabel:after {
        right: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-width: 8px;
        top: 8px; }
    .timeline > li .tmicon {
        box-shadow: 0 0 0 2px #f5f5f5;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        vertical-align: top;
        font-size: 1.4em;
        line-height: 40px;
        position: absolute;
        text-align: center;
        left: 20%;
        top: 0;
        margin: 0 0 0 -60px; }
    @media screen and (max-width: 320px) {
        .timeline > li .tmicon {
            left: 21%; } }
    .timeline > li .tmicon > img:first-child {
        -webkit-border-radius: 50%;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        vertical-align: top; }
    .timeline > li .tmlabel-light {
        background: #fff;
        color: #444; }
    .timeline > li .tmlabel-light h4 {
        color: #444; }
    .timeline > li .tmlabel-light:after {
        border-right-color: #fff; }
    .timeline > li .tmlabel-stable {
        background: #f8f8f8;
        color: #444; }
    .timeline > li .tmlabel-stable h4 {
        color: #444; }
    .timeline > li .tmlabel-stable:after {
        border-right-color: #f8f8f8; }
    .timeline > li .tmlabel-positive {
        background: #387ef5;
        color: #fff; }
    .timeline > li .tmlabel-positive h4 {
        color: #fff; }
    .timeline > li .tmlabel-positive:after {
        border-right-color: #387ef5; }
    .timeline > li .tmlabel-calm {
        background: #11c1f3;
        color: #fff; }
    .timeline > li .tmlabel-calm h4 {
        color: #fff; }
    .timeline > li .tmlabel-calm:after {
        border-right-color: #11c1f3; }
    .timeline > li .tmlabel-assertive {
        background: #ef473a;
        color: #fff; }
    .timeline > li .tmlabel-assertive h4 {
        color: #fff; }
    .timeline > li .tmlabel-assertive:after {
        border-right-color: #ef473a; }
    .timeline > li .tmlabel-balanced {
        background: #33cd5f;
        color: #fff; }
    .timeline > li .tmlabel-balanced h4 {
        color: #fff; }
    .timeline > li .tmlabel-balanced:after {
        border-right-color: #33cd5f; }
    .timeline > li .tmlabel-energized {
        background: #ffc900;
        color: #fff; }
    .timeline > li .tmlabel-energized h4 {
        color: #fff; }
    .timeline > li .tmlabel-energized:after {
        border-right-color: #ffc900; }
    .timeline > li .tmlabel-royal {
        background: #886aea;
        color: #fff; }
    .timeline > li .tmlabel-royal h4 {
        color: #fff; }
    .timeline > li .tmlabel-royal:after {
        border-right-color: #886aea; }
    .timeline > li .tmlabel-dark {
        background: #444;
        color: #fff; }
    .timeline > li .tmlabel-dark h4 {
        color: #fff; }
    .timeline > li .tmlabel-dark:after {
        border-right-color: #444; }
    .timeline > li .tmicon-light {
        background: #fff;
        color: #444; }
    .timeline > li .tmicon-stable {
        background: #f8f8f8;
        color: #444; }
    .timeline > li .tmicon-positive {
        background: #387ef5;
        color: #fff; }
    .timeline > li .tmicon-calm {
        background: #11c1f3;
        color: #fff; }
    .timeline > li .tmicon-assertive {
        background: #ef473a;
        color: #fff; }
    .timeline > li .tmicon-balanced {
        background: #33cd5f;
        color: #fff; }
    .timeline > li .tmicon-energized {
        background: #ffc900;
        color: #fff; }
    .timeline > li .tmicon-royal {
        background: #886aea;
        color: #fff; }
    .timeline > li .tmicon-dark {
        background: #444;
        color: #fff; }

    .timelineimg {
        width: 100%; }