/*-----------------------------------------

    Table of Contents:

    General Layout Style
    Page Title and Breadcrumb    
    Typography
    Page Loading Progress Bar (PACE)
    Page Top Bar
    Sidebar Main Menu 
    Sidebar User Profile
    Sidebar Fixed Bottom Graphs
    Section or Content Box
    Sortable / Drag n Drop panels(section boxes)
    FORM ELEMENTS
    BUTTONS
    ICHECK (Checkboxes and Radios)
    jQery UI Settings
    Modals
    Alert Notifications
    Dropdown menu
    Progress Bars
    General Animation Settings
    Tooltips
    Popovers
    Nestable list
    Accordions
    Tabs
    UI Grid
    UI Calendar
    Timeline Centered Style
    Timeline Left Aligned Style
    Image Cropper
    Pricing Tables 
    Tocify
    FAQ
    Portfolio gallery
    jVector Maps
    Tables
    Data Tables
    Form Editors
    DropZone File Uploader (Drag n Drop)
    UI Icons
    Team Members
    Login and Registration Page - Transparent Background Style
    Display Code Wrappers
    List Group
    Breadcrumbs
    Pagination
    Labels
    Badges
    Flot Charts
    Easy PIE Charts
    Sparkline Charts
    Page Layout - Sidebar, Chat API toggle interactions
    COLLAPSED MENU
    CHAT API
    CHAT API Windows
    Mailbox
    Rickshaw Graph Charts
    Dashboard
    Notification Widget (Dashboard)
    Error pages 404, 505
    UI Sliders
    Typeahead Suggestions
    UI Lockscreen
    Form Validations
    Form Wizard
    Carousel
    Visibility Animation in Elements (Viewport)
    Widget - Tile Counter
    Widget - Tile Progress widget 
    Navigation Bars
    Search page
    Blogs
    Invoice
    Logo
    Profile Page
    Widget - Sparkline Graphs
    Widget - Vector Map
    Widget - Weather
    Widget - User Profile Tile
    Form Spinners
    UI Dropdowns
    Mobile Menu Settings - Since 3.1
    ------------------------------------------

    /*----------------------------------------
    General Layout Style
    ------------------------------------------*/
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:100,400,300,500,600,700);
    @import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700);

    html {
        font-size: 100%;
        height: 100%;
        background-color: #eeeeee;
    }

    html.boxed{
        background: #E0E0E0;
    }

    body {
        background-color: #f7f7f7;
        color: rgba(118, 118, 118, 1.0);
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-size: 14px;
        padding: 0px !important;
        margin: 0px !important;
        line-height: 23px;
        font-style: normal;
        font-weight: normal;
        min-height: 100%;
        float: left;
        position: relative;
        width: 100%;
    }
    body.boxed {
        margin: 0 5% !important;
        max-width: 90%;
        width: 90%;
        min-height: 100%;
        box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
        -o-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
        -ms-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
        -moz-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
        -webkit-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
    }
    body.boxed .page-topbar {
        max-width: 90%;
        width: 90%;
        margin-left: 5% !important;
    }
    /*body *{  vertical-align: top; }*/

    .paddingLeft0 {
        padding-left: 0px;
    }
    .paddingRight0 {
        padding-right: 0px;
    }
    .bottom5 {
        margin-bottom: 5px;
    }
    .bottom10 {
        margin-bottom: 10px;
    }
    .bottom15 {
        margin-bottom: 15px;
    }
    .bottom30 {
        margin-bottom: 30px;
    }
    .bottom45 {
        margin-bottom: 45px;
    }
    .top15 {
        margin-top: 15px;
    }
    .right15 {
        margin-right: 15px;
    }
    .left15 {
        margin-left: 15px;
    }

    .padding-15{
        padding: 15px;
    }

    .padding-30{
        padding: 30px;
    }
    .marginBottom30{
        margin-bottom: 30px;
    }
    section.box.marginBottom0,
    .marginBottom0{
        margin-bottom: 0px;
    }

    .page-container.container-fluid{
        padding: 0px;
    }

    .spacer20{
        height: 20px;
        width: 100%;
        display: block;
        clear:both;
    }
    .spacer10{
        height: 10px;
        width: 100%;
        display: block;
        clear:both;
    }


    /*----------------------------------------
        Page Title and Breadcrumb  
    ------------------------------------------*/

    .page-title h1 {
        font-size: 22px;
        font-weight: 500;
        padding: 5px 0;
        line-height: 1;
        text-transform: capitalize;
        font-family: Roboto, Helvetica, Arial, sans-serif;
        color: rgba(118, 118, 118, 1.0);
        margin-bottom: 10px;
    }
    .page-title .breadcrumb {
        padding: 0px;
        margin: 15px 0;
    }
    .page-title {
        display: inline-block;
        width: 100%;
        background: #fff;
        margin-top: 10px;
        padding: 8px 25px;
        border-radius: 35px;
        border: 1px solid #eee;
        margin-bottom: 15px
    }
    /*---------------------------------
        Typography
    -----------------------------------*/

    h1, h2, h3, h4, h5, h6 {
        margin: 10px 0;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-weight: 400;
        color: #505458;
    }
    h2.h1{font-size: 36px}
    h2.h1 small{font-size: 24px}
    .light {
        font-weight: 100;
    }
    .boldy {
        font-weight: 600 !important;
    }
    .normal{
        font-style: normal;
    }
    .f-s-10{
        font-size: 10px !important
    }
    .f-s-14{
        font-size: 14px !important
    }
    .f-s-20{
        font-size: 20px !important
    }
    .semi-bold {
        font-weight: 400;
    }
    img{
        width: 100%
    }
    blockquote, .blockquote-reverse, blockquote.pull-right {
        font-size: 16px;
        border-color: #4d9cf8;
    }
    blockquote.pull-right {
        width: 100%;
    }
    blockquote.purple {
        border-color: #673AB7;
    }
    blockquote.accent {
        border-color: #E91E63;
    }
    blockquote.background {
        background: #f5f5f5;
    }
    .well {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        background: #f5f5f5;
        border-color: #eaeaea;
    }
    .well.primary, .well.primary * {
        background-color: #4d9cf8;
        color: #ffffff;
        border-color: #4d9cf8;
    }
    .well.transparent {
        background-color: transparent;
    }
    a {
        color: #4d9cf8;
    }
    a:hover, a:focus {
        color: #333333;
        text-decoration: none !important;
    }

    .text-dark {
        color: #333333;
    }
    .text-muted {
        color: #999999;
    }
    .text-primary {
        color: #4d9cf8;
    }
    .text-info {
        color: #03A9F4;
    }
    .text-warning {
        color: #FFC107;
    }
    .text-danger {
        color: #f44336;
    }
    .text-success {
        color: #4CAF50;
    }
    .text-purple {
        color: #673AB7;
    }
    .text-accent {
        color: #E91E63;
    }
    .text-light {
        color: #f5f5f5;
    }
    .bg-muted {
        background: #eaeaea;
        padding: 3px 8px;
    }
    .bg-primary {
        background: #4d9cf8;
        padding: 3px 8px;
        color: #ffffff;
    }
    .bg-info {
        background: #03A9F4;
        padding: 3px 8px;
        color: #ffffff;
    }
    .bg-warning {
        background: #FFC107;
        padding: 3px 8px;
        color: #ffffff;
    }
    .bg-danger {
        background: #f44336;
        padding: 3px 8px;
        color: #ffffff;
    }
    .bg-success {
        background: #4CAF50;
        padding: 3px 8px;
        color: #ffffff;
    }
    .bg-purple {
        background: #673AB7;
        padding: 3px 8px;
        color: #ffffff;
    }
    .bg-accent {
        background-image: -webkit-linear-gradient(to right, #e8962e, #e45131) !important;
        background-image: -webkit-gradient(linear, left top, left bottom, from(to right), color-stop(#e8962e), to(#e45131)) !important;
        background-image: linear-gradient(to right bottom, #e8962e, #e45131) !important;
        padding: 3px 8px;
        color: #ffffff;
    }
    .bg-secondary {
        background: #9e9e9e;
        padding: 3px 8px;
        color: #555555;
    }
    .bg-white {
        background: #ffffff !important;
        padding: 3px 8px;
        color: #777777;
    }
    /*-------------------------------
    Page Loading Progress Bar (PACE)
    -----------------------------------*/

    .pace .pace-progress {
        background: #4d9cf8;
        height: 3px;
    }
    .pace .pace-activity {
        top: 15px;
        right: 15px;
        width: 17px;
        height: 17px;
        border: solid 3px transparent;
        border-top-color: #4d9cf8;
        border-left-color: #4d9cf8;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    .row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    }
    /*----------------------------------------
    Page Top Bar
    ------------------------------------------*/

    .page-topbar {
        min-height: 60px;
        position: fixed;
        width: 100%;
        background-image: linear-gradient(-12deg,#2a57d7 0,#9eeeff 100%) !important;
        top: 0px;
        left: 0px;
        z-index: 1999;
        box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -webkit-box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -moz-box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -o-box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -ms-box-shadow: 0 2px 4px rgba(33,33,33,.2);
        max-height: 60px;
    }
    .page-topbar .logo-area {
        width: 260px;
        display: block;
        min-height: 60px;
        float: left;
    }
    .page-topbar .quick-area .info-menu {
        height: 60px;
        margin: 0;
        line-height: 60px;
        padding: 0 15px;
    }
    .page-topbar .quick-area .info-menu li {
        position: relative;
    }
    .page-topbar .quick-area .info-menu li a.toggle, .page-topbar .quick-area .info-menu li a.toggle_chat, .page-topbar .quick-area .info-menu li a.sidebar_toggle {
        width: 30px;
        display: inline-block;
        text-align: center;
        font-size: 14px;
        color: #ffffff;
        position: relative;
    }
    .page-topbar .quick-area .info-menu li a.toggle .badge, .page-topbar .quick-area .info-menu li a.toggle_chat .badge, .page-topbar .quick-area .info-menu li a.sidebar_toggle .badge {
        position: absolute;
        font-size: 10px;
        padding: 4px;
        margin: 10px 0 0 -5px;
        width: 18px;
        height: 18px;
    }
    .page-topbar .quick-area .info-menu li a.toggle_chat i {
        font-size: 18px;
    }
    .page-topbar .quick-area .info-menu li.profile a {
        width: auto;
        text-decoration: none;
    }
    .page-topbar .quick-area .info-menu li.profile img {
        height: 30px;
        width: 30px;
        top: 0px;
        right: 10px;
        position: relative;
        background-color: #999999;
    }
    .page-topbar i {
        font-size: 14px;
    }
    .topnav-item{
        padding: 0 15px !important
    }
    .topnav-item.active {
        background: rgba(255, 255, 255, 0.13);
        padding: 0 15px
    }
    .page-topbar .message-toggle-wrapper,
    .page-topbar .notify-toggle-wrapper,
    .page-topbar .searchform,
    .page-topbar li.profile{
        opacity: 0;
    }

    .page-topbar .message-toggle-wrapper.showopacity,
    .page-topbar .notify-toggle-wrapper.showopacity,
    .page-topbar .searchform.showopacity,
    .page-topbar li.profile.showopacity{
        opacity: 1 !important;
    }


    /*------- Drop Down ----------*/
    .page-topbar .quick-area .info-menu li.spec .dropdown-menu{
        width: 360px;
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        line-height: 23px;
        font-size: 14px;
        padding-bottom: 0px;
        border: 0px solid transparent;
        box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -webkit-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -moz-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -o-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -ms-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        margin-top: -1px;
        left: -200px;
        padding-top: 0px;
    }
    .page-topbar .quick-area .info-menu li.spec .dropdown-menu:after, 
    .page-topbar .quick-area .info-menu li.spec .dropdown-menu:before {
        bottom: 100%;
        right: 130px;
        left: auto;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(194, 225, 245, 0);
        border-bottom-color: #fff;
        border-width: 10px;
        margin-left: -10px;
    }

    .page-topbar .quick-area .info-menu li .dropdown-menu {
        width: 360px;
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        line-height: 23px;
        font-size: 14px;
        left: -30px;
        padding-bottom: 0px;
        border: 0px solid transparent;
        box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -webkit-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -moz-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -o-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -ms-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        margin-top: -1px;
        padding-top: 0px;
    }
    /*---- top arrow - start ----- */

    .page-topbar .dropdown-menu {
        background: #ffffff;
        border: 1px solid #f5f5f5;
    }
    .page-topbar .dropdown-menu:after, .page-topbar .dropdown-menu:before {
        bottom: 100%;
        left: 40px;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    .page-topbar .dropdown-menu:after {
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #ffffff;
        border-width: 9px;
        margin-left: -9px;
    }
    .page-topbar .dropdown-menu:before {
        border-color: rgba(194, 225, 245, 0);
        border-bottom-color: rgba(80, 80, 80, .1);
        border-width: 10px;
        margin-left: -10px;
    }
    /*---- dropdown list ----- */

    .page-topbar li .dropdown-menu li.list {
        padding: 0 30px;
        overflow: hidden;
        max-height: 300px;
        height: 300px;
    }
    .page-topbar li .dropdown-menu li li {
        width: 100%;
        display: block;
        position: relative;
        padding: 15px 0 15px 0;
        border-bottom: 1px solid #eaeaea;
    }
    .page-topbar li .dropdown-menu li li:last-child {
        border-bottom: 0px;
    }
    .page-topbar li .dropdown-menu li a {
        text-decoration: none;
        color: #717171;
    }
    .page-topbar li .dropdown-menu li .name, .page-topbar li .dropdown-menu li .desc {
        display: block;
        position: relative;
    }
    .page-topbar li .dropdown-menu li .user-img img {
        width: 25px;
        height: 25px;
        float: left;
        margin: 5px 15px 0 0;
        opacity: 0.8;
    }
    .page-topbar li .dropdown-menu li .profile-status {
        height: 6px;
        width: 6px;
        border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        display: inline-block;
        position: absolute;
        bottom: 0px;
        right: 0px;
    }
    .page-topbar li .dropdown-menu li .name {
        color: #aaaaaa;
    }
    .page-topbar li .dropdown-menu li .name .time {
        color: #cccccc;
    }
    .page-topbar li .dropdown-menu li .desc {
        color: #999999;
    }
    .page-topbar li .dropdown-menu li.unread .user-img img {
        opacity: 1;
        margin-bottom: 20px;
    }
    .page-topbar li .dropdown-menu li.unread .name {
        color: #717171;
    }
    .page-topbar li .dropdown-menu li.unread .name .time {
        color: #aaaaaa;
    }
    .page-topbar li .dropdown-menu li.unread .desc {
        color: #777777;
    }
    .page-topbar li .dropdown-menu li.external a:hover, .page-topbar li .dropdown-menu li.external {
        height: auto;
        background: #eeeeee;
    }
    .page-topbar li .dropdown-menu li.external a {
        display: block;
        padding: 15px 30px;
        color: #999999;
        font-size: 13px;
    }
    /* ---- notifications page top bar ----- */

    .page-topbar li .dropdown-menu.notifications li .name .time {
        display: block;
        position: relative;
    }
    .page-topbar li .notifications .notice-icon i {
        border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        height: 30px;
        width: 30px;
        line-height: 30px;
        float: left;
        display: inline-block;
        text-align: center;
        margin-right: 15px;
        color: #ffffff;
        margin-top: 5px;
    }
    .page-topbar li .notifications .total {
        padding: 0px 30px 0px 30px;
    }
    .page-topbar li .notifications .total span {
        padding: 10px 0px 10px 0px;
        border-bottom: 1px solid #eaeaea;
        display: block;
    }
    .page-topbar li .notifications .available .notice-icon i {
        background-color: #4CAF50;
    }
    .page-topbar li .notifications .busy .notice-icon i {
        background-color: rgba(240,80,80,1);
    }
    .page-topbar li .notifications .away .notice-icon i {
        background-color: rgba(255,193,7,1);
    }
    .page-topbar li .notifications .idle .notice-icon i {
        background-color: rgba(250,133,100,1);
    }
    .page-topbar li .notifications .offline .notice-icon i {
        background-color: rgba(169,169,169,1);
    }



    /*---- profile drop down -----*/

    .page-topbar li .dropdown-menu.profile {
        max-width: 180px;
        height: auto;
        padding: 0px;
    }
    .page-topbar li .dropdown-menu.profile li {
        line-height: 40px;
        display: block;
        height: 40px;
        margin: 0px;
    }
    .page-topbar li .dropdown-menu.profile li i {
        margin-right: 10px;
        line-height: 36px;
        height: 36px;
        width: auto;
        text-align: center;
    }
    .page-topbar li .dropdown-menu.profile li a {
        display: block;
        border-bottom: 1px solid #eeeeee;
    }
    .page-topbar li .dropdown-menu.profile li.last a, .page-topbar li .dropdown-menu.profile li a:hover {
        background: #eeeeee;
    }

    @media (max-width: 450px) {
    .profile .toggle span{display: none;}
    .page-topbar .quick-area .info-menu li.profile img{right:0px;}
    .page-topbar .quick-area .info-menu li.profile .dropdown-menu{right:auto;left:-122px;}
    .page-topbar .profile .dropdown-menu:after, .page-topbar .profile .dropdown-menu:before{right:22px;left:auto;}
    /*.page-topbar .quick-area .info-menu li.sidebar-toggle-wrap{display: none;}*/
    /*.page-topbar .quick-area .chat-toggle-wrapper{display: none;}*/
    /*.page-topbar .quick-area .info-menu li .dropdown-menu{width:290px;}*/
    }

    @media (max-width: 680px) {
    .profile .toggle span{display: none;}
    .page-topbar .quick-area .info-menu li.profile img{right:0px;}
    .page-topbar .quick-area .pull-left ul.info-menu{padding-right: 0px;}
    .page-topbar .quick-area .pull-right ul.info-menu{padding-left: 0px;}
    }


    @media (max-width: 245px) {
    .page-topbar .quick-area .pull-left{display: none;}
    }


    /*--- Search Form ----*/

    .page-topbar li.searchform {
        height: 34px;
    } 
    .page-topbar li.searchform .input-group {
        top: 6px;
        width: 30px;
        text-align: center;
        cursor: pointer;
        border-bottom: 2px solid transparent;
    }
    .page-topbar li.searchform .input-group-addon {
        border: none;
        margin-left: 30px;
        background: transparent;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        color: #ffffff;
        min-width: 10px;
        padding: 0px;
        border-bottom: 5px solid transparent;
    }
    .page-topbar li.searchform.focus .input-group-addon{
        border-bottom: 0px solid transparent;
    }
    .page-topbar li.searchform .form-control {
        border: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        background: transparent;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        display: inline-block;
        width: 0px;
        color: #ffffff;
    }
    .page-topbar li.searchform.focus .form-control {
        display: inline-block;
        width: 100%;
    }
    .page-topbar li.searchform.focus .input-group {
        width: 260px;
        top: 3px;
        border-bottom: 2px solid transparent;
        height: 34px;
    }
    .page-topbar li.searchform.focus .input-group {
        background: rgba(255, 255, 255, 0.43);
        border-bottom: 2px solid rgba(255,255,255,0.6);
        padding: 0px 15px;
        border-radius: 20px;
        height: 34px;
    }
    .page-topbar li.searchform input[type="submit"] {
        display: none;
    }

    .page-topbar li.searchform form{
        display: inline-block;
        height: 34px;
        top: 8px;
        position: relative;
    }
    @media (max-width: 1050px){
        .topnav-item.item1{
            display: none;
        }
    }
    @media (max-width: 850px){
        .topnav-item.item3{
            display: none;
        }
    }
    @media (max-width: 767px){
        .topnav-item.item2{
            display: none;
        }
    }
    /*----------------------------------------
    Sidebar Main Menu
    ------------------------------------------*/

    .page-sidebar {
        height: auto;
        width: 260px;
        position: fixed;
        padding: 0px;
        background-color: #053479;
        margin-top: 60px;
        overflow: hidden;
        box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
        -webkit-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
        -moz-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
        -o-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
        -ms-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
        min-height: 100%;
        height: auto;
    }

    .page-sidebar.fixedscroll {
        position: fixed;
    }

    .page-sidebar.pagescroll {
        position: absolute;
    }

    .fixedscroll #main-menu-wrapper{
        padding-top: 0px;
        overflow: hidden;
        position: relative;
    }
    #main-menu-wrapper {
        visibility: visible;
    }
    .fixedscroll{
        visibility: hidden;
    }
    #main-menu-wrapper ul {
        padding: 0px;
        margin: 0px;
        padding-left: 0px;
        list-style-type: none;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 400;
        font-size: 14px;
    }
    #main-menu-wrapper ul.wraplist {
        padding-bottom: 0px;
        padding-top: 0px;
        max-height:600px;
        overflow-y: scroll;
    }
    #main-menu-wrapper li ul.sub-menu {
        padding-left: 0px;
    }
    #main-menu-wrapper li ul.sub-menu ul.sub-menu {
        padding-left: 20px;
    }
    #main-menu-wrapper li ul.sub-menu {
        display: none;
        list-style-type: none;
        font-size: 14px;
        width: 100%;
    }
    #main-menu-wrapper li a {
        display: block;
        line-height: 42px;
        min-height: 42px;
        height: auto;
        color: #f1f1f1;
        color: #fff !important;
        text-decoration: none;
        padding-left: 5px;
        clear: both;
        border-left: 4px solid transparent;
        white-space: nowrap;
    }
    #main-menu-wrapper li .sub-menu a {
        line-height: 36px;
        min-height: 36px;
    }
    #main-menu-wrapper li .sub-menu a {
        color: rgba(174, 178, 183, 1.0);
        margin-bottom: 1px;
        padding-left: 55px;
        border-left: 4px solid transparent;
    }
    #main-menu-wrapper li.open .sub-menu a.active, #main-menu-wrapper li.open .sub-menu a:hover, #main-menu-wrapper li .sub-menu a:hover {
        background-color: rgba(33, 33, 33, 0.1);
        border-left: 4px solid #4d9cf8;
    }

    #main-menu-wrapper li.open .sub-menu a{
        border-left: 4px solid transparent;
    }

    #main-menu-wrapper li a:hover {
        background-color: rgba(33, 33, 33, 0.1);
        border-left: 4px solid #4d9cf8;
        /*color: #ffffff;*/
    }
    #main-menu-wrapper li.open a {
        border-left: 4px solid #4d9cf8;
        margin: 0;
        width: 100%;
    }


    .page-sidebar-wrapper.crypto li.open>a {
        background: #dae9f6;
    }
    .page-sidebar-wrapper.crypto li{
        width: 90%;
        margin: 5px auto;
    }
    .page-sidebar-wrapper.crypto li a:hover{
        background: aliceblue !important
    }
    .page-sidebar-wrapper.crypto li.open .sub-menu a:hover{
        border-left-color: transparent !important
    }
    #main-menu-wrapper li a:hover .arrow:before, #main-menu-wrapper li.open a .arrow:before {
        color: #757575;
    }
    #main-menu-wrapper li .sub-menu a:hover .arrow:before, #main-menu-wrapper li.open .sub-menu a .arrow:before {
        color: rgba(194, 198, 203, 0.65);
    }
    #main-menu-wrapper li.open .sub-menu a {
        background-color: transparent;
        color: #616161;
    }
    #main-menu-wrapper li a i {
        display: inline-block;
        width: 45px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        top: 0px;
        position: relative;
    }
    #main-menu-wrapper li a .arrow:before {
        float: right;
        margin-top: 1px;
        margin-right: 20px;
        display: inline;
        font-size: 16px;
        font-family: FontAwesome;
        height: auto;
        content: "\f104";
        font-weight: 300;
        text-shadow: none;
        color: #757575;
    }
    #main-menu-wrapper li.open a .arrow.open:before {
        content: "\f107";
    }
    #main-menu-wrapper li a .arrow {
        float: right;
        position: absolute;
        right: 0px;
    }
    #main-menu-wrapper .fa {
        font-size: 14px;
    }

    #main-menu-wrapper li .label{
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-size: 10px;
        padding: 3px 7px;
        float: right;
        margin: 15px 15px 0 0;
        position: absolute;
        right: 30px;
    }

    #main-menu-wrapper li .label.nosubmenu{
        right: 25px;
        margin-top: 13px;
    }


    .page-sidebar.chat_shift #main-menu-wrapper li .label,
    .page-sidebar.collapseit #main-menu-wrapper li .label{
        display: none;
    }

    .page-sidebar.chat_shift #main-menu-wrapper li:hover .label,
    .page-sidebar.collapseit #main-menu-wrapper li:hover .label{
        display: inline-block;
        margin-top: 13px;
        right: 0px;
    }

    #main-menu-wrapper .menusection{
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 400;
        font-size: 13px;
        line-height: 40px;
        padding-left: 24px;
        margin: 10px 0 0px 0;
        color: #9e9e9e;
        text-transform: uppercase;
    }

    .page-sidebar.chat_shift #main-menu-wrapper .menusection, 
    .page-sidebar.collapseit #main-menu-wrapper .menusection{
        color: transparent;
        height: 1px;
        background: rgba(33,33,33,0.1);
        width: 44px;
        overflow: hidden;
        margin: 10px 8px 10px 8px;
    }

    .page-sidebar.chat_shift #main-menu-wrapper .menusection:first-child, 
    .page-sidebar.collapseit #main-menu-wrapper .menusection:first-child{
        background-color: transparent;
    }

    .page-sidebar .menustats{
        padding: 15px 15px 15px 20px;
    }

    .page-sidebar .menustats h5{
        font-size: 13px;
    }

    .page-sidebar .menustats .progress{
        height: 5px;
        background-color: #eeeeee;
        margin-bottom: 25px;
    }

    .page-sidebar.chat_shift .menustats, 
    .page-sidebar.collapseit .menustats{
        content: " ";
        height: 50px;
        overflow: hidden;
        color: transparent;
        opacity: 0;
    }


    /*----------------------------------------
    Sidebar User Profile
    ------------------------------------------*/

    .page-sidebar .profile-info {
        background: transparent;
        padding-top: 15px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 15px;
    }
    .page-sidebar .profile-image {
        padding-right: 5px;
        display: inline-block;
    }
    .profile-info .profile-image img {
        height: 65px;
        width: 65px;
        float: right;
        top: 5px;
        left: 5px;
        position: relative;
        background-color: #777777;
    }
    .profile-info .profile-details{
        white-space: nowrap;
    }
    .profile-info .profile-details h3 {
        margin: 10px 0 5px 0;
    }
    .profile-info .profile-details h3 a {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 400;
        color: #757575;
        font-size: 19px;
        line-height: 23px;
        text-decoration: none;
    }
    .profile-info .profile-details .profile-title {
        color: rgba(174, 178, 183, 1.0);
        font-size: 13px;
    }
    .profile-info .profile-details .profile-status {
        height: 8px;
        width: 8px;
        border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        display: inline-block;
    }
    .profile-status.available, .uprofile-status.available {
        background-color: #4CAF50;
    }
    .profile-status.busy, .uprofile-status.busy {
        background-color: #f44336;
    }
    .profile-status.idle, .uprofile-status.idle {
        background-color: #E91E63;
    }
    .profile-status.away, .uprofile-status.away {
        background-color: #FFC107;
    }
    .profile-status.offline, .uprofile-status.offline {
        background-color: #9e9e9e;
    }
    /*----------------------------------------
    Sidebar Fixed Bottom Graphs
    ------------------------------------------*/

    .page-sidebar .project-info {
        position: relative;
        bottom: 0px;
        height: 40px;
        background-color: rgba(70, 70, 78, 1.0);
        width: 100%;
        display: block;
        overflow: hidden;
    }
    .page-sidebar .project-info .block1 {
        display: inline-block;
        height: 40px;
        padding: 8px 0 5px 30px;
    }
    .page-sidebar .project-info .block2 {
        display: inline-block;
        height: 40px;
        padding: 8px 0 5px 15px;
    }
    .page-sidebar .project-info .graph {
        float: left;
        width: 55px;
        padding: 5px 5px 5px 5px;
    }
    .page-sidebar .project-info .data {
        float: left;
        font-size: 10px;
        color: #aaaaaa;
        width: auto;
        white-space: nowrap;
        display: inline-block;
        padding-right: 5px;
    }
    .page-sidebar .project-info .data .title {
        display: block;
        line-height: 15px;
    }
    .page-sidebar .project-info .data .total {
        color: #dddddd;
        line-height: 12px;
        display: block;
        font-size: 11px;
    }
    /*---------------------------------
    Section or Content Box
    ----------------------------------*/

    section.box {
        background-color: #ffffff;
        margin: 15px 0;
        display: inline-block;
        width: 100%;
        overflow: hidden;
        -webkit-box-shadow: 0 2px 28px rgba(0,0,0,.1);
        box-shadow: 0 2px 28px rgba(0,0,0,.1);
    }
    section header {
        width: 100%;
        display: inline-block;
        border: 1px solid rgba(0,0,0,0.09);
        border-bottom: 0px solid transparent;
        vertical-align: top;
        position: relative;
        min-height: 75px;
    }
    section header .title {
        margin-top: 10px;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 18px;
        padding-left: 20px;
        padding-top: 15px;
        line-height: 30px;
        color: #676767;
        font-weight: 400;
        display: inline-block;
    }
    section .content-body {
        padding: 5px 20px 30px 20px;
        border: 1px solid #e8e8e8;
        border-top: 0px;
        -webkit-transition: 800ms;
        -moz-transition: 800ms;
        -o-transition: 800ms;
        transition: 800ms;
    }
    section .content-body.p{
        padding: 0px 15px 0
    }
    section.box.nobox {
        background-color: transparent;
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -o-box-shadow: none;
        -ms-box-shadow: none;
    }
    @media (max-width: 1200px){
        section.box.nobox{
            overflow: visible;
        }
        section.box.nohidden{
            overflow: visible;
        }
    }
    section.nobox header {
        background-color: transparent;
        border: 1px solid transparent;
        border-bottom: 0px solid transparent;
    }
    section.nobox header .title {
        padding-left: 0px;
    }
    section.nobox .content-body {
        background-color: transparent;
        border: 0px solid transparent;
        padding: 0 0px 0px 0px;
    }
    section.box .actions {
        margin: 10px 15px 0 15px;
        line-height: 50px;
        position: absolute;
        right: 0px;
        top:0px;
    }
    section.box .actions a {
        color: #bcbcbc;
        font-size: 12px;
        margin-left: 0px;
        padding: 5px;
        cursor: hand;
        cursor: pointer;
        text-decoration: none;
    }
    section.box .actions a:hover {
        color: #999999;
        text-decoration: none;
    }
    section .content-body.collapsed {
        /*display: none;*/
        /*  height: 0px !important;
    overflow: hidden;
    max-height: 0px !important;
    padding: 0px 30px !important;*/
    }
    .doctors-head{
        position: relative;
        margin-bottom: 15px
    }
    .doctors-head .header{
        font-size: 19px;
        margin-bottom: 5px;
        margin-top: 0
    }
    .doctors-head .desc{
        margin-bottom: 0
    }
    .doctors-list{
        padding: 30px 20px;
        width: 100%
    }
    .doctors-list.patient{
        padding: 0
    }
    .doctors-list.patient .doctors-head{
        background: url(../../data/hos-dash/hos-header.jpg) no-repeat center;
        background-size: cover;
        padding: 30px 20px 60px;
        position: relative;
    }
    .doctors-list.patient .doctors-head:before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(77, 156, 248, .9);
    }
    .patients-info{
        padding: 15px;
        overflow: hidden;
        width: 100%;
        margin-top: -60px;
    }
    .patient-card{
        text-align: center;
        background: #fff;
        margin-bottom: 20px
    }
    .doctors-list:before{
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 40%;
        background: #4d9cf8
    }
    .doctors-list.v2:before{
        height: 30%
    }
    .gradient-blue{
        background-image: linear-gradient(-12deg,#2a57d7 0,#9eeeff 100%) !important
    }
    .gradient-blue1 {
        background-image: linear-gradient(120deg,#eaecef, #053479) !important;
    }
    .gradient-pink{
        background-image: linear-gradient(-12deg,#F88691 0, #FCD3BB 100%) !important
    }
    .gradient-orange {
        background-image: linear-gradient(to right bottom, #e8962e, #e45131) !important;
    }
    .gradient-green {
        background-image: linear-gradient(126deg,#7bead0 0,#4BC39D 100%) !important;
    }
    .gradient-violet {
        background-image: linear-gradient(126deg,#b960e0 0,#a890f5 100%) !important;
    }
    .gradient-grep {
        background-image: linear-gradient(to right, #21d397 0%, #7450fe 100%) !important;
    }
    .doctor-card{
        margin-bottom: 10px
    }
    .doc-info-wrap{
        position: relative;
        padding: 10px;
        background: #fff;
    }
    .doc-info-wrap h4{font-size: 16px}
    .patient-img{
        max-width: 120px;
        margin: 0 auto;
        margin-bottom: 25px;
        position: relative;
        border-radius: 50%;
        border: 2px solid #fff;
    }
    .modal{
        top: 100px !important
    }
    .doc-img{
        max-width: 220px;
        margin-bottom: 25px;
        position: relative;
    }
    .rad-50{
        border-radius: 50% !important
    }
    .patient-img .stutas{
        width: 20px;
        height: 20px;
        background: green;
        position: absolute;
        bottom: 15px;
        right: -3px;
        border-radius: 50%;
        border: 2px solid #fff;
    }
    .patient-img .stutas.away{
        background: #b4adad
    }
    .patient-img .stutas.recent{
        background: #e98a2a
    }
    .review-icon{
        background: #fff;
        border-radius: 10px;
        padding: 13px;
        overflow: hidden;
        top: 50%;
        text-align: center;
        transform: translateY(-50%);
        position: absolute;
    }
    .review-icon img{max-width: 55px}
    .review-icon i{
        font-size: 48px
    }
    .transparent{
        background: transparent !important
    }
    .doctor-img{
        max-width: 85px;
        border-radius: 10px;
        overflow: hidden;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
    }
    .doc-info{
        padding-left: 95px;
        position: relative;
    }

    .w-text{
        color: #fff !important
    }
    .bold{
        font-weight: 700 !important
    }
    .g-text {
        color: #fffcfc !important;
    }
    .g2-text {
        color: #f8f8f8 !important;
    }
    .relative{
        position: relative !important
    }
    .uppercase{
        text-transform: uppercase !important
    }
    .gradient-text {
        font-weight: bold;
        display: inline-block;
        background-image: linear-gradient(135deg, #846FF4 0%, #F17674 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
    }
    .gradient-text.blue {
        background-image: linear-gradient(35deg, #17EAD9 0%, #6078EA 100%);
    }
    .gradient-text.cyan {
        background-image: linear-gradient(135deg, cyan 0%, cyan 100%) !important;
    }
    .mb-0{
        margin-bottom: 0px !important
    }
    .mb-15{
        margin-bottom: 15px !important
    }
    .mb-30{
        margin-bottom: 30px !important
    }
    .align-items-center {
        -ms-flex-align: center!important;
        align-items: center!important;
    }

    .doc-rating i{
        color: #f2c134
    }
    .has-shadow{
        -webkit-box-shadow: 0 2px 28px rgba(0,0,0,.05);
        box-shadow: 0 2px 28px rgba(0,0,0,.09);
    }
    .has-shadow2{
        -webkit-box-shadow: 0 2px 28px rgba(0,0,0,.1) !important;
        box-shadow: 0 2px 28px rgba(0,0,0,.1) !important;
    }
    .no-shadow{
        box-shadow: none !important
    }
    .doc-rating span{
        margin-left: 15px;
        padding: 1px 9px;
        font-size: 12px;
        display: inline-block;
        border: 1px solid #2698e2;
        border-radius: 38px;
    }

    .reminder-wrapper{
        background: #b39cdb;
        padding: 15px;
        position: relative;
        display: flex
    }
    .reminder-icon{
        display: inline-block;
        max-width: 64px;
        margin-right: 10px
    }
    .patient-personal{
        display: flex;
        align-items: center;
    }
    .patient-personal h4{
        width: 47%;
        font-weight: 600;
        margin: 8px 0;
        font-size: 16px
    }
    .patient-personal.v2 h4{
        width: 60%;
        font-size: 16px
    }

    .pat-info-wrapper{
        display: flex;
        margin-bottom: 25px
    }
    .pat-info{
        position: relative;
        width: 55%
    }
    .pat-info h5{
        font-size: 15px;
        font-weight: 700;
        margin-top: 0;
    }
    .align-center{
        align-items: center;
    }
    .m-count{
        font-size: 55px;
        line-height: .6
    }
    .pat-val{
        width: 45%;
    }
    .p-text{
        color: #ab8ce4 !important
    }
    .red-text{
        color: #f02147 !important
    }
    .blue-text{
        color: #23c8e5 !important
    }
    .no-padding-right{
        padding-right: 0 !important
    }
    .no-padding-left{
        padding-left: 0 !important
    }
    .pl-7{
        padding-left: 7px
    }
    .pr-7{
        padding-right: 7px
    }
    .green-text{
        color: #33cb4d !important
    }
    .pat-val .value{
        position: relative;
        font-size: 24px;
        top: -10px;
        font-weight: 700;
    }
    .pat-val .value i{
        position: relative;
        top: -5px;
    }
    .pat-val .value i.message{
        box-shadow: 0 2px 28px rgba(48, 172, 58, 0.3);
    }
    .msg-sender{
        margin-bottom: 3px;
        margin-top: 0;
        font-weight: 600;
        font-size: 14px;
    }
    .pat-val span{
        position: absolute;
        font-size: 14px;
        font-weight: normal;
        color: #777;
        width: 100%;
        display: block;
    }

    .add-header-wrapper{
        position: relative;
        overflow: hidden;
        padding: 50px 30px 80px
    }
    .add-header-wrapper p{
        width: 80%;
        margin: 0 auto
    }
    .add-header-wrapper .before-text{
        position: absolute;
        font-size: 60px;
        font-weight: 700;
        color: #fff;
        opacity: .1;
        text-transform: uppercase;
        width: 100%;
        left: 50%;
        top: 50px;
        transform: translateX(-50%);

    }
    .bg-w{
        background: #fff !important;
        overflow: hidden;
    }
    .curved-section:before {
        content: '';
        position: absolute;
        width: 103%;
        height: 100%;
        left: -10px;
        right: 0px;
        bottom: -3px;
        background: url(https://medical-dash.netlify.app/data/hos-dash/curve.svg) no-repeat bottom;
        z-index: 0;
    }

    .db_box {
        background-color: #ffffff;
        box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -webkit-box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -moz-box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -o-box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -ms-box-shadow: 0 1px 3px rgba(33,33,33,.2);

    }

    a {
        text-decoration: none;
    }
    ul.project-activity li.activity-list {
        position: relative;
        border-left: 2px solid #d9d9d9;
    }
    ul.project-activity li.activity-list .detail-info {
        margin: 0 0 0 15px;
        padding-bottom: 12px;
        position: relative;
    }
    ul.project-activity li.activity-list .detail-info.v2{
        padding-bottom: 20px
    }
    ul.project-activity li.activity-list p.message {
        padding: 0;
        margin-top: -5px;
        margin-bottom: 0;
        font-weight: 600
    }
    ul.project-activity li.activity-list:after {
        background-color: #fff;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        border: 2px solid #f23f3f;
        height: 9px;
        left: 0;
        margin-left: -6px;
        position: absolute;
        width: 10px;
        content: " ";
        display: table;
        clear: both;
        bottom: auto;
        top: 7px;
    }
    .visit-doc p{font-size: 13px}
    ul.project-activity li.activity-list.warning:after {
        border-color: #ffb400;
    }
    ul.project-activity li.activity-list.info:after {
        border-color: #2698e2;
    }
    ul.project-activity li.activity-list.success:after {
        border-color: #27b963;
    }
    ul.project-activity li.activity-list.warning {
        border-left-color: #ffb400;
    }
    ul.project-activity li.activity-list.danger {
        border-left-color: #f23f3f;
    }
    ul.project-activity li.activity-list.success {
        border-left-color: #27b963;
    }
    ul.project-activity li.activity-list.info {
        border-left-color: #2698e2;
    }
    .doc-img-con{
        max-width: 40px;
        position: relative;
        top: 5px;
        height: 40px;
        border: 2px solid #4d9cf8;
        border-radius: 50%;
        overflow: hidden;
    }
    .doc-img-con.speciality{
        top: 0;
        padding: 1px 5px;
        border: 1px solid #eee;
        border-radius: 0
    }
    .speciality-item{
        margin-bottom: 25px
    }
    .mb-7{
        margin-bottom: 7px;
        display: block;
    }
    .speciality-item .msg-sender{
        font-size: 16px;
    }
    .visit-date{
        position: absolute;
        border: 1px solid;
        font-size: 12px;
        padding: 7px 10px;
        top: 42%;
        right: 0;
        transform: translateY(-50%);
        margin-bottom: 0;
        line-height: 1;
    }
    .visit-stat{
        background: aliceblue;
        min-width: 67px;
        text-align: center;
    }
    .hos-promo{
        position: relative;
        background: url(../../data/hos-dash/hos-promo.png);
        background-position: top center;
        padding: 100px 20px 50px;
    }
    .promo-info{
        position: relative;
        top: -50px
    }
    .wd{
        max-width: 25px
    }

    .token-info {
        width: 100%;
        margin-bottom: 20px;
        float: left;
        display: -ms-flexbox;
        display: flex;
    }
    .token-info .info-wrapper {
        border: 1px solid #eee;
        border-radius: 0 10px 10px 0;
        padding: 10px 15px;
        background-color: #fff;
        width: 100%;
        position: relative;
        -ms-flex: 1;
        flex: 1;
        display: -ms-flexbox;
        display: flex;
        box-shadow: 0px 2px 27px 0px rgba(154, 161, 171, 0.18);
        -webkit-box-shadow: 0px 2px 27px 0px rgba(154, 161, 171, 0.18);
    }
    .token-info .info-wrapper.one{
        border-left: 3px solid #997dea
    }
    .token-info .info-wrapper.two{
        border-left: 3px solid #e66392
    }
    .token-info .info-wrapper.three{
        border-left: 3px solid #2acd72
    }
    .token-info .info-wrapper.four{
        border-left: 3px solid #9898ef
    }
    .token-info .info-wrapper.five{
        border-left: 3px solid #ffa726
    }
    .token-info .info-wrapper.default{
        border-left: 3px solid #ddd
    }


    .vm {
        vertical-align: middle;
    }
    .vm.table td, .vm.table th {
        vertical-align: middle;
        position: relative;
    }
    .trans{
        min-height: 340px
    }
    .vm.table h6{
        margin-bottom: 3px;
        margin-top: 0;
        font-weight: 600;
        font-size: 14px
    }
    .table>tbody>tr>td,
    .table>tfoot>tr>td,
    .table>thead>tr>td {
        padding: 15px 12px
    }

    .table-hover tbody tr:hover,
    .table-striped tbody tr:nth-of-type(odd),
    .thead-default th {
        background-color: rgba(0, 0, 0, 0.03)
    }
    .browser>tbody>tr>td, .browser>tfoot>tr>td, .browser>thead>tr>td{
        padding: 14px 12px
    }
    .browser>tbody>tr:last-child>td{
        padding-bottom: 0
    }
    .browser img{
        width: 25px
    }
    table.focus-on tbody tr.focused th {
        background-color: #67a8e4;
        color: #fff
    }

    table.focus-on tbody tr.focused td {
        background-color: #67a8e4;
        color: #fff
    }

    .round {
        position: absolute;
        line-height: 44px;
        color: #ffffff;
        width: 45px;
        height: 45px;
        font-size: 18px;
        top: 50%;
        transform: translateY(-50%);
        text-transform: uppercase;
        display: inline-block;
        font-weight: 400;
        text-align: center;
        border-radius: 100%;
        background: #20aee3;
    }
    .w-70 {
        min-width: 70px !important
    }
    .round.img{
        border-radius: 0%;
        background: transparent;
    }
    .round.img2{
        border-radius: 0%;
        background: transparent;
        top: 48%
    }
    .round.img2 img{
        max-width: 27px
    }
    .round img{
        max-width: 45px
    }
    .round-success {
        background: #24d2b5 !important;
    }
    .round-primary {
        background: #6772e5;
    }
    .round-warning {
        background: #ff9041 !important;
    }
    .round-danger {
        background: #ff5c6c !important;
    }
    .badge {
        padding: 5px 10px;
        font-size: 13px;
        font-weight: 400;
        line-height: 1;
        color: #fff;
        text-align: center;
        border-radius: 15px;
    }
    .designer-info{
        padding-left: 60px
    }
    /*--------ui panels section for different colors--------*/
    /*transparent*/

    section.box.transparent {
        background-color: transparent;
    }
    section.transparent header {
        background-color: transparent;
        border: 1px solid #e8e8e8;
        border-bottom: 2px solid #4d9cf8;
    }
    section.transparent .content-body {
        background-color: transparent;
        border: 1px solid #e1e1e1;
        border-top: 0px;
    }
    /*inverted*/

    section.box.inverted {
        background-color: #777777;
        color: #dddddd;
    }
    section.inverted header {
        background-color: rgba(50, 50, 58, 0.8);
        border: 1px solid #333333;
        border-bottom: 2px solid #4d9cf8;
        color: #cccccc;
    }
    section.inverted header .title {
        color: #dddddd;
    }
    section.inverted .content-body {
        background-color: rgba(50, 50, 58, 0.4);
        border: 1px solid #333333;
        color: #dddddd;
        border-top: 0px;
    }
    /*----all colors----*/

    section.primary header {
        background-color: #4d9cf8;
        border: 1px solid #4d9cf8;
        border-bottom: 2px solid #4d9cf8;
        color: #f5f5f5;
    }
    section.purple header {
        background-color: #673AB7;
        border: 1px solid #673AB7;
        border-bottom: 2px solid #673AB7;
        color: #f5f5f5;
    }
    section.accent header {
        background-color: #E91E63;
        border: 1px solid #E91E63;
        border-bottom: 2px solid #E91E63;
        color: #f5f5f5;
    }
    section.success header {
        background-color: #4CAF50;
        border: 1px solid #4CAF50;
        border-bottom: 2px solid #4CAF50;
        color: #f5f5f5;
    }
    section.warning header {
        background-color: #FFC107;
        border: 1px solid #FFC107;
        border-bottom: 2px solid #FFC107;
        color: #f5f5f5;
    }
    section.danger header {
        background-color: #f44336;
        border: 1px solid #f44336;
        border-bottom: 2px solid #f44336;
        color: #f5f5f5;
    }
    section.info header {
        background-color: #03A9F4;
        border: 1px solid #03A9F4;
        border-bottom: 2px solid #03A9F4;
        color: #f5f5f5;
    }
    section.primary header .title, section.purple header .title, section.accent header .title, section.success header .title, section.warning header .title, section.danger header .title, section.info header .title {
        color: #f5f5f5;
    }
    section.box.primary .actions i, section.box.purple .actions i, section.box.accent .actions i, section.box.success .actions i, section.box.warning .actions i, section.box.info .actions i, section.box.danger .actions i {
        color: #e1e1e1;
    }
    section.box.primary .actions i:hover, section.box.purple .actions i:hover, section.box.accent .actions i:hover, section.box.success .actions i:hover, section.box.warning .actions i:hover, section.box.info .actions i:hover, section.box.danger .actions i:hover {
        color: #f5f5f5;
    }
    /*----------------------------------------------------
        Sortable / Drag n Drop panels(section boxes)
    ----------------------------------------------------*/

    .portlet-placeholder {
        border: 1px dashed #cccccc;
        margin: 0 30px 30px 0;
        height: 240px;
    }
    .sort_panel {
        display: inline-block;
    }
    .sort_panel section {
        margin-bottom: 30px;
    }
    .sort_panel .panel_header {
        cursor: move;
    }
    /*------------------------------
        FORM ELEMENTS
    -------------------------------*/

    input[type=checkbox], input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=radio], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea, .form-control {
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        -o-box-shadow: none;
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border: 1px solid #e1e1e1;
    }
    .form-control:focus, .has-focus .form-control {
        background: #f8f8f8;
        border-color: #4d9cf8;
        outline: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .form-group .controls {
        margin: 5px 0;
    }
    .form-label {
        font-weight: 400;
        color: #555555;
    }
    .form-group .desc {
        font-size: 13px;
        color: #999999;
        margin-left: 15px;
    }
    .help-block {
        color: #999999;
        font-style: italic;
    }
    /*----------- input group ----------*/

    .input-group-btn button {
        border: 1px solid #ccc;
        height: 34px;
    }
    .input-group-btn:first-child button {
        border-right: 0px;
    }
    .input-group-btn:last-child button {
        border-left: 0px;
    }
    .input-group .input-group-addon {
        min-width: 40px;
    }
    .input-group.transparent .input-group-btn button {
        border: 0px;
        background-color: transparent;
    }
    .input-group .input-group-addon, .input-group .input-group-btn button {
        border-color: #e1e1e1;
        background-color: #f5f5f5;
        color: #555555;
        outline: 0;
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -moz-transition: border-color ease-in-out .15s, -moz-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        -ms-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }
    .input-group .input-group-btn.input-focus button, .input-group .input-group-addon.input-focus {
        border-color: #4d9cf8;
        height: 34px;
    }
    .input-group.transparent {
        border: 1px solid #e1e1e1;
        height: 34px;
    }
    .input-group.transparent .input-group-addon {
        background-color: transparent;
        border: 0px solid transparent;
        height: 32px;
    }
    .input-group.transparent .input-group-btn.input-focus button, .input-group.transparent .input-group-addon.input-focus {
        background-color: #f8f8f8;
    }
    .input-group.transparent .form-control {
        border: 0px solid transparent;
        height: 32px;
    }
    .input-group.primary .input-group-addon, .input-group.primary .input-group-btn button {
        border-color: #4d9cf8;
        background-color: #4d9cf8;
        color: #ffffff;
    }
    /*
    .input-group.transparent .form-control{
    border-left: 0px solid transparent;
    }

    .input-group.transparent .input-group-addon.input-focus {
        background-color: #f8f8f8;  
        border: 1px solid #4d9cf8;
        border-right: 0px;
    }


    */

    .input-group .dropdown-menu {
        border-color: #f5f5f5;
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
    }
    /*----- fixed colors -----*/

    .has-error .form-control, .has-error .form-control:focus {
        border-color: #f44336;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .has-warning .form-control, .has-warning .form-control:focus {
        border-color: #FFC107;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .has-success .form-control, .has-success .form-control:focus {
        border-color: #4CAF50;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label {
        color: #f44336;
    }
    .has-warning .checkbox, .has-warning .checkbox-inline, .has-warning .control-label, .has-warning .help-block, .has-warning .radio, .has-warning .radio-inline, .has-warning.checkbox label, .has-warning.checkbox-inline label, .has-warning.radio label, .has-warning.radio-inline label {
        color: #FFC107;
    }
    .has-success .checkbox, .has-success .checkbox-inline, .has-success .control-label, .has-success .help-block, .has-success .radio, .has-success .radio-inline, .has-success.checkbox label, .has-success.checkbox-inline label, .has-success.radio label, .has-success.radio-inline label {
        color: #4CAF50;
    }
    /*------------------------------
        BUTTONS
    -------------------------------*/

    .btn {
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border: 0px;
        font-family: Roboto, Helvetica, Arial, sans-serif;
        font-weight: 400;
        text-shadow: none;
    }
    .btn.btn-round {
        border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
    }
    .btn.btn-corner {
        border-radius: 18px;
        -o-border-radius: 18px;
        -ms-border-radius: 18px;
        -moz-border-radius: 18px;
        -webkit-border-radius: 18px;
    }
    .btn.btn-border {
        border: 2px solid #eaeaea;
        color: #333333;
        background: transparent;
    }
    .btn.btn-border.btn-success {
        border: 2px solid #4CAF50;
        color: #4CAF50;
        background: transparent;
    }
    .btn.btn-border.btn-warning {
        border: 2px solid #FFC107;
        color: #FFC107;
        background: transparent;
    }
    .btn.btn-border.btn-danger {
        border: 2px solid #f44336;
        color: #f44336;
        background: transparent;
    }
    .btn.btn-border.btn-info {
        border: 2px solid #03A9F4;
        color: #03A9F4;
        background: transparent;
    }
    .btn.btn-border.btn-accent {
        border: 2px solid #E91E63;
        color: #E91E63;
        background: transparent;
    }
    .btn.btn-border.btn-purple {
        border: 2px solid #673AB7;
        color: #673AB7;
        background: transparent;
    }
    .btn.btn-border.btn-primary {
        border: 2px solid #4d9cf8;
        color: #4d9cf8;
        background: transparent;
    }
    .btn.btn-border.btn-secondary {
        border: 2px solid #9e9e9e;
        color: #9e9e9e;
        background: transparent;
    }
    .btn.btn-border, .btn.btn-border.btn-default {
        border: 2px solid #eaeaea;
        color: #333333;
        background: transparent;
    }
    .btn.btn-border.btn-link {
        border: 2px solid transparent;
        color: #337ab7;
        background: transparent;
    }
    /*colors*/

    .btn.btn-success {
        background: #4CAF50;
        color: #ffffff;
    }
    .btn.btn-warning {
        background: #FFC107;
        color: #ffffff;
    }
    .btn.btn-danger {
        background: #f44336;
        color: #ffffff;
    }
    .btn.btn-info {
        background: #03A9F4;
        color: #ffffff;
    }
    .btn.btn-accent {
        background: #E91E63;
        color: #ffffff;
    }
    .btn.btn-purple {
        background: #673AB7;
        color: #ffffff;
    }
    .btn.btn-primary {
        background: #053479;
        color: #ffffff;
        outline: none;
    }
    .btn.btn-secondary {
        background: #9e9e9e;
        color: #ffffff;
        outline: none;
    }
    .btn, .btn.btn-default {
        background: #eaeaea;
        color: #333333;
        outline: none;
    }
    .btn.btn-link {
        background: transparent;
        color: #337ab7;
    }
    /*size*/

    .btn {
        padding: 7px 18px;
        outline: none;
    }
    .btn.btn-lg, .btn-lg, .btn-group-lg>.btn {
        padding: 10px 21px;
    }
    .btn.btn-sm, .btn-sm, .btn-group-sm>.btn {
        padding: 5px 13px;
    }
    .btn.btn-xs, .btn-xs, .btn-group-xs>.btn {
        padding: 2px 8px;
    }
    .btn.btn-block, .btn-block, .btn-group-block>.btn {
        padding: 11px 23px;
        font-size: 19px;
        line-height: 25px;
    }
    /*hover state*/
    /*.btn:hover, .btn:active, .btn:focus{color:#ffffff;}*/

    .btn:hover, .btn:active, .btn:focus, .btn-default:hover, .btn-default:active, .btn-default:focus {
        color: #333333;
        background: #eeeeee;
    }
    .btn.btn-link:hover, .btn.btn-link:focus {
        color: rgba(1,131,122, 1.0);
        background: transparent;
    }
    .btn-success:hover, .btn-success:active, .btn-success:focus {
        background: #2E7D32;
        color: #ffffff;
    }
    .btn-warning:hover, .btn-warning:active, .btn-warning:focus {
        background: #FF8F00;
        color: #ffffff;
    }
    .btn-danger:hover, .btn-danger:active, .btn-danger:focus {
        background: #c62828;
        color: #ffffff;
    }
    .btn-info:hover, .btn-info:active, .btn-info:focus {
        background: #0277BD;
        color: #ffffff;
    }
    .btn-accent:hover, .btn-accent:active, .btn-accent:focus {
        background: #AD1457;
        color: #ffffff;
    }
    .btn-purple:hover, .btn-purple:active, .btn-purple:focus {
        background: #6A1B9A;
        color: #ffffff;
    }
    .btn-primary.active, .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
        background: #d14d1a;
        color: #ffffff;
    }
    .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
        background: rgba(139,139,139, 1.0);
        color: #ffffff;
    }
    .btn-default.active, .btn-default:hover, .btn-default:active, .btn-default:focus {
        background: #d5d5d5;
        color: #333333;
    }
    .btn-default:active, .btn-primary:active, .btn-success:active, .btn-info:active, .btn-warning:active, .btn-danger:active, .btn-default.active, .btn-primary.active, .btn-success.active, .btn-info.active, .btn-warning.active, .btn-danger.active {
        box-shadow: none;
        -o-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        -webkit-box-shadow: none;
    }
    .btn-primary:disabled, .btn-primary[disabled] {
        background: rgba(0,131,122, 1.0);
        color: #ffffff;
    }
    .btn.disabled, .btn[disabled], fieldset[disabled] .btn {
        text-shadow: none;
    }
    .btn-colors .btn {
        width: 80px;
        margin: 0 15px 15px 0;
    }
    .btn-iconic .btn, .btn-social .btn {
        width: 50px;
        text-align: center;
        margin: 0 10px 10px 0px;
    }
    /*social media*/

    .facebook {
        background-color: #436cac !important;
        color: #ffffff !important;
    }
    .twitter {
        background-color: #55acee !important;
        color: #ffffff !important;
    }
    .google-plus {
        background-color: #313131 !important;
        color: #ffffff !important;
    }
    .dribbble {
        background-color: #cd4a7e !important;
        color: #ffffff !important;
    }
    .youtube {
        background-color: #df220c !important;
        color: #ffffff !important;
    }
    .vimeo {
        background-color: #85af27 !important;
        color: #ffffff !important;
    }
    .flickr {
        background-color: #df3a7f !important;
        color: #ffffff !important;
    }
    .rss {
        background-color: #ef7424 !important;
        color: #ffffff !important;
    }
    .skype {
        background-color: #1fc9fa !important;
        color: #ffffff !important;
    }
    .linkedin {
        background-color: #3089c3 !important;
        color: #ffffff !important;
    }
    .android {
        background-color: #98cb02 !important;
        color: #ffffff !important;
    }
    .apple {
        background-color: #02a7e7 !important;
        color: #ffffff !important;
    }
    /*---------------------------------------------
        ICHECK (Checkboxes and Radios)
    ----------------------------------------------*/

    [class*="iradio_line"], [class*="icheckbox_line"] {
        margin-bottom: 8px;
    }
    ul.states li {
        margin-bottom: 8px;
    }
    [class*="icheckbox_"], [class*="iradio_"] {
        margin-right: 8px;
    }
    .icheck-label, .iradio-label {
        margin-bottom: 8px;
    }
    /*------------------------------
    jQery UI Settings
    -------------------------------*/

    .ui-slider {
        background-color: #eeeeee;
    }
    .ui-slider-range {
        background-color: #cccccc;
    }
    .ui-slider-handle {
        background-color: #aaaaaa;
    }
    /*------------------------------
    Ico distribution
    -------------------------------*/
    .center-values{position: absolute;
        top: 35%;
        left: 40%;
        height: 110px;
        width: 110px;
        color: #979292;
        background-color: #fff;
        padding: 20px 16px;
        border-radius: 100px; text-align:center;    box-shadow: 0 0 0 20px rgba(0,0,0,0.3);}
    .margin-btm{ 
        color: #a67220;
        margin: 5px 0;}
    .phx{ color:#5b5b5b; font-size:13px;}
    .phx.trix{font-size: 12px}
    .angle-round {
        color: #505458;
        margin-top: 0;
        font-family: inherit;
        font-weight: 500;
        line-height: 1.2;
        font-size: 16px;
    }

    .number {
        color: grey;
        float: right;
    }
    .trader-buy{
        position: relative;
        padding-left: 50px;
        margin-bottom: 30px
    }
    .trader-buy .progress.progress-cls{
        margin-bottom: 0px
    }
    .trader-buy:last-child{
        margin-bottom: 7px
    }
    .trader-buy.golden:before,
    .trader-buy.silver:before{
        content: "\f005";
        font-family: 'FontAwesome';
        position: absolute;
        width: 40px;
        text-align: center;
        font-size: 20px;
        line-height: 40px;
        top: 0;
        left: 0;
        height: 40px;
        border: 1px solid #4d9cf8;
        margin: 5px 10px 5px 0;
    }
    .trader-buy.golden:before{
        color: gold;
    }
    .trader-buy.silver:before{
        color: silver;
    }
    .progress {
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        font-size: 12px;
        border-radius: 10px;
    }
    .progress.progress-cls {
        border-radius: 10px !important;
        height: 20px !important;
        margin-bottom: 20px;
        width: 100%
    }
    .progress-cls .progress-bar {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        line-height: 25px;
        height: 20px;
        border-radius: 10px;
        justify-content: center;
        color: #fff;
        background-color: #007bff;
    }
    .background-one {
        width: 30%;
        background-color: #2f66d4;
        border-radius: 10px;
    }

    /*------------------------------
    Deal part
    -------------------------------*/
    .deal-wrapper{
        position: relative;
        padding: 0 15px
    }
    .deal-wrapper .dropdown-menu-list:before{
        content: '';
        position: absolute;
        top: 0;
        left: 31px;
        width: 0px;
        height: 100%;
        border: 1px dashed #4d9cf8;

    }
    .deal-wrapper .dropdown-menu-list li {
        width: 100%;
        display: block;
        position: relative;
        padding: 15px 0 15px 0;
        border-bottom: 1px solid transparent;
    }
    .deal-wrapper .dropdown-menu-list li:after{
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 87%;
        height: 1px;
        background: #eaeaea
    }
    .deal-wrapper .notice-icon i {
        border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        height: 35px;
        width: 35px;
        background: #4d9cf8;
        line-height: 35px;
        float: left;
        display: inline-block;
        text-align: center;
        margin-right: 15px;
        color: #ffffff;
        margin-top: 5px;
    }
    .deal-wrapper .dropdown-menu-list li.unread .name {
        color: #717171;
    }
    .deal-wrapper .dropdown-menu-list li .name .time {
        display: block;
        position: relative;
        color: #aaaaaa;
    }
    .arrow-container i{
        display: block;
        color: #b6b6bb
    }
    @media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
    }
    @media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
    }
    @media (min-width: 320px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important;
    }
    }
    @media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
    }
    /*------------------------------
    Wallet page styles
    -------------------------------*/
    .crypto-icon{
        padding: 5px 20px 10px;
    }
    .crypto-icon i{
        font-size: 40px
    }
    .form-group.cryptonia .desc{
        margin-left: 0
    }
    .balance{
        background: #f7f7f7;
        padding: 10px;
        text-align: left;
    }
    .bg-white{
        background: white !important
    }
    /*------------------------------
    security page styles
    -------------------------------*/
    .right-col{
        text-align: right;
    }
    .btc-balance h3 i{
        padding-right: 10px
    }
    .tabs-wrapper{
        padding:0 15px;
    }
    .nav-tabs>li .tab-img-icon{
        max-width: 40px !important;
        position: relative;
        top: -14px;
        margin-right: 10px;
    }
    .tab-head{
        display: inline-block;
    }
    .security-option-wrapper{
        padding: 20px 0 30px;
        border-bottom: 1px solid #eaeaea;
        position: relative;
    }
    .security-option-wrapper img{
        max-width: 70px !important
    }
    .security-option-wrapper .tab-head{
        width: 80%;
        padding-left: 90px
    }
    @media (max-width: 1200px){
        .security-option-wrapper .tab-head{
            width: 100%
        }
    }
    @media (max-width: 776px){
        .security-option-wrapper .tab-head{
            padding-left: 0px
        }
        .tabs-wrapper .nav-tabs>li,
        .tabs-wrapper .nav-tabs>li a{
            width: 100%;
            margin-right: 0 
        }
        .security-option-wrapper .tab-img-icon{
            position: relative !important;
            top: 0 !important
        }
    }
    .security-option-wrapper .tab-img-icon{
        top: 30px;
        width: 70px;
        position: absolute;
        height: 70px;
    }
    .security-option-wrapper .input-group{
        width: 100%
    }
    .form-container{
        padding: 0 15px
    }
    .avatar-img-wrapper{
        display: inline-block;
        width: 100px;
        padding: 20px;
        border: 2px dashed #4d9cf8;
        border-radius: 50%;
    }
    .avatar-img-wrapper.v2{
        background: transparent !important;
        border: 0;
        max-width: 35px;
        padding: 20px 0;
        margin-right: 0 !important;
    }

    @media (max-width: 992px){
        .avatar-img-wrapper{
            padding: 10px
        }
    }
    .avatar-img-wrapper.v2 
    .ico-img {
        display: inline-block;
        width: 50px;
        height: 80px;
        font-size: 45px;
        padding: 17px 0;
    }
    .avatar-img .form-group{
        display: inline-block;
        padding-left: 15px;
        vertical-align: bottom;
    }



    .option-identity-wrapper{
        padding: 20px;
        margin-bottom: 20px;
        border: 1px solid #eaeaea;
        position: relative;
    }
    .option-icon{
        position: relative;
        display: inline-block;
    }
    .option-identity-wrapper img{
        position: relative;
        top: 0;
        margin-right: 10px;
    }
    .option-identity-wrapper .tab-head{
        width: 75%;
        display: inline-block;
        vertical-align: middle;
    }
    @media (max-width: 1200px){
        .option-identity-wrapper .tab-head{
            width: 100%
        }
    }
    @media (max-width: 776px){
        .option-identity-wrapper .tab-head{
            padding-left: 0px
        }
        .tabs-wrapper .nav-tabs>li,
        .tabs-wrapper .nav-tabs>li a{
            width: 100%;
            margin-right: 0 
        }
        .option-identity-wrapper .tab-img-icon{
            position: relative !important;
            top: 0 !important
        }
    }
    .option-identity-wrapper .tab-img-icon{
        position: relative;
        top: 0;
        max-width: 200px;
        margin-right: 10px;
    }
    .option-identity-wrapper .input-group{
        width: 100%
    }
    /*------------------------------
    plugins Elements styles
    -------------------------------*/
    .statistics-info {
        padding: 13px 0 23px;
        border-bottom: 1px solid #ccc
    }
    .statistics-info:last-child{border: none;}
    .statistics-info span i{
        font-size: 10px;
        margin-right: 7px
    }
    .statistics-info span i.active{
        color: #4d9cf8;
    }
    .div-symbol-explanation{display: none;}

    .table-responsive .table-bordered>tbody>tr>td, 
    .table-responsive .table-bordered>tbody>tr>th, 
    .table-responsive .table-bordered>tfoot>tr>td, 
    .table-responsive .table-bordered>tfoot>tr>th, 
    .table-responsive .table-bordered>thead>tr>td, 
    .table-responsive .table-bordered>thead>tr>th{
        border-color: transparent !important;
    }

    .green{color: #6fc334;}
    .RADS {color: #924cea;}
    .RBY{color: #d21e25}
    .SWIFT{color: #00c2d7}
    .TX{color: #ffb204;}
    i.pending{color: #ffb204;font-size: 12px;margin-right: 7px}
    i.complete{color: #6fc334;font-size: 12px;margin-right: 7px}
    i.cancelled{color: #f63b23;font-size: 12px;margin-right: 7px}
    .status-pending{border: 1px solid #ffb204;border-radius: 12px;padding: 1px 10px 3px;font-size: 13px}
    .status-complete{border: 1px solid #6fc334;border-radius: 12px;padding: 1px 10px 3px;font-size: 13px}
    .status-cancelled{border: 1px solid #f63b23;border-radius: 12px;padding: 1px 10px 3px;font-size: 13px}

    .price.ng-scope{
        visibility: visible !important;
    }
    .widget_logo{display: none;}


    .amcharts-graph-column-front.amcharts-graph-column-element,
    .amcharts-legend-marker{
    fill:rgba(255, 180, 38, 1);
        stroke: rgba(255, 180, 38, 1)
    }
    .amcharts-graph-stroke{
        stroke: #ffb426;
    }
    .amcharts-graph-fill{
    fill:rgba(255, 180, 38, 1)
    }
    .ccc-widget.ccc-chart-v3{
    margin-bottom: 30px
    }
    .chartTypeTabLinks{
        display: none;
    }
    .tabsPeriodsContainer{
    margin-top: 20px
    }
    #marketsContainerUSD{
    display: none !important;
    }
    .cryptocompare-logo{
    display: none;
    }
    .img-affa-wrapper{
        padding: 20px;
        border: 2px dashed #4d9cf8;
        margin-bottom: 30px;
    }

    /*------------------------------------
        Affiliate reward 
    ------------------------------------*/
    @media (max-width: 1200px){
        .aff-img{
            margin-top: 20px
        }
    }
    .reward-box{
        position: relative;
        border: 1px solid #eee;
        padding: 20px;
        transition: all .3s;
    }
    .rank-span{
        position: absolute;
        top: -16px;
        left: 50%;
        transform: translateX(-50%);
    }
    .reward-box:hover{
        border-color: #4d9cf8;
        cursor: pointer;
    }
    .reward-box small{
        text-align: center;
        width: 100%;
        display: block;
    }
    .reward-box img.next{
        max-width: 120px;
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
    }
    /*------------------------------------
        Transaction Widget 
    ------------------------------------*/
    .transaction-wraper{
        position: relative;
    }
    .transaction-info{
        padding: 8.5px 10px;
        border: 1px solid #ccc;
        width: 44%;
        border-radius: 24px;
        display: inline-block;
    }
    .transaction-info img{
        max-width: 28px;
        display: inline-block;
        margin-right: 10px
    }
    .transaction-info strong{
        font-size: 16px;
        font-weight: 600;
    }
    .transaction-info strong span{
        font-size: 13px;
        font-weight: normal;
    }
    .transaction-wraper .cancelled,
    .transaction-wraper .complete{
        margin-left: 7px;
        font-size: 12px
    }
    .all-transaction{
        color: #505458
    }
    .all-transaction:hover{
        color: #4d9cf8
    }
    .form-control-static.with-border{
        font-size: 13px;
        padding-left: 10px;
        border: 1px solid #e1e1e1;
        padding-top: 4.5px !important;
        padding-bottom: 4.5px !important
    }

    .tradingview-widget-copyright{
        display: none;
    }
    /*------------------------------------
        Modals 
    ------------------------------------*/
    .modals-area.row{
    }
    .modal-content {
        border: 1px solid rgba(0, 0, 0, .2);
        box-shadow: none;
        -o-box-shadow: none;
        -ms-box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
    }
    .modal-body {
        padding: 30px;
    }
    .modal {
        z-index: 11040;
    }


    /*------------------------------------
        realtime pricng Plugin 
    ------------------------------------*/

    .pt30 {
        padding-top: 30px !important;
    }
    .pb0 {
        padding-bottom: 0px !important;
    }
    .pt0 {
        padding-top: 0px !important;
    }
    .pb10 {
        padding-bottom: 10px !important;
    }
    .pb30 {
        padding-bottom: 30px !important;
    }

    .site-logo {
        height: 30px;
        margin-top: 15px;
    }

    .flex-center {
        display: flex !important;
        align-items: center !important
    }

    strong.coin-code {
        display: inline-block;
        padding: 2px 5px;
        margin-left: 45px;
        border: 1px solid #f3f3f3;
        border-radius: 4px;
        margin-right: 10px;
    }


    /* 3.
    /* ################## LOADING SCREEN ################## */
    /* --------------------------------------------------- */
    /** Loading screen ***/
    .loading-screen {
        display: block;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background-color: rgba(255, 255, 255, .98);
        text-align: center;

    }

    .loading-screen img {
        height: 50px;
        position: relative;
        top: 50%;
        margin-top: -25px;
    }

    .loading-screen img.per-loader {
        width: 50px;
        height: 50px;
    }


    /* 4.
    /* ############## MAIN TOP NAVIGATION ################ */
    /* --------------------------------------------------- */
    .main-top-navigation {
        box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.08);
        position: fixed;
        background-color: rgba(255, 255, 255, .98);
        -webkit-backdrop-filter: blur(20px);
        z-index: 9997;
        padding: 0px 0px 0px 24px;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 60px;
    }

    .main-top-nav-margin {
    }
    .scroll-to-top.go-up {
        background-position: 10px 10px;
        cursor: pointer;
    }
    .main-top-nav-margin table.dataTable{
    border-right: 0px
    }
    /* 7.
    /* ####################### CARD ###################### */
    /* --------------------------------------------------- */
    .card {
        max-width: 100%;
        padding: 15px;
        margin-bottom: 30px;
        background: #fff;
        border: 0px;
        border-radius: 12px;
        -webkit-box-shadow: 0 2px 28px rgba(0,0,0,.1);
        box-shadow: 0 2px 28px rgba(0,0,0,.1);
    }
    .card ._value_{
        font-size: 28px !important
    }
    /* 8.
    /* ################### RESPONSIVE #################### */
    /* --------------------------------------------------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 770px)
    and (orientation : portrait) {
    .ad-banner{
        width: 100%;
    }
    }
    @media (min-width: 1200px){
        .container {
            width: 1250px;
        }

    }
    @media (max-width: 480px) {

        .ad-banner {
            max-width: 100%;
        }


        .site-logo {
            width: 140px;
        }

        .container-fluid {
            padding: 0px;
        }

        #currencies-select-box {
            position: absolute;
        }

        .loading-screen img {
            width: 60%;
        }
    }
    /*---------------------------------------------
        Alert Notifications
    ----------------------------------------------*/

    .alert {
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        text-shadow: none;
        background: #eaeaea;
    }
    .alert-warning {
        border: 1px solid #FFC107;
        background: #FFC107;
        color: #ffffff;
    }
    .alert-success {
        border: 1px solid #4CAF50;
        background: #4CAF50;
        color: #ffffff;
    }
    .alert-info {
        border: 1px solid #03A9F4;
        background: #03A9F4;
        color: #ffffff;
    }
    .alert-danger, .alert-error {
        border: 1px solid #f44336;
        background: #f44336;
        color: #ffffff;
    }
    .alert button.close span {
        color: #ffffff;
    }
    .alert button.close {
        opacity: 0.6;
    }
    .alert {
        padding: 15px 35px 15px 15px;
        text-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border: none;
    }
    .alert *, .alert a {
        color: #ffffff;
    }
    .alert a {
        font-weight: bold;
    }
    .alert button.close span {
        color: #ffffff;
        opacity: 0.7;
    }
    .alert button.close {
        opacity: 1;
        font-size: 18px;
        font-weight: 300;
        line-height: 25px;
    }
    .alert-default *, .alert-default a, .alert-default {
        color: #777777;
    }
    .alert.alert-default button.close span {
        color: #777777;
        opacity: 0.7;
    }
    .alert-primary {
        background: #4d9cf8;
        color: #ffffff;
    }
    .notification_btns .btn {
        margin-bottom: 15px;
        margin-right: 15px;
    }
    /*---------------------------------------------
        Dropdown menu
    ----------------------------------------------*/

    .dropdown-menu {
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .125);
        -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .125);
        box-shadow: 0 3px 8px rgba(0, 0, 0, .125);
        border-color: #f5f5f5;
    }
    /*---------------------------------------------------
    Datepicker, Daterangepicker,  Datetimepicker & Colorpicker
    ---------------------------------------------------*/

    .daterangepicker, .datetimepicker-days, .datetimepicker-months, .datetimepicker-years, .datepicker-days, .datepicker-months, .datepicker-years {
        padding: 10px;
    }
    .daterangepicker th, .datetimepicker th, .datepicker th {
        font-weight: 400;
        color: #555555;
    }
    .daterangepicker td.off, .datepicker td.old, .datepicker td.new {
        color: #aaaaaa;
    }
    .daterangepicker td, .daterangepicker th, .datetimepicker-years .year, .datetimepicker-months .month, .datetimepicker td, .datetimepicker th, .datepicker-years .year, .datepicker-months .month, .datepicker td, .datepicker th {
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
    }
    .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
        border-color: #4d9cf8;
    }
    .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover, .daterangepicker td.active, .daterangepicker td.active:hover, .datetimepicker table tr td span.active:active, .datetimepicker table tr td span.active:hover:active, .datetimepicker table tr td span.active.disabled:active, .datetimepicker table tr td span.active.disabled:hover:active, .datetimepicker table tr td span.active.active, .datetimepicker table tr td span.active:hover.active, .datetimepicker table tr td span.active.disabled.active, .datetimepicker table tr td span.active.disabled:hover.active, .datetimepicker table tr td.active:active, .datetimepicker table tr td.active:hover:active, .datetimepicker table tr td.active.disabled:active, .datetimepicker table tr td.active.disabled:hover:active, .datetimepicker table tr td.active.active, .datetimepicker table tr td.active:hover.active, .datetimepicker table tr td.active.disabled.active, .datetimepicker table tr td.active.disabled:hover.active, .datepicker td span.active:hover, .datepicker td span.active:focus, .datepicker td span.active:active, .datepicker td span.active.active, .datepicker td span.active.disabled, .datepicker td span.active[disabled], .datepicker td.active:hover, .datepicker td.active:hover:hover, .datepicker td.active:focus, .datepicker td.active:hover:focus, .datepicker td.active:active, .datepicker td.active:hover:active, .datepicker td.active.active, .datepicker td.active:hover.active, .datepicker td.active.disabled, .datepicker td.active:hover.disabled, .datepicker td.active[disabled], .datepicker td.active:hover[disabled] {
        background-color: #4d9cf8;
        background-image: none;
        text-shadow: none;
    }
    .datetimepicker-years .year, .datetimepicker-months .month, .datepicker-years .year, .datepicker-months .month {
        background-image: none;
        text-shadow: none;
        width: 36px;
        height: 36px;
        line-height: 36px;
    }

    .datepicker:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ffffff;
    border-bottom-color: rgba(200, 200, 200, 0.5);
    top: -7px;
    left: 6px;
    }

    /*----- timepicker ------*/

    .bootstrap-timepicker-widget {
        padding: 8px;
    }
    .bootstrap-timepicker-widget table td input {
        width: 30px;
        padding: 3px;
        border: 0px solid transparent;
        color: #555555;
    }
    .bootstrap-timepicker-widget .icon-chevron-up, .bootstrap-timepicker-widget .icon-chevron-down {
        font-size: 12px;
        line-height: 12px;
        color: #aaaaaa;
    }
    .bootstrap-timepicker-widget table td a {
        padding: 2px 0;
        color: #aaaaaa;
    }
    .bootstrap-timepicker-widget table td a:hover {
        background-color: #f5f5f5;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        border-color: #eeeeee;
    }
    .icon-chevron-up, .icon-chevron-down {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: #9e9e9escale;
    }
    .icon-chevron-up:before {
        content: "\f077";
    }
    .icon-chevron-down:before {
        content: "\f078";
    }
    /*------ daterangepicker -------*/

    .daterangepicker .ranges .input-mini {
        border: 1px solid #eeeeee;
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
    }
    .daterangepicker .calendar-date {
        border: 1px solid #eeeeee;
        padding: 10px;
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
    }
    /*----- colorpicker ------*/

    .sel-color {
        display: block;
        width: 15px;
        height: 15px;
    }
    /*---------------------------------------------
        Progress Bars
    ----------------------------------------------*/

    .progress {
        background: #f5f5f5;
        background-image: none;
        -webkit-box-shadow: inset 0 -1px 2px rgba(150, 150, 150, .1);
        -moz-box-shadow: inset 0 -1px 2px rgba(150, 150, 150, .1);
        box-shadow: inset 0 -1px 2px rgba(150, 150, 150, .1);
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
    }
    .progress.progress-md {
        height: 30px;
    }
    .progress.progress-lg {
        height: 40px;
    }
    .progress.progress-xlg {
        height: 50px;
    }
    .progress-bar {
        background-image: none;
        font-size: 12px;
        line-height: 20px;
        -webkit-box-shadow: inset 0 -1px 0 rgba(100, 100, 100, .15);
        -moz-box-shadow: inset 0 -1px 0 rgba(100, 100, 100, .15);
        box-shadow: inset 0 -1px 0 rgba(100, 100, 100, .15);
    }
    .progress-bar-striped {
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
        background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
        background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
        background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
        background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    }
    .progress-md .progress-bar {
        font-size: 14px;
        line-height: 30px;
    }
    .progress-lg .progress-bar {
        font-size: 16px;
        line-height: 40px;
    }
    .progress-xlg .progress-bar {
        font-size: 18px;
        line-height: 50px;
    }
    .progress-bar-purple {
        background-color: #673AB7;
    }
    .progress-bar-primary {
        background-color: #4d9cf8;
    }
    .progress-bar-accent {
        background-color: #E91E63;
    }
    .progress-bar-secondary {
        background-color: #9e9e9e;
    }
    /*---------------------------------------------
    General Animation Settings    
    ----------------------------------------------*/

    .animated-duration-200ms {
        -webkit-animation-duration: 200ms;
        -moz-animation-duration: 200ms;
        -o-animation-duration: 200ms;
        animation-duration: 200ms;
    }
    .animated-duration-400ms {
        -webkit-animation-duration: 400ms;
        -moz-animation-duration: 400ms;
        -o-animation-duration: 400ms;
        animation-duration: 400ms;
    }
    .animated-duration-600ms {
        -webkit-animation-duration: 600ms;
        -moz-animation-duration: 600ms;
        -o-animation-duration: 600ms;
        animation-duration: 600ms;
    }
    .animated-duration-800ms {
        -webkit-animation-duration: 800ms;
        -moz-animation-duration: 800ms;
        -o-animation-duration: 800ms;
        animation-duration: 800ms;
    }
    .animated-duration-1000ms {
        -webkit-animation-duration: 1000ms;
        -moz-animation-duration: 1000ms;
        -o-animation-duration: 1000ms;
        animation-duration: 1000ms;
    }
    .animated-duration-1200ms {
        -webkit-animation-duration: 1200ms;
        -moz-animation-duration: 1200ms;
        -o-animation-duration: 1200ms;
        animation-duration: 1200ms;
    }
    .animated-duration-1400ms {
        -webkit-animation-duration: 1400ms;
        -moz-animation-duration: 1400ms;
        -o-animation-duration: 1400ms;
        animation-duration: 1400ms;
    }
    .animated-duration-1600ms {
        -webkit-animation-duration: 1600ms;
        -moz-animation-duration: 1600ms;
        -o-animation-duration: 1600ms;
        animation-duration: 1600ms;
    }
    .animated-duration-1800ms {
        -webkit-animation-duration: 1800ms;
        -moz-animation-duration: 1800ms;
        -o-animation-duration: 1800ms;
        animation-duration: 1800ms;
    }
    .animated-duration-2000ms {
        -webkit-animation-duration: 2000ms;
        -moz-animation-duration: 2000ms;
        -o-animation-duration: 2000ms;
        animation-duration: 2000ms;
    }
    .animated-duration-2s {
        -webkit-animation-duration: 2s;
        -moz-animation-duration: 2s;
        -o-animation-duration: 2s;
        animation-duration: 2s;
    }
    .animated-duration-2200ms {
        -webkit-animation-duration: 2200ms;
        -moz-animation-duration: 2200ms;
        -o-animation-duration: 2200ms;
        animation-duration: 2200ms;
    }
    .animated-duration-2400ms {
        -webkit-animation-duration: 2400ms;
        -moz-animation-duration: 2400ms;
        -o-animation-duration: 2400ms;
        animation-duration: 2400ms;
    }
    .animated-duration-3s {
        -webkit-animation-duration: 3s;
        -moz-animation-duration: 3s;
        -o-animation-duration: 3s;
        animation-duration: 3s;
    }
    .animated-duration-1s {
        -webkit-animation-duration: 1s;
        -moz-animation-duration: 1s;
        -o-animation-duration: 1s;
        animation-duration: 1s;
    }
    .animated-delay-200ms {
        -webkit-animation-delay: 200ms;
        -moz-animation-delay: 200ms;
        -o-animation-delay: 200ms;
        animation-delay: 200ms;
    }
    .animated-delay-400ms {
        -webkit-animation-delay: 400ms;
        -moz-animation-delay: 400ms;
        -o-animation-delay: 400ms;
        animation-delay: 400ms;
    }
    .animated-delay-600ms {
        -webkit-animation-delay: 600ms;
        -moz-animation-delay: 600ms;
        -o-animation-delay: 600ms;
        animation-delay: 600ms;
    }
    .animated-delay-800ms {
        -webkit-animation-delay: 800ms;
        -moz-animation-delay: 800ms;
        -o-animation-delay: 800ms;
        animation-delay: 800ms;
    }
    .animated-delay-1000ms {
        -webkit-animation-delay: 1000ms;
        -moz-animation-delay: 1000ms;
        -o-animation-delay: 1000ms;
        animation-delay: 1000ms;
    }
    .animated-delay-1200ms {
        -webkit-animation-delay: 1200ms;
        -moz-animation-delay: 1200ms;
        -o-animation-delay: 1200ms;
        animation-delay: 1200ms;
    }
    .animated-delay-1400ms {
        -webkit-animation-delay: 1400ms;
        -moz-animation-delay: 1400ms;
        -o-animation-delay: 1400ms;
        animation-delay: 1400ms;
    }
    .animated-delay-1600ms {
        -webkit-animation-delay: 1600ms;
        -moz-animation-delay: 1600ms;
        -o-animation-delay: 1600ms;
        animation-delay: 1600ms;
    }
    .animated-delay-1800ms {
        -webkit-animation-delay: 1800ms;
        -moz-animation-delay: 1800ms;
        -o-animation-delay: 1800ms;
        animation-delay: 1800ms;
    }
    .animated-delay-2000ms {
        -webkit-animation-delay: 2000ms;
        -moz-animation-delay: 2000ms;
        -o-animation-delay: 2000ms;
        animation-delay: 2000ms;
    }
    .animated-delay-2s {
        -webkit-animation-delay: 2s;
        -moz-animation-delay: 2s;
        -o-animation-delay: 2s;
        animation-delay: 2s;
    }
    .animated-delay-2200ms {
        -webkit-animation-delay: 2200ms;
        -moz-animation-delay: 2200ms;
        -o-animation-delay: 2200ms;
        animation-delay: 2200ms;
    }
    .animated-delay-2400ms {
        -webkit-animation-delay: 2400ms;
        -moz-animation-delay: 2400ms;
        -o-animation-delay: 2400ms;
        animation-delay: 2400ms;
    }
    /*---------------------------------------------
        Tooltips      
    ----------------------------------------------*/

    .tooltip {
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-size: 13px;
        line-height: 21px;
        text-shadow: none;
    }
    .tooltip-inner {
        padding: 5px 13px;
        background-color: #555555;
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
    }
    .tooltip.top .tooltip-arrow {
        border-top-color: #555555;
    }
    .tooltip.left .tooltip-arrow {
        border-left-color: #555555;
    }
    .tooltip.right .tooltip-arrow {
        border-right-color: #555555;
    }
    .tooltip.bottom .tooltip-arrow {
        border-bottom-color: #555555;
    }
    .tooltip.purple .tooltip-inner {
        background-color: #673AB7;
    }
    .tooltip.purple.top .tooltip-arrow {
        border-top-color: #673AB7;
    }
    .tooltip.purple.left .tooltip-arrow {
        border-left-color: #673AB7;
    }
    .tooltip.purple.right .tooltip-arrow {
        border-right-color: #673AB7;
    }
    .tooltip.purple.bottom .tooltip-arrow {
        border-bottom-color: #673AB7;
    }
    .tooltip.success .tooltip-inner {
        background-color: #4CAF50;
    }
    .tooltip.success.top .tooltip-arrow {
        border-top-color: #4CAF50;
    }
    .tooltip.success.left .tooltip-arrow {
        border-left-color: #4CAF50;
    }
    .tooltip.success.right .tooltip-arrow {
        border-right-color: #4CAF50;
    }
    .tooltip.success.bottom .tooltip-arrow {
        border-bottom-color: #4CAF50;
    }
    .tooltip.warning .tooltip-inner {
        background-color: #FFC107;
    }
    .tooltip.warning.top .tooltip-arrow {
        border-top-color: #FFC107;
    }
    .tooltip.warning.left .tooltip-arrow {
        border-left-color: #FFC107;
    }
    .tooltip.warning.right .tooltip-arrow {
        border-right-color: #FFC107;
    }
    .tooltip.warning.bottom .tooltip-arrow {
        border-bottom-color: #FFC107;
    }
    .tooltip.info .tooltip-inner {
        background-color: #03A9F4;
    }
    .tooltip.info.top .tooltip-arrow {
        border-top-color: #03A9F4;
    }
    .tooltip.info.left .tooltip-arrow {
        border-left-color: #03A9F4;
    }
    .tooltip.info.right .tooltip-arrow {
        border-right-color: #03A9F4;
    }
    .tooltip.info.bottom .tooltip-arrow {
        border-bottom-color: #03A9F4;
    }
    .tooltip.danger .tooltip-inner {
        background-color: #f44336;
    }
    .tooltip.danger.top .tooltip-arrow {
        border-top-color: #f44336;
    }
    .tooltip.danger.left .tooltip-arrow {
        border-left-color: #f44336;
    }
    .tooltip.danger.right .tooltip-arrow {
        border-right-color: #f44336;
    }
    .tooltip.danger.bottom .tooltip-arrow {
        border-bottom-color: #f44336;
    }
    .tooltip.accent .tooltip-inner {
        background-color: #E91E63;
    }
    .tooltip.accent.top .tooltip-arrow {
        border-top-color: #E91E63;
    }
    .tooltip.accent.left .tooltip-arrow {
        border-left-color: #E91E63;
    }
    .tooltip.accent.right .tooltip-arrow {
        border-right-color: #E91E63;
    }
    .tooltip.accent.bottom .tooltip-arrow {
        border-bottom-color: #E91E63;
    }
    .tooltip.primary .tooltip-inner {
        background-color: #4d9cf8;
    }
    .tooltip.primary.top .tooltip-arrow {
        border-top-color: #4d9cf8;
    }
    .tooltip.primary.left .tooltip-arrow {
        border-left-color: #4d9cf8;
    }
    .tooltip.primary.right .tooltip-arrow {
        border-right-color: #4d9cf8;
    }
    .tooltip.primary.bottom .tooltip-arrow {
        border-bottom-color: #4d9cf8;
    }
    .tooltip.secondary .tooltip-inner {
        background-color: #9e9e9e;
    }
    .tooltip.secondary.top .tooltip-arrow {
        border-top-color: #9e9e9e;
    }
    .tooltip.secondary.left .tooltip-arrow {
        border-left-color: #9e9e9e;
    }
    .tooltip.secondary.right .tooltip-arrow {
        border-right-color: #9e9e9e;
    }
    .tooltip.secondary.bottom .tooltip-arrow {
        border-bottom-color: #9e9e9e;
    }
    /*---------------------------------------------
        Popovers     
    ----------------------------------------------*/

    .popover {
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 23px;
        background: #ffffff;
        border: 1px solid #f5f5f5;
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.25);
        -o-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.25);
        -ms-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.25);
        -moz-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.25);
        -webkit-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.25);
    }
    .popover-title {
        padding: 8px 14px;
        margin: 0;
        font-size: 14px;
        background-color: #4d9cf8;
        border-bottom: 0px solid #ebebeb;
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        color: #ffffff;
    }
    .popover-content {
        padding: 9px 14px;
    }
    .popover.top>.arrow {
        border-top-color: #e8e8e8;
    }
    .popover.left>.arrow {
        border-left-color: #e8e8e8;
    }
    .popover.right>.arrow {
        border-right-color: #e8e8e8;
    }
    .popover.bottom>.arrow {
        border-bottom-color: #e8e8e8;
    }
    .popover.success .popover-title {
        background: #4CAF50;
    }
    .popover.warning .popover-title {
        background: #FFC107;
    }
    .popover.danger .popover-title {
        background: #f44336;
    }
    .popover.info .popover-title {
        background: #03A9F4;
    }
    .popover.accent .popover-title {
        background: #E91E63;
    }
    .popover.purple .popover-title {
        background: #673AB7;
    }
    .popover.primary .popover-title {
        background: #4d9cf8;
    }
    .popover.secondary .popover-title {
        background: #9e9e9e;
    }
    [rel="popover"] {
        cursor: hand;
        cursor: pointer;
    }
    /*---------------------------------------------
        Nestable list
    ----------------------------------------------*/

    .uk-nestable-item .uk-nestable-handle {
        padding: 6px 8px;
        background: #eeeeee;
    }
    .uk-nestable-item .uk-nestable-handle:hover, .uk-nestable-item .uk-nestable-handle:active {
        background: #dddddd;
    }
    .uk-nestable-handle:after {
        color: #9a9a9a;
        font-size: 14px;
        padding: 3px;
    }
    .uk-nestable-handle:hover:after, .uk-nestable-list-dragged .uk-nestable-handle:after {
        color: #ffffff
    }
    .uk-nestable-item {
        margin-bottom: 15px;
    }
    .uk-nestable-item [data-nestable-action="toggle"] {
        padding: 0 5px;
        padding-right: 0;
        display: none;
    }
    .uk-nestable-item .list-label {
        display: inline-block;
        line-height: 1;
        padding: 5px 8px;
    }
    .uk-parent > .uk-nestable-item [data-nestable-action='toggle'] {
        display: inline-block !important;
    }
    .uk-nestable-item {
        padding: 0px;
    }
    .uk-nestable-list-dragged, .uk-nestable-list-dragged ul, .uk-nestable, .uk-nestable ul {
        list-style-type: none;
    }
    [data-nestable-action=toggle]:after {
        color: #999999;
        font-size: 14px;
        line-height: 14px;
    }
    /*---------------------------------------------
        Accordions
    ----------------------------------------------*/

    .panel-group {} .panel-default>.panel-heading, .panel-group .panel {
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
    }
    .panel-default {
        border-color: #eaeaea;
    }
    .panel-default>.panel-heading+.panel-collapse>.panel-body {
        border-top-color: #eaeaea;
    }
    .panel-default>.panel-heading a {
        text-decoration: none;
        display: block;
    }
    .panel-default>.panel-heading {
        color: #333;
        background-color: #fafafa;
        border-color: #eaeaea;
        background-image: none;
        text-decoration: none;
        display: block;
    }
    .panel-heading .panel-title a {
        padding: 15px 15px;
        display: block;
    }
    .panel-heading {
        padding: 0px 0px;
        border-bottom: 1px solid transparent;
    }
    .panel-heading .panel-title i {
        color: #999999;
        font-size: 12px;
        margin-right: 5px;
    }
    /*primary*/

    .panel-group.primary .panel-default .panel-heading,
    .panel-group.primary .panel-default .panel-heading a {
        background-color: #4d9cf8;
        color: #ffffff;
        border-color: #4d9cf8;
    }
    .panel-group.primary .panel-default {
        border-color: #4d9cf8;
    }
    .panel-group.primary .panel-default>.panel-heading+.panel-collapse>.panel-body {
        border-top-color: #4d9cf8;
    }
    .panel-group.primary .panel-heading .panel-title i {
        color: #fafafa;
    }
    /*transparent*/

    .panel-group.transparent .panel-default .panel-heading {
        background-color: transparent;
        color: #333333;
        border-color: #eaeaea;
    }
    .panel-group.transparent .panel-default {
        border-color: #eaeaea;
    }
    .panel-group.transparent .panel-default>.panel-heading+.panel-collapse>.panel-body {
        border-top-color: #eaeaea;
    }
    /*collapsed*/

    .panel-group.collapsed .panel+.panel {
        margin: 0px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .panel-group.collapsed .panel-default {
        border-bottom: 0px;
    }
    .panel-group.collapsed .panel-default:last-child {
        border-bottom: 1px solid #eaeaea;
    }
    /*---------------------------------------------
        Tabs
    ----------------------------------------------*/
    .tabs-area.row{
        margin-right: 0px;
        margin-left: 0px;
    }
    .nav-tabs>li.active>a i, .nav-tabs>li.active>a:hover i, .nav-tabs>li.active>a:focus i {
        color: #555555;
    }
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
        color: #555555;
        background-color: #fff;
        border: 1px solid #eaeaea;
        border-bottom-color: #4d9cf8;
        border-bottom-width: 2px
    }
    .nav-tabs.nav-justified>li>a, .nav-tabs>li>a {
        border: 1px solid #eaeaea;
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        background-color: #f5f5f5;
        color: #333333;
        margin-right: 5px;
    }
    .nav-tabs>li>a i {
        color: #999999;
        font-size: 14px;
        margin-right: 5px;
    }
    .nav-tabs.nav-justified, .nav-tabs {
        border-bottom: 1px solid #eaeaea;
    }
    .nav-tabs.nav-justified>li>a, .nav-tabs>li {
        margin-bottom: -1px;
    }
    .nav-tabs>li>a:hover {
        border-color: #eaeaea;
    }
    .nav>li>a:hover, .nav>li>a:focus {
        background-color: #fafafa;
    }
    .tab-content {
        padding: 15px;
        border: 1px solid #eaeaea;
        background-color: #ffffff;
        border-top: 0px;
    }
    .nav-tabs.nav-justified>li:last-child>a {
        margin-right: 0px;
    }
    .nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:hover, .nav-tabs.nav-justified>.active>a:focus {
        border: 1px solid #eaeaea;
        border-bottom-color: transparent;
        background-color: #ffffff;
    }
    .nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
        background-color: #f5f5f5;
        border-color: #eaeaea;
    }
    .nav.primary .open>a, .nav.primary .open>a:hover, .nav.primary .open>a:focus {
        background-color: #4d9cf8;
        border-color: #4d9cf8;
        color: #ffffff;
    }
    /*transparent*/

    .nav-tabs.transparent > li > a {
        background-color: transparent;
    }
    .nav.transparent >li>a:hover, .nav.transparent >li>a:focus {
        background-color: transparent;
    }
    .nav-tabs.transparent>li.active>a, .nav-tabs.transparent>li.active>a:hover, .nav-tabs.transparent>li.active>a:focus {
        color: #555555;
        background-color: #fff;
        border: 1px solid #eaeaea;
        border-bottom-color: transparent;
    }
    /*primary*/

    .nav-tabs.primary>li>a i {
        color: #fafafa;
    }
    .nav-tabs.primary>li.active>a i, .nav-tabs.primary>li:focus>a i, .nav-tabs.primary>li:hover>a i {
        color: #555555;
    }
    .nav-tabs.primary > li > a {
        background-color: #4d9cf8;
        color: #ffffff;
        border: 1px solid #4d9cf8;
    }
    .nav.primary >li>a:hover, .nav.primary >li>a:focus {
        background-color: #fafafa;
        color: #555555;
        border-bottom-color: transparent;
    }
    .nav-tabs.primary>li.active>a, .nav-tabs.primary>li.active>a:hover, .nav-tabs.primary>li.active>a:focus {
        color: #555555;
        background-color: #fff;
        border: 1px solid #4d9cf8;
        border-bottom-color: transparent;
    }
    .nav-tabs.primary {
        border-bottom: 1px solid #4d9cf8;
    }
    .tab-content.primary {
        border: 1px solid #4d9cf8;
        border-top: 0px;
    }
    /*horizontal right aligned*/

    .nav-tabs.right-aligned li {
        float: right;
    }
    .nav-tabs.right-aligned li a {
        margin-right: 0px;
        margin-left: 5px;
    }
    /*vertical left*/

    .nav-tabs.vertical.left-aligned li {
        display: block;
        width: 100%;
        min-width: 120px;
    }
    .nav-tabs.vertical.left-aligned li a {
        margin-right: 0px;
    }
    .nav-tabs.vertical.left-aligned {
        padding-right: 0px;
        z-index: 2;
    }
    .tab-content.vertical.left-aligned {
        padding-left: 0px;
        border: 1px solid #eaeaea;
        border-left: 1px solid #eaeaea;
        margin-left: -1px;
        z-index: 1;
    }
    .tab-content.vertical.left-aligned .tab-pane {
        padding-left: 15px;
        padding-right: 15px;

    }
    .nav-tabs.vertical.left-aligned>li.active>a, .nav-tabs.vertical.left-aligned>li.active>a:hover, .nav-tabs.vertical.left-aligned>li.active>a:focus {
        color: #555555;
        background-color: #fff;
        border: 1px solid #eaeaea;
        border-right-color: transparent;
    }
    .nav-tabs.vertical.left-aligned>li>a {
        border-right: 1px solid #eaeaea;
    }
    .nav-tabs.vertical.left-aligned > li > a {
        margin-bottom: 5px;
    }
    .nav-tabs.vertical.left-aligned > li:last-child > a {
        margin-bottom: 0px;
    }
    /*vertical primary*/

    .nav-tabs.vertical.left-aligned.primary {
        border-right: 1px solid #4d9cf8;
        border-bottom: 0px;
        z-index: 2;
    }
    .nav-tabs.vertical.left-aligned.primary>li.active>a, .nav-tabs.vertical.left-aligned.primary>li.active>a:hover, .nav-tabs.vertical.left-aligned.primary>li.active>a:focus {
        color: #555555;
        background-color: #fff;
        border: 1px solid #4d9cf8;
        border-right-color: transparent;
    }
    .nav.vertical.left-aligned.primary >li>a:hover, .nav.vertical.left-aligned.primary >li>a:focus {
        border-bottom-color: #4d9cf8;
        border-right-color: transparent;
    }
    .tab-content.vertical.left-aligned.primary {
        border: 1px solid #4d9cf8;
        border-left: 1px solid #4d9cf8;
        margin-left: -1px;
        z-index: 1;
    }
    .nav-tabs.vertical.left-aligned.primary>li>a {
        margin-right: -1px;
    }
    .nav-tabs.vertical.left-aligned.primary>li {
        margin-bottom: 0px;
    }
    /*vertical transparent*/

    .nav-tabs.vertical.left-aligned.transparent > li > a {
        background-color: transparent;
    }
    .nav.vertical.left-aligned.transparent >li>a:hover, .nav.vertical.left-aligned.transparent >li>a:focus {
        background-color: transparent;
    }
    .nav-tabs.vertical.left-aligned.transparent>li.active>a, .nav-tabs.vertical.left-aligned.transparent>li.active>a:hover, .nav-tabs.vertical.left-aligned.transparent>li.active>a:focus {
        color: #555555;
        background-color: #fff;
        border: 1px solid #eaeaea;
        border-right-color: transparent;
        border-bottom-color: #eaeaea;
    }
    .nav-tabs.vertical.left-aligned.transparent {
        border-right: 0px solid #eaeaea;
        border-bottom: 0px solid #eaeaea;
    }
    /*vertical right*/

    .nav-tabs.vertical.right-aligned li {
        display: block;
        width: 100%;
        min-width: 120px;
    }
    .nav-tabs.vertical.right-aligned li a {
        margin-left: 0px;
    }
    .nav-tabs.vertical.right-aligned {
        padding-left: 0px;
        border-bottom: 0px;
        z-index: 2;
    }
    .tab-content.vertical.right-aligned {
        padding-right: 0px;
        border: 1px solid #eaeaea;
        border-right: 1px solid #eaeaea;
        margin-right: -1px;
        z-index: 1;
    }
    .tab-content.vertical.right-aligned .tab-pane {
        padding-right: 15px;
    }
    .nav-tabs.vertical.right-aligned>li.active>a, .nav-tabs.vertical.right-aligned>li.active>a:hover, .nav-tabs.vertical.right-aligned>li.active>a:focus {
        color: #555555;
        background-color: #fff;
        border: 1px solid #eaeaea;
        border-left-color: transparent;
    }
    .nav-tabs.vertical.right-aligned>li>a {
        border-left: 1px solid #eaeaea;
    }
    .nav-tabs.vertical.right-aligned > li > a {
        margin-bottom: 5px;
    }
    .nav-tabs.vertical.right-aligned > li:last-child > a {
        margin-bottom: 0px;
    }
    /*vertical right primary*/
    .width-20{
        width: 20px !important
    }
    .nav-tabs.vertical.right-aligned.primary {
        border-left: 1px solid #4d9cf8;
        border-bottom: 0px;
        z-index: 2;
    }
    .nav-tabs.vertical.right-aligned.primary>li.active>a, .nav-tabs.vertical.right-aligned.primary>li.active>a:hover, .nav-tabs.vertical.right-aligned.primary>li.active>a:focus {
        color: #555555;
        background-color: #fff;
        border: 1px solid #4d9cf8;
        border-left-color: transparent;
    }
    .nav.vertical.right-aligned.primary >li>a:hover, .nav.vertical.right-aligned.primary >li>a:focus {
        border-bottom-color: #4d9cf8;
        border-left-color: transparent;
    }
    .tab-content.vertical.right-aligned.primary {
        border: 1px solid #4d9cf8;
        border-right: 1px solid #4d9cf8;
        margin-right: -1px;
        z-index: 1;
    }
    .nav-tabs.vertical.right-aligned.primary>li>a {
        margin-left: -1px;
    }
    .nav-tabs.vertical.right-aligned.primary>li {
        margin-bottom: 0px;
    }
    /*vertical right transparent*/

    .nav-tabs.vertical.right-aligned.transparent > li > a {
        background-color: transparent;
    }
    .nav.vertical.right-aligned.transparent >li>a:hover, .nav.vertical.right-aligned.transparent >li>a:focus {
        background-color: transparent;
    }
    .nav-tabs.vertical.right-aligned.transparent>li.active>a, .nav-tabs.vertical.right-aligned.transparent>li.active>a:hover, .nav-tabs.vertical.right-aligned.transparent>li.active>a:focus {
        color: #555555;
        background-color: #fff;
        border: 1px solid #eaeaea;
        border-left-color: transparent;
        border-bottom-color: #eaeaea;
    }
    .nav-tabs.vertical.right-aligned.transparent {
        border-left: 0px solid #eaeaea;
        border-bottom: 0px solid #eaeaea;
    }
    /*---------------------------------------------
        UI Grid
    ----------------------------------------------*/

    .ui-grids .panel {
        border: 0px solid #eaeaea;
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        background-color: #f5f5f5;
        color: #333333;
        box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -webkit-box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -moz-box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -o-box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -ms-box-shadow: 0 2px 4px rgba(33,33,33,.2);
    }
    .ui-grids .row .col-lg-1 .panel-body {
        padding: 11px;
    }
    /*---------------------------------------------
        UI Calendar
    ----------------------------------------------*/

    .fc-button {
        min-height: 34px;
    }
    .fc-state-default {
        background-color: #f5f5f5;
        background-image: none;
        border-color: #eaeaea;
        color: #333;
        text-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -moz-border-radius: 0px 0 0 0;
        border-radius: 0px 0 0 0;
        -webkit-border-radius: 0px 0 0 0;
    }
    .fc-state-default.fc-corner-left {
        -webkit-border-top-left-radius: 0px;
        -moz-border-radius-topleft: 0px;
        border-top-left-radius: 0px;
        -webkit-border-bottom-left-radius: 0px;
        -moz-border-radius-bottomleft: 0px;
        border-bottom-left-radius: 0px;
    }
    .fc-state-default.fc-corner-right {
        -webkit-border-top-right-radius: 0px;
        -moz-border-radius-topright: 0px;
        border-top-right-radius: 0px;
        -webkit-border-bottom-right-radius: 0px;
        -moz-border-radius-bottomright: 0px;
        border-bottom-right-radius: 0px;
    }
    .fc-unthemed th, .fc-unthemed td, .fc-unthemed hr, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-row, .fc-unthemed .fc-popover {
        border-color: #eaeaea;
    }
    .fc th {
        padding: 5px;
        font-weight: 400;
        font-size: 15px;
        color: #ffffff;
        background-color: #673AB7;
    }
    .fc .fc-content-skeleton td {
        padding: 3px 5px 0px 5px;
    }
    .fc-event-container .fc-event, .fc-draggable {
        border: 0px solid transparent;
        padding: 5px;
        text-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -moz-border-radius: 0px 0 0 0;
        border-radius: 0px 0 0 0;
        -webkit-border-radius: 0px 0 0 0;
        background-image: linear-gradient(-12deg,#2a57d7 0,#9eeeff 100%);
    }
    .fc-row table td {
        min-height: 120px;
    }
    .fc-unthemed .fc-today {
        background: rgba(153, 114, 181, 0.1);
    }
    #external-events {
        text-align: left;
    }
    #external-events h4 {
        font-size: 16px;
        margin-top: 0;
        padding-top: 1em;
    }
    #external-events .fc-event {
        margin: 5px 0 0 0;
        cursor: move;
        padding: 5px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        border: 0px;
    }
    #external-events p {
        margin: 1.5em 0;
        font-size: 11px;
        color: #666;
    }
    #external-events p input {
        margin: 0;
        vertical-align: middle;
    }
    .fc-scroller {
        overflow-y: auto !important;
        overflow-x: auto !important;
        height: auto !important;
    }
    .fc-view-container, .fc-widget-content {
        background-color: #ffffff;
    }
    /*---------------------------------------------
        Timeline Centered Style
    ----------------------------------------------*/

    .timeline {
        list-style: none;
        padding: 20px 0 20px;
        position: relative;
    }
    .timeline:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 10px;
        background-color: #eaeaea;
        left: 50%;
        margin-left: -5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    .timeline > li {
        margin-bottom: 20px;
        position: relative;
    }
    .timeline > li:before, .timeline > li:after {
        content: " ";
        display: table;
    }
    .timeline > li:after {
        clear: both;
    }
    .timeline > li:before, .timeline > li:after {
        content: " ";
        display: table;
    }
    .timeline > li:after {
        clear: both;
    }
    .timeline > li > .timeline-panel {
        width: 44%;
        float: left;
        margin-left: 0px !important;
        border: 1px solid #eaeaea;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        padding: 20px;
        position: relative;
        -webkit-box-shadow: 0 1px 6px rgba(150, 150, 150, 0.175);
        -moz-box-shadow: 0 1px 6px rgba(150, 150, 150, 0.175);
        box-shadow: 0 1px 6px rgba(150, 150, 150, 0.175);
        margin-left: -15px;
        z-index: 11;
    }
    .timeline > li > .timeline-panel:before {
        position: absolute;
        top: 36px;
        right: -15px;
        display: inline-block;
        border-top: 15px solid transparent;
        border-left: 15px solid #eaeaea;
        border-right: 0 solid #eaeaea;
        border-bottom: 15px solid transparent;
        content: " ";
    }
    .timeline > li > .timeline-panel:after {
        position: absolute;
        top: 37px;
        right: -14px;
        display: inline-block;
        border-top: 14px solid transparent;
        border-left: 14px solid #fff;
        border-right: 0 solid #fff;
        border-bottom: 14px solid transparent;
        content: " ";
    }
    .timeline > li > .timeline-badge {
        color: #fff;
        width: 70px;
        height: 70px;
        line-height: 65px;
        font-size: 30px;
        text-align: center;
        position: absolute;
        top: 20px;
        left: 50%;
        margin-left: -35px;
        background-color: #673AB7;
        z-index: 10;
        -webkit-border-top-right-radius: 50%;
        -moz-border-radius-topright: 50%;
        border-top-right-radius: 50%;
        -webkit-border-top-left-radius: 50%;
        -moz-border-radius-topleft: 50%;
        border-top-left-radius: 50%;
        -webkit-border-bottom-right-radius: 50%;
        -moz-border-radius-bottomright: 50%;
        border-bottom-right-radius: 50%;
        -webkit-border-bottom-left-radius: 50%;
        -moz-border-radius-bottomleft: 50%;
        border-bottom-left-radius: 50%;
        border: 5px solid #eaeaea;
    }
    .timeline > li > .timeline-badge i {
        font-size: 28px;
    }
    .timeline > li.timeline-inverted > .timeline-panel {
        float: right;
        width: 44%
    }
    .timeline > li.timeline-inverted > .timeline-panel:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto;
    }
    .timeline > li.timeline-inverted > .timeline-panel:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto;
    }
    .timeline-badge.primary {
        background-color: #4d9cf8 !important;
    }
    .timeline-badge.success {
        background-color: #4CAF50 !important;
    }
    .timeline-badge.warning {
        background-color: #FFC107 !important;
    }
    .timeline-badge.danger {
        background-color: #f44336 !important;
    }
    .timeline-badge.info {
        background-color: #03A9F4 !important;
    }
    .timeline-title {
        margin-top: 0;
        color: inherit;
    }
    .timeline-body > p, .timeline-body > ul {
        margin-bottom: 0;
    }
    .timeline-body > p + p {
        margin-top: 5px;
    }
    @media (max-width: 992px) {
        ul.timeline:before {
            left: 40px;
        }
        ul.timeline > li > .timeline-panel {
            width: calc(100% - 100px) !important;
            width: -moz-calc(100% - 100px) !important;
            width: -webkit-calc(100% - 100px) !important;
        }
        ul.timeline > li > .timeline-badge {
            left: 15px;
            margin-left: 0;
            top: 16px;
        }
        ul.timeline > li > .timeline-panel {
            float: right;
        }
        ul.timeline > li > .timeline-panel:before {
            border-left-width: 0;
            border-right-width: 15px;
            left: -15px;
            right: auto;
        }
        ul.timeline > li > .timeline-panel:after {
            border-left-width: 0;
            border-right-width: 14px;
            left: -14px;
            right: auto;
        }
    }
    /*---------------------------------------------
        Timeline Left Aligned Style
    ----------------------------------------------*/

    .timeline2-centered {
        position: relative;
        margin-bottom: 30px;
    }
    .timeline2-centered:before, .timeline2-centered:after {
        content: " ";
        display: table;
    }
    .timeline2-centered:after {
        clear: both;
    }
    .timeline2-centered:before, .timeline2-centered:after {
        content: " ";
        display: table;
    }
    .timeline2-centered:after {
        clear: both;
    }
    .timeline2-centered:before {
        content: '';
        position: absolute;
        display: block;
        width: 10px;
        background: #f5f5f6;
        top: 20px;
        bottom: 20px;
        margin-left: 26px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    .timeline2-centered .timeline2-entry {
        position: relative;
        margin-top: 5px;
        margin-left: 30px;
        margin-bottom: 10px;
        clear: both;
    }
    .timeline2-centered .timeline2-entry:before, .timeline2-centered .timeline2-entry:after {
        content: " ";
        display: table;
    }
    .timeline2-centered .timeline2-entry:after {
        clear: both;
    }
    .timeline2-centered .timeline2-entry:before, .timeline2-centered .timeline2-entry:after {
        content: " ";
        display: table;
    }
    .timeline2-centered .timeline2-entry:after {
        clear: both;
    }
    .timeline2-centered .timeline2-entry.begin {
        margin-bottom: 0;
    }
    .timeline2-centered .timeline2-entry.left-aligned {
        float: left;
    }
    .timeline2-centered .timeline2-entry.left-aligned .timeline2-entry-inner {
        margin-left: 0;
        margin-right: -18px;
    }
    .timeline2-centered .timeline2-entry.left-aligned .timeline2-entry-inner .timeline2-time {
        left: auto;
        right: -100px;
        text-align: left;
    }
    .timeline2-centered .timeline2-entry.left-aligned .timeline2-entry-inner .timeline2-icon {
        float: right;
    }
    .timeline2-centered .timeline2-entry.left-aligned .timeline2-entry-inner .timeline2-label {
        margin-left: 0;
        margin-right: 70px;
    }
    .timeline2-centered .timeline2-entry.left-aligned .timeline2-entry-inner .timeline2-label:after {
        left: auto;
        right: 0;
        margin-left: 0;
        margin-right: -9px;
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner {
        position: relative;
        margin-left: -20px;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner:before, .timeline2-centered .timeline2-entry .timeline2-entry-inner:after {
        content: " ";
        display: table;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner:after {
        clear: both;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner:before, .timeline2-centered .timeline2-entry .timeline2-entry-inner:after {
        content: " ";
        display: table;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner:after {
        clear: both;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-time {
        position: absolute;
        left: -100px;
        text-align: right;
        padding: 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-time > span {
        display: block;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-time > span:first-child {
        font-size: 15px;
        font-weight: bold;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-time > span:last-child {
        font-size: 12px;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-icon {
        background: #fff;
        color: #737881;
        display: block;
        width: 70px;
        height: 70px;
        -moz-background-clip: padding;
        -o-background-clip: padding-box;
        background-clip: padding-box;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        text-align: center;
        line-height: 70px;
        font-size: 21px;
        float: left;
        border: 5px solid #eaeaea;
        margin-left: -15px;
        margin-top: 40px;
        line-height: 60px;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-icon.bg-primary {
        background-color: #4d9cf8;
        color: #fff;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-icon.bg-secondary {
        background-color: #9e9e9e;
        color: #fff;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-icon.bg-success {
        background-color: #4CAF50;
        color: #fff;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-icon.bg-info {
        background-color: #03A9F4;
        color: #fff;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-icon.bg-warning {
        background-color: #FFC107;
        color: #fff;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-icon.bg-danger {
        background-color: #f44336;
        color: #fff;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label {
        position: relative;
        background: #f5f5f5;
        padding: 15px;
        margin-left: 70px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        margin-top: 45px;
        border: 0px solid #eaeaea;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        padding: 20px;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label:after {
        content: '';
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 9px 9px 9px 0;
        border-color: transparent #f5f5f5 transparent transparent;
        left: 0;
        top: 10px;
        margin-left: -9px;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label h2, .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label p {
        margin: 0;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label p + p {
        margin-top: 15px;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label h2 {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label h2 a {
        color: #4d9cf8;
    }
    .timeline2-centered .timeline2-entry .timeline2-entry-inner .timeline2-label h2 span {
        -webkit-opacity: .6;
        -moz-opacity: .6;
        opacity: .6;
        -ms-filter: alpha(opacity=60);
        filter: alpha(opacity=60);
    }
    .timeline2-icon i {
        font-size: 28px;
    }
    /*---------------------------------------------
        Image Cropper
    ----------------------------------------------*/

    .eg-preview .preview {
        background: transparent;
    }
    .eg-data {
        padding: 0px;
    }
    .eg-input .input-group-addon {
        cursor: hand;
        cursor: pointer;
    }
    /*-----------------------------------------
        Pricing Tables 
    ------------------------------------------*/

    .pricing-tables .price-pack.recommended .head {
        margin-bottom: 20px;
    }
    .pricing-tables.compress.row{
        margin-right: 0px;
        margin-left: 0px;
    }
    .pricing-tables.compress .col-sm-4, .pricing-tables.compress .col-md-4, .pricing-tables.compress .col-sm-3, .pricing-tables.compress .col-md-3 {
        padding-left: 0;
        padding-right: 0;
    }
    .pricing-tables.compress .price-pack {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
    .pricing-tables.compress .price-pack .head {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
    .price-pack {
        -webkit-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.06);
        -moz-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.06);
        box-shadow: 0 2px 2px rgba(100, 100, 100, 0.06);
        min-height: 100px;
        background: #fff;
        margin: 20px 0;
        padding-bottom: 25px;
        text-align: center;
    }
    .price-pack .head {
        padding: 15px 20px;
        background: #4d9cf8;
        color: #fff;
    }
    .price-pack {
        border: 1px solid #fafafa;
        border-top: 0px;
        border-bottom: 0px;
    }
    .compress .price-pack {
        border: 0px solid #fafafa;
    }
    .price-pack .head h3 {
        color: #ffffff;
    }
    .price-pack .head h1, .price-pack .head h2, .price-pack .head h3 {
        padding: 0;
        margin: 0;
        font-weight: 100;
    }
    .price-pack .price {
        border-top: 1px solid #eaeaea;
        margin: 0px auto 30px auto;
        width: 80%;
        padding-top: 15px;
    }
    .price-pack .price h3 {
        font-size: 82px;
        vertical-align: top;
        line-height: 1;
    }
    .price-pack .price h3 span {
        font-size: 38px;
        vertical-align: top;
        position: relative;
        margin: 6px 0 0 -7px;
        display: inline-block;
    }
    .price-pack .price h4 {
        color: #aaa;
        font-size: 14px;
    }
    .price-pack .btn {
        text-transform: uppercase;
    }
    .price-pack ul {
        padding: 30px 15px;
        margin-bottom: 0px;
    }
    .price-pack ul li {
        margin-bottom: 13.8px;
    }
    .price-pack ul li a {
        text-decoration: underline;
        color: #e6e9ed;
    }
    .price-pack ul li:last-child {
        border-bottom: none;
    }
    .price-pack ul strong {
        font-weight: 700;
    }
    /*blockquote.purple{ border-color: rgba(103,58,183,1.0); }
    blockquote.accent{ border-color: #E91E63; }
    */

    .price-pack.recommended {
        margin-top: 6px;
        -webkit-box-shadow: 0 0 6px rgba(100, 100, 100, 0.42);
        -moz-box-shadow: 0 0 6px rgba(100, 100, 100, 0.42);
        box-shadow: 0 0 6px rgba(100, 100, 100, 0.42);
        position: relative;
        z-index: 99;
        background-color: #fafafa;
    }
    .price-pack.recommended .head {
        background: #E91E63;
    }
    .price-pack.recommended .btn {
        margin-bottom: 10px;
    }
    /*---------------------------------------------
        Tocify 
    ----------------------------------------------*/

    .tocify li.tocify-item.active, .tocify li.tocify-item.active a, .tocify .nav li.tocify-item:hover, .tocify .nav li.tocify-item:hover a {
        background-color: #4d9cf8;
        color: #ffffff !important;
    }
    .tocify-area{
        margin-left: 0px;
        margin-right: 0px;
    }
    /*.tocify li.tocify-item.active, 
        .tocify .nav li.tocify-item:hover{
        padding-left: 10px;
        transition: 200ms;
        }*/

    .tocify li.tocify-item {
        background-color: #fafafa;
        margin-bottom: 1px;
        display: block;
        color: #555555;
        padding-left: 0px;
    }
    .tocify li.tocify-item a {
        color: #555555;
    }
    .tocify {
        width: auto;
        max-height: auto;
        overflow: auto;
        position: fixed;
        border: 0px;
        webkit-border-radius: 0px;
        moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        margin-left: 0px;
        min-width: 210px;
        padding: 0px;
    }
    /*---------------------------------------------
        FAQ
    ----------------------------------------------*/

    .faq-panels .panel-heading [data-toggle="collapse"]:after {
        font-family: 'fontAwesome';
        content: "\f107";
        float: right;
        width: 23px;
        color: #4d9cf8;
        font-size: 14px;
        border: 1px solid;
        line-height: 23px;
        height: 23px;
        background: transparent;
        border-radius: 50%;
        text-align: center;
    }
    .faq-panels .panel-heading [data-toggle="collapse"].collapsed:after {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
        color: #555555;
    }
    /*---------------------------------------------
        Portfolio Gallery
    ----------------------------------------------*/

    #portfolio {
        padding: 0;
    }
    #portfolio .portfolio-filter {
        list-style: none;
        padding: 0;
        margin: 0 0 15px;
        display: inline-block;
    }
    #portfolio .portfolio-filter > li {
        float: left;
        display: block;
        margin-bottom: 15px;
    }
    #portfolio .portfolio-filter > li a {
        display: block;
        position: relative;
    }
    #portfolio .portfolio-filter > li a:hover, #portfolio .portfolio-filter > li a.active {
        background-color: #673AB7;
    }
    #portfolio .portfolio-filter > li a.active:after {} #portfolio .portfolio-item {
        /*  width: 33.2%;*/
        
        float: left;
        padding: 5px;
    }
    #portfolio .portfolio-item .portfolio-item-inner img{
        width: 100%;
    }

    #portfolio .portfolio-item .portfolio-item-inner {
        position: relative;
        overflow: hidden;
    }
    #portfolio .portfolio-item .portfolio-item-inner .portfolio-info {
        opacity: 0;
        -moz-transition: opacity 400ms;
        -o-transition: opacity 400ms;
        transition: opacity 400ms;
        -webkit-transition: opacity 400ms;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px;
        background: #E91E63;
        color: #fff;
        display: none;
    }
    #portfolio.outside .portfolio-item .portfolio-item-inner .portfolio-info{
        position: relative;
        background: #eeeeee;
        padding: 15px;
        color: #757575;
        display: block;
        opacity: 1;
    }

    #portfolio.outside .portfolio-item .portfolio-item-inner .portfolio-info h3{
        color: #424242;
    }
    #portfolio.outside .portfolio-item .portfolio-item-inner .portfolio-info .desc{
        color: #616161;
    }

    #portfolio .portfolio-item .portfolio-item-inner .portfolio-info h3 {
        font-size: 15px;
        line-height: 24px;
        margin: 0;
        color: #fff;
        font-weight: 400;
    }
    #portfolio .portfolio-item .portfolio-item-inner .portfolio-info .desc {
        font-size: 13px;
        line-height: 21px;
        margin: 0;
        color: #eee;
        font-weight: 400;
    }
    #portfolio .portfolio-item .portfolio-item-inner .portfolio-info .preview {
        position: absolute;
        top: -20px;
        right: 20px;
        background-image: none;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #ffffff;
        background-color: #673AB7;
    }
    #portfolio .portfolio-item:hover .portfolio-info {
        opacity: 1;
        display: block;
    }
    /* Start: Recommended Isotope styles */
    /**** Isotope Filtering ****/

    .isotope-item {
        z-index: 2;
    }
    .isotope-hidden.isotope-item {
        pointer-events: none;
        z-index: 1;
    }
    /**** Isotope CSS3 transitions ****/

    .isotope, .isotope .isotope-item {
        -webkit-transition-duration: 0.8s;
        -moz-transition-duration: 0.8s;
        -o-transition-duration: 0.8s;
        transition-duration: 0.8s;
    }
    .isotope {
        -webkit-transition-property: height, width;
        -moz-transition-property: height, width;
        -o-transition-property: height, width;
        transition-property: height, width;
    }
    .isotope .isotope-item {
        -webkit-transition-property: -webkit-transform, opacity;
        -moz-transition-property: -moz-transform, opacity;
        -o-transition-property: -o-transform, opacity;
        transition-property: transform, opacity;
    }
    /**** disabling Isotope CSS3 transitions ****/

    .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
        -webkit-transition-duration: 0s;
        -moz-transition-duration: 0s;
        -o-transition-duration: 0s;
        transition-duration: 0s;
    }
    /* End: Recommended Isotope styles */
    /* disable CSS transitions for containers with infinite scrolling*/

    .isotope.infinite-scrolling {
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
    }
    /*---------------------------------------------
        jVector Maps
    ----------------------------------------------*/

    .jvectormap-container {
        width: 100%;
        height: 100%;
    }
    .jvectormap-zoomin, .jvectormap-zoomout {
        width: 16px;
        height: 16px;
    }
    .tab-pane .jvectormap-container svg {
        width: 100%;
        height: 100%;
        min-height: 500px;
    }

    /*---------------------------------------------
        Tables
    ----------------------------------------------*/

    .table>thead>tr>td.primary, .table>tbody>tr>td.primary, .table>tfoot>tr>td.primary, .table>thead>tr>th.primary, .table>tbody>tr>th.primary, .table>tfoot>tr>th.primary, .table>thead>tr.primary>td, .table>tbody>tr.primary>td, .table>tfoot>tr.primary>td, .table>thead>tr.primary>th, .table>tbody>tr.primary>th, .table>tfoot>tr.primary>th {
        background-color: rgba(31, 181, 172, 0.2);
    }
    .table>thead>tr>td.accent, .table>tbody>tr>td.accent, .table>tfoot>tr>td.accent, .table>thead>tr>th.accent, .table>tbody>tr>th.accent, .table>tfoot>tr>th.accent, .table>thead>tr.accent>td, .table>tbody>tr.accent>td, .table>tfoot>tr.accent>td, .table>thead>tr.accent>th, .table>tbody>tr.accent>th, .table>tfoot>tr.accent>th {
        background-color: rgba(250, 133, 100, .2);
    }
    .table>thead>tr>td.purple, .table>tbody>tr>td.purple, .table>tfoot>tr>td.purple, .table>thead>tr>th.purple, .table>tbody>tr>th.purple, .table>tfoot>tr>th.purple, .table>thead>tr.purple>td, .table>tbody>tr.purple>td, .table>tfoot>tr.purple>td, .table>thead>tr.purple>th, .table>tbody>tr.purple>th, .table>tfoot>tr.purple>th {
        background-color: rgba(153, 114, 181, .2);
    }
    .table>thead>tr>td.secondary, .table>tbody>tr>td.secondary, .table>tfoot>tr>td.secondary, .table>thead>tr>th.secondary, .table>tbody>tr>th.secondary, .table>tfoot>tr>th.secondary, .table>thead>tr.secondary>td, .table>tbody>tr.secondary>td, .table>tfoot>tr.secondary>td, .table>thead>tr.secondary>th, .table>tbody>tr.secondary>th, .table>tfoot>tr.secondary>th {
        background-color: #9e9e9e;
    }
    .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
        border-color: #eaeaea;
        padding: 10px;
    }
    /*---------------------------------------------
        Data Tables
    ----------------------------------------------*/

    table.dataTable thead th, table.dataTable thead td {
        border-bottom: 1px solid #bbbbbb;
    }
    table.dataTable tfoot th, table.dataTable tfoot td {
        border-top: 1px solid #bbbbbb;
    }
    table.dataTable.no-footer {
        border-bottom: 1px solid #bbbbbb;
        border-left: 0
    }
    .dataTables_wrapper .dataTables_info {
        clear: none;
    }
    .dataTable .details {
        background-color: #ffffff;
    }
    /*---------------------------------------------
        Form Editors
    ----------------------------------------------*/
    /*bootstrap wysihtml5*/

    ul.wysihtml5-toolbar a.btn.wysihtml5-command-active {
        background-image: none;
        -webkit-box-shadow: inset 0 1px 2px rgba(100, 100, 100, .15), 0 1px 2px rgba(100, 100, 100, .05);
        -moz-box-shadow: inset 0 1px 2px rgba(100, 100, 100, .15), 0 1px 2px rgba(100, 100, 100, .05);
        box-shadow: inset 0 1px 2px rgba(100, 100, 100, .15), 0 1px 2px rgba(100, 100, 100, .05);
        background-color: #D9D9D9;
        color: #777777;
        outline: 0;
    }
    /*ckeditor*/

    .cke_toolgroup {
        margin: 0 6px 5px 0 !important;
        border: 1px solid #e8e8e8 !important;
        border-bottom-color: #e8e8e8 !important;
        -moz-border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
        border-radius: 0px !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        background: #f8f8f8 !important;
        background-image: none !important;
    }
    a.cke_button {
        display: inline-block;
        height: 18px;
        padding: 6px 8px !important;
        outline: 0;
        cursor: default;
        float: left;
        border: 0;
    }
    .cke_top {
        border-bottom: 1px solid #f5f5f5 !important;
        padding: 6px 8px 2px !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        background: #f8f8f8 !important;
        background-image: none !important;
    }
    .cke_button_on {
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        background: #eeeeee !important;
        background-image: none !important;
    }
    a.cke_button_off:hover, .cke_hc a.cke_button_off:focus, .cke_hc a.cke_button_off:active, a.cke_button_disabled:hover, .cke_hc a.cke_button_disabled:focus, .cke_hc a.cke_button_disabled:active {
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        background: #eeeeee !important;
        background-image: none !important;
    }
    .cke_combo_button {
        margin: 0 6px 5px 0 !important;
        border: 1px solid #e8e8e8 !important;
        border-bottom-color: #e8e8e8 !important;
        -moz-border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
        border-radius: 0px !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        background: #f8f8f8 !important;
        background-image: none !important;
    }
    .cke_panel {
        margin: 0 6px 5px 0 !important;
        border: 1px solid #e8e8e8 !important;
        border-bottom-color: #e8e8e8 !important;
        -moz-border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
        border-radius: 0px !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        background: #f8f8f8 !important;
        background-image: none !important;
    }
    .cke_bottom {
        border: 1px solid #e8e8e8 !important;
        -webkit-border-radius: 0px !important;
        -moz-border-radius: 0px !important;
        border-radius: 0px !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        background: #f8f8f8 !important;
        background-image: none !important;
        background: #f8f8f8 !important;
        background-image: none !important;
    }
    .cke_chrome {
        border: 1px solid #e8e8e8 !important;
        -webkit-border-radius: 0px !important;
        -moz-border-radius: 0px !important;
        border-radius: 0px !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }
    /*markdown editor*/

    .uk-htmleditor-fullscreen {
        z-index: 1000;
    }
    /*---------------------------------------------
        DropZone File Uploader (Drag n Drop)
    ----------------------------------------------*/
    .dropzone {
        min-height: 200px;
        border: 1px solid rgba(33, 33, 33, 0.1);
        background: white;
        padding: 20px 20px;
        box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -webkit-box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -moz-box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -o-box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -ms-box-shadow: 0 2px 4px rgba(33,33,33,.2);
    }
    .dropzone .dz-message {
        line-height: 200px;
        font-size: 30px;
        opacity: 0.6;
    }
    .custom-dropzone {
        display: inline-block;
        background-color: #f5f5f5;
        box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -webkit-box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -moz-box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -o-box-shadow: 0 2px 4px rgba(33,33,33,.2);
        -ms-box-shadow: 0 2px 4px rgba(33,33,33,.2);
    }
    .custom-dropzone.row{
        margin-left: 0px;
        margin-right: 0px;
    }
    .custom-dropzone .drop-area {
        padding: 0px 0 0px 15px;
    }
    .custom-dropzone .drop-area {
        min-height: 250px;
    }
    .custom-dropzone .drop-table {
        background-color: #fafafa;
        min-height: 250px;
        overflow: hidden;
        position: relative;
        height: 250px;
    }
    .custom-dropzone #customDZ {
        background-color: #f5f5f5;
        height: 250px;
    }
    .custom-dropzone #customDZ {
        width: 100%;
        height: 250px;
        margin: 0px !important;
        top: 0px;
        left: 0px;
        background-image: url('../plugins/dropzone/images/custom-dropzone.png') !important;
        cursor: hand;
        cursor: pointer;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        -moz-background-size: 70% !important;
        -o-background-size: 70% !important;
        background-size: 70% !important;
    }
    .custom-dropzone #customDZ {
        background: #f5f5f5;
        border: 0px solid transparent;
        min-height: 250px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        padding: 15px;
    }
    .custom-dropzone .drop-table.ps-container > .ps-scrollbar-x-rail, .custom-dropzone .drop-table.ps-container > .ps-scrollbar-y-rail {
        opacity: 0.6;
        background-color: rgba(100, 100, 100, 0.1);
        display: block !important;
        height: 250px !important;
    }
    /*---------------------------------------------
        UI Icons
    ----------------------------------------------*/

    .glyphicon, .fa {
        font-size: 14px;
    }
    .icon-sm {
        font-size: 21px;
    }
    .icon-xs {
        font-size: 14px;
    }
    .icon-md {
        font-size: 28px;
    }
    .icon-lg {
        font-size: 42px;
    }
    .icon-xlg {
        font-size: 70px;
    }
    .icon-rounded {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        padding: 15px;
        background-color: #777777;
        color: #ffffff;
    }
    .icon-cornered {
        -webkit-border-radius: 10%;
        -moz-border-radius: 10%;
        border-radius: 10%;
        padding: 15px;
        background-color: #777777;
        color: #ffffff;
    }
    .icon-square {
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        padding: 15px;
        background-color: #777777;
        color: #ffffff;
    }
    .icon-bordered {
        border: 1px solid #777777;
        padding: 15px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-color: transparent;
        color: #777777;
    }
    .icon-xs.icon-rounded, .icon-xs.icon-cornered, .icon-xs.icon-square, .icon-xs.icon-bordered {
        padding: 10px;
    }
    .icon-sm.icon-rounded, .icon-sm.icon-cornered, .icon-sm.icon-square, .icon-sm.icon-bordered {
        padding: 15px;
    }
    .icon-md.icon-rounded, .icon-md.icon-cornered, .icon-md.icon-square, .icon-md.icon-bordered {
        padding: 20px;
    }
    .icon-lg.icon-rounded, .icon-lg.icon-cornered, .icon-lg.icon-square, .icon-lg.icon-bordered {
        padding: 25px;
    }
    .icon-xlg.icon-rounded, .icon-xlg.icon-cornered, .icon-xlg.icon-square, .icon-xlg.icon-bordered {
        padding: 35px;
    }
    .icon-purple {
        color: #edc781;
    }
    .icon-accent {
        color: #E91E63;
    }
    .icon-primary {
        color: #4d9cf8;
    }
    .has-gradient-to-right-bottom {
        background-image: linear-gradient(-12deg,#2a57d7 0,#9eeeff 100%) !important
    }
    .border-gradient{
        border:2px solid transparent;
        border-image: linear-gradient(to right bottom, #e8962e, #e45131);
        border-image-slice: 10;
    }
    .border-dashed{
        border:2px dashed #4d9cf8;
    }
    .has-border-left-3{
        border-bottom: 3px solid #4d9cf8;
    }
    .has-border-bottom-3{
        border-bottom: 3px solid #fea01d;
    }
    .bg-gray{
    background: #eaeaea;
    }
    .color-white{
        color: #fff !important
    }
    .color-primary{
        color: #4d9cf8 !important
    }
    .block{
        display: block !important;
    }
    .icon-white{
        color: #fff
    }
    .icon-success {
        color: #4CAF50;
    }
    .icon-info {
        color: #03A9F4;
    }
    .icon-warning {
        color: #FFC107;
    }
    .icon-danger {
        color: #f44336;
    }
    .icon-secondary {
        color: #9e9e9e;
    }
    .icon-default {
        color: #777777;
    }
    .icon-purple.icon-rounded, .icon-purple.icon-cornered, .icon-purple.icon-square {
        background-color: #673AB7;
        color: #ffffff;
    }
    .icon-accent.icon-rounded, .icon-accent.icon-cornered, .icon-accent.icon-square {
        background-color: #E91E63;
        color: #ffffff;
    }
    .icon-primary.icon-rounded, .icon-primary.icon-cornered, .icon-primary.icon-square {
        background-color: #4d9cf8;
        color: #ffffff;
    }
    .icon-success.icon-rounded, .icon-success.icon-cornered, .icon-success.icon-square {
        background-color: #4CAF50;
        color: #ffffff;
    }
    .icon-info.icon-rounded, .icon-info.icon-cornered, .icon-info.icon-square {
        background-color: #03A9F4;
        color: #ffffff;
    }
    .icon-warning.icon-rounded, .icon-warning.icon-cornered, .icon-warning.icon-square {
        background-color: #FFC107;
        color: #ffffff;
    }
    .icon-danger.icon-rounded, .icon-danger.icon-cornered, .icon-danger.icon-square {
        background-color: #f44336;
        color: #ffffff;
    }
    .icon-secondary.icon-rounded, .icon-secondary.icon-cornered, .icon-secondary.icon-square {
        background-color: #9e9e9e;
        color: #ffffff;
    }
    .icon-default.icon-rounded, .icon-default.icon-cornered, .icon-default.icon-square {
        background-color: #777777;
        color: #ffffff;
    }
    .icon-purple.icon-bordered {
        border: 1px solid #673AB7;
        background-color: transparent;
        color: #673AB7;
    }
    .icon-accent.icon-bordered {
        border: 1px solid #E91E63;
        background-color: transparent;
        color: #E91E63;
    }
    .icon-primary.icon-bordered {
        border: 1px solid #4d9cf8;
        background-color: transparent;
        color: #4d9cf8;
    }
    .icon-success.icon-bordered {
        border: 1px solid #4CAF50;
        background-color: transparent;
        color: #4CAF50;
    }
    .icon-info.icon-bordered {
        border: 1px solid #03A9F4;
        background-color: transparent;
        color: #03A9F4;
    }
    .icon-warning.icon-bordered {
        border: 1px solid #FFC107;
        background-color: transparent;
        color: #FFC107;
    }
    .icon-danger.icon-bordered {
        border: 1px solid #f44336;
        background-color: transparent;
        color: #f44336;
    }
    .icon-secondary.icon-bordered {
        border: 1px solid #9e9e9e;
        background-color: transparent;
        color: #9e9e9e;
    }
    .icon-default.icon-bordered {
        border: 1px solid #777777;
        background-color: transparent;
        color: #777777;
    }
    .uiicons i {
        margin: 10px 20px 0 0;
    }
    .bs-glyphicons-list, .fontawesome-icon-list {
        display: inline-block;
        margin-bottom: 15px;
        margin-right: 0px;
        margin-left: 0px;
    }
    .bs-glyphicons-list li, .fontawesome-icon-list .fa-hover {
        margin: 0 0 10px 0;
        padding: 5px 15px 3px 15px;
        display: block;
    }
    .bs-glyphicons-list li .glyphicon, .fontawesome-icon-list .fa-hover span i {
        min-width: 30px;
        color: #4d9cf8;
    }
    .bs-glyphicons-list li, .fontawesome-icon-list .fa-hover span {
        display: inline-block;
    }
    .bs-glyphicons-list li .glyphicon-class, .fontawesome-icon-list .fa-hover span span {
        margin-left: 10px;
        display: inline-block;
        position: relative;
        top: -4px;
    }
    .bs-glyphicons-list li:hover, .fontawesome-icon-list .fa-hover:hover {
        background-color: #f5f5f5;
    }
    .bs-glyphicons-list li:hover .glyphicon, .fontawesome-icon-list .fa-hover:hover i {
        color: #555555;
    }
    .bs-glyphicons-list .glyphicon, .fontawesome-icon-list .fa {
        font-size: 28px;
    }

    /*---------------------------------------------
        margins
    ----------------------------------------------*/
    .mt-0{
        margin-top: 0px !important
    }
    .mt-5{
        margin-top: 5px !important
    }
    .mt-10{
        margin-top: 10px !important
    }
    .mt-15{
        margin-top: 15px !important
    }
    .mt-20{
        margin-top: 20px !important
    }
    .mt-25{
        margin-top: 25px !important
    }
    .mt-30{
        margin-top: 30px !important
    }
    .mt-40{
        margin-top: 40px !important
    }
    .mt-50{
        margin-top: 50px !important
    }
    .mt-60{
        margin-top: 60px !important
    }
    .mt-70{
        margin-top: 70px !important
    }
    .mt-80{
        margin-top: 80px !important
    }
    .mt-90{
        margin-top: 90px !important
    }
    .mt-100{
        margin-top: 100px !important
    }

    .mb-5{
        margin-bottom: 5px !important
    }
    .mb-10{
        margin-bottom: 10px !important
    }
    .mb-15{
        margin-bottom: 15px !important
    }
    .mb-20{
        margin-bottom: 20px !important
    }
    .mb-30{
        margin-bottom: 30px !important
    }
    .mb-40{
        margin-bottom: 40px !important
    }
    .mb-50{
        margin-bottom: 50px !important
    }
    .mb-60{
        margin-bottom: 60px !important
    }
    .mb-70{
        margin-bottom: 70px !important
    }
    .mb-80{
        margin-bottom: 80px !important
    }
    .mt-90{
        margin-bottom: 90px !important
    }
    .mb-100{
        margin-bottom: 100px !important
    }
    .ml-0{
        margin-left: 0px !important
    }
    .mr-5{
        margin-right: 5px !important
    }
    .mr-10{
        margin-right: 10px !important
    }
    .mr-15{
        margin-right: 15px !important
    }
    .ml-5{
        margin-left: 5px !important
    }
    .ml-10{
        margin-left: 10px !important
    }
    .ml-20{
        margin-left: 20px !important
    }
    .no-mt{
        margin-top: 0 !important
    }
    .no-mb{
        margin-bottom: 0 !important
    }
    .no-pb{
        padding-bottom: 0 !important
    }
    .no-pt{
        padding-top: 0 !important
    }
    .no-pr{
        padding-right: 0 !important
    }
    .no-pl{
        padding-left: 0 !important
    }
    .over-h{
        overflow: hidden;
    }
    /*---------------------------------------------
        Team Members
    ----------------------------------------------*/

    .team-member .social-icons a {
        display: inline-block;
        margin-bottom: 5px;
    }
    .team-member .social-icons i {
        font-size: 14px;
        width: 30px;
        height: 30px;
        padding: 7px !important;
        text-align: center;
    }

    .team-member {
        display: inline-block;
        padding: 0px;
        border: 0px solid #eaeaea;
        margin: 0 0 30px 0;
        background-color: transparent;
    }

    .team-info h4 a{
        color: #212121;
    }

    .team-info {
        margin: 10px 0;
        display: block;
        position: relative;
        padding: 0;
    }

    .team-info span {
        color: #aaaaaa;
    }

    .team-info p, .team-info span {
        margin-top: px!important;
        font-size: 13px;
    }


    .team-member-edit{
        position: absolute;
        right: 0px;
        top: 0px;
    }

    .team-member.col .team-member-edit{
        top :0px;
    }

    .team-member.col .team-info{
        padding-left: 15px;
        margin-top: 0px;
    }

    .team-member.col .team-info h4{
        margin: 0px 0 5px 0 !important;
    }

    .team-img{
        padding: 0px;
    }

    .team-member h4,
    .tab-pane .team-info h4{
        font-size: 16px;
        line-height: 26px;
        text-decoration: none;
        margin-bottom: 0px;
    }

    .ecommerce_product .thumb, .music_genre .thumb {
        position: relative;
    }

    .ecommerce_product .thumb img, .music_genre .thumb img {
        position: relative;
        z-index: 1;
    }
    .ecommerce_product img, .music_genre img {
        width: 100%;
        height: auto;
        margin: 0;
    }

    .ecommerce_product .thumb .overlay, .music_genre .thumb .overlay {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        color: #fff;
        background-color: rgba(33,33,33,0.5);
        opacity: 0;
        -webkit-transition: .5s;
        -moz-transition: .5s;
        transition: .5s;
        -webkit-transition-timing-function: cubic-bezier(0.4,0,0.5,1);
        -moz-transition-timing-function: cubic-bezier(0.4,0,0.5,1);
        transition-timing-function: cubic-bezier(0.4,0,0.5,1);
    }

    .ecommerce_product .thumb .overlay a i, .music_genre .thumb .overlay a i {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 40px;
        color: #53bec3;
        opacity: 1;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }


    .ecommerce_product .thumb:hover .overlay, .music_genre .thumb:hover .overlay{
        opacity: 1;
    }

    /*----------------------------------------------------------------
        Login and Registration Page - Transparent Background Style
    ------------------------------------------------------------------*/

    .loginpage {
        padding: 0 50px;
    }
    .login-bg{
        background: url(../../data/crypto-dash/login-bg.html) no-repeat !important;
    }
    @media (min-width: 992px) and (max-width: 1199px) {
        .loginpage {
            padding: 0 90px;
        }
    }

    @media (max-width: 992px){
        .loginpage {
            padding: 0 15px;
        }
    }


    @media (max-width: 767px){
        .loginpage {
            padding: 0 30px;
        }
    }


    .loginpage h1 a {
        height: 92px;
        margin: 0px auto 0px auto;
        padding: 0;
        text-decoration: none;
        -moz-background-size: 345px 92px;
        -o-background-size: 345px 92px;
        background-size: 345px 92px;
        background-color: transparent;
        min-height: 92px;
        width: auto;
        background-image: url("../images/login-logo.html");
        background-position: center top;
        background-repeat: no-repeat;
        text-indent: -9999px;
        outline: 0;
        overflow: hidden;
        display: block;
    }
    .loginpage form {
        /* margin-top: 30px;
        margin-bottom: 15px;
        margin-left: 0;
        font-weight: 400;
        -webkit-box-shadow: none;
        -moz-box-shadow: none; */
        box-shadow: none;
        overflow: hidden;
        background-color: transparent;
    }
    .loginpage form .forgetmenot {
        width: 100%;
        display: block;
        margin: 12px 0 11px 0!important;
        font-weight: 400;
        float: left;
        margin-bottom: 0px;
    }
    .loginpage form p.submit {
        display: inline-block;
        width: 100%;
        margin-top: 15px;
    }
    .loginpage label {
        font-size: 14px;
        line-height: 23px;
        width: 100%;
        text-transform: uppercase;
        font-weight: 500;
    }
    .loginpage form .input, .loginpage form input[type=checkbox], .loginpage input[type=text] {
        -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
        -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
        -ms-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
        -o-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
        /* text-shadow: 1px 1px 1px rgba(200,200,200,.1); */
        
        font-weight: 500;
    }
    .loginpage form .input, .loginpage input[type=text], .loginpage input[type=password] {
        font-size: 19px;
        width: 100%;
        padding: 9px;
        line-height: 25px;
        margin: 5px 0 15px 0;
        border: 1px solid #4d9cf8;
    }
    .loginpage form .input, .loginpage form input[type=checkbox], .loginpage input[type=text], .loginpage input[type=password] {
        color: #333;
        font-size: 13px;
        font-weight: normal;
        background: #fbfbfb;
    }
    .login-form-header{
        padding: 0 15px
    }
    .login-header{
        /* display: inline-block; */
        vertical-align: middle;
        /* padding-left: 15px */
        text-align: center;
    }
    .login-header h4 small{
        color: #000;
        font-size: 16px;
        text-align: center;
        font-weight: 500;
    }
    .login-wrapper.crypto{
        display: flex;
        align-items:center;
    }
    @media(max-width: 767px){
        .login-wrapper.crypto{
            display: block;
            width: 94%;
            margin: 0 3%
        }
        .hidden-sm{
            display: none;
        }
    }
    .login-wrapper.crypto .login-header h4 small{
        color: #333
    }
    .loginpage a.signup {
        color: #333;
    }
    .login-wrapper.crypto .box.login .btn{
        margin-left: 0;
        min-width: 40%
    }
    @media (max-width: 1200px){
        .no-pl{
            padding-left: 15px !important;
        }
        .no-pr{
            padding-right: 15px !important;
        }
        .box.login .btn-primary{
            margin-left: 15px !important;
        }
    }
    .loginpage #nav a, .loginpage a {
        color: #333;
        font-size: 15px;
        /* color: #000; */
        padding-top: 1rem;
    }
    .loginpage #nav a:hover, .loginpage a:hover, .loginpage #nav a:active, .loginpage a:active {
        color: rgba(255, 255, 255, 1)
        /*#ffffff*/
        
        ;
    }
    .loginpage, .loginpage form label, .loginpage form, .loginpage .message {
        color: #333;
        font-weight: 600
    }
    .loginpage form .input, .loginpage form input[type=checkbox], .loginpage input[type=text], .loginpage input[type=password] {
        background-color: rgba(255, 255, 255, 0.6)
        /*#ffffff*/
        
        ;
    }
    .loginpage form .input:hover, .loginpage form input[type=checkbox]:hover, .loginpage input[type=text]:hover, .loginpage form .input:focus, .loginpage form input[type=checkbox]:focus, .loginpage input[type=text]:focus {
        background-color: rgba(255, 255, 255, 0.8)
        /*#ffffff*/
        
        ;
    }
    .loginpage #login_error, .loginpage .message {
        background-color: rgba(255, 255, 255, 0.6)
        /*#ffffff*/
        
        ;
    }
    .loginpage .message, .loginpage .message a, .loginpage #login_error, .loginpage #login_error a {
        color: #E91E63
        /*#E91E63*/
        
        ;
    }
    .register-social {
        margin: 30px 0;
    }
    .register-social a {
        margin: 5px 5px 5px 5px;
    }
    body.login_page {
        /* background-image: url('../images/intro.png'); */
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        min-height: 100%;
        width: 100%;
    }
    body.lockscreen {
        background-color: #eeeeee;
        background-image: none;
    }
    .register-wrapper {
        height: 100%;
        overflow: auto;
        overflow-x: hidden;
        padding-top: 100px;
    }
    #register {
        padding-bottom: 100px;
    }
    .login-wrapper {
        height: 100%;
        /* overflow: auto;
        overflow-x: hidden; */
    }
    .login-wrapper.crypto{
        background: #fff !important
    }
    /* .box.login{
        background-color: #ffffff;
        margin: 15px 0;
        -webkit-box-shadow: 0 2px 28px rgba(0,0,0,.1);
        box-shadow: 0 2px 28px rgba(0,0,0,.1);
    } */
    .box.login .content-body{
        /* padding: 5px 20px 30px 20px;
        background-color: #ffffff;
        border: 1px solid #e8e8e8;
        border-top: 0px;
        -webkit-transition: 800ms;
        -moz-transition: 800ms;
        -o-transition: 800ms;
        transition: 800ms; */
        padding-top: 30px;
    }
    /*-----------------------------------------------------------
        Display Code Wrappers
    ----------------------------------------------------------*/

    kbd {
        color: #fff;
        background-color: #555;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: inset 0 -1px 0 rgba(100, 100, 100, .25);
        -moz-box-shadow: inset 0 -1px 0 rgba(100, 100, 100, .25);
        box-shadow: inset 0 -1px 0 rgba(100, 100, 100, .25);
    }
    pre {
        color: #555555;
        background-color: #f5f5f5;
        border: 1px solid #eaeaea;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    code {
        padding: 2px 4px;
        font-size: 90%;
        color: #f44336;
        background-color: #f9f2f4;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }
    /*-----------------------------------------------------------
        List Group
    ----------------------------------------------------------*/

    .list-group {
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }
    .list-group-item:first-child {
        -webkit-border-top-left-radius: 0px;
        -moz-border-radius-topleft: 0px;
        border-top-left-radius: 0px;
        -webkit-border-top-right-radius: 0px;
        -moz-border-radius-topright: 0px;
        border-top-right-radius: 0px;
    }
    .list-group-item:last-child {
        -webkit-border-bottom-left-radius: 0px;
        -moz-border-radius-bottomleft: 0px;
        border-bottom-left-radius: 0px;
        -webkit-border-bottom-right-radius: 0px;
        -moz-border-radius-bottomright: 0px;
        border-bottom-right-radius: 0px;
    }
    .list-group-item {
        background-color: #fff;
        border: 1px solid #ddd;
        color: #333;
        background-color: #ffffff;
        border-color: #eaeaea;
    }
    .list-group-item-success {
        color: #3c763d;
        background-color: #dff0d8;
    }
    .list-group-item-info {
        color: #31708f;
        background-color: #d9edf7;
    }
    .list-group-item-warning {
        color: #8a6d3b;
        background-color: #fcf8e3;
    }
    .list-group-item-danger {
        color: #a94442;
        background-color: #f2dede;
    }
    .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
        text-shadow: none;
        background-image: none;
        border-color: #4d9cf8;
    }
    .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
        color: #fff;
        background-color: #4d9cf8;
        border-color: #4d9cf8;
    }
    .list-group-item.active .list-group-item-heading, .list-group-item.active:hover .list-group-item-heading, .list-group-item.active:focus .list-group-item-heading, .list-group-item.active .list-group-item-heading>small, .list-group-item.active:hover .list-group-item-heading>small, .list-group-item.active:focus .list-group-item-heading>small, .list-group-item.active .list-group-item-heading>.small, .list-group-item.active:hover .list-group-item-heading>.small, .list-group-item.active:focus .list-group-item-heading>.small {
        color: #ffffff;
    }
    .list-group-item.active .list-group-item-text, .list-group-item.active:hover .list-group-item-text, .list-group-item.active:focus .list-group-item-text {
        color: #eaeaea;
    }
    .list-group-item .list-group-item-text {
        color: #999999;
    }
    .list-group-item .list-group-item-heading {
        color: #555555;
    }
    /*-----------------------------------------------------------
        Breadcrumbs
    ----------------------------------------------------------*/

    .breadcrumb {
        background-color: transparent;
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
    }
    .breadcrumb, .breadcrumb a {
        color: #777777;
    }
    .breadcrumb .fa {
        font-size: 14px;
        margin-right: 5px;
    }
    .breadcrumb.bg {
        background-color: #f5f5f5;
    }
    .breadcrumb.border {
        border: 1px solid #eaeaea;
        background-color: transparent;
    }
    .breadcrumb.primary, .breadcrumb.primary a, .breadcrumb.primary li.active {
        color: #4d9cf8;
    }
    .breadcrumb.auto-hidden li a.collapsed {
        width: 50px !important;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
    .breadcrumb.auto-hidden li a {
        width: auto;
        white-space: nowrap;
        display: inline-block;
    }
    .breadcrumb>li, .breadcrumb li a {
        vertical-align: top;
    }
    /*-----------------------------------------------------------
        Pagination
    ----------------------------------------------------------*/

    .pagination {
        border-radius: 0px;
        -o-border-radius: 0px;
        -ms-border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
    }
    .pagination>li:first-child>a, .pagination>li:first-child>span {
        -webkit-border-top-left-radius: 0px;
        -moz-border-radius-topleft: 0px;
        border-top-left-radius: 0px;
        -webkit-border-bottom-left-radius: 0px;
        -moz-border-radius-bottomleft: 0px;
        border-bottom-left-radius: 0px;
    }
    .pagination>li:last-child>a, .pagination>li:last-child>span {
        -webkit-border-top-right-radius: 0px;
        -moz-border-radius-topright: 0px;
        border-top-right-radius: 0px;
        -webkit-border-bottom-right-radius: 0px;
        -moz-border-radius-bottomright: 0px;
        border-bottom-right-radius: 0px;
    }
    .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
        color: #777777;
        background-color: #f5f5f5;
        border-color: #eaeaea;
    }
    .pagination>li>a, .pagination>li>span {
        color: #777777;
        border: 1px solid #eaeaea;
    }
    .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
        color: #fff;
        background-color: #4d9cf8;
        border-color: #4d9cf8;
    }
    .pager li>a, .pager li>span {
        border: 1px solid #eaeaea;
    }
    .pager li>a:hover, .pager li>a:focus {
        background-color: #f5f5f5;
    }
    .pager.primary li>a, .pager.primary li>span {
        border: 1px solid #4d9cf8;
        color: #ffffff;
        background-color: #4d9cf8;
    }
    .pager.primary li>a:hover, .pager.primary li>a:focus {
        background-color: rgba(0,131,122, 1.0);
    }
    /*-----------------------------------------------------------
        Labels
    ----------------------------------------------------------*/

    .label {
        padding: .5em .9em .5em;
        font-size: 75%;
        font-weight: 400;
        color: #fff;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        text-shadow: none;
    }
    .label .fa {
        font-size: 100%;
        margin-right: 5px;
    }
    .label-secondary {
        background-color: #9e9e9e;
    }
    .label-primary {
        background-color: #4d9cf8;
    }
    .label-purple {
        background-color: #673AB7;
    }
    .label-accent {
        background-color: #E91E63;
    }
    .label-info {
        background-color: #03A9F4;
    }
    .label-warning {
        background-color: #FFC107;
    }
    .label-danger {
        background-color: #f44336;
    }
    .label-success {
        background-color: #4CAF50;
    }
    .uilabels .label {
        display: inline-block;
        margin: 5px 5px 0 0;
    }
    .uilabels.text-md {
        font-size: 16px;
    }
    .uilabels.text-lg {
        font-size: 18px;
    }
    /*-----------------------------------------------------------
        Badges
    ----------------------------------------------------------*/

    .badge {
        display: inline-block;
        min-width: 10px;
        padding: 3px 7px;
        font-size: 12px;
        font-weight: 400;
        line-height: 1;
        color: #fff;
        background-color: #777;
        border-radius: 10px;
        -o-border-radius: 10px;
        -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
    .badge.badge-md {
        font-size: 14px;
        padding: 5px 8px;
        border-radius: 15px;
        -o-border-radius: 15px;
        -ms-border-radius: 15px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
    }
    .badge.badge-lg {
        font-size: 17px;
        padding: 7px 15px;
        border-radius: 20px;
        -o-border-radius: 20px;
        -ms-border-radius: 20px;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
    }
    .badge .fa {
        font-size: 12px;
    }
    .badge.badge-md .fa {
        font-size: 14px;
    }
    .badge.badge-lg .fa {
        font-size: 14px;
    }
    .badge-secondary {
        background-color: #9e9e9e;
        color: #ffffff;
    }
    .badge-primary {
        background-color: #4d9cf8;
        color: #ffffff;
    }
    .badge-purple {
        background-color: #673AB7;
        color: #ffffff;
    }
    .badge-accent {
        background-color: #E91E63;
        color: #ffffff;
    }
    .badge-info {
        background-color: #03A9F4;
        color: #ffffff;
    }
    .badge-warning {
        background-color: #FFC107;
        color: #ffffff;
    }
    .badge-danger {
        background-color: #f44336;
        color: #ffffff;
    }
    .badge-success {
        background-color: #4CAF50;
        color: #ffffff;
    }
    .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
        color: #fff;
        background-color: #4d9cf8;
    }
    .nav-pills>li>a {
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    .nav>li>a {
        position: relative;
        display: block;
        padding: 7px 15px;
    }
    .uibadges .badge {
        margin: 5px 5px 0 0;
    }
    /*-----------------------------------------------------------
        UI AJAX TREE
    ----------------------------------------------------------*/

    .jstree-icon.fa-file {
        color: #838383;
    }
    /*-----------------------------------------------------------
        Flot Charts
    ----------------------------------------------------------*/

    .flot-demo-container {
        width: 100%;
        height: 350px;
    }
    .flot-demo-placeholder {
        width: 100%;
        height: 100%;
    }
    /*navigate*/
    .flot-chart-area{
        margin-left: 0px;
        margin-right: 0px;
    }
    #flot-navigate .button {
        position: absolute;
        cursor: pointer;
    }
    #flot-navigate div.button {
        font-size: smaller;
        color: #999;
        background-color: #eee;
        padding: 2px;
    }
    /*flot pie*/

    #flotpiemenu {} #flotpiemenu button {
        cursor: pointer;
        min-width: 120px;
        margin: 0 0 5px 5px;
    }
    /*-----------------------------------------------------------
        Easy PIE Charts
    ----------------------------------------------------------*/

    .easypiechart {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 100%;
        text-align: center;
        max-width: 200px;
        margin-bottom: 15px;
    }
    .easypiechart canvas {
        position: absolute;
        top: 0;
        left: 0;
    }
    .easypiechart .percent {
        display: inline-block;
        line-height: 200px;
        z-index: 2;
        font-size: 1.8em;
        width: 100%;
    }
    .easypiechart .percent:after {
        content: '%';
        margin-left: 0.1em;
        font-size: .8em;
    }
    .easypiechart-area{
        margin-left: 0px;
        margin-right: 0px;
    }
    .knobcharts-area{
        margin-left: 0px;
        margin-right: 0px;
    }
    /*-----------------------------------------------------------
        Sparkline Charts
    ----------------------------------------------------------*/

    .jqstooltip {
        font: 12px arial, san serif !important;
        padding: 15px !important;
        border: 0px solid white !important;
        display: inline-block !important;
        width: auto !important;
        height: auto !important;
    }
    .jqsfield {
        font: 12px arial, san serif !important;
    }
    /*-----------------------------------------------------------
    Page Layout - Sidebar, Chat API toggle interactions
    -----------------------------------------------------------*/

    #main-content, .page-chatapi, .page-topbar, .page-sidebar, .page-topbar .logo-area, .page-topbar .quick-area .pull-right, .collapse-wraplist, .profile-info, .wraplist, .chatapi-windows {
        -webkit-transition: 600ms;
        -moz-transition: 600ms;
        -o-transition: 600ms;
        transition: 600ms;
    }

    .main-wrapper{
        margin-top:60px;
        display:inline-block;
        width:100%;
        padding:15px 15px 0 15px;
        margin-left: 0px;
        margin-right: 0px;
    }


    .page-sidebar.collapseit {
        width: 60px;
        margin-left: 0px !important;
        z-index: 99;
    }
    .page-sidebar.collapseit .wraplist li a i.img{
        float: left;
        margin-top: 3px;
        padding-left: 8px
    }
    .page-sidebar.chat_shift {
        width: 60px;
        margin-left: 0px !important;
        z-index: 99;
    }
    #main-content {
        margin-left: 260px;
        display: block;
    }
    #main-content.hor_menu {
        margin-left: 0px;
    }
    #main-content.chat_shift {
        margin-left: 60px !important;
        margin-right: 260px !important;
    }
    #main-content.sidebar_shift {
        margin-left: 60px;
        margin-right: 0px;
    }
    #main-content.sidebar_shift.hor_menu {
        margin-left: 0px;
    }
    .page-topbar.chat_shift {
        margin-left: -200px !important;
    }
    .page-topbar.chat_shift .quick-area .pull-right {
        margin-right: 60px !important;
    }
    /*.page-topbar.chat_shift .chat-toggle-wrapper{
    background-color: #333333;
    }

    .page-topbar .quick-area .pull-right .info-menu{
    padding: 0px;
    }
    */

    .page-topbar.sidebar_shift .logo-area {
        width: 60px;
    }
    .page-topbar.chat_shift .logo-area {
        width: 260px;
    }

    .boxed .page-topbar.chat_shift .logo-area{
        width: 60px;
    }

    .page-chatapi.hideit {
        width: 0px;
        height: 658px;
    }
    .page-chatapi.showit {
        width: 260px;
        height: 100%;
    }
    .page-chatapi.hideit .contact-list .user-status{
        display: none;
    }

    .page-chatapi {
        height: auto;
        position: fixed;
        padding: 0px;
        background-color: #ffffff;
        margin-top: 0px;
        top: 0px;
        right: 0px;
        z-index: 9999;
        box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
        -webkit-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
        -moz-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
        -o-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
        -ms-box-shadow: 0 0 10px 0 rgba(33,33,33,.2);
    }

    .boxed .page-chatapi{
        right: 5%;
        overflow: hidden;
    }

    .boxed .page-topbar.chat_shift{
        padding-right: 240px;
    }

    .chatapi-windows {
        position: fixed;
        bottom: 0px;
        right: 260px;
        height: 300px;
        max-height: 300px;
        display: inline-block;
        z-index: 9999;
    }

    .boxed .chatapi-windows{
        right: 370px;
    }
    /*collapsed menu and chat open states*/

    .page-topbar.sidebar_shift .logo-area {
        background-color: transparent;
    }
    .page-topbar.chat_shift .logo-area {
        background-color: #4d9cf8;
    }
    .chatapi-windows.hideit {
        bottom: -300px;
    }
    .chatapi-windows.showit {
        height: 300px;
        bottom: 0px !important;
    }
    /*--------------------------------------------
    COLLAPSED MENU
    ---------------------------------------------*/
    /*
    .page-sidebar.chat_shift .wraplist, .page-sidebar.chat_shift .profile-info,
    .page-sidebar.collapseit .wraplist, .page-sidebar.collapseit .profile-info{
    visibility: hidden;
    margin-left:-300px !important;
    }

    .page-sidebar .collapse-wraplist{
    margin-left:-300px;
    visibility: hidden;
    }

    .page-sidebar.chat_shift .collapse-wraplist,
    .page-sidebar.collapseit .collapse-wraplist{
    margin-left:0px;
    visibility: visible;
    background-color: #FFC107;
    height: 598px;
    width:60px;
    float:right;
    }
    */

    .page-sidebar.chat_shift .wraplist, .page-sidebar.collapseit .wraplist {
        background-color: transparent;
        width: 60px;
    }
    .page-sidebar.chat_shift .wraplist .sub-menu, .page-sidebar.collapseit .wraplist .sub-menu {
        display: none;
    }
    .page-sidebar.chat_shift .wraplist li, .page-sidebar.collapseit .wraplist li {
        position: relative !important;
    }
    .page-sidebar.chat_shift .wraplist li .title, .page-sidebar.collapseit .wraplist li .title, .page-sidebar.chat_shift .wraplist li .arrow, .page-sidebar.collapseit .wraplist li .arrow {
        display: none;
    }
    .page-sidebar.chat_shift .wraplist li:hover, .page-sidebar.collapseit .wraplist li:hover {
        background: rgba(33,33,33,0.1);
    }
    .page-sidebar.chat_shift .wraplist .sub-menu li:hover, .page-sidebar.collapseit .wraplist .sub-menu li:hover {
        background: transparent;
    }
    .page-sidebar.chat_shift #main-menu-wrapper .wraplist .sub-menu li a:hover, .page-sidebar.collapseit #main-menu-wrapper .wraplist .sub-menu li a:hover {
        background-color: #212026;
        border-left: 3px solid #4d9cf8;
        color: rgba(174, 178, 183, 1.0);
    }
    .page-sidebar.chat_shift #main-menu-wrapper .wraplist .sub-menu li.open a, .page-sidebar.collapseit #main-menu-wrapper .wraplist .sub-menu li.open a, .page-sidebar.chat_shift #main-menu-wrapper .wraplist .sub-menu li.open .sub-menu a, .page-sidebar.collapseit #main-menu-wrapper .wraplist .sub-menu li.open .sub-menu a {
        background-color: transparent;
        border-left: 3px solid transparent;
        color: rgba(174, 178, 183, 1.0);
    }
    .page-sidebar.chat_shift .profile-info, .page-sidebar.collapseit .profile-info {
        width: 60px;
        margin: 0;
        padding: 10px 12px 25px 0px;
    }
    .page-sidebar.chat_shift .profile-info .profile-image, .page-sidebar.collapseit .profile-info .profile-image {
        width: 100%;
        padding: 0;
    }
    .page-sidebar.chat_shift .profile-info .profile-image img, .page-sidebar.collapseit .profile-info .profile-image img {
        height: 40px;
        width: 40px;
        top: 10px;
    }
    .page-sidebar.chat_shift .profile-details, .page-sidebar.collapseit .profile-details {
        display: none;
    }
    .page-sidebar.chat_shift .project-info, .page-sidebar.collapseit .project-info {
        display: none;
    }
    /*
    #main-menu-wrapper li a:hover, 
    #main-menu-wrapper li.open a {
    background-color: rgba(63,81,181,1);
    }
    #main-menu-wrapper li .sub-menu a {
    color: rgba(174,178,183,1.0);
    margin-bottom: 2px;
    padding-left: 15px;
    border-left: 3px solid transparent;
    }

    */

    .page-sidebar.chat_shift #main-menu-wrapper .wraplist li:hover .sub-menu, .page-sidebar.collapseit #main-menu-wrapper .wraplist li:hover .sub-menu {
        display: block;
    }
    .page-sidebar.chat_shift #main-menu-wrapper .wraplist li:hover .sub-menu .sub-menu, .page-sidebar.collapseit #main-menu-wrapper .wraplist li:hover .sub-menu .sub-menu {
        display: none;
    }
    .page-sidebar.chat_shift .wraplist li:hover .sub-menu, .page-sidebar.collapseit .wraplist li:hover .sub-menu {
        position: absolute;
        left: 60px;
        top: 0px;
        width: 200px !important;
        background: #eeeeee;
        box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -webkit-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -moz-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -o-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -ms-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
    }

    .page-sidebar.chat_shift .wraplist li:hover .sub-menu .sub-menu, .page-sidebar.collapseit .wraplist li:hover .sub-menu .sub-menu{
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -o-box-shadow: none;
        -ms-box-shadow: none;
    }

    .page-sidebar.chat_shift .wraplist li:hover .sub-menu .sub-menu, .page-sidebar.collapseit .wraplist li:hover .sub-menu .sub-menu {
        position: relative;
        left: 0px;
        top: 0px;
        width: auto !important;
        background: #ffffff;
    }
    .page-sidebar.chat_shift .wraplist li:hover .sub-menu .sub-menu, .page-sidebar.collapseit .wraplist li:hover .sub-menu .sub-menu {
        position: relative;
        margin-top: 0px;
    }
    .page-sidebar.chat_shift, .page-sidebar.collapseit, .page-sidebar.chat_shift #main-menu-wrapper, .page-sidebar.collapseit #main-menu-wrapper {
        overflow: visible !important;
    }
    .page-sidebar.chat_shift .ps-scrollbar-y-rail, .page-sidebar.collapseit .ps-scrollbar-y-rail {
        display: none;
    }
    .page-sidebar.chat_shift, .page-sidebar.collapseit {
        position: absolute !important;
    }
    .page-sidebar.chat_shift #main-menu-wrapper, .page-sidebar.collapseit #main-menu-wrapper, .page-sidebar.chat_shift #main-menu-wrapper .wraplist, .page-sidebar.collapseit #main-menu-wrapper .wraplist {
        /*height: 3000px !important;*/
    }
    .page-sidebar.chat_shift #main-menu-wrapper, .page-sidebar.collapseit #main-menu-wrapper {
        padding-top: 0px;
        /*top: -79px;*/
    }
    .page-sidebar.chat_shift .wraplist li:hover .title, .page-sidebar.collapseit .wraplist li:hover .title {
        float: left;
        padding-left: 15px;
        width: 196px;
        background: transparent;
        display: inline-block !important;
        position: relative;
        z-index: 2;
    }
    .page-sidebar.chat_shift .wraplist li:hover .sub-menu .title, .page-sidebar.collapseit .wraplist li:hover .sub-menu .title {
        padding-left: 0px;
        background: transparent;
        display: inline-block;
        width: auto;
    }
    .page-sidebar.chat_shift .wraplist li:hover .sub-menu .arrow, .page-sidebar.collapseit .wraplist li:hover .sub-menu .arrow {
        display: inline-block;
    }
    .page-sidebar.chat_shift #main-menu-wrapper .wraplist li .fa, .page-sidebar.collapseit #main-menu-wrapper .wraplist li .fa {
        float: left;
        font-size: 17px;
        height: 42px;
        line-height: 42px;
        width: 53px;
        top: 0px;
    }
    .page-sidebar.chat_shift #main-menu-wrapper .wraplist li:hover a, .page-sidebar.collapseit #main-menu-wrapper .wraplist li:hover a {
        width: 260px;
        background: #ffffff;
        box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -webkit-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -moz-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -o-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        -ms-box-shadow: 0 0 20px 0 rgba(33,33,33,.2);
        position: relative;
        z-index: 2;
    }
    .page-sidebar.chat_shift #main-menu-wrapper .wraplist li a, .page-sidebar.collapseit #main-menu-wrapper .wraplist li a {
        padding-left: 0px;
    }
    .page-sidebar.chat_shift #main-menu-wrapper .wraplist li .sub-menu a, .page-sidebar.collapseit #main-menu-wrapper .wraplist li .sub-menu a {
        padding-left: 20px;
    }
    .page-sidebar.chat_shift .wraplist li:hover .sub-menu, .page-sidebar.collapseit .wraplist li:hover .sub-menu {
        padding-top: 42px !important;
        padding-left: 0px !important;
        background: #ffffff;
    }



    .page-sidebar.chat_shift .wraplist li:hover .sub-menu .sub-menu, .page-sidebar.collapseit .wraplist li:hover .sub-menu .sub-menu {
        margin-top: 0px !important;
        padding-left: 0px !important;
        padding-top: 0px !important;
        display: none;
        left: 0px;
    }
    .page-sidebar.chat_shift #main-menu-wrapper .wraplist li:hover .sub-menu a, .page-sidebar.collapseit #main-menu-wrapper .wraplist li:hover .sub-menu a {
        width: 200px;
        color: #616161;
        background: #ffffff;
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -o-box-shadow: none;
        -ms-box-shadow: none;
        

    }
    .page-sidebar.chat_shift #main-menu-wrapper .wraplist li.open .sub-menu a:hover, .page-sidebar.chat_shift #main-menu-wrapper .wraplist li .sub-menu a:hover, .page-sidebar.collapseit #main-menu-wrapper .wraplist li.open .sub-menu a:hover, .page-sidebar.collapseit #main-menu-wrapper .wraplist li .sub-menu a:hover {
        background-color: #e5e5e5;
        border-left: 3px solid #4d9cf8;
        color: #616161;
        padding-left: 21px;
    }
    .page-sidebar.chat_shift .wraplist li:hover .sub-menu li, .page-sidebar.collapseit .wraplist li:hover .sub-menu li {
        padding-left: 0px !important;
    }
    .page-sidebar.chat_shift .wraplist li:hover .sub-menu li .title, .page-sidebar.collapseit .wraplist li:hover .sub-menu li .title {
        padding-left: 0px !important;
    }
    .page-sidebar.chat_shift .wraplist li:hover .sub-menu li li .title, .page-sidebar.collapseit .wraplist li:hover .sub-menu li li .title {
        padding-left: 15px !important;
    }
    .page-sidebar.chat_shift .wraplist li:hover .sub-menu li li li .title, .page-sidebar.collapseit .wraplist li:hover .sub-menu li li li .title {
        padding-left: 30px !important;
    }
    .page-sidebar.chat_shift .wraplist li:hover .sub-menu li li li li .title, .page-sidebar.collapseit .wraplist li:hover .sub-menu li li li li .title {
        padding-left: 45px !important;
    }
    /*--------------------------------------------
        CHAT API
    ---------------------------------------------*/

    .chat-wrapper {
        overflow: hidden;
        position: relative;
    }
    .page-chatapi.hideit .search-bar{
        display: none;
    }
    .page-chatapi .search-bar {
        display: inline-block;
    }
    .page-chatapi .search-bar input {
        background-color: rgba(33, 33, 33, 0.1);
        color: #aaaaaa;
        font-size: 14px;
        border: 0px;
        width: 220px;
        margin: 20px 20px 0 20px;
    }
    .page-chatapi .search-bar input:focus, .page-chatapi .search-bar input:hover {
        border: 0px;
    }
    .page-chatapi .group-head {
        color: #9e9e9e;
        padding: 30px 30px 0 30px;
        font-size: 14px;
        margin: 0px 0 15px 0;
        white-space: nowrap;
    }
    .page-chatapi .group-list, .page-chatapi .contact-list {
        padding: 0 15px;
    }
    .page-chatapi .contact-list .user-row {
        display: block;
        padding: 15px;
        margin: 0 0 5px 0;
        position: relative;
        cursor: hand;
        cursor: pointer;
        white-space: nowrap;
    }
    .page-chatapi .group-list .group-row.active, .page-chatapi .group-list .group-row:hover, .page-chatapi .group-list .group-row:active, .page-chatapi .group-list .group-row:focus, .page-chatapi .contact-list .user-row.active, .page-chatapi .contact-list .user-row:hover, .page-chatapi .contact-list .user-row:active, .page-chatapi .contact-list .user-row:focus {
        background-color: rgba(33,33,33,0.1);
    }
    .page-chatapi .contact-list .user-img {
        float: left;
        width: 30px;
        display: inline-block;
        padding: 0px 0 0 0;
    }
    .page-chatapi .contact-list .user-img img {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        width: 30px;
        height: 30px;
    }
    .page-chatapi .contact-list .user-status {
        float: right;
        width: 15px;
        display: inline-block;
        position: absolute;
        top: 20px;
        right: 15px;
    }
    .page-chatapi .contact-list .user-status i {
        font-size: 10px;
        height: 10px;
        width: 10px;
        float: right;
        margin-right: 0px;
    }
    .page-chatapi .group-list .group-status.available i, .chatapi-windows .user-window .controlbar .status.available i, .page-chatapi .contact-list .user-status.available i {
        color: #4CAF50;
    }
    .page-chatapi .group-list .group-status.busy i, .chatapi-windows .user-window .controlbar .status.busy i, .page-chatapi .contact-list .user-status.busy i {
        color: #f44336;
    }
    .page-chatapi .group-list .group-status.away i, .chatapi-windows .user-window .controlbar .status.away i, .page-chatapi .contact-list .user-status.away i {
        color: #E91E63;
    }
    .page-chatapi .contact-list .user-info {
        padding-left: 45px;
        display: block;
        margin-right: 15px;
    }
    .page-chatapi .group-list .group-info h4, .page-chatapi .contact-list .user-info h4 {
        margin: 0 0 5px 0;
        font-size: 14px;
        display: block;
    }
    .page-chatapi .group-list .group-info h4 a, .page-chatapi .contact-list .user-info h4 a {
        color: #616161;
        display: block;
        text-decoration: none;
    }
    .page-chatapi .contact-list .user-info .status {
        margin: 0 0 0px 0;
        font-size: 10px;
        color: #9e9e9e;
        display: block;
        line-height: 10px;
    }
    .page-chatapi .group-list .group-row {
        display: block;
        padding: 10px 15px 5px 0px;
        margin: 0 0 5px 0;
        position: relative;
        cursor: hand;
        cursor: pointer;
        white-space: nowrap;
    }
    .page-chatapi .group-list .group-status {
        float: left;
        margin: 0 10px 0 15px;
    }
    .page-chatapi .group-list .group-status i {
        margin: 0 0 0px 0;
        font-size: 14px;
        color: #aaaaaa;
        display: block;
        line-height: 14px;
    }
    /*-----------------------------------------------------------
        CHAT API Windows
    ----------------------------------------------------------*/

    .chatapi-windows .user-window {
        display: block;
        min-width: 250px;
        min-height: 300px;
        background-color: #ffffff;
        margin: 0 2px 0 0;
        float: right;   
        box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -webkit-box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -moz-box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -o-box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -ms-box-shadow: 0 1px 3px rgba(33,33,33,.2);
    }
    .chatapi-windows .user-window .controlbar .tooltip {
        display: none !important;
    }
    .chatapi-windows .user-window.minimizeit .controlbar .tooltip {
        display: block !important;
    }
    .chatapi-windows .user-window.minimizeit .controlbar .tooltip .tooltip-inner {
        white-space: nowrap;
    }
    .chatapi-windows .user-window.minimizeit {
        min-width: 40px;
        min-height: 40px;
        width: 40px;
        height: 40px;
        bottom: 0px;
        top: 260px;
        position: relative;
    }
    .chatapi-windows .user-window.minimizeit .controlbar .name, .chatapi-windows .user-window.minimizeit .controlbar i, .chatapi-windows .user-window.minimizeit .typearea, .chatapi-windows .user-window.minimizeit .chatarea {
        display: none;
    }
    .chatapi-windows .user-window.minimizeit .controlbar {
        padding: 10px;
        height: 40px;
    }
    .chatapi-windows .user-window.minimizeit .controlbar img {
        font-size: 18px;
        color: #999999;
        margin: 0 0 0 0px;
        line-height: 22px;
        cursor: hand;
        cursor: pointer;
    }
    .chatapi-windows .user-window .controlbar {
        display: block;
        height: 30px;
        padding: 5px 15px;
        background-color: rgba(33,33,33,0.1);
        color: #9e9e9e;
    }
    .chatapi-windows .user-window .controlbar .name {
        font-size: 12px;
        line-height: 20px;
        display: inline-block;
        top: -5px;
        position: relative;
    }
    .chatapi-windows .user-window .controlbar img {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        height: 20px;
        width: 20px;
        margin: 0 5px 0 0;
        display: inline-block;
        top: -5px;
        position: relative;
        cursor: hand;
        cursor: pointer;
    }
    .chatapi-windows .user-window .controlbar .status {
        float: none;
        display: inline-block;
        margin: 0px 5px 0 0;
    }
    .chatapi-windows .user-window .controlbar .status i {
        margin: 0px;
        font-size: 8px;
    }
    .chatapi-windows .user-window .controlbar i {
        font-size: 12px;
        float: right;
        color: #777777;
        margin: 0 0 0 5px;
        line-height: 20px;
        cursor: hand;
        cursor: pointer;
    }
    .chatapi-windows .user-window .controlbar i:hover {
        color: #aaaaaa;
    }
    .chatapi-windows .user-window .typearea {
        display: block;
        height: 40px;
        padding: 0px 15px 0px 15px;
        background-color: rgba(33,33,33,0.1);
    }
    .chatapi-windows .user-window .typearea input {
        background-color: transparent;
        color: #aaaaaa;
        font-size: 14px;
        border: 0px;
        width: 220px;
        margin: 0px 0px;
        height: 40px;
    }
    .chatapi-windows .user-window .typearea input:focus, .chatapi-windows .user-window .typearea input:hover {
        border: 0px;
    }
    .chatapi-windows .user-window .chatarea {
        display: block;
        height: 230px;
        padding: 15px 15px 0 15px;
        background-color: #ffffff;
        color: #616161;
        overflow: hidden;
        position: relative;
        max-width: 250px;
    }
    /* inner chat discussion*/

    .chatmsg {
        display: block;
        padding: 0 5px 15px 5px;
        position: relative;
        max-width: 220px;
    }
    .chatmsg .name {
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: #999999;
    }
    .chatmsg .text {
        display: block;
        font-size: 13px;
        padding-left: 0px;
        color: #616161;
        word-wrap: break-word;
    }
    .chatmsg .ts {
        position: absolute;
        top: 0px;
        right: 5px;
        font-size: 10px;
        color: #777777;
    }
    /*----------------------------------------------
        Mailbox
    -----------------------------------------------*/

    .mail_content {
        padding: 30px;
        background-color: #ffffff;
        border: 1px solid #e8e8e8;
    }
    .mail_tabs {
        margin-top: 30px;
    }
    .mail_tabs li {
        display: block;
    }
    .mail_tabs li a {
        display: block;
        color: #555555;
        padding: 10px 15px;
        text-decoration: none;
        background-color: #ffffff;
        margin-bottom: 1px;
    }
    .mail_tabs li a i {
        font-size: 14px;
        margin-right: 10px;
    }
    .mail_tabs li.active a, .mail_tabs li a:hover {
        background-color: #f5f5f5;
        color: #4d9cf8;
    }
    .mail_head {
        display: inline-block;
        width: auto;
        float: left;
        margin: 0 15px 0 0;
    }
    .mail_head_icon {
        margin: 7px 15px 0 0px;
        cursor: hand;
        cursor: pointer;
    }
    .mail_head_icon.pull-right {
        margin: 7px 0px 0 15px;
    }
    .mail_more_btn, .mail_nav, .mail_count_nav {
        margin: 30px 0;
    }
    .mail_count_nav {
        line-height: 34px;
        margin-right: 15px;
    }
    .mail_list table tr td:nth-child(4) {
        font-size: 95%;
    }
    .mail_list table tr td:nth-child(5) {
        font-size: 85%;
    }
    .mail_list table tr.unread td:nth-child(3) {
        font-weight: 700;
    }
    .mail_list table tr td:nth-child(3), .mail_list table tr td:nth-child(4), .mail_list table tr td:nth-child(5), .mail_list table .star {
        cursor: hand;
        cursor: pointer;
    }
    .mail_view_title {
        margin: 30px 0 15px 0;
    }
    .mail_view_title h3 {
        margin: 0px;
    }
    .mail_view_info {} .mail_view {
        margin: 30px 0;
    }
    .mail_view_attach li .file {
        display: block;
        width: 200px;
        max-width: 200px;
        height: auto;
        max-height: auto;
        cursor: hand;
        cursor: pointer;
        margin-bottom: 10px;
    }
    .mail_view_attach li .file img {
        width: 200px;
        max-width: 200px;
        height: auto;
        max-height: auto;
    }
    .mail_view_attach li .title {
        position: relative;
        display: block;
        margin-bottom: 5px;
        color: #777777;
        text-decoration: none;
        padding: 0 5px;
    }
    .mail_view_attach li .title span {
        float: right;
        position: absolute;
        top: 0px;
        right: 0px;
        font-size: 90%;
        color: #aaaaaa;
    }
    .mail_view_attach li .actions {
        position: relative;
        display: block;
        margin-bottom: 5px;
        padding: 0 5px;
    }
    .mail_view_attach li .actions a {
        color: #777777;
        text-decoration: none;
        font-size: 90%;
        color: #999999;
    }
    .mail_view_reply {
        margin: 15px 0 0 0;
    }
    .mail_cc_bcc .labels {
        float: right;
    }
    .mail_cc_bcc .labels .label {
        cursor: hand;
        cursor: pointer;
    }
    .mail_compose_cc, .mail_compose_bcc {
        display: none;
    }
    .bootstrap-tagsinput {
        width: 100%;
    }
    .bootstrap-tagsinput input {
        width: 100% !important;
    }
    /*-----------------------------------------------------------
        Rickshaw Graph Charts
    ----------------------------------------------------------*/

    .rickshaw_graph .detail {
        background: rgba(100, 100, 100, 0.1);
        width: 1px;
    }
    .rickshaw_graph .x_tick {
        border-left: 1px solid rgba(100, 100, 100, 0.1);
    }
    .rickshaw_graph .y_grid .tick, .rickshaw_graph .x_grid_d3 .tick {
        stroke: rgba(100, 100, 100, 0.1);
    }
    .rickshaw_graph .detail .x_label {
        font-family: Arial, sans-serif;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        opacity: 1;
        border: 0px solid rgba(100, 100, 100, 0.8);
        background: rgba(100, 100, 100, 0.8);
        white-space: nowrap;
        margin-top: 15px;
        color: #ffffff;
    }
    .rickshaw_graph .detail {
        background: rgba(100, 100, 100, 0.3);
    }
    .rickshaw_graph .detail .item.left:after {
        border-right-color: rgba(100, 100, 100, 0.8);
    }
    .rickshaw_graph .detail .item.right:after {
        border-left-color: rgba(100, 100, 100, 0.8);
    }
    .rickshaw_graph .detail .item.active {
        background: rgba(100, 100, 100, 0.8);
        border-color: transparent;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    /*extension chart*/

    .rickshaw_legend .line {
        line-height: 23px;
        margin-bottom: 1px;
        background-color: #f5f5f5;
        padding-top: 4px;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
    }
    .rickshaw_legend .action, #legend .action {
        color: black;
        opacity: 0.5;
        text-decoration: none;
    }
    .rickshaw_legend .action {
        margin-right: 10px;
        font-size: 14px;
    }
    .rickshaw_legend .line .swatch {
        display: inline-block;
        margin-right: 10px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        height: 14px;
        width: 14px;
    }
    #legend .label {
        color: #404040;
    }
    .rickshaw_legend .label {
        display: inline;
        font-size: 14px;
        background-color: transparent;
        color: #777777;
        font-weight: 400;
        line-height: 23px;
        text-shadow: none;
    }
    .rickshaw_legend {
        display: block;
    }
    .rickshaw_legend {
        background: transparent;
        padding: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    #rickshaw_side_panel {
        padding: 0 0px 0px 0;
        width: 100%;
        display: block;
        vertical-align: top;
    }
    /*------------------------------------------
        Dashboard
    ------------------------------------------*/

    .db_box {
        padding: 15px;
    }
    .db_box.db_box_large{
        max-width: inherit;
        background-color: #ffffff;
        float: left;
        margin: 0px 2% 0px 0px;
        padding: 30px 20px;
        color: #757575 !important;
        text-align: center;
        margin-bottom: 15px;
    }
    .db_box.db_box_large.p-26-20{
        padding: 26px 20px
    }
    .db_box.db_box_large .bold
    {
        text-align: left;
        float: left;
    }

    .db_box.db_box_large .pull-right
    {
        text-align: right;
    }

    .db_box.db_box_large .clearfix{
        width: 100%;
        height: 1px;
        margin-bottom: 40px;
    }


    .r1_graph1, .r1_graph2, .r1_graph3 {
        min-height: 80px;
        width: 100%;
        margin-bottom: 30px;
        overflow: hidden;
        max-width:230px;
        float: left;
        margin-right: 15px;
    }
    .r1_graph4, .r1_graph5 {
        min-height: 135px;
        width: 100%;
        margin-bottom: 30px;
        max-width:230px;
        float: left;
        margin-right: 15px;
    }
    .r1_maingraph {
        min-height: 340px;
        width: 100%;
        background: #ffffff;
        margin-bottom: 30px;
    }
    .r1_maingraph .switch {
        cursor: hand;
        cursor: pointer;
        position: absolute;
        top: 15px;
        right: 30px;
        z-index: 99;
    }
    .r1_maingraph .switch .icon-secondary {
        opacity: 0.8;
    }
    .r1_graph1 {
        background: #4d9cf8;
        color: #ffffff;
    }
    .r1_graph2 {
        background: #673AB7;
        color: #ffffff;
    }
    .r1_graph3 {
        background: #FFC107;
        color: #ffffff;
    }
    .r1_graph4 {
        background: #E91E63;
        color: #ffffff;
    }
    .r1_graph4 {
        text-align: center;
    }
    .r1_graph4 span {
        text-align: left;
        display: block;
    }
    .r1_graph4 #gauge-meter {
        margin-top: -8px;
    }
    .r1_graph4 #gauge-meter-text {
        position: absolute;
        top: 105px;
        width: 100%;
        text-align: center;
        margin-left: -30px;
        font-size: 15px;
        color: #ffffff;
        line-height: 20px;
        font-weight: 700;
    }
    .r1_graph4 #gauge-meter-text:after {
        content: "MB";
        font-size: 13px;
        font-weight: 400;
    }
    .r1_graph5 {
        background: #FFC107;
        color: #ffffff;
    }
    .r1_graph5 .icon-1, .r1_graph5 .icon-2 {
        font-size: 10px;
    }
    .r1_graph5 .icon-2 {
        color: #eaeaea;
    }
    .r2_graph1 {
        min-height: 200px;
        width: 100%;
        background: #ffffff;
        margin-bottom: 15px;
        overflow: hidden;
    }
    .r2_graph1 .rickshaw_legend .line {
        float: left;
        width: auto;
        margin-right: 3px;
        clear: none;
        padding: 2px 6px;
        display: inline-block;
    }
    .r2_graph1 .rickshaw_legend .action {
        font-size: 10px;
        margin-right: 2px;
    }
    .r2_graph1 .rickshaw_legend .line .swatch {
        display: inline-block;
        margin-right: 2px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        height: 10px;
        width: 10px;
    }
    .r2_graph1 .rickshaw_legend .label {
        display: inline;
        font-size: 12px;
        background-color: transparent;
        color: #777777;
        font-weight: 400;
        line-height: 19px;
    }
    .r2_graph1 #offset_form, .r2_graph1 #interpolation_form {
        display: none;
    }
    .r2_graph1 .rickshaw_sliders {
        display: inline-block !important;
    }
    .r2_graph1 .rickshaw_sliders section {
        width: 47%;
        margin-right: 1%;
        float: left;
        display: inline-block;
        padding-right: 10px;
    }
    .r2_graph1 #legend ul {
        display: inline-block;
        margin: 0px;
    }
    .r2_graph1 #renderer_form.toggler {
        margin: 0 0 10px 0;
        text-align: right;
    }
    .r2_counter1, .r2_counter2 {
        min-height: 70px;
        width: 100%;
        background: #ffffff;
        margin-bottom: 30px;
    }
    .r2_counter1 {
        background: #4d9cf8;
        color: #ffffff;
    }
    .r2_counter2 {
        background: #673AB7;
        color: #ffffff;
    }
    .r3_notification {
        background: #ffffff;
        margin-bottom: 15px;
        min-height: 400px;
    }
    .r3_weather {
        background: #E91E63;
        margin-bottom: 15px;
        min-height: 400px;
        color: #ffffff;
    }
    .r3_todo {
        background: #ffffff;
        margin-bottom: 15px;
        min-height: 400px;
    }
    .r4_counter {
        min-height: 100px;
        margin-bottom: 15px;
        border-radius: 7px;
        overflow: hidden;
        position: relative;
        transition: all 0.3s ease-in-out;
        background: #ffffff;
        -webkit-box-shadow: 0 2px 28px rgba(0,0,0,.1);
        box-shadow: 0 2px 28px rgba(0,0,0,.1);
    }
    .r4_counter .stats{
        margin-left: 50px;
    }
    .statistics-box{
        min-height: 100px;
        margin-bottom: 15px;
        border-radius: 7px;
        display: inline-block;
        width: 100%;
        overflow: hidden;
        position: relative;
        padding: 15px;
        transition: all 0.3s ease-in-out;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -webkit-box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -moz-box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -o-box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -ms-box-shadow: 0 1px 3px rgba(33,33,33,.2);
    }
    .statistics-box .stats{
        margin-left: 70px;
    }
    .statistics-box .ico-icon{
        max-width: 60px
    }
    .statistics-box .ico-icon img{
        position: relative;
        top: -4px
    }

    .ico-icon{position: relative;}
    .ico-icon-w{
        position: absolute;
        top: 0;
        left: 0
    }
    .ico-icon-w,
    .r4_counter:hover .ico-icon .ico-icon-w{
        visibility: hidden;
    }
    .r4_counter:hover .ico-icon .ico-icon-w{
        visibility: visible;
    }
    .r4_counter.has-gradient-to-right-bottom .stats span{
        color: #f7f7f7;
    }
    .r4_counter.has-gradient-to-right-bottom,
    .r4_counter:hover{
        -webkit-box-shadow: 0 1px 18px rgba(0, 149, 255, 0.66);
        box-shadow: 0 1px 18px rgba(0, 149, 255, 0.66)
        cursor: pointer;
    }
    .r4_counter{
        background-image: linear-gradient(-12deg,#2a57d7 0,#9eeeff 100%) !important
    }
    .r4_counter h3 {
        color: #fff;
        font-weight: 800;
    }
    .r4_counter span{
        color: #f7f7f7;
    }
    .r4_counter:hover .icon-primary{
        color: #fff
    }
    .r4_counter .icon-after{
        position: absolute;
        width: 30%;
        line-height: 75px;
        height: 92%;
        font-size: 84px;
        color: #f7f7f7;
        top: 5px;
        right: 0;
    }
    .r4_counter.has-gradient-to-right-bottom .icon-after,
    .r4_counter:hover .icon-after{
        opacity: 0.2
    }
    .r4_counter .fa {
        margin-right: 0px;
        width: 30px;
        height: 30px;
        text-align: center;
        font-size: 30px;
        color: #fff;
    }
    .r4_counter h4 {
        margin: 10px 0 5px 0;
    }
    .r4_counter .stats {
        margin-left: 0;
        margin-top: 14px;
    }
    .graph-header{
        display: flex;
        align-items: center;
    }
    .graph-header .form-control {
        border-radius: 5px;
        margin: 0 10px;
        border: 1px solid #ddd;
        margin-top: 10px;
        font-size: 12px;
        background-color: transparent;
    }
    /*-----------------------------------------------------------
        Notification Widget (Dashboard)
    ----------------------------------------------------------*/

    .notification-widget {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        position: relative;
        height: 315px;
    }
    .notification-widget li {
        padding: 15px;
        overflow: hidden;
        height: auto;
        display: block;
        background: #f5f5f5;
        margin: 15px 0 0 0;
    }
    .notification-widget li a {
        text-decoration: none;
        color: #717171;
    }
    .notification-widget li .name, .notification-widget li .desc {
        display: block;
        position: relative;
    }
    .notification-widget li .user-img img {
        width: 25px;
        height: 25px;
        float: left;
        margin: 5px 15px 0 0;
        opacity: 0.8;
    }
    .notification-widget li .profile-status {
        height: 6px;
        width: 6px;
        border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        display: inline-block;
        position: absolute;
        bottom: 0px;
        right: 0px;
    }
    .notification-widget li .name {
        color: #aaaaaa;
    }
    .notification-widget li .name .time {
        color: #cccccc;
    }
    .notification-widget li .desc {
        color: #999999;
    }
    .notification-widget li.unread .user-img img {
        opacity: 1;
    }
    .notification-widget li.unread .name {
        color: #717171;
    }
    .notification-widget li.unread .name .time {
        color: #aaaaaa;
    }
    .notification-widget li.unread .desc {
        color: #777777;
    }
    .notification-widget li.external a:hover, .notification-widget li.external {
        height: auto;
        background: #eeeeee;
    }
    .notification-widget li.external a {
        display: block;
        padding: 15px 30px;
        color: #999999;
        font-size: 13px;
    }
    .wid-notification {
        padding: 15px;
        background: #ffffff;
        margin-bottom: 0px;
        min-height: 400px;
    }

    .notification-widget li.status-available{background-color: rgba(102,189,120,0.1);}
    .notification-widget li.status-away{background-color: rgba(255,193,7,0.1);}
    .notification-widget li.status-busy{background-color: rgba(240,80,80,0.1);}
    .notification-widget li.status-idle{background-color: rgba(250,133,100,0.1);}
    .notification-widget li.status-offline{background-color: rgba(169,169,169,0.1);}


    /*------------------------------------------
    Error pages 404, 505
    -------------------------------------------*/

    .page_error_code {
        text-align: center;
        display: block;
        width: 100%;
        font-size: 200px;
        line-height: 250px;
        font-weight: 400;
        margin: 50px 0 0 0;
    }
    .page_error_info {
        text-align: center;
        display: block;
        width: 100%;
        font-size: 40px;
        line-height: 40px;
        color: #aaaaaa;
        font-weight: 400;
        margin: 15px 0;
    }
    .page_error_search {
        margin: 45px 0;
    }
    .page_error_search input[type='text'] {
        margin: 0 auto;
        padding: 15px 15px;
        font-size: 19px;
        height: 45px !important;
        background-color: #f8f8f8;
    }
    .page_error_search input[type='submit'] {
        visibility: hidden;
        width: 0px;
        height: 0px;
        overflow: hidden;
        position: absolute;
        top: 0px;
        right: 0px;
        padding: 0px;
        margin: 0px;
    }
    .page_error_search .input-group.transparent .input-group-addon {
        background-color: #f8f8f8;
        padding: 6px 12px 6px 20px;
    }
    .page_error_btn {
        margin: 30px 0 0 0;
    }
    /*-----------------------------------------------------------
        UI Sliders
    ----------------------------------------------------------*/
    .sliders-area{
        margin-left: 0px;
        margin-right: 0px;
    }
    .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
        -webkit-border-bottom-left-radius: 0px;
        -moz-border-radius-bottomleft: 0px;
        border-bottom-left-radius: 0px;
        -webkit-border-bottom-right-radius: 0px;
        -moz-border-radius-bottomright: 0px;
        border-bottom-right-radius: 0px;
        -webkit-border-top-left-radius: 0px;
        -moz-border-radius-topleft: 0px;
        border-top-left-radius: 0px;
        -webkit-border-top-right-radius: 0px;
        -moz-border-radius-topright: 0px;
        border-top-right-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    .ui-slider-horizontal {
        height: 10px !important;
        border-color: #eaeaea;
        margin-bottom: 10px;
        top: 20px;
        background: #ffffff;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    .ui-slider-vertical {
        width: 10px !important;
        border-color: #eaeaea;
        background: #ffffff;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    .ui-slider-handle {
        border-color: #f5f5f5;
        height: 24px !important;
        width: 24px !important;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        outline: none;
        cursor: pointer;
        background-color: #f8f8f8;
    }
    .ui-slider-horizontal .ui-slider-handle {
        top: -8px;
    }
    .ui-slider-vertical .ui-slider-handle {
        left: -7px;
    }
    .ui-widget-header {
        border: 1px solid #e8e8e8;
        background: #f5f5f5;
        color: #555555;
    }
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        border: 1px solid #dddddd;
        background: #ffffff;
        font-weight: normal;
        color: #555555;
    }
    .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
        border: 1px solid #eaeaea;
        background: #fafafa;
        font-weight: normal;
        color: #555555;
    }
    .ui-slider-horizontal .ui-slider-handle .ui-label {
        top: -25px;
        position: relative;
        font-size: 90%;
        margin-left: -5px;
        color: #777777;
        white-space: nowrap;
    }
    .ui-slider-vertical .ui-slider-handle .ui-label {
        left: 28px;
        position: relative;
        font-size: 90%;
        color: #777777;
        top: -2px;
        white-space: nowrap;
    }
    /*slider colors*/

    .ui-slider.slider-primary .ui-widget-header {
        border: 1px solid #4d9cf8;
        background: #4d9cf8;
        color: #ffffff;
    }
    .ui-slider.slider-purple .ui-widget-header {
        border: 1px solid #673AB7;
        background: #673AB7;
        color: #ffffff;
    }
    .ui-slider.slider-accent .ui-widget-header {
        border: 1px solid #E91E63;
        background: #E91E63;
        color: #ffffff;
    }
    .ui-slider.slider-info .ui-widget-header {
        border: 1px solid #03A9F4;
        background: #03A9F4;
        color: #ffffff;
    }
    .ui-slider.slider-warning .ui-widget-header {
        border: 1px solid #FFC107;
        background: #FFC107;
        color: #ffffff;
    }
    .ui-slider.slider-danger .ui-widget-header {
        border: 1px solid #f44336;
        background: #f44336;
        color: #ffffff;
    }
    .ui-slider.slider-success .ui-widget-header {
        border: 1px solid #4CAF50;
        background: #4CAF50;
        color: #ffffff;
    }
    /*-----------------------------------------------------------
        Typeahead Suggestions
    ----------------------------------------------------------*/

    .twitter-typeahead {
        width: 100%;
        vertical-align: top;
    }
    /*-----------------------------------------------------------
        UI Lockscreen
    ----------------------------------------------------------*/

    .lockscreen_icon i {
        color: #4d9cf8;
        font-size: 140px;
        text-align: center;
        margin: 90px auto 0 0;
        display: block;
    }
    .lockscreen_info img {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        margin-right: 10px;
    }
    .lockscreen_info {
        text-align: center;
        display: block;
        width: 100%;
        font-size: 21px;
        line-height: 32px;
        color: #999999;
        font-weight: 400;
        margin: 15px 0;
    }
    .lockscreen_search {
        margin: 15px 0;
    }
    .lockscreen_search input[type='password'] {
        margin: 0 auto;
        padding: 15px 15px;
        font-size: 17px;
        height: 45px !important;
        background-color: #f8f8f8;
    }
    .lockscreen_search input[type='submit'] {
        visibility: hidden;
        width: 0px;
        height: 0px;
        overflow: hidden;
        position: absolute;
        top: 0px;
        right: 0px;
        padding: 0px;
        margin: 0px;
    }
    .lockscreen_search .input-group.transparent .input-group-addon {
        background-color: #f8f8f8;
        padding: 6px 12px 6px 20px;
    }
    .lockscreen_btn {
        margin: 30px 0 0 0;
    }
    .lockscreen_search i {
        font-size: 21px;
    }
    .lockscreen_tagline {
        text-align: center;
        display: block;
        width: 100%;
        font-size: 18px;
        line-height: 32px;
        color: #aaaaaa;
        font-weight: 400;
        margin: 15px 0;
    }
    /*-----------------------------------------------------------
        Form Validations
    ----------------------------------------------------------*/

    .form-group .error {
        color: #f44336;
        font-weight: 400;
        font-size: 13px;
    }
    .form-group .controls {
        position: relative;
    }
    .form-group.has-error i, .form-group.has-success i {
        position: absolute;
        font-size: 14px;
        right: 15px;
        top: 10px;
    }
    .form-group.has-error i {
        color: #f44336;
    }
    .form-group.has-success i {
        color: #4CAF50;
    }


    /*-----------------------------------------------------------
        Form Wizard
    ----------------------------------------------------------*/
    .wizardpills{
        position: relative;
        display: inline-block;
        width: 100%;
        padding-bottom: 40px;
    }

    .wizardpills ul.form-wizard{
        position: absolute;
        top: 0px;
        left: 0px;
        height: 60px;
        z-index: 2;
        width: 100%;
        padding-right: 15px;
    }

    .wizardpills #bar{
        position: absolute;
        top: 10px;
        left: 0px;
        height: 10px;
        width: 100%;
        margin: 7px 0;
        z-index: 1;
    }

    .wizardpills .tab-content{
        position: relative;
        top: 60px;
        background-color: #ffffff;
        border: 0px solid transparent;
    }

    .form-wizard li{
        display: block;
        float: left;
        height: 40px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
                border-radius: 50%;
        position: relative;
        text-align: right;
        width:20%;
        margin:0 !important;
    }

    .form-wizard li a{
        float: right;
        width: 40px;
        height: 40px;
        display: block;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
                border-radius: 50%;
        position: absolute;
        right: -20px;
        background: #f5f5f5;
        background-image: none;
        -webkit-box-shadow: inset 0 -1px 2px rgba(150, 150, 150, .1);
        -moz-box-shadow: inset 0 -1px 2px rgba(150, 150, 150, .1);
        box-shadow: inset 0 -1px 2px rgba(150, 150, 150, .1);
        line-height: 27px;
    }

    .form-wizard li.complete a{
        background-color: #4d9cf8;
        font-family: FontAwesome;
        color: #ffffff;
        line-height: 27px;
        text-align: center;
        font-size: 14px;
    }

    .form-wizard li a:before {
        content: " ";
        margin-left: -2px;
        height: 34px;
        width: 14px;
        display: block;
    }

    .form-wizard li.complete a:before {
    content: "\f00c";
    }

    .form-wizard li a span{
    position: absolute;
    color: #777777;
    width: auto;
    display: inline-block;
    margin-left: -25px;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    top: 40px;
    }

    .form-wizard li.complete a span{
        padding-left: 5px;
    }

    /*-----------------------------------------------------------
        Carousel
    ----------------------------------------------------------*/

    .carousel-indicators .active {
        width: 15px;
        height: 15px;
        margin: 1px;
        background-color: #f5f5f5;
    }
    .carousel-indicators {
        bottom: 15px;
        margin-bottom: 0px;
    }
    .carousel-indicators li {
        width: 13px;
        height: 13px;
        margin: 2px;
        cursor: pointer;
        background-color: transparent;
        border: 1px solid #f5f5f5;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    .carousel-control.left, .carousel-control.right {
        background-image: none;
    }
    .carousel-control {
        width: 15%;
        color: #f5f5f5;
        text-align: center;
        text-shadow: 0;
        filter: alpha(opacity=60);
        opacity: .6;
    }
    .carousel-control:hover, .carousel-control:focus {
        color: #f5f5f5;
        text-decoration: none;
        filter: alpha(opacity=90);
        outline: 0;
        opacity: .9;
    }
    .carousel-caption {
        right: 20%;
        left: 20%;
        padding-bottom: 15px;
        background: transparent;
    }
    .carousel-caption {
        position: absolute;
        right: 0%;
        bottom: 0;
        left: 0%;
        width: 100%;
        z-index: 10;
        padding: 30px;
        text-align: left;
        text-shadow: none;
    }
    .carousel-caption h3, .carousel-caption p {
        color: #ffffff;
        text-shadow: none;
        width: auto;
        display: inline-block;
    }
    .carousel-caption .clearfix {
        width: 100%;
        clear: both;
    }
    .carousel-caption h3 {
        background: #fea01d;
        padding: 8px 15px;
    }
    .carousel-caption p {
        background: #777777;
        padding: 8px 15px;
    }
    /*-------------------------------------------------------------
    Visibility Animation in Elements (Viewport)
    ---------------------------------------------------------------*/

    .inviewport, .hiddenthis {
        opacity: 0;
    }
    .inviewport.visible {
        opacity: 1;
    }
    /*------------------------------------------
        Widget - Tile Counter 
    ---------------------------------------------*/

    .tile-counter {
        padding: 15px 30px;
        margin: 0 0 30px 0;
        box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -webkit-box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -moz-box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -o-box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -ms-box-shadow: 0 1px 3px rgba(33,33,33,.2);
    }
    .tile-counter .content {
        display: block;
        text-align: center;
    }
    .tile-counter i, .tile-counter h2 {} .tile-counter i {
        margin-right: 15px;
        font-size: 35px;
        line-height: 35px;
    }
    .tile-counter span {
        display: block;
        clear: both;
    }
    .tile-counter h2 {
        color: #f5f5f5;
        font-weight: 700;
        line-height: 35px;
        margin: 0px 0 0 0;
        font-size: 35px;
        display: inline-block;
    }
    .tile-counter span {
        color: #eeeeee;
        display: block;
        margin: 10px 0 0 0;
        font-size: 17px;
        font-weight: 300;
        white-space: nowrap;
    }
    .tile-counter.bg-secondary i, .tile-counter.bg-secondary h2 {
        color: #ffffff;
    }
    .tile-counter.bg-secondary span {
        color: #eaeaea;
    }
    .tile-counter.inverted {
        border: 2px solid #efefef;
    }
    .tile-counter.inverted h2, .tile-counter.inverted span {
        color: inherit;
    }
    .tile-counter.inverted span {
        opacity: .8;
    }
    /*------------------------------------------
        Widget - Tile Progress widget 
    ---------------------------------------------*/

    .tile-progress {
        padding: 30px;
        margin-bottom: 30px;
    }
    .tile-progress h4 {
        color: #ffffff;
        margin: 0px;
        text-align: center;
        white-space: nowrap;
        font-weight: 700;
    }
    .tile-progress h4 i {
        margin-right: 5px;
    }
    .tile-progress span {
        color: #eeeeee;
        display: block;
        text-align: center;
        margin: 0px;
        font-size: 16px;
    }
    .tile-progress .progress {
        margin: 15px 0 10px 0;
        height: 7px;
        background: rgba(50, 50, 58, 0.5);
    }
    .tile-progress .progress .progress-bar {
        background: #ffffff;
    }
    .tile-progress.inverted {
        border: 2px solid #efefef;
    }
    .tile-progress.inverted h4, .tile-progress.inverted span {
        color: inherit;
    }
    .tile-progress.inverted span {
        opacity: .8;
    }
    .tile-progress.inverted .progress {
        background: rgba(50, 50, 58, 0.3);
    }
    .tile-progress.inverted.text-primary .progress .progress-bar {
        background: #4d9cf8;
    }
    .tile-progress.inverted.text-info .progress .progress-bar {
        background: #03A9F4;
    }
    .tile-progress.inverted.text-warning .progress .progress-bar {
        background: #FFC107;
    }
    .tile-progress.inverted.text-danger .progress .progress-bar {
        background: #f44336;
    }
    .tile-progress.inverted.text-success .progress .progress-bar {
        background: #4CAF50;
    }
    .tile-progress.inverted.text-purple .progress .progress-bar {
        background: #673AB7;
    }
    .tile-progress.inverted.text-accent .progress .progress-bar {
        background: #E91E63;
    }
    .tile-progress.inverted.text-secondary .progress .progress-bar {
        background: #9e9e9e;
    }


    /*----------------------------------------
        Restaurant  Dashboard Style  
    ------------------------------------------*/
    .card-stats .card-header.card-header-icon, .card-stats .card-header.card-header-text {
        text-align: right;
    }
    .card-stats .card-header.sale-header-text{
        text-align: left;
    }
    .sale-icon{
        max-width: 100px;
        float: right;
    }
    .s-ball{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 10px;
    }
    .card [class*=card-header-] {
        padding: 0;
        position: relative;
    }
    .card.card-stats{
        margin-top: 15px
    }
    .card.sale{
        padding: 30px 20px;
    }
    .card.sale ul.info{
        text-align: left;
        padding: 0;
        width: 100%
    }
    .card.sale .card-footer{
        padding-top: 20px;
        margin-bottom: 0;
    }
    .card .card-header {
        border-bottom: none;
        background: 0 0;
    }
    .pl-4, .px-4 {
        padding-left: 1.5rem !important;
    }
    .ml-4, .mx-4 {
        margin-left: 1.5rem !important;
    }
    .border-left {
        border-left: 1px solid #f2f2f2 !important;
    }
    .flex{
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }
    .flex-row, .email-wrapper .message-body .attachments-sections ul li {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
    }
    .card .card-header-warning .card-icon, .card .card-header-warning .card-text, .card .card-header-warning:not(.card-header-icon):not(.card-header-text) {
        box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(255,152,0,.4);
    }
    .card [class*=card-header-] .card-icon, .card [class*=card-header-] .card-text {
        border-radius: 3px;
        background-color: #999;
        padding: 18px;
        margin-top: -30px;
        margin-right: 15px;
        float: left;
    }
    .card-stats .card-header.card-header-icon img {
        line-height: 50px;
        width: 50px;
        height: 50px;
        text-align: center;
    }
    .card-stats .card-header .card-category {
        color: #999;
        font-size: 14px;
    }
    .card-stats .card-header .card-title{
        font-weight: 600;
        color: #3C4858;
    }
    .visible{
        overflow: visible !important;
    }
    .card-stats .card-header+.card-footer {
        border-top: 1px solid #eee;
        margin-top: 20px;
    }
    .card .card-footer {
        padding: 10px 0 0;
        margin: 0 15px 10px;
        border-radius: 0;
        justify-content: space-between;
        align-items: center;
        display: flex;
        background-color: transparent;
        border: 0;
    }
    .card .card-footer .stats i {
        margin-right: 7px;
        margin-left: 3px;
        position: relative;
        top: 4px;
        font-size: 16px;
    }
    .card .card-header-warning .card-icon,
    .orange-bg{
        background: linear-gradient(60deg,#ffa726,#fb8c00);
    }
    .card .card-footer .stats {
        color: #999;
        font-size: 12px;
        line-height: 22px;
        display: inline-flex;
    }

    .res-item{
        position: relative;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 30px;
        box-shadow: 0 2px 28px rgba(0,0,0,.15);
    }
    .item1-bg{
        background: url(../../data/res-dash/item1-bg.html) no-repeat;
        background-size: cover;
    }
    .item2-bg{
        background: url(../../data/res-dash/item2-bg.html) no-repeat left center;
        background-size: cover;
    }
    .item3-bg{
        background: url(../../data/res-dash/item3-bg.html) no-repeat left center;
        background-size: cover;
    }

    .res-item .doc-rating span{
        background: #fff
    }
    .has-pattern:before{
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background: url(../../data/res-dash/pattern.html);
        opacity: 0.5;
    }
    .add-btn{
        color: #fff;
        font-size: 16px;
        border-radius: 20px;
        border: 1px solid #fff;
        background: transparent;
        padding: 10px 20px;
        display: inline-block;
    }
    .top-content {
        -webkit-box-shadow: 0px 2px 28px rgba(0,0,0,0.1);
        -moz-box-shadow: 0px 2px 28px rgba(0,0,0,0.1);
        box-shadow: 0 2px 28px rgba(0,0,0,.1);
    }
    .top-content.social {
        color: #ffffff !important;
        padding: 20px;
        font-size: 26px;
        text-align: center;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
    }
    .top-content.social i{color: #fff;font-size: 30px}
    ul.info {
        background: #fff;
        padding: 15px 1em 5px;
        text-align: center;
    }
    ul.info p {
        color: #b3b3b3;
    }


    .morris-hover.morris-default-style {
        border-radius: 10px;
        padding: 6px;
        color: #666;
        background: rgba(255,255,255,0.8);
        border: solid 2px rgba(230,230,230,0.8);
        font-family: sans-serif;
        font-size: 12px;
        text-align: center;
    }
    .morris-hover {
        position: absolute;
        z-index: 1000;
    }
    .morris-hover.morris-default-style .morris-hover-row-label {
        font-weight: bold;
        margin: 0.25em 0;
    }
    .morris-hover.morris-default-style .morris-hover-point {
        white-space: nowrap;
        margin: 0.1em 0;
    }

    .menu-item{
        position: relative;
        background: #fff;
        transition: all .5s ease-in-out;
        padding: 15px;
        margin: 15px 0;
        border-radius: 55px
    }
    .menu-item-desc{width: 70%}
    .menu-item-desc h4{
        margin-bottom: 5px
    }
    .menu-item .menu-img{
        max-width: 60px;
        height: 60px;
        margin-right: 20px;
        border: 1px solid #ff9041;
        border-radius: 50%;
        padding: 2px;
        overflow: hidden;
    }
    .menu-item .menu-img img{
        padding: 2px;
        border-radius: 50%
    }
    .menu-item .price{
        font-size: 20px;
        font-weight: 700;
        color: #ff9041
    }
    .menu-item:hover{
        background: #ff9041
    }
    .menu-item:hover h4,
    .menu-item:hover .price{
        color: #fff
    }
    .menu-item:hover .menu-img{border-color: #fff}
    .menu-item:hover p{
        color: #f8f8f8 
    }
    .justify-content-between {
        -webkit-box-pack: justify !important;
        -webkit-justify-content: space-between !important;
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
    }

    .service_single_content {
        border-radius: 10px;
        background-color: #fff;
        background-image: url(../img/core-img/cards-bg.html);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border: 2px solid #eee !important;
        transition: all .4s ease-in-out;
        -webkit-box-shadow: 0 20px 40px 0 rgba(0,0,0,.11);
        box-shadow: 0 5px 40px 0 rgba(0,0,0,.11);
        border: none;
        padding: 60px 20px;
        margin-bottom: 30px;
    }
    .service_single_content:hover,
    .service_single_content.hover{
        border-color: #ff9041 !important
    }
    .service_icon {
        margin-bottom: 15px;
        display: inline-block;
        max-width: 150px;
    }
    .service_icon img{
        min-height: 75px
    }
    .service_single_content h6 {
        margin-bottom: 15px;
        font-size: 18px;
    }
    .service_single_content .price {
        margin-top: 10px;
        font-size: 24px;
        font-weight: 700;
        color: #ff9041
    }

    .section-heading {
        position: relative;
        z-index: 1;
        margin-bottom: 50px;
    }

    .section-heading h2 {
        font-size: 30px;
        text-transform: capitalize;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .section-heading > p {
        margin-bottom: 0;
        line-height: 2;
        font-size: 16px;
        max-width: 600px;
        margin: 0 auto;
    }
    .dream-dots span {
        font-weight: bold;
        display: inline-block;
        font-weight: 700;
        background-image: linear-gradient(135deg, #846FF4 0%, #F17674 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
    }

    @media (min-width: 991px){
        .npl{
            padding-left: 0 !important
        }
        .npr{
            padding-right: 0 !important
        }
    }
    .our-team{
        border: 1px solid #ff9041;
        border-radius: 30px;
        text-align: center;
        margin-bottom: 30px;
        overflow: hidden;
    }
    .our-team .team_img{
        position: relative;
        overflow: hidden;
    }
    .our-team .team_img:after{
        content: "";
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.2);
        position: absolute;
        bottom: -100%;
        left: 0;
        transition: all 0.3s ease 0s;
    }
    .our-team:hover .team_img:after{
        bottom: 0;
    }
    .our-team img{
        width: 100%;
        height: auto;
    }
    .our-team .social{
        padding: 10px 0 10px 0;
        margin: 0;
        list-style: none;
        position: absolute;
        top: -100%;
        right: 30px;
        background: #ff9041;
        border-radius: 0 0 20px 20px;
        z-index: 1;
        transition: all 0.3s ease 0s;
    }
    .our-team:hover .social{
        top: 0;
    }
    .our-team .social li a{
        display: block;
        padding: 10px 15px;
        font-size: 15px;
        color: #fff;
    }
    .our-team:hover .social li a:hover{
        color: #000;
    }
    .our-team .team-content{
        padding: 20px 0;
        background: #fff;
    }
    .our-team .title{
        margin: 0 0 25px 0;
        font: 600 16px 'Open Sans',sans-serif;
        color: #000;
        text-transform: capitalize;
        margin: 0 0 20px;
        position: relative;
    }
    .our-team .title:before{
        content: "";
        width: 25px;
        height: 1px;
        background: #ff9041;
        position: absolute;
        bottom: -10px;
        right: 50%;
        margin-right: 9px;
        transition-duration: 0.25s;
    }
    .our-team .title:after{
        content: "";
        width: 25px;
        height: 1px;
        background: #ff9041;
        position: absolute;
        bottom: -10px;
        left: 50%;
        margin-left: 9px;
        transition-duration: 0.25s;
    }
    .our-team:hover .title:before,
    .our-team:hover .title:after{
        width: 50px;
    }
    .our-team .post{
        display: inline-block;
        font: 500 14px 'Open Sans',sans-serif;
        color: #666;
        text-transform: capitalize;
    }
    .our-team .post:before{
        content: "";
        display: block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ff9041;
        margin: 0 auto;
        position: relative;
        top: -13px;
    }
    .our-team.ico-team{
        border: 1px solid #5128ff;
    }
    .our-team.ico-team .social{
        background: #ff6699
    }
    .our-team.ico-team .team-content{
        padding: 20px 0 30px
    }
    .our-partners .team-member {
        border: 2px solid #eaeaea;
    }
    .reservation:before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../../data/res-dash/pattern2.html);
        opacity: .1
    }


    /*----------------------------------------
        Crypto  Dashboard Style  
    ------------------------------------------*/
    .coin-box{
        background: #fff;
        padding: 17px 15px;
        border: 1px solid #eee;
        min-width: 230px;
        flex-wrap: wrap;
    }
    .coin-box .coin-icon{
        max-width: 60px
    }
    .coin-box .coin-name{
        margin: 0;
        font-size: 16px;
        margin-bottom: 7px
    }
    .coin-box i{
        margin-left: 7px;
        margin-right: 0
    }
    .coin-box .watch-chart{
        flex: 1;
    }
    .coin-box2{
        background: #fff;
        padding:  10px;
        border: 1px solid #eee;
        width: 100%;
        margin-bottom: 7px
    }
    .coin-box2 .coin-icon{
        max-width: 30px
    }
    .coin-box2 .coin-name{
        margin: 0;
        font-size: 16px;
        width: 30%
    }
    .coin-box2 .coin-price{
        width: 30%;
        text-align: center;
    }
    .coin-box2 i{
        margin-left: 7px;
        margin-right: 0
    }
    .apg-arrows{
        position: absolute;
        top: 15px;
        right: 0
    }
    .add-plus{
        font-size: 16px;
        padding: 10px;
        width: 40px;
        height: 40px;
        border: 1px dashed #fff;
        margin-bottom: 15px;
        margin-top: 5px;
    }
    .promp-box img{
        max-width: 105px
    }

    .ask-box{
        padding: 20px 0 20px 30px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        background-image: linear-gradient(-12deg,#a1c4fc 0,#8473ee 100%) ;
        margin-bottom: 15px;
        margin-top: 15px
    }
    .ask-box.v2{
        padding: 15px 0 15px 15px;
        margin-bottom: 15px
    }
    .ask-circle{
        float: left;
        width: 100px;
        height: 100px;
        border-radius: 100%;
        text-align: center;
        margin-right: 25px;
    }
    .ask-box.v2 .ask-circle{
        width: 80px;
        height: 80px;
        margin-right: 10px
    }
    .ask-circle span {
        vertical-align: middle;
        font-size: 32px;
        margin-top: 15px;
        line-height: 1;
        color: #fff
    }
    .ask-info {
        margin: 0 65px 0 85px;
        color: #fff
    }
    .ask-info h3{
        font-size: 20px;
        margin-bottom: 10px
    }
    .ask-arrow{
        top: 0;
        position: absolute;
        right: 0;
        width: 60px;
        height: 100%;
        text-align: center;
        float: right;
        background: rgba(255,255,255,0.2);
    }
    .ask-arrow span {
        border-radius: 100%;
        background: #fff;
        display: inline-block;
        padding: 4px;
        font-size: 20px;
        width: 30px;
        height: 30px;
        font-weight: normal;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    @media (max-width: 480px){
        .ask-info {
            margin: 20px 65px 0 0px;
        }
        .ask-circle{
            float: none;
            display: block;
        }
    }
    .referal-head{
        overflow: hidden;
        position: relative;
        padding: 30px
    }
    .credit-amount {
        position: absolute;
        right: 30px;
        top: 0;
        padding: 20px;
        text-align: center;
    }
    @media(max-width: 767px){
        .credit-amount{
            display: none;
        }
    }
    .affiliate-link input{
        min-height: 50px;
    }
    .affiliate-social .uprofile-social a{
        border-radius: 25px;
        min-width: 24%;
        margin-bottom: 0
    }
    .api-box{
        padding: 50px;
        background: #fff;
        position: relative;
        margin-bottom: 30px
    }
    .api-box:before{
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 42%;
        background: url(https://medical-dash.netlify.app/data/crypto-dash/api1-bg.svg) no-repeat ;
        background-size: cover
    }
    .api-box.v2:before{
        background: url(https://medical-dash.netlify.app/data/crypto-dash/api2-bg.svg) no-repeat ;
        height: 42%;
        background-size: 55%;
        background-position: right center;
    }
    .api-box img{
        max-width: 130px;
        max-height: 133px
    }
    .more-btn {
        position: relative;
        z-index: 1;
        min-width: 160px;
        height: 48px;
        line-height: 48px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1px;
        display: inline-block;
        padding: 0 20px;
        text-align: center;
        text-transform: uppercase;
        background-size: 200% auto;
        color: #fff;
        box-shadow: 0 3ox 20px rgba(0, 0, 0, 0.1);
        border-radius: 100px;
        background-image: linear-gradient(to right, #21d397 0%, #7450fe 50%, #21d397 100%);
        background-image: -webkit-linear-gradient(to right, #21d397 0%, #7450fe 50%, #21d397 100%);
        border: 1px solid #fff;
        -webkit-transition: all 500ms;
        transition: all 500ms;
    }
    .more-btn:hover {
        background-position: right center;
        color: #fff;
    }
    .dotted-wrapper{
        position: relative;
        display: inline-block;
        background: url(../../data/crypto-dash/dotted-bg.html) no-repeat;
        background-size: cover;
        padding: 60px 40px;
        overflow: hidden;
        border-radius: 20px;
        margin-bottom: 15px
    }
    .ref-box{
        padding: 40px 15px 25px;
    }
    .ref-earning h2{
        font-size: 50px
    }
    .ref-payout span{
        font-size: 20px
    }
    .ref-payout img{
        max-width: 30px;margin-right: 10px
    }
    .payout-address .input-group{
        border: 1px solid rgba(255,255,255,.4)
    }
    .payout-address input{
        color: #fff !important;
        min-height: 50px;
        border: none;
    }
    .payout-address button{
        display: inline-block;
    }
    .ref-num-box img{
        max-width: 80px
    }
    .ref-bg1{
        background: url(../../data/crypto-dash/ref-bg1.html) no-repeat center right;
        background-size: cover
    }
    .ref-bg2{
        background: url(../../data/crypto-dash/ref-bg2.html) no-repeat center right;
        background-size: cover
    }
    .ref-bg3{
        background: url(../../data/crypto-dash/ref-bg3.html) no-repeat center right;
        background-size: cover
    }
    .invest-data{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        transform: translate(-50%, -50%);
    }
    .crypto-wallet-address.nav-tabs.vertical.left-aligned{
        max-width: 210px;
        margin-right: 30px;
        border-right: 0
    }
    .crypto-wallet-address.nav-tabs.vertical.left-aligned li a{
        border-right-color: #4d9cf8 !important;
    }
    .crypto-wallet-address.nav-tabs.vertical.left-aligned li.active a h4,
    .crypto-wallet-address.nav-tabs.vertical.left-aligned li a:hover h4{
        color: #333
    }
    .crypto-wallet-address.nav-tabs.vertical.left-aligned li a h4{
        color: #fff
    }
    .wallet-address-tab{
        margin-left: 0 !important
    }
    .nav>li>a>.crypto-i{
        max-width: 30px;
        margin-top: 10px
    }
    .check-span{
        position: absolute;
        right: 10px;
        top: 10px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
        border: 1px solid #4d9cf8;
        background: #4d9cf8;
        display: none;
    }
    .check-span i{
        font-size: 12px;
        color: #fff
    }
    .crypto-wallet-address.nav-tabs.vertical.left-aligned li.active .check-span{
    display: block;
    }
    .t-summary{
        padding: 5px 10px;
        border: 1px solid #eee;
        margin-bottom: 7px;
        text-align: left;
    }
    .t-summary h4{
        font-size: 16px;
        width: 70%
    }
    .payment-info-wrap input,
    .payment-info-wrap select,
    .crypto-info-wrap input{
        min-height: 45px;
        border-radius: 25px;
        padding-left: 20px;
    }
    .crypto-info-wrap button{
        min-height: 45px;
        border-radius: 25px;
    }
    .crpto-currency-box{
        text-align: center;
        padding: 30px 10px;
        margin-bottom: 15px;
        border: 2px solid #eee;
        border-radius: 8px;
        background: #fff
    }
    .crpto-currency-box i{
        font-size: 30px;
        margin-bottom: 20px;
        display: block;
    }
    .crpto-currency-box i.bitcoin{
        color: #f7931b
    }
    .crpto-currency-box i.bitcash{
        color: #5f9e21
    }
    .crpto-currency-box i.dash{
        color: #b05ae3
    }
    .crpto-currency-box i.eth{
        color: #707bb9
    }
    .crpto-currency-box i.ltc{
        color: #bebebe
    }
    .crpto-currency-box h3{
        font-size: 18px;
        margin-bottom: 0;
    }
    .crpto-currency-box img{
        max-width: 50px;
        margin-bottom: 5px;
    }

    .checky-box{
        width: 25px;
        height: 25px;
        padding: 1px;
        cursor: pointer;
        border-radius: 3px;
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .crypto-list div.active{
        border-color: #f7931b;
        position: relative;
    }
    .crypto-list div.active .checky-box{
        background: #f7931b
    }
    .crypto-list div.active .checky-box:before{
        font:14px/30px 'FontAwesome';
        position:absolute;
        content:"\f00c";
        height:25px;
        width:25px;
        line-height:25px;
        text-align:center;
        z-index:100;
        color:#FFF;
        top:0;
        left:0;
    }

    .payment-list div.active{
        border-color: #887ef0;
        position: relative;
    }
    .payment-list div.active .checky-box{
        background: #887ef0
    }
    .payment-list div.active .checky-box:before{
        font:14px/30px 'FontAwesome';
        position:absolute;
        content:"\f00c";
        height:25px;
        width:25px;
        line-height:25px;
        text-align:center;
        z-index:100;
        color:#FFF;
        top:0;
        left:0;
    }
    .profile-balance{
        position: relative;
        display: inline-block;
        width: 100%;
        margin-top: 15px;
        border-radius: 7px
    }
    .profile-balance .profile-bal-head{
        padding: 5px 15px;
        border-bottom: 1px solid #eeeeee5c;
    }
    .profile-balance .profile-bal-head h3{
        color: #fff;
        font-size: 16px;
        font-weight: 600
    }
    .profile-balance .profile-bal-body{
        padding: 10px 15px 
    }
    .profile-balance .profile-bal-body h2{
        position: relative;
        color: #fff;
        font-size: 40px;
        display: inline-block;
        font-weight: 700;
    }
    .profile-balance .profile-bal-body small{
        position: absolute;
        font-size: 16px;
        right: -35px;
        top: 5px;
        font-weight: 600;
        color: #f4f61e;
    }
    .profile-balance .profile-bal-body p{
        padding-left: 5px;
        padding-bottom: 10px;
        font-size: 18px;
    }

    .prof-contain{
        display: inline-block;
    }
    .prof-check{
        position: absolute;
        right: -7px;
        top: 10px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background: #6fc334;
        color: #fff;
        border-radius: 50%
    }
    .prof-avtar{
        padding: 20px;
        display: flex;
        align-items: center;
    }
    @media (max-width: 580px){
        .prof-avtar{
            display: block;
        }
        .prof-avtar .avatar-img-wrapper{
            margin-bottom: 20px
        }
    }
    .prof-avtar .avatar-img-wrapper{
        border-radius: 5px;
        background: #fff;
        margin-right: 20px
    }
    .ico-img{
        width: 40px;
        float: left;
        font-size: 35px;
        top: 10px;
        position: relative;
    }
    .trade-limit{
        margin-bottom: 30px
    }
    .trade-limit .angle-round{
        font-size: 14px;
        font-weight: 700;
    }
    .trade-limit .progress.progress-cls{
        height: 12px !important
    }
    .trade-limit .progress-cls .progress-bar{
        line-height: 12px;
        height: 12px;
    }

    .pricing-item {
        border-radius: 10px;
        background-color: #3F51B5;
        border: 2px solid #0ed2c4;
        text-align: center;
        display: inline-block;
        width: 100%;
        padding: 30px 0 20px;
        margin: 15px 0 ;
        cursor: pointer;
    }
    .pricing-item h4{
        font-size: 14px;
        font-weight: bold;
        line-height: 1.43;
        letter-spacing: 0.8px;
        color: #00e0c4;
        margin: 0 0 20px;
    }
    .pricing-item h3{
        font-size: 52px;
        font-weight: 400;
        color: #fff;
        line-height: 0.92;
        margin: 0 0 10px;
    }
    .pricing-item .pricing {
        font-size: 15px;
        line-height: 18px;
        margin: 0 0 20px;
        color: #fff
    }
    .pricing-item span {
        font-size: 14px;
        display: inline-block;
        color: #00e0c4;
        margin: 0 0 10px;
    }
    .pricing-item label {
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        width: 100%;
        color: #fff;
        font-weight: normal;
        letter-spacing: 0.5px;
        background-image: linear-gradient(117deg, #724eff, #5187ff);
        background-repeat: no-repeat;
        background-position: left;
        background-image: url(https://medical-dash.netlify.app/data/crypto-dash/discount-bg-1.svg);
    }

    .count-down .table-cell {
        position: relative;
        width: 25%
    }
    .count-down .timer-body-block{
        display: flex;
        padding-bottom: 20px
    }
    .count-down .tab-val {
        width: 90%;
        font-size: 30px;
        font-weight: 600;
        height: 75px;
        line-height: 75px;
        margin: 0 auto;
        background-color: #4980e2;
        color: #ffffff;
    }
    .count-down .tab-metr {
        margin-top: 15px;
        font-size: 16px;
    }
    @media (max-width: 480px) {
        .count-down .tab-metr{
            font-size: 14px
        }
    }
    .current-progress .progress{
        border-radius: 25px
    }
    .ico-progress span {
        font-size: 12px;
        font-weight: 700;
        padding-top: 0px;
        display: inline-block;
    }
    .ico-progress li.title {
        float: left;
        padding-left: 10%;
        font-size: 20px;
        font-weight: 600;
    }
    .ico-progress li.strength {
        float: right;
        font-size: 20px;
        font-weight: 600;
    }
    .ico-progress .current-progress:before {
        content: '';
        position: absolute;
        width: 4px;
        height: 50px;
        bottom: -5px;
        left: 12%;
        background: #ffba00;
    }
    .pay-bt{
        width: 94%;
        background: #fff !important;
        border: 1px solid #eee;
        text-align: left;
    }
    .pay-btn{
        min-height: 76px
    }
    /*---------------------------------------------
        Navigation Bars
    --------------------------------------------*/

    .navbar-inverse {
        box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
        -o-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
        -ms-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
        -moz-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
        -webkit-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
    }
    .navbar-default {
        background-image: none;
        background: #f5f5f5;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
        -o-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
        -ms-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
        -moz-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
        -webkit-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
        border-color: #eaeaea;
    }
    .navbar-default li a, .navbar-default li a {
        line-height: 36px;
    }
    .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.active>a {
        background-image: none;
        box-shadow: inset 0px 0px 5px rgba(86, 96, 117, 0.15);
        -ms-box-shadow: inset 0px 0px 5px rgba(86, 96, 117, 0.15);
        -o-box-shadow: inset 0px 0px 5px rgba(86, 96, 117, 0.15);
        -moz-box-shadow: inset 0px 0px 5px rgba(86, 96, 117, 0.15);
        -webkit-box-shadow: inset 0px 0px 5px rgba(86, 96, 117, 0.15);
    }
    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
        color: #555;
        background-color: #eaeaea;
    }
    .navbar-default .navbar-toggle {
        border-color: #eaeaea;
    }
    .navbar-toggle {
        position: relative;
        float: right;
        padding: 8px;
        margin-top: 9px;
        margin-right: 15px;
        margin-bottom: 9px;
        background-color: transparent;
        background-image: none;
        border: 1px solid transparent;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        font-size: 14px;
    }
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
        background-color: #eaeaea;
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #777777;
    }
    .navbar-toggle .icon-bar+.icon-bar {
        margin-top: 3px;
    }
    .navbar-toggle .icon-bar {
        display: block;
        width: 16px;
        height: 2px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
    .navbar {
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
    }
    .navbar-inverse {
        background-image: none;
    }
    .navbar-inverse {
        background-color: #424242;
        border-color: transparent;
        color: rgba(174, 178, 183, 1.0);
    }
    .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
        color: rgba(174, 178, 183, 1.0);
        background-color: #212026;
        background-image: none;
    }
    .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
        color: rgba(174, 178, 183, 1.0);
        background-color: transparent;
    }
    .navbar-inverse li a, .navbar-inverse li a {
        line-height: 36px;
    }
    .navbar-brand {
        font-size: 17px;
    }
    .navbar.navbar-primary {
        background-image: none;
    }
    .navbar.navbar-primary {
        background-color: #4d9cf8;
        border-color: transparent;
        color: #f5f5f5;
    }
    .navbar.navbar-primary .navbar-nav>.active>a, .navbar.navbar-primary .navbar-nav>.active>a:hover, .navbar.navbar-primary .navbar-nav>.active>a:focus {
        color: #ffffff;
        background-color: rgba(100, 100, 100, 0.2);
        background-image: none;
    }
    .navbar.navbar-primary .navbar-nav>li>a:hover, .navbar.navbar-primary .navbar-nav>li>a:focus {
        color: #ffffff;
        background-color: transparent;
    }
    .navbar-primary .navbar-brand {
        color: #f5f5f5;
    }
    .navbar-brand, .navbar-nav>li>a {
        text-shadow: none;
    }
    .navbar-primary .navbar-nav>li>a {
        color: #f5f5f5;
    }
    .navbar-inverse .navbar-toggle .icon-bar {
        background-color: #bcbcbc;
    }
    .navbar-primary .navbar-toggle {
        border-color: rgba(50, 50, 58, 0.1);
    }
    .navbar-primary .navbar-toggle .icon-bar {
        background-color: #cccccc;
    }
    .navbar-primary .navbar-toggle:hover, .navbar-primary .navbar-toggle:focus {
        background-color: rgba(50, 50, 58, 0.4);
    }
    .navbar-primary .navbar-collapse, .navbar-primary .navbar-form {
        border-color: rgba(50, 50, 58, 0.2);
    }
    /*-----------------------------------------------------------
        Search page
    ----------------------------------------------------------*/

    .search_result {
        margin: 0 0px 30px 0;
        display: inline-block;
        width: 100%;
    }
    .search_result.row{
        margin-left: 0px;
        margin-right: 0px;
    }
    .search_result img {
        width: 100%;
        height: auto;
        margin: 10px 0 0 0;
    }
    .search_data .nav-tabs>li>a {
        background-color: #eeeeee;
    }
    .search_data .nav>li>a:hover, .search_data .nav>li>a:focus {
        background-color: #fafafa;
    }
    .search_data .tab-content {
        padding: 30px 15px 30px 15px;
    }
    .search_data .tab-pane {
        height: 600px;
        overflow: hidden;
        position: relative;
    }

    .music_genre_search .tab-pane {
        height: 1200px;
        overflow: hidden;
        position: relative;
    }
    /*-----------------------------------------------------------
        Blogs
    ----------------------------------------------------------*/

    .blog_post {
        display: inline-block;
        width: 100%;
        margin: 0 0 60px 0;
    }
    .full_blog_post {
        margin: 0 0 15px 0;
    }
    .blog_post h3 {
        margin: 0 0 15px 0;
    }
    .blog_post h5 {
        margin: 0 0 15px 0;
    }
    .blog_info {
        margin: 0 0 15px 0;
    }
    .blog_info a, .blog_info i {
        margin-right: 5px;
    }
    .blog-content {
        margin: 0px 0 30px 0;
        display: inline-block;
        width: 100%;
    }
    .media-object {
        max-height: 250px;
        margin: 15px 0 30px 0;
        max-width: 800px;
        width: 100%;
        height: auto;
    }
    .comment-block.row{
        margin-left: 0px;
        margin-right: 0px;
    }
    .full_blog_post .comment-block img {
        width: 100%;
        height: auto;
        max-width: 66px;
    }
    .full_blog_post .comment-block .img-area {
        padding: 0px;
    }
    .full_blog_post .comment-block.level-2 {
        margin-left: 45px;
    }
    .full_blog_post .comment-block.level-3 {
        margin-left: 90px;
    }
    /*-----------------------------------------------------------
        Invoice
    ----------------------------------------------------------*/

    .invoice-title h2 {
        display: block;
        color: #ffffff;
        height: 50px;
        line-height: 80px;
        height: 90px;
        margin: 0px;
    }
    .invoice-head {
        display: inline-block;
        width: 100%;
        background-color: #f5f5f5;
        padding: 0px 0px;
    }
    .invoice-head.row{
        margin-left: 0px;
        margin-right: 0px;
    }
    .invoice-title {
        padding-left: 0px;
    }
    .invoice-logo {
        padding-right: 0px;
    }
    @media (max-width: 991px) {
        .invoice-title {
            padding-left: 0px;
            padding-right: 0px;
        }
        .invoice-logo {
            padding-left: 0px;
            padding-right: 0px;
        }
    }
    .invoice-logo img {
        width: 100%;
        height: auto;
        max-width: 221px;
    }
    .invoice-due h2, .invoice-due h3 {
        display: inline-block;
    }
    .invoice-head-info {
        padding-top: 10px;
        padding-bottom: 10px;
        white-space: nowrap;
        font-size: 14px;
    }
    .invoice-head-info:last-child {
        padding-left: 0px;
    }
    .invoice-head-info:first-child {
        padding-right: 0px;
    }
    .table.invoice-table > tbody > tr > .no-line {
        border-top: none;
    }
    .table.invoice-table > thead > tr > .no-line {
        border-bottom: none;
    }
    .table.invoice-table > tbody > tr > .thick-line {
        border-top: 1px solid #aaaaaa;
    }
    .table.invoice-table > thead > tr {
        background-color: #3667db;
        color: #f5f5f5;
    }
    .table.invoice-table > thead > tr td {
        padding: 10px;
    }
    .table.invoice-table .thick-line h4, .table.invoice-table .thick-line h3, .table.invoice-table .no-line h4, .table.invoice-table .no-line h3 {
        margin: 0px;
    }
    .table.invoice-table > thead > tr > td > h4 {
        color: #f5f5f5;
        margin: 0;
    }
    /*-----------------------------------------------------------
        Logo
    ----------------------------------------------------------*/

    .page-topbar .logo-area {
        background: url("../images/login-logo.png");
        background-repeat: no-repeat;
        background-size: 70%;
        background-position: center;
        /* height: 1px; */
    }
    .page-topbar.sidebar_shift .logo-area {
        background-image: url('../images/logo-folded.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 70%;
    }
    .page-topbar.chat_shift .logo-area {
        background-image: url('../images/logo-folded.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 70%;
    }
    /*-----------------------------------------------------------
        Profile Page
    ----------------------------------------------------------*/

    .uprofile-image {
        width: 100%;
        display: inline-block;
        margin: 0 0 15px 0;
        text-align: center;
    }
    .uprofile-image img {
        height: 120px;
        width: 120px;
        background-color: #999999;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        display: inline-block;
        margin: 0 auto;
    }
    .uprofile-name {
        display: inline-block;
        text-align: center;
        width: 100%;
        margin: 0 0 15px 0;
    }
    .uprofile-name h3 {
        text-align: center;
        font-size: 23px;
        margin: 10px 0 5px 0;
    }
    .uprofile-name h3 a {
        text-decoration: none;
        color: #777777;
    }
    .uprofile-name .uprofile-title {
        color: #aaaaaa;
    }
    .uprofile-status {
        width: 8px;
        height: 8px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        display: inline-block;
    }
    .uprofile-buttons {
        margin: 15px 0 0 0;
    }
    .uprofile-buttons a.btn {
        width: 100%;
        margin: 5px 0 0 0;
    }
    .uprofile-social {
        margin: 30px 0;
    }
    .uprofile-social .btn {
        margin: 5px 0px 5px 3px;
    }
    .uprofile-info {
        padding: 25px 40px 15px 40px;
        background: #e8e8e8;
        margin-bottom: 20px;
    }
    .uprofile-info.v2{
        padding: 30px 20px ;
        border: 1px solid #4d9cf8;
        background: #fff
    }
    .uprofile-info li {
        display: block;
        margin: 0px 0 5px 0;
        color: #878787;
        font-size: 90%;
    }
    .uprofile-info.v2 li{
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        margin: 0
    }
    .uprofile-info.v2 h5{
        display: inline-block;
        width: 45%;
        padding-right: 10px
    }
    .uprofile-info li i {
        margin-right: 5px;
    }
    .uprofile-info.v2 li i{
        color: #4d9cf8
    }
    .uprofile-content {
        background-color: #ffffff;
        display: inline-block;
        min-height: 600px;
        width: 100%;
        padding: 30px;
    }
    .enter_post {
        margin: 30px 0 0px 0;
    }
    .enter_post textarea {
        width: 100%;
        height: 70px;
        padding: 10px;
        overflow: hidden;
        word-wrap: break-word;
        resize: horizontal;
    }
    .enter_post .form-group, .enter_post .form-group .controls {
        margin: 0px;
    }
    .enter_post_btns {
        margin: 0px;
        padding: 0px;
        margin: 10px 0;
    }
    .enter_post_btns .btn-link {
        margin: 0 10px 0 0px;
        color: #999999;
        padding-left: 5px;
        padding-right: 5px;
    }
    .uprofile_wall_posts .pic-wrapper {
        padding: 0px 0 0px 0;
    }
    .uprofile_wall_posts .pic-wrapper img {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        min-width: 40px;
        min-height: 40px;
        margin: 0px 0 10px 0;
        background: #aaaaaa;
        height: 40px;
        width: 40px;
        float: right;
    }
    .uprofile_wall_posts .info-wrapper .info {
        margin: 5px 0 10px 0;
    }
    .uprofile_wall_posts .info-wrapper .info-details, .uprofile_wall_posts .info-wrapper .info-actions {
        font-size: 85%;
    }
    .uprofile_wall_posts .comment {
        margin: 15px 0 0 0;
        display: inline-block;
        width: 100%;
    }
    .uprofile_wall_posts .comment .pic-wrapper img {
        min-width: 28px;
        min-height: 28px;
        height: 28px;
        width: 28px;
    }
    .comment-input {
        padding: 0 0 30px 0;
    }
    .uprofile_wall_posts .comment-input .pic-wrapper img {
        min-width: 28px;
        min-height: 28px;
        margin: 0px 0 10px 0;
    }
    /*-------------------------------------------------
        Widget - To Do Task List
    -------------------------------------------------*/

    .cmpltadmin-todo-task {
        padding: 30px;
        margin-bottom: 30px;
    }
    .wid-task-header {
        display: block;
        margin-bottom: 10px;
    }
    .wid-task-header .wid-icon {
        float: left;
    }
    .wid-task-header .wid-icon i {
        font-size: 30px;
        color: #eaeaea;
        margin: 3px 15px 0 0;
    }
    .wid-task-header .wid-text h4 {
        color: #ffffff;
        display: block;
        margin: 0px 0 0px 0;
        font-weight: 700;
    }
    .wid-task-header .wid-text span {
        display: block;
        color: #e1e1e1;
        white-space: nowrap;
    }
    .wid-add-task {
        margin-top: 15px;
    }
    .wid-add-task .form-control{
        background-color: transparent;
        border: 0px;
        border-bottom: 2px solid rgba(255,255,255,.7);
        padding-left: 0px;
        color: #ffffff;
    }
    .wid-all-tasks {
        display: block;
        color: #ffffff;
        margin: 15px 0;
    }
    .wid-all-tasks ul .icheck-label {
        color: #ffffff;
    }
    .wid-all-tasks ul li label {
        max-width: 200px !important;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        vertical-align: top;
        white-space: nowrap;
        cursor: hand;
        cursor: pointer;
        width: auto;
    }
    .wid-all-tasks ul li.checked label {
        color: #dddddd;
    }
    .wid-all-tasks ul li label:after {
        content: " ";
        height: 1px;
        background-color: transparent;
        position: relative;
        top: -11px;
        width: 100%;
        display: block;
    }
    .wid-all-tasks ul li.checked label:after {
        background-color: #eaeaea;
    }
    .wid-all-tasks ul {
        overflow: hidden;
        position: relative;
        max-height: 160px;
    }
    /*-------------------------------------------------
        Widget - Social Media
    -------------------------------------------------*/

    .wid-social {
        display: inline-block;
        width: 100%;
        padding: 15px 15px 15px 15px;
        margin: 0px 0 30px 0;
    }
    .wid-social .social-info .percent {
        color: #dddddd;
    }
    .wid-social .social-info h3, .wid-social .social-info h4 {
        margin: 0px 0 15px 0;
    }
    .social-info h3 {
        display: inline-block;
    }
    /*----------------------------------------
    Widget - Blogs
    ------------------------------------------*/

    .wid-blog {
        display: inline-block;
    }
    .wid-blog-title {
        padding: 45px 45px;
        display: inline-block;
        position: relative;
    }
    .wid-blog-title .actions {
        position: absolute;
        top: 0px;
        right: 0px;
    }
    .wid-blog .wid-blog-title .actions i, .wid-blog .wid-blog-title .actions i:hover {
        color: #e8e8e8;
    }
    .wid-blog-title h2 {
        color: #f5f5f5;
        line-height: 45px;
    }
    .wid-blog-content {
        padding: 30px;
        display: inline-block;
    }
    .wid-blog-content.row{
        margin-left: 0px;
        margin-right: 0px;
    }

    .wid-blog-content .info-wrapper h4 {
        margin: 5px 0 10px 0;
    }
    .wid-blog-content .pic-wrapper {
        padding: 0px 0 0px 0;
    }
    .wid-blog-content .pic-wrapper img {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        min-width: 60px;
        min-height: 60px;
        margin: 0px 0 10px 0;
        background: #aaaaaa;
    }
    .wid-blog-content .info-wrapper .info {
        margin: 5px 0 10px 0;
    }
    .wid-blog-content .info-wrapper .info-details, .wid-blog-content .info-wrapper .info-actions {
        font-size: 85%;
    }
    .wid-blog-content .comment {
        margin: 15px 0 0 0;
        display: inline-block;
        width: 100%;
    }
    .wid-blog-content .comment .pic-wrapper img {
        min-width: 28px;
        min-height: 28px;
    }
    /*----------------------------------------
    Widget - Sparkline Graphs
    ------------------------------------------*/

    .wid-sparkgraph {
        padding: 15px;
        min-height: 110px;
        width: 100%;
        margin-bottom: 30px;
        box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -webkit-box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -moz-box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -o-box-shadow: 0 1px 3px rgba(33,33,33,.2);
        -ms-box-shadow: 0 1px 3px rgba(33,33,33,.2);
    }
    /*----------------------------------------
    Widget - Vector Map
    ------------------------------------------*/

    .wid-vectormap {
        min-height: 300px;
        width: 100%;
        background: #ffffff;
        margin-bottom: 0px;
        padding: 15px 15px;
    }
    .wid-vectormap .map_progress h4 {
        margin: 0 0 10px 0;
        font-size: 110%;
        color: #555555;
    }
    .wid-vectormap .map_progress .progress {
        margin: 10px 0;
        height: 5px;
    }
    .wid-vectormap .jvectormap-zoomin, .wid-vectormap .jvectormap-zoomout, .wid-vectormap .jvectormap-goback {
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        background: #777777;
        padding: 4px;
        color: white;
        cursor: pointer;
        line-height: 8px;
        height: 16px;
        width: 16px;
        text-align: center;
    }
    .tabs-vertical-env.row{
        margin-left: 0px;
        margin-right: 0px;
    }
    /*----------------------------------------
    Widget - Weather
    ------------------------------------------*/

    .wid-weather {
        display: inline-block;
        width: 100%;
        min-height: 375px;
    }
    .wid-weather.row{
        margin-left: 0px;
        margin-right: 0px;
    }
    .wid-weather .weekdays {
        min-height: 375px;
        display: inline-block;
    }
    .wid-weather .weekdays ul {
        overflow: hidden;
        position: relative;
        height: 315px;
    }
    .wid-weather .today {
        display: inline-block;
        color: #ffffff;
        min-height: 375px;
        padding: 30px;
    }
    .wid-weather .today .degree {
        display: inline-block;
        width: 100px;
        text-align: right;
    }
    .wid-weather .today .degree i {
        float: left;
        margin-right: 15px;
        margin-top: 10px;
    }
    .wid-weather .today .degree span {
        display: inline-block;
        float: left;
        color: #e1e1e1;
    }
    .wid-weather .today .degree h3 {
        display: inline-block;
        float: left;
        margin: 0px;
        color: #f5f5f5;
    }
    .wid-weather .today .degree .windspeed {
        text-align: center;
        margin: 0px;
        color: #f5f5f5;
        white-space: nowrap;
    }
    .wid-weather .today .degree .windspeed i {
        margin: 5px 0px 0 0;
    }
    .wid-weather .today .degree h4 {
        text-align: center;
        margin: 0px;
        color: #f5f5f5;
        margin: 30px 0 10px 0;
        white-space: nowrap;
    }
    .wid-weather .today .location h3 {
        color: #f5f5f5;
        text-align: left;
        display: block;
        margin: 0 0 5px 0;
    }
    .wid-weather .today .location span {
        color: #e1e1e1;
        text-align: left;
        display: block;
    }
    .wid-weather .today .location {
        width: 60%;
        display: inline-block;
    }
    .wid-weather .today .timings {
        margin-top: 75px;
    }
    .wid-weather .today .timings li {
        display: inline-block;
        width: 55px;
        margin: 15px 15px 0 0;
        border-right: 1px solid rgba(200, 200, 200, 0.7);
        color: #eaeaea;
        text-align: center;
        padding: 0 20px 0 0;
    }
    .wid-weather .today .timings li:last-child {
        border-color: transparent;
    }
    .wid-weather .today .timings .time {
        display: block;
        margin: 0 0 5px 0;
        color: #dddddd;
    }
    .wid-weather .today .timings i {
        color: #eaeaea;
    }
    .wid-weather .today .timings .temp {
        color: #eaeaea;
        display: block;
        margin: 5px 0 0px 0;
        color: #f5f5f5;
    }
    .wid-weather .weekdays {
        padding: 30px;
        color: #999999;
        margin: 0px;
    }
    .wid-weather .weekdays ul {
        margin: 0px;
    }
    .wid-weather .weekdays li {
        display: inline-block;
        padding: 10px 0;
        border-bottom: 1px solid rgba(200, 200, 200, 0.4);
        width: 100%;
    }
    .wid-weather .weekdays li:last-child {
        border-color: transparent;
    }
    .wid-weather .weekdays li .temp {
        float: right;
        color: #777777;
        font-size: 90%;
    }
    .wid-weather .weekdays li i {
        margin: 0 5px;
    }
    .wid-weather .weekdays li .day {
        color: #aaaaaa;
        display: inline-block;
        min-width: 60px;
        font-size: 90%;
        width: 70px;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        vertical-align: top;
    }


    /*---- weather small widget ----*/
    .wid-weather-small{
        padding: 0px;
    }

    .wid-weather-small .location span {
        color: #efefef;
        text-align: left;
        display: block;
    }


    .wid-weather-small .degree h3 {
        display: inline-block;
        float: left;
        margin: 0px;
        color: #ffffff;
    }
    .wid-weather-small .location{
        padding: 30px 30px 0 30px;
    }

    .wid-weather-small .location h3 {
        color: #f5f5f5;
        text-align: left;
        display: block;
        margin: 0 0 5px 0;
    }

    .wid-weather-small .degree {
        display: inline-block;
        width: 180px;
        text-align: right;
        margin-top: 15px;
        padding: 0 30px;
    }

    .wid-weather-small .degree i {
        float: left;
        margin-right: 15px;
        margin-top: 0px;
    }
    .wid-weather-small .degree span {
        display: inline-block;
        float: left;
        color: #efefef;
    }
    .wid-weather-small .degree h3 {
        display: inline-block;
        float: left;
        margin: 0px;
        color: #f5f5f5;
    }

    .wid-weather-small .degree h4 {
        text-align: center;
        margin: 0px;
        color: #f5f5f5;
        margin: 15px 0 15px 0;
        white-space: nowrap;
    }

    .wid-weather-small .weekdays ul {
    overflow: hidden;
    position: relative;
    height: 175px;
    }

    .wid-weather-small .weekdays {
        padding: 15px;
        color: #999999;
        margin: 0px;
        min-height: 175px;
    }

    .wid-weather-small .weekdays ul {
        margin: 0px;
        padding-right: 10px;

    }
    .wid-weather-small .weekdays li {
        display: inline-block;
        padding: 10px 0;
        border-bottom: 1px solid rgba(200, 200, 200, 0.4);
        width: 100%;
    }


    .wid-weather-small .weekdays li .temp {
        float: right;
        color: #777777;
        font-size: 90%;
    }
    .wid-weather-small .weekdays li i {
        margin: 0 5px;
    }
    .wid-weather-small .weekdays li .day {
        color: #aaaaaa;
        display: inline-block;
        min-width: 60px;
        font-size: 90%;
        width: 70px;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        vertical-align: top;
    }




    /*----------------------------------------
    Widget - User Profile Tile
    ------------------------------------------*/

    .wid-uprofile {
        min-height: 375px;
        display: inline-block;
        width: 100%;
        padding: 25px 0 0 0;
    }
    .wid-uprofile .uprofile-image {
        width: 100%;
        display: inline-block;
        margin: 0 0 15px 0;
        text-align: center;
        padding: 0 15px;
    }
    .wid-uprofile .uprofile-image img {
        height: 100px;
        width: 100px;
        background-color: #f5f5f5;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        display: inline-block;
        margin: 0 auto;
    }
    .wid-uprofile .uprofile-name {
        display: inline-block;
        text-align: center;
        width: 100%;
        margin: 0 0 5px 0;
        padding: 0 15px;
    }
    .wid-uprofile .uprofile-name h3 {
        text-align: center;
        font-size: 21px;
        margin: 5px 0 5px 0;
    }
    .wid-uprofile .uprofile-name h3 a {
        text-decoration: none;
        color: #ffffff;
    }
    .wid-uprofile .uprofile-name .uprofile-title {
        color: #fafafa;
    }
    .wid-uprofile .uprofile-status {
        width: 6px;
        height: 6px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        display: inline-block;
    }
    .wid-uprofile .uprofile-social {
        margin: 0px 0 0 0;
        padding: 10px 15px 15px 15px;
        text-align: left;
        background-color: #ffffff;
        vertical-align: top;
    }
    .wid-uprofile .uprofile-social .btn {
        margin: 0 2px 5px 3px;
    }
    .wid-uprofile .uprofile-info {
        padding: 15px 25px 5px 25px;
        background-color: rgba(150, 100, 0, 0.1);
        background-color: #ffffff;
        margin-bottom: 0px;
    }
    .wid-uprofile .uprofile-info li {
        display: block;
        margin: 0px 0 5px 0;
        color: #777777;
    }
    .wid-uprofile .uprofile-info li i {
        margin-right: 5px;
    }





    /*----------------------------------------
        Form Spinners
    ------------------------------------------*/

    .ui-spinner.ui-widget-content {
    border: 0px solid transparent;
    background: transparent;
    color: #777777;
    width: 100%;
    }

    .ui-spinner input{
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
                border-radius: 0px;
        border: 1px solid #e1e1e1;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-size: 14px;

    background: none;
    color: inherit;
    padding: 7px;
    margin: 0 0;
    vertical-align: middle;
    margin-left: 0;
    margin-right: 34px;
    }

    .ui-spinner .ui-state-default, .ui-spinner.ui-widget-content .ui-state-default, .ui-spinner .ui-widget-header .ui-state-default{
        background: #eaeaea;
    }

    .ui-spinner .ui-corner-all, .ui-spinner .ui-corner-top, .ui-spinner .ui-corner-right, .ui-spinner .ui-corner-tr {
    -webkit-border-top-right-radius: 0px;
        -moz-border-radius-topright: 0px;
            border-top-right-radius: 0px;
    }


    .ui-spinner .ui-spinner-button {
    width: 24px;
    }

    .ui-spinner .ui-icon{
        left: 4px;
    }

    .ui-spinner .ui-corner-all, .ui-spinner .ui-corner-bottom, .ui-spinner .ui-corner-right, .ui-spinner .ui-corner-br {
    -webkit-border-bottom-right-radius: 0px;
        -moz-border-radius-bottomright: 0px;
            border-bottom-right-radius: 0px;
    }

    .ui-spinner .ui-state-default, .ui-spinner.ui-widget-content .ui-state-default, .ui-spinner .ui-widget-header .ui-state-default{
        border-color: #eaeaea;
    }




    /*----------------------------------------
        UI Dropdowns
    ------------------------------------------*/

    .ui-dropdowns .btn-group{
        margin: 0 15px 15px 0;
    }


    /*----------------------------------------
        Mobile Menu Since - 3.1
    ------------------------------------------*/

            .page-topbar .chat-toggle-wrapper .fa-times{
                display: none;
            }

    @media (max-width: 767px) {

        .main-wrapper{
            padding:15px 0 0 0px;
        }

    .page-topbar .logo-area, .page-topbar.sidebar_shift .logo-area {
        width: 85px;
    }

        .page-topbar.sidebar_shift .logo-area{
            background-position: left top;
        }

        .page-topbar .quick-area .info-menu li.sidebar-toggle-wrap{
            position: fixed;
            top: 0px;
            right: 0px;
        }

        .page-topbar .quick-area .info-menu li.notify-toggle-wrapper a,
        .page-topbar .quick-area .info-menu li.message-toggle-wrapper a,
        .page-topbar .quick-area .info-menu li a.toggle_chat,
        .page-topbar .quick-area .info-menu li.sidebar-toggle-wrap a.sidebar_toggle{
            color: #ffffff;
        }
        
        .page-topbar .quick-area .pull-right{
            position: fixed;
            top: 0px;
            right: 30px;
        }

        .page-topbar .quick-area .info-menu li.message-toggle-wrapper{
                position: relative;
                top: 0px;
            }

        .page-topbar .quick-area .info-menu li.notify-toggle-wrapper{
                position: relative;
                top: 0px;
            }

            .page-sidebar{
                z-index: 5;
            }

            #main-content{
                margin-left: 60px;
                z-index: 2;
            }

            #main-content.chat_shift {
                margin-left: 60px !important;
                margin-right: 0px !important;
            }


            .page-topbar.chat_shift {
                margin-left: 0px !important;
            }

            .page-topbar.chat_shift .quick-area .pull-right{
                margin-right: 0px !important;
            }

            .page-topbar.chat_shift .chat-toggle-wrapper{
                position: fixed;
                right: 260px;
            }
        
            #main-content, .page-chatapi, .page-topbar, .page-sidebar, .page-topbar .logo-area, .page-topbar .quick-area .pull-right, .collapse-wraplist, .profile-info, .wraplist, .chatapi-windows {
                -webkit-transition: 0ms;
                -moz-transition: 0ms;
                -o-transition: 0ms;
                transition: 0ms;
            }

            .page-topbar.chat_shift .chat-toggle-wrapper .badge,
            .page-topbar.chat_shift .chat-toggle-wrapper .fa-comments{
                display: none;
            }

            .page-topbar.chat_shift .chat-toggle-wrapper .fa-times{
                display: inline-block;
            }

            .page-topbar .logo-area {
                background-image: url('../images/logo-folded.png');
                background-repeat: no-repeat;
                background-position: left top;
            }

        .page-topbar .quick-area .info-menu li .dropdown-menu{
            width: 280px;
            left: -120px;
        }
        .page-topbar .quick-area .info-menu li.spec .dropdown-menu{
            width: 280px;
            left: -145px;
        }

        .page-topbar .quick-area .info-menu li.open{
            background-color: #ffffff;
        }

            .page-topbar .quick-area .info-menu li.open a{
                color: #4d9cf8;
            }

        .page-topbar .quick-area .info-menu li .dropdown-menu:before,
            .page-topbar .quick-area .info-menu li .dropdown-menu:after{
            display: none;
        }




    }







    /*
    .bg-muted{ background: #eaeaea; padding: 3px 8px;}
    .bg-primary{ background: rgba(63,81,181,1); padding: 3px 8px; color: #ffffff;} #4d9cf8
    .bg-info{ background: rgba(35,183,229,1.0); padding: 3px 8px; color: #ffffff;}
    .bg-warning{ background: #FFC107; padding: 3px 8px; color: #ffffff;}
    .bg-danger{ background: rgba(240,80,80,1.0); padding: 3px 8px; color: #ffffff;}
    .bg-success{ background: rgba(102,189,120,1.0); padding: 3px 8px; color: #ffffff;}
    .bg-purple{ background: rgba(103,58,183,1.0); padding: 3px 8px; color: #ffffff;} #673AB7
    .bg-accent{ background: #E91E63; padding: 3px 8px; color: #ffffff;} #E91E63
    .bg-secondary{ background: #9e9e9e; padding: 3px 8px; color: #555555;}

    #FFC107 - #FFC107
    */
    /*
    .screen-type {
        display: block;
        width: 30px;
        height: 30px;
        padding: 3px 8px;
        color: #ffffff;
        position: fixed;
        z-index: 9999999999999999999999999;
        top: 0px;
        right: 0px;
        font-size: 12px;
    }
    .screen-type.visible-xs {
        background-color: rgba(102, 189, 120, 0.7);
    }
    .screen-type.visible-sm {
        background-color: rgba(35, 183, 229, 0.7);
    }
    .screen-type.visible-md {
        background-color: rgba(240, 80, 80, 0.7);
    }
    .screen-type.visible-lg {
        background-color: rgba(153, 114, 181, .7);
    }
    */




    table.dataTable{
        border: 1px solid #eeeeee;
        border-right: 0px solid transparent;
    }


    .dataTables_wrapper thead th{
        vertical-align: middle !important;
        font-size: 13px;
        color: #757575;
        text-align: center;
        border-right: 2px solid #eeeeee;
        /*background: #fafafa !important;*/
    }

    table.dataTable tr.odd td, table.dataTable tr.even td,
    table.dataTable.display tbody tr.even > .sorting_1, 
    table.dataTable.order-column.stripe tbody tr.even > .sorting_1,
    table.dataTable.display tbody tr.odd > .sorting_1, 
    table.dataTable.order-column.stripe tbody tr.odd > .sorting_1{
        background-color: #ffffff;
        border-color: #eeeeee;
    }

    table.dataTable tr.odd:hover td, table.dataTable tr.even:hover td,
    table.dataTable.display tbody tr.even:hover > .sorting_1, 
    table.dataTable.order-column.stripe tbody tr.even:hover > .sorting_1,
    table.dataTable.display tbody tr.odd:hover > .sorting_1, 
    table.dataTable.order-column.stripe tbody tr.odd:hover > .sorting_1{
        background-color: #f5f5f5;
    }

    table.dataTable thead th, table.dataTable thead td {
        border-bottom: 1px solid #eeeeee !important;
        text-align: left;
        border-width: auto;
    }
    table.dataTable.table-striped tbody tr:nth-of-type(odd) td{
        background-color: rgba(0, 0, 0, 0.03);
    }
    .dataTables_paginate.paging_simple_numbers {
        margin-top: 10px !important;
    }
    .paginate_button.page-item a {
        font-size: 14px;
        padding: 5px 10px;
    }

    .paginate_button.page-item.active a {
        background-color: #053479;
        border-color: #053479;
    }

    .DTFC_LeftBodyWrapper,.DTFC_LeftHeadWrapper{
        overflow-y: hidden !important;
        overflow-x: hidden !important;
        box-shadow: 2px 0px 4px rgba(86, 96, 117, 0.18);
        -o-box-shadow: 2px 0px 4px rgba(86, 96, 117, 0.18);
        -ms-box-shadow: 2px 0px 4px rgba(86, 96, 117, 0.18);
        -moz-box-shadow: 2px 0px 4px rgba(86, 96, 117, 0.18);
        -webkit-box-shadow: 2px 0px 4px rgba(86, 96, 117, 0.18);
    }

    .dataTables_wrapper .DTFC_LeftWrapper thead th,
    .DTFC_LeftBodyLiner table.dataTable.row-border tbody th, 
    .DTFC_LeftBodyLiner table.dataTable.row-border tbody td, 
    .DTFC_LeftBodyLiner table.dataTable.display tbody th, 
    .DTFC_LeftBodyLiner table.dataTable.display tbody td{
        border-right: 0px solid transparent;
    }


    table.dataTable td a{
        color: #424242;
    }

    /*.DTFC_LeftHeadWrapper,*/
    .dataTables_scrollHead{
        box-shadow: 0 3px 4px -2px rgba(86, 96, 117, 0.25);
        -moz-box-shadow: 0 3px 4px -2px rgba(86, 96, 117, 0.25);
        -webkit-box-shadow: 0 3px 4px -2px rgba(86, 96, 117, 0.25);
    }

    div.dataTables_scrollHead table,
    div.DTFC_LeftWrapper table.dataTable, div.DTFC_RightWrapper table.dataTable{
        margin-top: 0px !important;
    }

    table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td{
        border-top: 2px solid #eeeeee;
        border-right: 2px solid #eeeeee;
    }

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

    div.DTFC_LeftBodyWrapper table.dataTable{
        margin-top: 0px !important;
    }


    table.dataTable tr td{
        padding: 15px 10px 15px 10px !important;
    }

    table.table thead .sorting_desc,
    table.table thead .sorting_asc,
    table.table thead .sorting{
        background-position: 95% !important;
    }

    table.dataTable tfoot th, table.dataTable tfoot td{
        border-top: 2px solid #eeeeee;
    }

    table.dataTable tfoot th input, table.dataTable tfoot td input,
    table.dataTable tfoot th select, table.dataTable tfoot td select{
        font-weight: normal;
        font-size: 13px;
        padding: 5px 8px;
    }

    table.dataTable tfoot th select, table.dataTable tfoot td select{
        padding: 4px 8px;
    }

    .DTFC_LeftFootWrapper table,
    .dataTables_scrollFoot table{
        border: 0px solid transparent !important;
    }

    .DTFC_LeftBodyLiner table tr td{
        text-align: right;
    }

    table.dataTable.display tbody tr:first-child td {
        border-top: 1px solid #eeeeee;
    }

    /*loader css*/

    .pace {
        background-color: #0e3d83;
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000;
    }
    .pace .pace-activity {
        /* width: 100% !important; */
        /* height: 100% !important; */
        left: 0;
        right: 0;
        top: 50%;
        bottom: 0;
        margin: 0 auto;
        z-index: 10001;
    }
    .inner-list-box .content-body{
        padding-top: 20px;
    }
    .panel_header.inner-page-header {
        background-color: #053479;
        
    }
    .panel_header.inner-page-header .title{
    color: #fff;
    }
    .table tr td  a {
        border-radius: 5px;
        padding: 10px;
        line-height: 14px;
    }
    .details-box-inner{

    }
    .details-box-inner .main-details-row{
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .details-box-inner .main-details-row table tr td {
        padding: 5px 0;
        color: #000;
    }
    .modal  button.btn-close.btn.btn-primary {
        position: absolute;
        right: 5px;
        top: 5px;
        border-radius: 5px;
    }
    .modal .modal-title {
        margin: 0;
        line-height: 1.42857143;
        font-weight: 600;
        color: #053479;
        font-size: 24px;
        margin-bottom: 30px;
    }
    .wallet-box {
        background-color: #ddebff;
        padding: 10px;
        margin-bottom: 20px;
        border-radius: 5px;
    }
    .wallet-box  h3 {
        font-weight: 600;
        font-size: 20px;
        color: #000;
    }
    .recent-pay-box {
        max-height: 300px;
        overflow-y: scroll;
        overflow-x: hidden;
        min-height:300px;
    }
    @media (max-width:999px){
        .recent-pay-box{
            min-height: auto;
        }
    }
    .loginpage{
        background-color: rgb(255, 255, 255);
        margin-top: -47px;
        box-shadow: rgb(0 0 0 / 10%) 2px 2px 10px;
        border-radius: 10px;
        padding-bottom: 25px;
        

    }
    .login-header {
        /* display: inline-block; */
        vertical-align: middle;
        /* padding-left: 15px; */
        text-align: center;
    }
    /*ishita*/
    .login-header h4 small {
        color: #000;
        font-size: 16px;
        text-align: center;
        font-weight: 500;
    }
    .btn.btn-primary.btn-corner {
        background: #4d9cf8;
        color: #ffffff;
        outline: none;
        display: block;
        width: 100%;
    }