@charset "UTF-8";
/* Layout */
/* Topbar */
/* Add your variable customizations of layout here */
/* Layout */
/* Topbar */
/* roboto-regular - latin-ext_latin */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-500 - latin-ext_latin */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-700 - latin-ext_latin */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* Utils */
.clearfix:after {
    content: " ";
    display: block;
    clear: both;
}

*[hidden] {
    display: none;
}

.card {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    background: #ffffff;
    padding: 1em;
    margin-bottom: 1em;
    box-sizing: border-box;
}

    .card.card-w-title {
        padding-bottom: 2em;
    }

    .card .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .card .card-subtitle {
        color: #9C9C9D;
        font-weight: 600;
        margin: -1rem 0 1rem 0;
    }

.p-shadow-content {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    border: 0 none !important;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

.dashboard .card {
    height: 100%;
}

.dashboard .overview-box {
    padding: 0 !important;
    text-align: left;
    overflow: hidden;
    margin-bottom: 0px !important;
    position: relative;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    min-height: 100px;
}

    .dashboard .overview-box .overview-box-name {
        font-size: 16px;
        display: block;
        width: 100%;
        margin: 8px 0 0 8px;
        color: #ffffff;
        opacity: 0.8;
        filter: alpha(opacity=80);
    }

    .dashboard .overview-box .overview-box-count {
        color: #ffffff;
        margin: -36px 0 0 8px;
        font-size: 24px;
        display: block;
        font-weight: bold;
    }

    .dashboard .overview-box .overview-box-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.12);
        border-radius: 3px;
        padding: 2px 4px;
        color: #ffffff;
    }

    .dashboard .overview-box img {
        position: absolute;
        bottom: 0px;
    }

    .dashboard .overview-box.overview-box-1 {
        background: linear-gradient(229deg, #fd9a77, #fb827a);
    }

    .dashboard .overview-box.overview-box-2 {
        background: linear-gradient(229deg, #8edead, #43c6ac);
    }

    .dashboard .overview-box.overview-box-3 {
        background: linear-gradient(248deg, #348ac7, #7474bf);
    }

    .dashboard .overview-box.overview-box-4 {
        background: linear-gradient(67deg, #f15f79, #b24592);
    }

.dashboard .task-list {
    overflow: hidden;
}

    .dashboard .task-list > .p-panel {
        min-height: 360px;
    }

    .dashboard .task-list .p-panel-content {
        padding: 0px !important;
    }

    .dashboard .task-list ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        .dashboard .task-list ul li {
            padding: 10px 14px;
            border-bottom: 1px solid #9C9C9D;
        }

            .dashboard .task-list ul li:last-child {
                border-bottom: 0 none;
            }

        .dashboard .task-list ul .p-checkbox {
            vertical-align: middle;
            margin-right: 5px;
        }

        .dashboard .task-list ul .task-name {
            vertical-align: middle;
        }

        .dashboard .task-list ul i {
            color: #9C9C9D;
            float: right;
            font-size: 20px;
        }

.dashboard .contact-form {
    overflow: hidden;
}

    .dashboard .contact-form .p-panel {
        min-height: 360px;
    }

    .dashboard .contact-form .col-12 {
        padding: 20px 10px;
    }

.dashboard .contacts {
    overflow: hidden;
}

    .dashboard .contacts > .p-panel {
        min-height: 360px;
    }

    .dashboard .contacts .p-panel-content {
        padding: 0px !important;
    }

    .dashboard .contacts ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

        .dashboard .contacts ul li {
            border-bottom: 1px solid #9C9C9D;
            padding: 9px;
            width: 100%;
            box-sizing: border-box;
            text-decoration: none;
            position: relative;
            display: block;
            border-radius: 2px;
            transition: background-color 0.2s;
        }

            .dashboard .contacts ul li img {
                float: left;
                margin-right: 8px;
            }

            .dashboard .contacts ul li .contact-info {
                float: left;
            }

                .dashboard .contacts ul li .contact-info .name {
                    display: block;
                    margin-top: 4px;
                    font-size: 14px;
                }

                .dashboard .contacts ul li .contact-info .location {
                    margin-top: 4px;
                    display: block;
                    font-size: 12px;
                    color: #9C9C9D;
                }

            .dashboard .contacts ul li .contact-actions {
                float: right;
                padding-top: 12px;
            }

                .dashboard .contacts ul li .contact-actions .connection-status {
                    color: #ffffff;
                    padding: 2px 3px;
                    vertical-align: middle;
                }

                    .dashboard .contacts ul li .contact-actions .connection-status.online {
                        background-color: #AED581;
                    }

                    .dashboard .contacts ul li .contact-actions .connection-status.offline {
                        background-color: #E57373;
                    }

                .dashboard .contacts ul li .contact-actions i {
                    vertical-align: middle;
                    color: #9C9C9D;
                    margin-left: 5px;
                }

            .dashboard .contacts ul li:last-child {
                border: 0;
            }

.dashboard .activity-feed {
    text-align: center;
}

    .dashboard .activity-feed h3 {
        color: #525262;
        margin: 20px 0 5px 0;
        font-weight: bold;
        font-size: 13px;
    }

    .dashboard .activity-feed p {
        color: #9C9C9D;
        margin: 0;
        font-size: 13px;
    }

    .dashboard .activity-feed .p-panel-title {
        width: 100%;
    }

    .dashboard .activity-feed .col-12 {
        padding: 20px;
    }

        .dashboard .activity-feed .col-12 span {
            display: block;
            font-weight: bold;
            color: #6a6a7d;
        }

    .dashboard .activity-feed .knob {
        width: 140px;
        height: 140px;
        line-height: 120px;
        margin-top: 20px;
        font-size: 30px;
        color: #9C9C9D;
        border-radius: 50%;
        display: inline-block;
    }

        .dashboard .activity-feed .knob.income {
            border: 10px solid #1976d2;
            border-left-color: #b2dbfb;
        }

        .dashboard .activity-feed .knob.tax {
            border: 10px solid #009688;
            border-left-color: #80CBC4;
        }

        .dashboard .activity-feed .knob.invoice {
            border: 10px solid #e91e63;
            border-left-color: #F8BBD0;
        }

        .dashboard .activity-feed .knob.expense {
            border: 10px solid #673ab7;
            border-left-color: #B39DDB;
        }

.dashboard .activity-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    .dashboard .activity-list li {
        border-bottom: 1px solid #9C9C9D;
        padding: 16px 8px;
    }

        .dashboard .activity-list li .count {
            font-size: 20px;
            color: #ffffff;
            background-color: #007be5;
            font-weight: 700;
            padding: 0.25em 0.5em;
            display: inline-block;
            border-radius: 3px;
        }

.dashboard .user-card {
    border-radius: 3px;
}

    .dashboard .user-card .user-card-header {
        height: 100px;
        overflow: hidden;
        background-color: #545b61;
    }

        .dashboard .user-card .user-card-header img {
            width: 100%;
        }

    .dashboard .user-card .user-card-content {
        height: 340px;
        background-color: #ffffff;
    }

        .dashboard .user-card .user-card-content img {
            margin: -40px 0 0 24px;
        }

        .dashboard .user-card .user-card-content .p-button {
            float: right;
            width: 48px;
            height: 48px;
            margin: -24px 24px 0 0;
        }

        .dashboard .user-card .user-card-content .user-card-name {
            font-size: 20px;
            color: #ffffff;
            position: relative;
            top: -70px;
            margin-left: 110px;
            font-weight: 700;
        }

        .dashboard .user-card .user-card-content .user-detail {
            text-align: left;
        }

            .dashboard .user-card .user-card-content .user-detail ul {
                padding: 0px 0 32px 0;
                margin: 0;
                list-style-type: none;
            }

                .dashboard .user-card .user-card-content .user-detail ul li {
                    padding: 16px 24px;
                    border-top: 1px solid #9C9C9D;
                }

                    .dashboard .user-card .user-card-content .user-detail ul li:last-child {
                        border-bottom: 1px solid #9C9C9D;
                    }

                    .dashboard .user-card .user-card-content .user-detail ul li i {
                        font-size: 24px;
                        margin-right: 8px;
                        width: 32px;
                        vertical-align: middle;
                        color: #9C9C9D;
                    }

                    .dashboard .user-card .user-card-content .user-detail ul li .project-title {
                        font-weight: 700;
                        margin-right: 8px;
                    }

                    .dashboard .user-card .user-card-content .user-detail ul li .project-detail {
                        color: #9C9C9D;
                    }

                    .dashboard .user-card .user-card-content .user-detail ul li .project-progressbar {
                        display: inline-block;
                        width: 100px;
                        background-color: #545b61;
                        float: right;
                        margin-top: 12px;
                    }

                        .dashboard .user-card .user-card-content .user-detail ul li .project-progressbar .project-progressbar-value {
                            background-color: #4298B5;
                            height: 4px;
                        }

.dashboard .chat .p-panel-content {
    padding: 0 !important;
}

.dashboard .chat ul {
    padding: 12px;
    margin: 0;
    list-style-type: none;
}

    .dashboard .chat ul li {
        padding: 6px 0;
    }

        .dashboard .chat ul li img {
            width: 36px;
            float: left;
        }

        .dashboard .chat ul li span {
            padding: 6px 12px;
            float: left;
            display: inline-block;
            margin: 4px 0;
            border-radius: 10px;
        }

        .dashboard .chat ul li.message-from img, .dashboard .chat ul li.message-from span {
            float: left;
        }

        .dashboard .chat ul li.message-from img {
            margin-right: 8px;
        }

        .dashboard .chat ul li.message-from span {
            background-color: #FFFFFF;
            color: #000000;
        }

        .dashboard .chat ul li.message-own img, .dashboard .chat ul li.message-own span {
            float: right;
        }

        .dashboard .chat ul li.message-own img {
            margin-left: 8px;
        }

        .dashboard .chat ul li.message-own span {
            background: #8EC1D3;
            color: #000000;
        }

.dashboard .chat .new-message {
    height: 40px;
    border-top: 1px solid #dce2e7;
    color: #afafc0;
}

    .dashboard .chat .new-message .message-attachment {
        display: inline-block;
        border-right: 1px solid #dce2e7;
        width: 40px;
        line-height: 40px;
        height: 100%;
        text-align: center;
    }

        .dashboard .chat .new-message .message-attachment i {
            line-height: inherit;
            font-size: 24px;
        }

    .dashboard .chat .new-message .message-input {
        position: relative;
        top: -4px;
        width: calc(100% - 100px);
        display: inline-block;
    }

        .dashboard .chat .new-message .message-input input {
            border: 0 none;
            font-size: 14px;
            width: 100%;
            background-color: transparent;
            outline: 0 none;
            color: #9C9C9D;
        }

.dashboard .timeline {
    height: 100%;
    box-sizing: border-box;
}

    .dashboard .timeline > .grid .col-3 {
        font-size: 14px;
        position: relative;
        border-right: 1px solid #bdbdbd;
    }

        .dashboard .timeline > .grid .col-3 i {
            background-color: #ffffff;
            font-size: 28px;
            position: absolute;
            top: 6px;
            right: -15px;
        }

    .dashboard .timeline > .grid .col-9 {
        padding-left: 1.5em;
    }

        .dashboard .timeline > .grid .col-9 .event-text {
            color: #9C9C9D;
            font-size: 14px;
            display: block;
            padding-bottom: 20px;
        }

        .dashboard .timeline > .grid .col-9 .event-content img {
            width: 100%;
        }

.dashboard .chart-panel .p-panel-content {
    overflow: auto;
}

.login-body {
    background-color: #f5f5f5;
    padding-top: 200px;
    height: auto;
    background: url("../../layout/images/login/login-image.png");
    background-repeat: no-repeat;
    background-position: 0 -180px;
    background-size: cover;
}

    .login-body .login-panel {
        background-color: #ffffff;
        width: 400px;
        margin: 0 auto;
        padding-bottom: 20px;
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }

        .login-body .login-panel .login-header {
            margin-bottom: 0;
            background-color: #4298B5;
            color: #FFFFFF;
            position: relative;
        }

            .login-body .login-panel .login-header h1 {
                font-size: 18px;
                font-weight: 700;
            }

            .login-body .login-panel .login-header h2 {
                font-size: 14px;
                font-weight: normal;
                margin-top: 0;
            }

            .login-body .login-panel .login-header img {
                width: 64px;
                position: absolute;
                top: 24px;
                right: 30px;
            }

            .login-body .login-panel .login-header.col-12 {
                padding: 20px 30px;
            }

        .login-body .login-panel .col-12 {
            padding: 20px 70px;
        }

@media (max-width: 640px) {
    .login-body {
        padding-top: 150px;
    }

        .login-body .login-panel {
            width: 300px;
        }

            .login-body .login-panel .col-12 {
                padding: 20px 35px;
            }
}

.exception-body {
    background-color: #f5f5f5;
    padding-top: 200px;
    height: auto;
    background-size: contain;
}

    .exception-body * {
        box-sizing: border-box;
    }

    .exception-body .exception-panel {
        background-color: #ffffff;
        width: 400px;
        height: 323px;
        margin: 0 auto;
        padding-bottom: 20px;
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }

        .exception-body .exception-panel .p-button {
            background-color: #ffffff;
            display: block;
            box-shadow: none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            margin: 100px 0 0 30px;
        }

            .exception-body .exception-panel .p-button:enabled:not(:focus):hover {
                background-color: #dbdbdb;
            }

    .exception-body .exception-band {
        height: 80px;
        margin-top: -160px;
        z-index: 1000;
    }

        .exception-body .exception-band .exception-content {
            margin: 0 auto;
            width: 400px;
            position: relative;
            padding: 15px 30px;
        }

            .exception-body .exception-band .exception-content h3 {
                padding: 0;
                margin: 0;
            }

            .exception-body .exception-band .exception-content p {
                padding: 0;
                margin: 0;
            }

            .exception-body .exception-band .exception-content img {
                position: absolute;
                width: 48px;
                right: 30px;
                top: 16px;
            }

    .exception-body.error-body {
        background: url("../../layout/images/exception/error-image.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

        .exception-body.error-body .exception-panel img {
            width: 100%;
        }

        .exception-body.error-body .exception-panel .p-button {
            color: #f44336;
        }

            .exception-body.error-body .exception-panel .p-button:hover {
                background-color: #dbdbdb;
                color: #626365;
                color: #f44336;
            }

        .exception-body.error-body .exception-band {
            background-color: #f44336;
        }

            .exception-body.error-body .exception-band .exception-content {
                color: #ffebee;
            }

    .exception-body.pagenotfound-body {
        background: url("../../layout/images/exception/404-image.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

        .exception-body.pagenotfound-body .exception-panel img {
            width: 200px;
            margin: 0 auto;
            display: block;
            position: relative;
            top: 4px;
        }

        .exception-body.pagenotfound-body .exception-panel .p-button {
            color: #00796b;
            margin-top: 105px;
        }

            .exception-body.pagenotfound-body .exception-panel .p-button:hover {
                background-color: #dbdbdb;
                color: #626365;
                color: #00796b;
            }

        .exception-body.pagenotfound-body .exception-band {
            background-color: #00796b;
        }

            .exception-body.pagenotfound-body .exception-band .exception-content {
                color: #b2dfdb;
            }

    .exception-body.accessdenied-body {
        background: url("../../layout/images/exception/access-image.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

        .exception-body.accessdenied-body .exception-panel img {
            width: 300px;
            display: block;
            margin: 0 auto;
            position: relative;
            top: 6px;
        }

        .exception-body.accessdenied-body .exception-panel .p-button {
            color: #f57c00;
            margin-top: 110px;
        }

            .exception-body.accessdenied-body .exception-panel .p-button:hover {
                background-color: #dbdbdb;
                color: #626365;
                color: #f57c00;
            }

        .exception-body.accessdenied-body .exception-band {
            background-color: #f57c00;
        }

            .exception-body.accessdenied-body .exception-band .exception-content {
                color: #ffe0b2;
            }

@media (max-width: 640px) {
    .exception-body .exception-panel {
        width: 350px;
    }

    .exception-body .exception-band {
        margin-top: -180px;
    }

        .exception-body .exception-band .exception-content img {
            right: 48px;
        }

    .exception-body.error-body .exception-panel .p-button {
        margin-top: 111px;
    }

    .exception-body.pagenotfound-body .exception-panel img {
        width: 175px;
    }

    .exception-body.pagenotfound-body .exception-panel .p-button {
        margin-top: 117px;
    }

    .exception-body.accessdenied-body .exception-panel img {
        width: 262px;
    }

    .exception-body.accessdenied-body .exception-panel .p-button {
        margin-top: 120px;
    }
}

@media (max-width: 480px) {
    .exception-body .exception-band .exception-content {
        width: 350px;
        padding: 15px 10px;
    }

        .exception-body .exception-band .exception-content img {
            right: 24px;
        }
}

.landing-body .landing-wrapper .p-button {
    box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.26), 0 1px 5px 0 rgba(0, 0, 0, 0.16);
}

.landing-body .landing-wrapper #header .pre-header {
    background-color: #4298B5;
    height: 100px;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.3);
    z-index: 100;
    width: 100%;
    position: relative;
}

    .landing-body .landing-wrapper #header .pre-header .pre-header-content {
        width: 960px;
        margin: 0 auto;
        padding: 15px 30px;
        box-sizing: border-box;
    }

        .landing-body .landing-wrapper #header .pre-header .pre-header-content #menu-button {
            display: none;
            color: #FFFFFF;
            font-size: 28px;
            float: right;
            margin-top: 20px;
            transition: color 0.3s;
        }

            .landing-body .landing-wrapper #header .pre-header .pre-header-content #menu-button:hover {
                color: #FFFFFF;
            }

            .landing-body .landing-wrapper #header .pre-header .pre-header-content #menu-button i {
                font-size: 30px;
            }

        .landing-body .landing-wrapper #header .pre-header .pre-header-content .landing-logo {
            width: 70px;
            margin-right: 20px;
        }

        .landing-body .landing-wrapper #header .pre-header .pre-header-content img {
            display: inline-block;
            vertical-align: middle;
        }

        .landing-body .landing-wrapper #header .pre-header .pre-header-content #menu {
            list-style-type: none;
            float: right;
            margin: 25px 0 0 0;
            padding: 0;
        }

            .landing-body .landing-wrapper #header .pre-header .pre-header-content #menu li {
                float: left;
                padding-right: 12px;
            }

                .landing-body .landing-wrapper #header .pre-header .pre-header-content #menu li a {
                    font-size: 14px;
                    font-weight: 600;
                    padding: 8px 14px;
                    color: #FFFFFF;
                    border-bottom: 1px solid transparent;
                    transition: border-bottom-color 0.3s;
                }

                    .landing-body .landing-wrapper #header .pre-header .pre-header-content #menu li a:hover {
                        border-bottom-color: #FFFFFF;
                    }

.landing-body .landing-wrapper #header .header-content {
    height: 400px;
    text-align: center;
    background: url("../images/landing/landing-main.png") no-repeat #8EC1D3;
    background-size: cover;
    padding: 150px 15px 0 15px;
}

    .landing-body .landing-wrapper #header .header-content h1 {
        margin: 0;
        color: #ffffff;
        font-size: 22px;
    }

    .landing-body .landing-wrapper #header .header-content h2 {
        margin: 10px 0 0 0;
        color: #ffffff;
        font-size: 18px;
        margin-bottom: 50px;
        opacity: 0.8;
        filter: alpha(opacity=80);
    }

.landing-body .landing-wrapper #features {
    background: #f5f5f5;
}

    .landing-body .landing-wrapper #features .features-content {
        text-align: center;
        width: 960px;
        margin: 0 auto;
        padding: 60px 0;
    }

        .landing-body .landing-wrapper #features .features-content h2 {
            margin: 0 0 60px 0;
            font-size: 20px;
            color: #424242;
        }

        .landing-body .landing-wrapper #features .features-content h3 {
            color: #424242;
            padding-bottom: 8px;
            border-bottom: 1px solid #d8d8d8;
        }

        .landing-body .landing-wrapper #features .features-content p {
            color: #757575;
            line-height: 1.5;
        }

        .landing-body .landing-wrapper #features .features-content img {
            height: 90px;
        }

.landing-body .landing-wrapper #showcase {
    background: #424242;
}

    .landing-body .landing-wrapper #showcase .showcase-header {
        background: #424242;
        width: 960px;
        margin: 0 auto;
        padding: 20px 0;
    }

        .landing-body .landing-wrapper #showcase .showcase-header .showcase-title {
            color: #ffffff;
            margin-bottom: 5px;
            display: block;
            font-weight: 700;
            font-size: 16px;
        }

        .landing-body .landing-wrapper #showcase .showcase-header .showcase-description {
            color: #bdbdbd;
            display: block;
        }

        .landing-body .landing-wrapper #showcase .showcase-header .col-12:last-child {
            text-align: right;
        }

            .landing-body .landing-wrapper #showcase .showcase-header .col-12:last-child .p-button {
                display: inline-block;
                margin-top: 5px;
            }

.landing-body .landing-wrapper #showcase-content-wrapper {
    background-color: #f5f5f5;
    position: relative;
    height: 530px;
    overflow: hidden;
}

    .landing-body .landing-wrapper #showcase-content-wrapper .showcase-content {
        width: 960px;
        margin: 0 auto;
        padding: 200px 0 0 100px;
        box-sizing: border-box;
    }

        .landing-body .landing-wrapper #showcase-content-wrapper .showcase-content h2 {
            margin: 0;
            padding: 0;
            color: #2d353c;
            font-size: 22px;
            margin: 0 auto;
        }

        .landing-body .landing-wrapper #showcase-content-wrapper .showcase-content p {
            color: #757575;
            width: 400px;
            line-height: 1.5;
        }

    .landing-body .landing-wrapper #showcase-content-wrapper img {
        position: absolute;
        right: 0px;
        top: 40px;
        width: 600px;
    }

.landing-body .landing-wrapper #pricing {
    background-color: #ffffff;
    box-shadow: inset 0 4px 22px 0 rgba(0, 0, 0, 0.14);
}

    .landing-body .landing-wrapper #pricing .pricing-content {
        text-align: center;
        width: 960px;
        margin: 0 auto;
        padding: 60px 0;
    }

        .landing-body .landing-wrapper #pricing .pricing-content h2 {
            margin: 0 0 60px 0;
            font-size: 20px;
            color: #424242;
        }

        .landing-body .landing-wrapper #pricing .pricing-content .pricing-box {
            display: inline-block;
            vertical-align: top;
            width: 460px;
        }

            .landing-body .landing-wrapper #pricing .pricing-content .pricing-box .pricing-header {
                font-size: 18px;
                padding: 24px 18px;
            }

                .landing-body .landing-wrapper #pricing .pricing-content .pricing-box .pricing-header h3 {
                    margin: 0;
                }

                .landing-body .landing-wrapper #pricing .pricing-content .pricing-box .pricing-header p {
                    margin: 0;
                }

                .landing-body .landing-wrapper #pricing .pricing-content .pricing-box .pricing-header .col-6:first-child {
                    text-align: left;
                }

                .landing-body .landing-wrapper #pricing .pricing-content .pricing-box .pricing-header .col-6:last-child {
                    text-align: right;
                }

            .landing-body .landing-wrapper #pricing .pricing-content .pricing-box .pricing-features {
                min-height: 200px;
                box-sizing: border-box;
            }

            .landing-body .landing-wrapper #pricing .pricing-content .pricing-box .pricing-footer {
                padding: 10px;
            }

                .landing-body .landing-wrapper #pricing .pricing-content .pricing-box .pricing-footer a {
                    transition: color 0.3s;
                }

            .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-basic {
                box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
            }

                .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-basic .pricing-header {
                    background-color: #ffffff;
                }

                    .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-basic .pricing-header h3 {
                        color: #424242;
                    }

                    .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-basic .pricing-header p {
                        color: #bdbdbd;
                    }

                .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-basic .pricing-features {
                    background-color: #f5f5f5;
                    padding: 20px;
                }

                    .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-basic .pricing-features .col-12 {
                        padding: 24px;
                        text-align: left;
                    }

                    .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-basic .pricing-features .pricing-feature-icon {
                        background-color: #8EC1D3;
                        width: 32px;
                        height: 32px;
                        line-height: 32px;
                        display: inline-block;
                        text-align: center;
                        color: #FFFFFF;
                        border-radius: 50%;
                        margin-right: 8px;
                    }

                        .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-basic .pricing-features .pricing-feature-icon i {
                            line-height: inherit;
                        }

                    .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-basic .pricing-features .pricing-feature-text {
                        color: #2d353c;
                    }

                .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-basic .pricing-footer {
                    background-color: #4298B5;
                }

                    .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-basic .pricing-footer a {
                        color: #FFFFFF;
                    }

                        .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-basic .pricing-footer a:hover {
                            color: #FFFFFF;
                        }

            .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-pro {
                margin-left: 10px;
                z-index: 2;
                box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
            }

                .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-pro .pricing-header {
                    background-color: #000000;
                }

                    .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-pro .pricing-header h3 {
                        color: #ffffff;
                    }

                    .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-pro .pricing-header p {
                        color: #bdbdbd;
                    }

                .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-pro .pricing-features {
                    background-color: #757575;
                    padding: 20px;
                }

                    .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-pro .pricing-features .col-12 {
                        padding: 10px;
                        text-align: left;
                    }

                    .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-pro .pricing-features .pricing-feature-icon {
                        background-color: #ffffff;
                        width: 32px;
                        height: 32px;
                        line-height: 32px;
                        display: inline-block;
                        text-align: center;
                        color: #424242;
                        border-radius: 50%;
                        margin-right: 8px;
                    }

                        .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-pro .pricing-features .pricing-feature-icon i {
                            line-height: inherit;
                        }

                    .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-pro .pricing-features .pricing-feature-text {
                        color: #ffffff;
                    }

                .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-pro .pricing-footer {
                    background-color: #ffffff;
                }

                    .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-pro .pricing-footer a {
                        color: #424242;
                    }

                        .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-pro .pricing-footer a:hover {
                            color: #757575;
                        }

.landing-body .landing-wrapper #video {
    background-color: #8EC1D3;
}

    .landing-body .landing-wrapper #video .video-content {
        text-align: center;
        width: 960px;
        margin: 0 auto;
        padding: 60px 0;
    }

        .landing-body .landing-wrapper #video .video-content h2 {
            margin: 0 0 40px 0;
            font-size: 20px;
            color: #ffffff;
        }

.landing-body .landing-wrapper #footer {
    background-color: #f5f5f5;
}

    .landing-body .landing-wrapper #footer .footer-content {
        width: 960px;
        margin: 0 auto;
        color: #424242;
        padding: 30px;
        box-sizing: border-box;
    }

        .landing-body .landing-wrapper #footer .footer-content img {
            width: 30px;
            display: block;
            margin-bottom: 5px;
        }

        .landing-body .landing-wrapper #footer .footer-content div {
            display: inline-block;
        }

        .landing-body .landing-wrapper #footer .footer-content .footer-left {
            float: left;
        }

        .landing-body .landing-wrapper #footer .footer-content .footer-right {
            float: right;
            font-size: 24px;
            margin-top: 6px;
        }

            .landing-body .landing-wrapper #footer .footer-content .footer-right a {
                color: #424242;
                margin-left: 24px;
            }

@media (max-width: 1024px) {
    .landing-body .landing-wrapper #header .pre-header .pre-header-content {
        width: 100%;
    }

        .landing-body .landing-wrapper #header .pre-header .pre-header-content #menu-button {
            display: block;
        }

        .landing-body .landing-wrapper #header .pre-header .pre-header-content #menu {
            z-index: 100;
            position: absolute;
            top: 100px;
            right: 30px;
            float: none;
            display: none;
            margin: 0;
            padding: 0;
            width: 225px;
            list-style: none;
            background-color: #ffffff;
            box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 8px 17px 0 rgba(0, 0, 0, 0.2);
            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
        }

            .landing-body .landing-wrapper #header .pre-header .pre-header-content #menu li {
                float: none;
                margin-left: 0;
                padding-right: 0;
            }

                .landing-body .landing-wrapper #header .pre-header .pre-header-content #menu li a {
                    font-size: 16px;
                    display: block;
                    padding: 10px 16px;
                    color: #333333;
                    width: 100%;
                    overflow: hidden;
                    box-sizing: border-box;
                    transition: background-color 0.3s;
                }

                    .landing-body .landing-wrapper #header .pre-header .pre-header-content #menu li a:hover {
                        background-color: #e8e8e8;
                    }

            .landing-body .landing-wrapper #header .pre-header .pre-header-content #menu.lmenu-active {
                display: block;
            }

    .landing-body .landing-wrapper #features .features-content {
        width: 100%;
    }

    .landing-body .landing-wrapper #showcase .showcase-header {
        width: 100%;
    }

    .landing-body .landing-wrapper #showcase-content-wrapper {
        height: 350px;
    }

        .landing-body .landing-wrapper #showcase-content-wrapper .showcase-content {
            width: 100%;
            text-align: center;
            padding: 60px 15px 0px 15px;
        }

            .landing-body .landing-wrapper #showcase-content-wrapper .showcase-content p {
                width: auto;
            }

        .landing-body .landing-wrapper #showcase-content-wrapper img {
            position: absolute;
            right: 0px;
            top: 200px;
            width: 200px;
        }

    .landing-body .landing-wrapper #pricing .pricing-content {
        width: 100%;
    }

        .landing-body .landing-wrapper #pricing .pricing-content .pricing-box {
            width: 100%;
        }

            .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-basic {
                margin-bottom: 36px;
            }

            .landing-body .landing-wrapper #pricing .pricing-content .pricing-box.pricing-pro {
                margin-left: 0;
            }

    .landing-body .landing-wrapper #video .video-content {
        width: 100%;
    }

        .landing-body .landing-wrapper #video .video-content iframe {
            width: 350px;
            height: 220px;
        }

    .landing-body .landing-wrapper #footer .footer-content {
        width: 100%;
    }
}

html {
    height: 100%;
    font-size: 14px;
}

body {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #333333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 0;
    margin: 0;
    min-height: 100%;
}

    body.main-body {
        background-color: #F4F4F4;
    }

    body a {
        text-decoration: none;
        color: #4298B5;
    }

.layout-wrapper .topbar {
    position: fixed;
    width: 100%;
    background-color: #4298B5;
    height: 60px;
    box-sizing: border-box;
    z-index: 100;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

    .layout-wrapper .topbar .logo {
        width: 60px;
        height: 60px;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        box-sizing: border-box;
    }

        .layout-wrapper .topbar .logo img {
            width: 45px;
            margin-top: 7px;
        }

    .layout-wrapper .topbar .app-name {
        vertical-align: middle;
        display: inline-block;
        margin-left: 15px;
        height: 25px;
    }

    .layout-wrapper .topbar #topbar-menu-button {
        font-size: 28px;
        margin: 12px 20px 0 0;
        display: none;
        float: right;
        color: #FFFFFF;
        transition: color 0.3s;
    }

    .layout-wrapper .topbar .topbar-menu {
        float: right;
        margin: 16px 10px 0 0;
        padding: 0;
        list-style-type: none;
    }

        .layout-wrapper .topbar .topbar-menu > li {
            float: right;
            position: relative;
            margin-left: 1em;
            margin-top: 2px;
        }

            .layout-wrapper .topbar .topbar-menu > li > a {
                position: relative;
                display: block;
                color: #FFFFFF;
            }

                .layout-wrapper .topbar .topbar-menu > li > a .topbar-icon {
                    font-size: 2em;
                    transition: color 0.3s;
                }

                .layout-wrapper .topbar .topbar-menu > li > a .topbar-item-name {
                    display: none;
                }

                .layout-wrapper .topbar .topbar-menu > li > a .topbar-badge {
                    position: absolute;
                    right: -5px;
                    top: -5px;
                    background-color: #4298B5;
                    color: #FFFFFF;
                    padding: 2px 4px;
                    display: block;
                    font-size: 12px;
                    line-height: 12px;
                    border-radius: 3px;
                }

                .layout-wrapper .topbar .topbar-menu > li > a:hover {
                    color: #FFFFFF;
                }

            .layout-wrapper .topbar .topbar-menu > li.profile-item {
                margin-top: -5px;
            }

                .layout-wrapper .topbar .topbar-menu > li.profile-item .profile-image {
                    display: inline-block;
                    vertical-align: middle;
                }

                    .layout-wrapper .topbar .topbar-menu > li.profile-item .profile-image img {
                        width: 36px;
                        height: 36px;
                    }

                .layout-wrapper .topbar .topbar-menu > li.profile-item .profile-info {
                    display: inline-block;
                    vertical-align: middle;
                    max-width: 100px;
                    margin-top: -5px;
                }

                    .layout-wrapper .topbar .topbar-menu > li.profile-item .profile-info .topbar-item-name {
                        transition: color 0.3s;
                        display: block;
                        margin-left: 4px;
                        margin-right: 6px;
                    }

                        .layout-wrapper .topbar .topbar-menu > li.profile-item .profile-info .topbar-item-name.profile-name {
                            font-size: 14px;
                        }

                        .layout-wrapper .topbar .topbar-menu > li.profile-item .profile-info .topbar-item-name.profile-role {
                            font-size: 12px;
                            color: #e6e6e6;
                        }

                .layout-wrapper .topbar .topbar-menu > li.profile-item > ul {
                    top: 50px;
                }

            .layout-wrapper .topbar .topbar-menu > li.search-item {
                position: relative;
                color: #ffffff;
                overflow: hidden;
                margin-top: 0;
            }

                .layout-wrapper .topbar .topbar-menu > li.search-item input {
                    padding: 6px;
                    padding-right: 20px;
                }

            .layout-wrapper .topbar .topbar-menu > li > ul {
                position: absolute;
                top: 42px;
                right: 5px;
                display: none;
                width: 250px;
                background-color: #FFFFFF;
                -webkit-animation-duration: 0.5s;
                animation-duration: 0.5s;
                list-style-type: none;
                margin: 0;
                padding: 8px 0;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
            }

                .layout-wrapper .topbar .topbar-menu > li > ul a {
                    padding: 0.571em 0.857em;
                    display: block;
                    width: 100%;
                    box-sizing: border-box;
                    color: #9C9C9D;
                }

                    .layout-wrapper .topbar .topbar-menu > li > ul a i {
                        margin-right: 8px;
                        font-size: 16px;
                    }

                    .layout-wrapper .topbar .topbar-menu > li > ul a img {
                        margin-right: 8px;
                    }

                    .layout-wrapper .topbar .topbar-menu > li > ul a i, .layout-wrapper .topbar .topbar-menu > li > ul a img, .layout-wrapper .topbar .topbar-menu > li > ul a span {
                        vertical-align: middle;
                    }

                    .layout-wrapper .topbar .topbar-menu > li > ul a .topbar-submenuitem-badge {
                        background-color: #4298B5;
                        padding: 2px 4px;
                        display: block;
                        font-size: 12px;
                        border-radius: 3px;
                        color: #FFFFFF;
                        float: right;
                    }

                    .layout-wrapper .topbar .topbar-menu > li > ul a:hover {
                        background-color: #E2E2E2;
                        transition: background-color 0.3s;
                    }

            .layout-wrapper .topbar .topbar-menu > li.active-topmenuitem > ul {
                display: block;
            }

.layout-wrapper .layout-sidebar {
    position: fixed;
    top: 60px;
    width: 60px;
    background-color: #f5f5f5;
    height: 100%;
    box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.24), 0 25px 55px 0 rgba(0, 0, 0, 0.19);
    z-index: 100;
    transition: width 0.3s;
}

    .layout-wrapper .layout-sidebar .layout-tabmenu {
        height: 100%;
        position: relative;
    }

        .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav {
            margin: 0;
            padding: 0;
            display: block;
            z-index: 100;
            width: 60px;
        }

            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li {
                list-style-type: none;
                text-align: center;
                box-sizing: border-box;
                position: relative;
            }

                .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li a {
                    display: block;
                    height: 60px;
                    line-height: 60px;
                    width: 100%;
                    box-sizing: border-box;
                    color: #757575;
                    transition: background-color 0.3s;
                }

                    .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li a i {
                        line-height: inherit;
                        transition: color 0.3s;
                        font-size: 22px;
                    }

                    .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li a:hover {
                        background-color: #E0E0E0;
                    }

                .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li.active-item {
                    border-left: 4px solid #4298B5;
                }

                    .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li.active-item a {
                        background: #ffffff;
                        color: #4298B5;
                    }

                        .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li.active-item a i {
                            margin-left: -4px;
                        }

                    .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li.active-item .layout-tabmenu-tooltip {
                        left: 56px;
                    }

                .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li .layout-tabmenu-tooltip {
                    display: none;
                    padding: 0 5px;
                    position: absolute;
                    left: 60px;
                    top: 20px;
                    z-index: 101;
                    line-height: 1;
                }

                    .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li .layout-tabmenu-tooltip .layout-tabmenu-tooltip-text {
                        padding: 6px 8px;
                        font-weight: 700;
                        background-color: #424242;
                        color: #ffffff;
                        min-width: 75px;
                        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
                    }

                    .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li .layout-tabmenu-tooltip .layout-tabmenu-tooltip-arrow {
                        position: absolute;
                        width: 0;
                        height: 0;
                        border-color: transparent;
                        border-style: solid;
                        top: 50%;
                        left: 0;
                        margin-top: -5px;
                        border-width: 5px 5px 5px 0;
                        border-right-color: #424242;
                    }

        .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents {
            width: 250px;
            position: absolute;
            top: 0;
            left: 60px;
            display: none;
            background-color: #ffffff;
            height: 100%;
        }

            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content {
                height: 100%;
                display: none;
            }

                .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content.layout-tabmenu-content-active {
                    display: block;
                }

                .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content a {
                    color: #626365;
                }

                .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-title {
                    padding: 24px 16px 0 16px;
                    box-sizing: border-box;
                    color: #424242;
                    font-weight: bold;
                    font-size: 16px;
                }

                    .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-title .menu-pin-button {
                        padding: 4px;
                        margin-top: -4px;
                        height: 24px;
                        width: 24px;
                        line-height: 24px;
                        float: right;
                        text-align: center;
                        border-radius: 50%;
                        transition: background-color 0.3s;
                    }

                        .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-title .menu-pin-button i {
                            line-height: inherit;
                            transition: transform 0.3s;
                        }

                        .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-title .menu-pin-button:hover {
                            background-color: #E0E0E0;
                        }

                    .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-title .menu-button {
                        padding: 4px;
                        margin-top: -4px;
                        float: right;
                        font-size: 20px;
                        border-radius: 50%;
                        transition: background-color 0.3s;
                    }

                        .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-title .menu-button:hover {
                            background-color: #E0E0E0;
                        }

                .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content {
                    padding: 8px 0;
                    height: 100%;
                    overflow: auto;
                }

                    .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu {
                        margin: 0;
                        padding: 0;
                        padding-bottom: 150px;
                        list-style-type: none;
                    }

                        .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li a {
                            display: block;
                            -webkit-user-select: none;
                            -moz-user-select: none;
                            -ms-user-select: none;
                            user-select: none;
                            cursor: pointer;
                            padding: 8px 16px;
                            transition: background-color 0.3s;
                        }

                            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li a i:first-child {
                                margin-right: 8px;
                                display: inline-block;
                                vertical-align: middle;
                                font-size: 18px;
                            }

                            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li a span {
                                display: inline-block;
                                vertical-align: middle;
                            }

                            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li a.rotated-icon .layout-menuitem-icon {
                                transform: rotate(90deg);
                            }

                            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li a i.submenu-toggler {
                                float: right;
                                font-size: 16px;
                                transition: transform 0.3s;
                            }

                            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li a:hover {
                                background-color: #E0E0E0;
                            }

                            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li a.active-menuitem-routerlink {
                                color: #4298B5;
                            }

                                .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li a.active-menuitem-routerlink i {
                                    color: #4298B5;
                                }

                        .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li.red-badge > a .menuitem-badge {
                            background-color: #F44336;
                            color: #ffffff;
                        }

                        .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li ul {
                            margin: 0;
                            padding: 0;
                            list-style-type: none;
                            overflow: hidden;
                        }

                            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li ul li a {
                                padding: 8px 32px 8px 32px;
                            }

                            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li ul li ul li a {
                                padding: 8px 32px 8px 48px;
                            }

                            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li ul li ul li ul li a {
                                padding: 8px 32px 8px 64px;
                            }

                            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li ul li ul li ul li ul li a {
                                padding: 8px 32px 8px 80px;
                            }

                            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li ul li ul li ul li ul li ul li a {
                                padding: 8px 32px 8px 96px;
                            }

                            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li ul li ul li ul li ul li ul li ul li a {
                                padding: 8px 32px 8px 112px;
                            }

                        .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li.active-menuitem > a {
                            color: #4298B5;
                        }

                            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu li.active-menuitem > a i.submenu-toggler {
                                transform: rotate(-180deg);
                            }

                        .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-content .navigation-menu .menuitem-badge {
                            position: absolute;
                            right: 58px;
                            top: 10px;
                            display: inline-block;
                            width: 16px;
                            height: 16px;
                            margin-right: 6px;
                            text-align: center;
                            background-color: #4298B5;
                            color: #FFFFFF;
                            font-size: 12px;
                            font-weight: 700;
                            line-height: 16px;
                            border-radius: 50%;
                        }

    .layout-wrapper .layout-sidebar.layout-sidebar-dark {
        background-color: #343434;
    }

        .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-nav li a {
            color: #757575;
        }

            .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-nav li a:hover {
                background-color: #545454;
                color: #f5f5f5;
            }

        .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-nav li.active-item {
            border-left: 4px solid #4DB6AC;
        }

            .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-nav li.active-item a {
                background-color: #424242;
            }

                .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-nav li.active-item a i {
                    color: #dee0e3;
                }

        .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-nav li .layout-tabmenu-tooltip .layout-tabmenu-tooltip-text {
            background-color: #4DB6AC;
            color: #ffffff;
        }

        .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-nav li .layout-tabmenu-tooltip .layout-tabmenu-tooltip-arrow {
            border-right-color: #4DB6AC;
        }

        .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-contents {
            background-color: #424242;
        }

            .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-title {
                color: #dee0e3;
                border-bottom-color: #82878b;
            }

                .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-title .menu-button, .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-title .menu-pin-button {
                    color: #dee0e3;
                }

                    .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-title .menu-button:hover, .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-title .menu-pin-button:hover {
                        background-color: #545454;
                    }

            .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-contents .layout-submenu-content .navigation-menu li > a {
                color: #dee0e3;
            }

                .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-contents .layout-submenu-content .navigation-menu li > a i:first-child {
                    color: #dee0e3;
                }

                .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-contents .layout-submenu-content .navigation-menu li > a:hover {
                    background-color: #545454;
                }

                    .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-contents .layout-submenu-content .navigation-menu li > a:hover i:first-child {
                        color: #dee0e3;
                    }

                .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-contents .layout-submenu-content .navigation-menu li > a.active-menuitem-routerlink {
                    color: #83ccc5;
                }

                    .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-contents .layout-submenu-content .navigation-menu li > a.active-menuitem-routerlink i {
                        color: #83ccc5;
                    }

            .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-contents .layout-submenu-content .navigation-menu li.active-menuitem > a {
                color: #4DB6AC;
            }

                .layout-wrapper .layout-sidebar.layout-sidebar-dark .layout-tabmenu .layout-tabmenu-contents .layout-submenu-content .navigation-menu li.active-menuitem > a i:first-child {
                    color: #4DB6AC;
                }

.layout-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

    .layout-wrapper .layout-main {
        flex: 1 1 0;
        margin-left: 65px;
        padding: 80px 10px 0px 10px;
        transition: margin-left 0.3s;
    }

    .layout-wrapper .footer {
        margin-left: 65px;
        padding: 0.5em;
        transition: margin-left 0.3s;
    }

        .layout-wrapper .footer .footer-text-left {
            float: left;
        }

        .layout-wrapper .footer .footer-text-right {
            color: #9C9C9D;
            float: right;
        }

            .layout-wrapper .footer .footer-text-right span {
                vertical-align: middle;
                display: inline-block;
            }

.layout-config {
    position: fixed;
    top: 60px;
    padding: 0;
    right: 0;
    display: block;
    width: 16em;
    z-index: 998;
    height: calc(100% - 50px);
    transform: translate3d(16em, 0px, 0px);
    transition: transform 0.3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24);
    color: #333333;
    background-color: #ffffff;
}

    .layout-config.layout-config-active {
        transform: translate3d(0px, 0px, 0px);
    }

        .layout-config.layout-config-active .layout-config-button i {
            transform: rotate(360deg);
        }

    .layout-config .layout-config-button {
        display: block;
        position: absolute;
        width: 52px;
        height: 52px;
        line-height: 52px;
        background-color: #ffffff;
        text-align: center;
        color: #333333;
        top: 230px;
        left: -52px;
        z-index: -1;
        overflow: hidden;
        cursor: pointer;
        transition: background-color 0.3s;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24);
    }

        .layout-config .layout-config-button i {
            font-size: 32px;
            line-height: inherit;
            cursor: pointer;
            transform: rotate(0deg);
            transition: color 0.3s, transform 1s;
        }

    .layout-config .layout-config-close {
        position: absolute;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        right: 14px;
        top: 10px;
        z-index: 1;
        background-color: #e54a51;
        border-radius: 50%;
        transition: background-color 0.3s;
    }

        .layout-config .layout-config-close i {
            color: #ffffff;
            line-height: inherit;
            font-size: 12px;
        }

        .layout-config .layout-config-close:hover {
            background-color: #ea6e73;
        }

    .layout-config .layout-config-content {
        position: relative;
        height: 100%;
        padding: 1em;
        overflow: auto;
        padding-bottom: 3em;
    }

        .layout-config .layout-config-content .layout-themes {
            display: flex;
            flex-wrap: wrap;
        }

            .layout-config .layout-config-content .layout-themes > div {
                padding: 0.25rem;
            }

            .layout-config .layout-config-content .layout-themes a {
                width: 2rem;
                height: 2rem;
                border-radius: 3px;
                display: block;
                position: relative;
                align-items: center;
                justify-content: center;
                transition: transform 0.3s;
                box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            }

                .layout-config .layout-config-content .layout-themes a i {
                    font-size: 1rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-left: -0.5rem;
                    margin-top: -0.5rem;
                    color: #ffffff;
                }

                .layout-config .layout-config-content .layout-themes a:hover {
                    transform: scale(1.1);
                }

    .layout-config .col {
        text-align: center;
    }

    .layout-config p {
        line-height: 1.5;
        margin-top: 0;
        color: #9C9C9D;
    }

.blocked-scroll-config {
    overflow: hidden;
}

@media screen and (max-width: 1024px) {
    .layout-config {
        transform: translate3d(100%, 0px, 0px);
    }

        .layout-config.layout-config-active {
            transform: translate3d(0px, 0px, 0px);
        }

        .layout-config .layout-config-close {
            right: 10px;
        }
}

@media (min-width: 1025px) {
    .layout-wrapper.layout-wrapper-menu-active .layout-sidebar {
        width: 310px;
    }

        .layout-wrapper.layout-wrapper-menu-active .layout-sidebar .layout-tabmenu .layout-tabmenu-contents {
            display: block;
        }

    .layout-wrapper.layout-wrapper-menu-active .layout-main {
        margin-left: 310px;
    }

    .layout-wrapper.layout-wrapper-menu-active .footer {
        margin-left: 310px;
    }

    .layout-wrapper.layout-overlay-menu.layout-wrapper-menu-active .layout-main {
        margin-left: 65px;
    }

    .layout-wrapper.layout-overlay-menu.layout-wrapper-menu-active .footer {
        margin-left: 65px;
    }
}

@media (max-width: 1024px) {
    .layout-wrapper .topbar #topbar-menu-button {
        display: block;
    }

        .layout-wrapper .topbar #topbar-menu-button i {
            font-size: 18px;
        }

    .layout-wrapper .topbar .topbar-menu {
        position: absolute;
        top: 60px;
        right: 15px;
        width: 250px;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        display: none;
        background-color: #FFFFFF;
        list-style-type: none;
        margin: 0;
        padding: 8px 0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    }

        .layout-wrapper .topbar .topbar-menu > li {
            box-sizing: border-box;
            width: 100%;
            margin: 0;
            float: none;
        }

            .layout-wrapper .topbar .topbar-menu > li > a {
                font-size: 14px;
                width: 100%;
                display: block;
                box-sizing: border-box;
                color: #333333;
                padding: 0.571em 0.857em;
                position: relative;
                transition: background-color 0.3s;
            }

                .layout-wrapper .topbar .topbar-menu > li > a .topbar-icon {
                    display: inline-block;
                    vertical-align: middle;
                    margin-right: 8px;
                    font-size: 20px;
                }

                .layout-wrapper .topbar .topbar-menu > li > a:hover {
                    background-color: #E2E2E2;
                    color: #333333;
                }

                .layout-wrapper .topbar .topbar-menu > li > a .topbar-item-name {
                    display: inline-block;
                    vertical-align: middle;
                }

                .layout-wrapper .topbar .topbar-menu > li > a .topbar-badge {
                    position: absolute;
                    right: 10px;
                    top: 8px;
                    padding: 2px 4px;
                    display: block;
                    font-size: 12px;
                    line-height: 12px;
                }

            .layout-wrapper .topbar .topbar-menu > li > ul {
                display: none;
                list-style-type: none;
                padding: 0 0 0 18px;
                margin: 0;
                position: static;
                top: auto;
                left: auto;
                box-sizing: border-box;
                width: 100%;
                box-shadow: none;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
            }

                .layout-wrapper .topbar .topbar-menu > li > ul li a {
                    padding: 0.571em 0.857em;
                    display: block;
                    width: 100%;
                    box-sizing: border-box;
                }

                    .layout-wrapper .topbar .topbar-menu > li > ul li a span, .layout-wrapper .topbar .topbar-menu > li > ul li a img, .layout-wrapper .topbar .topbar-menu > li > ul li a .fa, .layout-wrapper .topbar .topbar-menu > li > ul li a i {
                        display: inline-block;
                        vertical-align: middle;
                    }

                    .layout-wrapper .topbar .topbar-menu > li > ul li a img {
                        width: 1.28571429em;
                        margin-right: 8px;
                    }

                    .layout-wrapper .topbar .topbar-menu > li > ul li a .fa, .layout-wrapper .topbar .topbar-menu > li > ul li a i {
                        margin-right: 8px;
                    }

            .layout-wrapper .topbar .topbar-menu > li.active-topmenuitem > ul {
                display: block;
            }

            .layout-wrapper .topbar .topbar-menu > li.profile-item .profile-image img {
                display: inline-block;
                vertical-align: middle;
                width: 24px;
                height: 24px;
                margin-right: 8px;
            }

            .layout-wrapper .topbar .topbar-menu > li.profile-item .profile-info .topbar-item-name.profile-name {
                vertical-align: middle;
                font-size: 14px;
            }

            .layout-wrapper .topbar .topbar-menu > li.profile-item .profile-info .topbar-item-name.profile-role {
                display: none;
            }

            .layout-wrapper .topbar .topbar-menu > li.search-item {
                text-align: center;
            }

                .layout-wrapper .topbar .topbar-menu > li.search-item i {
                    color: #333333;
                }

                .layout-wrapper .topbar .topbar-menu > li.search-item input {
                    color: #333333;
                    border: 0 none;
                    width: 90%;
                    box-sizing: border-box;
                    padding-left: 10px;
                    padding-right: 2px;
                }

        .layout-wrapper .topbar .topbar-menu.topbar-menu-visible {
            display: block;
        }

    .layout-wrapper.layout-wrapper-menu-active .layout-sidebar {
        width: 310px;
    }

        .layout-wrapper.layout-wrapper-menu-active .layout-sidebar .layout-tabmenu .layout-tabmenu-contents {
            display: block;
        }
}

@media (max-width: 640px) {
    .layout-wrapper .topbar .logo {
        width: 40px;
        padding-top: 20px;
    }

        .layout-wrapper .topbar .logo img {
            width: 30px;
            margin-top: -5px;
        }

    .layout-wrapper .layout-sidebar {
        width: 40px;
    }

        .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav {
            width: 40px;
        }

            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li a i {
                font-size: 20px;
            }

            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li .layout-tabmenu-tooltip {
                left: 40px;
            }

            .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li.active-item .layout-tabmenu-tooltip {
                left: 36px;
            }

        .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents {
            left: 40px;
        }

    .layout-wrapper.layout-wrapper-menu-active .layout-sidebar {
        width: 290px;
    }

    .layout-wrapper .layout-main {
        margin-left: 40px;
    }

    .layout-wrapper .footer {
        margin-left: 40px;
    }
}

.layout-tabmenu-content .inbox-tab {
    width: 250px;
    padding-bottom: 180px;
}

    .layout-tabmenu-content .inbox-tab ul {
        padding: 0 6px;
        margin: 0;
        list-style-type: none;
    }

        .layout-tabmenu-content .inbox-tab ul li {
            padding: 8px 16px;
        }

            .layout-tabmenu-content .inbox-tab ul li img {
                float: left;
                margin-right: 8px;
            }

            .layout-tabmenu-content .inbox-tab ul li .name {
                font-weight: bold;
                float: left;
            }

            .layout-tabmenu-content .inbox-tab ul li .message {
                float: left;
            }

    .layout-tabmenu-content .inbox-tab .inbox-labels {
        margin: 20px 6px 0 6px;
    }

        .layout-tabmenu-content .inbox-tab .inbox-labels > span {
            font-weight: bold;
        }

        .layout-tabmenu-content .inbox-tab .inbox-labels ul {
            margin-top: 10px;
        }

            .layout-tabmenu-content .inbox-tab .inbox-labels ul li {
                padding: 6px;
            }

                .layout-tabmenu-content .inbox-tab .inbox-labels ul li .inbox-label-badge {
                    color: #FFFFFF;
                    background-color: #4298B5;
                    padding: 2px 6px;
                    border-radius: 3px;
                    float: right;
                    margin-top: -3px;
                }

.layout-tabmenu-content .calendar-tab ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

    .layout-tabmenu-content .calendar-tab ul li {
        padding: 8px 16px;
    }

        .layout-tabmenu-content .calendar-tab ul li .calendar-event-date {
            float: left;
            width: 48px;
            height: 48px;
            text-align: center;
            padding: 6px 0 0 0;
            font-size: 14px;
            font-weight: 700;
            box-sizing: border-box;
            margin-right: 8px;
            background-color: #4298B5;
            color: #FFFFFF;
        }

            .layout-tabmenu-content .calendar-tab ul li .calendar-event-date span {
                width: 100%;
                display: inline-block;
            }

        .layout-tabmenu-content .calendar-tab ul li .calendar-event-detail {
            float: left;
        }

            .layout-tabmenu-content .calendar-tab ul li .calendar-event-detail .calendar-event-title {
                font-weight: 700;
                display: block;
            }

            .layout-tabmenu-content .calendar-tab ul li .calendar-event-detail i {
                margin-right: 4px;
                margin-top: 2px;
            }

            .layout-tabmenu-content .calendar-tab ul li .calendar-event-detail .calendar-event-location {
                position: relative;
            }

            .layout-tabmenu-content .calendar-tab ul li .calendar-event-detail .calendar-event-rsvp {
                display: block;
            }

                .layout-tabmenu-content .calendar-tab ul li .calendar-event-detail .calendar-event-rsvp.calendar-event-rsvp-yes {
                    color: #35ae47;
                }

                .layout-tabmenu-content .calendar-tab ul li .calendar-event-detail .calendar-event-rsvp.calendar-event-rsvp-maybe {
                    color: #f5a623;
                }

.layout-tabmenu-content .projects-tab {
    padding-bottom: 180px;
}

    .layout-tabmenu-content .projects-tab ul {
        width: 250px;
        padding: 8px 16px;
        margin: 0;
        list-style-type: none;
    }

        .layout-tabmenu-content .projects-tab ul li {
            padding: 12px 0;
        }

            .layout-tabmenu-content .projects-tab ul li i {
                font-size: 30px;
                margin-right: 12px;
                float: left;
                width: 32px;
                color: #9C9C9D;
            }

            .layout-tabmenu-content .projects-tab ul li .project-title {
                font-weight: 700;
            }

            .layout-tabmenu-content .projects-tab ul li span {
                float: left;
                display: block;
            }

            .layout-tabmenu-content .projects-tab ul li .project-progressbar {
                width: 100px;
                float: left;
                background-color: #545b61;
                margin-top: 4px;
                margin-left: 42px;
            }

                .layout-tabmenu-content .projects-tab ul li .project-progressbar .project-progressbar-value {
                    background-color: #4298B5;
                    height: 4px;
                }

.layout-tabmenu-content .team-tab ul {
    padding: 8px 16px;
    margin: 0;
    list-style-type: none;
}

    .layout-tabmenu-content .team-tab ul li {
        padding: 6px 0;
    }

        .layout-tabmenu-content .team-tab ul li img {
            float: left;
            margin-right: 8px;
        }

        .layout-tabmenu-content .team-tab ul li .name {
            font-weight: bold;
            float: left;
        }

        .layout-tabmenu-content .team-tab ul li .location {
            float: left;
        }

        .layout-tabmenu-content .team-tab ul li span {
            display: block;
        }

.layout-sidebar-dark .layout-tabmenu-content {
    color: #dee0e3;
}

.splash-screen {
    background: #1F796D;
    width: 100%;
    height: 100%;
    position: fixed;
}

    .splash-screen .splash-loader {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -60px 0 0 -60px;
        width: 100px;
        height: 100px;
        border-radius: 100%;
        background-color: #0a423b;
        border: 10px solid #0a423b;
    }

        .splash-screen .splash-loader img {
            width: 100px;
            margin-top: -10px;
            margin-left: -10px;
        }

        .splash-screen .splash-loader:after {
            content: "";
            background: transparent;
            width: 140%;
            height: 140%;
            position: absolute;
            border-radius: 100%;
            top: -20%;
            left: -20%;
            opacity: 0.7;
            box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;
            -webkit-animation: rotate 1s infinite linear;
            animation: rotate 1s infinite linear;
        }

@-webkit-keyframes rotate {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

.help-page p {
    margin: 0;
}

.help-page .help-search {
    background: url("../../layout/images/pages/bg-help.png") repeat;
    padding: 0;
    text-align: center;
}

    .help-page .help-search .help-search-content {
        padding: 5rem 12rem;
    }

    .help-page .help-search .search-container {
        font-size: 1.5rem;
        padding: 1rem;
        position: relative;
    }

        .help-page .help-search .search-container input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            font-size: 1.5rem;
            text-indent: 2.5rem;
            padding: 0.5rem;
            width: 100%;
        }

        .help-page .help-search .search-container i {
            color: #333333;
            width: 2rem;
            position: absolute;
            margin-left: 1rem;
            top: 50%;
            margin-top: -0.5rem;
        }

.help-page .status-bars {
    margin-top: 1rem;
    display: flex;
}

    .help-page .status-bars .status-bar {
        flex: 1 1 0;
        -ms-flex: 1 1 0px;
        background: #8BC34A;
        height: 50px;
        margin-right: 0.25rem;
        transition: transform 0.3s;
    }

        .help-page .status-bars .status-bar:last-child {
            margin-right: 0;
        }

        .help-page .status-bars .status-bar.status-bar-failure {
            background: #EC407A;
        }

        .help-page .status-bars .status-bar:hover {
            transform: scale(1.1);
        }

.help-page .status-bar-footer {
    padding: 1rem 0 0 0;
    display: flex;
    justify-content: space-between;
}

.help-page .blog-post {
    height: 150px;
    border-radius: 4px;
    margin: 3rem 2rem;
    position: relative;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

    .help-page .blog-post:last-child {
        margin-bottom: 1rem;
    }

    .help-page .blog-post img {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .help-page .blog-post .blog-text {
        position: absolute;
        left: 20px;
        top: 30px;
    }

        .help-page .blog-post .blog-text h1 {
            font-size: 1.25rem;
            color: #ffffff;
            margin-bottom: 1rem;
            font-weight: 700;
        }

        .help-page .blog-post .blog-text span {
            color: #ffffff;
            font-weight: 600;
        }

    .help-page .blog-post .blog-profile {
        position: absolute;
        top: -25px;
        left: -25px;
    }

        .help-page .blog-post .blog-profile img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

    .help-page .blog-post:nth-child(1) {
        background-image: url("../../layout/images/pages/help/blog1.jpg");
    }

    .help-page .blog-post:nth-child(2) {
        background-image: url("../../layout/images/pages/help/blog2.jpg");
    }

    .help-page .blog-post:nth-child(3) {
        background-image: url("../../layout/images/pages/help/blog3.jpg");
    }

@media screen and (max-width: 991px) {
    .help-page .help-search .help-search-content {
        padding: 6rem 2rem;
    }
}

#invoice-content .invoice {
    padding: 2rem;
}

    #invoice-content .invoice .invoice-header {
        display: flex;
        justify-content: space-between;
    }

    #invoice-content .invoice .invoice-company .logo-image {
        width: 75px;
        margin-bottom: 0.5rem;
    }

    #invoice-content .invoice .invoice-company div {
        margin-bottom: 0.5rem;
    }

    #invoice-content .invoice .invoice-company .company-name {
        font-weight: 700;
        font-size: 1.5rem;
    }

    #invoice-content .invoice .invoice-title {
        font-size: 2rem;
        margin-bottom: 2rem;
        text-align: right;
    }

    #invoice-content .invoice .invoice-details {
        width: 15rem;
        display: flex;
        flex-wrap: wrap;
    }

        #invoice-content .invoice .invoice-details > div {
            width: 50%;
            margin-bottom: 0.5rem;
        }

        #invoice-content .invoice .invoice-details .invoice-label {
            text-align: left;
            font-weight: 700;
        }

        #invoice-content .invoice .invoice-details .invoice-value {
            text-align: right;
        }

    #invoice-content .invoice .invoice-to {
        margin-top: 1.5rem;
        padding-top: 2rem;
        border-top: 1px solid #9C9C9D;
    }

        #invoice-content .invoice .invoice-to .bill-to {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        #invoice-content .invoice .invoice-to .invoice-to-info div {
            margin-bottom: 0.5rem;
        }

    #invoice-content .invoice .invoice-items {
        margin-top: 2rem;
        padding-top: 2rem;
    }

        #invoice-content .invoice .invoice-items table {
            width: 100%;
            border-collapse: collapse;
        }

            #invoice-content .invoice .invoice-items table tr {
                border-bottom: 1px solid #9C9C9D;
            }

            #invoice-content .invoice .invoice-items table th {
                font-weight: 700;
            }

            #invoice-content .invoice .invoice-items table th, #invoice-content .invoice .invoice-items table td {
                padding: 1rem;
                text-align: right;
            }

                #invoice-content .invoice .invoice-items table th:first-child, #invoice-content .invoice .invoice-items table td:first-child {
                    text-align: left;
                }

    #invoice-content .invoice .invoice-summary {
        display: flex;
        justify-content: space-between;
        margin-top: 2.5rem;
        padding-top: 2.5rem;
    }

        #invoice-content .invoice .invoice-summary .invoice-value {
            font-weight: 700;
        }

@media print {
    body * {
        visibility: hidden;
    }

    #invoice-content * {
        visibility: visible;
    }

    #invoice-content {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        padding: 0;
        margin: 0;
    }
}

h1, h2, h3, h4, h5, h6 {
    margin: 1.5rem 0 1rem 0;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}

    h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
        margin-top: 0;
    }

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

mark {
    background: #FFF8E1;
    padding: 0.25rem 0.4rem;
    border-radius: 3px;
    font-family: monospace;
}

blockquote {
    margin: 1rem 0;
    padding: 0 2rem;
    border-left: 4px solid #90A4AE;
}

hr {
    border-top: solid #9C9C9D;
    border-width: 1px 0 0 0;
    margin: 1rem 0;
}

p {
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

    p:last-child {
        margin-bottom: 0;
    }

.widget-overview-box {
    padding: 0 !important;
    text-align: left;
    overflow: hidden;
    margin-bottom: 0px !important;
    position: relative;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    min-height: 100px;
}

    .widget-overview-box .overview-box-name {
        font-size: 16px;
        display: block;
        width: 100%;
        margin: 8px 0 0 8px;
        color: #ffffff;
        opacity: 0.8;
        filter: alpha(opacity=80);
    }

    .widget-overview-box .overview-box-count {
        color: #ffffff;
        margin: -36px 0 0 8px;
        font-size: 24px;
        display: block;
        font-weight: bold;
    }

    .widget-overview-box .overview-box-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.12);
        border-radius: 3px;
        padding: 2px 4px;
        color: #ffffff;
    }

    .widget-overview-box img {
        position: absolute;
        bottom: 0px;
    }

    .widget-overview-box.overview-box-1 {
        background: linear-gradient(229deg, #fd9a77, #fb827a);
    }

    .widget-overview-box.overview-box-2 {
        background: linear-gradient(229deg, #8edead, #43c6ac);
    }

    .widget-overview-box.overview-box-3 {
        background: linear-gradient(248deg, #348ac7, #7474bf);
    }

    .widget-overview-box.overview-box-4 {
        background: linear-gradient(67deg, #f15f79, #b24592);
    }

.widget-activity-feed {
    text-align: center;
}

    .widget-activity-feed h4 {
        padding-top: 1.5rem;
    }

    .widget-activity-feed p {
        color: #9C9C9D;
        margin: 0;
        font-size: 13px;
    }

    .widget-activity-feed .col-12 {
        padding: 20px;
    }

        .widget-activity-feed .col-12 span {
            display: block;
            font-weight: bold;
            color: #6a6a7d;
        }

    .widget-activity-feed .knob {
        width: 140px;
        height: 140px;
        line-height: 120px;
        margin-top: 20px;
        font-size: 30px;
        color: #9C9C9D;
        border-radius: 50%;
        display: inline-block;
    }

        .widget-activity-feed .knob.income {
            border: 10px solid #1976d2;
            border-left-color: #b2dbfb;
        }

        .widget-activity-feed .knob.tax {
            border: 10px solid #009688;
            border-left-color: #80CBC4;
        }

        .widget-activity-feed .knob.invoice {
            border: 10px solid #e91e63;
            border-left-color: #F8BBD0;
        }

        .widget-activity-feed .knob.expense {
            border: 10px solid #673ab7;
            border-left-color: #B39DDB;
        }

.widget-timeline {
    height: 100%;
    box-sizing: border-box;
}

    .widget-timeline > .grid .col-3 {
        font-size: 14px;
        position: relative;
        border-right: 1px solid #bdbdbd;
    }

        .widget-timeline > .grid .col-3 i {
            background-color: #ffffff;
            font-size: 28px;
            position: absolute;
            top: 0;
            right: -14px;
        }

    .widget-timeline > .grid .col-9 {
        padding-left: 1.5em;
    }

        .widget-timeline > .grid .col-9 .event-text {
            color: #9C9C9D;
            font-size: 14px;
            display: block;
            padding-bottom: 20px;
        }

        .widget-timeline > .grid .col-9 .event-content img {
            width: 100%;
        }

.widget-user-card {
    border-radius: 3px;
}

    .widget-user-card .user-card-header {
        height: 100px;
        overflow: hidden;
        background-color: #545b61;
    }

        .widget-user-card .user-card-header img {
            width: 100%;
        }

    .widget-user-card .user-card-content {
        height: 340px;
        background-color: #ffffff;
    }

        .widget-user-card .user-card-content img {
            margin: -40px 0 0 24px;
        }

        .widget-user-card .user-card-content .p-button {
            float: right;
            width: 48px;
            height: 48px;
            margin: -24px 24px 0 0;
        }

        .widget-user-card .user-card-content .user-card-name {
            font-size: 20px;
            color: #ffffff;
            position: relative;
            top: -70px;
            margin-left: 110px;
            font-weight: 700;
        }

        .widget-user-card .user-card-content .user-detail {
            text-align: left;
        }

            .widget-user-card .user-card-content .user-detail ul {
                padding: 0px 0 32px 0;
                margin: 0;
                list-style-type: none;
            }

                .widget-user-card .user-card-content .user-detail ul li {
                    padding: 16px 24px;
                    border-top: 1px solid #9C9C9D;
                }

                    .widget-user-card .user-card-content .user-detail ul li:last-child {
                        border-bottom: 1px solid #9C9C9D;
                    }

                    .widget-user-card .user-card-content .user-detail ul li i {
                        font-size: 24px;
                        margin-right: 8px;
                        width: 32px;
                        vertical-align: middle;
                        color: #9C9C9D;
                    }

                    .widget-user-card .user-card-content .user-detail ul li .project-title {
                        font-weight: 700;
                        margin-right: 8px;
                    }

                    .widget-user-card .user-card-content .user-detail ul li .project-detail {
                        color: #9C9C9D;
                    }

                    .widget-user-card .user-card-content .user-detail ul li .project-progressbar {
                        display: inline-block;
                        width: 100px;
                        background-color: #545b61;
                        float: right;
                        margin-top: 12px;
                    }

                        .widget-user-card .user-card-content .user-detail ul li .project-progressbar .project-progressbar-value {
                            background-color: #4298B5;
                            height: 4px;
                        }

.widget-contacts {
    overflow: hidden;
}

    .widget-contacts ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

        .widget-contacts ul li {
            border-bottom: 1px solid #9C9C9D;
            padding: 9px;
            width: 100%;
            box-sizing: border-box;
            text-decoration: none;
            position: relative;
            display: block;
            border-radius: 2px;
            transition: background-color 0.2s;
        }

            .widget-contacts ul li img {
                float: left;
                margin-right: 8px;
            }

            .widget-contacts ul li .contact-info {
                float: left;
            }

                .widget-contacts ul li .contact-info .name {
                    display: block;
                    margin-top: 4px;
                    font-size: 14px;
                }

                .widget-contacts ul li .contact-info .location {
                    margin-top: 4px;
                    display: block;
                    font-size: 12px;
                    color: #9C9C9D;
                }

            .widget-contacts ul li .contact-actions {
                float: right;
                padding-top: 12px;
            }

                .widget-contacts ul li .contact-actions .connection-status {
                    color: #ffffff;
                    padding: 2px 3px;
                    vertical-align: middle;
                }

                    .widget-contacts ul li .contact-actions .connection-status.online {
                        background-color: #AED581;
                    }

                    .widget-contacts ul li .contact-actions .connection-status.offline {
                        background-color: #E57373;
                    }

                .widget-contacts ul li .contact-actions i {
                    vertical-align: middle;
                    color: #9C9C9D;
                    margin-left: 5px;
                }

            .widget-contacts ul li:last-child {
                border: 0;
            }

.widget-pricing-box {
    display: inline-block;
    vertical-align: top;
}

    .widget-pricing-box .pricing-header {
        font-size: 18px;
        padding: 24px 18px;
    }

        .widget-pricing-box .pricing-header h3 {
            margin: 0;
        }

        .widget-pricing-box .pricing-header p {
            margin: 0;
        }

        .widget-pricing-box .pricing-header .col-6:first-child {
            text-align: left;
        }

        .widget-pricing-box .pricing-header .col-6:last-child {
            text-align: right;
        }

    .widget-pricing-box .pricing-features {
        min-height: 200px;
        box-sizing: border-box;
    }

    .widget-pricing-box .pricing-footer {
        padding: 10px;
        text-align: center;
    }

        .widget-pricing-box .pricing-footer a {
            transition: color 0.3s;
        }

    .widget-pricing-box.pricing-pro {
        margin-left: 10px;
        z-index: 2;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
        -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
        -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    }

        .widget-pricing-box.pricing-pro .pricing-header {
            background-color: #000000;
        }

            .widget-pricing-box.pricing-pro .pricing-header h3 {
                color: #ffffff;
            }

            .widget-pricing-box.pricing-pro .pricing-header p {
                color: #bdbdbd;
            }

        .widget-pricing-box.pricing-pro .pricing-features {
            background-color: #757575;
            padding: 20px;
        }

            .widget-pricing-box.pricing-pro .pricing-features .col-12 {
                padding: 10px;
                text-align: left;
            }

            .widget-pricing-box.pricing-pro .pricing-features .pricing-feature-icon {
                background-color: #ffffff;
                width: 32px;
                height: 32px;
                line-height: 32px;
                display: inline-block;
                text-align: center;
                color: #424242;
                border-radius: 50%;
                margin-right: 8px;
            }

                .widget-pricing-box.pricing-pro .pricing-features .pricing-feature-icon i {
                    line-height: inherit;
                }

            .widget-pricing-box.pricing-pro .pricing-features .pricing-feature-text {
                color: #ffffff;
            }

        .widget-pricing-box.pricing-pro .pricing-footer {
            background-color: #ffffff;
        }

            .widget-pricing-box.pricing-pro .pricing-footer a {
                color: #424242;
            }

                .widget-pricing-box.pricing-pro .pricing-footer a:hover {
                    color: #757575;
                }

.widget-chat .p-panel-content {
    padding: 0 !important;
}

.widget-chat ul {
    padding: 12px;
    margin: 0;
    list-style-type: none;
}

    .widget-chat ul li {
        padding: 6px 0;
    }

        .widget-chat ul li img {
            width: 36px;
            float: left;
        }

        .widget-chat ul li span {
            padding: 6px 12px;
            float: left;
            display: inline-block;
            margin: 4px 0;
            border-radius: 10px;
        }

        .widget-chat ul li.message-from img, .widget-chat ul li.message-from span {
            float: left;
        }

        .widget-chat ul li.message-from img {
            margin-right: 8px;
        }

        .widget-chat ul li.message-from span {
            background-color: #FFFFFF;
            color: #000000;
        }

        .widget-chat ul li.message-own img, .widget-chat ul li.message-own span {
            float: right;
        }

        .widget-chat ul li.message-own img {
            margin-left: 8px;
        }

        .widget-chat ul li.message-own span {
            background: #8EC1D3;
            color: #000000;
        }

.widget-chat .new-message {
    height: 40px;
    border-top: 1px solid #dce2e7;
    color: #afafc0;
}

    .widget-chat .new-message .message-attachment {
        display: inline-block;
        border-right: 1px solid #dce2e7;
        width: 40px;
        line-height: 40px;
        height: 100%;
        text-align: center;
    }

        .widget-chat .new-message .message-attachment i {
            line-height: inherit;
            font-size: 24px;
        }

    .widget-chat .new-message .message-input {
        position: relative;
        top: -4px;
        width: calc(100% - 100px);
        display: inline-block;
    }

        .widget-chat .new-message .message-input input {
            border: 0 none;
            font-size: 14px;
            width: 100%;
            background-color: transparent;
            outline: 0 none;
            color: #9C9C9D;
        }

.widget-activity-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    .widget-activity-list li {
        border-bottom: 1px solid #9C9C9D;
        padding: 16px 8px;
    }

        .widget-activity-list li .count {
            font-size: 20px;
            color: #ffffff;
            background-color: #007be5;
            font-weight: 700;
            padding: 0.25em 0.5em;
            display: inline-block;
            border-radius: 3px;
        }

/* Add your customizations of layout here */
@font-face {
    font-family: "AmpleSoft Pro Regular";
    font-style: normal;
    font-weight: normal;
    src: local("AmpleSoft Pro Regular"), url("./fonts/Ample Soft Pro.woff") format("woff");
}

@font-face {
    font-family: "AmpleSoft Pro Medium";
    font-style: normal;
    font-weight: normal;
    src: local("AmpleSoft Pro Medium"), url("./fonts/Ample Soft Pro Medium.woff") format("woff");
}

.card {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    border-radius: 5px;
    border: 1px solid #E2E2E2;
}

.layout-wrapper .topbar,
.layout-wrapper .layout-sidebar {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.main-aside-menu.p-sidebar .p-sidebar-header, .contextual-aside-menu.p-sidebar .p-sidebar-header {
    padding: 0;
}

.main-aside-menu .p-sidebar-content, .contextual-aside-menu .p-sidebar-content {
    padding: 0;
    height: 100%;
}

.layout-wrapper .layout-main {
    margin-left: 0;
    margin-top: 60px;
    padding: 10px;
    background-color: #F4F4F4;
}

.layout-wrapper .layout-sidebar {
    background-color: #4298B5;
}

    .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li a {
        color: #E2E2E2;
    }

        .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li a:hover {
            color: #FFFFFF;
            background-color: #8EC1D3;
        }

    .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li.active-item {
        border-left: 4px solid #FFFFFF;
    }

        .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-nav li.active-item a {
            color: #FFFFFF;
            background-color: #8EC1D3;
        }

small.ng-invalid {
    color: #D34737;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.h-full {
    height: 100%;
}

.w-full {
    width: 100%;
}

.w-50 {
    width: 50%;
}

.w-75 {
    width: 75%;
}

.w-90 {
    width: 90%;
}

.b-bottom-light {
    border-bottom: 1px solid #E2E2E2;
}

.text-red {
    color: #D34737;
}

.text-yellow {
    color: #FECF33;
}

h1 {
    font-size: 1.5em;
    font-weight: 400;
    margin: 1em 0;
    color: #626365;
}

    h1:first-child {
        margin-top: 0.667em;
    }

h2 {
    font-size: 1.375em;
    font-weight: 400;
}

h3 {
    font-size: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    color: #626365;
    display: inline-block;
}

h4 {
    font-size: 1em;
    font-weight: 400;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #E2E2E2;
    margin: 0.5em 0;
    padding: 0;
    width: 100%;
}

.text-green {
    color: #27BC5F;
}

.text-dark {
    color: #333333;
}

.text-grey {
    color: #9C9C9D;
}

/*WH CUSTOMS*/
.wh-primary-link {
    color: #4298B5;
    font-weight: 600;
}

.wh-textfield {
    display: flex;
    align-items: center;
    height: 40px;
}

div.wh-col-vertical-divider {
    width: 0px;
    margin: 0 1em;
    border-left: 1px solid #E2E2E2;
}

.wh-page:not(.card) {
    border-radius: 0px 5px 5px 5px;
    border: 1px solid #E2E2E2;
    background: #FFFFFF;
    padding: 1px 0 0 0;
    margin-bottom: 1em;
    box-sizing: border-box;
}

.grid.wh-grid-header {
    margin: 0.5em;
    justify-content: space-between;
}

    .grid.wh-grid-header [class*=col-] {
        padding: 0;
    }

        .grid.wh-grid-header [class*=col-] .grid {
            padding: 0;
            margin: 0;
        }

    .grid.wh-grid-header h3 {
        margin: auto 0.5em auto 0.5em;
        height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .grid.wh-grid-header.p-nogutter {
        margin-right: 0;
        margin-left: 0;
        margin-top: 0;
    }

[class*=wh-severity-] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    width: 100%;
    z-index: 2;
}

.wh-severity-important {
    background-color: #D34737;
}

.wh-severity-error {
    background-color: #D34737;
}

.wh-severity-success {
    background-color: #27BC5F;
}

.wh-severity-warn {
    background-color: #FECF33;
}

i[pTooltip]:before {
    cursor: pointer;
    color: #4298B5;
}

label[wh-mandatory]:before {
    content: "* ";
    color: #D34737;
}

div.wh-aside-container {
    border-radius: 0;
    min-height: 100px;
    background: #F4F4F4;
    padding: 0px !important;
    border: 1px solid #E2E2E2 !important;
    width: 400px;
}

    div.wh-aside-container .p-listbox {
        background-color: transparent;
        border-color: transparent;
    }

        div.wh-aside-container .p-listbox .p-listbox-list .p-listbox-item {
            margin-bottom: 0.25em;
            min-height: 45px;
        }

            div.wh-aside-container .p-listbox .p-listbox-list .p-listbox-item:not(.p-highlight) {
                background-color: #FFFFFF;
            }

            div.wh-aside-container .p-listbox .p-listbox-list .p-listbox-item:last-child {
                margin-bottom: 0;
            }

div.wh-col-background {
    min-height: 40px;
    background: #F4F4F4;
    border: 1px solid #9C9C9D;
}

    div.wh-col-background .wh-emptybox-disclamer {
        font-size: 1.1em;
        color: #9C9C9D;
        font-weight: 600;
    }

.wh-overlay-footer {
    border-top: 1px solid #9C9C9D;
    padding-right: 0.5em;
    padding-left: 0.5em;
    margin-top: 0.5em;
    padding-top: 0.5em;
    margin-left: -0.75em !important;
    margin-right: -0.75em !important;
}

.wh-summary {
    margin-bottom: 0;
    padding-bottom: 0;
    white-space: normal;
}

    .wh-summary h5:not(:first-child),
    .wh-summary h3:not(:first-child) {
        margin-top: 2em;
        margin-bottom: 0.5em;
    }

    .wh-summary h5:first-child,
    .wh-summary h3:first-child {
        margin-top: 0;
        margin-bottom: 0.5em;
    }

    .wh-summary label {
        color: #9C9C9D;
    }

    .wh-summary .grid {
        margin-top: 0;
    }

    .wh-summary .p-card-content .grid.b-bottom-light:last-child {
        border-bottom: 0 !important;
    }

    .wh-summary [class*=p-col-] {
        display: flex;
        align-items: center;
        margin: auto;
    }

        .wh-summary [class*=p-col-] i {
            bottom: unset;
            top: unset;
        }

        .wh-summary [class*=p-col-] .card {
            padding-bottom: 0;
        }

    .wh-summary p-message .p-message {
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .wh-summary .p-field p-message {
        height: unset !important;
    }

    .wh-summary label i {
        top: 5px;
        bottom: 0;
    }

    .wh-summary i {
        position: relative;
        bottom: 2px;
        margin-right: 0.5em;
    }

.wh-inputnumber-validation .p-tooltip-text {
    background-color: #D34737 !important;
    min-width: 220px;
}

.wh-inputnumber-validation.p-tooltip-bottom .ui-tooltip-arrow {
    top: 1px;
    border-bottom-color: #D34737 !important;
}

.wh-inputnumber-validation.p-tooltip-left .ui-tooltip-arrow {
    border-left-color: #D34737 !important;
}

.wh-inputnumber-validation.p-tooltip-right .ui-tooltip-arrow {
    left: 1px;
    border-right-color: #D34737 !important;
}

div.wh-input-boxed {
    border-radius: 5px;
    border: 1px solid #9C9C9D;
}

    div.wh-input-boxed a [class*=pi-]:before {
        cursor: pointer;
    }

    div.wh-input-boxed a:not(.wh-input-boxed) {
        display: flex;
    }

    div.wh-input-boxed a.wh-input-boxed {
        display: none;
    }

    div.wh-input-boxed p-message {
        display: inline-block !important;
    }

div.wh-input-boxed-left {
    border-radius: 5px;
    border: 1px solid #9C9C9D;
}

div.wh-input-boxed-left {
    border-radius: 5px;
    border: 1px solid #9C9C9D;
}

div.wh-col-boxed {
    padding: 1em;
    margin: 0.5em;
    border-radius: 5px;
    border: 1px solid #E2E2E2;
}

    div.wh-col-boxed.grid-nogutter {
        margin-right: 0;
        margin-left: 0;
        margin-top: 0;
    }

        div.wh-col-boxed.grid-nogutter [class*=p-col-] {
            padding: 0;
        }

            div.wh-col-boxed.grid-nogutter [class*=p-col-] .grid {
                padding: 0;
                margin: 0;
            }

    div.wh-col-boxed.col-1 {
        width: calc(8.3333% - 1em);
    }

    div.wh-col-boxed.col-2 {
        width: calc(16.6667% - 1em);
    }

    div.wh-col-boxed.col-3 {
        width: calc(25% - 1em);
    }

    div.wh-col-boxed.col-4 {
        width: calc(33.3333% - 1em);
    }

    div.wh-col-boxed.col-5 {
        width: calc(41.6667% - 1em);
    }

    div.wh-col-boxed.col-6 {
        width: calc(50% - 1em);
    }

    div.wh-col-boxed.col-7 {
        width: calc(58.3333% - 1em);
    }

    div.wh-col-boxed.col-8 {
        width: calc(66.6667% - 1em);
    }

    div.wh-col-boxed.col-9 {
        width: calc(75% - 1em);
    }

    div.wh-col-boxed.col-10 {
        width: calc(83.3333% - 1em);
    }

    div.wh-col-boxed.col-11 {
        width: calc(91.6667% - 1em);
    }

    div.wh-col-boxed.col-12,
    div.wh-col-boxed .col {
        width: calc(100% - 1em);
    }

/*END WH CUSTOMS*/
/*WH LOGIN*/
.login-body {
    background-color: #CFECEA !important;
    padding-top: unset;
    height: 100vh;
    background: url("./images/login/wh-hospital-background.png");
    background-repeat: no-repeat;
    background-position: unset;
    background-position-y: center;
    background-position-x: center;
    display: flex;
    align-items: center;
    background-size: unset;
}

    .login-body .login-panel {
        background-color: #FFFFFF;
        width: 450px;
        display: flex;
        align-items: center;
    }

        .login-body .login-panel .login-header {
            margin-bottom: 0;
            background-color: #FFFFFF;
            color: #FFFFFF;
            position: relative;
            display: flex;
            justify-content: center;
        }

            .login-body .login-panel .login-header img {
                width: unset;
                position: unset;
                top: unset;
                right: unset;
            }

            .login-body .login-panel .login-header.col-12 {
                padding: 20px 20px 0px 20px;
            }

        .login-body .login-panel .col-12 {
            padding: 20px 20px 0px 20px;
        }

/*END WH LOGIN*/ /*# sourceMappingURL=layout-wh.css.map */

/*change password*/


.changepwd-body {
    padding-top: unset;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: unset;
    background-position-y: center;
    background-position-x: center;
    display: flex;
    align-items: center;
    background-size: unset;
}

    .changepwd-body .changepwd-panel {
        width: 450px;
        display: flex;
        align-items: center;
    }

        .changepwd-body .changepwd-panel .col-12 {
            padding: 20px 20px 0px 20px;
        }

    .changepwd-body .changepwd-panel {
        width: 400px;
        margin: 0 auto;
        padding-bottom: 20px;
    }

.field-validation-error > span {
    color: #D34737;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .login-body {
        padding-top: 0
    }

    .login-header > img {
        width: 222px !important;
        height: 76px !important;
        position: static !important;
    }

    .login-panel > form, .changepwd-panel > form {
        width: 100%
    }
}