@charset "UTF-8";

/**

 * Summary:

 *

 *  0. ELEMENT

 *      - 0.1. Body / Typography

 *      - 0.2. Type Elements

        - 0.3. Header

        - 0.4. Sidebar

        - 0.5. Container

        - 0.6. Pageheader

        - 0.7. Footer



   -------------------------



 *  1. Dashboard



 *      - 1.1. TYPE ELEMENT

 *      - 1.2. TYPE ELEMENT



   --------------------------



2. UI Elements



    - 2.1.  Alerts

    - 2.2.  Buttons

    - 2.3.  Cards

    - 2.4.  General

    - 2.5.  Modals

    - 2.6.  Notifications

    - 2.7.  Icon

    - 2.8.  Tabs

    - 2.9.  Accordions

    - 2.10. Typography

    - 2.11. Listgroup

    - 2.12. Multiselect

    - 2.13. Badge

    - 2.14. Pagination

    - 2.15. Switch Toogle

    - 2.16. Spinner





    ----------------------------



3. Charts



    - 3.1.  Chartist js

    - 3.2.  Sparklines

    - 3.3.  Chart.js

    - 3.4.  Morris.js

    - 3.5.  C3 Charts.js



     ----------------------------



4. Forms



    - 4.1.  Elements

    - 4.2.  Validations

    - 4.3.  Multiselect

    - 4.4.  Wizard

    - 4.5.  Input Mask

    - 4.6.  Summar Note text editor

    - 4.7.  Multi Upload





     ----------------------------





5. Tables



    - 5.1.  General

    - 5.2.  Data Tables

    - 5.3.  Table Filters







         ----------------------------





6. Pages



    - 6.1.   Blank Page

    - 6.2.   Blank Page Header

    - 6.3.   Login

    - 6.4.   Sign up

    - 6.5.   Forgot Password

    - 6.6.   Profile

    - 6.7.   Pricing

    - 6.8.   Timline

    - 6.9.   Calendar

    - 6.10.  Metrics

    - 6.11.  Media Object

    - 6.12.  Shortable / Nestable

    - 6.13.  404 Error













         ----------------------------



7. Email



    - 7.1.  Inbox

    - 7.2.  Email Detail

    - 7.3.  Email Compose

    - 7.4.  Message Chat



       ----------------------------





8. Layouts



    - 8.1. Primary Header

    - 8.2. Success Header

    - 8.3. Warning Header

    - 8.4. Danger Header

    - 8.5. Search Input

    - 8.6. Off Canvas Menu

    - 8.7. Without Left Sidebar

    - 8.8. Without Right Sidebar

    - 8.9. Without Both Sidebars

    - 8.10. Fixed Left Sidebar

    - 8.11. Boxed Layout

    - 8.12. Page Aside

    - 8.13. Collapsible Sidebar

    - 8.14. Sub Navigation







       ----------------------------





9. Maps



    - 9.1.  Google Map

    - 9.2.  Vector Map



       ----------------------------





10. Menu Level



    - 10.1.  Level 1

    - 10.2.  Level 2

   */





/* ==========================================================================

   0. ELEMENT

   ========================================================================== */





/* 0.1. Body / Typography

   ========================================================================== */



body {

    font-family: 'Circular Std Book';

    font-style: normal;

    font-weight: normal;

    font-size: 14px;

    color: #71748d;

    background-color: #fff;

    -webkit-font-smoothing: antialiased;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    color: #3d405c;

    margin: 0px 0px 15px 0px;

    font-family: 'Circular Std Medium';

}



h1 {

    font-size: 34px;

}



h2 {

    font-size: 28px;

    line-height: 30px;

}



h3 {

    font-size: 20px;

}



h4 {

    font-size: 16px;

    line-height: 26px;

}



h5 {

    font-size: 15px;

    line-height: 26px;

}



h6 {

    font-size: 12px;

}



p {

    margin: 0px 0px 20px 0px;

}



p:last-child {

    margin: 0px;

}



a {

    color: #71748d;

}



a:hover {

    color: #ff407b;

    text-decoration: none;

}



a:active,

a:hover {

    outline: 0;

    text-decoration: none;

}

ul.ajax_image_list {

    position: absolute;

    width: 95%;

    padding: 0px;

    margin: 0px;

    list-style: none;

    background: #fff;

    z-index: 9999;

    max-height: 300px;

    overflow-y: auto;

}



ul.ajax_image_list li {

    padding: 4px;

    width: 100%;

    cursor: pointer;

}



ul.ajax_image_list li img {

    max-width: 100px;

}



ul.ajax_image_list li:hover {

    background: #c4bfbf;

}

ol,

ul {}



ol li,

ul li {}



.lead {

    font-size: 1.25rem;

    font-weight: 300;

    color: #3d3f5d;

}





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

 Form

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



label {

    display: inline-block;

    max-width: 100%;

    margin-bottom: 5px;

    font-size: 15px;

    color: #71748d;

}

p.custom-alert {

    z-index: 999999;

}

.modal-body canvas {

    max-width: 100%;

}

.form-control {

    display: block;

    width: 100%;

    font-size: 14px;

    line-height: 1.42857143;

    color: #71748d;

    background-color: #fff;

    background-image: none;

    border: 1px solid #d2d2e4;

    border-radius: 2px;

}



.form-control:focus {

    color: #71748d;

    background-color: #fff;

    border-color: #a7a7f0;

    outline: 0;

    box-shadow: 0 0 0 0.2rem rgba(214, 214, 255, .75);

}



input[type=file] {

    color: #71748d;

    background-color: #fff;

    border-color: #a7a7f0;

    outline: 0;

    box-shadow: 0 0 0 0.2rem rgba(214, 214, 255, .75);

}



.col-form-label {

    font-size: 15px;

}



input {}



button {}



button:focus {

    outline: 0;

}



select.form-control {

    color: #71748d;

    -webkit-appearance: none;

    -moz-appearance: none;

    background-position: 99% 52%;

    background-size: auto;

    background-repeat: no-repeat;

    background-image: url(/images/down-arrow.png);

    padding-right: 15px;

    border: 1px solid #d2d2e4;

    border-radius: 2px;

}



textarea.form-control {

    height: auto;

    color: #71748d;

    background-color: #fff;

    background-image: none;

    border: 1px solid #d2d2e4;

    border-radius: 2px;

    padding: 12px 16px;

}



input::-webkit-input-placeholder {

    color: #71748d !important;

}



input:focus::-webkit-input-placeholder {

    color: #5969ff !important;

}



textarea::-webkit-input-placeholder {

    color: #71748d !important;

}



textarea:focus::-webkit-input-placeholder {

    color: #5969ff !important;

}



button.btn {}



button.btn-default {}



button.btn-primary {}



address {}



.form-group {

    margin-bottom: 12px;

}



.form-control-lg {

    padding: 12px;

}





/* Custom-Chekbox

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



.custom-control {

    position: relative;

    min-height: 1.5rem;

    padding-left: 1.5rem;

}



.custom-control-input:checked~input[type="checkbox"] {

    background: #3d404e;

    border: #7f83a2 1px solid;

}



.custom-control-input {

    position: absolute;

    z-index: -1;

    opacity: 0;

}



.custom-control-label {

    margin-bottom: 0;

}



.custom-checkbox .custom-control-input:checked~.custom-control-label::before {

    background-color: #5969ff;

    border-color: #5969ff;

}

.setting_section{

background: #007bff;

    color: #fff;

}

.sidebar-nav-fixed ul li.setting_section   a{

color: #fff;

}

.custom-control-input:checked~.custom-control-label::before {

    color: #fff;

    background-color: #5969ff;

}



.custom-checkbox .custom-control-input:checked~.custom-control-label::after {}



.custom-control-label::after {

    position: absolute;

    top: 7px;

    left: 0;

    display: block;

    width: 1rem;

    height: 1rem;

    content: "";

    background-repeat: no-repeat;

    background-position: center center;

    background-size: 50% 50%;

}



.custom-control-label::before {

    position: absolute;

    top: 7px;

    left: 0;

    display: block;

    width: 1rem;

    height: 1rem;

    pointer-events: none;

    content: "";

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    background-color: #ffffff;

    border: 2px solid #d2d2e4;

}



.custom-radio .custom-control-input:checked~.custom-control-label::before {

    background-color: #5969ff;

    border-color: #5969ff;

}



.custom-control-input:disabled~.custom-control-label::before {

    background-color: #efeff6;

}



.custom-select-font-size {

    font-size: 14px;

}



.custom-control-input:focus~.custom-control-label::before {

    box-shadow: none;

}



.custom-valid.custom-control-input.is-valid:checked~.custom-control-label::before,

.was-validated .custom-control-input:valid:checked~.custom-control-label::before {

    background-color: #34ce57;

    border-color: #34ce57;

}



.custom-control-input.is-invalid~.custom-control-label::before,

.was-validated .custom-control-input:invalid~.custom-control-label::before {

    background-color: #ffdadd;

    border-color: #efa2a9;

}



.custom-control-input:disabled~.custom-control-label {

    color: #9295b0;

}



.custom-control-input.is-valid~.custom-control-label::before,

.was-validated .custom-control-input:valid~.custom-control-label::before {

    background-color: #c6ffd3;

    border: 2px solid #68df83;

}



.input-group-text {

    display: -ms-flexbox;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    padding: 10px;

    margin-bottom: 0;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.5;

    color: #75748d;

    text-align: center;

    white-space: nowrap;

    background-color: #efeff6;

    border: 1px solid #d2d2e4;

    border-radius: 4px;

}



.section-block {

    margin: 16px 0px;

}



.section-title {

    font-weight: 500;

    margin-bottom: 5px;

}





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

Parsley Varifation

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



.parsley-errors-list.filled {

    margin-top: 10px;

    margin-bottom: 0;

    padding: 7px 29px;

    position: relative;

    background-color: #f96a6a;

    color: #FFF;

}





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

 Padding / Margin

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



.nopadding {

    padding: 0px;

}



.p-r-0 {

    padding-right: 0px;

}



.p-r-10 {

    padding-right: 10px;

}



.p-r-15 {

    padding-right: 15px;

}



.p-r-20 {

    padding-right: 20px;

}



.p-r-25 {

    padding-right: 25px;

}



.p-l-0 {

    padding-left: 0px;

}



.p-l-10 {

    padding-left: 10px;

}



.p-l-15 {

    padding-left: 15px;

}



.p-l-20 {

    padding-left: 20px;

}



.p-l-25 {

    padding-left: 25px;

}



.p-l-40 {

    padding-left: 40px;

}



.p-t-0 {

    padding-top: 0px;

}



.p-t-10 {

    padding-top: 10px;

}



.p-t-20 {

    padding-top: 20px;

}



.p-t-30 {

    padding-top: 30px;

}



.p-t-40 {

    padding-top: 40px;

}



.p-t-60 {

    padding-top: 60px;

}



.p-t-80 {

    padding-top: 80px;

}



.p-t-100 {

    padding-top: 100px;

}



.p-t-120 {

    padding-top: 120px;

}



.p-t-140 {

    padding-top: 140px;

}



.p-b-0 {

    padding-bottom: 0px;

}



.p-b-10 {

    padding-bottom: 10px;

}



.p-b-20 {

    padding-bottom: 20px;

}



.p-b-30 {

    padding-bottom: 30px;

}



.p-b-40 {

    padding-bottom: 40px;

}



.p-b-60 {

    padding-bottom: 60px;

}



.p-b-80 {

    padding-bottom: 80px;

}



.p-b-100 {

    padding-bottom: 100px;

}



.p-b-120 {

    padding-bottom: 120px;

}



.p-b-140 {

    padding-bottom: 140px;

}



.m-r-0 {

    margin-right: 0px;

}



.m-r-10 {

    margin-right: 10px;

}



.m-r-15 {

    margin-right: 15px;

}



.m-r-20 {

    margin-right: 20px;

}



.m-r-25 {

    margin-right: 25px;

}



.m-l-0 {

    margin-left: 0px;

}



.m-l-10 {

    margin-left: 10px;

}



.m-l-15 {

    margin-left: 15px;

}



.m-l-20 {

    margin-left: 20px;

}



.m-l-25 {

    margin-left: 25px;

}



.m-t-0 {

    margin-top: 0px;

}



.m-t-10 {

    margin-top: 10px;

}



.m-t-20 {

    margin-top: 20px;

}



.m-t-30 {

    margin-top: 30px;

}



.m-t-40 {

    margin-top: 40px;

}



.m-t-60 {

    margin-top: 60px;

}



.m-t-80 {

    margin-top: 80px;

}



.m-t-100 {

    margin-top: 100px;

}



.m-t-120 {

    margin-top: 120px;

}



.m-b-0 {

    margin-bottom: 0px;

}



.m-b-10 {

    margin-bottom: 10px;

}



.m-b-20 {

    margin-bottom: 20px;

}



.m-b-30 {

    margin-bottom: 30px;

}



.m-b-40 {

    margin-bottom: 40px;

}



.m-b-60 {

    margin-bottom: 60px;

}



.m-b-80 {

    margin-bottom: 80px;

}



.m-b-100 {

    margin-bottom: 100px;

}



.m-b-120 {

    margin-bottom: 120px;

}





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

 Font Weight

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



html body .font-bold {

    font-weight: 800;

}



html body .font-normal {

    font-weight: 400;

}



html body .font-light {

    font-weight: 300;

}



html body .font-medium {

    font-weight: 600;

}



html body .font-16 {

    font-size: 16px;

}



html body .font-12 {

    font-size: 12px;

}



html body .font-14 {

    font-size: 14px;

}



html body .font-10 {

    font-size: 10px;

}



html body .font-18 {

    font-size: 18px;

}



html body .font-20 {

    font-size: 20px;

}



html body .font-22 {

    font-size: 22px;

}



html body .font-24 {

    font-size: 24px;

}



html body .display-5 {

    font-size: 3rem;

}



html body .display-6 {

    font-size: 2.5rem;

}



html body .display-7 {

    font-size: 2rem;

}





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

 Arrow  List

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



.arrow {

    position: relative;

}



.arrow li {

    padding-left: 20px;

    line-height: 30px;

}



.arrow li:before {

    font-family: 'Font Awesome\ 5 Free';

    font-weight: 900;

    display: inline-block;

    position: absolute;

    left: 0;

    font-size: 14px;

    color: #ff407b;

    content: '\f058';

    font-style: initial;

}



.bullet-check {

    position: relative;

}



.bullet-check li {

    padding-left: 25px;

    line-height: 30px;

}



.bullet-check li:before {

    font-family: 'Font Awesome\ 5 Free';

    font-weight: 900;

    display: inline-block;

    position: absolute;

    left: 0;

    font-size: 14px;

    color: #22ce77;

    content: '\f00c';

    font-style: initial;

}





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

Background Color / Color

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



.bg-primary {

    background-color: #5969ff !important;

    color: #fff !important;

}



.bg-brand {

    background-color: #ffc750 !important;

}



.bg-secondary {

    background-color: #ff407b !important;

    color: #fff !important;

}



.bg-success {

    background-color: #2ec551 !important;

}



.bg-danger {

    background-color: #ef172c !important;

}



.bg-warning {

    background-color: #ffc108 !important;

}



.bg-info {

    background-color: #25d5f2 !important;

}



.bg-light {

    background-color: #f9f9ff !important;

}



.bg-dark {

    background-color: #2e2f39 !important;

}



.bg-primary-light {

    background-color: #dbdeff !important;

    color: #fff !important;

}



.bg-info-light {

    background-color: #dffaff !important;

    color: #fff;

}



.bg-secondary-light {

    background-color: #ffdbe6 !important;

}



.bg-danger-light {

    background-color: #fbd3d5 !important;

}



.bg-brand-light {

    background-color: #fff2d5 !important;

}



.bg-success-light {

    background-color: #c5fad3 !important;

}





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

Borders

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



.border-boxes span {

    display: inline-block;

    width: 5rem;

    height: 5rem;

    margin: .25rem;

    background-color: #fbfbfd;

}



.border {

    border: 1px solid #e6e6f2 !important;

}



.border-top {

    border-top: 1px solid #e6e6f2 !important;

}



.border-bottom {

    border-bottom: 1px solid #e6e6f2 !important;

}



.border-left {

    border-left: 1px solid #e6e6f2 !important;

}



.border-right {

    border-right: 1px solid #e6e6f2 !important

}





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

 Color

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



.text-primary {

    color: #5969ff !important;

}



.text-brand {

    color: #ffc750 !important;

}



.text-secondary {

    color: #ff407b !important;

}



.text-success {

    color: #2ec551 !important;

}



.text-danger {

    color: #ef172c !important;

}



.text-warning {

    bcolor: #ffc108 !important;

}



.text-info {

    color: #25d5f2 !important;

}



.text-light {

    color: #f0f0f8 !important;

}



.text-dark {

    color: #3d405c !important;

}



.text-gray {

    color: #868aa5 !important;

}



 



.rating-color {

    color: #ffa811;

}





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

Borders

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



.border-top-primary {

    border-top-color: #5969ff !important;

}



.border-3 {

    border-width: 3px !important;

}



.border-secondary {

    border-color: #ff407b !important;

}



.border-brand {

    border-color: #ffc750 !important;

}



.border-info {

    border-color: #25d5f2 !important;

}





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

Fontawesome size

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



.fa-xl {}



.fa-lg {}



.fa-md {}



.fa-sm {

    font-size: 24px !important;

}



.fa-xs {

    font-size: 11px !important;

}





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

Social Color

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



.facebook-color {

    color: #3c73df;

}



.twitter-color {

    color: #1ea2f2;

}



.instagram-color {

    color: #9361fa;

}



.rss-color {

    color: #ee802f;

}



.pinterest-color {

    color: #c8232c;

}



.youtube-color {

    color: #ff0000;

}



.medium-color {

    color: #00ab6c;

}



.googleplus-color {

    color: #d34836;

}



.snapchat-color {

    color: #FFFB00;

}





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

Social bg Color

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



.facebook-bgcolor {

    background-color: #3b5898;

    color: #fff;

}



.twitter-bgcolor {

    background-color: #1ea2f2;

    color: #fff;

}



.instagram-bgcolor {

    background-color: #9361fa;

    color: #fff;

}



.rss-bgcolor {

    background-color: #ee802f;

    color: #fff;

}



.pinterest-bgcolor {

    background-color: #c8232c;

    color: #fff;

}



.youtube-bgcolor {

    background-color: #ff0000;

    color: #fff;

}



.googleplus-bgcolor {

    background-color: #d34836;

    color: #fff;

}





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

Progress bar

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



.progress-bar {



    background-color: #5969ff;

}



.primary-progress-bar {

    background-color: #5969ff;

}



.progress-sm {

    height: 5px;

}



.progress-sm {

    height: 5px

}



.progress-md {

    height: 8px

}



.progress-lg {

    height: 12px

}



.progress-xl {

    height: 15px

}



.f-icon,

.if-icon,

.m-icon,

.sl-icon,

.t-icon,

.w-icon {

    cursor: pointer;

    padding: 13px 15px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.m-icon {

    width: 33%;

    display: inline-block;

}



.f-icon:hover,

.if-icon:hover,

.m-icon:hover,

.sl-icon:hover,

.t-icon:hover,

.w-icon:hover {

    background-color: #f8f9fa;

}





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

Legends

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



.legend-item {

    font-size: 14px;

}



.legend-title {}



.legend-text {}





/* ==========================================================================

   0.2. Type Elements

   ========================================================================== */





/* ==========================================================================

   0.3.  Header

   ========================================================================== */





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

Top Header

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



.dashboard-header {}



.dashboard-header .navbar {

    padding: 0px;

    border-bottom: 1px solid #e6e6f2;

    -webkit-box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);

    box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);

    -webkit-transition: all 0.3s ease;

    min-height: 60px;

}







.navbar-brand {

    display: inline-block;

    margin-right: 1rem;

    line-height: inherit;

    white-space: nowrap;

    padding: 11px 20px;

    font-size: 30px;

    text-transform: uppercase;

    font-weight: 700;

    color: #007bff;

}

.navbar-brand img {

    max-width: 200px;

}

.navbar-brand:hover{

    color: #007bff;

}

.navbar-right-top {}



.navbar-right-top .nav-item {

    border-right: 1px solid #e6e6f2;

}



.navbar-right-top .nav-item:last-child {

    border: none;

}



.navbar-right-top .nav-item .nav-link {

    padding: 13px 20px;

    font-size: 16px;

    line-height: 2;

    color: #82849f;

}





/* ------  top-search-bar --------  */



.top-search-bar {

    padding-top: 12px;

    padding-right: 24px;

}





/* ------  Notification Dropdown --------  */



.notification {}



.notification-dropdown {

    min-width: 320px;

}



.notification-dropdown,

.connection-dropdown,

.nav-user-dropdown {

    padding: 0px;

    margin: 0px;

}



.notification-title {

    font-size: 14px;

    color: #3d405c;

    text-align: center;

    padding: 8px 0px;

    border-bottom: 1px solid #e3e3e3;

    line-height: 1.5;

    background-color: #fffffe;

}



.notification-list {}



.notification-list .list-group-item {

    border-radius: 0px;

    padding: 12px;

    margin-top: -1px;

    border-left: transparent;

    border-right: transparent;

}



.notification-list .list-group-item.active {

    z-index: 2;

    color: #3d405c;

    background-color: #f7f7fb;

    border-color: #e1e1e7;

}



.notification-list .list-group-item-action:focus,

.list-group-item-action:hover {

    color: #404040;

    text-decoration: none;

    background-color: #f7f7fb;

}



.notification-list .list-group-item:last-child {}



.notification-info {}



.notification-info .notification-date {

    display: block;

    font-size: 11px;

    margin-top: 4px;

    text-transform: uppercase;

    color: #71748d;

}



.notification .dropdown-toggle::after,

.connection .dropdown-toggle::after,

.nav-user .dropdown-toggle::after {

    display: inline-block;

    width: 0;

    height: 0;

    margin-left: .255em;

    vertical-align: .255em;

    content: "";

    border: none;

}



.notification-list-user-img {

    float: left;

}



.notification-list-user-block {

    padding-left: 50px;

    font-size: 14px;

    line-height: 21px;

}



.notification-list-user-name {

    color: #5969ff;

    font-size: 14px;

    margin-right: 8px;

}



.list-footer,

.conntection-footer {

    font-size: 14px;

    color: #fff;

    text-align: center;

    padding: 10px 0px;

    line-height: 1.5;

    font-weight: 700;

    background-color: #5969ff;

    border-bottom-left-radius: 3px;

    border-bottom-right-radius: 3px;

}



.list-footer a,

.conntection-footer a {

    color: #fff;

}



.list-footer a:hover,

.conntection-footer a:hover {

    color: #fff;

}



.indicator {

    content: '';

    position: absolute;

    top: 16px;

    right: 23px;

    display: inline-block;

    width: 7px;

    height: 7px;

    border-radius: 100%;

    background-color: #ef172c;

    animation: .9s infinite beatHeart;

    transform-origin: center;

}



@keyframes beatHeart {

    0% {

        transform: scale(0.9);

    }

    25% {

        transform: scale(1.1);

    }

    40% {

        transform: scale(0.9);

    }

    60% {

        transform: scale(1.1);

    }

    100% {

        transform: scale(0.9);

    }

}





/* ------  Connection --------  */



.connection {}



.connection-dropdown {}



.connection-list {

    width: 300px;

    padding: 20px;

}



.connection-item {

    border-radius: 3px;

    line-height: 32px;

    text-align: center;

    padding: 12px 7px 4px;

    display: block;

    border: 1px solid transparent;

    color: #3d405c;

    font-size: 12px;

}



.connection-item img {

    width: 32px;

}



.connection-item:hover {

    background-color: #fff;

    border: 1px solid #e6e6f2;

}



.connection-item span {

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}





/* ----- User Nav Dropdown -----*/



.nav-user {}



.nav-user-dropdown {

    padding: 0px;

    min-width: 230px;

    margin: 0px;

}



.nav-user-name {}



.nav-user-info {

    /* background-color: #5969ff; */

    line-height: 1.4;

    /* padding: 12px; */

    color: #fff;

    font-size: 13px;

    /* border-radius: 2px 2px 0 0; */

}



.nav-user-info h5{

    font-size: 12px;

    font-weight: normal;

    color: #fff;

    line-height: 1.3;

}

.nav-user-info .status {

    float: left;

    top: 7px;

    left: 0px;

}



.nav-user-dropdown {}



.nav-user-dropdown .dropdown-item {

    display: block;

    width: 100%;

    padding: 12px 22px 15px;

    clear: both;

    font-weight: 400;

    color: #686972;

    text-align: inherit;

    white-space: nowrap;

    background-color: transparent;

    border: 0;

    font-size: 13px;

    line-height: 0.4;

}



.nav-user-dropdown .dropdown-item:hover {

    background-color: #f7f7fb;

}





/* ------  Top Header User Info --------  */





/* -------------------- 0.4. Sidebar ----------------------- */





.navigation-horizontal {



    width: 100%;

    height: 100%;



    overflow: auto;

   /* background-color: #fff;

    -webkit-box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);

    box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);

    -webkit-transition: all 0.3s ease;*/

}



.navigation-horizontal .nav-link[data-toggle="collapse"] {

    position: relative;

    display: flex;

    align-items: center;

}



.navigation-horizontal .nav-link[data-toggle="collapse"]::after {

    display: inline-block;

    width: 0;

    height: 0;

    position: absolute;

    right: 8px;

    vertical-align: 0.255em;

    content: "";

    border-top: 0.3em solid;

    border-right: 0.3em solid transparent;

    border-bottom: 0;

    border-left: 0.3em solid transparent;

}



.navigation-horizontal .nav-link[data-toggle="collapse"][aria-expanded="false"]:after {

    transform: rotate(-90deg);

}



.navigation-horizontal .nav-link[data-toggle="collapse"]:after {

    transition: transform .35s ease, opacity .35s ease;

    opacity: .5;

}



.navigation-horizontal .navbar-nav {

    width: 100%;

}



.navigation-horizontal .navbar {

    position: relative;

    padding: 0px;

}



.navigation-horizontal .navbar-nav .nav-item {}



.navigation-horizontal .navbar-nav .nav-link {

   font-size: 13px;

    padding: 9px 30px 9px 20px;

    margin-bottom: 2px;

    color: #71789e;

    transition: 0.3s;

    margin: 6px 1px;

}



.navigation-horizontal .nav-link i {

    font-size: 14px;

    margin-right: 9px;

    text-align: center;

    vertical-align: middle;

    line-height: 16px;

}



.nav-divider {

    padding: 10px 14px;

    line-height: 30px;

    font-weight: 600;

    text-transform: uppercase;

    font-size: 12px;

}



.navigation-horizontal .submenu {

       background-color: #e2e2eb;

    margin-top: -6px;

    margin-right: 1px;

    margin-left: 1px;

}



.navigation-horizontal .submenu .nav .nav-item .nav-link {

    font-size: 12px;

    padding: 0px 12px;

    transition: 0.3s;

    line-height: 1;

}



.navigation-horizontal .navbar-nav .nav-link:focus,

.navigation-horizontal .navbar-nav .nav-link.active {

    background-color: #e2e2eb;

    color: #3d405c;

    border-radius: 2px;

}



.navigation-horizontal .navbar-nav .nav-link:focus,

.navigation-horizontal .navbar-nav .nav-link:hover {

    background-color: #e2e2eb;

    color: #3d405c;

    border-radius: 2px;

}



.navigation-horizontal .submenu .nav .nav-item .nav-link:hover {

    color: #3d405c;

    border-radius: 2px;

    background-color: transparent;

}

























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

Left Navigation Sidebar

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



.nav-left-sidebar {

    position: fixed;

    width: 32%;

    bottom: 0;

    top: 0;

    overflow: auto;

    background-color: #fff;

    -webkit-box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);

    box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);

    -webkit-transition: all 0.3s ease;

    background-color: #004382;

    background-image: url(../img/side-bar-dashboard.png);

    background-repeat: no-repeat;

    background-size: 84%;

}

/* .nav-left-sidebar:before {

    width: 100%;

    height: 100%;

    content: "";

    position: absolute;

    left: 0;

    top:0;

} */

.nav-left-sidebar .navbar-brand{

    position: relative;

    z-index: 11;

}

.nav-left-sidebar .nav-link[data-toggle="collapse"] {

    position: relative;

    display: flex;

    align-items: center;

}

 .sidebar-dark.nav-left-sidebar .submenu .nav-item .nav-link{

    color: #004382;

} 

.nav-left-sidebar .nav-link[data-toggle="collapse"]::after {

    display: inline-block;

    width: 0;

    height: 0;

    position: absolute;

    right: 20px;

    vertical-align: 0.255em;

    content: "";

    border-top: 0.3em solid;

    border-right: 0.3em solid transparent;

    border-bottom: 0;

    border-left: 0.3em solid transparent;

}

h2.pageheader-title{

    margin-top: -107px ;

    color: #fff;

    text-transform: uppercase;

    font-weight: normal;

}



.nav-left-sidebar .nav-link[data-toggle="collapse"][aria-expanded="false"]:after {

    transform: rotate(-90deg);

}



.nav-left-sidebar .nav-link[data-toggle="collapse"]:after {

    transition: transform .35s ease, opacity .35s ease;

    opacity: .5;

}



.nav-left-sidebar .navbar-nav {

    width: 100%;

}



.nav-left-sidebar .navbar {

    position: relative;

    padding: 14px;

}



.nav-left-sidebar .navbar-nav .nav-item {}



.nav-left-sidebar .navbar-nav .nav-link {

    font-size: 14px;

    padding: 12px;

    /* margin-bottom: 2px; */

    color: #71789e;

    transition: 0.3s;

}



.nav-left-sidebar .nav-link i {

     font-size: 14px;

    margin-right: 0;

    text-align: center;

    line-height: 16px;

    width: 30px;

    display: inline-block;

    vertical-align: top;

}

.nav-left-sidebar .nav-link i img {

    max-width: 17px;

}

.nav-divider {

    padding: 10px 14px;

    line-height: 30px;

    font-weight: 600;

    text-transform: uppercase;

    font-size: 12px;

}



.nav-left-sidebar .submenu {

    padding-left: 12px;

    padding-right: 12px;

    /* margin-top: 5px; */

    background: #efeff6;

}



.nav-left-sidebar .submenu .nav .nav-item .nav-link {

    font-size: 14px;

    padding: 6px 12px;

    transition: 0.3s;

}



.nav-left-sidebar .navbar-nav .nav-link:focus,

.nav-left-sidebar .navbar-nav .nav-link.active {

    background-color: #e2e2eb;

    color: #3d405c;

    border-radius: 2px;

}



.nav-left-sidebar .navbar-nav .nav-link:focus,

.nav-left-sidebar .navbar-nav .nav-link:hover {

    background-color: #e2e2eb;

    color: #3d405c;

    border-radius: 2px;

}



.nav-left-sidebar .submenu .nav .nav-item .nav-link:hover {

    color: #3d405c;

    border-radius: 2px;

    background-color: transparent;

}



.nav-left-sidebar .navbar-toggler {

    background-color: #fff;

}

.navbar-toggler {

    padding: .25rem 0.5rem;

    font-size: 1.25rem;

    line-height: 1;

    background-color: transparent;

    border: 1px solid transparent;

    border-radius: .25rem;

}

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

Leftsidebar - Primary

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



.sidebar-primary {

    background-color: #414da7;

}



.sidebar-primary .nav-divider {

    color: #ddddff;

}



.sidebar-primary.nav-left-sidebar .nav-link i {

    color: #8991d4;

}



.sidebar-primary.nav-left-sidebar .navbar-nav .nav-item {}



.sidebar-primary.nav-left-sidebar .navbar-nav .nav-link {

    color: #8991d4;

}



.sidebar-primary.nav-left-sidebar .navbar-nav .nav-link:focus,

.sidebar-primary.nav-left-sidebar .navbar-nav .nav-link:hover {

    color: #fff;

    background-color: #5761c2;

    border-radius: 2px;

}



.sidebar-primary.nav-left-sidebar .navbar-nav .nav-link:focus,

.sidebar-primary.nav-left-sidebar .navbar-nav .nav-link.active {

    background-color: #5761c2;

    color: #fff;

    border-radius: 2px;

}



.sidebar-primary.nav-left-sidebar .submenu .nav .nav-item .nav-link:hover {

    color: #fff;

    border-radius: 2px;

    background-color: transparent;

}





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

Leftsidebar - dark

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



.sidebar-dark {

    /* background-color: #0e0c28; */

    -webkit-box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);

    box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);

    -webkit-transition: all 0.3s ease;

}



.sidebar-dark .nav-divider {

    color: #000;

    font-size: 12px;

    letter-spacing: 1px;

}



 



.sidebar-dark.nav-left-sidebar .navbar-nav .nav-item {}



.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link {

    color: #000;

}



.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link:focus,

.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link:hover {

    color: #004280;

    background-color: #000;

    border-radius: 2px;

}



.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link:focus,

.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link.active {

 color: #004280;

    background-color: #000;

    border-radius: 2px;

}



.sidebar-dark.nav-left-sidebar .submenu .nav .nav-item .nav-link:hover {

    color: #004280;

    border-radius: 2px;

    background-color: #666;

}



.sidebar-dark.nav-left-sidebar .navbar-nav .nav-item .badge{

    position: absolute;

    right: 40px;

    display: none;

}



/*-----navigation dark ---*/





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

Sidebar Page Navigations

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



.sidebar-nav-fixed {

    position: sticky;

    top: 5rem;

}



.sidebar-nav-fixed ul {}



.sidebar-nav-fixed ul li {}



.sidebar-nav-fixed ul li a {

    font-size: 14px;

    color: #71728e;

    display: block;

    padding: 5px 15px;

    background: transparent;

    border-radius: 4px;

    line-height: 1.8;

}



.sidebar-nav-fixed ul li a:hover {

    color: #5969ff;

}



.sidebar-nav-fixed ul li a.active {

    display: block;

    color: #5969ff;

    background: #e0e0fd;

}





/*--- Bootstrap Dropdown ----*/



.dropdown-menu {

    background: #fff;

    font-size: 14px;

    color: #3d405c;

    border: 1px solid #e6e6f2;

}



.dropdown-item {

    display: block;

    width: 100%;

    padding: .25rem 1.5rem;

    clear: both;

    font-weight: 400;

    color: #3d405c;

    text-align: inherit;

    white-space: nowrap;

    background-color: transparent;

    border: 0;

}



.dropdown-item:hover {

    color: #5969ff;

    background: #efeff6;

}



.page-section {}



.dropdown-item.active,

.dropdown-item:active {

    color: #fff;

    text-decoration: none;

    background-color: #5969ff;

}





/* -------------------- 0.5.Container / Wrapper ----------------------- */





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

Container / Wrapper

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



.dashboard-main-wrapper {

    min-height: 100%;

    /* padding-top: 60px; */

    position: relative;

}



.dashboard-wrapper {

    position: relative;

    left: 0;

    margin-left: 32%;

    min-height: 870px !important;

}



.dashboard-content {

    padding: 30px 30px 60px 30px;

    min-height: 700px;

}





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

Splash Container / Wrapper

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



.splash-container {

    width: 100%;

    max-width: 375px;

    padding: 15px;

    margin: auto;

}



.splash-container .card-header {

    padding: 20px;

}



.splash-description {

    text-align: center;

    display: block;

    line-height: 20px;

    font-size: 1rem;

    margin-top: 5px;

    padding-bottom: 10px;

}



.splash-title {

    text-align: center;

    display: block;

    font-size: 14px;

    font-weight: 300;

}



.splash-container .card-footer-item {

    padding: 12px 28px;

}





/* -------------------- 0.6.Pageheader ----------------------- */





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

Pageheader

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



.page-header {

    margin-bottom: 30px;

}



.page-breadcrumb {}



.page-breadcrumb .breadcrumb {}



.page-breadcrumb .breadcrumb-item {}



.page-breadcrumb .breadcrumb-link {

    color: #a6a6b7;

}



.page-breadcrumb .breadcrumb-link:hover {

    color: #5969ff;

}



.page-breadcrumb .breadcrumb {

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    padding: 0px;

    margin-bottom: 0px;

    list-style: none;

    background-color: transparent;

    border-radius: 0px;

    border-top: 1px solid #e0e4ef;

    padding-top: 10px;

    font-size: 12px;

}



.page-breadcrumb .breadcrumb .breadcrumb-item+.breadcrumb-item::before {

    display: inline-block;

    padding-right: .5rem;

    color: #b1b1c0;

    content: "\f105";

    font-family: 'Font Awesome\ 5 Free';

    font-weight: 600;

}



.page-breadcrumb .breadcrumb-item.active {

    /* color: #71728e; */

    color: #1b70c5;

    text-transform: uppercase;

}



.pageheader-title {

    font-size: 24px;

    margin-bottom: 8px;

}



.pageheader-text {

    margin-bottom: 14px;

    display: none;

}





/* -------------------- 0.7.Footer ----------------------- */





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

 Footer

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



.footer {

    border-top: 1px solid rgba(152, 166, 173, .2);

    padding: 14px 30px 14px;

    color: #71748d;

    background-color: #fff;

    width: 100%;

    /*position: absolute; bottom: 0;*/

}



.footer-links {}



.footer .footer-links a {

    color: #71748d;

    margin-left: 1.5rem;

    -webkit-transition: all .4s;

    transition: all .4s;

}





/* ==========================================================================

  1. Dashboard Index-sales

   ========================================================================== */



.chart-widget-list {

    margin-top: 60px;

}



.chart-widget-list p {

    border-bottom: 1px solid #e6e6f2;

    margin-bottom: 8px;

    padding-bottom: 8px;

}



.sell-ratio {

    margin-bottom: 15px;

}



.sell-ratio .progress-bar {

    background-color: #25d5f2;

}





/* ==========================================================================

  2. Dashboard Index-Finance

   ========================================================================== */



.dashboard-finance {}



.dashboard-finance .ct-label {

    display: none;

}





/* ==========================================================================

  3. Dashboard Influencer

   ========================================================================== */



.dashboard-influence {}



.influencer-profile-data {}



.influencer-profile-data .user-avatar {

    margin-right: 40px;

}



.influencer-profile-data .user-avatar-info {

    display: block;

    margin-top: 14px;

}



.influencer-profile-data .user-avatar-name {

    float: left;

    padding-right: 20px;

}



.user-avatar-address {}



.influencer-profile-data .user-avatar-address {}



.influencer-profile-data .user-avatar-email {

    text-decoration: underline;

}



.influencer-profile-data .user-social-media {

    padding: 16px 99px;

    text-align: center;

    border-right: 1px solid #e6e6f2;

}



.influencer-profile-data .user-social-media:last-child {

    border-right: transparent;

}



.user-social-box {

    background-color: #f9f9fc;

    border-bottom-left-radius: .25rem;

    border-bottom-right-radius: .25rem;

}



.dashboard-influence .progress {

    width: 86%;

    background-color: #ededfa;

}



.campaign-table {}



.campaign-table .dropdown-toggle::after {

    display: none;

}



.campaign-card {

    padding-bottom: 25px;

    padding-top: 25px;

}



.campaign-img {

    margin-bottom: 25px;

}



.campaign-info {}





/* ==========================================================================

  3. Influencer Finder

   ========================================================================== */



.influence-finder {}



.influence-finder .user-social-media {

    padding: 16px 68px;

    text-align: center;

    border-right: 1px solid #e6e6f2;

}



.influence-finder .user-social-media:last-child {

    border-right: transparent;

}



.influence-finder .icon-circle {

    height: 40px;

    width: 40px;

    display: inline-block;

    padding: 9px;

    line-height: 1.7;

}



.search-btn {

    position: absolute;

    bottom: 20px;

    right: 20px;

}



.influence-finder button.btn {

    height: 47px;

    width: 110px;

    border-top-left-radius: 0px;

    border-bottom-left-radius: 0px;

}





/* ==========================================================================

 4. Influencer Profile

========================================================================== */



.influence-profile {}



.rating-star {

    font-size: 12px;

    padding-top: 8px;

    color: #ffa811;

}



.campaign-social-box {

    background-color: #f9f9fc;

    border-bottom-left-radius: .25rem;

    border-bottom-right-radius: .25rem;

}



.campaign-metrics {

    border-right: 1px solid #dee2e6;

    text-align: center;

    padding: 8px 79px;

}



.campaign-metrics:last-child {

    border-right: transparent;

}



.influence-profile-content.pills-regular .tab-content {

    background-color: transparent;

    padding: 0px;

    border: transparent;

    border-radius: 0px;

    border-top-left-radius: 0px;

}



.review-block {}



.review-text {}





/* ==========================================================================

  5. Dashboard Ecommerce

   ========================================================================== */



.dashboard-ecommerce {}





/* -------------- social sales -------------------*/



.social-sales {}



.social-sales-icon-circle {

    height: 40px;

    width: 40px;

    line-height: 1;

    text-align: center;

    border-radius: 100%;

    padding: 12px 13px;

    display: inline-block;

}



.social-sales-content {}



.social-sales-name {}



.social-sales-count {

    float: right;

    line-height: 2.9;

}





/* -------------- traffic sales -------------------*/



.traffic-sales {}



.traffic-sales-content {

    padding: 20px !important;

}



.traffic-sales-name {}



.traffic-sales-amount {

    float: right;

    color: #3d405c;

}





/* -------------- country sales -------------------*/



.country-sales {}



.country-sales-content {

    padding: 20px !important;

}









/* ==========================================================================

   Ecommerce Products

   ========================================================================== */



.product-thumbnail{ border:1px solid #e6e6f2; background-color: #fff; margin-bottom: 30px; }

.product-img{ text-align: center; padding: 35px 0px;  }

.product-img-head{position: relative;}

.ribbons{

    -webkit-clip-path: polygon(10% 25%, 10% 0, 35% 0%, 65% 0%, 90% 0, 90% 25%, 90% 50%, 91% 100%, 50% 73%, 10% 100%, 10% 50%);

clip-path: polygon(10% 25%, 10% 0, 35% 0%, 65% 0%, 90% 0, 90% 25%, 90% 50%, 91% 100%, 50% 73%, 10% 100%, 10% 50%);



    position: absolute;

    top: 0px;

    background-color: #59b3ff;

    padding: 31px 15px;

    text-align: center;

    left: 10px;  font-family: 'Circular Std Medium'; color: #fff;}



   .ribbons-text{transform: rotate(90deg);

    position: absolute;

    top: 11px;

    left: 10px;

    color: #fff;}

.product-wishlist-btn{height: 40px;

    width: 40px;

    border: 2px solid #dfdfec;

    border-radius: 100px;

    font-size: 18px;

    line-height: 2.3;

    color: #dfdfec;

    text-align: center;

    display: block;

    position: absolute;

    right: 15px;

    top: 15px;}

    .product-wishlist-btn:hover{border-color: #ff3367; color: #ff3367;transition: 0.3s ease;}

    .product-wishlist-btn.active{border-color: #ff3367; color: #ff3367;transition: 0.3s ease;}

.product-content{ border-top:1px solid #e6e6f2; padding: 23px;}

.product-content-head{ position: relative; margin-bottom: 25px; }

.product-title{font-size: 16px; margin-bottom: 5px;}

.product-rating{font-size: 12px;



    color: #ffa811;}

.product-price{ position: absolute; top: 0; right: 0; font-size: 16px; color: #3d405c;font-family: 'Circular Std Medium'; line-height: 1;}

.product-btn{}

.product-del{font-size: 14px; color: #71748d;}

.product-sidebar{ background-color: #fff; border:1px solid #e6e6f2;  }

.product-sidebar-widget{border-bottom: 1px solid #e6e6f2; padding: 10px 20px; margin-bottom: 10px;}

.product-sidebar-widget:last-child{border:0px;}

.product-sidebar-widget-title{font-size: 16px; margin-bottom: 10px;}



.custom-color-red.custom-radio .custom-control-input:checked~.custom-control-label::before {

    background-color: #a40000;

    border-color: #a40000;

}



.custom-color-blue.custom-radio .custom-control-input:checked~.custom-control-label::before{background-color: #0d4197; border-color: #0d4197}

.custom-color-yellow.custom-radio .custom-control-input:checked~.custom-control-label::before{background-color: #ffdc40; border-color: #ffdc40;}

.custom-color-black.custom-radio .custom-control-input:checked~.custom-control-label::before{background-color: #111111; border-color: #111111;}











.product-slider{background-color: #fff;  border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding: 110px;}

.product-carousel{}

.product-carousel .carousel-indicators {

    position: absolute;

    right: 0;

    bottom: -80px;

    left: 0;

    z-index: 15;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-pack: center;

    justify-content: center;

    padding-left: 0;

    margin-right: 15%;

    margin-left: 15%;

    list-style: none;

}



.product-carousel .carousel-indicators li {

  position: relative;

    -ms-flex: 0 1 auto;

    flex: 0 1 auto;

    width: 10px;

    height: 10px;

    margin-right: 3px;

    margin-left: 3px;

    text-indent: -999px;

    background-color: rgb(224, 224, 231);

    border-radius: 100%;

}

.product-carousel .carousel-indicators li.active{ background-color: #5969ff; }

.product-carousel .carousel-control-next, .carousel-control-prev {display: none;}





.product-details{ background-color: #fff; padding: 30px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; position: relative;}

.product-colors {padding-bottom: 10px; margin-bottom: 10px;}

.product-size{padding-bottom: 14px; margin-bottom: 10px; position: relative;}

.product-colors input[type=checkbox], input[type=radio] {

    box-sizing: border-box;

    padding: 0;

    display: none;

}

.product-description{}





.product-colors label {

    display: inline-block;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    transition: all .2s ease-in-out;

    animation-timing-function: ease-in-out;

    animation-iteration-count: infinite;

    animation-duration: 1.6s;

    animation-name: dot-anim;

}

.product-colors .radio:checked + label {

    animation-play-state: paused;

}

.product-colors label:before {

     content: "\f00c";

    position: absolute;

    font-family: 'Font Awesome\ 5 Free';

    font-weight: 900;

    padding: 0px;

    margin: 4px 8px;

    color: #fff;

    font-size:  14px;

}





.product-colors .radio:checked + label:after {

    background: transparent;

    transition: all .5s;

    transform: scale(1);

}

/**** BLUE Radio button code ****/

#radio-1 + label {

    left: -60vw;

    background: #0a3c93;

    animation-delay: 0s;

}

#radio-1 + label:before {

    transform: scale(0);

}

#radio-1:checked + label:before {

    transform: scale(1);

    transition: all .4s;

}





/**** Yellow Radio button code ****/

#radio-2 + label {

    left: -60vw;

    background: #ffdc40;

    animation-delay: 0s;

}

#radio-2 + label:before {

    transform: scale(0);

}

#radio-2:checked + label:before {

    transform: scale(1);

    transition: all .4s;

}



/**** Red Radio button code ****/

#radio-3 + label {

    left: -60vw;

    background: #a00000;

    animation-delay: 0s;

}

#radio-3 + label:before {

    transform: scale(0);

}

#radio-3:checked + label:before {

    transform: scale(1);

    transition: all .4s;

}







.product-qty{position: absolute;

    right: 0;

    top: 0px;}



.quantity {

  position: relative;

}



.product-qty input[type=number]::-webkit-inner-spin-button,

.product-qty input[type=number]::-webkit-outer-spin-button

{

  -webkit-appearance: none;

  margin: 0;

}



.product-qty input[type=number]

{

  -moz-appearance: textfield;

}



.quantity input {

  width: 65px;

  height: 41px;

  line-height: 1.65;

  float: left;

  display: block;

  padding: 0;

  margin: 0;

  padding-left: 20px;

  border: 1px solid #eee;

}



.quantity input:focus {

  outline: 0;

}



.quantity-nav {

  float: left;

  position: relative;

  height: 39px;

}



.quantity-button {

  position: relative;

  cursor: pointer;

  border-left: 1px solid #e6e6f2;

  width: 20px;

  text-align: center;

  color: #333;

  font-size: 13px;

  font-family: 'Circular Std Medium';



  line-height: 1.6;

  -webkit-transform: translateX(-100%);

  transform: translateX(-100%);

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  -o-user-select: none;

  user-select: none;

  background-color: #efeff6;

}



.quantity-button.quantity-up {

  position: absolute;

  height: 50%;

  top: 0;

  border-bottom: 1px solid #e6e6f2;

}



.quantity-button.quantity-down {

  position: absolute;

  bottom: -1px;

  height: 50%;

}



























/* ==========================================================================

  2. UI Elements

  ========================================================================== */





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

2.1  Alerts

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





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

2.2  Buttons

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



.btn {

    font-size: 14px;

    padding: 9px 16px;

    border-radius: 2px;

}



.btn-wishlist {

    background-color: #efeff6;

    border-radius: 100px;

    height: 30px;

    width: 30px;

    padding: 5px 3px;

    display: inline-block;

    font-size: 14px;

    color: #3d405c;

    text-align: center;

    line-height: 1.7;

}



.btn-wishlist:hover {

    background-color: #ff407b;

    color: #fff;

}





/*--- btn default --*/



.btn-brand {

    color: #2e2f39;

    background-color: #ffc750;

    border-color: #ffc750;

}



.btn-brand:hover {

    color: #2e2f39;

    background-color: #efb63e;

    border-color: #efb63e;

}



.btn-brand.focus,

.btn-brand:focus {

    color: #2e2f39;

    background-color: #efb63e;

    border-color: #efb63e;

    box-shadow: none;

}





/*--- btn primary --*/



.btn-primary {

    color: #fff;

    background-color: #5969ff;

    border-color: #5969ff;

}



.btn-primary:hover {

    color: #fff;

    background-color: #4656e9;

    border-color: #4656e9;

}



.btn-primary.focus,

.btn-primary:focus {

    color: #fff;

    background-color: #4656e9;

    border-color: #4656e9;

    box-shadow: 0 0 0 1px rgb(37, 52, 158);

}



.btn-primary:not(:disabled):not(.disabled).active:focus,

.btn-primary:not(:disabled):not(.disabled):active:focus,

.show>.btn-primary.dropdown-toggle:focus {

    box-shadow: 0 0 0 0.2rem rgb(37, 52, 158);

}



.btn-primary:not(:disabled):not(.disabled).active,

.btn-primary:not(:disabled):not(.disabled):active,

.show>.btn-primary.dropdown-toggle {

    color: #fff;

    background-color: #4656e9;

    border-color: #4656e9;

}





/*--- btn secondary --*/



.btn-secondary {

    color: #fff;

    background-color: #ff407b;

    border-color: #ff407b;

}



.btn-secondary:hover {

    color: #fff;

    background-color: #f0346e;

    border-color: #f0346e;

}



.btn-secondary.focus,

.btn-secondary:focus {

    color: #fff;

    background-color: #f0346e;

    border-color: #f0346e;

    box-shadow: 0 0 0 1px rgb(222, 17, 80);

}



.btn-secondary:not(:disabled):not(.disabled).active,

.btn-secondary:not(:disabled):not(.disabled):active,

.show>.btn-secondary.dropdown-toggle {

    color: #fff;

    background-color: #f0346e;

    border-color: #f0346e;

}





/*--- btn success --*/



.btn-success {

    color: #fff;

    background-color: #2ec551;

    border-color: #2ec551;

}



.btn-success:hover {

    color: #fff;

    background-color: #21ae41;

    border-color: #21ae41;

}



.btn-success.focus,

.btn-success:focus {

    color: #fff;

    background-color: #21ae41;

    border-color: #21ae41;

    box-shadow: 0 0 0 1px rgb(18, 158, 50);

}



.btn-success:not(:disabled):not(.disabled).active,

.btn-success:not(:disabled):not(.disabled):active,

.show>.btn-success.dropdown-toggle {

    color: #fff;

    background-color: #21ae41;

    border-color: #21ae41;

}





/*--- btn danger --*/



.btn-danger {

    color: #fff;

    background-color: #ef172c;

    border-color: #ef172c;

}



.btn-danger:hover {

    color: #fff;

    background-color: #da0419;

    border-color: #da0419;

}



.btn-danger.focus,

.btn-danger:focus {

    color: #fff;

    background-color: #da0419;

    border-color: #da0419;

    box-shadow: 0 0 0 1px rgb(218, 4, 25);

}



.btn-danger:not(:disabled):not(.disabled).active,

.btn-danger:not(:disabled):not(.disabled):active,

.show>.btn-danger.dropdown-toggle {

    color: #fff;

    background-color: #da0419;

    border-color: #da0419;

}





/*--- btn warning --*/



.btn-warning {

    color: #2e2f39;

    background-color: #ffc108;

    border-color: #ffc108;

}



.btn-warning:hover {

    color: #2e2f39;

    background-color: #f3b600;

    border-color: #f3b600;

}



.btn-warning.focus,

.btn-warning:focus {

    color: #2e2f39;

    background-color: #f3b600;

    border-color: #f3b600;

    box-shadow: 0 0 0 1px rgb(238, 182, 0);

}



.btn-warning:not(:disabled):not(.disabled).active,

.btn-warning:not(:disabled):not(.disabled):active,

.show>.btn-warning.dropdown-toggle {

    color: #2e2f39;

    background-color: #f3b600;

    border-color: #f3b600;

}





/*--- btn info --*/



.btn-info {

    color: #fff;

    background-color: #25d5f2;

    border-color: #25d5f2;

}



.btn-info:hover {

    color: #fff;

    background-color: #17c0dc;

    border-color: #17c0dc;

}



.btn-info.focus,

.btn-info:focus {

    color: #fff;

    background-color: #17c0dc;

    border-color: #17c0dc;

    box-shadow: 0 0 0 1px rgb(238, 184, 22);

}



.btn-info:not(:disabled):not(.disabled).active,

.btn-info:not(:disabled):not(.disabled):active,

.show>.btn-info.dropdown-toggle {

    color: #fff;

    background-color: #17c0dc;

    border-color: #17c0dc;

}





/*--- btn light --*/



.btn-light {

    color: #71738d;

    background-color: #f0f0f8;

    border-color: #f0f0f8;

}



.btn-light:hover {

    color: #2e2f39;

    background-color: #d7d7df;

    border-color: #d7d7df;

}



.btn-light.focus,

.btn-light:focus {

    color: #2e2f39;

    background-color: #d7d7df;

    border-color: #d7d7df;

    box-shadow: 0 0 0 1px rgb(215, 215, 223);

}





/*--- btn dark --*/



.btn-dark {

    color: #fff;

    background-color: #2e2f39;

    border-color: #2e2f39;

}



.btn-dark:hover {

    color: #2e2f39;

    background-color: #d7d7df;

    border-color: #d7d7df;

}



.btn-dark.focus,

.btn-dark:focus {

    color: #fff;

    background-color: #d7d7df;

    border-color: #d7d7df;

    box-shadow: 0 0 0 1px rgb(46, 47, 57);

}





/*--- btn outline brand --*/



.btn-outline-brand {

    color: #2e2f39;

    background-color: transparent;

    border-color: #ffc750;

}



.btn-outline-brand:hover {

    color: #2e2f39;

    background-color: #ffc750;

    border-color: #ffc750;

}



.btn-outline-brand.focus,

.btn-outline-brand:focus {

    color: #2e2f39;

    background-color: transparent;

    border-color: #ffc750;

    box-shadow: 0 0 0 1px rgb(255, 195, 89);

}





/*--- btn outline primary --*/



.btn-outline-primary {

    color: #5969ff;

    background-color: transparent;

    border-color: #5969ff;

}



.btn-outline-primary:hover {

    color: #fff;

    background-color: #5969ff;

    border-color: #5969ff;

}



.btn-outline-primary.focus,

.btn-outline-primary:focus {

    color: #fff;

    background-color: #5969ff;

    border-color: #5969ff;

    box-shadow: 0 0 0 1px rgb(65, 77, 167);

}





/*--- btn outline secondary --*/



.btn-outline-secondary {

    color: #ff407b;

    background-color: transparent;

    border-color: #ff407b;

}



.btn-outline-secondary:hover {

    color: #fff;

    background-color: #ff407b;

    border-color: #ff407b;

}



.btn-outline-secondary.focus,

.btn-outline-secondary:focus {

    color: #fff;

    background-color: #ff407b;

    border-color: #ff407b;

    box-shadow: 0 0 0 1px rgb(227, 45, 201);

}



.btn-outline-secondary:not(:disabled):not(.disabled).active,

.btn-outline-secondary:not(:disabled):not(.disabled):active,

.show>.btn-outline-secondary.dropdown-toggle {

    color: #fff;

    background-color: #ff407b;

    border-color: #ff407b;

}





/*--- btn outline success --*/



.btn-outline-success {

    color: #2ec551;

    background-color: transparent;

    border-color: #2ec551;

}



.btn-outline-success:hover {

    color: #fff;

    background-color: #2ec551;

    border-color: #2ec551;

}



.btn-outline-success.focus,

.btn-outline-success:focus {

    color: #fff;

    background-color: #2ec551;

    border-color: #2ec551;

    box-shadow: 0 0 0 1px rgb(40, 167, 69);

}





/*--- btn outline danger --*/



.btn-outline-danger {

    color: #ef172c;

    background-color: transparent;

    border-color: #ef172c;

}



.btn-outline-danger:hover {

    color: #fff;

    background-color: #ef172c;

    border-color: #ef172c;

}



.btn-outline-danger.focus,

.btn-outline-danger:focus {

    color: #fff;

    background-color: #ef172c;

    border-color: #ef172c;

    box-shadow: 0 0 0 1px rgb(239, 23, 44);

}





/*--- btn outline warning --*/



.btn-outline-warning {

    color: #2e2f39;

    background-color: transparent;

    border-color: #ffc108;

}



.btn-outline-warning:hover {

    color: #2e2f39;

    background-color: #ffc108;

    border-color: #ffc108;

}



.btn-outline-warning.focus,

.btn-outline-warning:focus {

    color: #2e2f39;

    background-color: #ffc108;

    border-color: #ffc108;

    box-shadow: 0 0 0 1px rgb(255, 193, 8);

}





/*--- btn outline info --*/



.btn-outline-info {

    color: #25d5f2;

    background-color: transparent;

    border-color: #25d5f2;

}



.btn-outline-info:hover {

    color: #fff;

    background-color: #25d5f2;

    border-color: #25d5f2;

}



.btn-outline-info.focus,

.btn-outline-info:focus {

    color: #fff;

    background-color: #25d5f2;

    border-color: #0998b0;

    box-shadow: 0 0 0 1px rgb(238, 184, 22);

}





/*--- btn outline light --*/



.btn-outline-light {

    color: #7171a6;

    background-color: transparent;

    border-color: #e6e6f2;

}



.btn-outline-light:hover {

    color: #71748d;

    background-color: #f0f0f8;

    border-color: #cacae0;

}



.btn-outline-light.focus,

.btn-outline-light:focus {

    color: #71748d;

    background-color: #f0f0f8;

    border-color: #cacae0;

    box-shadow: 0 0 0 1px rgb(235, 235, 237);

}





/*--- btn outline-dark --*/



.btn-outline-dark {

    color: #2e2f39;

    background-color: transparent;

    border-color: #2e2f39;

}



.btn-outline-dark:hover {

    color: #fff;

    background-color: #2e2f39;

    border-color: #2e2f39;

}



.btn-outline-dark.focus,

.btn-outline-dark:focus {

    color: #fff;

    background-color: #2e2f39;

    border-color: #2e2f39;

    box-shadow: 0 0 0 1px rgb(46, 47, 57);

}





/*--- btn size --*/



.btn-xs {

    padding: 4px 10px;

    font-size: 12px;

}

	  a.btn {

    margin: 5px;

}

.btn-sm {

    padding: 5px 12px;

    font-size: 14px;

}



.btn-lg {

    padding: 11px 20px;

    font-size: 15px;

}





/*--- btn social --*/



.btn-facebook {

    color: #fff;

    background-color: #3c73df;

    border-color: #3c73df;

}



.btn-google-plus {

    color: #fff;

    background-color: #eb5e4c;

    border-color: #eb5e4c;

}



.btn-twitter {

    color: #fff;

    background-color: #2caeff;

    border-color: #2caeff;

}



.btn-instagram {

    color: #fff;

    background-color: #9361fa;

    border-color: #9361fa;

}



.btn-pinterest {

    color: #fff;

    background-color: #c8232c;

    border-color: #c8232c;

}









/*--- cropper document btn --*/



.btn-rounded {

    border-radius: 100px;

}





/*--- cropper document btn --*/



.docs-buttons .btn,

.docs-data .input-group {

    margin-bottom: 5px;

}





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

btn-link

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



.btn-link {

    color: #5969ff;

}



.btn-link:hover {

    text-decoration: none;

}



.btn-primary-link {

    color: #5969ff !important;

}



.btn-brand-link {

    color: #ffc750 !important;

}



.btn-secondary-link {

    color: #ff407b !important;

}





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

2.3  Cards

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



.card {

    margin-bottom: 30px;

    border: none;

    -webkit-box-shadow: 0px 1px 2px 1px rgba(154, 154, 204, 0.22);

    -moz-box-shadow: 0px 1px 2px 1px rgba(154, 154, 204, 0.22);

    box-shadow: 0px 1px 2px 1px rgba(154, 154, 204, 0.22);

}



.card-header {

    background-color: #fff;

    border-bottom: 1px solid #e6e6f2;

}



.card-title {}



.card-subtitle {

    font-size: 14px;

}



.card-body {}



.card-text {}



.card-footer {

    border-top: 1px solid #e6e6f2;

    background: #f6f6ff;

}



.card-link {}



.toolbar {

    font-size: 18px;

}



.card-header-title {

    margin: 0;

    line-height: 2;

}



.card-toolbar-tabs {}



.card-toolbar-tabs .nav.nav-pills {}



.card-toolbar-tabs .nav.nav-pills .nav-item {}



.card-toolbar-tabs .nav.nav-pills .nav-item .nav-link {

    font-size: 14px;

    padding: 6px 10px;

}



.card-toolbar-tabs .nav-pills .nav-link.active,

.nav-pills .show>.nav-link {

    color: #5969ff;

    background-color: transparent;

}





/*------------------------- Card Varience --------------------------*/



.card-figure {

    position: relative;

    padding: 10px;

    border-radius: 2px;

}



.card-figure .figure {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    margin-bottom: 0;

}



.card-figure .figure-caption {

    display: block;

    margin-top: 10px;

    font-size: .875rem;

    color: inherit;

}



.figure-title {

    margin: 0 0 .125rem;

    text-transform: capitalize;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.card-figure.has-hoverable {

    -webkit-transition: -webkit-transform .2s, -webkit-box-shadow .2s;

    transition: -webkit-transform .2s, -webkit-box-shadow .2s;

    transition: transform .2s, box-shadow .2s;

    transition: transform .2s, box-shadow .2s, -webkit-transform .2s, -webkit-box-shadow .2s;

}



.card-figure.has-hoverable:focus,

.card-figure.has-hoverable:hover {

    -webkit-transform: translate3d(0, -.25rem, 0);

    transform: translate3d(0, -.25rem, 0);

    -webkit-box-shadow: 0 5px 15px 0 rgba(61, 70, 79, .15);

    box-shadow: 0 5px 15px 0 rgba(61, 70, 79, .15);

}



.figure-img {

    position: relative;

    margin-bottom: 0;

    overflow: hidden;

}



.figure-img .img-link {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-color: hsla(0, 0%, 100%, .96);

    opacity: 0;

    z-index: 2;

    -webkit-transition: opacity .2s ease;

    transition: opacity .2s ease;

}



.card-figure:hover .img-link {

    opacity: 1;

}



.figure-img .img-link .tile {

    position: absolute;

    top: 50%;

    left: 50%;

    margin-top: -1rem;

    margin-left: -1rem;

}



.tile.bg-danger {

    color: #fff;

}



.tile-circle {

    border-radius: 4rem;

}



.figure-action {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    display: block;

    opacity: 0;

    -webkit-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);

    -webkit-transition: all .3s ease;

    transition: all .3s ease;

}



.card-figure:hover .figure-action {

    opacity: 1;

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    z-index: 2;

}



.figure-tools {

    position: absolute;

    top: 0;

    right: 0;

    left: 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: start;

    -ms-flex-align: start;

    align-items: flex-start;

    padding: .5rem;

    opacity: 0;

    z-index: 2;

    -webkit-transition: opacity .3s ease;

    transition: opacity .3s ease;

}



.card-figure:hover .figure-tools {

    opacity: 1;

}



.figure-description {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    padding: 2.25rem .5rem;

    background-color: hsla(0, 0%, 100%, .96);

    opacity: 0;

    -webkit-transition: all .3s ease;

    transition: all .3s ease;

    z-index: 1;

}



.card-figure:hover .figure-description {

    opacity: 1;

}



.figure-attachment {

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    min-height: 200px;

    background-color: #f5f5f5;

    overflow: hidden;

}



.btn-reset {

    padding: 0 2px;

    font-size: inherit;

    line-height: inherit;

    color: inherit;

    background-color: transparent;

    border: 0;

    cursor: pointer;

}





/*------------------------- Card Navigation --------------------------*/



.card-header-tabs {}



.card-header-pills {}



.pills-regular .card-header-pills.nav.nav-pills .nav-item .nav-link.active {

    background-color: #5969ff;

    color: #fff;

}





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

2.4  General

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





/*---------Tooltips----------*/





/*--------- Popovers ----------------*/



.popover {

    border: 1px solid rgb(230, 230, 242);

}



.bs-popover-auto[x-placement^=right] .arrow::before,

.bs-popover-right .arrow::before {

    left: 0;

    border-right-color: rgb(230, 230, 242);

}



.popover-header {

    padding: .5rem .75rem;

    margin-bottom: 0;

    font-size: 1rem;

    color: inherit;

    background-color: #f7f7fd;

    border-bottom: 1px solid #efeff6;

    border-top-left-radius: calc(.3rem - 1px);

    border-top-right-radius: calc(.3rem - 1px);

}





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

2.5  Modals

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



.bd-example-row .row>.col,

.bd-example-row .row>[class^=col-] {

    padding-top: .75rem;

    padding-bottom: .75rem;

    background-color: rgba(86, 61, 124, .15);

    border: 1px solid rgba(86, 61, 124, .2);

}





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

2.6  Notification

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





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

2.7  Icon

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



.icon-circle {

    border-radius: 100%;

}



.icon-circle-small {

    line-height: 1;

    padding: 4px 2px;

    text-align: center;

    font-size: 12px;

    display: inline-block;

    border-radius: 100%;

}



.icon-circle-medium {

    line-height: 1;

    padding: 22px 2px;

    text-align: center;

    font-size: 12px;

    display: inline-block;

    border-radius: 100%;

}



.icon-box {}



.icon-box-xxl {}



.icon-box-xl {}



.icon-box-lg {

    height: 68px;

    width: 68px;

}



.icon-box-md {

    height: 32px;

    width: 32px;

}



.icon-box-sm {}



.icon-box-xs {

    height: 20px;

    width: 20px;

}





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

2.8  Tabs

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



.tab-regular {}



.tab-regular .nav.nav-tabs {

    border-bottom: transparent;

}



.tab-regular .nav.nav-tabs .nav-item {}



.tab-regular .nav.nav-tabs .nav-link {

    display: block;

    padding: 17px 49px;

    color: #71748d;

    background-color: #dddde8;

    margin-right: 5px;

    border-color: #dddde8;

}



.tab-regular .nav-tabs .nav-link:focus,

.nav-tabs .nav-link:hover {}



.tab-regular .nav-tabs .nav-link.active {

    background-color: #fff;

    border-color: #e6e6f2 #e6e6f2 #fff;

    color: #5969ff;

}



.tab-regular .tab-content {

    background-color: #fff;

    padding: 30px;

    border: 1px solid #e6e6f2;

    border-radius: 4px;

    border-top-left-radius: 0px

}





/*----- Tabs Vertical CSS ----*/



.tab-vertical {}



.tab-vertical .nav.nav-tabs {

    float: left;

    display: block;

    margin-right: 0px;

    border-bottom: 0;

}



.tab-vertical .nav.nav-tabs .nav-item {

    margin-bottom: 6px;

}



.tab-vertical .nav-tabs .nav-link {

    border: 1px solid transparent;

    border-top-left-radius: .25rem;

    border-top-right-radius: .25rem;

    background: #fff;

    padding: 17px 49px;

    color: #71748d;

    background-color: #dddde8;

    -webkit-border-radius: 4px 0px 0px 4px;

    -moz-border-radius: 4px 0px 0px 4px;

    border-radius: 4px 0px 0px 4px;

}



.tab-vertical .nav-tabs .nav-link.active {

    color: #5969ff;

    background-color: #fff !important;

    border-color: transparent !important;

}



.tab-vertical .nav-tabs .nav-link {

    border: 1px solid transparent;

    border-top-left-radius: 4px !important;

    border-top-right-radius: 0px !important;

}



.tab-vertical .tab-content {

    overflow: auto;

    -webkit-border-radius: 0px 4px 4px 4px;

    -moz-border-radius: 0px 4px 4px 4px;

    border-radius: 0px 4px 4px 4px;

    background: #fff;

    padding: 30px;

}





/*----- Tabs Outline CSS ----*/



.tab-outline {}



.tab-outline .nav.nav-tabs {

    border-bottom: transparent;

}



.tab-outline .nav.nav-tabs .nav-item .nav-link {

    display: block;

    padding: 17px 49px;

    color: #71748d;

    background-color: #e9e9f2;

    border-color: #c4c4cf #c4c4cf #c4c4cf;

    margin-right: 3px;

}



.tab-outline .nav.nav-tabs .nav-item {}



.tab-outline .nav-tabs .nav-link.active {

    color: #5969ff !important;

    background-color: transparent !important;

    border-color: #c4c4cf #c4c4cf #efeff6 !important;

}



.tab-outline .nav-tabs .nav-link:focus,

.nav-tabs .nav-link:hover {

    border-color: transparent;

    color: #5969ff !important;

}



.tab-outline .tab-content {

    padding: 30px;

    border: 1px solid #c4c4cf;

    border-radius: 4px;

    border-top-left-radius: 0px;

}





/*----- Tabs Vertical Outline CSS ----*/



.tab-vertical-outline {}



.tab-vertical-outline .nav.nav-tabs {

    float: left;

    display: block;

    margin-right: 0px;

    border-bottom: 0;

}



.tab-vertical-outline .nav.nav-tabs .nav-item {

    margin-bottom: 6px;

}



.tab-vertical-outline .nav-tabs .nav-link {

    border: 1px solid transparent;

    border-top-left-radius: .25rem;

    border-top-right-radius: .25rem;

    background: #fff;

    padding: 17px 49px;

    color: #71748d;

    background-color: #e9e9f2;

    -webkit-border-radius: 4px 0px 0px 4px;

    -moz-border-radius: 4px 0px 0px 4px;

    border-radius: 4px 0px 0px 4px;

    border: 1px solid #c4c4cf !important;

}



.tab-vertical-outline .nav-tabs .nav-link.active {

    color: #5969ff;

    border: 1px solid #c4c4cf !important;

    background: transparent;

    border-right: 1px solid #efeff6 !important;

}



.tab-vertical-outline .nav-tabs .nav-link {

    border: 1px solid transparent;

    border-top-left-radius: 4px !important;

    border-top-right-radius: 0px !important;

}



.tab-vertical-outline .tab-content {

    overflow: auto;

    -webkit-border-radius: 0px 4px 4px 4px;

    -moz-border-radius: 0px 4px 4px 4px;

    border-radius: 0px 4px 4px 4px;

    background: transparent;

    padding: 30px;

    border: 1px solid #c4c4cf;

    left: -1px;

    position: relative;

    z-index: -1;

}





/*--- Simple Card Tabs ----*/



.simple-card {

    background-color: #fff;

    border-radius: 4px;

    border: 1px solid #e9e9f2;

}



.simple-card .nav.nav-tabs {

    border-bottom: 1px solid #e6e6f2;

}



.simple-card .nav.nav-tabs .nav-item {}



.simple-card .nav.nav-tabs .nav-item .nav-link {

    padding: 17px 49px;

    color: #71748d;

    background: #f8f8fb;

    border-color: #e9e9f2 #e9e9f2 #e9e9f2;

    margin-right: -1px;

    border-radius: 0px;

    border-top: transparent;

}



.simple-card .nav-tabs .nav-link.active {

    color: #5969ff !important;

    background-color: transparent !important;

    border-color: #e9e9f2 #e9e9f2 #fff !important;

}



.simple-card .tab-content {

    padding: 30px;

}





/*--- Simple Card Outline Tabs ----*/



.simple-outline-card {

    border-radius: 4px;

    border: 1px solid #c4c4cf;

}



.simple-outline-card .nav.nav-tabs {

    border-bottom: 1px solid #c4c4cf;

}



.simple-outline-card .nav.nav-tabs .nav-item {}



.simple-outline-card .nav.nav-tabs .nav-item .nav-link {

    padding: 17px 49px;

    color: #71748d;

    background: #e9e9f2;

    border-color: #c4c4cf #c4c4cf #c4c4cf;

    margin-right: -1px;

    border-radius: 0px;

    border-top: transparent;

}



.simple-outline-card .nav-tabs .nav-link.active {

    color: #5969ff !important;

    background-color: transparent !important;

    border-color: #c4c4cf #c4c4cf #efeff6 !important;

}



.simple-outline-card .tab-content {

    padding: 30px;

}





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

Pills Regular

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



.pills-regular {}



.pills-regular .nav.nav-pills {}



.pills-regular .nav.nav-pills .nav-item {}



.pills-regular .nav.nav-pills .nav-item .nav-link {

    background-color: #dddde8;

    padding: 14px 26px;

    margin-right: 3px;

    color: #71748d;

    font-size: 16px;

    margin-bottom: 4px;

}



.pills-regular .nav.nav-pills .nav-item .nav-link.active {

    background-color: #fff;

    color: #5969ff;

}



.pills-regular .tab-content {

    background-color: #fff;

    padding: 30px;

    border-radius: 4px;

}





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

Pills Outline

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



.pills-outline {}



.pills-outline .nav.nav-pills {}



.pills-outline .nav.nav-pills .nav-item {}



.pills-outline .nav.nav-pills .nav-item .nav-link {

    background-color: transparent;

    padding: 16px 52px;

    margin-right: 3px;

    color: #71748d;

    border: 1px solid #c4c4cf;

}



.pills-outline .nav.nav-pills .nav-item .nav-link.active {

    background-color: transparent;

    color: #5969ff;

}



.pills-outline .tab-content {

    background-color: transparent;

    padding: 30px;

    border-radius: 4px;

    border: 1px solid #c4c4cf;

}





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

Pills vertical

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



.pills-vertical {}



.pills-vertical .nav.nav-pills {}



.pills-vertical .nav.nav-pills .nav-link {

    background-color: #dddde8;

    padding: 16px 52px;

    margin-bottom: 4px;

    color: #71748d;

}



.pills-vertical .nav.nav-pills .nav-link.active {

    background-color: #fff;

    color: #5969ff;

}



.pills-vertical .tab-content {

    background-color: #fff;

    padding: 30px;

    border-radius: 4px;

}





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

2.9  Accordions

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



.accrodion-regular {}



.accrodion-regular .card {

    margin-bottom: 5px;

}



.accrodion-regular .card-body {

    margin-top: -1px;

}



.accrodion-regular .card .card-header {

    font-size: 16px;

    padding: 10px;

    background-color: transparent;

}



.accrodion-regular .card .card-header:first-child {

    border-radius: calc(4px - 1px) calc(4px - 1px) 0 0;

}



.accrodion-regular .card .card-header .btn-link {

    color: #3d405c;

    text-decoration: none;

}



.accrodion-regular .card .card-header .btn-link:hover {

    color: #f12357;

    text-decoration: none;

}



.accrodion-outline {}



.accrodion-outline .card {

    margin-bottom: 5px;

    background-color: transparent;

    border-color: #d9d9e3;

    box-shadow: none;

}



.accrodion-outline .card-body {

    border: 1px solid #d9d9e3;

    margin-top: -1px;

}



.accrodion-outline .card .card-header {

    font-size: 16px;

    padding: 10px;

    border: 1px solid #d9d9e3;

    background-color: transparent;

}



.accrodion-outline .card .card-header:first-child {

    border-radius: calc(4px - 1px) calc(4px - 1px) 0 0;

}



.accrodion-outline .card .card-header .btn-link {

    color: #3d405c;

    text-decoration: none;

}



.accrodion-outline .card .card-header .btn-link:hover {

    color: #f12357;

    text-decoration: none;

}





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

2.10  Typography

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





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

2.11  Listgroup

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



.list-group-item {

    position: relative;

    display: block;

    padding: 16px 20px;

    margin-bottom: -1px;

    border: 1px solid #e6e6f2;

}





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

2.12  Multiselect

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





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

2.13 Badge

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



.badge {

    display: inline-block;

    padding: 3px 7px;

    font-size: 14px;

    font-weight: 400;

    line-height: 1;

    text-align: center;

    white-space: nowrap;

    vertical-align: baseline;

    border-radius: .25rem;

}



.badge-primary {

    background-color: #5969ff;

}



.badge-primary[href]:focus,

.badge-primary[href]:hover {

    color: #fff;

    text-decoration: none;

    background-color: #4656e9;

}



.badge-brand {

    background-color: #ffb739;

    color: #2e2f39;

}



.badge-brand[href]:focus,

.badge-brand[href]:hover {

    color: #2e2f39;

    background-color: #efb63e;

    text-decoration: none;

}



.badge-secondary {

    background-color: #ff407b;

}



.badge-secondary[href]:focus,

.badge-secondary[href]:hover {

    color: #fff;

    background-color: #ff407b;

    text-decoration: none;

}



.badge-success {

    background-color: #21ae41;

}



.badge-success[href]:focus,

.badge-success[href]:hover {

    color: #fff;

    background-color: #21ae41;

    text-decoration: none;

}



.badge-danger {

    background-color: #da0419;

}



.badge-danger[href]:focus,

.badge-danger[href]:hover {

    color: #fff;

    background-color: #ef172c;

    text-decoration: none;

}



.badge-warning {

    background-color: #f3b600;

    color: #2e2f39;

}



.badge-warning[href]:focus,

.badge-warning[href]:hover {

    color: #2e2f39;

    background-color: #f3b600;

    text-decoration: none;

}



.badge-info {

    background-color: #0998b0;

}



.badge-info[href]:focus,

.badge-info[href]:hover {

    color: #fff;

    background-color: #17c0dc;

    text-decoration: none;

}



.badge-light {

    background-color: #efeff6;

    color: #757691;

}



.badge-light[href]:focus,

.badge-light[href]:hover {

    color: #2e2f39;

    background-color: #d7d7df;

    text-decoration: none;

}



.badge-dark {

    background-color: #1f202b;

}



.badge-light[href]:focus,

.badge-light[href]:hover {

    color: #2e2f39;

    background-color: #d7d7df;

    text-decoration: none;

}



.dashboard-badges {}



.badge-dot {

    border-radius: 100%;

    padding: 4px;

    display: inline-block;

    margin-right: 3px;

}



.label {

    padding: 3px 10px;

    line-height: 13px;

    color: #fff;

    font-weight: 400;

    border-radius: 2px;

    font-size: 75%;

}



.label-rounded {

    border-radius: 60px;

}



.label-primary {

    background-color: #5969ff;

}



.label-success {

    background-color: #2ec551;

}



.label-danger {

    background-color: #ef172c;

}





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

2.14 Pagination

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



.page-link {

    position: relative;

    display: block;

    padding: .5rem .75rem;

    margin-left: 0px;

    margin-right: 5px;

    line-height: 1.25;

    color: #71748d;

    background-color: #fff;

    border: 1px solid #e6e6f2;

    border-radius: 3px;

    line-height: 1;

}



.page-link:hover {

    z-index: 2;

    color: #fff;

    text-decoration: none;

    background-color: #5969ff;

    border-color: #5969ff;

}



.page-item.active .page-link {

    z-index: 1;

    color: #fff;

    background-color: #5969ff;

    border-color: #5969ff;

}





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

2.15 Spinner

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



.spinner-xxl {

    width: 150px;

    height: 150px;

}



.spinner-xl {

    width: 120px;

    height: 120px;

}



.spinner-lg {

    width: 100px;

    height: 100px;

}



.spinner-md {

    width: 80px;

    height: 80px;

}



.spinner-sm {

    width: 60px;

    height: 60px;

}



.spinner-xs {

    width: 30px;

    height: 30px;

}



.dashboard-spinner {

    margin: 0px 8px;

    border-radius: 50%;

    background-color: transparent;

    border: 6px solid transparent;

    border-top: 6px solid #5969ff;

    border-left: 6px solid #5969ff;

    -webkit-animation: 1s spin linear infinite;

    animation: 1s spin linear infinite;

    display: inline-block;

}



.spinner-primary {

    border-top-color: #5969ff;

    border-left-color: #5969ff;

}



.spinner-secondary {

    border-top-color: #6c757d;

    border-left-color: #6c757d;

}



.spinner-success {

    border-top-color: #2ec551;

    border-left-color: #2ec551;

}



.spinner-danger {

    border-top-color: #dc3545;

    border-left-color: #dc3545;

}



.spinner-warning {

    border-top-color: #ffc107;

    border-left-color: #ffc107;

}



.spinner-info {

    border-top-color: #17a2b8;

    border-left-color: #17a2b8;

}



@-webkit-keyframes spin {

    from {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    to {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}



@keyframes spin {

    from {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    to {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}





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

2.16 Switch Toggle

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



.switch-button.switch-button-xs {

    height: 20px;

    line-height: 16px;

    width: 50px;

}



.switch-button {

    display: inline-block;

    border-radius: 50px;

    background-color: #9e9eaf;

    width: 60px;

    height: 27px;

    padding: 4px;

    position: relative;

    overflow: hidden;

    vertical-align: middle;

}



.switch-button input[type=checkbox] {

    display: none;

}



.switch-button input[type=checkbox]:checked+span label {

    float: right;

    border-color: #2a75f3;

}



.switch-button.switch-button-xs label {

    height: 12px;

    width: 12px;

}



.switch-button input[type=checkbox]:checked+span label:before {

    position: absolute;

    font-size: 12px;

    font-weight: 600;

    z-index: 0;

    content: "ON";

    color: #FFF;

    left: 0;

    text-align: left;

    padding-left: 10px;

}



.switch-button.switch-button-xs label:before {

    line-height: 21px;

}



.switch-button label:before {

    position: absolute;

    font-size: 12px;

    font-weight: 600;

    z-index: 0;

    content: "OFF";

    right: 0;

    display: block;

    width: 100%;

    height: 100%;

    line-height: 27px;

    top: 0;

    text-align: right;

    padding-right: 10px;

    color: #FFF;

}



.switch-button input[type=checkbox]:checked+span {

    background-color: #5969ff;

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    padding: 4px;

}



.switch-button.switch-button-sm label {

    height: 16px;

    width: 16px;

}



.switch-button label {

    border-radius: 50%;

    box-shadow: 0 0 1px 1px #FFF inset;

    background-color: #FFF;

    margin: 0;

    height: 19px;

    width: 19px;

    z-index: 1;

    display: inline-block;

    cursor: pointer;

    background-clip: padding-box;

}



.switch-button.switch-button-sm {

    height: 24px;

    width: 57px;

    line-height: 20px;

}



.switch-button.switch-button-lg {

    height: 30px;

    line-height: 32px;

    width: 64px;

}



.switch-button.switch-button-success input[type=checkbox]:checked+span {

    background-color: #2ec551;

}



.switch-button.switch-button-warning input[type=checkbox]:checked+span {

    background-color: #ffc750;

}



.switch-button.switch-button-danger input[type=checkbox]:checked+span {

    background-color: #ef172c;

}





/* ==========================================================================

  3. Charts

  ========================================================================== */





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

3.1 Chartist.js

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



.ct-line.ct-threshold-above,

.ct-point.ct-threshold-above,

.ct-bar.ct-threshold-above {

    stroke: #f05b4f;

}



.ct-line.ct-threshold-below,

.ct-point.ct-threshold-below,

.ct-bar.ct-threshold-below {

    stroke: #59922b;

}



.ct-area.ct-threshold-above {

    fill: #f05b4f;

}



.ct-area.ct-threshold-below {

    fill: #59922b;

}





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

3.2 Sprkling.js

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



.spark-chart {

    display: inline-block;

}



.spark-chart-info {

    display: inline-block;

    float: right;

}





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

3.3 Charts.js

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





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

3.4 Morris.js

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





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

3.5 C3 Charts.js

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





/* ==========================================================================

  4. Forms

  ========================================================================== */





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

4.1.  Form Elements

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





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

4.2.  Form Validations

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





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

4.3.  Multiseelct

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





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

4.4.  Wizard

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





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

4.5.  Summar Note / Text Editor

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





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

4.6.  Multiupload

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





/* ==========================================================================

 5. Table

 ========================================================================== */





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

5.1.  General

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



.table {

    margin-bottom: 0px;

}



.table td,

.table th {

    padding: 10px;

    vertical-align: middle;

    border-top: 1px solid #e6e6f2;

    font-weight: normal;

}



.table thead th {

    vertical-align: bottom;

    border-bottom: 2px solid #e6e6f2;

}



.table thead th,

.table th {

    color: #3d405c;

    font-family: 'Circular Std Medium';

}



.table-bordered {

    border: 1px solid #e6e6f2;

}



.table-bordered td,

.table-bordered th {

    border: 1px solid #e6e6f2;

}



.table-striped tbody tr:nth-of-type(odd) {

    background-color: rgba(230, 230, 242, .5);

}



.table-hover tbody tr:hover {

    background-color: rgba(230, 230, 242, .5);

}





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

5.2.  Data Tables

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





/*-- row group table */



tr.group,

tr.group:hover {

    background-color: #5969ff !important;

    color: #fff;

    font-family: 'Circular Std Medium';

    font-size: 18px;

}





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

5.3. Table Filters

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





/* ==========================================================================

 6. Pages

 ========================================================================== */





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

6.1 Blank Page

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





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

6.2 Blank Page Header

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





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

6.3 Login

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





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

6.4 Sign up Page

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





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

6.5 Forgot Password

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





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

6.6 Profile

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





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

6.7 Pricing

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





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

6.8 Timeline

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





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



Patterns - reusable parts of our design



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



@media only screen and (min-width:1170px) {

    .cd-is-hidden {

        visibility: hidden;

    }

}





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



Vertical Timeline - by CodyHouse.co



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



.cd-timeline {

    overflow: hidden;

    margin: 2em auto;

}



.cd-timeline__container {

    position: relative;

    width: 90%;

    max-width: 1170px;

    margin: 0 auto;

    padding: 2em 0;

}



.cd-timeline__container::before {

    /* this is the vertical line */

    content: '';

    position: absolute;

    top: 0;

    left: 18px;

    height: 100%;

    width: 4px;

    background: #dedee9;

}



@media only screen and (min-width:1170px) {

    .cd-timeline {

        margin-top: 3em;

        margin-bottom: 3em;

    }

    .cd-timeline__container::before {

        left: 50%;

        margin-left: -2px;

    }

}



.cd-timeline__block {

    position: relative;

    margin: 2em 0;

}



.cd-timeline__block:after {

    /* clearfix */

    content: "";

    display: table;

    clear: both;

}



.cd-timeline__block:first-child {

    margin-top: 0;

}



.cd-timeline__block:last-child {

    margin-bottom: 0;

}



@media only screen and (min-width:1170px) {

    .cd-timeline__block {

        margin: 4em 0;

    }

}



.cd-timeline__img {

    position: absolute;

    top: 0;

    left: 0;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    -webkit-box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);

    box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);

}



.cd-timeline__img img {

    display: block;

    width: 24px;

    height: 24px;

    position: relative;

    left: 50%;

    top: 50%;

    margin-left: -12px;

    margin-top: -12px;

}



.cd-timeline__img.cd-timeline__img--picture {

    background: #2ec551;

}



.cd-timeline__img.cd-timeline__img--movie {

    background: #ef172c;

}



.cd-timeline__img.cd-timeline__img--location {

    background: #ffc108;

}



@media only screen and (min-width:1170px) {

    .cd-timeline__img {

        width: 60px;

        height: 60px;

        left: 50%;

        margin-left: -30px;

        /* Force Hardware Acceleration */

        -webkit-transform: translateZ(0);

        transform: translateZ(0);

    }

    .cd-timeline__img.cd-timeline__img--bounce-in {

        visibility: visible;

        -webkit-animation: cd-bounce-1 0.6s;

        animation: cd-bounce-1 0.6s;

    }

}



@-webkit-keyframes cd-bounce-1 {

    0% {

        opacity: 0;

        -webkit-transform: scale(0.5);

        transform: scale(0.5);

    }

    60% {

        opacity: 1;

        -webkit-transform: scale(1.2);

        transform: scale(1.2);

    }

    100% {

        -webkit-transform: scale(1);

        transform: scale(1);

    }

}



@keyframes cd-bounce-1 {

    0% {

        opacity: 0;

        -webkit-transform: scale(0.5);

        transform: scale(0.5);

    }

    60% {

        opacity: 1;

        -webkit-transform: scale(1.2);

        transform: scale(1.2);

    }

    100% {

        -webkit-transform: scale(1);

        transform: scale(1);

    }

}



.cd-timeline__content {

    position: relative;

    margin-left: 60px;

    background: white;

    border-radius: 0.25em;

    padding: 1em;

    border: none;

    -webkit-box-shadow: 0px 1px 2px 1px rgba(154, 154, 204, 0.22);

    -moz-box-shadow: 0px 1px 2px 1px rgba(154, 154, 204, 0.22);

    box-shadow: 0px 1px 2px 1px rgba(154, 154, 204, 0.22);

}



.cd-timeline__content:after {

    /* clearfix */

    content: "";

    display: table;

    clear: both;

}



.cd-timeline__content::before {

    /* triangle next to content block */

    content: '';

    position: absolute;

    top: 16px;

    right: 100%;

    height: 0;

    width: 0;

    border: 7px solid transparent;

    border-right: 7px solid white;

}



.cd-timeline__content h2 {}



.cd-timeline__content p,

.cd-timeline__read-more,

.cd-timeline__date {}



.cd-timeline__content p {}



.cd-timeline__read-more,

.cd-timeline__date {

    display: inline-block;

}



.cd-timeline__read-more {

    float: right;

    padding: .8em 1em;

    background: #acb7c0;

    color: white;

    border-radius: 0.25em;

}



.cd-timeline__read-more:hover {

    background-color: #bac4cb;

}



.cd-timeline__date {

    float: left;

    padding: .8em 0;

    opacity: .7;

}



@media only screen and (min-width:768px) {

    .cd-timeline__content h2 {}

    .cd-timeline__content p {}

    .cd-timeline__read-more,

    .cd-timeline__date {}

}



@media only screen and (min-width:1170px) {

    .cd-timeline__content {

        margin-left: 0;

        padding: 1.6em;

        width: 45%;

        /* Force Hardware Acceleration */

        -webkit-transform: translateZ(0);

        transform: translateZ(0);

    }

    .cd-timeline__content::before {

        top: 24px;

        left: 100%;

        border-color: transparent;

        border-left-color: white;

    }

    .cd-timeline__read-more {

        float: left;

    }

    .cd-timeline__date {

        position: absolute;

        width: 100%;

        left: 122%;

        top: 6px;

        font-size: 18px;

    }

    .cd-timeline__block:nth-child(even) .cd-timeline__content {

        float: right;

    }

    .cd-timeline__block:nth-child(even) .cd-timeline__content::before {

        top: 24px;

        left: auto;

        right: 100%;

        border-color: transparent;

        border-right-color: white;

    }

    .cd-timeline__block:nth-child(even) .cd-timeline__read-more {

        float: right;

    }

    .cd-timeline__block:nth-child(even) .cd-timeline__date {

        left: auto;

        right: 122%;

        text-align: right;

    }

    .cd-timeline__content.cd-timeline__content--bounce-in {

        visibility: visible;

        -webkit-animation: cd-bounce-2 0.6s;

        animation: cd-bounce-2 0.6s;

    }

}



@media only screen and (min-width:1170px) {



    /* inverse bounce effect on even content blocks */

    .cd-timeline__block:nth-child(even) .cd-timeline__content.cd-timeline__content--bounce-in {

        -webkit-animation: cd-bounce-2-inverse 0.6s;

        animation: cd-bounce-2-inverse 0.6s;

    }

}



@-webkit-keyframes cd-bounce-2 {

    0% {

        opacity: 0;

        -webkit-transform: translateX(-100px);

        transform: translateX(-100px);

    }

    60% {

        opacity: 1;

        -webkit-transform: translateX(20px);

        transform: translateX(20px);

    }

    100% {

        -webkit-transform: translateX(0);

        transform: translateX(0);

    }

}



@keyframes cd-bounce-2 {

    0% {

        opacity: 0;

        -webkit-transform: translateX(-100px);

        transform: translateX(-100px);

    }

    60% {

        opacity: 1;

        -webkit-transform: translateX(20px);

        transform: translateX(20px);

    }

    100% {

        -webkit-transform: translateX(0);

        transform: translateX(0);

    }

}



@-webkit-keyframes cd-bounce-2-inverse {

    0% {

        opacity: 0;

        -webkit-transform: translateX(100px);

        transform: translateX(100px);

    }

    60% {

        opacity: 1;

        -webkit-transform: translateX(-20px);

        transform: translateX(-20px);

    }

    100% {

        -webkit-transform: translateX(0);

        transform: translateX(0);

    }

}



@keyframes cd-bounce-2-inverse {

    0% {

        opacity: 0;

        -webkit-transform: translateX(100px);

        transform: translateX(100px);

    }

    60% {

        opacity: 1;

        -webkit-transform: translateX(-20px);

        transform: translateX(-20px);

    }

    100% {

        -webkit-transform: translateX(0);

        transform: translateX(0);

    }

}





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

6.9 404 error

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



.error-section {

    padding: 74px 0px;

}



.error-section-content {

    padding-top: 30px;

    color: #3d405c;

    padding-bottom: 30px;

}





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

6.9 Calendar

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



#calendar1 {

    margin: 0 auto;

}



#wrap {

    /* width: 1100px; */

    margin: 0 auto;

}



#external-events {

    float: left;

    width: 270px;

    padding: 0 20px;

    border: 1px solid #e0e4ef;

    background: #f9f9ff;

    text-align: left;

    border-radius: 4px;

}



#external-events h4 {

    font-size: 16px;

    margin-top: 0;

    padding-top: 1em;

}



#external-events .fc-event {

    margin: 10px 0;

    cursor: pointer;

}



#external-events p {

    margin: 1.5em 0;

    font-size: 11px;

    color: #666;

}



#external-events p input {

    margin: 0;

    vertical-align: middle;

}



#calendar {

    float: right;

    width: 100%;

}





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

6.10 Metrics

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



.metric-row {

    margin-bottom: 1.25rem;

    border-radius: .25rem;

    -webkit-box-align: stretch;

    -ms-flex-align: stretch;

    align-items: stretch;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    margin-right: -10px;

    margin-left: -10px;

}



.metric-value {

    margin-bottom: 0;

    line-height: 1;

    white-space: nowrap;

}



.metric-label {

    font-size: .875rem;

    font-weight: 500;

    color: #686f76;

    white-space: nowrap;

}



.metric-label:last-child {

    margin-top: .5rem;

    margin-bottom: 0;

}



.metric-value>sub,

.metric-value>sup {

    color: #ffa76a;

    font-size: .5em;

}



.card-metric {

    text-align: center;

    background-color: #fff;

    border: none;

    border-radius: 4px;

    -webkit-box-shadow: 0 0 0 1px rgba(61, 70, 79, .05), 0 1px 3px 0 rgba(61, 70, 79, .15);

    box-shadow: 0 0 0 1px rgba(61, 70, 79, .05), 0 1px 3px 0 rgba(61, 70, 79, .15);

}



.metric-row .metric {

    margin: 8px 0;

    min-height: 136px;

}



.metric-bordered {

    border: 1px solid #d4d5d7;

}



.metric-value>sub {

    bottom: 5px;

}





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

6.11 Media Objects

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



.dashboard-media-object .card-footer {

    padding: 0px;

}



.btn-account {

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    margin: 0;

    border: 0;

    -ms-flex-wrap: none;

    flex-wrap: none;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    background: none;

    color: inherit;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    cursor: pointer;

    -webkit-transition: background-color .15s;

    transition: background-color .15s;

    outline: 0;

}



.btn-account .account-summary {

    margin-right: 16px;

    margin-left: 8px;

    display: block;

    text-align: left;

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

    overflow: hidden;

    text-overflow: clip;

    white-space: nowrap;

}



.btn-account .account-description,

.btn-account .account-name {

    margin: 0;

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-weight: 500;

    line-height: 16px;

}



.btn-account .account-description {

    font-size: 12px;

    font-weight: 400;

    opacity: .7;

}



.user-avatar {

    position: relative;

    display: inline-block;

    vertical-align: middle;

    margin-bottom: 10px;

}



.avatar-badge {

    position: absolute;

    right: 3px;

    bottom: 4px;

    display: block;

    width: 8px;

    height: 8px;

    line-height: 1.6;

    text-align: center;

    font-size: 8px;

    color: #fff;

    background-color: #a9acb0;

    border-radius: 8px;

    -webkit-box-shadow: 0 0 0 2px #fff;

    box-shadow: 0 0 0 2px #fff;

    z-index: 2;

}



.avatar-badge.online {

    background-color: #00a28a;

}



.avatar-badge.idle {

    background-color: #ec935e;

}



.avatar-badge.busy {

    background-color: #ea6759;

}



.avatar-badge.offline {

    color: #a9acb0;

    background-color: #a9acb0;

}



.avatar-badge.has-indicator {

    width: 10px;

    height: 10px;

}



.avatar-group {

    display: inline-block;

}



.avatar-group .user-avatar img {

    -webkit-box-shadow: 0 0 0 2px #fff;

    box-shadow: 0 0 0 2px #fff;

}



.avatar-group .user-avatar+.user-avatar {

    display: inline-block;

    margin-left: -10px;

}



.avatar-group .user-avatar:focus,

.avatar-group .user-avatar:hover {

    z-index: 2;

}



.user-avatar-floated {

    margin-top: -50px;

    z-index: 2;

}



.metric {

    position: relative;

    padding: 16px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-flex: 1;

    -ms-flex-positive: 1;

    flex-grow: 1;

    max-width: 100%;

    border-radius: 4px;

    cursor: default;

}



.metric-label:last-child {

    margin-top: 12px;

    margin-bottom: 0;

}



.card-footer-item {

    padding: 12px 35px;

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

    text-align: center;

    display: inline-block;

}



.card-footer-item-bordered:not(:last-child) {

    border-right: 1px solid rgb(230, 230, 242);

}





/*-------------------- User icon sizes ---------------------*/



.user-avatar-xxl {

    height: 128px;

    width: 128px;

}



.user-avatar-xl {

    height: 90px;

    width: 90px;

}



.user-avatar-lg {

    height: 48px;

    width: 48px;

}



.user-avatar-md {

    height: 32px;

    width: 32px;

}



.user-avatar-sm {

    height: 24px;

    width: 24px;

}



.user-avatar-xs {

    height: 18px;

    width: 18px;

}





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

6.12 Shortable / Nesetable

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



.dashboard-short-list {}



.drag-handle,

.drag-indicator {

    cursor: move;

    cursor: -webkit-grab;

    cursor: grab;

}



.card-header+.list-group .list-group-item:first-child {

    border-top: 0;

}



.list-group-bordered .list-group-item {

    border-color: rgba(19, 29, 40, .125);

}



/*.list-group-item:first-child {

    border-width: 0 0 1px;

}*/



.drag-indicator {

    display: inline-block;

    margin: 0 .5em;

    height: 8px;

    width: 6px;

    background-image: url(/images/drag-indicator.png);

    -webkit-transform: translate3d(-.5em, 0, 0);

    transform: translate3d(-.5em, 0, 0);

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}



.dashboard-short-list .list-group-item {

    display: flex;

}



.dd {

    position: relative;

    display: block;

    margin: 0;

    padding: 0;

    max-width: 100%;

    list-style: none;

    font-size: 13px;

    line-height: 20px;

}



.dd-list {

    display: block;

    position: relative;

    margin: 0;

    padding: 0;

    list-style: none;

    width: 100%;

}



.dd-list .dd-list {

    padding-left: 30px;

}



.dd-collapsed .dd-list {

    display: none;

}



.dd-item,

.dd-empty,

.dd-placeholder {

    display: block;

    position: relative;

    margin: 0;

    padding: 0;

    min-height: 20px;

    font-size: 13px;

    line-height: 20px;

}



.dd-handle {

    margin-bottom: -1px;

    padding: .75rem 1rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    background-color: #fff;

    border-top: 1px solid rgba(19, 29, 40, .125);

    border-bottom: 1px solid rgba(19, 29, 40, .125);

}



.dd-handle:hover {

    color: #5969ff;

    background: #fff;

}



.dd-item>button {

    display: block;

    position: relative;

    cursor: pointer;

    float: left;

    width: 34px;

    height: 20px;

    margin: 18px 0;

    padding: 0;

    text-indent: 100%;

    white-space: nowrap;

    overflow: hidden;

    border: 0;

    background: transparent;

    font-size: 12px;

    line-height: 1;

    text-align: center;

    font-weight: bold;

}



.dd-item>button:before {

    content: '+';

    display: block;

    position: absolute;

    width: 100%;

    text-align: center;

    text-indent: 0;

    font-size: 14px;

}



.dd-item>button[data-action="collapse"]:before {

    content: '-';

}



.dd-placeholder,

.dd-empty {

    margin: 5px 0;

    padding: 0;

    min-height: 30px;

    background: #f5f5f5;

    border: 1px dashed #b6bcbf;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

}



.dd-empty {

    border: 1px dashed #bbb;

    min-height: 100px;

    background-color: #f5f5f5;

    background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);

    background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);

    background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);

    background-size: 60px 60px;

    background-position: 0 0, 30px 30px;

}



.dd-dragel {

    position: absolute;

    pointer-events: none;

    z-index: 9999;

}



.dd-dragel>.dd-item .dd-handle {

    margin-top: 0;

}



.dd-dragel .dd-handle {

    -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .1);

    box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .1);

}





/**

* Nestable Extras

*/



.nestable-lists {

    display: block;

    clear: both;

    padding: 30px 0;

    width: 100%;

    border: 0;

    border-top: 2px solid #ddd;

    border-bottom: 2px solid #ddd;

}



#nestable-menu {

    padding: 0;

    margin: 20px 0;

}



#nestable-output,

#nestable2-output {

    width: 100%;

    height: 7em;

    font-size: 0.75em;

    line-height: 1.333333em;

    font-family: Consolas, monospace;

    padding: 5px;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

}



#nestable2 .dd-handle {}



#nestable2 .dd-handle:hover {}



#nestable2 .dd-item>button:before {}



.dd-hover>.dd-handle {

    background: #5969ff !important;

}





/**

* Nestable Draggable Handles

*/



.dd3-content {

    display: block;

    height: 30px;

    margin: 5px 0;

    padding: 5px 10px 5px 40px;

    color: #333;

    text-decoration: none;

    font-weight: bold;

    border: 1px solid #ccc;

    background: #fafafa;

    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);

    background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);

    background: linear-gradient(to top, #fafafa 0%, #eee 100%);

    -webkit-border-radius: 3px;

    border-radius: 3px;

    box-sizing: border-box;

    -moz-box-sizing: border-box;

}



.dd3-content:hover {

    color: #2ea8e5;

    background: #fff;

}



.dd-dragel>.dd3-item>.dd3-content {

    margin: 0;

}



.dd3-item>button {

    margin-left: 30px;

}



.dd3-handle {

    position: absolute;

    margin: 0;

    left: 0;

    top: 0;

    cursor: pointer;

    width: 30px;

    text-indent: 100%;

    white-space: nowrap;

    overflow: hidden;

    border: 1px solid #aaa;

    background: #ddd;

    background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);

    background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%);

    background: linear-gradient(to top, #ddd 0%, #bbb 100%);

    border-top-right-radius: 0;

    border-bottom-right-radius: 0;

}



.dd3-handle:before {

    content: '≡';

    display: block;

    position: absolute;

    left: 0;

    top: 3px;

    width: 100%;

    text-align: center;

    text-indent: 0;

    color: #fff;

    font-size: 20px;

    font-weight: normal;

}



.dd3-handle:hover {

    background: #ddd;

}





/**

* Socialite

*/



.socialite {

    display: block;

    float: left;

    height: 35px;

}





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

6.13 404 Error

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





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

6.14 Comments Widget

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



.comment-widgets {

    position: relative;

    margin-bottom: 10px;

}



.comment-widgets .comment-row {

    border-bottom: 1px solid transparent;

    padding: 14px;

    display: flex;

    margin: 10px 0;

}



.comment-widgets .comment-row:last-child {

    border-bottom: 0px;

}



.comment-widgets .comment-row:hover,

.comment-widgets .comment-row.active {

    background: rgba(0, 0, 0, 0.05);

}



.comment-text {

    padding-left: 15px;

    width: 100%;

}



.comment-text:hover .comment-footer .action-icons,

.comment-text.active .comment-footer .action-icons {

    visibility: visible;

}



.comment-text p {

    max-height: 65px;

    width: 100%;

    overflow: hidden;

}



.comment-footer .action-icons {

    visibility: hidden;

}



.comment-footer .action-icons a {

    padding-left: 7px;

    vertical-align: middle;

    color: #9e9fa7;

}



.comment-footer .action-icons a:hover,

.comment-footer .action-icons a.active {

    color: #5969ff;

}





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

6.14 mail box widget

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



.mailbox .drop-title {

    font-weight: 600;

    padding: 11px 20px 15px;

    border-radius: 2px 2px 0 0;

    position: relative;

}



.mailbox .drop-title:after {

    content: "";

    position: absolute;

    opacity: 0.2;

    top: 0px;

    left: 0px;

    height: 100%;

    width: 100%;

    background-size: cover;

}



.mailbox .nav-link {

    border-top: 1px solid #e9ecef;

    padding-top: 15px;

    color: #3e5569;

}



.mailbox .message-center {

    position: relative;

}



.mailbox .message-center .message-item {

    border-bottom: 1px solid #e9ecef;

    display: block;

    text-decoration: none;

    padding: 9px 15px;

}



.mailbox .message-center .message-item:hover {

    background: #f8f9fa;

}



.mailbox .message-center .message-item .message-title {

    color: #212529;

}



.mailbox .message-center .message-item .user-img {

    width: 40px;

    position: relative;

    display: inline-block;

    margin: 0 0px 15px 0;

}



.mailbox .message-center .message-item .user-img img {

    width: 100%;

}



.mailbox .message-center .message-item .user-img .profile-status {

    border: 2px solid #fff;

    border-radius: 50%;

    display: inline-block;

    height: 10px;

    left: 30px;

    position: absolute;

    top: 1px;

    width: 10px;

}



.mailbox .message-center .message-item .user-img .online {

    background: #36bea6;

}



.mailbox .message-center .message-item .user-img .busy {

    background: #f62d51;

}



.mailbox .message-center .message-item .user-img .away {

    background: #ffbc34;

}



.mailbox .message-center .message-item .user-img .offline {

    background: #ffbc34;

}



.mailbox .message-center .message-item .mail-contnet {

    display: inline-block;

    width: 75%;

    padding-left: 10px;

    vertical-align: middle;

}



.mailbox .message-center .message-item .mail-contnet .message-title {

    margin: 5px 0px 0;

}



.mailbox .message-center .message-item .mail-contnet .mail-desc,

.mailbox .message-center .message-item .mail-contnet .time {

    font-size: 12px;

    display: block;

    margin: 1px 0;

    text-overflow: ellipsis;

    overflow: hidden;

    color: #a1aab2;

    white-space: nowrap;

}





/* ==========================================================================

7. Email Componants

========================================================================== */





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

7.1  Inbox

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



.page-aside {

    background: none repeat scroll 0 0 #ffffff;

    width: 280px;

    height: 100%;

    position: fixed;

    top: 0;

    left: 265px;

    border-right: 1px solid #e6e6f2;

    margin-top: 61px;

    padding-bottom: 61px;

    color: #404040;

}



.page-aside .aside-header {

    padding: 20px 22px;

    position: relative;

}



.aside-header {}



.aside-header .navbar-toggle {

    background: 0 0;

    display: none;

    outline: 0;

    border: 0;

    padding: 0 11px 0 0;

    text-align: right;

    margin: 0;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    position: absolute;

}



.aside-header .navbar-toggle .icon {

    font-size: 24px;

    color: #71738d;

}



.aside-nav .nav li .icon {

    font-size: 13px;

    vertical-align: middle;

    text-align: center;

    min-width: 19px;

    margin-right: 6px;

    color: #71748d;

}



.aside-nav .nav li.active a {

    color: #f12257;

    background: #fff0f4;

}



.aside-nav .nav li.active a .icon {

    color: #4285f4;

}



.aside-header .title {

    display: block;

    margin: 10px 0 0;

    font-size: 27px;

    line-height: 27px;

    font-weight: 300;

    color: #3d405c;

}



.aside-header .description {

    color: #71748d;

    margin: 0;

}



.aside-nav.collapse {

    display: block;

}



.aside-nav {

    visibility: visible;

    font-size: 14px;

}



.aside-content .nav {

    display: block;

}



.aside-content .nav li a {

    display: block;

    position: relative;

}



.aside-nav .nav li a {

    color: #71748d;

    padding: 10px 20px;

}



.aside-content .nav li a:hover {

    text-decoration: none;

    background-color: #efeff6;

}



.aside-nav .nav li.active a .icon {

    color: #dd1151;

}



.email-list-item .from {

    display: block;

    font-weight: 400;

    font-size: 1rem;

    margin: 0 0 1px 0;

}



.email-list-item .msg {

    margin: 0;

    color: #71738d;

}



.email-list-item .icon {

    margin-right: 7px;

    font-size: 1.154rem;

    vertical-align: middle;

    color: #3d405c;

}



.aside-nav .nav li .badge {

    float: right;

    font-size: 14px;

    font-weight: 300;

    padding: 3px 6px;

}



.aside-nav .title {

    display: block;

    color: #3d405c;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    margin: 20px 0 0;

    padding: 8px 22px 4px;

}



.aside-compose {

    text-align: center;

    padding: 14px 25px;

}



.dashboard-main-wrapper .main-content {

    margin-left: 266px;

    width: auto;

}



.email-inbox-header {

    background-color: #fff;

    padding: 25px 25px;

}



.email-title {

    display: block;

    margin: 3px 0 0;

    font-size: 22px;

    font-weight: 300;

}



.email-title .icon {

    font-size: 22px;

    color: #71738d;

}



.email-title .new-messages {

    font-size: 1rem;

    color: #3d405c;

    margin-left: 3px;

}



.input-search .input-group-btn {

    position: absolute;

    display: block;

    width: auto;

    top: 1px;

    right: 1px;

    z-index: 3;

}



.input-search .input-group-btn .btn {

    padding: 5px 10px;

    border-top-left-radius: 0px;

    border-bottom-left-radius: 0px;

    border-bottom-right-radius: 1px;

    border-top-right-radius: 1px;

}



.email-filters {

    padding: 20px;

    border-bottom: 1px solid #e6e6f2;

    background-color: #fff;

    display: table;

    width: 100%;

    border-top: 1px solid #e6e6f2;

}







.email-filters .be-select-all.custom-checkbox {

    display: inline-block;

    vertical-align: middle;

    padding: 0;

    margin: 0 30px 0 0;

}



.btn-group,

.btn-group-vertical {

    position: relative;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    vertical-align: middle;

}



.email-filters input {

    margin-right: 8px;

}



.custom-control-label {

    position: static;

    display: inline-block;

    line-height: 2;

}



.email-filters .email-filters-right {

    text-align: right;

}



.email-filters>div {

    display: table-cell;

    vertical-align: middle;

}



.email-pagination-indicator {

    display: inline-block;

    vertical-align: middle;

    margin-right: 13px;

}



.email-list {

    background: #eee;

}



.email-list-item {

    border-bottom: 1px solid #e6e6f2;

    padding: 10px 20px;

    display: table;

    width: 100%;

    cursor: pointer;

    position: relative;

    background-color: #fcfcff;

    font-size: 14px;

}



.email-list-item--unread {

    background-color: #ffffff;

}



.email-list-item--unread .from,

.email-list-item--unread .msg {

    color: #3d405c;

    font-weight: 800;

    -webkit-font-smoothing: initial;

}



.email-list-item--unread .msg {

    color: #3d405c;

}



.email-list-actions {

    width: 40px;

}



.email-list-actions,

.email-list-detail {

    vertical-align: top;

    display: table-cell;

}



.email-list-actions .favorite {

    display: block;

    padding-top: 5px;

    padding-left: 1px;

    line-height: 15px;

}



.email-list-actions .favorite span {

    font-size: 12px;

    line-height: 10px;

    color: silver;

}



.email-list-actions .favorite:hover span {

    color: #8d8d8d;

}



.email-list-actions .favorite.active span {

    color: #ffc600;

}



.email-list-item:hover {

    background-color: #fff;

}



.email-list-actions .custom-checkbox {

    padding: 0;

    margin-top: -2px;

}



.email-list-actions .custom-checkbox.custom-control {

    margin-bottom: 0;

}





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

7.2  Email Details

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



.email-head {

    background-color: #fff;

}



.email-head-subject {

    padding: 25px 25px;

    border-bottom: 1px solid #e6e6f2;

}



.email-head-subject .title {

    display: block;

    font-size: 1.769rem;

    font-weight: 300;

    color: #3d405c;

}



.email-head-subject .title>a.active .icon {

    color: #ffc600;

}



.email-head-subject .title>a .icon {

    color: silver;

    font-size: 14px;

    margin-right: 6px;

    vertical-align: middle;

    line-height: 31px;

    position: relative;

    top: -1px;

}



.email-head-subject .icons {

    font-size: 14px;

    float: right;

}



.email-head-subject .icons .icon {

    color: #71738d;

    margin-left: 12px;

    vertical-align: middle;

}



.email-head-sender .avatar {

    float: left;

    margin-right: 10px;

}



.email-head-sender {

    padding: 13px 25px;

    line-height: 40px;

}



.email-head-sender .date {

    float: right;

    font-size: 12px;

}



.email-head-sender .avatar {

    float: left;

    margin-right: 10px;

}



.email-head-sender .sender {

    font-size: 1.15rem;

}



.email-head-sender .sender .actions {

    display: inline-block;

    position: relative;

}



.email-head-sender .sender .icon {

    font-size: 1.538rem;

    line-height: 16px;

    color: #5a5a5a;

    margin-left: 7px;

}



.email-body {

    background-color: #fff;

    border-top: 1px solid #e6e6f2;

    padding: 30px 28px;

}



.email-attachments {

    background-color: #fff;

    padding: 25px 28px;

    border-top: 1px solid #e6e6f2;

}



.email-attachments .title {

    display: block;

    font-weight: 500;

}



.email-attachments .title span {

    font-weight: 400;

}



.email-attachments ul {

    list-style: none;

    margin: 15px 0 0;

    padding: 0;

}



.email-attachments ul>li {

    line-height: 23px;

}



.email-attachments ul>li a {

    color: #404040;

    font-weight: 500;

}



.email-attachments ul>li .icon {

    vertical-align: middle;

    color: #737373;

    margin-right: 2px;

}



.email-attachments ul>li span {

    font-weight: 400;

}





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

7.3 Email Compose

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



.email-head-title {

    padding: 25px 25px;

    border-bottom: 1px solid #e6e6f2;

    display: block;

    font-weight: 400;

    color: #3d405c;

    font-size: 1.769rem;

}



.email-head-title .icon {

    color: #696969;

    margin-right: 12px;

    vertical-align: middle;

    line-height: 31px;

    position: relative;

    top: -1px;

    float: left;

    font-size: 1.538rem;

}



.email-compose-fields {

    background-color: #fff;

    border-bottom: 1px solid #e6e6f2;

    padding: 30px 30px 20px;

}



.form-group.row {

    margin-bottom: 0;

    padding: 12px 0;

}



.form-group.row label {

    white-space: nowrap;

}



.email-compose-fields label {

    padding-top: 15px;

}



.email.editor {

    background-color: #fff;

}



.email.action-send {

    padding: 20px 0px;

}



.btn-space {

    margin-right: 5px;

    margin-bottom: 5px;

}



.breadcrumb {

    margin: 0;

    background-color: transparent;

}









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

7.4  Message Chat Module

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



.chat-body{overflow: hidden;}



.chat-module {

    height: 100%;

    display: flex;

    flex-direction: column;

    flex: 1;

    justify-content: space-between;



}

.chat-module {

    height: calc(100vh - 105px);

}

.dashboard-main-wrapper .content-container>.chat-module {

    /*height: 100%;*/

}



.dashboard-main-wrapper .content-container>.chat-module {

    overflow: hidden;

    padding: 1.5rem;

}



.chat-module .chat-module-body {

    width: 100%;

    position: absolute;

    top: 55px;

    height: calc(100% - 4rem);

    overflow-y: scroll;

    padding-right: 1.5rem;

    -ms-overflow-style: none;

}



.dashboard-main-wrapper .content-container>.chat-module .chat-module-body {

    width: 100%;

    padding-right: 0;

}



.chat-module .chat-module-top {

    display: flex;

    flex-direction: column;

    flex: 1;

    max-height: calc(100% - 3.5rem);

    position: relative;

}



.avatar {

    width: 2.25rem;

    height: 2.25rem;

    border-radius: 50%;

    border: 2px solid #F7F9FA;

    background: #F7F9FA;

    color: #fff;

}



.media-attachment {

    padding-left: 0.75rem;

    align-items: center;

    border-left: 4px solid #E9EEF2;

}



.chat-item .media-attachment {

    border-color: #dedee4;

}

.chat-item-author{color: #333;}



.media-attachment:not(:first-child) {

    margin-top: 0.75rem;

}



.media-attachment div.avatar {

    border: none;

}



.avatar.bg-primary {

    display: flex;

    align-items: center;

    justify-content: center;

}



.avatar.bg-primary i {

    font-size: 14px;

}



.media {

    display: flex;

    align-items: flex-start;

}



.chat-item {

    font-size: .875rem;

    line-height: 1.3125rem;

}



.dashboard-main-wrapper .content-container>.chat-module .chat-item {

    padding-bottom: 1.5rem;

}



.dashboard-main-wrapper .content-container>.chat-module .chat-item:not(:last-child) {

    border-bottom: 1px solid #e6e6f2;

}



.dashboard-main-wrapper .content-container>.chat-module .chat-item .media-body {

    background: none;

}



.chat-item>.media-body {

    margin-left: 0.75rem;

    border-radius: 0.5rem;

    padding: 6px 1px;

    background: transparent;

}



.media-body {

    flex: 1;

}



.chat-item+.chat-item {

    margin-top: 0.75rem;

}



.chat-item .chat-item-title {

    display: flex;

    justify-content: space-between;

    margin-bottom: 0.375rem;

}



.dashboard-main-wrapper .main-container {

    overflow: hidden;

    flex: 1;

}



.dashboard-main-wrapper .content-container {

    display: flex;

    height: calc(100vh - 3.5625rem);

}



.dashboard-main-wrapper .content-container>.chat-module .chat-item .media-body {

    padding: 0;

    background: none;

}



.media-attachment .media-body>a {

    display: block;

}



.media-attachment .media-body {

    margin-left: 0.75rem;

}



.chat-module .chat-module-bottom {

    position: relative;

    padding-top: 1rem;

    border-top: 1px solid #E9EEF2;

    background: #efeff6;



}



.chat-form {

    position: relative;

}



.chat-module .chat-module-bottom textarea {

    max-height: 9rem;

}



.chat-form textarea {

    padding-right: 3.375rem;

}



.chat-form-buttons {

    position: absolute;

    top: 6px;

    right: 0.25rem;

    display: flex;

    align-items: center;

}



.chat-form-buttons button {

    padding: 0;

}



.chat-form-buttons .custom-file-naked {

    width: 1.5rem;

    margin-left: 0.375rem;

    top: 5px;

}



.custom-file-naked {

    cursor: pointer;

    width: auto;

    height: auto;

}



.custom-file {

    position: relative;

    display: inline-block;

    width: 100%;

    height: calc(2.125rem + 2px);

    margin-bottom: 0;

}



.custom-file-naked .custom-file-input {

    width: auto;

    height: auto;

    cursor: pointer;

}



.custom-file-naked .custom-file-label {

    border: none;

    background: none;

    padding: 0;

    margin: 0;

    height: auto;

    cursor: pointer;

}



.chat-form-buttons i {

    color: #6c757d;

    font-size: 1.25rem;

    cursor: pointer;

}



.custom-file-label::after {

    display: none;

}



.chat-sidebar {

    height: 100%;

    overflow: hidden;

    width: 384px;

    border-left: 1px solid #e6e6f2;

    display: flex;

    flex-direction: column;

    background: #fff;

}



.chat-sidebar-content {

    max-height: 100%;

    display: flex;

    flex-direction: column;

    flex: 1;

}



.text-small {

    font-size: .875rem;

    line-height: 1.3125rem;

}



.chat-team-sidebar {

    display: flex;

    flex-direction: column;

    height: 100%;

}



.chat-team-sidebar .chat-team-sidebar-top {

    padding: 1.5rem;

}



.align-items-center {

    align-items: center !important;

}



.chat-team-sidebar .nav {

    margin-top: 1.5rem;

}



.chat-team-sidebar .nav-tabs {

    border-radius: 4px;

    background: #EEF2F5;

}



.chat-team-sidebar .nav-tabs .nav-item {

    margin: .5rem;

}



.chat-team-sidebar .nav-tabs .nav-link:not(.active) {

    color: rgba(33, 37, 41, 0.5);

}



.chat-team-sidebar .nav-tabs .nav-link {

    font-size: 14px;

    font-weight: 500;

    border-radius: 4px;

    padding: 10px;

    transition: color .35s ease-out;

}



.chat-team-sidebar .chat-team-sidebar-bottom,

.chat-team-sidebar .chat-team-sidebar-bottom .tab-content {

    flex: 1;

    height: 100%;

    display: flex;

    flex-direction: column;

}



.chat-team-sidebar .chat-team-sidebar-bottom,

.chat-team-sidebar .chat-team-sidebar-bottom .tab-content {

    flex: 1;

    height: 100%;

    display: flex;

    flex-direction: column;

}



.chat-team-sidebar .tab-pane {

    overflow-y: none;

    -ms-overflow-style: none;

    height: 100%;

}



.chat-team-sidebar .list .list-group-item {

    width: 100%;

}



.sidebar form.dropzone {

    padding: 0 1.5rem;

}



form.dropzone {

    width: 100%;

    margin-bottom: 1.5rem;

}



.sidebar .dz-message {

    background: #F7F9FA;

    padding: 1rem;

}



.dz-message {

    text-align: center;

    padding: 1.5rem;

    display: block;

    font-size: .875rem;

    font-weight: 500;

    opacity: 1;

    cursor: pointer;

    border-radius: 0.5rem;

    background: #fff;

    border: 1px dashed #E9EEF2;

    transition: all .35s ease;

    color: rgba(108, 117, 125, 0.5);

}



.dropzone-previews {

    width: 100%;

}



.dz-file-representation img:not([src]) {

    display: none;

}



.dz-file-representation img {

    position: absolute;

    object-fit: cover;

}



.dz-preview .avatars li:last-child {

    transition: opacity .35s ease;

    opacity: 0;

}



.dz-loading {

    opacity: 1;

    transition: opacity .35s ease;

    position: absolute;

    left: 1.1875rem;

}



.list-group-activity .avatars {

    margin-right: 0.75rem;

    display: flex;

    align-items: center;

}



.list-group-activity span {

    margin-right: 0.25rem;

}



.list-group-activity .avatars>li:first-child {

    position: relative;

    z-index: 2;

}



.avatar {

    width: 2.25rem;

    height: 2.25rem;

    border-radius: 50%;

    border: 2px solid #F7F9FA;

    background: #F7F9FA;

    color: #fff;

}



.avatars>li {

    display: inline-block;

}



.chat-team-sidebar .list-group-activity .avatar {

    border-color: #fff;

}



.avatars {

    padding-left: 0;

    list-style: none;

    margin: 0;

}



.avatar.bg-primary {

    display: flex;

    align-items: center;

    justify-content: center;

}



.avatars>li+li {

    margin-left: -0.75rem;

}



.btn-options {

    color: #6c757d;

    padding: 0;

    background: none;

    border: none;

    cursor: pointer;

    display: flex;

    align-items: center;

}





/* ==========================================================================

9. Map

========================================================================== */





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

9.1 Google Map

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



.gmaps {

    height: 350px;

    width: 100%;

}



#map-1 {

    height: 400px;

}



#map-2 {

    height: 400px;

}



#map-3 {

    height: 400px;

}



.ecommerce-widget .card{

    background: linear-gradient(

180deg, rgba(250,250,250,1) 0%, rgba(245,245,245,1) 50%, rgba(240,240,240,1) 100%);

    box-shadow: none;

    border: 1px solid #ddd;

    border-radius: 20px;

}

.ecommerce-widget .card-body{

    padding: 1.5rem;

    min-height: 180px;

}

.ecommerce-widget .card h5 {

    display: flex;

    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;

    font-size:1.2rem;

    align-items: center;

}

.metric-value h1{

    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;

    font-size: 50px;

}

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

9.2 Vector Map

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





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

Media Query

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





/*==========  Non-Mobile First Method  ==========*/





/* Large Devices, Wide Screens */



@media only screen and (max-width:1400px) {.product-price{position: initial;}.product-slider {

    background-color: #fff;

    border-top-left-radius: 4px;

    padding: 131px 28px;}



    .influencer-profile-data .user-social-media {

    padding: 16px 56px;

    text-align: center;

    border-right: 1px solid #e6e6f2;

}

}

@media only screen and (max-width:1200px) {.product-price{position: initial;}.product-slider{padding: 131px 30px;}

/*--------- dashboard-influence -------- */

    .user-social-media {

        padding: 16px 45px;

        text-align: center;

        width: 100%;

        border-bottom: 1px solid #dee2e6;

        border-right: transparent !important;

    }





}





/* Medium Devices, Desktops */



@media only screen and (max-width:992px) {

    h2.pageheader-title{

        margin-top: 10px;

        color: #004280;

    }

    .language-selector.m-language-selector {

        margin-right: auto;

    }

    

/*--------- dashboard-influence -------- */

    .user-social-media {

        padding: 16px 45px;

        text-align: center;

        width: 100%;

        border-bottom: 1px solid #dee2e6;

        border-right: transparent !important;

    }



}





/* Small Devices, Tablets */



@media only screen and (max-width:768px) {

    .dashboard-content {

    padding: 20px 20px 60px 20px;

}

    .nav-left-sidebar .navbar a {

        /* color: #fff; */

        font-size: 14px;

    }

    .nav-left-sidebar .navbar {

        padding: 14px;

    }

    .nav-left-sidebar {

        width: 100%;

        position: relative;

        top: 0px;

        right: 0px;

    }

    .dashboard-wrapper {

        margin-left: 0px;

    }

    .dashboard-footer {

        margin-left: 0px;

    }

    .nav-left-sidebar .navbar-toggler {

        background-color: #fff;

    }



    /* infulencer dahboard */

    .dashboard-influence .card-footer-item {

        padding: 11px 54px;

    }

    .influencer-profile .tab-regular .nav.nav-tabs .nav-item .nav-link,

    .influencer-profile .tab-regular .nav.nav-pills .nav-item .nav-link {

        display: block;

        padding: 17px 13px;

    }



    /* Inbox */

    .page-aside {

        background: none repeat scroll 0 0 #ffffff;

        width: 280px;

        height: 100%;

        position: absolute;

        top: 0;

        left: 0;

        border-right: 1px solid #e6e6f2;

        margin-top: 0;

        padding-bottom: 0px;

        color: #404040;

    }



    /*--------- dashboard-product-single -------- */

.product-slider{padding: 131px 30px;}

.product-carousel .carousel-indicators{bottom: -30px;}



/*--------- dashboard-influence -------- */

    .user-social-media {

        padding: 16px 45px;

        text-align: center;

        width: 100%;

        border-bottom: 1px solid #dee2e6;

        border-right: transparent !important;

    }





}





/* Extra Small Devices, Phones */



@media only screen and (max-width:480px) {

    .dashboard-content {

    padding: 20px 20px 60px 20px;

}

    /* .nav-left-sidebar .navbar a {

        color: #fff;

    } */

    .nav-left-sidebar .navbar-toggler {

        background-color: #fff;

    }

    .aside-header .navbar-toggle {

        display: block;

    }

    .nav-left-sidebar .navbar {

        padding: 14px;

    }

    .nav-left-sidebar {

        width: 100%;

        position: relative;

        top: 0px;

        right: 0px;

    }



    .dashboard-wrapper {

        margin-left: 0px;

    }

    .dashboard-footer {

        margin-left: 0px;

    }

    .page-aside {

        background: none repeat scroll 0 0 #fff;

        width: 100%;

        height: 100%;

        position: relative;

        top: 0;

        left: 0px;

        border-right: transparent;

        margin-top: 0px;

        padding-bottom: 0px;

        color: #404040;

        border-bottom: 1px solid #e6e6f2;

    }

    .aside-nav.collapse {

        display: none;

    }

    .dashboard-main-wrapper .main-content {

        margin-left: 0px;

        width: auto;

    }

    .aside-nav.show {

        display: block;

    }



    /*--------- dashboard-influence -------- */

    .user-social-media {

        padding: 16px 45px;

        text-align: center;

        width: 100%;

        border-bottom: 1px solid #dee2e6;

        border-right: transparent !important;

    }

    .user-social-media:last-child {

        border-bottom: transparent;

        border-right: transparent !important;

    }

    .dashboard-influence .progress {

        width: 74%;

    }

    .footer {

        margin-left: 0px;

    }

    .influencer-profile-data .user-avatar {

        float: initial;

    }

    .influencer-profile-data .user-avatar-name {

        float: initial;

    }

    .dashboard-influence .card-footer-item {

        padding: 11px 48px;

    }



    /*--------- dashboard-profile -------- */

    .tab-regular .nav.nav-tabs .nav-item .nav-link,

    .tab-regular .nav.nav-pills .nav-item .nav-link {

        display: block;

        padding: 17px 38px;

    }

    .tab-regular .nav.nav-tabs .nav-item,

    .tab-regular .nav.nav-pills .nav-item {

        margin-bottom: 5px;

    }

  /*--------- dashboard-product-single -------- */

.product-slider{padding: 30px 10px;}

.product-carousel .carousel-indicators{bottom: -30px;}

.simple-card .nav.nav-tabs .nav-item .nav-link {

    padding: 17px 29px;}

}









/* Custom, iPhone Retina */

@media only screen and (max-width:320px) {}





.dashboard-header a.navbar-brand { max-width: 250px;padding: 1px 20px; }

.dashboard-header a.navbar-brand img { max-width: 100%; }











.nav-left-sidebar .navbar-nav {

    padding-bottom: 30px;

}





/*custom css*/



/* Plan section */

.card_amount {width: 100%;display: block;}

.card_amount .col_sm {width: 32%;display: inline-block;margin-bottom: 30px; margin:0 4px;}



.plan-data { padding: 30px 30px 0px 30px ;    box-shadow: 0 0 14px #ddd; } 



.card_amount .pricingTable{padding: 25px 0 0;text-align: center;transition: all 0.3s ease 0s;box-shadow: 0 0 13px #ddd; margin-bottom:30px;}



.card_amount .pricingTable .title{font-size: 20px;font-weight: normal;color: #71748d;letter-spacing: 1px;text-transform: uppercase;margin: 0 0 0px 0;}

.card_amount .pricingTable .price-value{font-size: 50px; color: #bddc42; padding: 0 0 11px 0; border-bottom: solid 1px #f3f3f3; margin-bottom: 17px;    line-height: normal;}

.card_amount .pricingTable .month{display: block;font-size: 20px;color: #000;}

.card_amount .pricingTable .pricing-content{padding: 10px 0 60px;z-index: 1;position: relative; min-height:200px;}

 

.card_amount .pricingTable .pricing-content:after{border-radius: 50px 0 0 0;left: auto;right: 0;}

.card_amount .pricingTable .pricing-content ul{padding: 0;margin: 0 0 20px 0;list-style: none;}

.card_amount .pricingTable .pricing-content ul li{font-size: 17px;font-weight: 600;color: #1b1b1b;line-height: 50px;letter-spacing: 1px;

border-bottom: 1px solid #c5d2d4;} 

.card_amount .pricingTable .pricingTable-signup{    display: inline-block; padding: 9px 20px 7px 20px; font-size: 14px; font-weight: 700; color: #666; text-transform: uppercase; border: 1px solid #909090; position: absolute; transition: all 0.3s ease 0s; border-radius: 50px; bottom: 20px; left: 50%; transform: translate(-50%, -0px); font-weight:normal; width:156px; }

.card_amount .pricingTable .pricingTable-signup:hover{ background:#000; color:#fff;}





.card_amount .pricingTable:hover .pricingTable-signup{ background:#000; color:#fff;}

.card_amount .pricingTable:hover{box-shadow: 0 0 13px #999;}

 

 

/* Plan details   */



.detail-block { padding: 20px; }

.detail-block .title-row:first-child p { border-top: solid 1px #f2f2f2; }

.detail-block .title-row { display: table; width: 100%;  font-size: 15px; }



.detail-block p.value {padding: 10px; border: solid 1px #f2f2f2; border-top: 0; }

.detail-block .title-row span.title { display: table-cell; width: 100px; font-weight: bold; background: #f2f2f2; padding: 10px; }

.detail-block .btn { padding: 6px 16px; width: auto; margin-top: 15px; } 





/* Time table */



.time-table{}

.time-table table{width:100%;text-align:center;}

.time-table table tr{ }

.time-table table td{ border: solid 1px #ddd; padding: 10px; } 

.time-table table th{border: solid 1px #ddd; background: #f2f2f2; padding: 10px; } 



.purple{background:#9c009d;color:#fff;}

.green{background:#01b200;color:#fff;}

.blue{background:#538dd5;color:#fff;}

.black{background:#010102;color:#fff;}



 

/* satya */



 #calendar {

    width: 100%;

    margin: 0 auto;

}



.response {

    height: 60px;

}



.success {

    background: #cdf3cd;

    padding: 10px 60px;

    border: #c3e6c3 1px solid;

    display: inline-block;

}



.sidebar-profile{width: 100%;}

.navbar-expand-lg .navbar-collapse{flex-wrap: wrap;   }

ul.sidebar-profile-detials{margin: 0px; padding:0 0 15px;}

ul.sidebar-profile-detials li{list-style: none; display: block; text-align: center; font-size: 14px;

padding:3px 0px;}

ul.sidebar-profile-detials li span{padding-right: 5px;}

    .sidebar-profile-img{text-align: center; margin-bottom: 25px;}

.sidebar-profile-img img{width: 100px; height: 100px; margin: 0 auto; border-radius: 50%;}

.fc-toolbar button.fc-today-button.fc-state-default{background-color: #2ec551; color: #fff; font-weight:normal; text-transform: capitalize;

border-radius: 0px; box-shadow: none; background-image: none; box-shadow:none;}  



.fc-toolbar button.fc-today-button{background-color: #2ec551; color: #fff; font-weight:normal; text-transform: capitalize;

border-radius: 0px; background-image: none; box-shadow:none;}

.pay-details-outer{margin: 30px 0px;}

.custom-select-new {

    margin: 20px 0px;

    width: 200px;

}



.custom-select-new select{width: 100%; height: 42px; border: none;border-bottom: 1px solid #333;} 

button.pay-button{background-color: #0052a8; color: #fff; padding:10px; width: 200px; text-transform: uppercase; border: none; cursor: pointer;}

.pay-details-outer .price, .pay-details-outer{color: #888;}

.pay-detial-heading .btn-success{border-radius: 0px; padding: 10px 25px;}   

h5.pay-detial-heading {

    border-bottom: 1px solid #ccc;

    padding-bottom: 35px;

}



.pay-details-inner {

    border-bottom: 1px solid #ccc;

    padding-bottom: 35px;

}





.cb-main {

   /*  width: 310px; */

   /*  margin: 0 auto; */

    overflow: hidden;

  border: 0px solid #fff;

    border-width: 50px 15px;

  /*   color: #474c57; */

	/*border-radius: 20px;*/



 }

.chat-messages {

    height: 460px;

    overflow-x: hidden;

    overflow-y: auto;

    width: 100%;

    position: relative;

    border-radius: 2px 2px 0 0;

    background: #f0f3f5;

}

.chat-messages-list {

    transform: matrix(1, 0, 0, 1, 0, 0);

    list-style-type: none;

    padding: 0;

    margin: 0;

    width: 100%;

    padding: 15px 25px 60px;

}

.chat-message {

    position: relative;

    font-size: 0;

    margin-bottom: 10px;

}

.chat-message-bubble {

    display: inline-block;

    font-size: 14px;

    max-width: 350px;

    background: #fff;

    padding: 8px 14px;

    border-radius: 18px;

    min-width: 0;

}

.chat-message-self {

    text-align: right;

}

.chat-message-self .chat-message-bubble, .chat-message-effect .chat-message-bubble {

    transform: translate3d(0px, 0px, 0px);

    opacity: 1;

    background: #0052a8;

    color: #fff;

    text-align: left;

}

.chat-input-wrapper {

    position: relative;

    z-index: 2;

    background: #0052a8;

    padding: 0.5em 0;

    border-radius: 0 0 2px 2px;

    color: #fff;

}



.chat-input-wrapper, .chat-send {

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-justify-content: center;

    justify-content: center;

    font-size: 16px;

    padding-left: 15px;

    padding-right: 15px;

    align-items: center;

    border-radius: 0;

}

button, html input[type="button"], input[type="reset"], input[type="submit"] {

    -webkit-appearance: button;

    cursor: pointer;

}

.chat-input {

    outline: none;

    resize: none;

    overflow: hidden;

    min-height: 38px;

    -webkit-flex: 1;

    flex: 1;

    font-size: 14px;

    padding: 10px 0 7px;

    cursor: text;

}

.chat-input:empty::before {

    content: "Write something...";

    color: #FFF;

}

.chat-input:empty + .chat-send {

    color: #FFF;

}

.chat-send {

    background: transparent;

    border: none;

    position: relative;

    overflow: hidden;

    padding: 0 0.75em;

    color: inherit;

    -webkit-transition: color 0.6s;

    transition: color 0.6s;

}



.upload-btn-wrapper {

    position: relative;

    overflow: hidden;

    display: inline-block;

  }

  

  .upload-btn-wrapper .btn {

    border: 0;

    color: #fff;

    background-color: transparent;

    padding: 0;

    border-radius: 0;

    font-size: 20px;

    font-weight: bold;

  }

  

  .upload-btn-wrapper input[type=file] {

    font-size: 100px;

    position: absolute;

    left: 0;

    top: 0;

    opacity: 0;

  }

.upload-btn-wrapper:hover {

    opacity: 0.9;

}

.chat-send:focus, .chat-send:active, .chat-send:focus-within {

    background: transparent;

    border: 0;

    box-shadow: none;

    outline: none;

}

/*--15-07-20-START--*/

.card-body.ma-cardbody {

    clear:both;

    float: left;

    width: 100%;

}

.ma-userbox {

    border: 1px solid #ddd;

    box-shadow: 2px 2px 3px #ddd;

    text-align: center;

    padding: 15px 10px;

    margin-bottom: 10px;

    display: block;    min-height: 183px;

    float: left;

    width: 23.5%;

    margin-right: 2%;

}

.ma-userbox:nth-child(4n) {

    margin-right: 0;

}

.ma-userbox img {

    height: 90px;

    width: auto;

    max-width: 100%;

    margin-bottom: 10px;

}

.ma-userbox a {

    color: #000;

}

.ma-userbox a:hover {

    text-decoration: underline;

}

.ma-userbox a {

    display: block;

}

.chat-input {

    padding-left: 15px;

    padding-right: 15px;

}

li.chat-message.chat-message-self {

    display: flex;

    justify-content: flex-end;

}

li.chat-message.chat-message-self>.chat-message-bubble {

    margin-right: 10px;

}

li.chat-message.chat-message-friend {

    display: flex;

}

li.chat-message.chat-message-friend .chat-message-bubble {

    margin-left: 10px;   

}

li.chat-message .chat-message-bubble .message img {

    max-height: 160px;

    border-radius: 15px;

}





/* SSS work start */



.explore-cl{}

.explore-cl .card { } 

.explore-cl .card .card-body { padding: 0; }

.explore-cl .card .card-body .card-bodyinner { align-items: center; } 

.explore-cl .card .card-body .card-img { background: #fff/*#e6eff9*/; width: 96px; text-align: center; height: 100px; padding-top: 26px; margin-right: 14px; } 



.explore-cl .card .card-body span.closed { position: absolute;cursor: pointer; right: 0; top: -1px; width: 30px; height: 30px; display: inline-block; text-align: center; padding-top: 7px; font-size: 23px; transform: rotate(45deg); } 

.explore-cl .card .card-body .card-bodyinner p { padding: 0; margin: 0 0 3px 0; } 

.explore-cl .card .card-body .card-bodyinner a{ color: #0052a8;} 





@media(min-width:767px) {

    .m-language-selector {

        display: none;

    }

    .dashboard-wrapper>.footer {

        position: fixed;

        bottom: 0;

        z-index: 9;

    }

}



/**/

.nav-left-sidebar .navbar {

    /* background: #004382; */

    color: #fff;

    float: right;

    padding-right: 0;

    /* margin-top: 220px; */

}



.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link {

    color: #fff;

    display: flex;

}

.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link.nav-user-img:hover{

    background-color: transparent;

}

.nav-left-sidebar .submenu,

.menu-list {

    /* background: #004382; */

}

.ex-mapp-first{

    margin-top: 4rem;

}

nav.navbar.navbar-expand-lg.bg-white {

    background:  #0052a9 !important; 

}



.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link:focus, .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link:hover,

.sidebar-dark.nav-left-sidebar .submenu .nav .nav-item .nav-link:hover,

.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link:focus, .sidebar-dark.nav-left-sidebar .navbar-nav .nav-link.active {

    background-color: #fff;

}

.sidebar-dark.nav-left-sidebar .navbar-nav .nav-link>img {

    display: inline-block;

    vertical-align: middle;

    margin: -4px 9px 0 0;

    /* width: 18px; */

    width: 80px;

    height: 90px;

    border-radius: 10px;

}









/**/

.ex-mapp-first>.row {

    justify-content: space-between;

}

.ex-mapp-first .card,

.ex-mapp-second .card {

    border-radius: 10px;

}

.ex-mapp-first .card-body,

.ex-mapp-second .card-body {

    padding:0;

    border-radius: 10px;

}

.ex-mapp-first .card-body .text-muted,

.ex-mapp-second .card-body .text-muted {

    margin: auto;

    text-align: center;

    position: absolute;

    z-index: 99;

    top: 0;

    left: 0;

    right: 0;

    font-weight: normal;

    bottom: 0;

    justify-content: center;

}

.ex-mapp-first .card-body .text-muted a,

.ex-mapp-second .card-body .text-muted a {

    color:#fff;

    text-transform: uppercase;

    font-size: 24px;

}

.ex-mapp-second .card-body .text-muted a {

    font-size: 40px;

    transition: all 0.5s ease-in-out;

    display: inline-block;

}

.ex-mapp-first .card-body .text-muted a:hover,

.ex-mapp-second .card-body .text-muted a:hover {

    text-decoration: none;

    opacity: 0.75;

    /* transform: scale(1.02); */

    transition: all 0.5s ease-in-out;

    /* display: inline-block; */

}

.ex-mapp-first .card-body>img,

.ex-mapp-second .card-body>img {

    object-fit: cover;

    width: 100%;

    border-radius: 10px;

}



.ex-mapp-third .card {

    border-radius: 10px;

}

.ex-mapp-third .card-body button {

    border: 0;

    background-color: #004382;

    color: #fff;

    text-align: center;

    border-radius: 22px;

    text-transform: uppercase;

    padding: 8px 18px;

    font-size: 12px;

    /* margin-left: 10px; */

}

.ex-mapp-third .card-body button:hover {

    background-color: #1874B8;

}

.ex-mapp-third .card-body h5 {

    color:#000 !important;

    font-weight: 400;

    font-size: 16px;

    margin-bottom: 15px;

     

}

.ex-mapp-second .card-body>img {

    max-height: 230px;

}

.card-bodyinner {

    display: flex;

}

.card-bodyinner>.card-img {

    width: 30%;

}



.student-martial .container-fluid.dashboard-content{

    padding-top:70px;

}



a.nav-link.register {

position: absolute;top: 12px;

right: 0;

}

img {

    max-width: 100%;

}

/*------new-design---*/

body, html, .default-page{

    height:100%;

}

.default-page{

    /*background-color:#ccc;*/

    

}

.default-page .aside {

    background: url(https://www.martialapp.com/laracms/assets/libs/img/leftside-min.png);

    background-size: cover;

    background-position-x: right;

}

.default-page  .right-side{

    /*display:flex;*/

}

.form-control{

    border:2px solid #dedee0;

    border-radius:0 !important;

    height:48px !important;

}

.theme-color{

    color:#1b70c5;

}

.bg-theme,.fc-toolbar button.fc-today-button.fc-state-default, .card-header .btn-success, .btn-success, .btn-dark,

.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle{

    background-color: #1b70c5 !important;

}

.card-header .btn-success, .btn-dark, .theme-border, .btn-success, .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle{

    border-color: #1b70c5 !important;

}

.btn-success:not(:disabled):not(.disabled).active:focus, .btn-dark:focus, .btn-dark:not(:disabled):not(.disabled):active:focus

.btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus{

    box-shadow: 0 0 0 0.1rem #00438238;

}

.login-section{

    max-width:454px;

}

@media(max-width:1600px){

.navbar-brand img{max-width:168px;}}

@media(min-width:992px){

nav.navbar.navbar-expand-lg.bg-white { display: flex; justify-content: space-between; }

.navbar-expand-lg .navbar-collapse{max-width: 200px;}



}



@media(min-width:768px) and (max-width: 991px){

nav.navbar.navbar-expand-lg.bg-white { display: flex; justify-content: space-between; }

.navbar-expand-lg .navbar-collapse{max-width: 200px;}

}





@media(max-width:991px) {

    .nav-left-sidebar .navbar{

        justify-content: initial !important;

    }

    .nav-left-sidebar .navbar{

        float: none;

    }

    .nav-left-sidebar .navbar-toggler {

        border: 1px solid #fff !important;

        padding: 1px 3px;

        background-color: transparent;

        border-radius: 3px;

    }

    .navbar-light .navbar-toggler-icon {

        background:url(../img/menu.svg) no-repeat !important;  }

    .navbar-toggler:focus {

        outline: none;

    }

    .student-martial .container-fluid.dashboard-content{

        padding-top:20px;

    }

	

.ma-userbox {  width: 48%; }

.nav-left-sidebar .navbar{

    padding-right: 20px;

}

	

}





@media(max-width:767px) {

.ma-userbox { width: 100%; }



.dashboard-header a.navbar-brand { max-width: 238px; text-align: center; margin: 0 auto;padding-bottom:5px; }

.dashboard-header a.navbar-brand img { max-width: 100%; margin: 0 auto; max-height: 50px; margin: 0 auto; }

.dashboard-header nav.navbar.navbar-expand-lg.bg-white.fixed-top>.navbar-toggler { display: none; }



.sidebar-profile {margin-top:30px; }

.nav-left-sidebar .navbar-nav .nav-item { border-bottom: solid 1px #346490; } 

.dashboard-header .navbar {  padding: 10px 13px 0 13px; }





a.nav-link.register {right: 10px; top: 12px; font-size: 0;padding: 0;} 

a.nav-link.register:after { content: "\f2be"; font-family: fontawesome; font-size: 24px; } 



.student-martial .container-fluid.dashboard-content{ padding-top:20px; }

.ex-mapp-second .card-body>img {

    height: 260px;

}

 



}





input[type="time"]{

    height: 32.5px;

    -webkit-appearance: none;

    appearance: none;

}





@media (max-width: 768px){

    .navbar-expand-lg .navbar-collapse{

        max-width: 100%;

    }

}

a.nav-user-img#navbarDropdownMenuLink2 {

    background-color: transparent;

}