.content{
    min-height: 550px;
}
.top-nav .top-nav-box,.wrapper {
    max-width: 1600px;
    table-layout: fixed
}
b, strong {
    font-weight: 700 !important;
}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,button,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    text-decoration: none;
    list-style: none;
}
.topsearch{
    margin-top: 15px;
    margin-left: 18px;
}
.topsearch .btntext{
    background: #ffffff;
    padding: 9px;
    font-size: 15px;
    border: 1px solid #e7e7e7;
    border-radius: 5px 0px 0px 5px;
}
.topsearch select{
    border-radius: 0px;
    height: 37px !important;
    background-color: #e7e7e7  !important;
    border-radius: 0px 5px 5px 0px;
    border-color: #e7e7e7;
}
.topsearch .btn-primary{
    margin-left: 7px;
    height: 37px;
}
.topsearch .select2-container--default .select2-selection--single .select2-selection__arrow b{
    top: 73%;
}
.topsearch .select2-container{
    width: auto !important;
    float: left;
    /* border-radius: 0px; */
    height: 37px !important;
    background-color: #e7e7e7  !important;
    border-radius: 0px 5px 5px 0px;
    border-color: #e7e7e7;
}

.topsearch .select2-container .select2-selection--single{
    height: 37px;
    padding-top: 5px;
    border-color: #e7e7e7;
    background: #e4e4e4;
}
.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-wrapper .notification-body .notification-list .notification-content .notification-text strong,.wrapper .side-nav .side-notification .notification-icon .notification-wrapper .notification-body .notification-list .notification-content .notification-text strong {
    font-weight: 700
}

@-webkit-keyframes showSlowlyElement {
    100% {
        transform: scale(1);
        opacity: 1
    }

    0% {
        transform: scale(1.2);
        opacity: 0
    }
}

@keyframes showSlowlyElement {
    100% {
        transform: scale(1);
        opacity: 1
    }

    0% {
        transform: scale(1.2);
        opacity: 0
    }
}

@keyframes topContentBackground {
    100% {
        -webkit-transform: rotate(-15deg) scale(1);
        transform: rotate(-15deg) scale(1);
        opacity: 1
    }

    0% {
        -webkit-transform: rotate(-5deg) scale(1.2);
        transform: rotate(-5deg) scale(1.2);
        opacity: 0
    }
}

@keyframes introShoot1 {
    100% {
        width: 450px;
        opacity: 1;
        right: 50px;
        bottom: -90px;
        -webkit-transform: rotatey(-18deg) skew(-5deg);
        transform: rotatey(-18deg) skew(-5deg)
    }

    50% {
        -webkit-transform: rotatey(-40deg) skew(-10deg);
        transform: rotatey(-40deg) skew(-10deg)
    }

    0% {
        opacity: 0;
        position: absolute;
        right: 0;
        bottom: 0;
        -webkit-transform: rotatey(-2deg) skew(-1deg);
        transform: rotatey(-2deg) skew(-1deg)
    }
}

@keyframes introShoot2 {
    100% {
        width: 350px;
        opacity: 1;
        right: 200px;
        bottom: -140px;
        -webkit-transform: rotatey(-18deg) skew(-5deg);
        transform: rotatey(-15deg) skew(-5deg)
    }

    50% {
        -webkit-transform: rotatey(-55deg) skew(-15deg);
        transform: rotatey(-55deg) skew(-15deg)
    }

    25% {
        -webkit-transform: rotatey(10deg) skew(-5deg);
        transform: rotatey(10deg) skew(-5deg)
    }

    0% {
        opacity: 0;
        position: absolute;
        right: 300px;
        bottom: 0;
        -webkit-transform: rotatey(2deg) skew(1deg);
        transform: rotatey(2deg) skew(1deg)
    }
}

@keyframes introShoot3 {
    100% {
        width: 250px;
        opacity: 1;
        right: 0;
        bottom: -120px;
        -webkit-transform: rotatey(-18deg) skew(-5deg);
        transform: rotatey(-15deg) skew(-5deg)
    }

    50% {
        -webkit-transform: rotatey(-55deg) skew(-15deg);
        transform: rotatey(-55deg) skew(-15deg)
    }

    25% {
        -webkit-transform: rotatey(10deg) skew(-5deg);
        transform: rotatey(10deg) skew(-5deg)
    }

    0% {
        opacity: 0;
        position: absolute;
        right: 300px;
        bottom: 0;
        -webkit-transform: rotatey(2deg) skew(1deg);
        transform: rotatey(2deg) skew(1deg)
    }
}

.mask,.top-nav {
    top: 0;
    z-index: 3;
    position: fixed;
    width: 100%;
    left: 0
}

body {
    font-size: 13px;
    color: #263238;
    background: #e8e8e8;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    overflow-x: hidden;
}


.mask {
    height: 100%;
    display: none;
    background-color: rgba(0,0,0,.45)
}

.top-nav {
    /* height: 75px; */
    /* padding-left: 0 !important; */
    padding: 10px 20px;
    background: -webkit-linear-gradient(left,#1d2529,#0d1113);
    /*! background: -moz-linear-gradient(left,#FF5722,#512DA8); */
    background: -ms-linear-gradient(left,#FF5722,#512DA8);
    background: -o-linear-gradient(left,#FF5722,#512DA8);
    background: linear-gradient(left,#FF5722,#512DA8);
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.3);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.3);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.3);
    -o-box-shadow: 0 0 15px rgba(0,0,0,.3);
    box-shadow: 0 0 15px rgb(0 0 0 / 0%);
    border-bottom: 3px solid #0e1315;
}

.top-nav .top-nav-box {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: table;
}

.follow-up-noti.mobile {
    display: none;
}

.top-nav .top-nav-box .logo-wrapper {
    width: 220px;
    vertical-align: top;
    display: table-cell;
    /* background: #0e1214; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}

.top-nav .top-nav-box .logo-wrapper .logo-box {
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: start;
}

.top-nav .top-nav-box .logo-wrapper .logo-box img {
    width: 158px;
}

.top-nav .top-nav-box .logo-wrapper .logo-box a {
    color: #fff;
    text-decoration: none
}

.top-nav .top-nav-box .logo-wrapper .logo-box a .logo-title {
    font-size: 20px;
    margin-bottom: 2px
}

.top-nav .top-nav-box .logo-wrapper .logo-box a .logo-subtitle {
    font-size: 10px
}

.top-nav .top-nav-box .top-nav-content {
    color: #fff;
    height: 100%;
    font-size: 18px;
    padding-left: 10px;
    display: table-cell;
    vertical-align: top
}

.top-nav .top-nav-box .top-nav-content .top-nav-box {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: end;
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .quick-link {
    height: 100%;
    position: relative
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .quick-link .link-icon {
    height: 100%;
    border: 1px solid #646464;
    cursor: pointer;
    /* border-radius: 5px; */
    display: -webkit-box;
    display: -moz-box;
    /* margin-top: 7px; */
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .quick-link .link-icon:hover,.top-nav .top-nav-box .top-nav-content .top-nav-box .quick-link.active {
    background-color: #1565C0;
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .quick-link.active>ul {
    display: block
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .quick-link ul {
    top: 60px;
    left: 0;
    width: 300px;
    display: none;
    margin-top: 20px;
    position: absolute;
    background-color: #fff;
    -webkit-border-radius: .2em;
    -moz-border-radius: .2em;
    -ms-border-radius: .2em;
    -o-border-radius: .2em;
    border-radius: .2em;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -o-box-shadow: 0 0 15px rgba(0,0,0,.07);
    box-shadow: 0 0 15px rgba(0,0,0,.07)
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .quick-link ul li {
    width: 31.25%;
    text-align: center;
    padding: 20px 0;
    cursor: pointer;
    display: inline-block
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .quick-link ul li a {
    color: #263238;
    font-size: 13px;
    text-decoration: none
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .quick-link ul li a i {
    display: block;
    font-size: 18px;
    margin-bottom: 16px
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .quick-link ul:before {
    content: "";
    left: 20px;
    top: -16px;
    position: absolute;
    border: 8px solid #fff;
    border-color: transparent transparent #fff
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .global-search {
    padding-left: 0px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    margin-right: auto
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .global-search button {
    padding: 0;
    font-size: 14px;
    background-color: transparent
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .global-search input {
    color: #fff;
    border: 0;
    background-color: transparent
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .global-search input::-webkit-input-placeholder {
    color: #fff
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .global-search input::-moz-placeholder {
    color: #fff
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .global-search input:-ms-input-placeholder {
    color: #fff
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .global-search input:-moz-placeholder {
    color: #fff
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification {
    font-size: 18px;
    position: relative;
    align-items: center;
    justify-content: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon {
    height: 100%;
    cursor: pointer;
    color: #fff;
    padding: 18px 20px;
    position: relative;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-badge {
    display: inline-block;
    line-height: 1;
    color: #fff;
    top: 12px;
    left: 28px;
    font-size: 11px;
    padding: 2px 5px;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    position: absolute;
    background-color: #e33244;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-wrapper {
    width: 300px;
    z-index: 5;
    display: none;
    color: #263238;
    font-size: 14px;
    margin-top: 40px;
    left: -78px;
    position: absolute;
    background-color: #fcfcfc;
    -webkit-border-radius: .2em;
    -moz-border-radius: .2em;
    -ms-border-radius: .2em;
    -o-border-radius: .2em;
    border-radius: .2em;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -o-box-shadow: 0 0 15px rgba(0,0,0,.07);
    box-shadow: 0 0 15px rgba(0,0,0,.07)
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-wrapper .notification-header {
    padding: 20px 10px;
    text-align: center
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-wrapper .notification-header .notification-count {
    color: #fff;
    padding: 2px 6px;
    background-color: #1aae88;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-wrapper .notification-body {
    overflow-x: hidden;
    background-color: #fff
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-wrapper .notification-body .notification-list {
    color: #263238;
    padding: 10px 20px;
    border-top: 1px solid #fcfcfc;
    background-color: #fff;
    text-decoration: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-wrapper .notification-body .notification-list .notification-image {
    width: 50px
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-wrapper .notification-body .notification-list .notification-image img {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-wrapper .notification-body .notification-list .notification-content {
    margin-top: 10px;
    margin-left: 10px
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-wrapper .notification-body .notification-list .notification-content .notification-time {
    font-size: 12px;
    margin-top: 5px
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-wrapper .notification-body .notification-list:hover {
    background-color: #fcfcfc
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-wrapper .notification-footer {
    text-align: center
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-wrapper .notification-footer a {
    color: #263238;
    display: block;
    padding: 20px 10px;
    text-decoration: none
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-wrapper .notification-footer a:hover {
    color: #FF5722
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon .notification-wrapper:before {
    content: "";
    left: 98px;
    top: -16px;
    position: absolute;
    border: 8px solid #fcfcfc;
    border-color: transparent transparent #fcfcfc
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon.active,.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon:hover {
    background-color: #4527A0
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification .notification-icon.active .notification-wrapper {
    display: block
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile {
    cursor: pointer;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 0px 10px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .user-on {
    width: 10px;
    height: 10px;
    top: 6px;
    left: 13px;
    position: absolute;
    border: 1px solid #fff;
    background-color: #1aae88;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .user-image {
    width: 50px;
    height: 50px;
    padding: 1px;
    background: white;
    border-radius: 100%;
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .user-image img {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile.active {
    background-color: #4527A0
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile.active .clear .user-top-menu {
    display: block
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .clear {
    margin-left: 10px
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .clear .user-name {
    position: relative;
    font-size: 14px;
    color: #fff;
    justify-content: start;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .clear .user-name:after {
    content: "";
    margin-top: 7px;
    margin-left: 6px;
    display: inline-block;
    border: 4px solid #fff;
    border-color: #fff transparent transparent
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .clear .user-group {
    color: #ffffff;
    font-size: 12px;
    margin-top: 2px;
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .clear .user-top-menu {
    min-width: 155px;
    padding: 10px;
    z-index: 2;
    position: absolute;
    margin-top: 35px;
    min-height: 0;
    display: none;
    margin-left: -61px;
    background-color: #fff;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -o-box-shadow: 0 0 15px rgba(0,0,0,.07);
    box-shadow: 0 0 15px rgba(0,0,0,.07)
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .clear .user-top-menu:before {
    content: "";
    left: 65px;
    top: -16px;
    position: absolute;
    border: 8px solid #fff;
    border-color: transparent transparent #fff
}

.wrapper,.wrapper.compact-nav .side-nav .main-menu ul li {
    position: relative
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .clear .user-top-menu li {
    font-size: 13px;
    padding: 10px 8px
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .clear .user-top-menu a {
    width: 100%;
    display: block;
    font-size: 13px;
    color: #263238;
    text-decoration: none;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .clear .user-top-menu a:hover {
    color: #FF5722;
    padding-left: 5px
}

.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile:hover {
    background-color: #ff6e41;
}

.wrapper {
    width: 100%;
    z-index: 2;
    display: table;
    padding: 0px;
    margin-top: 70px;
}

.wrapper.fixed-nav {
    padding: 0
}

.wrapper.fixed-nav .side-nav {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0
}

.wrapper.fixed-nav .main {
    padding-left: 0
}

.wrapper.fixed-nav .main .scrollable {
    padding: 10px
}

.wrapper.compact-nav .side-nav {
    width: 92px
}

.wrapper.compact-nav .side-nav .side-notification {
    display: block;
    padding-top: 0
}

.wrapper.compact-nav .side-nav .side-notification .notification-icon {
    margin-top: 25px
}

.wrapper.compact-nav .side-nav .side-notification .notification-icon .notification-wrapper {
    margin-top: -40px;
    left: 62px
}

.wrapper.compact-nav .side-nav .side-notification .notification-icon .notification-wrapper:before {
    left: -15px;
    top: 22px;
    border-bottom-color: transparent;
    border-right-color: #fcfcfc
}

.wrapper.compact-nav .side-nav .user-side-profile {
    text-align: center;
    padding: 20px 5px;
    display: block!important
}

.wrapper.compact-nav .side-nav .user-side-profile .clear {
    margin-left: 0
}

.wrapper.compact-nav .side-nav .user-side-profile .user-image {
    margin-top: 0;
    display: inline-block
}

.wrapper.compact-nav .side-nav .user-side-profile .user-image img {
    width: 50px;
    height: 50px;
    margin: 0 0 10px
}

.wrapper.compact-nav .side-nav .user-side-profile .user-name:after {
    display: none
}

.wrapper.compact-nav .side-nav .user-side-profile .clear .user-side-menu {
    top: 0;
    left: 137px;
    min-width: 155px;
    text-align: left
}

.wrapper.compact-nav .side-nav .user-side-profile .clear .user-side-menu li a {
    width: 100%;
    height: 100%;
    display: block
}

.wrapper.compact-nav .side-nav .main-menu ul li a .badge,.wrapper.compact-nav .side-nav .main-menu ul li a .badge-grey,.wrapper.compact-nav .side-nav .main-menu ul li a .badge-red,.wrapper.compact-nav .side-nav .main-menu ul li a .badge-yellow,.wrapper.compact-nav .side-nav .main-menu ul li a span,.wrapper.compact-nav .side-nav .main-menu ul li.active ul li a:before,.wrapper.compact-nav .side-nav .side-banner {
    display: none
}

.wrapper.compact-nav .side-nav .user-side-profile .clear .user-side-menu:before {
    left: -16px;
    top: 30px;
    border-bottom-color: transparent;
    border-right-color: #fcfcfc
}

.wrapper.compact-nav .side-nav .main-menu-title {
    text-align: center
}

.wrapper.compact-nav .side-nav .main-menu ul li a {
    padding: 20px 25px;
    text-align: center
}

.wrapper.compact-nav .side-nav .main-menu ul li a i {
    font-size: 18px;
    margin-right: 0
}

.wrapper.compact-nav .side-nav .main-menu ul li ul {
    top: -10px;
    left: 100px;
    min-width: 140px;
    z-index: 5;
    min-height: 0;
    position: absolute;
    margin-top: 10px;
    background-color: #fff;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none
}

.wrapper.compact-nav .side-nav .main-menu ul li ul:after {
    left: -36px;
    top: 28px
}

.wrapper.compact-nav .side-nav .main-menu ul li.active ul {
    padding: 10px;
    top: -10px;
    left: 100px;
    min-width: 155px;
    z-index: 2;
    min-height: 0;
    position: absolute;
    margin-top: 10px;
    border-bottom: 0;
    background-color: #fff;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.2);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.2);
    -o-box-shadow: 0 0 15px rgba(0,0,0,.2);
    box-shadow: 0 0 15px rgba(0,0,0,.2)
}

.wrapper .main .top-banner,.wrapper .side-nav {
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.1);
    -o-box-shadow: 0 0 15px rgba(0,0,0,.1)
}

.wrapper.compact-nav .side-nav .main-menu ul li.active ul:before {
    content: "";
    left: -16px;
    top: 23px;
    position: absolute;
    border: 8px solid #fff;
    border-color: transparent #fff transparent transparent
}

.wrapper.compact-nav .side-nav .main-menu ul li.active ul li a {
    color: #263238;
    padding: 10px 8px;
    text-align: left;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.wrapper.compact-nav .side-nav .main-menu ul li.active ul li a:hover {
    color: #FF5722;
    padding-left: 13px
}

.wrapper .side-nav {
    width: 250px;
    min-height: 1000px;
    display: table-cell;
    vertical-align: top;
    background-color: #263238;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.1);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.1);
    box-shadow: 0 0 15px rgba(0,0,0,.1);
}

.wrapper .side-nav .main-menu ul li a,.wrapper .side-nav .main-menu ul ul {
    -ms-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease
}

.wrapper .side-nav .user-side-profile {
    cursor: pointer;
    position: relative;
    justify-content: center;
    padding: 24px 20px 12px;
    border-bottom: 1px solid #21292b;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.wrapper .side-nav .user-side-profile .user-on {
    width: 12px;
    height: 12px;
    top: 2px;
    left: 2px;
    position: absolute;
    border: 2px solid #263238;
    background-color: #1aae88;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.wrapper .side-nav .user-side-profile .user-image {
    width: 60px;
    height: 60px;
    padding: 1px;
    margin-top: -12px;
    position: relative;
    background: white;
    border-radius: 51px;
}

.wrapper .side-nav .user-side-profile .user-image img {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.wrapper .side-nav .user-side-profile.active .clear .user-side-menu {
    display: block
}

.wrapper .side-nav .user-side-profile .clear {
    margin-left: 10px
}

.wrapper .side-nav .user-side-profile .clear .user-name {
    position: relative;
    font-size: 14px;
    color: #fff;
    justify-content: start;
    text-align: left;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.wrapper .side-nav .user-side-profile .clear .user-name:after {
    content: "";
    margin-top: 7px;
    margin-left: 6px;
    display: inline-block;
    border: 4px solid #fff;
    border-color: #fff transparent transparent
}

.wrapper .side-nav .user-side-profile .clear .user-group {
    color: #95989A;
    font-size: 12px;
    margin-top: 5px
}

.wrapper .side-nav .user-side-profile .clear .user-side-menu {
    padding: 10px;
    z-index: 2;
    position: absolute;
    margin-top: 15px;
    min-height: 0;
    display: none;
    margin-left: -35px;
    background-color: #fcfcfc;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.2);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.2);
    -o-box-shadow: 0 0 15px rgba(0,0,0,.2);
    box-shadow: 0 0 15px rgba(0,0,0,.2)
}

.wrapper .side-nav .user-side-profile .clear .user-side-menu:before {
    content: "";
    left: 65px;
    top: -16px;
    position: absolute;
    border: 8px solid #fcfcfc;
    border-color: transparent transparent #fcfcfc
}

.wrapper .side-nav .user-side-profile .clear .user-side-menu li {
    padding: 10px 8px
}

.wrapper .side-nav .user-side-profile .clear .user-side-menu a {
    width: 100%;
    display: block;
    color: #263238;
    text-decoration: none;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.wrapper .side-nav .user-side-profile .clear .user-side-menu a:hover {
    color: #FF5722;
    padding-left: 5px
}

.wrapper .side-nav .side-notification {
    font-size: 18px;
    position: relative;
    justify-content: center;
    padding: 40px 20px 20px;
    border-bottom: 1px solid #21292b;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}

.wrapper .side-nav .side-notification .notification-icon {
    cursor: pointer;
    color: #fff;
    margin-left: 20px;
    margin-right: 20px;
    position: relative
}

.wrapper .side-nav .side-notification .notification-icon .notification-badge {
    display: inline-block;
    line-height: 1;
    color: #fff;
    top: -6px;
    left: 9px;
    font-size: 11px;
    padding: 2px 5px;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    position: absolute;
    background-color: #e33244;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px
}

.wrapper .side-nav .side-notification .notification-icon:hover {
    color: #f4f4f4
}

.wrapper .side-nav .side-notification .notification-icon .notification-wrapper {
    width: 300px;
    z-index: 5;
    display: none;
    color: #263238;
    font-size: 14px;
    margin-top: 20px;
    left: -25px;
    position: absolute;
    background-color: #fcfcfc;
    -webkit-border-radius: .2em;
    -moz-border-radius: .2em;
    -ms-border-radius: .2em;
    -o-border-radius: .2em;
    border-radius: .2em;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -o-box-shadow: 0 0 15px rgba(0,0,0,.07);
    box-shadow: 0 0 15px rgba(0,0,0,.07)
}

.auth-wrapper .auth-header,.auth-wrapper .auth-user,.wrapper .main .breadcrumb {
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.03);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.03);
    -o-box-shadow: 0 0 15px rgba(0,0,0,.03);
    box-sizing: border-box
}

.wrapper .side-nav .side-notification .notification-icon .notification-wrapper .notification-header {
    padding: 20px 10px;
    text-align: center
}

.wrapper .side-nav .side-notification .notification-icon .notification-wrapper .notification-header .notification-count {
    color: #fff;
    padding: 2px 6px;
    background-color: #1aae88;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.wrapper .side-nav .side-notification .notification-icon .notification-wrapper .notification-body {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 260px
}

.wrapper .side-nav .side-notification .notification-icon .notification-wrapper .notification-body .notification-list {
    color: #263238;
    padding: 10px 20px;
    border-top: 1px solid #fcfcfc;
    background-color: #fff;
    text-decoration: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.wrapper .side-nav .side-notification .notification-icon .notification-wrapper .notification-body .notification-list .notification-image {
    width: 50px
}

.wrapper .side-nav .side-notification .notification-icon .notification-wrapper .notification-body .notification-list .notification-image img {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.wrapper .side-nav .side-notification .notification-icon .notification-wrapper .notification-body .notification-list .notification-content {
    margin-top: 10px;
    margin-left: 10px
}

.wrapper .side-nav .side-notification .notification-icon .notification-wrapper .notification-body .notification-list .notification-content .notification-time {
    font-size: 12px;
    margin-top: 5px
}

.wrapper .side-nav .side-notification .notification-icon .notification-wrapper .notification-body .notification-list:hover {
    background-color: #fcfcfc
}

.wrapper .side-nav .side-notification .notification-icon .notification-wrapper .notification-footer {
    text-align: center
}

.wrapper .side-nav .side-notification .notification-icon .notification-wrapper .notification-footer a {
    color: #263238;
    display: block;
    padding: 20px 10px;
    text-decoration: none
}

.wrapper .side-nav .side-notification .notification-icon .notification-wrapper .notification-footer a:hover {
    color: #FF5722
}

.wrapper .side-nav .side-notification .notification-icon .notification-wrapper:before {
    content: "";
    left: 25px;
    top: -16px;
    position: absolute;
    border: 8px solid #fcfcfc;
    border-color: transparent transparent #fcfcfc
}

.wrapper .side-nav .side-notification .notification-icon .notification-wrapper.active,.wrapper .side-nav .side-notification .notification-icon.active .notification-wrapper {
    display: block
}

.wrapper .side-nav .main-menu-title {
    color: #5a686f;
    padding: 20px 20px 10px 25px;
    margin-top: 10px;
    border-bottom: 1px solid #21292b
}

.wrapper .side-nav .main-menu {
    min-height: 100px
}

.wrapper .side-nav .main-menu ul li {
    border-left: 3px solid transparent
}

.wrapper .side-nav .main-menu ul li a {
    padding: 17px 22px;
    color: #f4f4f4;
    cursor: pointer;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid #21292b;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.wrapper .side-nav .main-menu ul li a i {
    font-size: 18px;
    margin-right: 10px
}

.wrapper .side-nav .main-menu ul li:last-of-type a {
    border: 0
}

.wrapper .side-nav .main-menu ul a:hover {
    padding-left: 35px;
    background: #fe5519;
}

.wrapper .side-nav .main-menu ul li:hover {
    border-left: 3px solid #4c1400;
}

.wrapper .side-nav .main-menu ul li.active {
    border-color: #651800;
    background-color: #e84a18;
}

.wrapper .side-nav .main-menu ul li.active>a:hover {
    padding-left: 22px
}

.wrapper .side-nav .main-menu ul li.active ul {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #21292b
}

.wrapper .side-nav .main-menu ul li.active ul li {
    display: block
}

.wrapper .side-nav .main-menu ul li.active ul:after {
    background-color: #95989A
}

.wrapper .side-nav .main-menu ul ul {
    position: relative;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.wrapper .side-nav .main-menu ul ul li {
    display: none;
    border: 0
}

.wrapper .side-nav .main-menu ul ul li a {
    border-bottom: 0;
    padding: 15px 15px 15px 55px;
    position: relative
}

.wrapper .side-nav .main-menu ul ul li a:before {
    content: "";
    width: 4px;
    height: 4px;
    left: 35px;
    top: 20px;
    position: absolute;
    background-color: #64686b;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.wrapper .side-nav .main-menu ul ul li a:hover {
    padding-left: 65px
}

.wrapper .side-nav .main-menu ul ul li a:hover:before {
    left: 45px
}

.wrapper .side-nav .main-menu ul ul:after {
    content: "";
    width: 6px;
    height: 6px;
    right: 18px;
    top: -30px;
    position: absolute;
    border: 1px solid #64686b;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.wrapper .side-nav .main-menu .badge,.wrapper .side-nav .main-menu .badge-grey,.wrapper .side-nav .main-menu .badge-red,.wrapper .side-nav .main-menu .badge-yellow {
    margin-right: 8px
}

.wrapper .side-nav .side-banner {
    width: 100%;
    padding: 0 20px;
    margin-top: 50px;
    margin-bottom: 20px
}

.wrapper .side-nav .side-banner .banner-content {
    color: #fff;
    padding: 35px 15px;
    text-align: center;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em;
    background: -webkit-linear-gradient(left,#FF5722,#512DA8);
    background: -moz-linear-gradient(left,#FF5722,#512DA8);
    background: -ms-linear-gradient(left,#FF5722,#512DA8);
    background: -o-linear-gradient(left,#FF5722,#512DA8);
    background: linear-gradient(left,#FF5722,#512DA8)
}

.wrapper .side-nav .side-banner .banner-content .title {
    width: 100px;
    font-size: 24px;
    position: relative;
    margin: 0 auto;
    font-weight: 700
}

.wrapper .side-nav .side-banner .banner-content .title .version {
    top: -8px;
    right: -10px;
    font-size: 12px;
    position: absolute
}

.wrapper .side-nav .side-banner .banner-content .subtitle {
    color: #a5d3ff;
    margin-top: 10px;
    line-height: 18px
}

.wrapper .side-nav .side-banner .banner-content .purchase {
    width: 130px;
    outline: 0;
    display: block;
    cursor: pointer;
    color: #FF5722;
    margin: 20px auto 0;
    padding: 8px 15px;
    background-color: #fff;
    text-decoration: none;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.wrapper .side-nav .side-banner .banner-content .purchase:hover {
    color: #fff;
    background-color: #263238
}

.wrapper .main {
    display: table-cell;
    vertical-align: top;
    padding-left: 10px;
}

.wrapper .main .breadcrumb {
    padding: 14px 20px;
    margin-top: 20px;
    font-size: 12px;
    color: #263238;
    margin-bottom: 10px;
    background-color: #fff;
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.03);
    box-shadow: 0 0 15px rgba(0,0,0,.03)
}

.wrapper .main .breadcrumb a {
    color: #263238;
    text-decoration: none
}

.wrapper .main .breadcrumb a:last-of-type {
    color: #FF5722
}

.wrapper .main .breadcrumb a:last-of-type:after {
    display: none
}

.wrapper .main .breadcrumb a:after {
    content: "/";
    font-weight: lighter;
    padding-left: 5px;
    padding-right: 5px;
    display: inline-block
}

.wrapper .main .top-banner {
    color: #fff;
    padding: 35px 20px;
    position: relative;
    display: none;
    background-size: cover;
    box-sizing: border-box;
    background-color: #263238;
    background-image: url(../images/chocolate.jpg);
    -webkit-border-radius: .3em .3em 0 0;
    -moz-border-radius: .3em .3em 0 0;
    -ms-border-radius: .3em .3em 0 0;
    -o-border-radius: .3em .3em 0 0;
    border-radius: .3em .3em 0 0;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.1);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.1);
    box-shadow: 0 0 15px rgba(0,0,0,.1)
}

.wrapper .main .top-banner .top-banner-title {
    font-size: 24px;
    margin-top: 10px;
    color: black

    
}

.wrapper .main .top-banner .top-banner-subtitle {
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    color:black
}

.wrapper .main .top-banner .top-banner-subtitle i {
    font-size: 15px;
    color: #e33244
}

.wrapper .main .content {
    box-sizing: border-box;
    padding: 30px 20px 20px;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.1);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.1);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.1);
    -o-box-shadow: 0 0 15px rgba(0,0,0,.1);
    box-shadow: 0 0 15px rgba(0,0,0,.1);
    background: -webkit-linear-gradient(top,#FAFAFA,#f1f1f1);
    background: -moz-linear-gradient(top,#FAFAFA,#f1f1f1);
    background: -ms-linear-gradient(top,#FAFAFA,#f1f1f1);
    background: -o-linear-gradient(top,#FAFAFA,#f1f1f1);
    background: linear-gradient(top,#FAFAFA,#f1f1f1)
}

.wrapper .main .content .content-header {
    font-size: 18px;
    padding-bottom: 20px;
    padding-top: 16px;
    position: relative;
    border-bottom: 1px solid #E5E5E5;
    padding-right: 13px;
}

.wrapper .main .content .content-header .content-header-title {
    top: 17px;
    left: 60px;
    position: absolute;
}

.wrapper .main .content .content-header i {
    font-size: 26px;
    padding-left: 15px;
}

.wrapper .main .content .content-header:after {
    content: "";
    width: 50px;
    height: 5px;
    left: 0;
    bottom: -1px;
    position: absolute;
    background-color: #263238;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px
}

.wrapper .main .content .card-wrapper {
    position: relative;
    margin-top: 25px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.wrapper .main .content .card-wrapper .card {
    border: 0;
    -webkit-flex-direction: initial;
    -ms-flex-direction: initial;
    flex-direction: initial;
    justify-content: center;
    align-items: center;
    padding: 15px 10px;
    background-color: #fcfcfc;
    -webkit-animation: showSlowlyElement .8s;
    animation: showSlowlyElement .8s;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.04);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.04);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.04);
    -o-box-shadow: 0 0 15px rgba(0,0,0,.04);
    box-shadow: 0 0 15px rgba(0,0,0,.04)
}

.wrapper .main .content .card-wrapper .card-menu,.wrapper .main .content .card-wrapper .card-menu:after {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    width: 4px;
    height: 4px;
    background-color: #ccc;
    position: absolute
}

.wrapper .main .content .card-wrapper .card i {
    font-size: 55px;
    min-width: 55px;
    text-align: center;
    margin-right: 15px
}

.wrapper .main .content .card-wrapper .card .card-title {
    font-size: 36px
}

.wrapper .main .content .card-wrapper .card-menu {
    top: 16px;
    right: 25px;
    cursor: pointer;
    border-radius: 50%
}

.wrapper .main .content .card-wrapper .card-menu:after {
    content: "";
    top: -5px;
    border-radius: 50%
}

.wrapper .main .content .card-wrapper .card-menu:before {
    content: "";
    width: 4px;
    height: 4px;
    top: 5px;
    position: absolute;
    background-color: #ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.wrapper .main .content .card-wrapper .card-menu ul {
    width: 130px;
    z-index: 2;
    right: 10%;
    display: none;
    padding: 15px;
    margin-top: 15px;
    position: absolute;
    background-color: #fff;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -o-box-shadow: 0 0 15px rgba(0,0,0,.07);
    box-shadow: 0 0 15px rgba(0,0,0,.07)
}

.wrapper .main .content .card-wrapper .card-menu ul li:not(:last-child) {
    margin-bottom: 10px
}

.wrapper .main .content .card-wrapper .card-menu ul li a {
    color: #333;
    display: block;
    text-decoration: none;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.wrapper .main .content .card-wrapper .card-menu ul li a:hover {
    color: #FF5722;
    padding-left: 5px
}
.table-responsive{
    max-height: 100%;
}


.table-responsive table tbody tr:nth-child(odd) {
  background-color: #f3f3f3 !important;
  border-radius: 16px;
}

  
 
  .table-responsive table thead tr th:hover {background: #004a86;color:white;}
  .table-responsive table tbody tr td {
    padding: 5px 8px;
    border: 1px solid #ffffff !important;
    color: #525252;
    border-radius: 5px;
    font-size: 13px;
  }
  .table-responsive table thead tr th{
    padding: 8px 8px;
    border: 1px solid #ffffff !important;
    /*background: #a1a1a1 !important;*/
    background: #a3aae1 !important;
    color: #000000;
    font-size: 13px;
    font-weight: 600;
    border-radius: 5px;
    position: sticky;
    top: 0;
  }



.table-responsive table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0px;
    background: #e9e9e9;
    border-collapse: separate;
    border-spacing: 0px;
    border: 0 !important;
}


.wrapper .main .content .content-box,.wrapper .main .content .invoice-wrapper,.wrapper .main .content .media-wrapper .media-row .media-box {
    padding: 15px;
    margin-top: 0px;
    background-color: #fcfcfc;
    -webkit-animation: showSlowlyElement .8s;
    animation: showSlowlyElement .8s;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.04);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.04);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.04);
    -o-box-shadow: 0 0 15px rgba(0,0,0,.04);
    box-shadow: 0 0 15px rgba(0,0,0,.04);
}

.wrapper .main .content .content-box .content-box-header,.wrapper .main .content .invoice-wrapper .content-box-header,.wrapper .main .content .media-wrapper .media-row .media-box .content-box-header {
    border-bottom: 1px solid #EBEBEB;
    padding-bottom: 15px;
    margin-bottom: 20px
}

.wrapper .main .content .content-box .content-box-header .box-title,.wrapper .main .content .invoice-wrapper .content-box-header .box-title,.wrapper .main .content .media-wrapper .media-row .media-box .content-box-header .box-title {
    font-size: 16px;
    color: #263238;
    margin-bottom: 8px
}

.wrapper .main .content .content-box .content-box-header .box-description,.wrapper .main .content .invoice-wrapper .content-box-header .box-description,.wrapper .main .content .media-wrapper .media-row .media-box .content-box-header .box-description {
    line-height: 18px
}

.wrapper .main .content .content-box .content-box-header .header-menu,.wrapper .main .content .invoice-wrapper .content-box-header .header-menu,.wrapper .main .content .media-wrapper .media-row .media-box .content-box-header .header-menu {
    display: inline-block;
    padding: 4px 10px;
    cursor: pointer;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px
}

.wrapper .main .content .content-box .content-box-header .header-menu.active,.wrapper .main .content .invoice-wrapper .content-box-header .header-menu.active,.wrapper .main .content .media-wrapper .media-row .media-box .content-box-header .header-menu.active {
    color: #fff;
    background-color: #263238
}

.wrapper .main .content .content-box .content-box-footer,.wrapper .main .content .invoice-wrapper .content-box-footer,.wrapper .main .content .invoice-wrapper .invoice-footer,.wrapper .main .content .invoice-wrapper .media-wrapper .media-row .media-box .invoice-footer,.wrapper .main .content .media-wrapper .media-row .media-box .content-box-footer,.wrapper .main .content .media-wrapper .media-row .media-box .invoice-wrapper .invoice-footer {
    border-top: 1px solid #EBEBEB;
    padding-top: 20px;
    margin-top: 20px
}

.wrapper .main .content .content-box .line-chart-label,.wrapper .main .content .invoice-wrapper .line-chart-label,.wrapper .main .content .media-wrapper .media-row .media-box .line-chart-label {
    margin-top: 20px;
    font-size: 10px
}

.wrapper .main .content .content-box .line-chart-value,.wrapper .main .content .invoice-wrapper .line-chart-value,.wrapper .main .content .media-wrapper .media-row .media-box .line-chart-value {
    margin-top: 5px;
    font-weight: 700;
    font-size: 30px!important;
    margin-bottom: 20px
}

.wrapper .main .content .content-box .product-list,.wrapper .main .content .invoice-wrapper .product-list,.wrapper .main .content .media-wrapper .media-row .media-box .product-list {
    position: relative;
    margin-bottom: 15px;
    border-bottom: 1px solid #EBEBEB;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.wrapper .main .content .content-box .product-list img,.wrapper .main .content .invoice-wrapper .product-list img,.wrapper .main .content .media-wrapper .media-row .media-box .product-list img {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    margin-right: 10px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.wrapper .main .content .content-box .product-list:last-of-type,.wrapper .main .content .invoice-wrapper .product-list:last-of-type,.wrapper .main .content .media-wrapper .media-row .media-box .product-list:last-of-type {
    border: 0;
    margin-bottom: 0
}

.wrapper .main .content .content-box .product-list:last-of-type img,.wrapper .main .content .invoice-wrapper .product-list:last-of-type img,.wrapper .main .content .media-wrapper .media-row .media-box .product-list:last-of-type img {
    margin-bottom: 0
}

.wrapper .main .content .content-box .product-list .product-list-title,.wrapper .main .content .invoice-wrapper .product-list .product-list-title,.wrapper .main .content .media-wrapper .media-row .media-box .product-list .product-list-title {
    margin-top: 12px;
    font-size: 16px
}

.wrapper .main .content .content-box .product-list .product-list-category,.wrapper .main .content .invoice-wrapper .product-list .product-list-category,.wrapper .main .content .media-wrapper .media-row .media-box .product-list .product-list-category {
    font-size: 12px;
    margin-top: 5px
}

.wrapper .main .content .content-box .product-list .product-list-price,.wrapper .main .content .invoice-wrapper .product-list .product-list-price,.wrapper .main .content .media-wrapper .media-row .media-box .product-list .product-list-price {
    top: 20px;
    right: 0;
    color: #fff;
    font-size: 12px;
    padding: 4px 6px;
    position: absolute;
    background-color: #263238;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px
}

.wrapper .main .content .content-box .donut-chart-wrapper,.wrapper .main .content .invoice-wrapper .donut-chart-wrapper,.wrapper .main .content .media-wrapper .media-row .media-box .donut-chart-wrapper {
    position: relative
}

.wrapper .main .content .content-box .donut-chart-wrapper .donut-chart-label,.wrapper .main .content .invoice-wrapper .donut-chart-wrapper .donut-chart-label,.wrapper .main .content .media-wrapper .media-row .media-box .donut-chart-wrapper .donut-chart-label {
    top: 50%;
    left: 50%;
    text-align: center;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    position: absolute
}

.wrapper .main .content .content-box .donut-chart-wrapper .donut-chart-label .donut-chart-value,.wrapper .main .content .invoice-wrapper .donut-chart-wrapper .donut-chart-label .donut-chart-value,.wrapper .main .content .media-wrapper .media-row .media-box .donut-chart-wrapper .donut-chart-label .donut-chart-value {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px
}

.wrapper .main .content .content-box .donut-chart-wrapper .donut-chart-label .donut-chart-title,.wrapper .main .content .invoice-wrapper .donut-chart-wrapper .donut-chart-label .donut-chart-title,.wrapper .main .content .media-wrapper .media-row .media-box .donut-chart-wrapper .donut-chart-label .donut-chart-title {
    font-size: 12px;
    text-transform: uppercase
}

.wrapper .main .content .content-box .donut-chart-legend,.wrapper .main .content .invoice-wrapper .donut-chart-legend,.wrapper .main .content .media-wrapper .media-row .media-box .donut-chart-legend {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #EBEBEB
}

.wrapper .main .content .content-box .donut-chart-legend .legend-list,.wrapper .main .content .invoice-wrapper .donut-chart-legend .legend-list,.wrapper .main .content .media-wrapper .media-row .media-box .donut-chart-legend .legend-list {
    margin-bottom: 18px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.wrapper .main .content .content-box .donut-chart-legend .legend-list .legend-bullet,.wrapper .main .content .invoice-wrapper .donut-chart-legend .legend-list .legend-bullet,.wrapper .main .content .media-wrapper .media-row .media-box .donut-chart-legend .legend-list .legend-bullet {
    width: 8px;
    height: 8px;
    margin-right: 10px;
    margin-left: 10px;
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.wrapper .main .content .content-box .donut-chart-legend .legend-list .legend-title,.wrapper .main .content .invoice-wrapper .donut-chart-legend .legend-list .legend-title,.wrapper .main .content .media-wrapper .media-row .media-box .donut-chart-legend .legend-list .legend-title {
    margin-top: -4px
}

.wrapper .main .content .content-box .donut-chart-legend .legend-list:last-of-type,.wrapper .main .content .invoice-wrapper .donut-chart-legend .legend-list:last-of-type,.wrapper .main .content .media-wrapper .media-row .media-box .donut-chart-legend .legend-list:last-of-type {
    margin-bottom: 0
}

.wrapper .main .content .content-box .form-wizard-nav,.wrapper .main .content .invoice-wrapper .form-wizard-nav,.wrapper .main .content .media-wrapper .media-row .media-box .form-wizard-nav {
    margin-bottom: 20px;
    border-bottom: 1px solid #EBEBEB;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.wrapper .main .content .content-box .form-wizard-nav .step,.wrapper .main .content .invoice-wrapper .form-wizard-nav .step,.wrapper .main .content .media-wrapper .media-row .media-box .form-wizard-nav .step {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    position: relative;
    padding: 15px 0 25px
}

.wrapper .main .content .content-box .form-wizard-nav .step.active,.wrapper .main .content .invoice-wrapper .form-wizard-nav .step.active,.wrapper .main .content .media-wrapper .media-row .media-box .form-wizard-nav .step.active {
    font-weight: 700;
    -webkit-border-radius: .3em .3em 0 0;
    -moz-border-radius: .3em .3em 0 0;
    -ms-border-radius: .3em .3em 0 0;
    -o-border-radius: .3em .3em 0 0;
    border-radius: .3em .3em 0 0
}

.wrapper .main .content .content-box .form-wizard-nav .step.complete:before,.wrapper .main .content .invoice-wrapper .form-wizard-nav .step.complete:before,.wrapper .main .content .media-wrapper .media-row .media-box .form-wizard-nav .step.complete:before {
    right: 0
}

.wrapper .main .content .content-box .form-wizard-nav .step:before,.wrapper .main .content .invoice-wrapper .form-wizard-nav .step:before,.wrapper .main .content .media-wrapper .media-row .media-box .form-wizard-nav .step:before {
    content: "";
    height: 4px;
    background-color: #21292b;
    left: 0;
    right: 100%;
    bottom: -2px;
    position: absolute;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.wrapper .main .content .content-box .step-content,.wrapper .main .content .invoice-wrapper .step-content,.wrapper .main .content .media-wrapper .media-row .media-box .step-content {
    display: none
}

.wrapper .main .content .content-box .icon-list-wrapper>div,.wrapper .main .content .invoice-wrapper .icon-list-wrapper>div,.wrapper .main .content .media-wrapper .media-row .media-box .icon-list-wrapper>div {
    margin-bottom: 20px
}

.wrapper .main .content .content-box .icon-list-wrapper>div .page-header,.wrapper .main .content .invoice-wrapper .icon-list-wrapper>div .page-header,.wrapper .main .content .media-wrapper .media-row .media-box .icon-list-wrapper>div .page-header {
    color: #FF5722;
    font-size: 16px;
    display: block;
    margin-bottom: 10px
}

.wrapper .main .content .content-box .icon-list-wrapper>div a,.wrapper .main .content .invoice-wrapper .icon-list-wrapper>div a,.wrapper .main .content .media-wrapper .media-row .media-box .icon-list-wrapper>div a {
    cursor: pointer;
    color: #263238;
    padding-top: 10px;
    padding-bottom: 10px;
    text-decoration: none;
    display: block
}

.wrapper .main .content .content-box .icon-list-wrapper>div a i,.wrapper .main .content .invoice-wrapper .icon-list-wrapper>div a i,.wrapper .main .content .media-wrapper .media-row .media-box .icon-list-wrapper>div a i {
    margin-right: 10px
}

.wrapper .main .content .content-box .icon-list-wrapper>div a:hover,.wrapper .main .content .invoice-wrapper .icon-list-wrapper>div a:hover,.wrapper .main .content .media-wrapper .media-row .media-box .icon-list-wrapper>div a:hover {
    color: #FF5722
}

.wrapper .main .content .media-wrapper .media-row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.wrapper .main .content .media-wrapper .media-row .media-box {
    width: 100%;
    padding: 8px;
    position: relative;
    margin-right: 20px
}

.wrapper .main .content .media-wrapper .media-row .media-box .media-image {
    height: 130px;
    position: relative;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em
}

.wrapper .main .content .media-wrapper .media-row .media-box .media-image img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover
}

.wrapper .main .content .media-wrapper .media-row .media-box .media-image .media-file-size {
    color: #fff;
    font-size: 12px;
    padding: 3px 8px;
    margin-top: 5px;
    margin-left: 5px;
    position: absolute;
    background-color: rgba(255,255,255,.4);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px
}

.wrapper .main .content .media-wrapper .media-row .media-box .media-image .media-zoom {
    color: rgba(255,255,255,.61);
    font-size: 35px;
    top: 50%;
    left: 50%;
    text-align: center;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    position: absolute
}

.wrapper .main .content .media-wrapper .media-row .media-box .media-image .media-zoom:hover {
    color: #fff
}

.wrapper .main .content .media-wrapper .media-row .media-box .media-footer {
    overflow: hidden;
    margin-top: 10px
}

.wrapper .main .content .media-wrapper .media-row .media-box .media-footer .media-name {
    width: 50%;
    float: left
}

.wrapper .main .content .media-wrapper .media-row .media-box .media-footer .media-action {
    width: 50%;
    float: left;
    text-align: right
}

.wrapper .main .content .media-wrapper .media-row .media-box .media-footer .media-action a {
    cursor: pointer;
    text-decoration: none
}

.wrapper .main .content .media-wrapper .media-row .media-box:last-of-type {
    margin-right: 0
}

.wrapper .main .content .media-wrapper .media-row .media-box.selected {
    color: #fff;
    background: #263238
}

.wrapper .main .content .media-wrapper .media-row .media-box.selected:after {
    content: "x";
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    position: absolute;
    background: #cc0101;
    cursor: pointer;
    padding-bottom: 3px;
    font-size: 18px;
    align-items: center;
    justify-content: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.wrapper .main .content .media-wrapper .media-row .media-box.selected:hover {
    background-color: #263238
}

.wrapper .main .content .media-wrapper .media-row .media-box:hover {
    cursor: pointer;
    background-color: #f4f4f4
}

.wrapper .main .content .media-wrapper .media-search,.wrapper .main .content .media-wrapper .media-upload-button {
    width: 100%
}

.wrapper .main .content .media-wrapper .media-selected-files {
    font-size: 16px
}

.wrapper .main .content .media-wrapper .media-clear {
    color: #bc0b0b;
    display: block;
    margin-top: 10px;
    text-decoration: none
}

.wrapper .main .content .media-wrapper .media-clear:hover {
    color: #333
}

.wrapper .main .content .media-wrapper .media-pagination {
    border-top: 1px solid #EBEBEB;
    padding-top: 20px;
    margin-top: 20px
}

.wrapper .main .content.chat-wrapper {
    padding: 0;
    background: -webkit-linear-gradient(top,#f1f1f1,#fcfcfc);
    background: -moz-linear-gradient(top,#f1f1f1,#fcfcfc);
    background: -ms-linear-gradient(top,#f1f1f1,#fcfcfc);
    background: -o-linear-gradient(top,#f1f1f1,#fcfcfc);
    background: linear-gradient(top,#f1f1f1,#fcfcfc)
}

.wrapper .main .content.chat-wrapper .panel {
    width: 100%;
    display: table;
    table-layout: fixed
}

.wrapper .main .content.chat-wrapper .panel .chat-contact {
    width: 250px;
    vertical-align: top;
    display: table-cell
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .nav {
    width: 100%;
    padding: 10px;
    border-color: #dddedf;
    display: table;
    table-layout: fixed
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .nav .nav-item {
    vertical-align: top;
    display: table-cell
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .nav .nav-item a {
    color: #333;
    border: 0;
    cursor: pointer;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    margin-right: 1px;
    font-size: 14px;
    text-align: center;
    position: relative;
    background-color: transparent;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .nav .nav-item a i {
    font-size: 20px;
    display: block;
    margin-bottom: 8px
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .nav .nav-item a.active i {
    color: #FF5722
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .nav .nav-item a.active:after,.wrapper .main .content.chat-wrapper .panel .chat-contact .nav .nav-item a:hover:after {
    width: 50%
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .nav .nav-item a:after {
    content: "";
    width: 0;
    height: 5px;
    left: 0;
    right: 0;
    bottom: -11px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    background-color: #FF5722;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .nav .nav-item:first-child a {
    -webkit-border-radius: .3em 0 0 .3em;
    -moz-border-radius: .3em 0 0 .3em;
    -ms-border-radius: .3em 0 0 .3em;
    -o-border-radius: .3em 0 0 .3em;
    border-radius: .3em 0 0 .3em
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .nav .nav-item:last-child a {
    margin-right: 0;
    -webkit-border-radius: 0 .3em .3em 0;
    -moz-border-radius: 0 .3em .3em 0;
    -ms-border-radius: 0 .3em .3em 0;
    -o-border-radius: 0 .3em .3em 0;
    border-radius: 0 .3em .3em 0
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-search {
    padding: 10px;
    position: relative;
    border-bottom: 1px solid #dddedf
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-search input {
    width: 100%;
    border: 0;
    outline: 0;
    padding: 8px 10px 8px 35px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-search input::-webkit-input-placeholder {
    color: #ccc
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-search input::-moz-placeholder {
    color: #ccc
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-search input:-ms-input-placeholder {
    color: #ccc
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-search input:-moz-placeholder {
    color: #ccc
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-search button {
    top: 16px;
    left: 20px;
    border: 0;
    color: #ccc;
    font-size: 16px;
    position: absolute;
    background-color: #fff
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-list .user {
    cursor: pointer;
    position: relative;
    padding: 20px 10px 10px;
    border-bottom: 1px solid #dddedf;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-list .user .user-image {
    width: 60px;
    height: 60px;
    margin-top: -12px;
    position: relative
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-list .user .user-image img {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-list .user .user-image .user-on {
    width: 10px;
    height: 10px;
    top: 4px;
    left: 4px;
    position: absolute;
    border: 1px solid #fff;
    background-color: #1aae88;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-list .user .clear {
    padding-left: 10px
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-list .user .clear .user-name {
    font-weight: 700;
    margin-bottom: 3px
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-list .user .clear .last-message {
    color: #95989a
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-list .user .last-message-time {
    padding: 2px 5px;
    top: 10px;
    right: 10px;
    font-size: 10px;
    position: absolute;
    background-color: #fff;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-list .user.active,.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-list .user:hover {
    color: #fff;
    background-color: #FF5722
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-list .user.active .clear .last-message,.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-list .user:hover .clear .last-message {
    color: #65b0f3
}

.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-list .user.active .last-message-time,.wrapper .main .content.chat-wrapper .panel .chat-contact .tab-content .tab-pane .contact-list .user:hover .last-message-time {
    color: #000
}

.wrapper .main .content.chat-wrapper .panel .chat-content {
    vertical-align: top;
    display: table-cell;
    background-color: #fff
}

.wrapper .main .content.chat-wrapper .panel .chat-content .active-user {
    padding: 15px 20px;
    border-bottom: 1px solid #E5E5E5
}

.wrapper .main .content.chat-wrapper .panel .chat-content .active-user a {
    cursor: pointer;
    text-decoration: none
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list {
    padding: 20px
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message {
    margin-top: 25px;
    margin-bottom: 35px
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message .message-content {
    margin-top: 20px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message .message-content>div {
    flex: 1 1 auto
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message .message-content .user-image {
    max-width: 45px;
    height: 45px;
    position: relative
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message .message-content .user-image img {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message .message-content .user-image:first-child {
    margin-right: 20px
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message .message-content .clear {
    position: relative
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message .message-content .clear .message-text {
    max-width: 200px;
    padding: 10px 15px;
    line-height: 20px;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message .message-content .clear:first-child .message-time {
    padding: 2px 5px;
    top: -25px;
    right: -47px;
    font-size: 10px;
    color: #ccc;
    position: absolute
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message .message-content .clear:first-child .message-text {
    float: right;
    position: relative;
    margin-right: 20px;
    margin-top: 3px;
    background-color: #d6ebfd
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message .message-content .clear:first-child .message-text:after {
    content: "";
    top: 7px;
    right: -27px;
    position: absolute;
    border: 15px solid #d6ebfd;
    border-top-color: transparent;
    border-left-color: #d6ebfd;
    border-right-color: transparent;
    border-bottom: 0 solid transparent;
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg)
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message .message-content .clear:last-child .message-time {
    padding: 2px 5px;
    top: -25px;
    left: -71px;
    font-size: 10px;
    color: #ccc;
    position: absolute
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message .message-content .clear:last-child .message-text {
    position: relative;
    margin-top: 3px;
    background-color: #f8f8f8
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message .message-content .clear:last-child .message-text:after {
    content: "";
    top: 7px;
    left: -27px;
    position: absolute;
    border: 15px solid #f8f8f8;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: #f8f8f8;
    border-bottom: 0 solid transparent;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg)
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message:last-child {
    margin-bottom: 10px
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message-date {
    position: relative;
    text-align: center;
    margin-bottom: 45px;
    margin-top: 30px
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message-date span {
    z-index: 2;
    color: #bdbcbc;
    font-size: 12px;
    padding: 0 10px;
    position: relative;
    background-color: #fff
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-list .message-date:before {
    content: "";
    width: 100%;
    top: 8px;
    left: 0;
    position: absolute;
    border-bottom: 1px solid #E5E5E5
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-input {
    padding: 10px 10px 10px 0;
    border-top: 1px solid #E5E5E5;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-input .chat-menu {
    width: 60px;
    color: #FF5722;
    max-width: 60px;
    flex: 1 1 auto;
    cursor: pointer;
    font-size: 20px;
    padding: 20px 0;
    position: relative;
    text-align: center
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-input .chat-menu:hover .menu-list {
    display: table
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-input .chat-menu .menu-list {
    width: 40px;
    top: -210%;
    left: 0;
    right: 0;
    display: none;
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    position: absolute;
    background-color: #FF5722;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-input .chat-menu .menu-list:after {
    content: "";
    left: 12px;
    bottom: -16px;
    position: absolute;
    border: 8px solid #FF5722;
    border-color: #FF5722 transparent transparent
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-input .chat-menu .menu-list a {
    color: #fff;
    cursor: pointer;
    display: table-row
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-input .chat-menu .menu-list a i {
    padding-top: 10px;
    padding-bottom: 10px
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-input .chat-menu .menu-list a:first-child i {
    padding-top: 20px
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-input .chat-menu .menu-list a:last-of-type i {
    padding-bottom: 20px
}

.wrapper .main .content.chat-wrapper .panel .chat-content .chat-input textarea {
    flex: 1 1 auto;
    outline: 0;
    border: 0;
    padding: 10px;
    resize: none;
    background-color: #fafafa;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em
}

.wrapper .main .content.chat-wrapper .panel .chat-detail {
    width: 250px;
    padding: 10px;
    vertical-align: top;
    display: table-cell
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .user-detail {
    text-align: center;
    padding: 30px 0;
    border-bottom: 1px solid #dddedf
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .user-detail img {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .user-detail .user-name {
    font-size: 14px;
    font-weight: 700;
    margin-top: 20px;
    color: #FF5722
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .user-detail .user-city {
    color: #95989a;
    margin-top: 5px
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .user-detail .user-social {
    margin-top: 15px
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .user-detail .user-social i {
    width: 23px;
    height: 23px;
    color: #fff;
    padding-top: 5px;
    margin: 0 2px;
    box-sizing: border-box;
    background-color: #FF5722;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .chat-document {
    padding: 15px 0;
    border-bottom: 1px solid #dddedf
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .chat-document .title {
    font-weight: 700;
    color: #FF5722
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .chat-document .document-list {
    margin-top: 20px
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .chat-document .document-list li {
    margin-top: 10px;
    margin-left: 20px;
    list-style-type: circle
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .chat-document .document-list li a {
    color: #333;
    cursor: pointer;
    text-decoration: none
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .chat-image {
    padding: 15px 0
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .chat-image .title {
    font-weight: 700;
    color: #FF5722
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .chat-image .image-list {
    margin-top: 20px;
    overflow: hidden
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .chat-image .image-list .image-thumbnail {
    max-width: 65px;
    margin-right: 10px;
    margin-bottom: 10px;
    float: left
}

.wrapper .main .content.chat-wrapper .panel .chat-detail .chat-image .image-list .image-thumbnail img {
    width: 100%;
    cursor: pointer;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em
}

.wrapper .main .content .invoice-wrapper {
    min-height: 1050px;
    max-width: 800px;
    overflow: hidden;
    position: relative;
    padding: 100px 100px 20px
}

.wrapper .main .content .invoice-wrapper:before {
    content: "";
    width: 150%;
    height: 57%;
    position: absolute;
    top: -25%;
    left: -40%;
    background-color: #fafafa;
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg)
}

.wrapper .main .content .invoice-wrapper:after {
    content: "";
    width: 150%;
    height: 57%;
    position: absolute;
    top: -48%;
    left: -22%;
    background-color: #f7f7f7;
    -webkit-transform: rotate(27deg);
    transform: rotate(27deg)
}

.wrapper .main .content .invoice-wrapper .invoice-info {
    z-index: 2;
    position: relative;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}

.wrapper .main .content .invoice-wrapper .invoice-info .client-info {
    text-align: right;
    margin-top: 200px
}

.wrapper .main .content .invoice-wrapper .invoice-info .client-name,.wrapper .main .content .invoice-wrapper .invoice-info .company-name {
    margin-top: 15px;
    font-size: 22px
}

.wrapper .main .content .invoice-wrapper .invoice-info .client-address,.wrapper .main .content .invoice-wrapper .invoice-info .company-address {
    font-size: 16px;
    margin-top: 10px
}

.wrapper .main .content .invoice-wrapper .invoice-info .client-phone,.wrapper .main .content .invoice-wrapper .invoice-info .company-phone {
    margin-top: 10px
}

.wrapper .main .content .invoice-wrapper .invoice-date {
    margin-top: 40px
}

.wrapper .main .content .invoice-wrapper .invoice-date .invoice-date-title {
    font-size: 22px
}

.wrapper .main .content .invoice-wrapper .invoice-body .invoice-code,.wrapper .main .content .invoice-wrapper .invoice-body .invoice-terms .invoice-terms-title {
    font-size: 16px
}

.wrapper .main .content .invoice-wrapper .invoice-date .invoice-date-text {
    margin-top: 5px
}

.wrapper .main .content .invoice-wrapper .invoice-body {
    margin-top: 40px
}

.wrapper .main .content .invoice-wrapper .invoice-body .invoice-code .invoice-code-text {
    padding-left: 5px
}

.wrapper .main .content .invoice-wrapper .invoice-body .invoice-table {
    margin-top: 10px
}

.wrapper .main .content .invoice-wrapper .invoice-body .invoice-table tr td:first-of-type,.wrapper .main .content .invoice-wrapper .invoice-body .invoice-table tr th:first-of-type {
    padding-left: 0
}

.wrapper .main .content .invoice-wrapper .invoice-body .invoice-table tr td:last-of-type,.wrapper .main .content .invoice-wrapper .invoice-body .invoice-table tr th:last-of-type {
    padding-right: 0
}

.wrapper .main .content .invoice-wrapper .invoice-body .invoice-table tr th {
    text-transform: uppercase
}

.wrapper .main .content .invoice-wrapper .invoice-body .invoice-table tfoot {
    font-weight: 700;
    text-transform: uppercase
}

.wrapper .main .content .invoice-wrapper .invoice-body .invoice-terms {
    margin-top: 30px
}

.wrapper .main .content .invoice-wrapper .invoice-body .invoice-terms .invoice-terms-content {
    margin-top: 5px
}

.wrapper .main .content .invoice-wrapper .invoice-footer {
    margin-top: 100px
}

.wrapper .main .content .invoice-wrapper .invoice-footer img {
    width: 50px;
    margin-right: 10px;
    margin-top: -10px
}

.wrapper .main .content .invoice-wrapper .invoice-footer .company-email-phone {
    padding-top: 10px;
    display: inline-block
}

.wrapper .main .with-top-banner {
    -webkit-border-radius: 0 0 .3em .3em;
    -moz-border-radius: 0 0 .3em .3em;
    -ms-border-radius: 0 0 .3em .3em;
    -o-border-radius: 0 0 .3em .3em;
    border-radius: 0 0 .3em .3em
}

.wrapper .main .not-found-box {
    color: #37474F;
    padding: 20px;
    max-width: 450px;
    margin: 140px auto 0;
    position: relative;
    text-align: center;
    border: 2px dashed #ccc;
    -webkit-animation: showSlowlyElement .8s;
    animation: showSlowlyElement .8s;
    -webkit-border-radius: .4em;
    -moz-border-radius: .4em;
    -ms-border-radius: .4em;
    -o-border-radius: .4em;
    border-radius: .4em
}

.wrapper .main .not-found-box .error-code {
    font-size: 72px
}

.wrapper .main .not-found-box .error-status {
    color: #78909c;
    font-size: 18px
}

.wrapper .main .not-found-box .error-text {
    font-size: 22px;
    margin-top: 40px;
    margin-bottom: 20px
}

.wrapper .main .not-found-box .not-found-footer {
    padding-top: 20px;
    border-top: 2px dashed #ccc
}

.wrapper .main .not-found-box .not-found-footer .form-control {
    height: auto
}

.auth-wrapper {
    max-width: 540px;
    margin: 7rem auto 0;
    min-height: 400px;
    z-index: 9;
    position: relative;
}

.auth-wrapper .auth-header,.auth-wrapper .auth-user {
    padding: 50px 50px 30px;
    text-align: right;
    position: relative;
    background-size: cover;
    background-color: #263238;
    background-position: center;
    background-image: url(../images/chocolate.jpg);
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em;
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.03);
    box-shadow: 0 0 15px rgba(0,0,0,.03)
}

.auth-wrapper .auth-header .auth-title,.auth-wrapper .auth-user .auth-title {
    color: #fff;
    font-size: 22px;
    margin-top: 70px
}

.auth-wrapper .auth-header .auth-subtitle,.auth-wrapper .auth-user .auth-subtitle {
    color: #fff;
    margin-top: 5px
}

.auth-wrapper .auth-header .auth-label,.auth-wrapper .auth-user .auth-label {
    padding: 5px 15px;
    font-size: 12px;
    background-color: #fff;
    position: absolute;
    bottom: 30px;
    left: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px
}

.auth-wrapper .auth-body {
    background: rgba(31, 31, 31, 0.87);
    margin-top: 20px;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.03);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.03);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.03);
    -o-box-shadow: 0 0 15px rgba(0,0,0,.03);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.41);
}

.auth-wrapper .auth-body .auth-content {
    padding: 35px 30px;
}

.auth-wrapper .auth-body .auth-content .form-group label {
    font-weight: 700
}

.auth-wrapper .auth-body .auth-footer {
    font-size: 12px;
    font-weight: 700;
    border-top: 1px dashed #505050;
    padding: 20px 30px;
    overflow: hidden;
    text-align: center;
    padding-bottom: 35px;
}

.auth-wrapper .auth-body .auth-footer .btn {
    padding: 10px 30px;
    font-size: 18px;
}

.auth-wrapper .auth-body .auth-footer .auth-link {
    margin-top: 7px
}

.auth-wrapper .auth-body .auth-footer .auth-link .check-label {
    display: inline-block;
    color: #ff3d00;
}

.auth-wrapper .auth-body .auth-footer .auth-link .devider {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px
}

.auth-wrapper .auth-body .auth-footer .auth-link .devider:after {
    content: "";
    top: -11px;
    left: 0;
    position: absolute;
    width: 1px;
    height: 13px;
    background-color: #ccc
}

.auth-wrapper .auth-body .auth-footer .auth-link a {
    cursor: pointer;
    text-decoration: none
}

.auth-wrapper .auth-user {
    text-align: center;
    padding: 50px;
    color: #fff
}

.auth-wrapper .auth-user img {
    width: 75px;
    padding: 2px;
    border: 2px solid #f4f4f4;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.auth-wrapper .auth-user .auth-user-name {
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 5px
}

.auth-wrapper .auth-user .auth-user-group {
    font-size: 12px
}

.badge,.badge-grey,.badge-red,.badge-yellow {
    display: inline-block;
    line-height: 1;
    color: #fff;
    font-size: 11px;
    padding: 3px 6px;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px
}

.badge-yellow {
    background-color: #FBC02D
}

.badge-red {
    background-color: #e33244
}

.badge-grey {
    background-color: #a0a0a0
}

.select-rounded {
    height: 22px;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 15px;
    padding-left: 15px;
    font-weight: 400;
    margin-right: 15px;
    font-size: 12px;
    border-color: #263238;
    background-color: transparent;
    position: relative;
    outline: 0;
    background-position: right 5px top 50%;
    background-repeat: no-repeat;
    background-image: url(../images/select-arrow.png);
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
}

.status-pill {
    width: 8px;
    height: 8px;
    display: inline-block;
    background-color: #ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.check-label {
    display: block;
}

.check-label input {
    margin-right: 8px
}

.form-section {
    font-size: 16px;
    margin-top: 25px;
    margin-bottom: 25px;
    position: relative
}

.form-section:before {
    content: "";
    width: 100%;
    top: 10px;
    left: 0;
    position: absolute;
    border-bottom: 1px solid #EBEBEB
}

.form-section span {
    z-index: 2;
    padding-right: 10px;
    position: relative;
    background-color: #fcfcfc
}

.green {
    background-color: #71c21a
}

.red {
    background-color: #e33244
}

.yellow {
    background-color: #FBC02D
}

.blue {
    background-color: #5797fc
}

@media (min-width: 901px) {
    .profile-nav-mobile,.side-nav-mobile {
        display:none
    }
}

@media (max-width: 900px) {
    .profile-nav-mobile,.side-nav-mobile {
        cursor:pointer;
        height: 100%;
        color: #fff;
        font-size: 18px
    }

    .top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile.active,.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile:hover {
        background-color: #fff
    }

    .side-nav-mobile {
        align-items: center;
        justify-content: flex-start;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: inline;
        font-size: 42px;
        margin-right: 15px;
    }

    .profile-nav-mobile {
        align-items: center;
        justify-content: flex-end;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: inline;
        /* float: right; */
        font-size: 35px;
    }

    .top-nav .top-nav-box .top-nav-content .top-nav-box .global-search,.top-nav .top-nav-box .top-nav-content .top-nav-box .quick-link,.top-nav .top-nav-box .top-nav-content .top-nav-box .top-notification,.top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .clear .user-name:after {
        display: none;
    }

    .top-nav .top-nav-box .logo-wrapper {
        padding-left: 20px;
        width: 80%;
    }

.top-nav .top-nav-box {
}

    .top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile {
        left: 0;
        width: 100%;
        height: auto;
        top: 60px;
        padding: 20px;
        display: none;
        position: absolute;
        background-color: #fff;
        -webkit-box-shadow: 0 0 15px rgba(0,0,0,.07);
        -moz-box-shadow: 0 0 15px rgba(0,0,0,.07);
        -ms-box-shadow: 0 0 15px rgba(0,0,0,.07);
        -o-box-shadow: 0 0 15px rgba(0,0,0,.07);
        box-shadow: 0 0 15px rgba(0,0,0,.07)
    }

    .top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .user-on {
        top: 3px;
        left: 3px
    }

    .top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .user-image {
        width: 60px;
        height: 60px;
        margin: 0 auto
    }

    .top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .clear {
        margin-left: 0
    }

    .top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .clear .user-name {
        color: #263238;
        margin-top: 10px
    }

    .top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .clear .user-group {
        color: #95989a;
        margin-top: 10px;
        text-align: center
    }

    .top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .clear .user-top-menu {
        display: block;
        position: static;
        margin-left: 0;
        margin-top: 20px;
        animation-name: initial
    }

    .top-nav .top-nav-box .top-nav-content .top-nav-box .user-top-profile .clear .user-top-menu:before {
        left: auto;
        right: 20px
    }

    .wrapper {
        display: block
    }

    .wrapper .side-nav {
        top: 60px;
        left: 0;
        z-index: 3;
        display: none;
        position: fixed;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0
    }

    .wrapper .side-nav .side-notification {
        display: none
    }

    .wrapper .main {
        display: block
    }
}

@media (max-width: 600px) {
    .top-nav .top-nav-box .logo-wrapper {
    padding-left: 20px;
    width: auto;
    }

.follow-up-noti.mobile {
    display: inline;
    /* float: left; */
}

.tooltipp .tooltiptext {
    width: 170px;
    white-space: break-spaces;
}

.headernotification {
    display: inline-block;
    width: 100%;
    position: relative;
    justify-content: center;
    top: 69px;
    background: #13181b;
    /* z-index: 9; */
    padding: 12px;
    text-align: center;
}

.follow-up-noti.desktopview {
    display: none;
}

.wrapper {
    margin-top: 80px;
}

.follow-up-noti {
    position: relative !important;
}
}

@media (max-width: 400px) {
    .top-nav .top-nav-box .logo-wrapper {
        padding-left:12%
    }
}

@media (max-width: 370px) {
    .top-nav .top-nav-box .logo-wrapper {
        padding-left:4%
    }
}

@media (max-width: 900px) {
    .wrapper {
        padding:10px
    }

    .wrapper .main {
        padding-left: 0
    }
}

@media (max-width: 1250px) {
    .wrapper .card-wrapper {
        max-width:50%;
        -webkit-box-flex: inherit;
        -moz-flex: inherit;
        -ms-flex: inherit;
        -webkit-flex: inherit;
        flex: inherit
    }
}

@media (max-width: 550px) {
    .wrapper .card-wrapper {
        max-width:100%;
        -webkit-box-flex: inherit;
        -moz-flex: inherit;
        -ms-flex: inherit;
        -webkit-flex: inherit;
        flex: inherit
    }
}

@media (max-width: 1100px) {
    .sm-max {
        width:100%!important;
        max-width: 100%;
        -webkit-box-flex: 100%;
        -moz-flex: 100%;
        -ms-flex: 100%;
        -webkit-flex: 100%;
        flex: 100%
    }

    .sm-text-center {
        display: block;
        text-align: center
    }
}

@media (max-width: 1025px) {
    .wrapper .main .content .invoice-wrapper:after {
        top:-40%;
        left: -10%
    }
}

@media (max-width: 768px) {
    .wrapper .main .content .invoice-wrapper {
        padding:40px;
        min-height: auto
    }

    .wrapper .main .content .invoice-wrapper .invoice-info {
        display: block
    }

    .wrapper .main .content .invoice-wrapper .invoice-info .client-info {
        margin-top: 20px;
        text-align: left
    }

    .wrapper .main .content .invoice-wrapper .invoice-body,.wrapper .main .content .invoice-wrapper .invoice-date,.wrapper .main .content .invoice-wrapper .invoice-footer {
        margin-top: 20px
    }

    .wrapper .main .content .invoice-wrapper .invoice-footer img {
        width: 30px;
        margin-right: 0
    }

    .wrapper .main .content .invoice-wrapper .invoice-footer .col-md-6 {
        text-align: center!important
    }

    .wrapper .main .content .invoice-wrapper:before {
        top: -38%
    }

    .wrapper .main .content .invoice-wrapper:after {
        top: -44%;
        left: -10%
    }
}

@media (max-width: 550px) {
    .wrapper .main .content .invoice-wrapper:before {
        top:-40%
    }

    .wrapper .main .content .invoice-wrapper:after {
        top: -44%;
        left: -5%
    }
}

@media (max-width: 400px) {
    .wrapper .main .content .invoice-wrapper:after {
        top:-44%;
        left: 0
    }
}

@media (max-width: 550px) {
    .auth-wrapper {
        padding:20px
    }

    .auth-wrapper .auth-header,.auth-wrapper .auth-user {
        padding: 50px 20px 20px
    }

    .auth-wrapper .auth-header .auth-label,.auth-wrapper .auth-user .auth-label {
        left: 20px;
        bottom: 20px
    }

    .auth-wrapper .auth-body .auth-content,.auth-wrapper .auth-body .auth-footer {
        padding: 20px
    }
}

@media (max-width: 1000px) {
    .wrapper .main .content .media-wrapper .media-row {
        flex-wrap:wrap
    }

    .wrapper .main .content .media-wrapper .media-row .media-box {
        width: 46%
    }
}

@media (max-width: 570px) {
    .wrapper .main .content .media-wrapper .media-row .media-box {
        width:100%;
        margin-right: 0
    }
}

.pagination li a {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    line-height: 1.25;
    color: #263238;
    cursor: pointer;
    margin-left: .25rem;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #EBEBEB;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em
}

.pagination li a:hover {
    background: #fcfcfc
}

.pagination li.active a {
    color: #fff;
    background: #FF5722;
    border-color: #FF5722
}

.pagination li:first-of-type a {
    margin-left: 0
}

@media (max-width: 1100px) {
    .wrapper .main .content.chat-wrapper .panel {
        display:block
    }

    .wrapper .main .content.chat-wrapper .panel .chat-contact,.wrapper .main .content.chat-wrapper .panel .chat-content,.wrapper .main .content.chat-wrapper .panel .chat-detail {
        width: 100%;
        display: block
    }

    .pagination {
        justify-content: center;
        float: none!important;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex
    }
}

@media (max-width: 400px) {
    .pagination li a {
        padding:5px 10px
    }
}

@media (max-width: 360px) {
    .pagination li a {
        padding:5px 7px
    }
}

.table {
    margin-bottom: 0
}

.table thead th {
    font-weight: 700;
    padding-top: 20px;
    padding-bottom: 20px
}

.table td,.table th {
    vertical-align: middle;
    border-top: 0
}

.table td a,.table th a {
    text-decoration: none
}

.table.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fff
}

.table .image-table {
    width: 50px;
    border: 3px solid #fff;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.07);
    -o-box-shadow: 0 0 15px rgba(0,0,0,.07);
    box-shadow: 0 0 15px rgba(0,0,0,.07)
}

.table.table-bordered td,.table.table-bordered th {
    border: 1px solid #f7f6f6;
    white-space: nowrap;
}

.text-muted {
    color: #9a9a9a!important
}

.form-control {
    height: 42px;
    outline: 0;
    font-size: 14px;
    padding: 3px 5px;
    -webkit-box-shadow: none!important;
    -moz-box-shadow: none!important;
    -ms-box-shadow: none!important;
    -o-box-shadow: none!important;
    box-shadow: none!important;
}

.input-group-addon,select.form-control:not([size]):not([multiple]) {
    height: 35px;
}

.form-group label {
    padding-bottom: 8px
}

.btn {
    cursor: pointer;
    font-size: 15px;
    padding: 8px 15px;
    border: 0!important;
    -webkit-transition: background-color .3s linear;
    -moz-transition: background-color .3s linear;
    -ms-transition: background-color .3s linear;
    -o-transition: background-color .3s linear;
    transition: background-color .3s linear;
}

.btn.active {
    -webkit-box-shadow: inset 0 1px 8px rgba(0,0,0,.14);
    -moz-box-shadow: inset 0 1px 8px rgba(0,0,0,.14);
    -ms-box-shadow: inset 0 1px 8px rgba(0,0,0,.14);
    -o-box-shadow: inset 0 1px 8px rgba(0,0,0,.14);
    box-shadow: inset 0 1px 8px rgba(0,0,0,.14)
}

.btn-sm-width {
    min-width: 16%
}

.btn-md-width {
    min-width: 32%
}

.btn-lg-width {
    min-width: 48%
}

.btn-group-lg>.btn,.btn-lg {
    font-size: 16px;
    padding: 10px 16px!important
}

.btn-group-sm>.btn,.btn-sm {
    font-size: 12px;
    padding: 5px 10px!important
}

.btn-group-xs>.btn,.btn-xs {
    font-size: 12px;
    padding: 2px 5px!important
}

.btn-default,.btn-default.dropdown-toggle {
    color: #788288;
    border: 1px solid #d2dae1!important;
    border-bottom-color: #cbd5dd!important;
    background-color: #fcfcfd;
    -webkit-box-shadow: 0 1px 1px rgba(90,90,90,.1);
    -moz-box-shadow: 0 1px 1px rgba(90,90,90,.1);
    -ms-box-shadow: 0 1px 1px rgba(90,90,90,.1);
    -o-box-shadow: 0 1px 1px rgba(90,90,90,.1);
    box-shadow: 0 1px 1px rgba(90,90,90,.1)
}

.btn-default.dropdown-toggle:active,.btn-default.dropdown-toggle:focus,.btn-default.dropdown-toggle:hover,.btn-default:active,.btn-default:focus,.btn-default:hover {
    background-color: #ebeef4!important
}

.btn-success,.btn-success.dropdown-toggle {
    background-color: #1aae88
}

.btn-success.dropdown-toggle:active,.btn-success.dropdown-toggle:focus,.btn-success.dropdown-toggle:hover,.btn-success:active,.btn-success:focus,.btn-success:hover {
    background-color: #179877!important
}

.btn-info,.btn-info.dropdown-toggle {
    background-color: #1ccacc
}

.btn-info.dropdown-toggle:active,.btn-info.dropdown-toggle:focus,.btn-info.dropdown-toggle:hover,.btn-info:active,.btn-info:focus,.btn-info:hover {
    background-color: #19b4b6!important
}

.btn-warning,.btn-warning.dropdown-toggle {
    background-color: #fcc633
}

.btn-warning.dropdown-toggle:active,.btn-warning.dropdown-toggle:focus,.btn-warning.dropdown-toggle:hover,.btn-warning:active,.btn-warning:focus,.btn-warning:hover {
    background-color: #fcbf1a!important
}

.btn-danger,.dropdown-toggle {
    background-color: #e33244
}

.btn-danger:active,.btn-danger:focus,.btn-danger:hover,.dropdown-toggle:active,.dropdown-toggle:focus,.dropdown-toggle:hover {
    background-color: #dd1e32!important
}

.btn-dark,.btn-dark.dropdown-toggle {
    color: #fff;
    background-color: #222733
}

.btn-dark.dropdown-toggle:active,.btn-dark.dropdown-toggle:focus,.btn-dark.dropdown-toggle:hover,.btn-dark:active,.btn-dark:focus,.btn-dark:hover {
    background-color: #181b24!important
}

.btn-rounded {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px
}

.dropdown-toggle:after {
    margin-left: 5px;
    margin-right: 5px
}

.dropdown-menu {
    font-size: 13px;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.1);
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    border: 1px solid rgba(0,0,0,.1)
}

.dropdown-menu li>a {
    color: #333;
    padding: 10px 15px;
    display: block;
    text-decoration: none
}

.btn-group-justified {
    display: table;
    width: 100%;
    table-layout: fixed
}

.btn-group-justified .btn {
    display: table-cell
}

.btn-toolbar .btn-group {
    margin-right: 5px
}

.btn-icon {
    width: 40px
}

.btn-icon.btn-xs {
    width: 25px
}

.btn-icon.btn-sm {
    width: 35px
}

.btn-icon.btn-lg {
    width: 50px
}

@media (max-width: 450px) {
    .btn-lg-width,.btn-md-width,.btn-sm-width {
        min-width:auto
    }

    .btn-toolbar {
        display: block
    }

    .btn-toolbar .btn-group {
        width: 100%;
        display: block;
        margin-bottom: 5px
    }
}

.select2-container--default {
    width: 100%!important
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid rgba(0,0,0,.15)
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: 3px 6px;
    background-color: #fafafa;
    border: 1px solid #ccc;
    margin-top: 4px;
    margin-left: 0;
    margin-bottom: 1px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 6px;
    color: #263238
}

.daterangepicker .calendar td,.daterangepicker .calendar th {
    padding: 8px;
    font-size: 12px
}

.dropzone {
    border: 2px dashed #263238
}

.dropzone .dz-message h4 {
    color: #263238;
    font-size: 24px
}

.fc-button,.fc-content {
    color: #fff
}

.dropzone .dz-message .text-muted {
    font-size: 14px;
    margin-top: 5px
}

.cke_bottom,.cke_chrome,.cke_top {
    background: 0 0!important;
    border-color: #f4f4f4!important
}

.table.dataTable {
    margin-top: 5px!important;
}

.dataTables_length select {
    margin: 0 5px
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0;
    margin-left: 0
}

.dataTables_wrapper .row,.dataTables_wrapper .row .col-xs-12 {
    width: 100%
}

.table.dataTable thead .sorting,.table.dataTable thead .sorting_asc,.table.dataTable thead .sorting_desc {
    background-image: none
}

.table.dataTable.no-footer {
    border: 0
}

.table.dataTable.table-bordered tbody tr:last-of-type td,.table.dataTable.table-bordered tbody tr:last-of-type th {
    border-bottom: 1px solid #f7f6f6
}

.table.dataTable.table-bordered tbody td:last-of-type {
    border-right: 1px solid #f7f6f6
}

.table.dataTable.table-bordered tbody td,.table.dataTable.table-bordered tbody th {
    border: 1px solid #f7f6f6;
    border-bottom-width: 0;
    border-right-width: 0;
    padding: .75rem
}

.table.dataTable.table-bordered thead th {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #f7f6f6;
    border-bottom-width: 0;
    border-right-width: 0;
}

.table.dataTable.table-bordered thead th:last-of-type {
    border-right: 1px solid #f7f6f6
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: 1.1em
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-color: transparent;
    background: 0 0
}

.dataTables_wrapper .dataTables_paginate .paginate_button a {
    margin-left: .15rem
}

.table.dataTable thead .sorting:before,table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc_disabled:after,table.dataTable thead .sorting_desc_disabled:before {
    bottom: 20px
}

.fancybox-bg {
    background: #757575
}

.fancybox-image {
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em
}

.fancybox-caption-wrap {
    background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.1) 20%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.46) 80%,rgba(0,0,0,.47))
}

.fancybox-caption {
    text-align: center;
    border-top: 1px solid rgba(168,168,168,.4)
}

.fancybox-buttons button:last-of-type {
    -webkit-border-radius: 0 0 0 .3em;
    -moz-border-radius: 0 0 0 .3em;
    -ms-border-radius: 0 0 0 .3em;
    -o-border-radius: 0 0 0 .3em;
    border-radius: 0 0 0 .3em
}

.fc-toolbar.fc-header-toolbar {
    margin-bottom: 30px
}

.fc-button {
    display: inline-block;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap!important;
    vertical-align: middle;
    cursor: pointer!important;
    font-size: 12px!important;
    padding: 8px 15px!important;
    height: 33px!important;
    box-sizing: border-box;
    border: 0!important;
    background-image: none;
    margin-right: 5px!important;
    background-color: #FF5722;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-border-radius: .3em!important;
    -moz-border-radius: .3em!important;
    -ms-border-radius: .3em!important;
    -o-border-radius: .3em!important;
    border-radius: .3em!important;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.fc-button:last-of-type {
    margin: 0!important
}

.fc-button:last-of-type.fc-today-button {
    margin: 0 5px!important
}

.fc-toolbar h2 {
    color: #263238;
    font-size: 20px;
    padding-top: 5px
}

.fc-state-active,.fc-state-down {
    color: #fff;
    border: 0;
    background-color: #263238;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none
}

.fc-state-active:hover,.fc-state-down {
    background-color: #263238
}

.fc-event,.fc-event-dot {
    color: #fff;
    padding: 5px 10px;
    background-color: #FF5722;
    border-color: #FF5722
}

.fc-unthemed tbody {
    border-bottom: 1px solid #f7f6f6
}

.fc-unthemed tbody td:last-of-type {
    border-right: 1px solid #f7f6f6
}

.fc-unthemed tbody td,.fc-unthemed tbody th {
    border: 1px solid #f7f6f6;
    border-bottom-width: 0;
    border-right-width: 0
}

.fc-unthemed thead th {
    font-weight: 700;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 1px solid #f7f6f6;
    border-bottom-width: 0;
    border-right-width: 0
}

.fc-unthemed thead th:last-of-type {
    border-right: 1px solid #f7f6f6
}

.fc-row .fc-content-skeleton td,.fc-row .fc-helper-skeleton td,.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead {
    border-color: #f7f6f6
}

.fc-unthemed td.fc-today {
    background-color: #f4f4f4!important
}

.mgtop-1 {
    margin-top: 1px!important
}

.mgtop-2 {
    margin-top: 2px!important
}

.mgtop-3 {
    margin-top: 3px!important
}

.mgtop-4 {
    margin-top: 4px!important
}

.mgtop-5 {
    margin-top: 5px!important
}

.mgtop-6 {
    margin-top: 6px!important
}

.mgtop-7 {
    margin-top: 7px!important
}

.mgtop-8 {
    margin-top: 8px!important
}

.mgtop-9 {
    margin-top: 9px!important
}

.mgtop-10 {
    margin-top: 10px!important
}

.mgtop-11 {
    margin-top: 11px!important
}

.mgtop-12 {
    margin-top: 12px!important
}

.mgtop-13 {
    margin-top: 13px!important
}

.mgtop-14 {
    margin-top: 14px!important
}

.mgtop-15 {
    margin-top: 15px!important
}

.mgtop-16 {
    margin-top: 16px!important
}

.mgtop-17 {
    margin-top: 17px!important
}

.mgtop-18 {
    margin-top: 18px!important
}

.mgtop-19 {
    margin-top: 19px!important
}

.mgtop-20 {
    margin-top: 20px!important
}

.mgleft-1 {
    margin-left: 1px!important
}

.mgleft-2 {
    margin-left: 2px!important
}

.mgleft-3 {
    margin-left: 3px!important
}

.mgleft-4 {
    margin-left: 4px!important
}

.mgleft-5 {
    margin-left: 5px!important
}

.mgleft-6 {
    margin-left: 6px!important
}

.mgleft-7 {
    margin-left: 7px!important
}

.mgleft-8 {
    margin-left: 8px!important
}

.mgleft-9 {
    margin-left: 9px!important
}

.mgleft-10 {
    margin-left: 10px!important
}

.mgleft-11 {
    margin-left: 11px!important
}

.mgleft-12 {
    margin-left: 12px!important
}

.mgleft-13 {
    margin-left: 13px!important
}

.mgleft-14 {
    margin-left: 14px!important
}

.mgleft-15 {
    margin-left: 15px!important
}

.mgleft-16 {
    margin-left: 16px!important
}

.mgleft-17 {
    margin-left: 17px!important
}

.mgleft-18 {
    margin-left: 18px!important
}

.mgleft-19 {
    margin-left: 19px!important
}

.mgleft-20 {
    margin-left: 20px!important
}

.mgright-1 {
    margin-right: 1px!important
}

.mgright-2 {
    margin-right: 2px!important
}

.mgright-3 {
    margin-right: 3px!important
}

.mgright-4 {
    margin-right: 4px!important
}

.mgright-5 {
    margin-right: 5px!important
}

.mgright-6 {
    margin-right: 6px!important
}

.mgright-7 {
    margin-right: 7px!important
}

.mgright-8 {
    margin-right: 8px!important
}

.mgright-9 {
    margin-right: 9px!important
}

.mgright-10 {
    margin-right: 10px!important
}

.mgright-11 {
    margin-right: 11px!important
}

.mgright-12 {
    margin-right: 12px!important
}

.mgright-13 {
    margin-right: 13px!important
}

.mgright-14 {
    margin-right: 14px!important
}

.mgright-15 {
    margin-right: 15px!important
}

.mgright-16 {
    margin-right: 16px!important
}

.mgright-17 {
    margin-right: 17px!important
}

.mgright-18 {
    margin-right: 18px!important
}

.mgright-19 {
    margin-right: 19px!important
}

.mgright-20 {
    margin-right: 20px!important
}

.mgbottom-1 {
    margin-bottom: 1px!important
}

.mgbottom-2 {
    margin-bottom: 2px!important
}

.mgbottom-3 {
    margin-bottom: 3px!important
}

.mgbottom-4 {
    margin-bottom: 4px!important
}

.mgbottom-5 {
    margin-bottom: 5px!important;
    background-color: tomato;
}

.mgbottom-6 {
    margin-bottom: 6px!important
}

.mgbottom-7 {
    margin-bottom: 7px!important
}

.mgbottom-8 {
    margin-bottom: 8px!important
}

.mgbottom-9 {
    margin-bottom: 9px!important
}

.mgbottom-10 {
    margin-bottom: 10px!important
}

.mgbottom-11 {
    margin-bottom: 11px!important
}

.mgbottom-12 {
    margin-bottom: 12px!important
}

.mgbottom-13 {
    margin-bottom: 13px!important
}

.mgbottom-14 {
    margin-bottom: 14px!important
}

.mgbottom-15 {
    margin-bottom: 15px!important
}

.mgbottom-16 {
    margin-bottom: 16px!important
}

.mgbottom-17 {
    margin-bottom: 17px!important
}

.mgbottom-18 {
    margin-bottom: 18px!important
}

.mgbottom-19 {
    margin-bottom: 19px!important
}

.mgbottom-20 {
    margin-bottom: 20px!important
}

.pdtop-1 {
    padding-top: 1px!important
}

.pdtop-2 {
    padding-top: 2px!important
}

.pdtop-3 {
    padding-top: 3px!important
}

.pdtop-4 {
    padding-top: 4px!important
}

.pdtop-5 {
    padding-top: 5px!important
}

.pdtop-6 {
    padding-top: 6px!important
}

.pdtop-7 {
    padding-top: 7px!important
}

.pdtop-8 {
    padding-top: 8px!important
}

.pdtop-9 {
    padding-top: 9px!important
}

.pdtop-10 {
    padding-top: 10px!important
}

.pdtop-11 {
    padding-top: 11px!important
}

.pdtop-12 {
    padding-top: 12px!important
}

.pdtop-13 {
    padding-top: 13px!important
}

.pdtop-14 {
    padding-top: 14px!important
}

.pdtop-15 {
    padding-top: 15px!important
}

.pdtop-16 {
    padding-top: 16px!important
}

.pdtop-17 {
    padding-top: 17px!important
}

.pdtop-18 {
    padding-top: 18px!important
}

.pdtop-19 {
    padding-top: 19px!important
}

.pdtop-20 {
    padding-top: 20px!important
}

.pdleft-1 {
    padding-left: 1px!important
}

.pdleft-2 {
    padding-left: 2px!important
}

.pdleft-3 {
    padding-left: 3px!important
}

.pdleft-4 {
    padding-left: 4px!important
}

.pdleft-5 {
    padding-left: 5px!important
}

.pdleft-6 {
    padding-left: 6px!important
}

.pdleft-7 {
    padding-left: 7px!important
}

.pdleft-8 {
    padding-left: 8px!important
}

.pdleft-9 {
    padding-left: 9px!important
}

.pdleft-10 {
    padding-left: 10px!important
}

.pdleft-11 {
    padding-left: 11px!important
}

.pdleft-12 {
    padding-left: 12px!important
}

.pdleft-13 {
    padding-left: 13px!important
}

.pdleft-14 {
    padding-left: 14px!important
}

.pdleft-15 {
    padding-left: 15px!important
}

.pdleft-16 {
    padding-left: 16px!important
}

.pdleft-17 {
    padding-left: 17px!important
}

.pdleft-18 {
    padding-left: 18px!important
}

.pdleft-19 {
    padding-left: 19px!important
}

.pdleft-20 {
    padding-left: 20px!important
}

.pdright-1 {
    padding-right: 1px!important
}

.pdright-2 {
    padding-right: 2px!important
}

.pdright-3 {
    padding-right: 3px!important
}

.pdright-4 {
    padding-right: 4px!important
}

.pdright-5 {
    padding-right: 5px!important
}

.pdright-6 {
    padding-right: 6px!important
}

.pdright-7 {
    padding-right: 7px!important
}

.pdright-8 {
    padding-right: 8px!important
}

.pdright-9 {
    padding-right: 9px!important
}

.pdright-10 {
    padding-right: 10px!important
}

.pdright-11 {
    padding-right: 11px!important
}

.pdright-12 {
    padding-right: 12px!important
}

.pdright-13 {
    padding-right: 13px!important
}

.pdright-14 {
    padding-right: 14px!important
}

.pdright-15 {
    padding-right: 15px!important
}

.pdright-16 {
    padding-right: 16px!important
}

.pdright-17 {
    padding-right: 17px!important
}

.pdright-18 {
    padding-right: 18px!important
}

.pdright-19 {
    padding-right: 19px!important
}

.pdright-20 {
    padding-right: 20px!important
}

.pdbottom-1 {
    padding-bottom: 1px!important
}

.pdbottom-2 {
    padding-bottom: 2px!important
}

.pdbottom-3 {
    padding-bottom: 3px!important
}

.pdbottom-4 {
    padding-bottom: 4px!important
}

.pdbottom-5 {
    padding-bottom: 5px!important
}

.pdbottom-6 {
    padding-bottom: 6px!important
}

.pdbottom-7 {
    padding-bottom: 7px!important
}

.pdbottom-8 {
    padding-bottom: 8px!important
}

.pdbottom-9 {
    padding-bottom: 9px!important
}

.pdbottom-10 {
    padding-bottom: 10px!important
}

.pdbottom-11 {
    padding-bottom: 11px!important
}

.pdbottom-12 {
    padding-bottom: 12px!important
}

.pdbottom-13 {
    padding-bottom: 13px!important
}

.pdbottom-14 {
    padding-bottom: 14px!important
}

.pdbottom-15 {
    padding-bottom: 15px!important
}

.pdbottom-16 {
    padding-bottom: 16px!important
}

.pdbottom-17 {
    padding-bottom: 17px!important
}

.pdbottom-18 {
    padding-bottom: 18px!important
}

.pdbottom-19 {
    padding-bottom: 19px!important
}

.pdbottom-20 {
    padding-bottom: 20px!important
}

.pull-left {
    float: left
}

.pull-right {
    float: right
}

.no-mg-top {
    margin-top: 0!important
}

.no-mg-left {
    margin-left: 0!important
}

.no-mg-right {
    margin-right: 0!important
}

.no-mg-bottom {
    margin-bottom: 0!important
}

@media (max-width: 1100px) {
    .sm-mgtop-1 {
        margin-top:1px!important
    }

    .sm-mgtop-2 {
        margin-top: 2px!important
    }

    .sm-mgtop-3 {
        margin-top: 3px!important
    }

    .sm-mgtop-4 {
        margin-top: 4px!important
    }

    .sm-mgtop-5 {
        margin-top: 5px!important
    }

    .sm-mgtop-6 {
        margin-top: 6px!important
    }

    .sm-mgtop-7 {
        margin-top: 7px!important
    }

    .sm-mgtop-8 {
        margin-top: 8px!important
    }

    .sm-mgtop-9 {
        margin-top: 9px!important
    }

    .sm-mgtop-10 {
        margin-top: 10px!important
    }

    .sm-mgtop-11 {
        margin-top: 11px!important
    }

    .sm-mgtop-12 {
        margin-top: 12px!important
    }

    .sm-mgtop-13 {
        margin-top: 13px!important
    }

    .sm-mgtop-14 {
        margin-top: 14px!important
    }

    .sm-mgtop-15 {
        margin-top: 15px!important
    }

    .sm-mgtop-16 {
        margin-top: 16px!important
    }

    .sm-mgtop-17 {
        margin-top: 17px!important
    }

    .sm-mgtop-18 {
        margin-top: 18px!important
    }

    .sm-mgtop-19 {
        margin-top: 19px!important
    }

    .sm-mgtop-20 {
        margin-top: 20px!important
    }

    .sm-mgleft-1 {
        margin-left: 1px!important
    }

    .sm-mgleft-2 {
        margin-left: 2px!important
    }

    .sm-mgleft-3 {
        margin-left: 3px!important
    }

    .sm-mgleft-4 {
        margin-left: 4px!important
    }

    .sm-mgleft-5 {
        margin-left: 5px!important
    }

    .sm-mgleft-6 {
        margin-left: 6px!important
    }

    .sm-mgleft-7 {
        margin-left: 7px!important
    }

    .sm-mgleft-8 {
        margin-left: 8px!important
    }

    .sm-mgleft-9 {
        margin-left: 9px!important
    }

    .sm-mgleft-10 {
        margin-left: 10px!important
    }

    .sm-mgleft-11 {
        margin-left: 11px!important
    }

    .sm-mgleft-12 {
        margin-left: 12px!important
    }

    .sm-mgleft-13 {
        margin-left: 13px!important
    }

    .sm-mgleft-14 {
        margin-left: 14px!important
    }

    .sm-mgleft-15 {
        margin-left: 15px!important
    }

    .sm-mgleft-16 {
        margin-left: 16px!important
    }

    .sm-mgleft-17 {
        margin-left: 17px!important
    }

    .sm-mgleft-18 {
        margin-left: 18px!important
    }

    .sm-mgleft-19 {
        margin-left: 19px!important
    }

    .sm-mgleft-20 {
        margin-left: 20px!important
    }

    .sm-mgright-1 {
        margin-right: 1px!important
    }

    .sm-mgright-2 {
        margin-right: 2px!important
    }

    .sm-mgright-3 {
        margin-right: 3px!important
    }

    .sm-mgright-4 {
        margin-right: 4px!important
    }

    .sm-mgright-5 {
        margin-right: 5px!important
    }

    .sm-mgright-6 {
        margin-right: 6px!important
    }

    .sm-mgright-7 {
        margin-right: 7px!important
    }

    .sm-mgright-8 {
        margin-right: 8px!important
    }

    .sm-mgright-9 {
        margin-right: 9px!important
    }

    .sm-mgright-10 {
        margin-right: 10px!important
    }

    .sm-mgright-11 {
        margin-right: 11px!important
    }

    .sm-mgright-12 {
        margin-right: 12px!important
    }

    .sm-mgright-13 {
        margin-right: 13px!important
    }

    .sm-mgright-14 {
        margin-right: 14px!important
    }

    .sm-mgright-15 {
        margin-right: 15px!important
    }

    .sm-mgright-16 {
        margin-right: 16px!important
    }

    .sm-mgright-17 {
        margin-right: 17px!important
    }

    .sm-mgright-18 {
        margin-right: 18px!important
    }

    .sm-mgright-19 {
        margin-right: 19px!important
    }

    .sm-mgright-20 {
        margin-right: 20px!important
    }

    .sm-mgbottom-1 {
        margin-bottom: 1px!important
    }

    .sm-mgbottom-2 {
        margin-bottom: 2px!important
    }

    .sm-mgbottom-3 {
        margin-bottom: 3px!important
    }

    .sm-mgbottom-4 {
        margin-bottom: 4px!important
    }

    .sm-mgbottom-5 {
        margin-bottom: 5px!important
    }

    .sm-mgbottom-6 {
        margin-bottom: 6px!important
    }

    .sm-mgbottom-7 {
        margin-bottom: 7px!important
    }

    .sm-mgbottom-8 {
        margin-bottom: 8px!important
    }

    .sm-mgbottom-9 {
        margin-bottom: 9px!important
    }

    .sm-mgbottom-10 {
        margin-bottom: 10px!important
    }

    .sm-mgbottom-11 {
        margin-bottom: 11px!important
    }

    .sm-mgbottom-12 {
        margin-bottom: 12px!important
    }

    .sm-mgbottom-13 {
        margin-bottom: 13px!important
    }

    .sm-mgbottom-14 {
        margin-bottom: 14px!important
    }

    .sm-mgbottom-15 {
        margin-bottom: 15px!important
    }

    .sm-mgbottom-16 {
        margin-bottom: 16px!important
    }

    .sm-mgbottom-17 {
        margin-bottom: 17px!important
    }

    .sm-mgbottom-18 {
        margin-bottom: 18px!important
    }

    .sm-mgbottom-19 {
        margin-bottom: 19px!important
    }

    .sm-mgbottom-20 {
        margin-bottom: 20px!important
    }

    .sm-pdtop-1 {
        padding-top: 1px!important
    }

    .sm-pdtop-2 {
        padding-top: 2px!important
    }

    .sm-pdtop-3 {
        padding-top: 3px!important
    }

    .sm-pdtop-4 {
        padding-top: 4px!important
    }

    .sm-pdtop-5 {
        padding-top: 5px!important
    }

    .sm-pdtop-6 {
        padding-top: 6px!important
    }

    .sm-pdtop-7 {
        padding-top: 7px!important
    }

    .sm-pdtop-8 {
        padding-top: 8px!important
    }

    .sm-pdtop-9 {
        padding-top: 9px!important
    }

    .sm-pdtop-10 {
        padding-top: 10px!important
    }

    .sm-pdtop-11 {
        padding-top: 11px!important
    }

    .sm-pdtop-12 {
        padding-top: 12px!important
    }

    .sm-pdtop-13 {
        padding-top: 13px!important
    }

    .sm-pdtop-14 {
        padding-top: 14px!important
    }

    .sm-pdtop-15 {
        padding-top: 15px!important
    }

    .sm-pdtop-16 {
        padding-top: 16px!important
    }

    .sm-pdtop-17 {
        padding-top: 17px!important
    }

    .sm-pdtop-18 {
        padding-top: 18px!important
    }

    .sm-pdtop-19 {
        padding-top: 19px!important
    }

    .sm-pdtop-20 {
        padding-top: 20px!important
    }

    .sm-pdleft-1 {
        padding-left: 1px!important
    }

    .sm-pdleft-2 {
        padding-left: 2px!important
    }

    .sm-pdleft-3 {
        padding-left: 3px!important
    }

    .sm-pdleft-4 {
        padding-left: 4px!important
    }

    .sm-pdleft-5 {
        padding-left: 5px!important
    }

    .sm-pdleft-6 {
        padding-left: 6px!important
    }

    .sm-pdleft-7 {
        padding-left: 7px!important
    }

    .sm-pdleft-8 {
        padding-left: 8px!important
    }

    .sm-pdleft-9 {
        padding-left: 9px!important
    }

    .sm-pdleft-10 {
        padding-left: 10px!important
    }

    .sm-pdleft-11 {
        padding-left: 11px!important
    }

    .sm-pdleft-12 {
        padding-left: 12px!important
    }

    .sm-pdleft-13 {
        padding-left: 13px!important
    }

    .sm-pdleft-14 {
        padding-left: 14px!important
    }

    .sm-pdleft-15 {
        padding-left: 15px!important
    }

    .sm-pdleft-16 {
        padding-left: 16px!important
    }

    .sm-pdleft-17 {
        padding-left: 17px!important
    }

    .sm-pdleft-18 {
        padding-left: 18px!important
    }

    .sm-pdleft-19 {
        padding-left: 19px!important
    }

    .sm-pdleft-20 {
        padding-left: 20px!important
    }

    .sm-pdright-1 {
        padding-right: 1px!important
    }

    .sm-pdright-2 {
        padding-right: 2px!important
    }

    .sm-pdright-3 {
        padding-right: 3px!important
    }

    .sm-pdright-4 {
        padding-right: 4px!important
    }

    .sm-pdright-5 {
        padding-right: 5px!important
    }

    .sm-pdright-6 {
        padding-right: 6px!important
    }

    .sm-pdright-7 {
        padding-right: 7px!important
    }

    .sm-pdright-8 {
        padding-right: 8px!important
    }

    .sm-pdright-9 {
        padding-right: 9px!important
    }

    .sm-pdright-10 {
        padding-right: 10px!important
    }

    .sm-pdright-11 {
        padding-right: 11px!important
    }

    .sm-pdright-12 {
        padding-right: 12px!important
    }

    .sm-pdright-13 {
        padding-right: 13px!important
    }

    .sm-pdright-14 {
        padding-right: 14px!important
    }

    .sm-pdright-15 {
        padding-right: 15px!important
    }

    .sm-pdright-16 {
        padding-right: 16px!important
    }

    .sm-pdright-17 {
        padding-right: 17px!important
    }

    .sm-pdright-18 {
        padding-right: 18px!important
    }

    .sm-pdright-19 {
        padding-right: 19px!important
    }

    .sm-pdright-20 {
        padding-right: 20px!important
    }

    .sm-pdbottom-1 {
        padding-bottom: 1px!important
    }

    .sm-pdbottom-2 {
        padding-bottom: 2px!important
    }

    .sm-pdbottom-3 {
        padding-bottom: 3px!important
    }

    .sm-pdbottom-4 {
        padding-bottom: 4px!important
    }

    .sm-pdbottom-5 {
        padding-bottom: 5px!important
    }

    .sm-pdbottom-6 {
        padding-bottom: 6px!important
    }

    .sm-pdbottom-7 {
        padding-bottom: 7px!important
    }

    .sm-pdbottom-8 {
        padding-bottom: 8px!important
    }

    .sm-pdbottom-9 {
        padding-bottom: 9px!important
    }

    .sm-pdbottom-10 {
        padding-bottom: 10px!important
    }

    .sm-pdbottom-11 {
        padding-bottom: 11px!important
    }

    .sm-pdbottom-12 {
        padding-bottom: 12px!important
    }

    .sm-pdbottom-13 {
        padding-bottom: 13px!important
    }

    .sm-pdbottom-14 {
        padding-bottom: 14px!important
    }

    .sm-pdbottom-15 {
        padding-bottom: 15px!important
    }

    .sm-pdbottom-16 {
        padding-bottom: 16px!important
    }

    .sm-pdbottom-17 {
        padding-bottom: 17px!important
    }

    .sm-pdbottom-18 {
        padding-bottom: 18px!important
    }

    .sm-pdbottom-19 {
        padding-bottom: 19px!important
    }

    .sm-pdbottom-20 {
        padding-bottom: 20px!important
    }
}

.dashboardbox{}

.dashboardbox .card {
    margin-bottom: 20px;
    width: 100%;
    filter: saturate(5);
    /* box-shadow: 5px 5px 0px rgb(0 0 0 / 27%); */
    border-radius: 10px;
    padding: 10px 25px 20px !important;
}

.dashboardbox .card h3 {
    font-size: 20px;
    color: black;
    margin-top: 0px;
    margin-bottom: 0;
    background: rgb(0 0 0 / 29%);
    width: 100%;
    padding: 10px;
    border-radius: 40px;
}

.dashboardbox .card i {
    display: none;
}

.dashboardbox .card h2 {
    font-size: 18px;
    color: rgb(0 0 0 / 74%);
    margin-bottom: 0;
    margin-top: 10px;
}

.bashboardheading{
    padding: 0px;
    border-bottom: 1px dashed #c8c8c8;
    margin-bottom: 20px;
    padding-bottom: 15px;
    margin-top: 10px;
}

.bashboardheading h2 {
    font-size: 24px;
    border-radius: 0;
    margin-bottom: 0;
}
.graphbar{
    margin-bottom: 30px;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 15%);
    border-radius: 10px;
    background: white;
    padding: 10px;
}

.graphbar #container {
    height: 300px;
}

.graphbar #chart_div {
    border-radius: 16px;
}

.follow-up-noti{
    padding: 0px 8px !important;
}
.follow-up-noti .follow-text{}

.follow-up-noti .follow-text img {
    width: 48px;
    background: white !important;
    padding: 2px;
    border-radius: 5px;
    margin-top: 0px;
}
.follow-up-noti .btn {padding: 5px 5px !important;border-radius: 5px;font-size: 14px !important;margin-top: 4px;}
.follow-up-noti .btn-info{background: #171d20;color: #12d737;border: 1px solid #12d737!important;}
.follow-up-noti .btn-primary{background: #171d20;color: #f300ce;border: 1px solid #f300ce!important;}
.follow-up-noti .btn-danger{background: #171d20;color: #ff291a;border: 1px solid #ff291a!important;}
.follow-up-noti .btn-warning{background: #171d20;color: #FFEB3B;border: 1px solid #FFEB3B!important;}

.follow-up-noti .btn-info .badge{color: black;background: #12d737;font-size: 10px;top: -3px;}
.follow-up-noti .btn-primary .badge{color: black;background: #f300ce;font-size: 10px;top: -3px;}
.follow-up-noti .btn-danger .badge{color: black;background: #ff291a;font-size: 10px;top: -3px;}
.follow-up-noti .btn-warning .badge{color: black;background: #FFEB3B;font-size: 10px;top: -4px;}

.follow-up-noti .badge {
    top: -7px !important;
    position: absolute;
    margin-left: -4px;
}

.follow-up-noti .btn-primary:hover> .badge{color: #ffffff;background: #031f06;}
.follow-up-noti .btn-info:hover> .badge{color: #ffffff;background: #031f06;}
.follow-up-noti .btn-danger:hover> .badge{color: #ffffff;background: #031f06;}
.follow-up-noti .btn-warning:hover> .badge{color: #ffffff;background: #031f06;}

.follow-up-noti .btn-info:hover {background-color: #12d737 !IMPORTANT;color: white;}
.follow-up-noti .btn-primary:hover {background-color: #f300ce!IMPORTANT;color: white;}
.follow-up-noti .btn-danger:hover {background-color: #ff291a !IMPORTANT;color: white;}
.follow-up-noti .btn-warning:hover {background-color: #FFEB3B !IMPORTANT;color: #000;}


.follow-up-noti .btn-info:hover >.tooltiptext {background-color: #12d737 !IMPORTANT;color: white;}
.follow-up-noti .btn-primary:hover >.tooltiptext {background-color: #f300ce!IMPORTANT;color: white;}
.follow-up-noti .btn-danger:hover >.tooltiptext {background-color: #ff291a !IMPORTANT;color: white;}
.follow-up-noti .btn-warning:hover >.tooltiptext {background-color: #FFEB3B !IMPORTANT;color: #000;}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #fff;
    width: 8px
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #F5F5F5
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    width: 8px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background: #222020;
    background: -moz-radial-gradient(circle,#222020 0%,#170e0d 100%);
    background: -webkit-radial-gradient(circle,#222020 0%,#170e0d 100%);
    background: radial-gradient(circle,#222020 0%,#170e0d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3f5efb",endColorstr="#fc466b",GradientType=1)
}

.remember {
    margin-top: 25px;
}
.remember label:nth-child(1){
    color: white;
    float: left;
}
.remember label:nth-child(2){
    float: right;
}
.headerlogo{
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

.headerlogo img {
    width: 180px;
    margin-bottom: 14px;
}

.headerlogo p {
    font-size: 20px;
    padding-bottom: 0px;
    color: white;
    border-bottom: 1px dashed #ffffff24;
    padding-top: 5px;
    padding-bottom: 22px;
}

.tooltipp {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltipp .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  font-weight: 600;
  padding: 6px 10px;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  /* margin-left: -60px; */
  margin-top: 12px;
  z-index: 9;
}

.tooltipp .tooltiptext .badge {
    position: relative;
    top: 0px !important;
    font-size: 15px !important;
}

.tooltipp:hover .tooltiptext {
  visibility: visible;
}