/*
Template Name: Rukada Admin
Author: codervent
Email: codervent@gmail.com
File: app.css
*/
/*
  - Google Font
  - General
  - Sidebar
  - Header
  - Metismenu
  - Extra CSS
  - Invoice Page
  - Chat box
  - Email box
  - Compose Mail
  - Navs and Tabs
  - Background Colors
  - Authentication
  - Buttons
  - Pricing Table
  - Forms
  - Responsive
*/
/* General */
body
{
    font-size        : 14px;
    color            : #4c5258;
    letter-spacing   : 0.5px;
    background-color : #f7f7ff;
    font-family      : "Roboto", sans-serif;
}

a
{
    text-decoration : none;
}

.wrapper
{
    width    : 100%;
    position : relative;
}

.mobile-topbar-header
{
    display : none;
}

/* Sidebar */
.topbar-logo-header
{
    width        : auto;
    align-items  : center;
    padding      : 0 30px 0 0;
    height       : 60px;
    border-right : 1px solid #f0f0f0;
}

.logo-icon
{
    width : 30px;
}

.logo-icon-2
{
    width       : 35px;
    margin-left : 10px;
}

.logo-text
{
    font-size      : 22px;
    margin-left    : 10px;
    margin-bottom  : 0;
    letter-spacing : 1px;
    color          : #5e72e4;
}

.toggle-icon
{
    font-size : 26px;
    color     : #5e72e4;
    cursor    : pointer;
}

/* Header */
.topbar
{
    position      : fixed;
    top           : 0;
    left          : 0;
    right         : 0;
    height        : 60px;
    background    : #ffffff;
    border-bottom : 1px solid #f0f0f0;
    z-index       : 10;
}

.topbar .navbar
{
    width         : 100%;
    height        : 60px;
    padding-left  : 1.5rem;
    padding-right : 1.5rem;
}

.page-wrapper
{
    height        : 100%;
    margin-top    : 120px;
    margin-bottom : 30px;
    margin-left   : 0px;
}

/* @media screen and (min-width: 1400px){

	.page-wrapper {

		padding-left: 80px;

		padding-right: 80px;

	}

} */
.page-content
{
    padding : 1.5rem;
}

.page-footer
{
    background : #ffffff;
    left       : 0px;
    right      : 0;
    bottom     : 0;
    position   : fixed;
    text-align : center;
    padding    : 7px;
    font-size  : 14px;
    border-top : 1px solid #e4e4e4;
    z-index    : 3;
}

.search-bar
{
    width  : 30%;
    cursor : pointer;
}

.search-bar input[disabled]
{
    cursor           : pointer;
    background-color : #f7f7ff;
    border           : 0;
}

/*primary menu*/
.primary-menu .navbar .navbar-nav .nav-item
{
    width : 100%;
}

.primary-menu .navbar .navbar-nav a.nav-link
{
    display         : flex;
    align-items     : center;
    justify-content : start;
    gap             : 0.5rem;
    font-size       : 16px;
    border-radius   : 0;
    padding         : 0.25rem 1rem;
    margin          : 2px 0rem;
    border-bottom   : 1px solid #e3e3e3;
}

.primary-menu .navbar .navbar-nav a.nav-link:first-child
{
    margin-left : 0;
}

.primary-menu .navbar .navbar-nav a.nav-link:last-child
{
    margin-right : 0;
}

.primary-menu .navbar .navbar-nav a.nav-link:active,
.primary-menu .navbar .navbar-nav a.nav-link:focus
{
    color            : #ffffff;
    background-color : #008cff;
}

.primary-menu .navbar .navbar-nav a.nav-link:hover
{
    color            : #32393f;
    background-color : #f5f6f7;
}

.primary-menu .navbar .navbar-nav a.nav-link.active:hover,
.primary-menu .navbar .navbar-nav a.nav-link.active
{
    color            : #ffffff;
    background-color : #008cff;
}

ul.scroll-menu
{
    overflow-x : auto;
    height     : auto;
    max-height : 450px;
}

.primary-menu .navbar .navbar-nav .dropend a.dropdown-toggle:after
{
    content     : "\e9b2";
    position    : absolute;
    right       : 4px;
    border      : 0;
    font-size   : 20px;
    display     : inline-block;
    font-family : "boxicons";
}

.primary-menu .navbar .navbar-nav .dropdown-menu
{
    transform-origin : top center;
    animation        : rotateX 200ms ease-in forwards;
    box-shadow       : none;
    padding          : 0.5rem;
    margin           : 0;
}

.primary-menu .navbar .navbar-nav .dropend .dropdown-menu
{
    padding-left : 1rem;
}

@keyframes rotateX
{
    0%
    {
        opacity   : 0;
        transform : rotateX(-90deg);
    }
    50%
    {
        transform : rotateX(-20deg);
    }
    100%
    {
        opacity   : 1;
        transform : rotateX(0deg);
    }
}

.primary-menu .navbar .navbar-nav .dropdown-menu .dropdown-item
{
    font-size     : 16px;
    flex-shrink   : 0;
    border-radius : 0;
    display       : flex;
    align-items   : center;
}

.primary-menu .navbar .navbar-nav .dropdown-menu .dropdown-item i
{
    margin-right : 10px;
    font-size    : 20px;
}

.primary-menu .navbar .navbar-nav a .parent-icon
{
    font-size : 20px;
}

.primary-menu .navbar .navbar-nav a .menu-title i
{
    font-size : 20px;
}

@media screen and (min-width : 992px)
{
    .primary-menu .navbar .navbar-nav a.nav-link
    {
        border-radius : 6px;
        margin        : 0px 0.3rem;
        border-bottom : 0px solid #e3e3e3;
    }

    .primary-menu .navbar .navbar-nav .dropdown-menu .dropdown-item
    {
        border-radius : 6px;
    }

    .primary-menu .navbar .navbar-nav .dropdown-menu
    {
        transform-origin   : top center;
        animation          : rotateX 300ms ease-in-out forwards;
        -webkit-box-shadow : 0 0.5rem 1rem rgba(0, 0, 0, .15);
        box-shadow         : 0 0.5rem 1rem rgba(0, 0, 0, .15);
    }

    @keyframes rotateX
    {
        0%
        {
            opacity   : 0;
            transform : rotateX(-90deg);
        }
        50%
        {
            transform : rotateX(-20deg);
        }
        100%
        {
            opacity   : 1;
            transform : rotateX(0deg);
        }
    }



    .primary-menu .navbar .navbar-nav .dropend .dropdown-menu
    {
        padding-left : 0.5rem;
    }

    .primary-menu .navbar
    {
        position      : fixed;
        top           : 60px;
        right         : 0;
        left          : 0;
        z-index       : 9;
        border-bottom : 1px solid #e4e4e4;
        box-shadow    : 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
        background    : #ffffff;
        padding       : 10px 1.5rem;
    }

    .primary-menu .navbar .navbar-nav .dropdown-menu
    {
        width         : 14rem;
        border-radius : 10px;
    }

    .primary-menu .navbar .navbar-nav .nav-item
    {
        width : auto;
    }

    .primary-menu .navbar .navbar-nav .dropdown .dropdown-menu
    {
        display : none;
    }

    .primary-menu .navbar .navbar-nav .dropdown:hover > .dropdown-menu,
    .primary-menu .navbar .navbar-nav .dropend:hover > .dropdown-menu
    {
        display : block;
    }

    .primary-menu .navbar .navbar-nav .dropend:hover > .dropdown-menu
    {
        position : absolute;
        top      : 0;
        left     : 100%;
    }
}

@media screen and (min-width : 1025px)
{
    .email-toggle-btn
    {
        display : none !important;
    }

    .chat-toggle-btn
    {
        display : none !important;
    }
}

/* Extra CSS */
.back-to-top
{
    display          : none;
    width            : 40px;
    height           : 40px;
    line-height      : 40px;
    text-align       : center;
    font-size        : 26px;
    color            : white;
    position         : fixed;
    border-radius    : 10px;
    bottom           : 20px;
    right            : 12px;
    background-color : #5e72e4;
    z-index          : 5;
}

.back-to-top:hover
{
    color            : white;
    background-color : #000;
    transition       : all .5s;
}

.breadcrumb-title
{
    font-size    : 20px;
    border-right : 1.5px solid #aaa4a4;
}

.page-breadcrumb .breadcrumb li.breadcrumb-item
{
    font-size : 16px;
}

.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before
{
    display       : inline-block;
    padding-right : .5rem;
    color         : #6c757d;
    font-family   : "LineIcons";
    content       : "\ea5c";
}

.icon-badge
{
    width           : 45px;
    height          : 45px;
    background      : #f2f2f2;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border-radius   : 50%;
}

.product-grid .card
{
    -webkit-transition : all .2s;
    -o-transition      : all .2s;
    transition         : all .2s
}

@media (min-width : 992px)
{
    .product-grid .card:hover
    {
        -webkit-box-shadow : 0 .5rem 1rem 0 rgba(0, 0, 0, .3);
        box-shadow         : 0 .5rem 1rem 0 rgba(0, 0, 0, .3)
    }
}

.product-show
{
    font-size : 18px;
    left      : 15px;
}

.widgets-icons
{
    width            : 50px;
    height           : 50px;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    background-color : #ededed;
    font-size        : 26px;
    border-radius    : 10px;
}

.widgets-icons-2
{
    width            : 56px;
    height           : 56px;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    background-color : #ededed;
    font-size        : 27px;
    border-radius    : 10px
}

.widgets-icons-small
{
    width            : 40px;
    height           : 40px;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    background-color : #ededed;
    font-size        : 26px;
    border-radius    : 10px;
}

#geographic-map
{
    width  : 100%;
    height : 440px;
}

#geographic-map-2
{
    width  : 100%;
    height : 330px
}

#geographic-map-3
{
    width  : 100%;
    height : 350px
}

.product-img
{
    width            : 60px;
    height           : 60px;
    background-color : white;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    border-radius    : 10px;
    border           : 1px solid #e6e6e6;
}

.product-img img
{
    width   : 60px;
    height  : 60px;
    padding : 6px;
}

.product-img-2
{
    width            : 45px;
    height           : 45px;
    background-color : #fff;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    border-radius    : 10px;
    border           : 1px solid #e6e6e6
}

.product-img-2 img
{
    width   : 45px;
    height  : 45px;
    padding : 1px
}

.border-light-2
{
    border-color : rgb(255 255 255 / 12%) !important;
}

.product-list
{
    position : relative;
    height   : 450px;
}

.dashboard-top-countries
{
    position : relative;
    height   : 360px;
}

.customers-list
{
    position : relative;
    height   : 450px;
}

.store-metrics
{
    position : relative;
    height   : 450px;
}

.product-list-2
{
    position : relative;
    height   : 450px;
}

.product-list .row
{
    background-color   : #f8f9fa;
    -webkit-transition : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
}

@media (min-width : 992px)
{
    .product-list .row:hover
    {
        background-color   : #fff;
        margin-top         : -.25rem;
        margin-bottom      : .25rem;
        -webkit-box-shadow : 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);
        box-shadow         : 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2);
    }
}

.recent-product-img
{
    width            : 40px;
    height           : 40px;
    background-color : #fbfbfb;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    border-radius    : 10px;
    border           : 1px solid #e6e6e6;
}

.recent-product-img img
{
    width   : 40px;
    height  : 40px;
    padding : 6px;
}

.theme-icons
{
    background-color : #FFF;
}

.lead-table .table
{
    border-collapse : separate;
    border-spacing  : 0 10px;
}

.fm-menu .list-group a
{
    font-size   : 16px;
    color       : #5f5f5f;
    display     : flex;
    align-items : center;
}

.fm-menu .list-group a i
{
    font-size : 23px;
}

.fm-menu .list-group a:hover
{
    background : #5e72e4;
    color      : #ffffff;
    transition : all .2s ease-out;
}

.fm-file-box
{
    font-size       : 25px;
    background      : #e9ecef;
    width           : 44px;
    height          : 44px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border-radius   : .25rem;
}

.fm-icon-box
{
    font-size       : 32px;
    background      : #ffffff;
    width           : 52px;
    height          : 52px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border-radius   : .25rem;
}

.user-plus
{
    width         : 33px;
    height        : 33px;
    margin-left   : -14px;
    line-height   : 33px;
    background    : #ffffff;
    border-radius : 50%;
    text-align    : center;
    font-size     : 22px;
    cursor        : pointer;
    border        : 1px dotted #a9b2bb;
    color         : #404142;
}

.user-groups img
{
    margin-left : -14px;
    border      : 1px solid #e4e4e4;
    padding     : 2px;
    cursor      : pointer;
}

.contacts-social a
{
    font-size     : 16px;
    width         : 36px;
    height        : 36px;
    line-height   : 36px;
    background    : #ffffff;
    border        : 1px solid #eeecec;
    text-align    : center;
    border-radius : 50%;
    color         : #2b2a2a;
}

.customers-contacts a
{
    font-size       : 16px;
    width           : 34px;
    height          : 34px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : #ffffff;
    border          : 1px solid #eeecec;
    text-align      : center;
    border-radius   : 50%;
    color           : #2b2a2a;
}

.order-actions a
{
    font-size       : 18px;
    width           : 34px;
    height          : 34px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : #f1f1f1;
    border          : 1px solid #eeecec;
    text-align      : center;
    border-radius   : 20%;
    color           : #2b2a2a;
}

.customers-list .customers-list-item
{
    -webkit-transition : all 0.2s;
    -o-transition      : all 0.2s;
    transition         : all 0.2s;
}

@media (min-width : 992px)
{
    .customers-list .customers-list-item:hover
    {
        background-color   : #f8f9fa;
        border-radius      : 10px;
        margin-top         : -.25rem;
        margin-bottom      : .25rem;
        -webkit-box-shadow : 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);
        box-shadow         : 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2);
    }
}

.right-15
{
    right : 15px !important;
}

.font-13
{
    font-size : 13px;
}

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

.font-18
{
    font-size : 18px;
}

.font-20
{
    font-size : 20px;
}

.font-22
{
    font-size : 22px;
}

.font-24
{
    font-size : 24px;
}

.font-30
{
    font-size : 30px;
}

.font-35
{
    font-size : 35px;
}

.font-50
{
    font-size : 50px;
}

.font-60
{
    font-size : 60px;
}

.radius-30
{
    border-radius : 30px;
}

.radius-10
{
    border-radius : 10px;
}

.radius-15
{
    border-radius : 15px;
}

.input-icon span
{
    font-size : 16px;
    left      : 15px;
}

.input-icon .form-control
{
    padding-left : 2.5rem;
}

.error
{
    color : #dc3545;
}

.auth-cover-left
{
    display          : flex;
    background-color : #f7f7ff;
    min-height       : 100vh;
}

.auth-cover-right
{
    display          : flex;
    background-color : #ffffff;
    min-height       : 100vh;
}

form select.error, form textarea.error, form input.error, form input.error:focus, form textarea.error:focus, form select.error:focus
{
    border-color : #ea5455 !important;
}

.row.row-group > div
{
    border-right : 1px solid rgba(0, 0, 0, 0.12);
}

.row.row-group > div:last-child
{
    border-right : none;
}

.cursor-pointer
{
    cursor : pointer
}

.dash-wrapper
{
    margin  : -1.5rem -1.5rem -5.5rem -1.5rem;
    padding : 1.5rem 1.5rem 6.5rem 1.5rem;
}

.dash-array-chart-box
{
    width    : 105px;
    height   : 90px;
    position : relative;
    top      : -15px;
    right    : 30px;
}

.piechart-legend
{
    position   : absolute;
    top        : 50%;
    left       : 50%;
    transform  : translate(-50%, -50%);
    text-align : center;
}

.chart-js-container1
{
    position : relative;
    height   : 300px;
}

.chart-js-container2
{
    position : relative;
    height   : 250px;
}

.chart-js-container3
{
    position : relative;
    height   : 380px
}

.chart-js-container4
{
    position : relative;
    height   : 320px
}

.chart-container
{
    position : relative;
    height   : 380px;
}

.chart-container-0
{
    position : relative;
    height   : 320px;
}

.chart-container-1
{
    position : relative;
    height   : 260px;
}

.chart-container-2
{
    position : relative;
    height   : 210px;
}

.chart-container-3
{
    position : relative;
    height   : 188px;
}

.chart-container-4
{
    position : relative;
    height   : 162px;
}

.chart-container-5
{
    position : relative;
    height   : 110px;
}

.chart-container-6
{
    position : relative;
    height   : 205px;
}

.chart-container-7
{
    position : relative;
    height   : 60px;
}

.chart-container-8
{
    position : relative;
    height   : 260px;
}

.chart-container-9
{
    position : relative;
    height   : 280px;
}

.chart-container-10
{
    position : relative;
    height   : 300px;
    top      : 20px;
}

.chart-container-11
{
    position : relative;
    height   : 280px;
}

.chart-container-12
{
    position : relative;
    height   : 160px;
}

.chart-container-13
{
    position : relative;
    height   : 240px;
}

.chart-container-14
{
    position : relative;
    height   : 40px;
}

.w_chart
{
    position   : relative;
    display    : inline-block;
    width      : 80px !important;
    height     : 80px !important;
    text-align : center;
    color      : #32393f;
}

.w_chart canvas
{
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 80px !important;
    height   : 80px !important;
}

.w_percent
{
    display     : inline-block;
    line-height : 80px !important;
    z-index     : 2;
    font-size   : 1.3rem;
}

.w_percent:after
{
    content     : "%";
    margin-left : 0.1em;
    font-size   : .8em;
}

.cursor-pointer
{
    cursor : pointer;
}

.options
{
    font-size : 24px;
    color     : #4c5258;
    cursor    : pointer;
}

.review-list
{
    position   : relative;
    height     : 360px;
    overflow-y : scroll;
}

.chip
{
    display            : inline-block;
    height             : 32px;
    padding            : 0 12px;
    margin-right       : 1rem;
    margin-bottom      : 1rem;
    font-size          : 14px;
    font-weight        : 500;
    line-height        : 32px;
    color              : rgba(0, 0, 0, 0.70);
    cursor             : pointer;
    background-color   : #f1f1f1;
    border             : 1px solid rgba(0, 0, 0, 0.15);
    border-radius      : 16px;
    -webkit-transition : all .3s linear;
    transition         : all .3s linear;
    box-shadow         : none;
}

.chip img
{
    float         : left;
    width         : 32px;
    height        : 32px;
    margin        : 0 8px 0 -12px;
    border-radius : 50%;
}

.chip .closebtn
{
    padding-left : 10px;
    font-weight  : bold;
    float        : right;
    font-size    : 16px;
    cursor       : pointer;
}

.chip.chip-md
{
    height        : 42px;
    line-height   : 42px;
    border-radius : 21px;
}

.chip.chip-md img
{
    height : 42px;
    width  : 42px;
}

/*Invoice Page*/
#invoice
{
    padding : 0px;
}

.invoice
{
    position         : relative;
    background-color : #FFF;
    min-height       : 680px;
    padding          : 15px
}

.invoice header
{
    padding       : 10px 0;
    margin-bottom : 20px;
    border-bottom : 1px solid #5e72e4
}

.invoice .company-details
{
    text-align : right
}

.invoice .company-details .name
{
    margin-top    : 0;
    margin-bottom : 0
}

.invoice .contacts
{
    margin-bottom : 20px
}

.invoice .invoice-to
{
    text-align : left
}

.invoice .invoice-to .to
{
    margin-top    : 0;
    margin-bottom : 0
}

.invoice .invoice-details
{
    text-align : right
}

.invoice .invoice-details .invoice-id
{
    margin-top : 0;
    color      : #5e72e4
}

.invoice main
{
    padding-bottom : 50px
}

.invoice main .thanks
{
    margin-top    : -100px;
    font-size     : 2em;
    margin-bottom : 50px
}

.invoice main .notices
{
    padding-left : 6px;
    border-left  : 6px solid #5e72e4;
    background   : #e7f2ff;
    padding      : 10px;
}

.invoice main .notices .notice
{
    font-size : 1.2em
}

.invoice table
{
    width           : 100%;
    border-collapse : collapse;
    border-spacing  : 0;
    margin-bottom   : 20px
}

.invoice table td,
.invoice table th
{
    padding       : 15px;
    background    : #eee;
    border-bottom : 1px solid #fff
}

.invoice table th
{
    white-space : nowrap;
    font-weight : 400;
    font-size   : 16px
}

.invoice table td h3
{
    margin      : 0;
    font-weight : 400;
    color       : #5e72e4;
    font-size   : 1.2em
}

.invoice table .qty,
.invoice table .total,
.invoice table .unit
{
    text-align : right;
    font-size  : 1.2em
}

.invoice table .no
{
    color      : #fff;
    font-size  : 1.6em;
    background : #5e72e4
}

.invoice table .unit
{
    background : #ddd
}

.invoice table .total
{
    background : #5e72e4;
    color      : #fff
}

.invoice table tbody tr:last-child td
{
    border : none
}

.invoice table tfoot td
{
    background    : 0 0;
    border-bottom : none;
    white-space   : nowrap;
    text-align    : right;
    padding       : 10px 20px;
    font-size     : 1.2em;
    border-top    : 1px solid #aaa
}

.invoice table tfoot tr:first-child td
{
    border-top : none
}

.invoice table tfoot tr:last-child td
{
    color      : #5e72e4;
    font-size  : 1.4em;
    border-top : 1px solid #5e72e4
}

.invoice table tfoot tr td:first-child
{
    border : none
}

.invoice footer
{
    width      : 100%;
    text-align : center;
    color      : #777;
    border-top : 1px solid #aaa;
    padding    : 8px 0
}

@media print
{
    .invoice
    {
        font-size : 11px !important;
        overflow  : hidden !important
    }

    .invoice footer
    {
        position         : absolute;
        bottom           : 10px;
        page-break-after : always
    }

    .invoice > div:last-child
    {
        page-break-before : always
    }
}

.main-row
{
    height : 100vh;
}

.main-col
{
    max-width  : 500px;
    min-height : 300px;
}

.todo-done
{
    text-decoration : line-through;
}

/*Chat box*/
.chat-wrapper
{
    width         : auto;
    height        : 600px;
    border-radius : 0.25rem;
    position      : relative;
    background    : #ffffff;
    box-shadow    : 0 0.1rem 0.7rem rgba(0, 0, 0, .10);
}

.chat-sidebar
{
    width                     : 340px;
    height                    : 100%;
    position                  : absolute;
    background                : #ffffff;
    left                      : 0;
    top                       : 0;
    bottom                    : 0;
    z-index                   : 2;
    overflow                  : hidden;
    border-right              : 1px solid rgba(0, 0, 0, .125);
    border-top-left-radius    : 0.25rem;
    border-bottom-left-radius : 0.25rem;
}

.chat-sidebar-header
{
    width                  : auto;
    height                 : auto;
    position               : relative;
    background             : #ffffff;
    border-bottom          : 1px solid rgba(0, 0, 0, .125);
    border-right           : 0px solid rgba(0, 0, 0, .125);
    border-top-left-radius : 0.25rem;
    padding                : 15px;
}

.chat-sidebar-content
{
    padding : 0px;
}

.chat-user-online
{
    position : relative;
}

.chat-sidebar-header .chat-user-online:before
{
    content       : "";
    position      : absolute;
    bottom        : 7px;
    left          : 40px;
    width         : 8px;
    height        : 8px;
    border-radius : 50%;
    box-shadow    : 0 0 0 2px #fff;
    background    : #16e15e;
}

.chat-list .chat-user-online:before
{
    content       : "";
    position      : absolute;
    bottom        : 7px;
    left          : 36px;
    width         : 8px;
    height        : 8px;
    border-radius : 50%;
    box-shadow    : 0 0 0 2px #fff;
    background    : #16e15e;
}

.chat-content
{
    margin-left : 340px;
    padding     : 85px 15px 15px 15px;
}

.chat-header
{
    position                : absolute;
    height                  : 70px;
    left                    : 340px;
    right                   : 0;
    top                     : 0;
    padding                 : 15px;
    background              : #ffffff;
    border-bottom           : 1px solid rgba(0, 0, 0, .125);
    border-top-right-radius : 0.25rem;
    z-index                 : 1;
}

.chat-footer
{
    position                   : absolute;
    height                     : 70px;
    left                       : 340px;
    right                      : 0;
    bottom                     : 0;
    padding                    : 15px;
    background                 : #f8f9fa;
    border-top                 : 1px solid rgba(0, 0, 0, .125);
    border-bottom-right-radius : 0.25rem;
}

.chat-footer-menu a
{
    display          : inline-block;
    width            : 40px;
    height           : 40px;
    line-height      : 40px;
    font-size        : 18px;
    color            : #6c757d;
    text-align       : center;
    border-radius    : 50%;
    margin           : 3px;
    background-color : white;
    border           : 1px solid rgb(0 0 0 / 15%);
}

.chat-tab-menu li a.nav-link
{
    padding     : .3rem 0.2rem;
    line-height : 1.2;
    color       : #4a4b4c;
}

.chat-tab-menu .nav-pills .nav-link.active,
.chat-tab-menu .nav-pills .show > .nav-link
{
    color            : #5e72e4;
    background-color : rgb(0 123 255 / 0%);
}

.chat-title
{
    font-size : 14px;
    color     : #272b2f;
}

.chat-msg
{
    font-size : 13px;
    color     : #6c757d;
}

.chat-time
{
    font-size : 13px;
    color     : #6c757d;
}

.chat-list
{
    position : relative;
    height   : 300px;
}

.chat-list .list-group-item
{
    border           : 1px solid rgb(0 0 0 / 0%);
    background-color : transparent;
}

.chat-list .list-group-item:hover
{
    border           : 1px solid rgb(0 0 0 / 0%);
    background-color : rgb(13 110 253 / 0.12)
}

.chat-list .list-group-item.active
{
    background-color : rgb(13 110 253 / 0.12)
}

.chart-online
{
    color : #16e15e;
}

.chat-top-header-menu a
{
    display          : inline-block;
    width            : 40px;
    height           : 40px;
    line-height      : 40px;
    font-size        : 18px;
    color            : #6c757d;
    text-align       : center;
    border-radius    : 50%;
    margin           : 3px;
    background-color : white;
    border           : 1px solid rgb(0 0 0 / 15%);
}

.chat-content
{
    position : relative;
    width    : auto;
    height   : 520px;
}

.chat-content-leftside .chat-left-msg
{
    width                  : fit-content;
    background-color       : #eff2f5;
    padding                : 0.80rem;
    border-radius          : 12px;
    max-width              : 480px;
    text-align             : left;
    border-top-left-radius : 0;
}

.chat-content-rightside .chat-right-msg
{
    width                      : fit-content;
    background-color           : #dcedff;
    padding                    : 0.80rem;
    border-radius              : 12px;
    float                      : right;
    max-width                  : 480px;
    text-align                 : left;
    border-bottom-right-radius : 0;
}

.chat-toggle-btn
{
    width            : 40px;
    height           : 40px;
    line-height      : 40px;
    margin-right     : 15px;
    text-align       : center;
    font-size        : 24px;
    color            : #6c757d;
    border-radius    : 50%;
    cursor           : pointer;
    background-color : white;
    border           : 1px solid rgb(0 0 0 / 15%);
}

/*Email box*/
.email-wrapper
{
    width         : auto;
    height        : 600px;
    overflow      : hidden;
    border-radius : 0.25rem;
    position      : relative;
    background    : #ffffff;
    box-shadow    : 0 0.1rem 0.7rem rgba(0, 0, 0, .10);
}

.email-sidebar
{
    width                     : 250px;
    height                    : 100%;
    position                  : absolute;
    background                : #fff;
    left                      : 0;
    top                       : 0;
    bottom                    : 0;
    z-index                   : 2;
    overflow                  : hidden;
    border-right              : 1px solid rgba(0, 0, 0, .125);
    border-top-left-radius    : 0.25rem;
    border-bottom-left-radius : 0.25rem;
}

.email-sidebar-header
{
    width                  : auto;
    height                 : auto;
    position               : relative;
    background             : #ffffff;
    border-bottom          : 1px solid rgba(0, 0, 0, .125);
    border-right           : 0px solid rgba(0, 0, 0, .125);
    border-top-left-radius : 0.25rem;
    padding                : 15px;
}

.email-navigation
{
    position      : relative;
    padding       : 0px;
    height        : 345px;
    border-bottom : 1px solid rgba(0, 0, 0, .125);
}

.email-header
{
    position                : absolute;
    height                  : 70px;
    left                    : 250px;
    right                   : 0;
    top                     : 0;
    padding                 : 15px;
    background              : #ffffff;
    border-bottom           : 1px solid rgba(0, 0, 0, .125);
    border-top-right-radius : 0.25rem;
    z-index                 : 1;
}

.email-content
{
    position                : absolute;
    left                    : 0;
    right                   : 0;
    width                   : auto;
    top                     : 70px;
    height                  : auto;
    margin-left             : 250px;
    padding                 : 0;
    background              : #ffffff;
    border-top-left-radius  : 0.25rem;
    border-top-right-radius : 0.25rem;
}

.email-navigation a.list-group-item
{
    color            : #404142;
    padding          : .35rem 1.25rem;
    background-color : white;
    border-bottom    : 1px solid rgb(0 0 0 / 0%);
    transition       : all .3s ease-out;
}

.email-navigation a.list-group-item:hover
{
    background-color : rgb(13 110 253 / 0.12);
}

.email-navigation a.list-group-item.active
{
    color            : #0b5ed7;
    font-weight      : 600;
    background-color : rgb(13 110 253 / 0.12)
}

.email-meeting
{
    position : absolute;
    left     : 0;
    right    : 0;
    bottom   : 0;
}

.email-meeting a.list-group-item
{
    color            : #404142;
    padding          : .35rem 1.25rem;
    background-color : white;
    border-bottom    : 1px solid rgb(0 0 0 / 0%);
}

.email-meeting a.list-group-item:hover
{
    background-color : rgb(0 123 255 / 15%);
    transition       : all .3s ease-out;
}

.email-hangout .chat-user-online:before
{
    content       : "";
    position      : absolute;
    bottom        : 8px;
    left          : 45px;
    width         : 8px;
    height        : 8px;
    border-radius : 50%;
    box-shadow    : 0 0 0 2px #fff;
    background    : #16e15e;
}

.email-toggle-btn
{
    width            : auto;
    height           : auto;
    margin-right     : 10px;
    text-align       : center;
    font-size        : 24px;
    color            : #404142;
    border-radius    : 0;
    cursor           : pointer;
    background-color : white;
    border           : 0px solid rgb(0 0 0 / 15%);
}

.email-actions
{
    width : 230px;;
}

.email-time
{
    font-size : 13px;
    color     : #6c757d;
}

.email-list div.email-message
{
    background    : #ffffff;
    border-bottom : 1px solid rgb(0 0 0 / 8%);
    color         : #383a3c;
}

.email-list div.email-message:hover
{
    transition       : all .2s ease-out;
    background-color : #eceef1;
}

.email-list
{
    position : relative;
    height   : 530px;
}

.email-star
{
    color : #6c757d;
}

.email-read-box
{
    position : relative;
    height   : 530px;
}

/*Compose Mail*/
.compose-mail-popup
{
    width    : 42%;
    position : fixed;
    bottom   : -30px;
    right    : 30px;
    z-index  : 15;
    display  : none;
}

.compose-mail-toggled
{
    display : block;
}

.compose-mail-title
{
    font-size : 16px;
}

.compose-mail-close
{
    width            : 25px;
    height           : 25px;
    line-height      : 25px;
    text-align       : center;
    font-size        : 14px;
    border-radius    : 2px;
    background-color : rgb(255 255 255 / 0%);
}

.compose-mail-close:hover
{
    background-color : rgb(255 255 255 / 20%);
}

/* Navs and Tabs */
.nav-primary.nav-tabs .nav-link.active
{
    color        : #5e72e4;
    border-color : #5e72e4 #5e72e4 #fff;
}

.nav-danger.nav-tabs .nav-link.active
{
    color        : #f41127;
    border-color : #f41127 #f41127 #fff;
}

.nav-success.nav-tabs .nav-link.active
{
    color        : #17a00e;
    border-color : #17a00e #17a00e #fff;
}

.nav-warning.nav-tabs .nav-link.active
{
    color        : #ffc107;
    border-color : #ffc107 #ffc107 #fff;
}

.nav-pills-danger.nav-pills .nav-link.active
{
    color            : #fff;
    background-color : #f41127;
}

.nav-pills-success.nav-pills .nav-link.active
{
    color            : #fff;
    background-color : #17a00e;
}

.nav-pills-warning.nav-pills .nav-link.active
{
    color            : #000;
    background-color : #ffc107;
}

.nav-search input.form-control
{
    background-color : rgb(255 255 255 / 20%);
    border           : 1px solid rgb(255 255 255 / 45%);
    color            : #fff;
}

.nav-search button[type="submit"]
{
    background-color : rgb(255 255 255 / 20%);
    border           : 1px solid rgb(255 255 255 / 32%);
    color            : #fff;
}

.nav-search input.form-control::placeholder
{
    opacity : 0.5 !important;
    color   : #fff !important;
}

.nav-search input.form-control::-ms-input-placeholder
{
    color : #fff !important;
}

.round-pagination.pagination .page-item:first-child .page-link
{
    border-top-left-radius    : 30px;
    border-bottom-left-radius : 30px;
}

.round-pagination.pagination .page-item:last-child .page-link
{
    border-top-right-radius    : 30px;
    border-bottom-right-radius : 30px;
}

/* Background Colors */
.bg-light-primary
{
    background-color : rgb(13 110 253 / 0.11) !important;
}

.bg-light-success
{
    background-color : rgb(23 160 14 / 0.11) !important;
}

.bg-light-danger
{
    background-color : rgb(244 17 39 / 0.11) !important;
}

.bg-light-warning
{
    background-color : rgb(255 193 7 / 0.11) !important;
}

.bg-light-info
{
    background-color : rgb(13 202 240 / 18%) !important;
}

.bg-light-transparent
{
    background-color : rgb(0 0 0 / 15%) !important
}

.bg-gradient-deepblue
{
    background : #6a11cb;
    background : -webkit-linear-gradient(
            45deg, #6a11cb, #2575fc) !important;
    background : linear-gradient(
            45deg, #6a11cb, #2575fc) !important;
}

.bg-gradient-orange
{
    background : #fc4a1a;
    background : -webkit-linear-gradient(
            45deg, #fc4a1a, #f7b733) !important;
    background : linear-gradient(
            45deg, #fc4a1a, #f7b733) !important;
}

.bg-gradient-ohhappiness
{
    background : #00b09b;
    background : -webkit-linear-gradient(
            45deg, #00b09b, #96c93d) !important;
    background : linear-gradient(
            45deg, #00b09b, #96c93d) !important;
}

.bg-gradient-ibiza
{
    background : #ee0979;
    background : -webkit-linear-gradient(
            45deg, #ee0979, #ff6a00) !important;
    background : linear-gradient(
            45deg, #ee0979, #ff6a00) !important;
}

.bg-gradient-scooter
{
    background : #17ead9;
    background : -webkit-linear-gradient(
            45deg, #17ead9, #6078ea) !important;
    background : linear-gradient(
            45deg, #17ead9, #6078ea) !important;
}

.bg-gradient-bloody
{
    background : #f54ea2;
    background : -webkit-linear-gradient(
            45deg, #f54ea2, #ff7676) !important;
    background : linear-gradient(
            45deg, #f54ea2, #ff7676) !important;
}

.bg-gradient-quepal
{
    background : #42e695;
    background : -webkit-linear-gradient(
            45deg, #42e695, #3bb2b8) !important;
    background : linear-gradient(
            45deg, #42e695, #3bb2b8) !important;
}

.bg-gradient-blooker
{
    background : #ffdf40;
    background : -webkit-linear-gradient(
            45deg, #ffdf40, #ff8359) !important;
    background : linear-gradient(
            45deg, #ffdf40, #ff8359) !important;
}

.bg-gradient-voilet
{
    background : linear-gradient(87deg, #8965e0 0, #bc65e0 100%) !important;
}

.bg-gradient-branding
{
    background : linear-gradient(87deg, #2dce89 0, #2dcecc 100%) !important;
}

.bg-gradient-cosmic
{
    background : linear-gradient(to right, rgb(142, 45, 226), rgb(74, 0, 224)) !important;
}

.bg-gradient-burning
{
    background : linear-gradient(to right, rgb(255, 65, 108), rgb(255, 75, 43)) !important;
}

.bg-gradient-lush
{
    background : linear-gradient(to right, rgb(86, 171, 47), rgb(168, 224, 99)) !important;
}

.bg-gradient-kyoto
{
    background : linear-gradient(to right, rgb(247, 151, 30), rgb(255, 210, 0)) !important;
}

.bg-gradient-blues
{
    background : linear-gradient(to right, rgb(86, 204, 242), rgb(47, 128, 237)) !important;
}

.bg-gradient-moonlit
{
    background : linear-gradient(to right, rgb(15, 32, 39), rgb(32, 58, 67), rgb(44, 83, 100)) !important;
}

.split-bg-primary
{
    background-color : #0c62e0;
    border-color     : #0c62e0;
}

.split-bg-secondary
{
    background-color : #515a62;
    border-color     : #515a62;
}

.split-bg-success
{
    background-color : #128e0a;
    border-color     : #128e0a;
}

.split-bg-info
{
    background-color : #0bb2d3;
    border-color     : #0bb2d3;
}

.split-bg-warning
{
    background-color : #e4ad07;
    border-color     : #e4ad07;
}

.split-bg-danger
{
    background-color : #e20e22;
    border-color     : #e20e22;
}

.bg-body
{
    background-color : #f8f9fe !important;
}

.bg-dribbble
{
    background-color : #ea4c89 !important;
}

.bg-behance
{
    background-color : #1769ff !important;
}

.bg-facebook
{
    background-color : #3b5998 !important;
}

.bg-twitter
{
    background-color : #55acee !important;
}

.bg-google
{
    background-color : #e52d27 !important;
}

.bg-linkedin
{
    background-color : #0976b4 !important;
}

/* Text Color */
.text-option
{
    color : #32393f !important
}

.text-facebook
{
    color : #3b5998 !important
}

.text-twitter
{
    color : #55acee !important
}

.text-youtube
{
    color : #e52d27 !important
}

.text-sky-light
{
    color : #b4d2ff;
}

/* Authentication */
.section-authentication-signin
{
    height : 100vh;
}

.authentication-forgot
{
    height  : 100vh;
    padding : 0 1rem;
}

.authentication-reset-password
{
    height  : 100vh;
    padding : 0 1rem;
}

.authentication-lock-screen
{
    height  : 100vh;
    padding : 0 1rem;
}

.error-404
{
    height  : 100vh;
    padding : 0 1rem;
}

.error-social a
{
    display       : inline-block;
    width         : 40px;
    height        : 40px;
    line-height   : 40px;
    font-size     : 18px;
    color         : #fff;
    text-align    : center;
    border-radius : 50%;
    margin        : 5px;
    box-shadow    : 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}

.bg-login
{
    background-image      : url(../images/login-images/bg-login-img.jpg);
    background-size       : cover;
    background-position   : center;
    background-repeat     : no-repeat;
    background-attachment : fixed;
}

.bg-forgot
{
    background-image      : url(../images/login-images/bg-forgot-password.jpg);
    background-size       : cover;
    background-position   : center;
    background-repeat     : no-repeat;
    background-attachment : fixed;
}

.bg-lock-screen
{
    background-image      : url(../images/login-images/bg-lock-screen.jpg);
    background-size       : cover;
    background-position   : center;
    background-repeat     : no-repeat;
    background-attachment : fixed;
}

.login-separater span
{
    position   : relative;
    top        : 26px;
    margin-top : -10px;
    background : #ffffff;
    padding    : 5px;
    font-size  : 12px;
    color      : #cbcbcb;
    z-index    : 1;
}

/* Buttons */
.btn i
{
    vertical-align : middle;
    font-size      : 1.3rem;
    margin-top     : -1em;
    margin-bottom  : -1em;
    margin-right   : 5px;
}

.btn-inverse-primary
{
    color            : #008cff;
    background-color : rgba(0, 140, 255, 0.18);
    border-color     : rgb(209, 234, 255);
}

.btn-inverse-primary:hover
{
    color            : #008cff;
    background-color : rgba(0, 140, 255, 0.18);
    border-color     : rgba(0, 140, 255, 0.18);
}

.btn-inverse-primary:focus
{
    color            : #008cff;
    background-color : rgba(0, 140, 255, 0.18);
    border-color     : rgba(0, 140, 255, 0.18);
    box-shadow       : 0 0 0 .25rem rgba(49, 132, 253, .3)
}

.btn-inverse-secondary
{
    color            : #75808a;
    background-color : rgba(117, 128, 138, 0.18);
    border-color     : rgb(230, 232, 234);
}

.btn-inverse-secondary:hover
{
    color            : #75808a;
    background-color : rgba(117, 128, 138, 0.18);
    border-color     : rgba(117, 128, 138, 0.18);
}

.btn-inverse-success
{
    color            : #15ca20;
    background-color : rgba(21, 202, 32, 0.18);
    border-color     : rgb(212, 246, 214);
}

.btn-inverse-success:hover
{
    color            : #15ca20;
    background-color : rgba(21, 202, 32, 0.18);
    border-color     : rgba(21, 202, 32, 0.18);
}

.btn-inverse-success:focus
{
    color            : #15ca20;
    background-color : rgba(21, 202, 32, 0.18);
    border-color     : rgba(21, 202, 32, 0.18);
    box-shadow       : 0 0 0 .25rem rgb(23 160 14 / 32%)
}

.btn-inverse-danger
{
    color            : #fd3550;
    background-color : rgba(253, 53, 80, 0.18);
    border-color     : rgb(255, 218, 223);
}

.btn-inverse-danger:hover
{
    color            : #fd3550;
    background-color : rgba(253, 53, 80, 0.18);
    border-color     : rgba(253, 53, 80, 0.18);
}

.btn-inverse-danger:focus
{
    color            : #fd3550;
    background-color : rgba(253, 53, 80, 0.18);
    border-color     : rgba(253, 53, 80, 0.18);
    box-shadow       : 0 0 0 .25rem rgba(225, 83, 97, .3)
}

.btn-inverse-warning
{
    color            : #ff9700;
    background-color : rgba(255, 151, 0, 0.18);
    border-color     : rgb(255, 236, 209);
}

.btn-inverse-warning:hover
{
    color            : #ff9700;
    background-color : rgba(255, 151, 0, 0.18);
    border-color     : rgba(255, 151, 0, 0.18);
}

.btn-inverse-warning:focus
{
    color            : #ff9700;
    background-color : rgba(255, 151, 0, 0.18);
    border-color     : rgba(255, 151, 0, 0.18);
    box-shadow       : 0 0 0 .25rem rgba(217, 164, 6, .3)
}

.btn-inverse-info
{
    color            : #0dceec;
    background-color : rgba(13, 206, 236, 0.18);
    border-color     : rgb(211, 246, 252);
}

.btn-inverse-info:hover
{
    color            : #0dceec;
    background-color : rgba(13, 206, 236, 0.18);
    border-color     : rgba(13, 206, 236, 0.18);
}

.btn-inverse-light
{
    color            : #a7aaaa;
    background-color : rgba(233, 234, 234, 0.2);
    border-color     : rgb(251, 251, 251);
}

.btn-inverse-light:hover
{
    color            : #a7aaaa;
    background-color : rgba(233, 234, 234, 0.2);
    border-color     : rgba(233, 234, 234, 0.2);
}

.btn-inverse-dark
{
    color            : #223035;
    background-color : rgba(34, 48, 53, 0.2);
    border-color     : #d7d9da;
}

.btn-inverse-dark:hover
{
    color            : #223035;
    background-color : rgba(34, 48, 53, 0.2);
    border-color     : rgba(34, 48, 53, 0.2);
}

.btn-facebook
{
    box-shadow       : 0 2px 2px 0 rgba(59, 89, 152, 0.14), 0 3px 1px -2px rgba(59, 89, 152, 0.2), 0 1px 5px 0 rgba(59, 89, 152, 0.12);
    background-color : #3b5998;
    border-color     : #3b5998;
    color            : #fff;
}

.btn-facebook:hover
{
    color : #fff;
}

.btn-white
{
    background-color : #fff;
    border-color     : #e7eaf3;
}

.chart-container1
{
    position : relative;
    height   : 340px;
}

.gmaps,
.gmaps-panaroma
{
    height        : 400px;
    background    : #eeeeee;
    border-radius : 3px;
}

/* Pricing Table*/
.pricing-table .card
{
    -webkit-transition    : all 0.2s;
    -o-transition         : all 0.2s;
    transition            : all 0.2s;
    -webkit-border-radius : 15px;
    border-radius         : 15px;
}

.pricing-table .card .card-header
{
    border-top-left-radius  : 15px;
    border-top-right-radius : 15px;
}

@media (min-width : 992px)
{
    .pricing-table .card:hover
    {
        margin-top         : -.25rem;
        margin-bottom      : .25rem;
        -webkit-box-shadow : 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
        box-shadow         : 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
    }
}

.pricing-table .card .card-title
{
    font-size      : 1rem;
    letter-spacing : .2rem;
    font-weight    : 500;
}

.pricing-table .card .card-price
{
    font-size : 2.7rem;
}

.pricing-table .card .card-price .term
{
    font-size : .875rem;
}

.pricing-table .card ul li.list-group-item
{
    border-bottom : 1px solid rgb(0 0 0 / 0%);
    color         : #3b3b3b;
    font-size     : 16px;
}

/*Forms */
input::placeholder
{
    color   : #000 !important;
    opacity : .3 !important
}

.card-group
{
    margin-bottom : 1.5rem;
}

.topbar .navbar .navbar-nav .nav-item
{
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : auto;
    height          : 60px;
}

.topbar .navbar .navbar-nav .nav-link
{
    color           : #212529;
    font-size       : 22px;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 42px;
    height          : 42px;
}

.topbar .navbar .navbar-nav .nav-link:hover,
.topbar .navbar .navbar-nav .nav-link:focus
{
    background-color : rgb(94 114 228 / 10%);
    color            : #008cff;
}

.dropend .dropdown-toggle-nocaret:after,
.dropdown-toggle-nocaret:after
{
    display : none
}

.alert-count
{
    position        : absolute;
    top             : 2px;
    left            : 22px;
    width           : 18px;
    height          : 18px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border-radius   : 50%;
    font-size       : 12px;
    font-weight     : 500;
    color           : #fff;
    background      : #f62718;
}

.user-img
{
    width         : 42px;
    height        : 42px;
    border-radius : 50%;
    border        : 0 solid #e5e5e5;
    padding       : 0;
}

.user-info .user-name
{
    font-size   : 15px;
    font-weight : 500;
    color       : #413c3c;
}

.user-info .designattion
{
    font-size : 13px;
    color     : #a9a8a8;
}

.user-box
{
    display      : flex;
    align-items  : center;
    height       : 60px;
    border-left  : 1px solid #f0f0f0;
    border-right : 1px solid #f0f0f0;
}

.topbar .navbar .dropdown-app .dropdown-menu
{
    width         : 270px;
    border        : 1px solid #dee2e6;
    padding       : 0.5rem;
    border-radius : 16px;
    box-shadow    : 0 0.5rem 1rem rgb(0 0 0 / 15%);
}

.topbar .navbar .dropdown-app .dropdown-menu .app-container
{
    position : relative;
    height   : 370px;
}

.topbar .navbar .dropdown-app .dropdown-menu .app-box
{
    padding       : .5rem;
    border-radius : 1rem;
    transition    : .2s;
}

.topbar .navbar .dropdown-app .dropdown-menu .app-box:hover
{
    background-color : #edf0f3;
}

.topbar .navbar .dropdown-app .dropdown-menu .app-name
{
    color           : #212529;
    font-size       : .64rem;
    text-decoration : none;
    font-weight     : 500;
}

.dropdown-large
{
    position : relative;
}

.dropdown-large .dropdown-menu
{
    width         : 360px;
    border        : 0;
    padding       : 0rem 0;
    box-shadow    : 0 0.5rem 1rem rgba(0, 0, 0, .15);
    border-radius : 10px;
}

.topbar .navbar .dropdown-large .dropdown-menu::after
{
    content     : "";
    width       : 13px;
    height      : 13px;
    background  : #ffffff;
    position    : absolute;
    top         : -6px;
    right       : 16px;
    transform   : rotate(45deg);
    border-top  : 1px solid #ddd;
    border-left : 1px solid #ddd;
}

.topbar .navbar .dropdown-menu::after
{
    content     : "";
    width       : 13px;
    height      : 13px;
    background  : #ffff;
    position    : absolute;
    top         : -6px;
    right       : 16px;
    transform   : rotate(45deg);
    border-top  : 1px solid #ddd;
    border-left : 1px solid #ddd;
}

.dropdown-large .msg-header
{
    padding                 : 0.8rem 1rem;
    border-bottom           : 1px solid #ededed;
    background-clip         : border-box;
    background-color        : #ffffff;
    text-align              : left;
    display                 : flex;
    align-items             : center;
    justify-content         : space-between;
    border-top-left-radius  : 10px;
    border-top-right-radius : 10px;
}

.dropdown-large .msg-header .msg-header-title
{
    font-size     : 16px;
    color         : #1c1b1b;
    margin-bottom : 0;
    font-weight   : 500;
}

.dropdown-large .msg-header-badge
{
    background-color : rgb(94 114 228 / 10%);
    color            : #008cff;
    padding          : 2px 8px;
    margin-bottom    : 0;
    border-radius    : 4px;
}

.dropdown-large .msg-header .msg-header-clear
{
    font-size     : 12px;
    color         : #585858;
    margin-bottom : 0;
}

.dropdown-large .msg-footer
{
    padding                    : 0.8rem 1rem;
    color                      : #1c1b1b;
    border-top                 : 1px solid #ededed;
    background-clip            : border-box;
    background                 : transparent;
    font-size                  : 14px;
    font-weight                : 500;
    border-bottom-left-radius  : .25rem;
    border-bottom-right-radius : .25rem;
}

.dropdown-large .user-online
{
    position : relative;
}

.dropdown-large .msg-name
{
    font-size     : 14px;
    margin-bottom : 0;
}

.dropdown-large .msg-info
{
    font-size     : 13px;
    margin-bottom : 0;
}

.dropdown-large .msg-avatar
{
    width         : 45px;
    height        : 45px;
    border-radius : 50%;
    margin-right  : 15px;
}

.dropdown-large .msg-time
{
    font-size     : 12px;
    margin-bottom : 0;
    color         : #919191;
}

.dropdown-large .user-online:after
{
    content       : "";
    position      : absolute;
    bottom        : 1px;
    right         : 17px;
    width         : 8px;
    height        : 8px;
    border-radius : 50%;
    box-shadow    : 0 0 0 2px #fff;
    background    : #16e15e;
}

.dropdown-large .dropdown-menu .dropdown-item
{
    padding       : .50rem 1.3rem;
    border-bottom : 1px solid #ededed;
}

.header-message-list
{
    position : relative;
    height   : 360px;
}

.header-notifications-list
{
    position : relative;
    height   : 360px;
}

.dropdown-large .notify
{
    width            : 45px;
    height           : 45px;
    line-height      : 45px;
    font-size        : 22px;
    text-align       : center;
    border-radius    : 50%;
    background-color : #f1f1f1;
    margin-right     : 15px;
}

.dropdown-large .cart-product-title
{
    color         : #140e22;
    font-size     : 14px;
    margin-bottom : 0px;
}

.dropdown-large .cart-product-price
{
    color         : #818189;
    font-size     : 14px;
    margin-bottom : 0;
}

.dropdown-large .cart-product-cancel
{
    right            : -7px;
    top              : -5px;
    font-size        : 16px;
    background-color : #fff;
    border           : 1px solid #eee;
    width            : 1.4rem;
    height           : 1.4rem;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    border-radius    : 50%;
}

.dropdown-large .cart-product
{
    width            : 50px;
    height           : 50px;
    display          : flex;
    align-items      : center;
    border-radius    : 0px;
    border           : 1px solid rgb(231 231 231);
    padding          : 4px;
    background-color : rgb(255 255 255);
}

.dropdown-large .cart-product img
{
    width : 100%;
}

.user-box .dropdown-menu i
{
    vertical-align : middle;
    margin-right   : 10px;
}

.dropdown-menu
{
    -webkit-box-shadow : 0 0.5rem 1rem rgba(0, 0, 0, .15);
    box-shadow         : 0 0.5rem 1rem rgba(0, 0, 0, .15);
    border             : 0px solid #e9ecef;
    font-size          : 14px;
    border-radius      : 10px;
}

.topbar .navbar .dropdown-menu
{
    -webkit-animation : .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown;
    animation         : .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown;
}

@-webkit-keyframes animdropdown
{
    from
    {
        -webkit-transform : translate3d(0, 6px, 0);
        transform         : translate3d(0, 6px, 0);
        opacity           : 0
    }
    to
    {
        -webkit-transform : translate3d(0, 0, 0);
        transform         : translate3d(0, 0, 0);
        opacity           : 1
    }
}

@keyframes animdropdown
{
    from
    {
        -webkit-transform : translate3d(0, 6px, 0);
        transform         : translate3d(0, 6px, 0);
        opacity           : 0
    }
    to
    {
        -webkit-transform : translate3d(0, 0, 0);
        transform         : translate3d(0, 0, 0);
        opacity           : 1
    }
}

.mobile-search-icon
{
    display : none;
}

.mobile-toggle-menu
{
    font-size : 26px;
    color     : #404142;
    cursor    : pointer;
}

/*Switcher*/
.switcher-wrapper
{
    width       : 280px;
    height      : 100%;
    position    : fixed;
    right       : -280px;
    top         : 0;
    bottom      : 0;
    z-index     : 16;
    background  : #fff;
    border-left : 0px solid #d2d2d2;
    box-shadow  : 0 0.3rem 0.6rem rgba(0, 0, 0, .13);
    transition  : all .2s ease-out;
}

.switcher-btn
{
    width                     : 40px;
    height                    : 40px;
    line-height               : 40px;
    font-size                 : 24px;
    background                : #5e72e4;
    box-shadow                : 0 0.3rem 0.6rem rgba(0, 0, 0, .13);
    color                     : #fff;
    text-align                : center;
    border-top-left-radius    : 10px;
    border-bottom-left-radius : 10px;
    position                  : absolute;
    top                       : 40%;
    right                     : 100%;
    cursor                    : pointer;
}

.switcher-wrapper.switcher-toggled
{
    right : 0px;
}

.switcher-body
{
    padding : 1.25rem;
}

.switcher-body .form-check .form-check-input,
.switcher-body .form-check .form-check-label
{
    cursor : pointer;
}

.header-colors-indigators .indigator
{
    width         : 45px;
    height        : 45px;
    background    : #f4f2f2;
    border-radius : 10px;
    cursor        : pointer;
}

/* Responsive */
@media screen and (max-width : 1199px)
{
    .page-wrapper
    {
        margin-top : 60px;
    }

    .nav-container
    {
        position        : fixed;
        width           : 260px;
        right           : 0;
        left            : -260px;
        z-index         : 16;
        border-bottom   : 1px solid #e4e4e4;
        background-clip : border-box;
        background      : #ffffff;
        height          : 100%;
        padding         : 10px;
        display         : flex;
        align-items     : start;
        justify-content : flex-start;
        overflow-y      : scroll;
        overflow-x      : hidden;
    }

    .wrapper.toggled .nav-container
    {
        display : flex;
        left    : 0px;
    }

    .wrapper.toggled .mobile-topbar-header
    {
        display         : flex;
        align-items     : center;
        height          : 60px;
        background      : white;
        border-bottom   : 1px solid #f1f1f1;
        background-clip : border-box;
        position        : fixed;
        width           : 260px;
        left            : 0;
        top             : 0;
        right           : 0;
        z-index         : 10;
        padding         : 0 30px;
    }

    .wrapper.toggled .overlay
    {
        position   : fixed;
        top        : 0;
        right      : 0;
        bottom     : 0;
        left       : 0;
        background : #000;
        opacity    : 0.6;
        z-index    : 15;
        display    : block;
        cursor     : move;
        transition : all .2s ease-out;
    }

    .left-topbar
    {
        width : auto;
    }

    .email-header
    {
        height : auto;
    }

    .email-content
    {
        padding : 100px 0px 0px 0px;
    }
}

@media screen and (max-width : 1024px)
{
    .topbar
    {
        left : 0px !important;
    }

    .mobile-search-icon
    {
        display : block;
    }

    .page-footer
    {
        left : 0px;
    }

    .wrapper.toggled .overlay
    {
        position   : fixed;
        top        : 0;
        right      : 0;
        bottom     : 0;
        left       : 0;
        background : #000;
        opacity    : 0.6;
        z-index    : 10;
        display    : block;
        cursor     : move;
        transition : all .2s ease-out;
    }

    .error-404
    {
        height  : auto;
        padding : 6.0rem 1rem;
    }

    .chat-header
    {
        border-top-left-radius : 0.25rem;
    }

    .chat-footer
    {
        border-bottom-left-radius : 0.25rem;
    }

    .chat-sidebar
    {
        left : -370px;
    }

    .chat-content
    {
        margin-left : 0px;
    }

    .chat-header
    {
        left : 0px;
    }

    .chat-footer
    {
        left : 0px;
    }

    /* chat toggled css */
    .chat-toggled .chat-sidebar
    {
        left : 0px;
    }

    .chat-toggled .overlay
    {
        position   : absolute;
        top        : 0;
        right      : 0;
        bottom     : 0;
        left       : 340px;
        background : #000;
        opacity    : 0.5;
        z-index    : 11;
        display    : block;
        cursor     : move;
        transition : all .3s ease-out;
    }

    .email-header
    {
        border-top-left-radius : 0.25rem;
    }

    .email-sidebar
    {
        left : -280px;
    }

    .email-content
    {
        margin-left : 0px;
    }

    .email-header
    {
        left : 0px;
    }

    /* email toggled */
    .email-toggled .email-sidebar
    {
        left : 0px;
    }

    .email-toggled .overlay
    {
        position   : absolute;
        top        : 0;
        right      : 0;
        bottom     : 0;
        left       : 250px;
        background : #000;
        opacity    : 0.5;
        z-index    : 9;
        display    : block;
        cursor     : move;
        transition : all .3s ease-out;
    }
}

@media screen and (max-width : 991px)
{
    .section-authentication-signin
    {
        height        : 100%;
        margin-top    : 6rem;
        margin-bottom : 2rem;
    }

    .authentication-reset-password
    {
        height  : auto;
        padding : 2.0rem 1rem;
    }

    .authentication-lock-screen
    {
        height  : auto;
        padding : 2.0rem 1rem;
    }

    .compose-mail-popup
    {
        width    : auto;
        position : fixed;
        bottom   : -30px;
        right    : 0;
        left     : 0;
    }
}

@media screen and (max-width : 767px)
{
    .user-box .user-info
    {
        display : none;
    }

    .authentication-forgot
    {
        height  : auto;
        padding : 2.5rem 1rem;
    }
}

@media screen and (max-width : 620px)
{
    .topbar .navbar .dropdown-menu::after
    {
        display : none;
    }

    .topbar .navbar .dropdown
    {
        position : static !important;
    }

    .topbar .navbar .dropdown-menu
    {
        width : 100% !important;
    }
}

@media screen and (max-width : 520px)
{
    .chat-footer-menu,
    .chat-top-header-menu
    {
        display : none;
    }
}