/*
Template Name: Admin Press Admin
Author: Themedesigner
Email: niravjoshi87@gmail.com
File: scss
*/
/**
 * Table Of Content
 *
 *  1. Globals
 *  2. Headers
 *  3. Navigations
 *  4. Banners
 *  5. Footers
 *  6. app
 *  7. Widgets
 *  8. Custom Templates
 */
/*
Template Name: Admin Press Admin
Author: Themedesigner
Email: niravjoshi87@gmail.com
File: scss
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
/*Theme Colors*/
/*bootstrap Color*/
/*Light colors*/
/*Normal Color*/
/*Extra Variable*/
/*Preloader*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");

@import url(../scss/icons/font-awesome/css/font-awesome.min.css);

@import url(../scss/icons/simple-line-icons/css/simple-line-icons.css);

@import url(../scss/icons/weather-icons/css/weather-icons.min.css);

@import url(../scss/icons/linea-icons/linea.css);

@import url(../scss/icons/themify-icons/themify-icons.css);

@import url(../scss/icons/flag-icon-css/flag-icon.min.css);

@import url(../scss/icons/material-design-iconic-font/css/materialdesignicons.min.css);

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");

@import url(../css/spinners.css);

@import url(../css/animate.css);

/* Admin panel dynamic theme colors (must come AFTER all @import rules).
   --primary + --secondary are the user-facing controls (Global Settings).
   The --brand* names are kept as aliases so existing rules keep working. */
:root{
    --primary:#3563E9;
    --primary-rgb:53, 99, 233;
    --primary-tint:#ebeffd;
    --secondary:#2d53c4;
    --secondary-rgb:45, 83, 196;
    --brand-ink:#0C111C;
    --brand:var(--primary);
    --brand-rgb:var(--primary-rgb);
    --brand-strong:var(--secondary);
    --brand-tint:var(--primary-tint);
}



.preloader {

    width: 100%;

    height: 100%;

    top: 0px;

    position: fixed;

    z-index: 99999;

    background: #fff;

}



.preloader .cssload-speeding-wheel {

    position: absolute;

    top: calc(50% - 3.5px);

    left: calc(50% - 3.5px);

}



/*

Template Name: Admin Press Admin
Author: Themedesigner
Email: niravjoshi87@gmail.com
File: scss
*/
/**
 * Table Of Content
 *
 *  1. Globals
 *  2. Headers
 *  3. Navigations
 *  4. Banners
 *  5. Footers
 *  6. Posts
 *  7. Widgets
 *  8. Custom Templates
 */

/*******************

Global Styles

*******************/

* {

    outline: none;

}




body {

    background: #fff;

    font-family: "Urbanist", sans-serif;

    margin: 0;

    overflow-x: hidden;

    color: #67757c;

    font-weight: 500;

}




html {

    position: relative;

    min-height: 100%;

    background: #ffffff;

}

.small, small {
  font-size: 90%;
  font-weight: 500;
}

a {

    color: #3B82F6;

}



a:hover,

a:focus {

    text-decoration: none;

    color: #000;

}



a.link {

    color: #455a64;

}



a.link:hover, a.link:focus {

    color: #000;

}



.img-responsive {

    width: 100%;

    height: auto;

    display: inline-block;

}



.img-rounded {

    border-radius: 4px;

}



html body .mdi:before,

html body .mdi-set {

    line-height: initial;

}



.table tr td > img {

    object-fit: cover;

    border-radius: 5px;

}

.table.dataTable  tr td > img{margin-right: 15px}

.table tr td > .verified-icon{
    font-size: 18px;
  margin-left: 5px;
  color: green;
}

/*******************

Headings

*******************/

h1,

h2,

h3,

h4,

h5,

h6 {

    color: #455a64;

    font-family: "Urbanist", sans-serif;

    font-weight: 600;

}



h1 {

    line-height: 40px;

    font-size: 36px;

}



h2 {

    line-height: 36px;

    font-size: 24px;

}



h3 {

    line-height: 30px;

    font-size: 21px;

}



h4 {

    line-height: 22px;

    font-size: 18px;

}



h5 {

    line-height: 18px;

    font-size: 16px;

    font-weight: 400;

}



h6 {

    line-height: 16px;

    font-size: 14px;

    font-weight: 400;

}



.display-5 {

    font-size: 3rem;

}



.display-6 {

    font-size: 36px;

}



.box {

    border-radius: 4px;

    padding: 10px;

}

.bg-light-gray{
  background: #F9FAFB !important;
}

html body .dl {

    display: inline-block;

}



html body .db {

    display: block;

}



.no-wrap td,

.no-wrap th {

    white-space: nowrap;

}



/*******************

Blockquote

*******************/

html body blockquote {

    border-left: 5px solid #000;

    border: 1px solid rgba(120, 130, 140, 0.13);

    padding: 15px;

}



.clear {

    clear: both;

}



ol li {

    margin: 5px 0;

}



/*******************

Paddings

*******************/

html body .p-0 {

    padding: 0px;

}



html body .p-10 {

    padding: 10px;

}



html body .p-20 {

    padding: 20px;

}



html body .p-30 {

    padding: 30px;

}



html body .p-l-0 {

    padding-left: 0px;

}



html body .p-l-10 {

    padding-left: 10px;

}



html body .p-l-20 {

    padding-left: 20px;

}



html body .p-r-0 {

    padding-right: 0px;

}



html body .p-r-10 {

    padding-right: 10px;

}



html body .p-r-20 {

    padding-right: 20px;

}



html body .p-r-30 {

    padding-right: 30px;

}



html body .p-r-40 {

    padding-right: 40px;

}



html body .p-t-0 {

    padding-top: 0px;

}



html body .p-t-10 {

    padding-top: 10px;

}



html body .p-t-20 {

    padding-top: 20px;

}



html body .p-t-30 {

    padding-top: 30px;

}



html body .p-b-0 {

    padding-bottom: 0px;

}



html body .p-b-5 {

    padding-bottom: 5px;

}



html body .p-b-10 {

    padding-bottom: 10px;

}



html body .p-b-20 {

    padding-bottom: 20px;

}



html body .p-b-30 {

    padding-bottom: 30px;

}



html body .p-b-40 {

    padding-bottom: 40px;

}



/*******************

Margin

*******************/

html body .m-0 {

    margin: 0px;

}



html body .m-l-5 {

    margin-left: 5px;

}



html body .m-l-10 {

    margin-left: 10px;

}



html body .m-l-15 {

    margin-left: 15px;

}



html body .m-l-20 {

    margin-left: 20px;

}



html body .m-l-30 {

    margin-left: 30px;

}



html body .m-l-40 {

    margin-left: 40px;

}



html body .m-r-5 {

    margin-right: 5px;

}



html body .m-r-10 {

    margin-right: 10px;

}



html body .m-r-15 {

    margin-right: 15px;

}



html body .m-r-20 {

    margin-right: 20px;

}



html body .m-r-30 {

    margin-right: 30px;

}



html body .m-r-40 {

    margin-right: 40px;

}



html body .m-t-0 {

    margin-top: 0px;

}



html body .m-t-5 {

    margin-top: 5px;

}



html body .m-t-10 {

    margin-top: 10px;

}



html body .m-t-15 {

    margin-top: 15px;

}



html body .m-t-20 {

    margin-top: 20px;

}



html body .m-t-30 {

    margin-top: 30px;

}



html body .m-t-40 {

    margin-top: 40px;

}



html body .m-b-0 {

    margin-bottom: 0px;

}



html body .m-b-5 {

    margin-bottom: 5px;

}



html body .m-b-10 {

    margin-bottom: 10px;

}



html body .m-b-15 {

    margin-bottom: 15px;

}



html body .m-b-20 {

    margin-bottom: 20px;

}



html body .m-b-30 {

    margin-bottom: 30px;

}



html body .m-b-40 {

    margin-bottom: 40px;

}



/*******************

vertical alignment

*******************/

html body .vt {

    vertical-align: top;

}



html body .vm {

    vertical-align: middle;

}



html body .vb {

    vertical-align: bottom;

}



/*******************

Opacity

*******************/

.op-5 {

    opacity: 0.5;

}



/*******************

font weight

*******************/

html body .font-bold {

    font-weight: 700;

}



html body .font-normal {

    font-weight: normal;

}



html body .font-light {

    font-weight: 300;

}



html body .font-medium {

    font-weight: 500;

}



html body .font-16 {

    font-size: 16px;

}



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;

}



/*******************

Border

*******************/

html body .b-0 {

    border: none;

}



html body .b-r {

    border-right: 1px solid rgba(120, 130, 140, 0.13);

}



html body .b-l {

    border-left: 1px solid rgba(120, 130, 140, 0.13);

}



html body .b-b {

    border-bottom: 1px solid rgba(120, 130, 140, 0.13);

}



html body .b-t {

    border-top: 1px solid rgba(120, 130, 140, 0.13);

}



html body .b-all {

    border: 1px solid rgba(120, 130, 140, 0.13) !important;

}



/*******************

Thumb size

*******************/

.thumb-sm {

    height: 32px;

    width: 32px;

}



.thumb-md {

    height: 48px;

    width: 48px;

}



.thumb-lg {

    height: 88px;

    width: 88px;

}



.hide {

    display: none;

}



.img-circle {

    border-radius: 100%;

}



.radius {

    border-radius: 4px;

}



/*******************

Text Colors

*******************/

.text-white {

    color: #ffffff !important;

}



.text-danger {

    color: #ef5350 !important;

}



.text-muted {

    color: #99abb4 !important;

}



.text-warning {

    color: #000 !important;

}



.text-success {

    color: #26dad2 !important;

}



.text-info {

    color: #000 !important;

}



.text-inverse {

    color: #2f3d4a !important;

}



html body .text-blue {

    color: #02bec9;

}



html body .text-purple {

    color: #ebc51a;

}



html body .text-primary {

    color: #000;

}



html body .text-megna {

    color: #00897b;

}



html body .text-dark {

    color: #67757c;

}



html body .text-themecolor {

    color: #000;

}



/*******************

Background Colors

*******************/

.bg-primary {

    background-color: #000 !important;

}



.bg-success {

    background-color: #26dad2 !important;

}



.bg-info {

    background-color: #000 !important;

}



.bg-warning {

    background-color: #000 !important;

}



.bg-danger {

    background-color: #ef5350 !important;

}



html body .bg-megna {

    background-color: #00897b;

}



html body .bg-theme {

    background-color: #000;

}



html body .bg-inverse {

    background-color: #2f3d4a;

}



html body .bg-purple {

    background-color: #ebc51a;

}



html body .bg-light-part {

    background-color: rgba(0, 0, 0, 0.02);

}



html body .bg-light-primary {

    background-color: #f1effd;

}



html body .bg-light-success {

    background-color: #e8fdeb;

}



html body .bg-light-info {

    background-color: #cfecfe;

}



html body .bg-light-extra {

    background-color: #ebf3f5;

}



html body .bg-light-warning {

    background-color: #fff8ec;

}



html body .bg-light-danger {

    background-color: #f9e7eb;

}



html body .bg-light-inverse {

    background-color: #f6f6f6;

}



html body .bg-light {

    background-color: #f2f4f8;

}



html body .bg-white {

    background-color: #ffffff;

}



/*******************

Rounds

*******************/

.round {

    line-height: 48px;

    color: #ffffff;

    width: 50px;

    height: 50px;

    display: inline-block;

    font-weight: 400;

    text-align: center;

    border-radius: 100%;

    background: #000;

}



.round img {

    border-radius: 100%;

}



.round-lg {

    line-height: 65px;

    width: 60px;

    height: 60px;

    font-size: 30px;

}



.round.round-info {

    background: #000;

}



.round.round-warning {

    background: #000;

}



.round.round-danger {

    background: #ef5350;

}



.round.round-success {

    background: #26dad2;

}



.round.round-primary {

    background: #000;

}



/*******************

Labels

*******************/

.label {

    padding: 3px 10px;

    line-height: 13px;

    color: #ffffff;

    font-weight: 400;

    border-radius: 4px;

    font-size: 75%;

}



.label-rounded {

    border-radius: 60px;

}



.label-custom {

    background-color: #00897b;

}



.label-success {

    background-color: #26dad2;

}



.label-info {

    background-color: #000;

}



.label-warning {

    background-color: #000;

}



.label-danger {

    background-color: #ef5350;

}



.label-megna {

    background-color: #00897b;

}



.label-primary {

    background-color: #000;

}



.label-purple {

    background-color: #ebc51a;

}



.label-red {

    background-color: #fb3a3a;

}



.label-inverse {

    background-color: #2f3d4a;

}



.label-default {

    background-color: #f2f4f8;

}



.label-white {

    background-color: #ffffff;

}



.label-light-success {

    background-color: #e8fdeb;

    color: #26dad2;

}



.label-light-info {

    background-color: #cfecfe;

    color: #000;

}



.label-light-warning {

    background-color: #fff8ec;

    color: #000;

}



.label-light-danger {

    background-color: #f9e7eb;

    color: #ef5350;

}



.label-light-megna {

    background-color: #e0f2f4;

    color: #00897b;

}



.label-light-primary {

    background-color: #f1effd;

    color: #000;

}



.label-light-inverse {

    background-color: #f6f6f6;

    color: #2f3d4a;

}

.table td, .table th {

    border-color: #f3f1f1;

}

.table thead th [type="checkbox"] + label, .table th [type="checkbox"] + label {

    margin-bottom: 0;

}

.table tr td > img {

    object-fit: cover;

    border-radius: 5px;

}

.table tr td.payment_images img{max-width: 100px;}

/*******************

Pagination

*******************/

.pagination > li:first-child > a,

.pagination > li:first-child > span {

    border-bottom-left-radius: 4px;

    border-top-left-radius: 4px;

}



.pagination > li:last-child > a,

.pagination > li:last-child > span {

    border-bottom-right-radius: 4px;

    border-top-right-radius: 4px;

}



.pagination > li > a,

.pagination > li > span {

    color: #263238;

}



.pagination > li > a:hover,

.pagination > li > span:hover,

.pagination > li > a:focus,

.pagination > li > span:focus {

    background-color: #f2f4f8;

}



.pagination-split li {

    margin-left: 5px;

    display: inline-block;

    float: left;

}



.pagination-split li:first-child {

    margin-left: 0;

}



.pagination-split li a {

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    border-radius: 4px;

}



.pagination > .active > a,

.pagination > .active > span,

.pagination > .active > a:hover,

.pagination > .active > span:hover,

.pagination > .active > a:focus,

.pagination > .active > span:focus {

    background-color: #000;

    border-color: #000;

}



.pager li > a,

.pager li > span {

    -moz-border-radius: 4px;

    -webkit-border-radius: 4px;

    border-radius: 4px;

    color: #263238;

}



/*******************

Table Cell

*******************/

.table-box {

    display: table;

    width: 100%;

}



.table.no-border tbody td {

    border: 0px;

}



.cell {

    display: table-cell;

    vertical-align: middle;

}



.table td,

.table th {

    border-color: #E5E7EB;

}



.table thead th,

.table th {

    font-weight: 500;

}



/*.table-hover tbody tr:hover {

    background: #f2f4f8;

}*/



.nowrap {

    white-space: nowrap;

}



.lite-padding td {

    padding: 5px;

}



.v-middle td,

.v-middle th {

    vertical-align: middle;

}



.table-responsive {

    display: block;

    width: 99%;

    overflow-x: auto;

    scrollbar-width: thin;

scrollbar-color: var(--brand) transparent;

border-radius: 0;

padding-bottom: 15px;

}

.table-responsive:-webkit-scrollbar {

    width: 6px;

    border-radius: 13px;

}



.table-responsive:-webkit-scrollbar-track {

    background: transparent;

}



.table-responsive:-webkit-scrollbar-thumb {

    background-color: var(--brand);

    border-radius: 6px;

    border: 3px solid transparent;

}



.table-responsive::-webkit-scrollbar, .table-responsive::-webkit-scrollbar-thumb {

    height: 5px;

    border-radius: 13px;

    background-clip: padding-box;

    border: 6px solid transparent;

    width: 5px;

}



.table-responsive::-webkit-scrollbar-thumb {

    box-shadow: inset 0 0 0 10px;

    background: var(--brand);

}



/*******************

Wave Effects

*******************/

.waves-effect {

    position: relative;

    cursor: pointer;

    display: inline-block;

    overflow: hidden;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    -webkit-tap-highlight-color: transparent;

    vertical-align: middle;

    z-index: 1;

    will-change: opacity, transform;

    -webkit-transition: all 0.1s ease-out;

    -moz-transition: all 0.1s ease-out;

    -o-transition: all 0.1s ease-out;

    -ms-transition: all 0.1s ease-out;

    transition: all 0.1s ease-out;

}



.waves-effect .waves-ripple {

    position: absolute;

    border-radius: 50%;

    width: 20px;

    height: 20px;

    margin-top: -10px;

    margin-left: -10px;

    opacity: 0;

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

    -webkit-transition: all 0.7s ease-out;

    -moz-transition: all 0.7s ease-out;

    -o-transition: all 0.7s ease-out;

    -ms-transition: all 0.7s ease-out;

    transition: all 0.7s ease-out;

    -webkit-transition-property: -webkit-transform, opacity;

    -moz-transition-property: -moz-transform, opacity;

    -o-transition-property: -o-transform, opacity;

    -webkit-transition-property: opacity, -webkit-transform;

    transition-property: opacity, -webkit-transform;

    -o-transition-property: transform, opacity;

    transition-property: transform, opacity;

    transition-property: transform, opacity, -webkit-transform;

    -webkit-transform: scale(0);

    -moz-transform: scale(0);

    -ms-transform: scale(0);

    -o-transform: scale(0);

    transform: scale(0);

    pointer-events: none;

}



.waves-effect.waves-light .waves-ripple {

    background-color: rgba(255, 255, 255, 0.45);

}



.waves-effect.waves-red .waves-ripple {

    background-color: rgba(244, 67, 54, 0.7);

}



.waves-effect.waves-yellow .waves-ripple {

    background-color: rgba(255, 235, 59, 0.7);

}



.waves-effect.waves-orange .waves-ripple {

    background-color: rgba(255, 152, 0, 0.7);

}



.waves-effect.waves-purple .waves-ripple {

    background-color: rgba(156, 39, 176, 0.7);

}



.waves-effect.waves-green .waves-ripple {

    background-color: rgba(76, 175, 80, 0.7);

}



.waves-effect.waves-teal .waves-ripple {

    background-color: rgba(0, 150, 136, 0.7);

}



html body .waves-notransition {

    -webkit-transition: none;

    -moz-transition: none;

    -o-transition: none;

    -ms-transition: none;

    transition: none;

}



.waves-circle {

    -webkit-transform: translateZ(0);

    -moz-transform: translateZ(0);

    -ms-transform: translateZ(0);

    -o-transform: translateZ(0);

    transform: translateZ(0);

    text-align: center;

    width: 2.5em;

    height: 2.5em;

    line-height: 2.5em;

    border-radius: 50%;

    -webkit-mask-image: none;

}



.waves-input-wrapper {

    border-radius: 0.2em;

    vertical-align: bottom;

}



.waves-input-wrapper .waves-button-input {

    position: relative;

    top: 0;

    left: 0;

    z-index: 1;

}



.waves-block {

    display: block;

}



/*Badge*/

.badge {

    font-weight: 400;font-size: 14px;

font-weight: 500;

}



.badge-xs {

    font-size: 9px;

}



.badge-xs,

.badge-sm {

    -webkit-transform: translate(0, -2px);

    -ms-transform: translate(0, -2px);

    -o-transform: translate(0, -2px);

    transform: translate(0, -2px);

}



.badge-success {

    background-color: #28a745;

}



.badge-info {

    background-color:#17a2b8; color: #fff;

}

.table tr th.delete-all, .table tr td.delete-all {

    width: 60px;

}

.badge-primary {

    background-color: #007bff; color: #fff;

}



.badge-warning {

    background-color: #ffc107;

}



.badge-danger {

    background-color: #ef5350;

}



.badge-purple {

    background-color: #ebc51a;

}



.badge-red {

    background-color: #fb3a3a;

}



.badge-inverse {

    background-color: #2f3d4a;

}



/*******************

Buttons

******************/

.btn {

    padding: 7px 12px;

    cursor: pointer;

}



.btn-group label {

    color: #ffffff !important;

    margin-bottom: 0px;

}



.btn-group label.btn-secondary {

    color: #67757c !important;

}



.btn-lg {

    padding: .75rem 0.8rem;

    font-size: 1.0rem;

}



.btn-md {

    padding: 12px 55px;

    font-size: 16px;

}



.btn-circle {

    border-radius: 100%;

    width: 40px;

    height: 40px;

    padding: 10px;

}



.btn-circle.btn-sm {

    width: 35px;

    height: 35px;

    padding: 8px 10px;

    font-size: 14px;

}



.btn-circle.btn-lg {

    width: 50px;

    height: 50px;

    padding: 14px 15px;

    font-size: 18px;

    line-height: 22px;

}



.btn-circle.btn-xl {

    width: 70px;

    height: 70px;

    padding: 14px 15px;

    font-size: 24px;

}



.btn-sm {

    padding: .25rem .9rem;

    font-size: 14px;

}



.btn-xs {

    padding: .25rem .5rem;

    font-size: 10px;

}



.button-list button,

.button-list a {

    margin: 5px 12px 5px 0;

}



.btn-outline {

    color: inherit;

    background-color: transparent;

    -webkit-transition: all .5s;

    -o-transition: all .5s;

    transition: all .5s;

}



.btn-rounded {

    border-radius: 60px;

    padding: 7px 18px;

}



.btn-rounded.btn-lg {

    padding: .75rem 1.5rem;

}



.btn-rounded.btn-sm {

    padding: .25rem .5rem;

    font-size: 12px;

}



.btn-rounded.btn-xs {

    padding: .25rem .5rem;

    font-size: 10px;

}



.btn-rounded.btn-md {

    padding: 12px 35px;

    font-size: 16px;

}



.btn-secondary,

.btn-secondary.disabled {

    -webkit-box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);

    box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);

    -webkit-transition: 0.2s ease-in;

    -o-transition: 0.2s ease-in;

    transition: 0.2s ease-in;

    background-color: #ffffff;

    color: #67757c;

    border-color: #b1b8bb;

}



.btn-secondary:hover,

.btn-secondary.disabled:hover {

    -webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);

    box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);

}



.btn-secondary.active, .btn-secondary:active, .btn-secondary:focus,

.btn-secondary.disabled.active,

.btn-secondary.disabled:active,

.btn-secondary.disabled:focus {

    -webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);

    box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);

}



.btn-primary,

.btn-primary.disabled {

    background: #000;

    border: 1px solid #000;

    -webkit-box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);

    box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);

    -webkit-transition: 0.2s ease-in;

    -o-transition: 0.2s ease-in;

    transition: 0.2s ease-in;

}



.btn-primary:hover,

.btn-primary.disabled:hover {

    background: #000;

    -webkit-box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

    border: 1px solid #000;

}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle{background-color: #000;border-color: #000;}



.btn-primary.active, .btn-primary:active, .btn-primary:focus,

.btn-primary.disabled.active,

.btn-primary.disabled:active,

.btn-primary.disabled:focus {

    background: #6352ce;

    -webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);

    box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);

}



.btn-themecolor,

.btn-themecolor.disabled {

    background: #000;

    color: #ffffff;

    border: 1px solid #000;

}



.btn-themecolor:hover,

.btn-themecolor.disabled:hover {

    background: #000;

    opacity: 0.7;

    border: 1px solid #000;

}



.btn-themecolor.active, .btn-themecolor:active, .btn-themecolor:focus,

.btn-themecolor.disabled.active,

.btn-themecolor.disabled:active,

.btn-themecolor.disabled:focus {

    background: #028ee1;

}



.btn-success,

.btn-success.disabled {

    background: #28a745;

    border: 1px solid #28a745;

    -webkit-box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);

    box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);

    -webkit-transition: 0.2s ease-in;

    -o-transition: 0.2s ease-in;

    transition: 0.2s ease-in;

}



.btn-success:hover,

.btn-success.disabled:hover {

    background: #28a745;

    -webkit-box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

    border: 1px solid #28a745;

}



.btn-success.active, .btn-success:active, .btn-success:focus,

.btn-success.disabled.active,

.btn-success.disabled:active,

.btn-success.disabled:focus {

    background: #1eacbe;

    -webkit-box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

}



.btn-info,

.btn-info.disabled {

    background: #000;

    border: 1px solid #000;

    -webkit-box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14), 0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);

    box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14), 0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);

    -webkit-transition: 0.2s ease-in;

    -o-transition: 0.2s ease-in;

    transition: 0.2s ease-in;

}



.btn-info:hover,

.btn-info.disabled:hover {

    background: #000;

    border: 1px solid #000;

    -webkit-box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

}



.btn-info.active, .btn-info:active, .btn-info:focus,

.btn-info.disabled.active,

.btn-info.disabled:active,

.btn-info.disabled:focus {

    background: #028ee1;

    -webkit-box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

}



.btn-warning,

.btn-warning.disabled {

    background: #000;

    color: #ffffff;

    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);

    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);

    border: 1px solid #000;

    -webkit-transition: 0.2s ease-in;

    -o-transition: 0.2s ease-in;

    transition: 0.2s ease-in;

    color: #ffffff;

}



.btn-warning:hover,

.btn-warning.disabled:hover {

    background: #000;

    color: #ffffff;

    -webkit-box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

    border: 1px solid #000;

}



.btn-warning.active, .btn-warning:active, .btn-warning:focus,

.btn-warning.disabled.active,

.btn-warning.disabled:active,

.btn-warning.disabled:focus {

    background: #000;

    color: #ffffff;

    -webkit-box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

}

.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show > .btn-warning.dropdown-toggle{color: #fff;background-color: #000;border-color: #000;}



.btn-danger,

.btn-danger.disabled {

    background: #ef5350;

    border: 1px solid #ef5350;

    -webkit-box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);

    box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);

    -webkit-transition: 0.2s ease-in;

    -o-transition: 0.2s ease-in;

    transition: 0.2s ease-in;

}



.btn-danger:hover,

.btn-danger.disabled:hover {

    background: #ef5350;

    -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);

    box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);

    border: 1px solid #ef5350;

}



.btn-danger.active, .btn-danger:active, .btn-danger:focus,

.btn-danger.disabled.active,

.btn-danger.disabled:active,

.btn-danger.disabled:focus {

    background: #e6294b;

    -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);

    box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);

}



.btn-inverse,

.btn-inverse.disabled {

    background: #2f3d4a;

    border: 1px solid #2f3d4a;

    color: #ffffff;

}



.btn-inverse:hover,

.btn-inverse.disabled:hover {

    background: #2f3d4a;

    opacity: 0.7;

    color: #ffffff;

    border: 1px solid #2f3d4a;

}



.btn-inverse.active, .btn-inverse:active, .btn-inverse:focus,

.btn-inverse.disabled.active,

.btn-inverse.disabled:active,

.btn-inverse.disabled:focus {

    background: #232a37;

    color: #ffffff;

}



.btn-red,

.btn-red.disabled {

    background: #fb3a3a;

    border: 1px solid #fb3a3a;

    color: #ffffff;

}



.btn-red:hover,

.btn-red.disabled:hover {

    opacity: 0.7;

    border: 1px solid #fb3a3a;

    background: #fb3a3a;

}



.btn-red.active, .btn-red:active, .btn-red:focus,

.btn-red.disabled.active,

.btn-red.disabled:active,

.btn-red.disabled:focus {

    background: #e6294b;

}



.btn-outline-secondary {

    background-color: #ffffff;

    -webkit-box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);

    box-shadow: 0 2px 2px 0 rgba(169, 169, 169, 0.14), 0 3px 1px -2px rgba(169, 169, 169, 0.2), 0 1px 5px 0 rgba(169, 169, 169, 0.12);

    -webkit-transition: 0.2s ease-in;

    -o-transition: 0.2s ease-in;

    transition: 0.2s ease-in;

}



.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary.focus {

    -webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);

    box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);

}



.btn-outline-secondary.active, .btn-outline-secondary:active, .btn-outline-secondary:focus {

    -webkit-box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);

    box-shadow: 0 14px 26px -12px rgba(169, 169, 169, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(169, 169, 169, 0.2);

}



.btn-outline-primary {

    color: #000;

    background-color: #ffffff;

    border-color: #000;

    -webkit-box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);

    box-shadow: 0 2px 2px 0 rgba(116, 96, 238, 0.14), 0 3px 1px -2px rgba(116, 96, 238, 0.2), 0 1px 5px 0 rgba(116, 96, 238, 0.12);

    -webkit-transition: 0.2s ease-in;

    -o-transition: 0.2s ease-in;

    transition: 0.2s ease-in;

}



.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.focus {

    background: #000;

    -webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);

    box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);

    color: #ffffff;

    border-color: #000;

}



.btn-outline-primary.active, .btn-outline-primary:active, .btn-outline-primary:focus {

    -webkit-box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);

    box-shadow: 0 14px 26px -12px rgba(116, 96, 238, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(116, 96, 238, 0.2);

    background: #6352ce;

}



.btn-outline-success {

    color: #26dad2;

    background-color: transparent;

    border-color: #26dad2;

    -webkit-box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);

    box-shadow: 0 2px 2px 0 rgba(40, 190, 189, 0.14), 0 3px 1px -2px rgba(40, 190, 189, 0.2), 0 1px 5px 0 rgba(40, 190, 189, 0.12);

    -webkit-transition: 0.2s ease-in;

    -o-transition: 0.2s ease-in;

    transition: 0.2s ease-in;

}



.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success.focus {

    background: #26dad2;

    border-color: #26dad2;

    color: #ffffff;

    -webkit-box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

}



.btn-outline-success.active, .btn-outline-success:active, .btn-outline-success:focus {

    -webkit-box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

    background: #1eacbe;

}



.btn-outline-info {

    color: #000;

    background-color: transparent;

    border-color: #000;

    -webkit-box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14), 0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);

    box-shadow: 0 2px 2px 0 rgba(66, 165, 245, 0.14), 0 3px 1px -2px rgba(66, 165, 245, 0.2), 0 1px 5px 0 rgba(66, 165, 245, 0.12);

    -webkit-transition: 0.2s ease-in;

    -o-transition: 0.2s ease-in;

    transition: 0.2s ease-in;

}



.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info.focus {

    background: #000;

    border-color: #000;

    color: #ffffff;

    -webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);

    box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);

}



.btn-outline-info.active, .btn-outline-info:active, .btn-outline-info:focus {

    -webkit-box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);

    box-shadow: 0 14px 26px -12px rgba(23, 105, 255, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(23, 105, 255, 0.2);

    background: #028ee1;

}



.btn-outline-warning {

    color: #000;

    background-color: transparent;

    border-color: #000;

    -webkit-box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14), 0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);

    box-shadow: 0 2px 2px 0 rgba(248, 194, 0, 0.14), 0 3px 1px -2px rgba(248, 194, 0, 0.2), 0 1px 5px 0 rgba(248, 194, 0, 0.12);

    -webkit-transition: 0.2s ease-in;

    -o-transition: 0.2s ease-in;

    transition: 0.2s ease-in;

}



.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning.focus {

    background: #000;

    border-color: #000;

    color: #ffffff;

    -webkit-box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);

    box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);

}



.btn-outline-warning.active, .btn-outline-warning:active, .btn-outline-warning:focus {

    -webkit-box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);

    box-shadow: 0 14px 26px -12px rgba(248, 194, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(248, 194, 0, 0.2);

    background: #000;

}



.btn-outline-danger {

    color: #ef5350;

    background-color: transparent;

    border-color: #ef5350;

    -webkit-box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);

    box-shadow: 0 2px 2px 0 rgba(239, 83, 80, 0.14), 0 3px 1px -2px rgba(239, 83, 80, 0.2), 0 1px 5px 0 rgba(239, 83, 80, 0.12);

    -webkit-transition: 0.2s ease-in;

    -o-transition: 0.2s ease-in;

    transition: 0.2s ease-in;

}



.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger.focus {

    background: #ef5350;

    border-color: #ef5350;

    color: #ffffff;

    -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);

    box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);

}



.btn-outline-danger.active, .btn-outline-danger:active, .btn-outline-danger:focus {

    -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);

    box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);

    background: #e6294b;

}



.btn-outline-red {

    color: #fb3a3a;

    background-color: transparent;

    border-color: #fb3a3a;

}



.btn-outline-red:hover, .btn-outline-red:focus, .btn-outline-red.focus {

    background: #fb3a3a;

    border-color: #fb3a3a;

    color: #ffffff;

    -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);

    box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);

}



.btn-outline-red.active, .btn-outline-red:active, .btn-outline-red:focus {

    -webkit-box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);

    box-shadow: 0 14px 26px -12px rgba(239, 83, 80, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(239, 83, 80, 0.2);

    background: #e6294b;

}



.btn-outline-inverse {

    color: #2f3d4a;

    background-color: transparent;

    border-color: #2f3d4a;

}



.btn-outline-inverse:hover, .btn-outline-inverse:focus, .btn-outline-inverse.focus {

    background: #2f3d4a;

    border-color: #2f3d4a;

    color: #ffffff;

}



.btn-primary.active.focus,

.btn-primary.active:focus,

.btn-primary.active:hover,

.btn-primary.focus:active,

.btn-primary:active:focus,

.btn-primary:active:hover,

.open > .dropdown-toggle.btn-primary.focus,

.open > .dropdown-toggle.btn-primary:focus,

.open > .dropdown-toggle.btn-primary:hover,

.btn-primary.focus,

.btn-primary:focus {

    background-color: #6352ce;

    border: 1px solid #6352ce;

}



.btn-success.active.focus,

.btn-success.active:focus,

.btn-success.active:hover,

.btn-success.focus:active,

.btn-success:active:focus,

.btn-success:active:hover,

.open > .dropdown-toggle.btn-success.focus,

.open > .dropdown-toggle.btn-success:focus,

.open > .dropdown-toggle.btn-success:hover,

.btn-success.focus,

.btn-success:focus {

    background-color: #1eacbe;

    border: 1px solid #1eacbe;

}



.btn-info.active.focus,

.btn-info.active:focus,

.btn-info.active:hover,

.btn-info.focus:active,

.btn-info:active:focus,

.btn-info:active:hover,

.open > .dropdown-toggle.btn-info.focus,

.open > .dropdown-toggle.btn-info:focus,

.open > .dropdown-toggle.btn-info:hover,

.btn-info.focus,

.btn-info:focus {

    background-color: #028ee1;

    border: 1px solid #028ee1;

}



.btn-warning.active.focus,

.btn-warning.active:focus,

.btn-warning.active:hover,

.btn-warning.focus:active,

.btn-warning:active:focus,

.btn-warning:active:hover,

.open > .dropdown-toggle.btn-warning.focus,

.open > .dropdown-toggle.btn-warning:focus,

.open > .dropdown-toggle.btn-warning:hover,

.btn-warning.focus,

.btn-warning:focus {

    background-color: #000;

    border: 1px solid #000;

}



.btn-danger.active.focus,

.btn-danger.active:focus,

.btn-danger.active:hover,

.btn-danger.focus:active,

.btn-danger:active:focus,

.btn-danger:active:hover,

.open > .dropdown-toggle.btn-danger.focus,

.open > .dropdown-toggle.btn-danger:focus,

.open > .dropdown-toggle.btn-danger:hover,

.btn-danger.focus,

.btn-danger:focus {

    background-color: #e6294b;

    border: 1px solid #e6294b;

}



.btn-inverse:hover,

.btn-inverse:focus,

.btn-inverse:active,

.btn-inverse.active,

.btn-inverse.focus,

.btn-inverse:active,

.btn-inverse:focus,

.btn-inverse:hover,

.open > .dropdown-toggle.btn-inverse {

    background-color: #232a37;

    border: 1px solid #232a37;

}



.btn-red:hover,

.btn-red:focus,

.btn-red:active,

.btn-red.active,

.btn-red.focus,

.btn-red:active,

.btn-red:focus,

.btn-red:hover,

.open > .dropdown-toggle.btn-red {

    background-color: #d61f1f;

    border: 1px solid #d61f1f;

    color: #ffffff;

}



.button-box .btn {

    margin: 0 8px 8px 0px;

}



.btn-label {

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

    display: inline-block;

    margin: -6px 12px -6px -14px;

    padding: 7px 15px;

}



.btn-facebook {

    color: #ffffff;

    background-color: #3b5998;

}



.btn-twitter {

    color: #ffffff;

    background-color: #55acee;

}



.btn-linkedin {

    color: #ffffff;

    background-color: #007bb6;

}



.btn-dribbble {

    color: #ffffff;

    background-color: #ea4c89;

}



.btn-googleplus {

    color: #ffffff;

    background-color: #dd4b39;

}



.btn-instagram {

    color: #ffffff;

    background-color: #3f729b;

}



.btn-pinterest {

    color: #ffffff;

    background-color: #cb2027;

}



.btn-dropbox {

    color: #ffffff;

    background-color: #007ee5;

}



.btn-flickr {

    color: #ffffff;

    background-color: #ff0084;

}



.btn-tumblr {

    color: #ffffff;

    background-color: #32506d;

}



.btn-skype {

    color: #ffffff;

    background-color: #00aff0;

}



.btn-youtube {

    color: #ffffff;

    background-color: #bb0000;

}



.btn-github {

    color: #ffffff;

    background-color: #171515;

}



/*******************

Notify

*******************/

.notify {

    position: relative;

    top: -22px;

    right: -9px;

}



.notify .heartbit {

    position: absolute;

    top: -20px;

    right: -4px;

    height: 25px;

    width: 25px;

    z-index: 10;

    border: 5px solid #ef5350;

    border-radius: 70px;

    -moz-animation: heartbit 1s ease-out;

    -moz-animation-iteration-count: infinite;

    -o-animation: heartbit 1s ease-out;

    -o-animation-iteration-count: infinite;

    -webkit-animation: heartbit 1s ease-out;

    -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite;

}



.notify .point {

    width: 6px;

    height: 6px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    border-radius: 30px;

    background-color: #ef5350;

    position: absolute;

    right: 6px;

    top: -10px;

}



@-moz-keyframes heartbit {

    0% {

        -moz-transform: scale(0);

        opacity: 0.0;

    }

    25% {

        -moz-transform: scale(0.1);

        opacity: 0.1;

    }

    50% {

        -moz-transform: scale(0.5);

        opacity: 0.3;

    }

    75% {

        -moz-transform: scale(0.8);

        opacity: 0.5;

    }

    100% {

        -moz-transform: scale(1);

        opacity: 0.0;

    }

}



@-webkit-keyframes heartbit {

    0% {

        -webkit-transform: scale(0);

        opacity: 0.0;

    }

    25% {

        -webkit-transform: scale(0.1);

        opacity: 0.1;

    }

    50% {

        -webkit-transform: scale(0.5);

        opacity: 0.3;

    }

    75% {

        -webkit-transform: scale(0.8);

        opacity: 0.5;

    }

    100% {

        -webkit-transform: scale(1);

        opacity: 0.0;

    }

}



/*******************

File Upload

******************/

.fileupload {

    overflow: hidden;

    position: relative;

}



.fileupload input.upload {

    cursor: pointer;

    filter: alpha(opacity=0);

    font-size: 20px;

    margin: 0;

    opacity: 0;

    padding: 0;

    position: absolute;

    right: 0;

    top: 0;

}



/*******************

Megamenu

******************/

.mega-dropdown {

    position: static;

    width: 100%;

}



.mega-dropdown .dropdown-menu {

    width: 100%;

    padding: 30px;

    margin-top: 0px;

}



.mega-dropdown ul {

    padding: 0px;

}



.mega-dropdown ul li {

    list-style: none;

}



.mega-dropdown .carousel-item .container {

    padding: 0px;

}



.mega-dropdown .nav-accordion .card {

    margin-bottom: 1px;

}



.mega-dropdown .nav-accordion .card-header {

    background: #ffffff;

}



.mega-dropdown .nav-accordion .card-header h5 {

    margin: 0px;

}



.mega-dropdown .nav-accordion .card-header h5 a {

    text-decoration: none;

    color: #67757c;

}



/*******************

List-style-none

******************/

ul.list-style-none {

    margin: 0px;

    padding: 0px;

}



ul.list-style-none li {

    list-style: none;

}



ul.list-style-none li a {

    color: #67757c;

    padding: 8px 0px;

    display: block;

    text-decoration: none;

}



ul.list-style-none li a:hover {

    color: #000;

}



/*******************

dropdown-item

******************/

.dropdown-item {

    padding: 8px 1rem;

    color: #67757c;

}



/*******************

Custom-select

******************/

.custom-select {

    background: url(../../assets/images/custom-select.png) right 0.75rem center no-repeat;

}



/*******************

textarea

******************/

textarea {

    resize: none;

}



/*******************

Form-control

******************/

.form-control {

    color: #67757c;

    min-height: 38px;

    display: initial;

}



.form-control-sm {

    min-height: 20px;

}



.form-control:disabled,

.form-control[readonly] {

    opacity: 0.7;

}



.custom-control-input:focus ~ .custom-control-indicator {

    -webkit-box-shadow: none;

    box-shadow: none;

}



.custom-control-input:checked ~ .custom-control-indicator {

    background-color: #26dad2;

}



form label {

    font-weight: 400;

}



.form-group {

    margin-bottom: 25px;

}



.form-horizontal label {

    margin-bottom: 0px;

}



.form-control-static {

    padding-top: 0px;

}



.form-bordered .form-group {

    border-bottom: 1px solid rgba(120, 130, 140, 0.13);

    padding-bottom: 20px;

}



/*******************

Layouts

******************/

/*Card-noborders*/

.card-no-border .card {

    border: 0px;

    border-radius: 4px;

    -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);

    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);

}

.card-no-border .card:hover {

  -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);

  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);

  transition: 0.5s;

}

.card-no-border .shadow-none {

    -webkit-box-shadow: none;

    box-shadow: none;

}



.card-outline-danger,

.card-outline-info,

.card-outline-warning,

.card-outline-success,

.card-outline-primary {

    background: #ffffff;

}



.card-fullscreen {

    position: fixed;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    z-index: 9999;

    overflow: auto;

}



/*******************/

/*widgets -app*/

/*******************/

.css-bar:after {

    z-index: 1;

}



.css-bar > i {

    z-index: 10;

}



/*******************/

/*single column*/

/*******************/

.single-column .left-sidebar {

    display: none;

}



.single-column .page-wrapper {

    margin-left: 0px;

}



.fix-width {

    width: 100%;

    max-width: 1170px;

    margin: 0 auto;

}



/*******************/

/*card-default*/

/*******************/

.card-default .card-header {

    background: #ffffff;

    border-bottom: 0px;

}



/***********************

 13/02/2018 (New Update)

***********************/

.progress {

    height: auto;

}



.card-group {

    margin-bottom: 30px;

}



/*

Template Name: Admin Press Admin

Author: Themedesigner

Email: niravjoshi87@gmail.com

File: scss

*/

/*

Template Name: Admin Press Admin

Author: Themedesigner

Email: niravjoshi87@gmail.com

File: scss

*/

/*Theme Colors*/

/*bootstrap Color*/

/*Light colors*/

/*Normal Color*/

/*Extra Variable*/

/*Preloader*/

.preloader {

    width: 100%;

    height: 100%;

    top: 0px;

    position: fixed;

    z-index: 99999;

    background: #fff;

}



.preloader .cssload-speeding-wheel {

    position: absolute;

    top: calc(50% - 3.5px);

    left: calc(50% - 3.5px);

}



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

 For all pages

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

#main-wrapper {

    width: auto;

}



.boxed #main-wrapper {

    width: 100%;

    max-width: 1300px;

    margin: 0 auto;

    -webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);

    box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);

}



.boxed #main-wrapper .sidebar-footer {

    position: absolute;

}



.boxed #main-wrapper .footer {

    display: none;

}



.page-wrapper {

    background: #fff;

    padding-bottom: 45px;

    min-height: 850px !important;

}



.container-fluid {

    padding: 0 25px 25px 25px;

}



html {

    background: #fff;

}



/*******************

 Topbar

*******************/

.topbar {

    position: relative;

    z-index: 50;

}



.topbar .top-navbar {

    min-height: 50px;

    padding: 0px 15px 0 0;

}



.topbar .top-navbar .dropdown-toggle::after {

    display: none;

}



.topbar .top-navbar .navbar-header {

    line-height: 45px;

    text-align: center;

    height: 90px;

    padding: 10px 0;

    display: flex;

    justify-content: center;

    align-items: center;

}



.topbar .top-navbar .navbar-header .navbar-brand {

    margin-right: 0px;

    padding-bottom: 0px;

    padding-top: 0px;

}



.topbar .top-navbar .navbar-header .navbar-brand

.topbar .top-navbar .navbar-header .navbar-brand .light-logo {

    display: none;

}



.topbar .top-navbar .navbar-header .navbar-brand b {

    line-height: 47px;

    display: inline-block;

}



.topbar .top-navbar .navbar-nav > .nav-item > .nav-link {

    padding-left: .75rem;

    padding-right: .75rem;

    font-size: 24px;

    line-height: 40px;

}



.topbar .top-navbar .navbar-nav > .nav-item.show {

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

}



.topbar .profile-pic {

    width: 30px;

    border-radius: 100%;

}

.topbar .nav-item-user p{font-size: 12px}

.topbar .top-navbar .navbar-nav > .nav-item > .nav-link.sidebartoggler{padding: 10px 10px;

  background: #374151;

  border-radius: 100px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-left: -18px;}

.mini-sidebar .topbar .top-navbar .navbar-nav > .nav-item > .nav-link.sidebartoggler{transform: rotate(180deg);} 

.topbar .dropdown-menu {

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);

    -webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);

    -moz-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);

    border-color: rgba(120, 130, 140, 0.13);

}



.topbar .dropdown-menu .dropdown-item {

    padding: 7px 1.5rem;

}



.topbar ul.dropdown-user {

    padding: 0px;

    min-width: 270px;

}



.topbar ul.dropdown-user li {

    list-style: none;

    padding: 0px;

    margin: 0px;

}



.topbar ul.dropdown-user li.divider {

    height: 1px;

    margin: 9px 0;

    overflow: hidden;

    background-color: rgba(120, 130, 140, 0.13);

}



.topbar ul.dropdown-user li .dw-user-box {

    padding: 10px 15px;

}



.topbar ul.dropdown-user li .dw-user-box .u-img {

    width: 50px;

    display: inline-block;

    vertical-align: top;

}



.topbar ul.dropdown-user li .dw-user-box .u-img img {

    width: 100%;

    border-radius: 5px;

}



.topbar ul.dropdown-user li .dw-user-box .u-text {

    display: inline-block;

    padding-left: 10px;

}



.topbar ul.dropdown-user li .dw-user-box .u-text h4 {

    margin: 0px;

    font-size: 15px;

}



.topbar ul.dropdown-user li .dw-user-box .u-text p {

    margin-bottom: 2px;

    font-size: 12px;

}



.topbar ul.dropdown-user li .dw-user-box .u-text .btn {

    color: #ffffff;

    padding: 5px 10px;

    display: inline-block;

}



.topbar ul.dropdown-user li .dw-user-box .u-text .btn:hover {

    background: #e6294b;

}



.topbar ul.dropdown-user li a {

    padding: 9px 15px;

    display: block;

    color: #67757c;

}



.topbar ul.dropdown-user li a:hover {

    background: #f2f4f8;

    color: #000;

    text-decoration: none;

}



.search-box .app-search {

    position: absolute;

    margin: 0px;

    display: block;

    z-index: 110;

    width: 100%;

    top: -1px;

    -webkit-box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);

    box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);

    display: none;

    left: 0px;

}



.search-box .app-search input {

    width: 100.5%;

    padding: 20px 40px 20px 20px;

    border-radius: 0px;

    font-size: 17px;

    -webkit-transition: 0.5s ease-in;

    -o-transition: 0.5s ease-in;

    transition: 0.5s ease-in;

}



.search-box .app-search input:focus {

    border-color: #ffffff;

}



.search-box .app-search .srh-btn {

    position: absolute;

    top: 23px;

    cursor: pointer;

    background: #ffffff;

    width: 15px;

    height: 15px;

    right: 20px;

    font-size: 14px;

}



.mini-sidebar .top-navbar .navbar-header {

    width: 60px;

    text-align: center;

    height: 60px;

}



.logo-center .top-navbar .navbar-header {

    position: absolute;

    left: 0;

    right: 0;

    margin: 0 auto;

}



/*******************

 Breadcrumb and page title

*******************/

.page-titles {

    background: #ffffff;

    margin: 0 0px 30px;

    padding: 15px 10px;

    position: relative;

    z-index: 10;

    -webkit-box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);

    box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);

}



.page-titles h3 {

    margin-bottom: 0px;

    margin-top: 0px;

    color: #000 !important;

    font-weight: 600;

}



.page-titles .breadcrumb {

    padding: 0px;

    background: transparent;

    font-size: 14px;

}



.page-titles .breadcrumb li {

    margin-top: 0px;

    margin-bottom: 0px;

}



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

    content: "\e649";

    font-family: themify;

    color: #a6b7bf;

    font-size: 11px;

}



.page-titles .breadcrumb .breadcrumb-item.active {

    color: #99abb4;

}



.page-titles h3.text-white {

    color: #fff !important;

}



/*******************

 Right side toggle

*******************/

@-webkit-keyframes rotate {

    from {

        -webkit-transform: rotate(0deg);

    }

    to {

        -webkit-transform: rotate(360deg);

    }

}



@-moz-keyframes rotate {

    from {

        -moz-transform: rotate(0deg);

    }

    to {

        -moz-transform: rotate(360deg);

    }

}



@keyframes rotate {

    from {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    to {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}



.right-side-toggle {

    position: relative;

}



.right-side-toggle i {

    -webkit-transition-property: -webkit-transform;

    -webkit-transition-duration: 1s;

    -moz-transition-property: -moz-transform;

    -moz-transition-duration: 1s;

    transition-property: -webkit-transform;

    -o-transition-property: transform;

    transition-property: transform;

    transition-property: transform, -webkit-transform;

    -o-transition-duration: 1s;

    transition-duration: 1s;

    -webkit-animation-name: rotate;

    -webkit-animation-duration: 2s;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;

    -moz-animation-name: rotate;

    -moz-animation-duration: 2s;

    -moz-animation-iteration-count: infinite;

    -moz-animation-timing-function: linear;

    animation-name: rotate;

    animation-duration: 2s;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

    position: absolute;

    top: 18px;

    left: 18px;

}



.right-sidebar {

    position: fixed;

    right: -265px;

    width: 265px;

    display: none;

    z-index: 1100;

    background: #ffffff;

    top: 0px;

    padding-bottom: 20px;

    height: 100%;

    -webkit-box-shadow: 5px 1px 40px rgba(0, 0, 0, 0.1);

    box-shadow: 5px 1px 40px rgba(0, 0, 0, 0.1);

    -webkit-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all 0.3s ease;

}



.right-sidebar .rpanel-title {

    display: block;

    padding: 19px 20px;

    color: #ffffff;

    text-transform: uppercase;

    font-size: 15px;

    background: #000;

}



.right-sidebar .rpanel-title span {

    float: right;

    cursor: pointer;

    font-size: 11px;

}



.right-sidebar .rpanel-title span:hover {

    color: #ffffff;

}



.right-sidebar .r-panel-body {

    padding: 20px;

}



.right-sidebar .r-panel-body ul {

    margin: 0px;

    padding: 0px;

}



.right-sidebar .r-panel-body ul li {

    list-style: none;

    padding: 5px 0;

}



.shw-rside {

    right: 0px;

    width: 265px;

    display: block;

}



.chatonline img {

    margin-right: 10px;

    float: left;

    width: 30px;

}



.chatonline li a {

    padding: 13px 0;

    float: left;

    width: 100%;

}



.chatonline li a span {

    color: #67757c;

}



.chatonline li a span small {

    display: block;

    font-size: 10px;

}



/*******************

 Right side toggle

*******************/

ul#themecolors {

    display: block;

}



ul#themecolors li {

    display: inline-block;

}



ul#themecolors li:first-child {

    display: block;

}



ul#themecolors li a {

    width: 50px;

    height: 50px;

    display: inline-block;

    margin: 5px;

    color: transparent;

    position: relative;

}



ul#themecolors li a.working:before {

    content: "\f00c";

    font-family: "FontAwesome";

    font-size: 18px;

    line-height: 50px;

    width: 50px;

    height: 50px;

    position: absolute;

    top: 0;

    left: 0;

    color: #ffffff;

    text-align: center;

}



.default-theme {

    background: #99abb4;

}



.green-theme {

    background: #26dad2;

}



.yellow-theme {

    background: #000;

}



.red-theme {

    background: #ef5350;

}



.blue-theme {

    background: #000;

}



.purple-theme {

    background: #ebc51a;

}



.megna-theme {

    background: #00897b;

}



.default-dark-theme {

    background: #263238;

    /* Old browsers */

    background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #99abb4 23%, #99abb4 99%);

    /* FF3.6-15 */

    background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #99abb4 23%, #99abb4 99%);

    /* Chrome10-25,Safari5.1-6 */

    background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #99abb4), color-stop(99%, #99abb4));

    background: -o-linear-gradient(left, #263238 0%, #263238 23%, #99abb4 23%, #99abb4 99%);

    background: linear-gradient(to right, #263238 0%, #263238 23%, #99abb4 23%, #99abb4 99%);

}



.green-dark-theme {

    background: #263238;

    /* Old browsers */

    background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #26dad2 23%, #26dad2 99%);

    /* FF3.6-15 */

    background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #00c292 23%, #26dad2 99%);

    /* Chrome10-25,Safari5.1-6 */

    background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #26dad2), color-stop(99%, #26dad2));

    background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #26dad2 23%, #26dad2 99%);

    background: -o-linear-gradient(left, #263238 0%, #263238 23%, #26dad2 23%, #26dad2 99%);

    background: linear-gradient(to right, #263238 0%, #263238 23%, #26dad2 23%, #26dad2 99%);

}



.yellow-dark-theme {

    background: #263238;

    /* Old browsers */

    background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);

    /* FF3.6-15 */

    background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);

    /* Chrome10-25,Safari5.1-6 */

    background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #ef5350), color-stop(99%, #ef5350));

    background: -o-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);

    background: linear-gradient(to right, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);

}



.blue-dark-theme {

    background: #263238;

    /* Old browsers */

    background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #000 23%, #000 99%);

    /* FF3.6-15 */

    background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #000 23%, #000 99%);

    /* Chrome10-25,Safari5.1-6 */

    background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #000), color-stop(99%, #000));

    background: -o-linear-gradient(left, #263238 0%, #263238 23%, #000 23%, #000 99%);

    background: linear-gradient(to right, #263238 0%, #263238 23%, #000 23%, #000 99%);

}



.purple-dark-theme {

    background: #263238;

    /* Old browsers */

    background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #ebc51a 23%, #ebc51a 99%);

    /* FF3.6-15 */

    background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #ebc51a 23%, #ebc51a 99%);

    /* Chrome10-25,Safari5.1-6 */

    background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #ebc51a), color-stop(99%, #ebc51a));

    background: -o-linear-gradient(left, #263238 0%, #263238 23%, #ebc51a 23%, #ebc51a 99%);

    background: linear-gradient(to right, #263238 0%, #263238 23%, #ebc51a 23%, #ebc51a 99%);

}



.megna-dark-theme {

    background: #263238;

    /* Old browsers */

    background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #00897b 23%, #00897b 99%);

    /* FF3.6-15 */

    background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #00897b 23%, #00897b 99%);

    /* Chrome10-25,Safari5.1-6 */

    background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #00897b), color-stop(99%, #00897b));

    background: -o-linear-gradient(left, #263238 0%, #263238 23%, #00897b 23%, #00897b 99%);

    background: linear-gradient(to right, #263238 0%, #263238 23%, #00897b 23%, #00897b 99%);

}



.red-dark-theme {

    background: #263238;

    /* Old browsers */

    background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);

    /* FF3.6-15 */

    background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);

    /* Chrome10-25,Safari5.1-6 */

    background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #ef5350), color-stop(99%, #ef5350));

    background: -o-linear-gradient(left, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);

    background: linear-gradient(to right, #263238 0%, #263238 23%, #ef5350 23%, #ef5350 99%);

}



/*******************

 page title

*******************/

.page-titles {

    padding-bottom: 20px;

}



/*******************

 Footer

*******************/

.footer {

    bottom: 0;

    color: #67757c;

    left: 0px;

    padding: 17px 15px;

    position: absolute;

    right: 0;

    border-top: 1px solid rgba(120, 130, 140, 0.13);

    background: #ffffff;font-size: 14px;

}



/*******************

 Card title

*******************/

.card {

    margin-bottom: 30px;

}



.card .card-subtitle {

    font-weight: 300;

    margin-bottom: 15px;

    color: #99abb4;

}



.card-inverse .card-bodyquote .blockquote-footer,

.card-inverse .card-link,

.card-inverse .card-subtitle,

.card-inverse .card-text {

    color: rgba(255, 255, 255, 0.65);

}



.card-success {

    background: #26dad2;

    border-color: #26dad2;

}



.card-danger {

    background: #ef5350;

    border-color: #ef5350;

}



.card-warning {

    background: #000;

    border-color: #000;

}



.card-info {

    background: #000;

    border-color: #000;

}



.card-primary {

    background: #000;

    border-color: #000;

}



.card-dark {

    background: #2f3d4a;

    border-color: #2f3d4a;

}



.card-megna {

    background: #00897b;

    border-color: #00897b;

}



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

 Buttons page

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

.button-group .btn {

    margin-bottom: 5px;

    margin-right: 5px;

}



.no-button-group .btn {

    margin-bottom: 5px;

    margin-right: 0px;

}



.btn .text-active {

    display: none;

}



.btn.active .text-active {

    display: inline-block;

}



.btn.active .text {

    display: none;

}



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

 Cards page

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

.card-actions {

    float: right;

}



.card-actions a {

    cursor: pointer;

    color: #67757c;

    opacity: 0.7;

    padding-left: 7px;

    font-size: 13px;

}



.card-actions a:hover {

    opacity: 1;

}



.card-columns .card {

    margin-bottom: 20px;

}



.collapsing {

    -webkit-transition: height .08s ease;

    -o-transition: height .08s ease;

    transition: height .08s ease;

}



.card-info {

    background: #000;

    border-color: #000;

}



.card-primary {

    background: #000;

    border-color: #000;

}



.card-outline-info {

    border-color: #000;

}



.card-outline-info .card-header {

    background: #000;

    border-color: #000;

}



.card-outline-inverse {

    border-color: #2f3d4a;

}



.card-outline-inverse .card-header {

    background: #2f3d4a;

    border-color: #2f3d4a;

}



.card-outline-warning {

    border-color: #000;

}



.card-outline-warning .card-header {

    background: #000;

    border-color: #000;

}



.card-outline-success {

    border-color: #26dad2;

}



.card-outline-success .card-header {

    background: #26dad2;

    border-color: #26dad2;

}



.card-outline-danger {

    border-color: #ef5350;

}



.card-outline-danger .card-header {

    background: #ef5350;

    border-color: #ef5350;

}



.card-outline-primary {

    border-color: #000;

}



.card-outline-primary .card-header {

    background: #000;

    border-color: #000;

}



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

Breadcrumb

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

.bc-colored .breadcrumb-item,

.bc-colored .breadcrumb-item a {

    color: #ffffff;

}



.bc-colored .breadcrumb-item.active,

.bc-colored .breadcrumb-item a.active {

    opacity: 0.7;

}



.bc-colored .breadcrumb-item + .breadcrumb-item::before {

    color: rgba(255, 255, 255, 0.4);

}



.breadcrumb {

    margin-bottom: 0px;

}



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

 Ui-bootstrap

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

ul.list-icons {

    margin: 0px;

    padding: 0px;

}



ul.list-icons li {

    list-style: none;

    line-height: 30px;

    margin: 5px 0;

    -webkit-transition: 0.2s ease-in;

    -o-transition: 0.2s ease-in;

    transition: 0.2s ease-in;

}



ul.list-icons li a {

    color: #67757c;

}



ul.list-icons li a:hover {

    color: #000;

}



ul.list-icons li i {

    font-size: 13px;

    padding-right: 8px;

}



ul.list-inline li {

    display: inline-block;

    padding: 0 8px;

}



ul.two-part {

    margin: 0px;

}



ul.two-part li {

    width: 48.8%;

}



/*Accordion*/

html body .accordion .card {

    margin-bottom: 0px;

}



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

 flot chart

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

.flot-chart {

    display: block;

    height: 400px;

}



.flot-chart-content {

    width: 100%;

    height: 100%;

}



html body .jqstooltip,

html body .flotTip {

    width: auto !important;

    height: auto !important;

    background: #263238;

    color: #ffffff;

    padding: 5px 10px;

}



body .jqstooltip {

    border-color: transparent;

    border-radius: 60px;

}



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

Easy pie chart

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

.chart {

    position: relative;

    display: inline-block;

    width: 100px;

    height: 100px;

    margin-top: 20px;

    margin-bottom: 20px;

    text-align: center;

}



.chart canvas {

    position: absolute;

    top: 0;

    left: 0;

}



.chart.chart-widget-pie {

    margin-top: 5px;

    margin-bottom: 5px;

}



.pie-chart > span {

    left: 0;

    margin-top: -2px;

    position: absolute;

    right: 0;

    text-align: center;

    top: 50%;

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

}



.chart > span > img {

    left: 0;

    margin-top: -2px;

    position: absolute;

    right: 0;

    text-align: center;

    top: 50%;

    width: 60%;

    height: 60%;

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    margin: 0 auto;

}



.percent {

    display: inline-block;

    line-height: 100px;

    z-index: 2;

    font-weight: 600;

    font-size: 18px;

    color: #263238;

}



.percent:after {

    content: '%';

    margin-left: 0.1em;

    font-size: .8em;

}



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

Dashboard1 chart

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

.ct-charts {

    position: relative;

}



.amp-pxl {

    position: relative;

}



.amp-pxl .ct-series-a .ct-bar {

    stroke: #000;

}



.amp-pxl .ct-series-b .ct-bar {

    stroke: #26dad2;

}



.c3-chart-arcs-title,

.c3-legend-item {

    font-family: "Urbanist", sans-serif;

    fill: #67757c;

}



html body #visitor .c3-chart-arcs-title {

    font-size: 18px;

    fill: #99abb4;

}



.stylish-table thead th {

    font-weight: 400;

    color: #99abb4;

    border: 0px;

    border-bottom: 1px;

}



.stylish-table tbody tr {

    border-left: 4px solid #ffffff;

}



.stylish-table tbody tr:hover, .stylish-table tbody tr.active {

    border-left: 4px solid #000;

}



.stylish-table tbody td {

    vertical-align: middle;

}



.stylish-table tbody td h6 {

    font-weight: 500;

    margin-bottom: 0px;

    white-space: nowrap;

}



.stylish-table tbody td small {

    line-height: 12px;

    white-space: nowrap;

}

.orders-tracking-item-details > div {

    padding-bottom: 3px;

    font-size: 13px;

}

.orders-tracking-item-details .variant-info ul li span.label {

    font-weight: 600;

    padding: 10;

    padding-right: 10px;

}

.orders-tracking-item-details .variant-info ul li span {

    color: #333;

    font-size: 14px;

    text-transform: capitalize;

}

.orders-tracking-item-details .variant-info ul li {

    text-align: left;

    padding-bottom: 0;

    display: inline-block;

    padding-right: 5px;

    border-right: 1px solid #ccc;

    margin-right: 5px;

}

.orders-tracking-item-details .variant-info ul li span.value {

    padding: 2px 5px;

    border: 1px solid #ccc;

    border-radius: 3px;

    background: #ececec;

}

.orders-tracking-item-details .variant-info ul li span {

    color: #333;

    font-size: 14px;

    text-transform: capitalize;

}

.orders-tracking-item-details .variant-info ul {

    padding: 0;

    list-style-type: none;

    margin: 0;

}

.orders-tracking-item-details .variant-info ul li:last-child {

    border: 0;



}

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

Dashboard2 chart

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

.campaign {

    height: 280px;

}



.campaign .ct-series-a .ct-area {

    fill-opacity: 0.2;

    fill: url(#gradient);

}



.campaign .ct-series-a .ct-line,

.campaign .ct-series-a .ct-point {

    stroke: #26dad2;

    stroke-width: 2px;

}



.campaign .ct-series-b .ct-area {

    fill: #000;

    fill-opacity: 0.1;

}



.campaign .ct-series-b .ct-line,

.campaign .ct-series-b .ct-point {

    stroke: #000;

    stroke-width: 2px;

}



.campaign .ct-series-a .ct-point,

.campaign .ct-series-b .ct-point {

    stroke-width: 6px;

}



.campaign2 .ct-series-a .ct-area {

    fill-opacity: 0.2;

    fill: url(#gradient);

}



.campaign2 .ct-series-a .ct-line,

.campaign2 .ct-series-a .ct-point {

    stroke: #26dad2;

    stroke-width: 2px;

}



.campaign2 .ct-series-b .ct-area {

    fill: #000;

    fill-opacity: 0.1;

}



.campaign2 .ct-series-b .ct-line,

.campaign2 .ct-series-b .ct-point {

    stroke: #000;

    stroke-width: 2px;

}



.campaign2 .ct-series-a .ct-point,

.campaign2 .ct-series-b .ct-point {

    stroke-width: 6px;

}



.usage .ct-series-a .ct-line {

    stroke-width: 3px;

    stroke: rgba(255, 255, 255, 0.5);

}



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

Dashboard3 chart

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

.total-sales {

    position: relative;

}



.total-sales .chartist-tooltip {

    background: #2f3d4a;

}



.total-sales .ct-series-a .ct-bar {

    stroke: #000;

}



.total-sales .ct-series-b .ct-bar {

    stroke: #26dad2;

}



.total-sales .ct-series-c .ct-bar {

    stroke: #ef5350;

}



.ct-chart {

    position: relative;

}



.ct-chart .ct-series-a .ct-slice-donut {

    stroke: #26dad2;

}



.ct-chart .ct-series-b .ct-slice-donut {

    stroke: #f2f4f8;

}



.ct-chart .ct-series-c .ct-slice-donut {

    stroke: #000;

}



#visitfromworld path.jvectormap-region.jvectormap-element {

    stroke-width: 1px;

    stroke: #99abb4;

}



.jvectormap-zoomin,

.jvectormap-zoomout,

.jvectormap-goback {

    background: #99abb4;

}



.browser td {

    vertical-align: middle;

    padding-left: 0px;

}



#calendar .fc-today-button {

    display: none;

}



.calender-sidebar {

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

}



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

Dashboard4 chart

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

.ecomm-donute svg text {

    font-family: "Urbanist", sans-serif !important;

    font-size: 12px !important;

    font-weight: 500 !important;

}



.total-revenue4 {

    position: relative;

}



.total-revenue4 .ct-series-a .ct-line {

    stroke: #000;

    stroke-width: 1px;

}



.total-revenue4 .ct-series-a .ct-point {

    stroke: #000;

    stroke-width: 5px;

}



.total-revenue4 .ct-series-b .ct-line {

    stroke: #26dad2;

    stroke-width: 1px;

}



.total-revenue4 .ct-series-b .ct-point {

    stroke: #26dad2;

    stroke-width: 5px;

}



.total-revenue4 .ct-series-a .ct-area {

    fill: #000;

    fill-opacity: 0.2;

}



.total-revenue4 .ct-series-b .ct-area {

    fill: #26dad2;

    fill-opacity: 0.2;

}



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

Dashboard6 chart

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

.product-overview.table tbody tr td {

    vertical-align: middle;

}



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

Widget-data

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

.sparkchart {

    margin-bottom: -2px;

}



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

File upload

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

.btn-file {

    overflow: hidden;

    position: relative;

    vertical-align: middle;

}



.btn-file > input {

    position: absolute;

    top: 0;

    right: 0;

    margin: 0;

    opacity: 0;

    filter: alpha(opacity=0);

    font-size: 23px;

    height: 100%;

    width: 100%;

    direction: ltr;

    cursor: pointer;

    border-radius: 0px;

}



.fileinput .input-group-addon {

    border: none;

    border-bottom: 1px solid rgba(120, 130, 140, 0.13);

    background: #ffffff;

    margin-bottom: 1px;

}



.fileinput .form-control {

    padding-top: 7px;

    padding-bottom: 5px;

    display: inline-block;

    margin-bottom: 0px;

    vertical-align: middle;

    cursor: text;

}



.fileinput .thumbnail {

    overflow: hidden;

    display: inline-block;

    margin-bottom: 5px;

    vertical-align: middle;

    text-align: center;

}



.fileinput .thumbnail > img {

    max-height: 100%;

}



.fileinput .btn {

    vertical-align: middle;

}



.fileinput-exists .fileinput-new,

.fileinput-new .fileinput-exists {

    display: none;

}



.fileinput-inline .fileinput-controls {

    display: inline;

}



.fileinput-filename {

    vertical-align: middle;

    display: inline-block;

    overflow: hidden;

}



.form-control .fileinput-filename {

    vertical-align: bottom;

}



.fileinput.input-group > * {

    position: relative;

    z-index: 2;

}



.fileinput.input-group > .btn-file {

    z-index: 1;

}



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

widget-chart-page product review

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

.product-review {

    margin: 0px;

    padding: 25px;

}



.product-review li {

    display: block;

    padding: 20px 0;

    list-style: none;

}



.product-review li .font,

.product-review li span {

    display: inline-block;

    margin-left: 10px;

}



.social-profile {

    text-align: center;

    background: rgba(7, 10, 43, 0.8);

}



.profile-tab li a.nav-link,

.customtab li a.nav-link {

    border: 0px;

    padding: 15px 20px;

    color: #67757c;

}



.profile-tab li a.nav-link.active,

.customtab li a.nav-link.active {

    border-bottom: 2px solid #000;

    color: #000;

}



.profile-tab li a.nav-link:hover,

.customtab li a.nav-link:hover {

    color: #000;

}



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

Form addons page

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

/*Bootstrap select*/

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {

    width: 100%;

}



.bootstrap-select .dropdown-menu li a {

    display: block;

    padding: 7px 20px;

    clear: both;

    font-weight: 400;

    line-height: 1.42857143;

    color: #67757c;

    white-space: nowrap;

}



.bootstrap-select .dropdown-menu li a:hover, .bootstrap-select .dropdown-menu li a:focus {

    color: #000;

    background: #f2f4f8;

}



.bootstrap-select .show > .dropdown-menu {

    display: block;

}



.bootstrap-select .dropdown-toggle.bs-placeholder:hover {

    color: #ffffff;

}



.bootstrap-touchspin .input-group-btn-vertical > .btn {

    padding: 9px 10px;

}



.select2-container--default .select2-selection--single {

    border-color: #b1b8bb;

    height: 38px;

}



.select2-container--default .select2-selection--single .select2-selection__rendered {

    line-height: 38px;

}



.select2-container--default .select2-selection--single .select2-selection__arrow {

    height: 33px;

}



.input-form .btn {

    padding: 8px 12px;

}



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

Form Material page

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

/*Material inputs*/

.form-material .form-group {

    overflow: hidden;

}



.form-material .form-control {

    background-color: transparent;

    background-position: center bottom, center calc(100% - 1px);

    background-repeat: no-repeat;

    background-size: 0 2px, 100% 1px;

    padding: 0;

    -webkit-transition: background 0s ease-out 0s;

    -o-transition: background 0s ease-out 0s;

    transition: background 0s ease-out 0s;

}



.form-material .form-control,

.form-material .form-control.focus,

.form-material .form-control:focus {

    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)), -webkit-gradient(linear, left top, left bottom, from(rgba(120, 130, 140, 0.13)), to(rgba(120, 130, 140, 0.13)));

    background-image: -webkit-linear-gradient(#000, #000), -webkit-linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));

    background-image: -o-linear-gradient(#000, #000), -o-linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));

    background-image: linear-gradient(#000, #000), linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));

    border: 0 none;

    border-radius: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

    float: none;

}



.form-material .form-control.focus,

.form-material .form-control:focus {

    background-size: 100% 2px, 100% 1px;

    outline: 0 none;

    -webkit-transition-duration: 0.3s;

    -o-transition-duration: 0.3s;

    transition-duration: 0.3s;

}



.form-control-line .form-group {

    overflow: hidden;

}



.form-control-line .form-control {

    border: 0px;

    border-radius: 0px;

    padding-left: 0px;

    border-bottom: 1px solid rgba(120, 130, 140, 0.13);

}



.form-control-line .form-control:focus {

    border-bottom: 1px solid #000;

}



/*******************/

/*Floating Label*/

/*******************/

.floating-labels .form-group {

    position: relative;

}



.floating-labels .form-control {

    padding: 10px 10px 10px 0;

    display: block;

    border: none;

    font-family: "Urbanist", sans-serif;

    border-radius: 0px;

    border-bottom: 1px solid rgba(120, 130, 140, 0.13);

}



.floating-labels .form-control:focus {

    -webkit-box-shadow: none;

    box-shadow: none;

}



.floating-labels select.form-control > option {

    font-size: 14px;

}



.floating-labels .has-error .form-control {

    border-bottom: 1px solid #ef5350;

}



.floating-labels .has-warning .form-control {

    border-bottom: 1px solid #000;

}



.floating-labels .has-success .form-control {

    border-bottom: 1px solid #26dad2;

}



.floating-labels .form-control:focus {

    outline: none;

    border: none;

}



.floating-labels label {

    color: #67757c;

    position: absolute;

    cursor: auto;

    top: 5px;

    -o-transition: 0.2s ease all;

    transition: 0.2s ease all;

    -moz-transition: 0.2s ease all;

    -webkit-transition: 0.2s ease all;

}



.floating-labels .focused label {

    top: -20px;

    font-size: 12px;

    color: #263238;

}



.floating-labels .bar {

    position: relative;

    display: block;

}



.floating-labels .bar:before,

.floating-labels .bar:after {

    content: '';

    height: 2px;

    width: 0;

    bottom: 1px;

    position: absolute;

    background: #000;

    -o-transition: 0.2s ease all;

    transition: 0.2s ease all;

    -moz-transition: 0.2s ease all;

    -webkit-transition: 0.2s ease all;

}



.floating-labels .bar:before {

    left: 50%;

}



.floating-labels .bar:after {

    right: 50%;

}



.floating-labels .form-control:focus ~ .bar:before,

.floating-labels .form-control:focus ~ .bar:after {

    width: 50%;

}



.floating-labels .highlight {

    position: absolute;

    height: 60%;

    width: 100px;

    top: 25%;

    left: 0;

    pointer-events: none;

    opacity: 0.5;

}



.floating-labels .input-lg ~ label,

.floating-labels .input-lg {

    font-size: 24px;

}



.floating-labels .input-sm ~ label,

.floating-labels .input-sm {

    font-size: 16px;

}



.has-warning .bar:before,

.has-warning .bar:after {

    background: #000;

}



.has-success .bar:before,

.has-success .bar:after {

    background: #26dad2;

}



.has-error .bar:before,

.has-error .bar:after {

    background: #ef5350;

}



.has-warning .form-control:focus ~ label,

.has-warning .form-control:valid ~ label {

    color: #000;

}



.has-success .form-control:focus ~ label,

.has-success .form-control:valid ~ label {

    color: #26dad2;

}



.has-error .form-control:focus ~ label,

.has-error .form-control:valid ~ label {

    color: #ef5350;

}



.has-feedback label ~ .t-0 {

    top: 0;

}



.form-group.error input,

.form-group.error select,

.form-group.error textarea {

    border: 1px solid #ef5350;

}



.form-group.validate input,

.form-group.validate select,

.form-group.validate textarea {

    border: 1px solid #26dad2;

}



.form-group.error .help-block ul {

    padding: 0px;

    color: #ef5350;

}



.form-group.error .help-block ul li {

    list-style: none;

}



.form-group.issue .help-block ul {

    padding: 0px;

    color: #000;

}



.form-group.issue .help-block ul li {

    list-style: none;

}



/*******************

Pagination

******************/

.pagination-circle li.active a {

    background: #26dad2;

}



.pagination-circle li a {

    width: 40px;

    height: 40px;

    background: #f2f4f8;

    border: 0px;

    text-align: center;

    border-radius: 100%;

}



.pagination-circle li a:first-child, .pagination-circle li a:last-child {

    border-radius: 100%;

}



.pagination-circle li a:hover {

    background: #26dad2;

    color: #ffffff;

}



.pagination-circle li.disabled a {

    background: #f2f4f8;

    color: rgba(120, 130, 140, 0.13);

}



/*******************

Form Dropzone

******************/

.dropzone {

    border: 1px dashed #b1b8bb;

}



.dropzone .dz-message {

    padding: 5% 0;

    margin: 0px;

}



/*******************

Form Pickers

******************/

.asColorPicker-dropdown {

    max-width: 260px;

}



.asColorPicker-trigger {

    position: absolute;

    top: 0;

    right: -35px;

    height: 38px;

    width: 37px;

    border: 0;

}



.asColorPicker-clear {

    display: none;

    position: absolute;

    top: 5px;

    right: 10px;

    text-decoration: none;

}



table th {

    font-weight: 400;

}



.daterangepicker td.active,

.daterangepicker td.active:hover {

    background-color: #000;

}



.datepicker table tr td.today,

.datepicker table tr td.today.disabled,

.datepicker table tr td.today.disabled:hover,

.datepicker table tr td.today:hover {

    background: #000;

    color: #ffffff;

}



.datepicker td,

.datepicker th {

    padding: 5px 10px;

}



/*******************

Form icheck

******************/

.icolors,

.icheck-list {

    padding: 0;

    margin: 0;

    list-style: none;

}



.icolors > li {

    padding: 0;

    margin: 2px;

    float: left;

    display: inline-block;

    height: 30px;

    width: 30px;

    background: #263238;

    text-align: center;

}



.icolors > li.active:after {

    content: "\2713 ";

    color: #ffffff;

    line-height: 30px;

}



.icolors > li:first-child {

    margin-left: 0;

}



.icolors > li.orange {

    background: #ef5350;

}



.icolors > li.yellow {

    background: #000;

}



.icolors > li.info {

    background: #000;

}



.icolors > li.green {

    background: #26dad2;

}



.icolors > li.red {

    background: #fb3a3a;

}



.icolors > li.purple {

    background: #ebc51a;

}



.icolors > li.blue {

    background: #02bec9;

}



.icheck-list {

    float: left;

    padding-right: 50px;

    padding-top: 10px;

}



.icheck-list li {

    padding-bottom: 5px;

}



.icheck-list li label {

    padding-left: 10px;

}



/*******************

Form summernote

******************/

.note-popover,

.note-icon-caret {

    display: none;

}



.note-editor.note-frame {

    border: 1px solid #b1b8bb;

}



.note-editor.note-frame .panel-heading {

    padding: 6px 10px 10px;

    border-bottom: 1px solid rgba(120, 130, 140, 0.13);

}



.label {

    display: inline-block;

}



/*******************

Table-Layout

******************/

.table thead th,

.table th {

    border: 0px;

}



.color-table.primary-table thead th {

    background-color: #000;

    color: #ffffff;

}



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

    background: none;

}



.table-hover tbody tr:hover{background-color: rgba(0, 0, 0, 0.01);}

.color-table.success-table thead th {

    background-color: #26dad2;

    color: #ffffff;

}



.color-table.info-table thead th {

    background-color: #000;

    color: #ffffff;

}



.color-table.warning-table thead th {

    background-color: #000;

    color: #ffffff;

}



.color-table.danger-table thead th {

    background-color: #ef5350;

    color: #ffffff;

}



.color-table.inverse-table thead th {

    background-color: #2f3d4a;

    color: #ffffff;

}



.color-table.dark-table thead th {

    background-color: #263238;

    color: #ffffff;

}



.color-table.red-table thead th {

    background-color: #fb3a3a;

    color: #ffffff;

}



.color-table.purple-table thead th {

    background-color: #ebc51a;

    color: #ffffff;

}



.color-table.muted-table thead th {

    background-color: #99abb4;

    color: #ffffff;

}



.color-bordered-table.primary-bordered-table {

    border: 2px solid #000;

}



.color-bordered-table.primary-bordered-table thead th {

    background-color: #000;

    color: #ffffff;

}



.color-bordered-table.success-bordered-table {

    border: 2px solid #26dad2;

}



.color-bordered-table.success-bordered-table thead th {

    background-color: #26dad2;

    color: #ffffff;

}



.color-bordered-table.info-bordered-table {

    border: 2px solid #000;

}



.color-bordered-table.info-bordered-table thead th {

    background-color: #000;

    color: #ffffff;

}



.color-bordered-table.warning-bordered-table {

    border: 2px solid #000;

}



.color-bordered-table.warning-bordered-table thead th {

    background-color: #000;

    color: #ffffff;

}



.color-bordered-table.danger-bordered-table {

    border: 2px solid #ef5350;

}



.color-bordered-table.danger-bordered-table thead th {

    background-color: #ef5350;

    color: #ffffff;

}



.color-bordered-table.inverse-bordered-table {

    border: 2px solid #2f3d4a;

}



.color-bordered-table.inverse-bordered-table thead th {

    background-color: #2f3d4a;

    color: #ffffff;

}



.color-bordered-table.dark-bordered-table {

    border: 2px solid #263238;

}



.color-bordered-table.dark-bordered-table thead th {

    background-color: #263238;

    color: #ffffff;

}



.color-bordered-table.red-bordered-table {

    border: 2px solid #fb3a3a;

}



.color-bordered-table.red-bordered-table thead th {

    background-color: #fb3a3a;

    color: #ffffff;

}



.color-bordered-table.purple-bordered-table {

    border: 2px solid #ebc51a;

}



.color-bordered-table.purple-bordered-table thead th {

    background-color: #ebc51a;

    color: #ffffff;

}



.color-bordered-table.muted-bordered-table {

    border: 2px solid #99abb4;

}



.color-bordered-table.muted-bordered-table thead th {

    background-color: #99abb4;

    color: #ffffff;

}



.full-color-table.full-primary-table {

    background-color: #f1effd;

}



.full-color-table.full-primary-table thead th {

    background-color: #000;

    border: 0;

    color: #ffffff;

}



.full-color-table.full-primary-table tbody td {

    border: 0;

}



.full-color-table.full-primary-table tr:hover {

    background-color: #000;

    color: #ffffff;

}



.full-color-table.full-success-table {

    background-color: #e8fdeb;

}



.full-color-table.full-success-table thead th {

    background-color: #26dad2;

    border: 0;

    color: #ffffff;

}



.full-color-table.full-success-table tbody td {

    border: 0;

}



.full-color-table.full-success-table tr:hover {

    background-color: #26dad2;

    color: #ffffff;

}



.full-color-table.full-info-table {

    background-color: #cfecfe;

}



.full-color-table.full-info-table thead th {

    background-color: #000;

    border: 0;

    color: #ffffff;

}



.full-color-table.full-info-table tbody td {

    border: 0;

}



.full-color-table.full-info-table tr:hover {

    background-color: #000;

    color: #ffffff;

}



.full-color-table.full-warning-table {

    background-color: #fff8ec;

}



.full-color-table.full-warning-table thead th {

    background-color: #000;

    border: 0;

    color: #ffffff;

}



.full-color-table.full-warning-table tbody td {

    border: 0;

}



.full-color-table.full-warning-table tr:hover {

    background-color: #000;

    color: #ffffff;

}



.full-color-table.full-danger-table {

    background-color: #f9e7eb;

}



.full-color-table.full-danger-table thead th {

    background-color: #ef5350;

    border: 0;

    color: #ffffff;

}



.full-color-table.full-danger-table tbody td {

    border: 0;

}



.full-color-table.full-danger-table tr:hover {

    background-color: #ef5350;

    color: #ffffff;

}



.full-color-table.full-inverse-table {

    background-color: #f6f6f6;

}



.full-color-table.full-inverse-table thead th {

    background-color: #2f3d4a;

    border: 0;

    color: #ffffff;

}



.full-color-table.full-inverse-table tbody td {

    border: 0;

}



.full-color-table.full-inverse-table tr:hover {

    background-color: #2f3d4a;

    color: #ffffff;

}



.full-color-table.full-dark-table {

    background-color: rgba(43, 43, 43, 0.8);

}



.full-color-table.full-dark-table thead th {

    background-color: #263238;

    border: 0;

    color: #ffffff;

}



.full-color-table.full-dark-table tbody td {

    border: 0;

    color: #ffffff;

}



.full-color-table.full-dark-table tr:hover {

    background-color: #263238;

    color: #ffffff;

}



.full-color-table.full-red-table {

    background-color: #f9e7eb;

}



.full-color-table.full-red-table thead th {

    background-color: #fb3a3a;

    border: 0;

    color: #ffffff;

}



.full-color-table.full-red-table tbody td {

    border: 0;

}



.full-color-table.full-red-table tr:hover {

    background-color: #fb3a3a;

    color: #ffffff;

}



.full-color-table.full-purple-table {

    background-color: #f1effd;

}



.full-color-table.full-purple-table thead th {

    background-color: #ebc51a;

    border: 0;

    color: #ffffff;

}



.full-color-table.full-purple-table tbody td {

    border: 0;

}



.full-color-table.full-purple-table tr:hover {

    background-color: #ebc51a;

    color: #ffffff;

}



.full-color-table.full-muted-table {

    background-color: rgba(152, 166, 173, 0.2);

}



.full-color-table.full-muted-table thead th {

    background-color: #99abb4;

    border: 0;

    color: #ffffff;

}



.full-color-table.full-muted-table tbody td {

    border: 0;

}



.full-color-table.full-muted-table tr:hover {

    background-color: #99abb4;

    color: #ffffff;

}



/*******************

Table-Data Table

******************/

.dataTables_wrapper {

    padding-top: 0px;

}

html body .table-responsive.m-t-10{margin-top: 0 ;}



.dt-buttons {

    display: inline-block;

    padding-top: 5px;

    margin-bottom: 15px;

}



.dt-buttons .dt-button {

    padding: 5px 15px;

    border-radius: 4px;

    background: #000;

    color: #ffffff;

    margin-right: 3px;

}



.dt-buttons .dt-button:hover {

    background: #2f3d4a;

}



.dataTables_info,

.dataTables_length {

    display: inline-block;

}



.dataTables_length {

    margin-top: 0px;

}



.dataTables_length select {

    border: 0;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));

    background-image: -webkit-linear-gradient(#000, #000), -webkit-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: -o-linear-gradient(#000, #000), -o-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: linear-gradient(#000, #000), linear-gradient(#b1b8bb, #b1b8bb);

    background-size: 0 2px, 100% 1px;

    background-repeat: no-repeat;

    background-position: center bottom, center calc(100% - 1px);

    background-color: transparent;

    -webkit-transition: background 0s ease-out;

    -o-transition: background 0s ease-out;

    transition: background 0s ease-out;

    padding-bottom: 5px;

}



.dataTables_length select:focus {

    outline: none;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));

    background-image: -webkit-linear-gradient(#000, #000), -webkit-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: -o-linear-gradient(#000, #000), -o-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: linear-gradient(#000, #000), linear-gradient(#b1b8bb, #b1b8bb);

    background-size: 100% 2px, 100% 1px;

    -webkit-box-shadow: none;

    box-shadow: none;

    -webkit-transition-duration: 0.3s;

    -o-transition-duration: 0.3s;

    transition-duration: 0.3s;

}



.dataTables_filter {

    float: right;

    margin-top: 0px;

}



.dataTables_filter input {

    border: 0;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));

    background-image: -webkit-linear-gradient(#000, #000), -webkit-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: -o-linear-gradient(#000, #000), -o-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: linear-gradient(#000, #000), linear-gradient(#b1b8bb, #b1b8bb);

    background-size: 0 2px, 100% 1px;

    background-repeat: no-repeat;

    background-position: center bottom, center calc(100% - 1px);

    background-color: transparent;

    -webkit-transition: background 0s ease-out;

    -o-transition: background 0s ease-out;

    transition: background 0s ease-out;

    float: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    border-radius: 0;

    margin-left: 10px;

}



.dataTables_filter input:focus {

    outline: none;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));

    background-image: -webkit-linear-gradient(#000, #000), -webkit-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: -o-linear-gradient(#000, #000), -o-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: linear-gradient(#000, #000), linear-gradient(#b1b8bb, #b1b8bb);

    background-size: 100% 2px, 100% 1px;

    -webkit-box-shadow: none;

    box-shadow: none;

    -webkit-transition-duration: 0.3s;

    -o-transition-duration: 0.3s;

    transition-duration: 0.3s;

}



table.dataTable thead .sorting,

table.dataTable thead .sorting_asc,

table.dataTable thead .sorting_desc,

table.dataTable thead .sorting_asc_disabled,

table.dataTable thead .sorting_desc_disabled {

    background: transparent;

}



table.dataTable thead .sorting_asc:after {

    content: "\f0de";

    margin-left: 10px;

    font-family: fontawesome;

    cursor: pointer;

}



table.dataTable thead .sorting_desc:after {

    content: "\f0dd";

    margin-left: 10px;

    font-family: fontawesome;

    cursor: pointer;

}



table.dataTable thead .sorting:after {

    content: "\f0dc";

    margin-left: 10px;

    font-family: fontawesome !important;

    cursor: pointer;

    color: rgba(50, 50, 50, 0.5);

}



.dataTables_wrapper .dataTables_paginate {

    float: right;

    text-align: right;

    padding-top: 0.25em;

}



.dataTables_wrapper .dataTables_paginate .paginate_button {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    display: inline-block;

    min-width: 1.5em;

    padding: 0.5em 1em;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    color: #67757c;

    border: 1px solid #ddd;

}



.dataTables_wrapper .dataTables_paginate .paginate_button.current,

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {

    color: #ffffff !important;

    border: 1px solid #000;

    background-color: #000;

}



.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {

    cursor: default;

    color: #67757c;

    border: 1px solid #ddd;

    background: transparent;

    -webkit-box-shadow: none;

    box-shadow: none;

}



.dataTables_wrapper .dataTables_paginate .paginate_button:hover {

    color: white;

    border: 1px solid #000;

    background-color: #000;

}



.dataTables_wrapper .dataTables_paginate .paginate_button:active {

    outline: none;

    background-color: #67757c;

}



.dataTables_wrapper .dataTables_paginate .ellipsis {

    padding: 0 1em;

}



/*******************

Table- responsive

******************/

.tablesaw-bar .btn-group label {

    color: #67757c !important;

}



/*******************

Table- editable table

******************/

.dt-bootstrap {

    display: block;

}



.paging_simple_numbers .pagination .paginate_button {

    padding: 0px;

    background: #ffffff;

}



.paging_simple_numbers .pagination .paginate_button:hover {

    background: #ffffff;

}



.paging_simple_numbers .pagination .paginate_button a {

    padding: 2px 10px;

    border: 0px;

}



.paging_simple_numbers .pagination .paginate_button.active a,

.paging_simple_numbers .pagination .paginate_button:hover a {

    background: #000;

    color: #ffffff;

}



/*******************

Table- Footable

******************/

#demo-show-entries {

    border: 0;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));

    background-image: -webkit-linear-gradient(#000, #000), -webkit-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: -o-linear-gradient(#000, #000), -o-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: linear-gradient(#000, #000), linear-gradient(#b1b8bb, #b1b8bb);

    background-size: 0 2px, 100% 1px;

    background-repeat: no-repeat;

    background-position: center bottom, center calc(100% - 1px);

    background-color: transparent;

    -webkit-transition: background 0s ease-out;

    -o-transition: background 0s ease-out;

    transition: background 0s ease-out;

    padding-bottom: 5px;

    color: #67757c;

}



#demo-show-entries:focus {

    outline: none;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));

    background-image: -webkit-linear-gradient(#000, #000), -webkit-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: -o-linear-gradient(#000, #000), -o-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: linear-gradient(#000, #000), linear-gradient(#b1b8bb, #b1b8bb);

    background-size: 100% 2px, 100% 1px;

    -webkit-box-shadow: none;

    box-shadow: none;

    -webkit-transition-duration: 0.3s;

    -o-transition-duration: 0.3s;

    transition-duration: 0.3s;

}



#demo-input-search2 {

    border: 0;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));

    background-image: -webkit-linear-gradient(#000, #000), -webkit-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: -o-linear-gradient(#000, #000), -o-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: linear-gradient(#000, #000), linear-gradient(#b1b8bb, #b1b8bb);

    background-size: 0 2px, 100% 1px;

    background-repeat: no-repeat;

    background-position: center bottom, center calc(100% - 1px);

    background-color: transparent;

    -webkit-transition: background 0s ease-out;

    -o-transition: background 0s ease-out;

    transition: background 0s ease-out;

    float: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    border-radius: 0;

    margin-left: 10px;

    color: #67757c;

}



#demo-input-search2:focus {

    outline: none;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)), -webkit-gradient(linear, left top, left bottom, from(#b1b8bb), to(#b1b8bb));

    background-image: -webkit-linear-gradient(#000, #000), -webkit-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: -o-linear-gradient(#000, #000), -o-linear-gradient(#b1b8bb, #b1b8bb);

    background-image: linear-gradient(#000, #000), linear-gradient(#b1b8bb, #b1b8bb);

    background-size: 100% 2px, 100% 1px;

    -webkit-box-shadow: none;

    box-shadow: none;

    -webkit-transition-duration: 0.3s;

    -o-transition-duration: 0.3s;

    transition-duration: 0.3s;

}



.footable .pagination li a {

    position: relative;

    display: block;

    padding: .5rem .75rem;

    margin-left: -1px;

    line-height: 1.25;

    color: #0275d8;

    background-color: #ffffff;

    border: 1px solid #ddd;

}



.footable .pagination li.active a {

    z-index: 2;

    color: #fff;

    background-color: #0275d8;

    border-color: #0275d8;

}



.footable .pagination li.disabled a {

    color: #636c72;

    pointer-events: none;

    cursor: not-allowed;

    background-color: #ffffff;

    border-color: #ddd;

}



.footable .pagination li:first-child a {

    margin-left: 0;

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

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

}



.footable-odd {

    background: #f2f4f8;

}



/*******************

Icon list fontawesom

******************/

.icon-list-demo div {

    cursor: pointer;

    line-height: 60px;

    white-space: nowrap;

    color: #67757c;

}



.icon-list-demo div:hover {

    color: #263238;

}



.icon-list-demo div p {

    margin: 10px 0;

    padding: 5px 0;

}



.icon-list-demo i {

    -webkit-transition: all 0.2s;

    -webkit-transition: font-size .2s;

    display: inline-block;

    font-size: 18px;

    margin: 0 15px 0 10px;

    text-align: left;

    -o-transition: all 0.2s;

    transition: all 0.2s;

    -o-transition: font-size .2s;

    transition: font-size .2s;

    vertical-align: middle;

    -webkit-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.icon-list-demo .col-md-4,

.icon-list-demo .col-3 {

    border-radius: 4px;

}



.icon-list-demo .col-md-4:hover,

.icon-list-demo .col-3:hover {

    background-color: #ebf3f5;

}



.icon-list-demo .div:hover i {

    font-size: 2em;

}



/*******************

Icon list material icon

******************/

.material-icon-list-demo .mdi {

    font-size: 21px;

}



/*******************

Gridstack Dragable portlet

******************/

.grid-stack-item-content {

    background: #fff;

    color: #2b2b2b;

    text-align: center;

    font-size: 20px;

}



.grid-stack > .grid-stack-item > .grid-stack-item-content {

    border: 1px solid rgba(120, 130, 140, 0.13);

}



/*******************

Bootstrap Switch

******************/

.bootstrap-switch,

.bootstrap-switch .bootstrap-switch-container {

    border-radius: 2px;

}



.bootstrap-switch .bootstrap-switch-handle-on {

    border-bottom-left-radius: 2px;

    border-top-left-radius: 2px;

}



.bootstrap-switch .bootstrap-switch-handle-off {

    border-bottom-right-radius: 2px;

    border-top-right-radius: 2px;

}



.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {

    color: #ffffff;

    background: #000;

}



.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info {

    color: #ffffff;

    background: #000;

}



.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {

    color: #ffffff;

    background: #26dad2;

}



.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {

    color: #ffffff;

    background: #000;

}



.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {

    color: #ffffff;

    background: #ef5350;

}



.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {

    color: #263238;

    background: #f2f4f8;

}



.onoffswitch {

    position: relative;

    width: 90px;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

}



.onoffswitch-checkbox {

    display: none;

}



.onoffswitch-label {

    display: block;

    overflow: hidden;

    cursor: pointer;

    border: 2px solid #26dad2;

    border-radius: 20px;

}



.onoffswitch-inner {

    display: block;

    width: 200%;

    margin-left: -100%;

    -webkit-transition: margin 0.3s ease-in 0s;

    -o-transition: margin 0.3s ease-in 0s;

    transition: margin 0.3s ease-in 0s;

}



.onoffswitch-inner:before,

.onoffswitch-inner:after {

    display: block;

    float: left;

    width: 50%;

    height: 30px;

    padding: 0;

    line-height: 30px;

    font-size: 14px;

    color: white;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}



.onoffswitch-inner:before {

    content: "ON";

    padding-left: 27px;

    background-color: #26dad2;

    color: #FFFFFF;

}



.onoffswitch-inner:after {

    content: "OFF";

    padding-right: 24px;

    background-color: #EEEEEE;

    color: #999999;

    text-align: right;

}



.onoffswitch-switch {

    display: block;

    width: 23px;

    margin: 6px;

    background: #FFFFFF;

    position: absolute;

    top: 0;

    bottom: 0;

    right: 56px;

    border: 2px solid #26dad2;

    border-radius: 20px;

    -webkit-transition: all 0.3s ease-in 0s;

    -o-transition: all 0.3s ease-in 0s;

    transition: all 0.3s ease-in 0s;

}



.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {

    margin-left: 0;

}



.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {

    right: 0px;

}



/*******************

Date paginator page

******************/

.dp-selected[style] {

    background-color: #000 !important;

}



.datepaginator-sm .pagination li a,

.datepaginator-lg .pagination li a,

.datepaginator .pagination li a {

    padding: 0 5px;

    height: 60px;

    border: 1px solid rgba(120, 130, 140, 0.13);

    float: left;

    position: relative;

}



/*******************

sweet alert page

******************/

.model_img {

    cursor: pointer;

}



/*******************

Grid page

******************/

.show-grid {

    margin-bottom: 10px;

    padding: 0 15px;

}



.show-grid [class^=col-] {

    padding-top: 10px;

    padding-bottom: 10px;

    border: 1px solid #b1b8bb;

    background-color: #f2f4f8;

}



/*******************

Vertical tabs

******************/

.vtabs {

    display: table;

}



.vtabs .tabs-vertical {

    width: 150px;

    border-bottom: 0px;

    border-right: 1px solid rgba(120, 130, 140, 0.13);

    display: table-cell;

    vertical-align: top;

}



.vtabs .tabs-vertical li .nav-link {

    color: #263238;

    margin-bottom: 10px;

    border: 0px;

    border-radius: 4px 0 0 4px;

}



.vtabs .tab-content {

    display: table-cell;

    padding: 20px;

    vertical-align: top;

}



.tabs-vertical li .nav-link.active,

.tabs-vertical li .nav-link:hover,

.tabs-vertical li .nav-link.active:focus {

    background: #000;

    border: 0px;

    color: #ffffff;

}



/*Custom vertical tab*/

.customvtab .tabs-vertical li .nav-link.active,

.customvtab .tabs-vertical li .nav-link:hover,

.customvtab .tabs-vertical li .nav-link:focus {

    background: #ffffff;

    border: 0px;

    border-right: 2px solid #000;

    margin-right: -1px;

    color: #000;

}



.tabcontent-border {

    border: 1px solid #ddd;

    border-top: 0px;

}



.customtab2 li a.nav-link {

    border: 0px;

    margin-right: 3px;

    color: #67757c;

}



.customtab2 li a.nav-link.active {

    background: #000;

    color: #ffffff;

}



.customtab2 li a.nav-link:hover {

    color: #ffffff;

    background: #000;

}



/*******************

Progress bar

******************/

.progress.active .progress-bar,

.progress-bar.active {

    -webkit-animation: progress-bar-stripes 2s linear infinite;

    -o-animation: progress-bar-stripes 2s linear infinite;

    animation: progress-bar-stripes 2s linear infinite;

}



.progress-vertical {

    min-height: 250px;

    height: 250px;

    position: relative;

    display: inline-block;

    margin-bottom: 0;

    margin-right: 20px;

}



.progress-vertical-bottom {

    min-height: 250px;

    height: 250px;

    position: relative;

    display: inline-block;

    margin-bottom: 0;

    margin-right: 20px;

    -webkit-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    transform: rotate(180deg);

}



.progress-animated {

    -webkit-animation-duration: 5s;

    -webkit-animation-name: myanimation;

    -webkit-transition: 5s all;

    animation-duration: 5s;

    animation-name: myanimation;

    -o-transition: 5s all;

    transition: 5s all;

}



@-webkit-keyframes myanimation {

    from {

        width: 0;

    }

}



@keyframes myanimation {

    from {

        width: 0;

    }

}



/*******************

Notification page Jquery toaster

******************/

.jq-icon-info {

    background-color: #000;

    color: #ffffff;

}



.jq-icon-success {

    background-color: #26dad2;

    color: #ffffff;

}



.jq-icon-error {

    background-color: #ef5350;

    color: #ffffff;

}



.jq-icon-warning {

    background-color: #000;

    color: #ffffff;

}



.alert-rounded {

    border-radius: 60px;

}



/*******************

list and media

******************/

.list-group a.list-group-item:hover {

    background: #f2f4f8;

}



.list-group-item.active,

.list-group .list-group-item.active:hover {

    background: #000;

    border-color: #000;

}



.list-group-item.disabled {

    color: #99abb4;

    background: #f2f4f8;

}



.media {

    border: 1px solid rgba(120, 130, 140, 0.13);

    margin-bottom: 10px;

    padding: 15px;

}



/*******************

User card page

******************/

.el-element-overlay .white-box {

    padding: 0px;

}



.el-element-overlay .el-card-item {

    position: relative;

    padding-bottom: 25px;

}



.el-element-overlay .el-card-item .el-card-avatar {

    margin-bottom: 15px;

}



.el-element-overlay .el-card-item .el-card-content {

    text-align: center;

}



.el-element-overlay .el-card-item .el-card-content h3 {

    margin: 0px;

}



.el-element-overlay .el-card-item .el-card-content a {

    color: #67757c;

}



.el-element-overlay .el-card-item .el-card-content a:hover {

    color: #000;

}



.el-element-overlay .el-card-item .el-overlay-1 {

    width: 100%;

    overflow: hidden;

    position: relative;

    text-align: center;

    cursor: default;

}



.el-element-overlay .el-card-item .el-overlay-1 img {

    display: block;

    position: relative;

    -webkit-transition: all .4s linear;

    -o-transition: all .4s linear;

    transition: all .4s linear;

    width: 100%;

    height: auto;

}



.el-element-overlay .el-card-item .el-overlay-1:hover img {

    -ms-transform: scale(1.2) translateZ(0);

    -webkit-transform: scale(1.2) translateZ(0);

    /* transform: scale(1.2) translateZ(0); */

}



.el-element-overlay .el-card-item .el-overlay-1 .el-info {

    text-decoration: none;

    display: inline-block;

    text-transform: uppercase;

    color: #ffffff;

    background-color: transparent;

    filter: alpha(opacity=0);

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

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

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

    padding: 0;

    margin: auto;

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    transform: translateY(-50%) translateZ(0);

    -webkit-transform: translateY(-50%) translateZ(0);

    -ms-transform: translateY(-50%) translateZ(0);

}



.el-element-overlay .el-card-item .el-overlay-1 .el-info > li {

    list-style: none;

    display: inline-block;

    margin: 0 3px;

}



.el-element-overlay .el-card-item .el-overlay-1 .el-info > li a {

    border-color: #ffffff;

    color: #ffffff;

    padding: 12px 15px 10px;

}



.el-element-overlay .el-card-item .el-overlay-1 .el-info > li a:hover {

    background: #000;

    border-color: #000;

}



.el-element-overlay .el-card-item .el-overlay {

    width: 100%;

    height: 100%;

    position: absolute;

    overflow: hidden;

    top: 0;

    left: 0;

    opacity: 0;

    background-color: rgba(0, 0, 0, 0.7);

    -webkit-transition: all .4s ease-in-out;

    -o-transition: all .4s ease-in-out;

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

}



.el-element-overlay .el-card-item .el-overlay-1:hover .el-overlay {

    opacity: 1;

    filter: alpha(opacity=100);

    -webkit-transform: translateZ(0);

    -ms-transform: translateZ(0);

    transform: translateZ(0);

}



.el-element-overlay .el-card-item .el-overlay-1 .scrl-dwn {

    top: -100%;

}



.el-element-overlay .el-card-item .el-overlay-1 .scrl-up {

    top: 100%;

    height: 0px;

}



.el-element-overlay .el-card-item .el-overlay-1:hover .scrl-dwn {

    top: 0px;

}



.el-element-overlay .el-card-item .el-overlay-1:hover .scrl-up {

    top: 0px;

    height: 100%;

}



/*******************

Timeline page

******************/

.timeline {

    position: relative;

    padding: 20px 0 20px;

    list-style: none;

    max-width: 1200px;

    margin: 0 auto;

}



.timeline:before {

    content: " ";

    position: absolute;

    top: 0;

    bottom: 0;

    left: 50%;

    width: 3px;

    margin-left: -1.5px;

    background-color: #f2f4f8;

}



.timeline > li {

    position: relative;

    margin-bottom: 20px;

}



.timeline > li:before,

.timeline > li:after {

    content: " ";

    display: table;

}



.timeline > li:after {

    clear: both;

}



.timeline > li:before,

.timeline > li:after {

    content: " ";

    display: table;

}



.timeline > li:after {

    clear: both;

}



.timeline > li > .timeline-panel {

    float: left;

    position: relative;

    width: 46%;

    padding: 20px;

    border: 1px solid rgba(120, 130, 140, 0.13);

    border-radius: 4px;

    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);

    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);

}



.timeline > li > .timeline-panel:before {

    content: " ";

    display: inline-block;

    position: absolute;

    top: 26px;

    right: -8px;

    border-top: 8px solid transparent;

    border-right: 0 solid rgba(120, 130, 140, 0.13);

    border-bottom: 8px solid transparent;

    border-left: 8px solid rgba(120, 130, 140, 0.13);

}



.timeline > li > .timeline-panel:after {

    content: " ";

    display: inline-block;

    position: absolute;

    top: 27px;

    right: -7px;

    border-top: 7px solid transparent;

    border-right: 0 solid #ffffff;

    border-bottom: 7px solid transparent;

    border-left: 7px solid #ffffff;

}



.timeline > li > .timeline-badge {

    z-index: 10;

    position: absolute;

    top: 16px;

    left: 50%;

    width: 50px;

    height: 50px;

    margin-left: -25px;

    border-radius: 50% 50% 50% 50%;

    text-align: center;

    font-size: 1.4em;

    line-height: 50px;

    color: #fff;

    overflow: hidden;

}



.timeline > li.timeline-inverted > .timeline-panel {

    float: right;

}



.timeline > li.timeline-inverted > .timeline-panel:before {

    right: auto;

    left: -8px;

    border-right-width: 8px;

    border-left-width: 0;

}



.timeline > li.timeline-inverted > .timeline-panel:after {

    right: auto;

    left: -7px;

    border-right-width: 7px;

    border-left-width: 0;

}



.timeline-badge.primary {

    background-color: #000;

}



.timeline-badge.success {

    background-color: #26dad2;

}



.timeline-badge.warning {

    background-color: #000;

}



.timeline-badge.danger {

    background-color: #ef5350;

}



.timeline-badge.info {

    background-color: #000;

}



.timeline-title {

    margin-top: 0;

    color: inherit;

    font-weight: 400;

}



.timeline-body > p,

.timeline-body > ul {

    margin-bottom: 0;

}



.timeline-body > p + p {

    margin-top: 5px;

}



/*******************

Horizontal Timeline page

******************/

.cd-horizontal-timeline .events a {

    padding-bottom: 6px;

    color: #000;

}



.cd-horizontal-timeline .filling-line,

.cd-horizontal-timeline .events a.selected::after {

    background: #000;

}



.cd-horizontal-timeline .events a.selected::after {

    border-color: #000;

}



.myadmin-dd .dd-list .dd-item .dd-handle {

    background: #ffffff;

    border: 1px solid rgba(120, 130, 140, 0.13);

    padding: 8px 16px;

    height: auto;

    font-family: "Urbanist", sans-serif;

    font-weight: 400;

    border-radius: 0;

}



.myadmin-dd-empty .dd-list .dd3-content {

    height: auto;

    border: 1px solid rgba(120, 130, 140, 0.13);

    padding: 8px 16px 8px 46px;

    background: #ffffff;

    font-weight: 400;

}



.myadmin-dd-empty .dd-list .dd3-handle {

    border: 1px solid rgba(120, 130, 140, 0.13);

    border-bottom: 0;

    background: #ffffff;

    height: 36px;

    width: 36px;

}



.dd3-handle:before {

    color: #67757c;

    top: 7px;

}



/*******************

ribbons page

******************/

.ribbon-wrapper,

.ribbon-wrapper-reverse,

.ribbon-wrapper-bottom,

.ribbon-wrapper-right-bottom {

    position: relative;

    padding: 50px 15px 15px 15px;

}



.ribbon-vwrapper {

    padding: 15px 15px 15px 50px;

    position: relative;

}



.ribbon-overflow {

    overflow: hidden;

}



.ribbon-vwrapper-reverse {

    padding: 15px 50px 15px 15px;

}



.ribbon-wrapper-bottom {

    padding: 15px 15px 50px 50px;

}



.ribbon-wrapper-right-bottom {

    padding: 15px 50px 50px 15px;

}



.ribbon-content {

    margin-bottom: 0px;

}



.ribbon {

    padding: 0 20px;

    height: 30px;

    line-height: 30px;

    clear: left;

    position: absolute;

    top: 12px;

    left: -2px;

    color: #ffffff;

}



.ribbon-bookmark:before {

    position: absolute;

    top: 0;

    left: 100%;

    display: block;

    width: 0;

    height: 0;

    content: '';

    border: 15px solid #263238;

    border-right: 10px solid transparent;

}



.ribbon-right {

    left: auto;

    right: -2px;

}



.ribbon-bookmark.ribbon-right:before {

    right: 100%;

    left: auto;

    border-right: 15px solid #263238;

    border-left: 10px solid transparent;

}



.ribbon-vertical-l,

.ribbon-vertical-r {

    clear: none;

    padding: 0 5px;

    height: 70px;

    width: 30px;

    line-height: 70px;

    text-align: center;

    left: 12px;

    top: -2px;

}



.ribbon-vertical-r {

    left: auto;

    right: 12px;

}



.ribbon-bookmark.ribbon-vertical-l:before,

.ribbon-bookmark.ribbon-vertical-r:before {

    top: 100%;

    left: 0;

    margin-top: -14px;

    border-right: 15px solid #263238;

    border-bottom: 10px solid transparent;

}



.ribbon-badge {

    top: 15px;

    overflow: hidden;

    left: -90px;

    width: 100%;

    text-align: center;

    -webkit-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

}



.ribbon-badge.ribbon-right {

    left: auto;

    right: -90px;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

}



.ribbon-badge.ribbon-bottom {

    top: auto;

    bottom: 15px;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

}



.ribbon-badge.ribbon-right.ribbon-bottom {

    -webkit-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

}



.ribbon-corner {

    top: 0;

    left: 0;

    background-color: transparent !important;

    padding: 6px 0 0 10px;

}



.ribbon-corner i {

    position: relative;

}



.ribbon-corner:before {

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 0;

    content: '';

    border: 30px solid transparent;

    border-top-color: #000;

    border-left-color: #000;

}



.ribbon-corner.ribbon-right:before {

    right: 0;

    left: auto;

    border-right-color: #526069;

    border-left-color: transparent;

}



.ribbon-corner.ribbon-right {

    right: 0;

    left: auto;

    padding: 6px 10px 0 0;

}



.ribbon-corner.ribbon-bottom:before {

    top: auto;

    bottom: 0;

    border-top-color: transparent;

    border-bottom-color: #526069;

}



.ribbon-corner.ribbon-bottom {

    bottom: 0;

    top: auto;

    padding: 0 10px 6px 10px;

}



.ribbon-custom {

    background: #000;

}



.ribbon-bookmark.ribbon-right.ribbon-custom:before {

    border-right-color: #000;

    border-left-color: transparent;

}



.ribbon-bookmark.ribbon-vertical-l.ribbon-custom:before,

.ribbon-bookmark.ribbon-vertical-r.ribbon-custom:before {

    border-right-color: #000;

    border-bottom-color: transparent;

}



.ribbon-primary {

    background: #000;

}



.ribbon-bookmark.ribbon-primary:before {

    border-color: #000;

    border-right-color: transparent;

}



.ribbon-bookmark.ribbon-right.ribbon-primary:before {

    border-right-color: #000;

    border-left-color: transparent;

}



.ribbon-bookmark.ribbon-vertical-l.ribbon-primary:before,

.ribbon-bookmark.ribbon-vertical-r.ribbon-primary:before {

    border-right-color: #000;

    border-bottom-color: transparent;

}



.ribbon-primary.ribbon-corner:before {

    border-top-color: #000;

    border-left-color: #000;

}



.ribbon-primary.ribbon-corner.ribbon-right:before {

    border-right-color: #000;

    border-left-color: transparent;

}



.ribbon-primary.ribbon-corner.ribbon-bottom:before {

    border-top-color: transparent;

    border-bottom-color: #000;

}



.ribbon-success {

    background: #26dad2;

}



.ribbon-bookmark.ribbon-success:before {

    border-color: #26dad2;

    border-right-color: transparent;

}



.ribbon-bookmark.ribbon-right.ribbon-success:before {

    border-right-color: #26dad2;

    border-left-color: transparent;

}



.ribbon-bookmark.ribbon-vertical-l.ribbon-success:before,

.ribbon-bookmark.ribbon-vertical-r.ribbon-success:before {

    border-right-color: #26dad2;

    border-bottom-color: transparent;

}



.ribbon-success.ribbon-corner:before {

    border-top-color: #26dad2;

    border-left-color: #26dad2;

}



.ribbon-success.ribbon-corner.ribbon-right:before {

    border-right-color: #26dad2;

    border-left-color: transparent;

}



.ribbon-success.ribbon-corner.ribbon-bottom:before {

    border-top-color: transparent;

    border-bottom-color: #26dad2;

}



.ribbon-info {

    background: #000;

}



.ribbon-bookmark.ribbon-info:before {

    border-color: #000;

    border-right-color: transparent;

}



.ribbon-bookmark.ribbon-right.ribbon-info:before {

    border-right-color: #000;

    border-left-color: transparent;

}



.ribbon-bookmark.ribbon-vertical-l.ribbon-info:before,

.ribbon-bookmark.ribbon-vertical-r.ribbon-info:before {

    border-right-color: #000;

    border-bottom-color: transparent;

}



.ribbon-info.ribbon-corner:before {

    border-top-color: #000;

    border-left-color: #000;

}



.ribbon-info.ribbon-corner.ribbon-right:before {

    border-right-color: #000;

    border-left-color: transparent;

}



.ribbon-info.ribbon-corner.ribbon-bottom:before {

    border-top-color: transparent;

    border-bottom-color: #000;

}



.ribbon-warning {

    background: #000;

}



.ribbon-bookmark.ribbon-warning:before {

    border-color: #000;

    border-right-color: transparent;

}



.ribbon-bookmark.ribbon-right.ribbon-warning:before {

    border-right-color: #000;

    border-left-color: transparent;

}



.ribbon-bookmark.ribbon-vertical-l.ribbon-warning:before,

.ribbon-bookmark.ribbon-vertical-r.ribbon-warning:before {

    border-right-color: #000;

    border-bottom-color: transparent;

}



.ribbon-warning.ribbon-corner:before {

    border-top-color: #000;

    border-left-color: #000;

}



.ribbon-warning.ribbon-corner.ribbon-right:before {

    border-right-color: #000;

    border-left-color: transparent;

}



.ribbon-warning.ribbon-corner.ribbon-bottom:before {

    border-top-color: transparent;

    border-bottom-color: #000;

}



.ribbon-danger {

    background: #ef5350;

}



.ribbon-bookmark.ribbon-danger:before {

    border-color: #ef5350;

    border-right-color: transparent;

}



.ribbon-bookmark.ribbon-right.ribbon-danger:before {

    border-right-color: #ef5350;

    border-left-color: transparent;

}



.ribbon-bookmark.ribbon-vertical-l.ribbon-danger:before,

.ribbon-bookmark.ribbon-vertical-r.ribbon-danger:before {

    border-right-color: #ef5350;

    border-bottom-color: transparent;

}



.ribbon-danger.ribbon-corner:before {

    border-top-color: #ef5350;

    border-left-color: #ef5350;

}



.ribbon-danger.ribbon-corner.ribbon-right:before {

    border-right-color: #ef5350;

    border-left-color: transparent;

}



.ribbon-danger.ribbon-corner.ribbon-bottom:before {

    border-top-color: transparent;

    border-bottom-color: #ef5350;

}



.ribbon-default {

    background: #263238;

}



.ribbon-bookmark.ribbon-default:before {

    border-color: #263238;

    border-right-color: transparent;

}



.ribbon-bookmark.ribbon-right.ribbon-default:before {

    border-right-color: #263238;

    border-left-color: transparent;

}



.ribbon-bookmark.ribbon-vertical-l.ribbon-default:before,

.ribbon-bookmark.ribbon-vertical-r.ribbon-default:before {

    border-right-color: #263238;

    border-bottom-color: transparent;

}



.ribbon-default.ribbon-corner:before {

    border-top-color: #263238;

    border-left-color: #263238;

}



.ribbon-default.ribbon-corner.ribbon-right:before {

    border-right-color: #263238;

    border-left-color: transparent;

}



.ribbon-default.ribbon-corner.ribbon-bottom:before {

    border-top-color: transparent;

    border-bottom-color: #263238;

}



/*******************

session ideal timeout page

******************/

#idletimeout {

    background: #000;

    border: 3px solid #000;

    color: #fff;

    font-family: arial, sans-serif;

    text-align: center;

    font-size: 12px;

    padding: 10px;

    position: relative;

    top: 0px;

    left: 0;

    right: 0;

    z-index: 100000;

    display: none;

}



#idletimeout a {

    color: #ffffff;

    font-weight: bold;

}



#idletimeout span {

    font-weight: bold;

}



/*******************

Stylish tooltip

******************/

.mytooltip:hover .tooltip-content2, .mytooltip:hover .tooltip-content2 i {

    opacity: 1;

    font-size: 18px;

    pointer-events: auto;

    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);

    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);

}



.mytooltip:hover .tooltip-content4, .mytooltip:hover .tooltip-text2 {

    pointer-events: auto;

    opacity: 1;

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

    transform: translate3d(0, 0, 0);

}



.mytooltip {

    display: inline;

    position: relative;

    z-index: 9999;

}



.mytooltip:hover .tooltip-item::after {

    pointer-events: auto;

}



.mytooltip:hover .tooltip-content {

    pointer-events: auto;

    opacity: 1;

    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0);

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

}



.mytooltip:hover .tooltip-content3 {

    opacity: 1;

    pointer-events: auto;

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

}



.mytooltip:hover .tooltip-item2 {

    color: #ffffff;

    -webkit-transform: translate3d(0, -0.5em, 0);

    transform: translate3d(0, -0.5em, 0);

}



.mytooltip:hover .tooltip-content5 {

    opacity: 1;

    pointer-events: auto;

    -webkit-transition-delay: 0s;

    -o-transition-delay: 0s;

    transition-delay: 0s;

}



.mytooltip:hover .tooltip-text3 {

    -webkit-transition-delay: 0s;

    -o-transition-delay: 0s;

    transition-delay: 0s;

    -webkit-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

}



.mytooltip:hover .tooltip-inner2 {

    -webkit-transition-delay: 0.3s;

    -o-transition-delay: 0.3s;

    transition-delay: 0.3s;

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

    transform: translate3d(0, 0, 0);

}



.tooltip-item {

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

    cursor: pointer;

    display: inline-block;

    font-weight: 500;

    padding: 0 10px;

}



.tooltip-item::after {

    content: '';

    position: absolute;

    width: 360px;

    height: 20px;

    bottom: 100%;

    left: 50%;

    pointer-events: none;

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

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

}



.tooltip-content {

    position: absolute;

    z-index: 9999;

    width: 360px;

    left: 50%;

    margin: 0 0 20px -180px;

    bottom: 100%;

    text-align: left;

    font-size: 14px;

    line-height: 30px;

    -webkit-box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);

    box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);

    background: #2b2b2b;

    opacity: 0;

    cursor: default;

    pointer-events: none;

}



.tooltip-content img {

    position: relative;

    height: 140px;

    display: block;

    float: left;

    margin-right: 1em;

}



.tooltip-effect-5 .tooltip-content {

    width: 180px;

    margin-left: -90px;

    -webkit-transform-origin: 50% calc(106%);

    -ms-transform-origin: 50% calc(106%);

    transform-origin: 50% calc(106%);

    -webkit-transform: rotate3d(0, 0, 1, 15deg);

    transform: rotate3d(0, 0, 1, 15deg);

    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;

    transition: opacity 0.2s, -webkit-transform 0.2s;

    -o-transition: opacity 0.2s, transform 0.2s;

    transition: opacity 0.2s, transform 0.2s;

    transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;

    -webkit-transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39);

    -o-transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39);

    transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39);

}



.tooltip-effect-5 .tooltip-text {

    padding: 1.4em;

}



.tooltip-content::after {

    content: '';

    top: 100%;

    left: 50%;

    border: solid transparent;

    height: 0;

    width: 0;

    position: absolute;

    pointer-events: none;

    border-color: transparent;

    border-top-color: #2a3035;

    border-width: 10px;

    margin-left: -10px;

}



.tooltip-text {

    font-size: 14px;

    line-height: 24px;

    display: block;

    padding: 1.31em 1.21em 1.21em 0;

    color: #ffffff;

}



.tooltip-content2 {

    position: absolute;

    z-index: 9999;

    width: 80px;

    height: 80px;

    padding-top: 25px;

    left: 50%;

    margin-left: -40px;

    bottom: 100%;

    border-radius: 50%;

    text-align: center;

    background: #000;

    color: #ffffff;

    opacity: 0;

    margin-bottom: 20px;

    cursor: default;

    pointer-events: none;

}



.tooltip-content2 i {

    opacity: 0;

}



.tooltip-effect-6 .tooltip-content2 {

    -webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg);

    transform: translate3d(0, 10px, 0) rotate3d(1, 1, 1, 45deg);

    -webkit-transform-origin: 50% 100%;

    -ms-transform-origin: 50% 100%;

    transform-origin: 50% 100%;

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    transition: opacity 0.3s, -webkit-transform 0.3s;

    -o-transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;

}



.tooltip-effect-6 .tooltip-content2 i {

    -webkit-transform: scale3d(0, 0, 1);

    transform: scale3d(0, 0, 1);

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    transition: opacity 0.3s, -webkit-transform 0.3s;

    -o-transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;

}



.tooltip-effect-6:hover .tooltip-content2 i {

    -webkit-transform: rotate3d(1, 1, 1, 0);

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

}



.tooltip-content2::after {

    content: '';

    position: absolute;

    top: 100%;

    left: 50%;

    margin: -7px 0 0 -15px;

    width: 30px;

    height: 20px;

    background: url(../../assets/images/tooltip/tooltip1.svg) no-repeat center center;

    background-size: 100%;

}



.tooltip-content3 {

    position: absolute;

    background: url(../../assets/images/tooltip/shape1.svg) no-repeat center bottom;

    background-size: 100% 100%;

    z-index: 9999;

    width: 200px;

    bottom: 100%;

    left: 50%;

    margin-left: -100px;

    padding: 50px 30px;

    text-align: center;

    color: #ffffff;

    opacity: 0;

    cursor: default;

    font-size: 14;

    line-height: 27px;

    pointer-events: none;

    -webkit-transform: scale3d(0.1, 0.2, 1);

    transform: scale3d(0.1, 0.2, 1);

    -webkit-transform-origin: 50% 120%;

    -ms-transform-origin: 50% 120%;

    transform-origin: 50% 120%;

    -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;

    transition: opacity 0.4s, -webkit-transform 0.4s;

    -o-transition: opacity 0.4s, transform 0.4s;

    transition: opacity 0.4s, transform 0.4s;

    transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s;

    -webkit-transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1);

    -o-transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1);

    transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1);

}



.tooltip-content3::after {

    content: '';

    position: absolute;

    width: 16px;

    height: 16px;

    left: 50%;

    margin-left: -8px;

    top: 100%;

    background: #00aeef;

    -webkit-transform: translate3d(0, -60%, 0) rotate3d(0, 0, 1, 45deg);

    transform: translate3d(0, -60%, 0) rotate3d(0, 0, 1, 45deg);

}



.tooltip-item2 {

    color: #00aeef;

    cursor: pointer;

    z-index: 100;

    position: relative;

    display: inline-block;

    font-weight: 500;

    -webkit-transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s;

    transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s;

    -o-transition: background-color 0.3s, color 0.3s, transform 0.3s;

    transition: background-color 0.3s, color 0.3s, transform 0.3s;

    transition: background-color 0.3s, color 0.3s, transform 0.3s, -webkit-transform 0.3s;

}



.tooltip-content4 {

    position: absolute;

    z-index: 99;

    width: 360px;

    left: 50%;

    margin-left: -180px;

    bottom: -5px;

    text-align: left;

    background: #00aeef;

    opacity: 0;

    font-size: 14px;

    line-height: 27px;

    padding: 1.5em;

    color: #ffffff;

    border-bottom: 55px solid #2b2b2b;

    cursor: default;

    pointer-events: none;

    border-radius: 5px;

    -webkit-transform: translate3d(0, -0.5em, 0);

    transform: translate3d(0, -0.5em, 0);

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    transition: opacity 0.3s, -webkit-transform 0.3s;

    -o-transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;

}



.tooltip-content4 a {

    color: #2b2b2b;

}



.tooltip-text2 {

    opacity: 0;

    -webkit-transform: translate3d(0, 1.5em, 0);

    transform: translate3d(0, 1.5em, 0);

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    transition: opacity 0.3s, -webkit-transform 0.3s;

    -o-transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;

}



.tooltip-content5 {

    position: absolute;

    z-index: 9999;

    width: 300px;

    left: 50%;

    bottom: 100%;

    font-size: 20px;

    line-height: 1.4;

    text-align: center;

    font-weight: 400;

    color: #ffffff;

    background: transparent;

    opacity: 0;

    margin: 0 0 20px -150px;

    cursor: default;

    pointer-events: none;

    -webkit-transition: opacity 0.3s 0.3s;

    -o-transition: opacity 0.3s 0.3s;

    transition: opacity 0.3s 0.3s;

}



.tooltip-content5 span {

    display: block;

}



.tooltip-text3 {

    border-bottom: 10px solid #000;

    overflow: hidden;

    -webkit-transform: scale3d(0, 1, 1);

    transform: scale3d(0, 1, 1);

    -webkit-transition: -webkit-transform 0.3s 0.3s;

    transition: -webkit-transform 0.3s 0.3s;

    -o-transition: transform 0.3s 0.3s;

    transition: transform 0.3s 0.3s;

    transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;

}



.tooltip-inner2 {

    background: #2b2b2b;

    padding: 40px;

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

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

    -webkit-transition: -webkit-transform 0.3s;

    transition: -webkit-transform 0.3s;

    -o-transition: transform 0.3s;

    transition: transform 0.3s;

    transition: transform 0.3s, -webkit-transform 0.3s;

}



.tooltip-content5::after {

    content: '';

    bottom: -20px;

    left: 50%;

    border: solid transparent;

    height: 0;

    width: 0;

    position: absolute;

    pointer-events: none;

    border-color: transparent;

    border-top-color: #000;

    border-width: 10px;

    margin-left: -10px;

}



.tooltip-effect-1 .tooltip-content {

    -webkit-transform: translate3d(0, -10px, 0);

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

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    transition: opacity 0.3s, -webkit-transform 0.3s;

    -o-transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;

    color: #ffffff;

}



.tooltip-effect-2 .tooltip-content {

    -webkit-transform-origin: 50% calc(110%);

    -ms-transform-origin: 50% calc(110%);

    transform-origin: 50% calc(110%);

    -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 45deg);

    transform: perspective(1000px) rotate3d(1, 0, 0, 45deg);

    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;

    transition: opacity 0.2s, -webkit-transform 0.2s;

    -o-transition: opacity 0.2s, transform 0.2s;

    transition: opacity 0.2s, transform 0.2s;

    transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;

}



.tooltip-effect-3 .tooltip-content {

    -webkit-transform: translate3d(0, 10px, 0) rotate3d(1, 1, 0, 25deg);

    transform: translate3d(0, 10px, 0) rotate3d(1, 1, 0, 25deg);

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    transition: opacity 0.3s, -webkit-transform 0.3s;

    -o-transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;

}



.tooltip-effect-4 .tooltip-content {

    -webkit-transform-origin: 50% 100%;

    -ms-transform-origin: 50% 100%;

    transform-origin: 50% 100%;

    -webkit-transform: scale3d(0.7, 0.3, 1);

    transform: scale3d(0.7, 0.3, 1);

    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;

    transition: opacity 0.2s, -webkit-transform 0.2s;

    -o-transition: opacity 0.2s, transform 0.2s;

    transition: opacity 0.2s, transform 0.2s;

    transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;

}



.tooltip.tooltip-effect-2:hover .tooltip-content {

    -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);

    transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);

}



a.mytooltip {

    font-weight: 500;

    color: #000;

}



.tooltip-effect-7 .tooltip-content2 {

    -webkit-transform: translate3d(0, 10px, 0);

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

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    transition: opacity 0.3s, -webkit-transform 0.3s;

    -o-transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;

}



.tooltip-effect-7 .tooltip-content2 i {

    -webkit-transform: translate3d(0, 15px, 0);

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

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    transition: opacity 0.3s, -webkit-transform 0.3s;

    -o-transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;

}



.tooltip-effect-8 .tooltip-content2 {

    -webkit-transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg);

    transform: translate3d(0, 10px, 0) rotate3d(0, 1, 0, 90deg);

    -webkit-transform-origin: 50% 100%;

    -ms-transform-origin: 50% 100%;

    transform-origin: 50% 100%;

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    transition: opacity 0.3s, -webkit-transform 0.3s;

    -o-transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;

}



.tooltip-effect-8 .tooltip-content2 i {

    -webkit-transform: scale3d(0, 0, 1);

    transform: scale3d(0, 0, 1);

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    transition: opacity 0.3s, -webkit-transform 0.3s;

    -o-transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;

}



.tooltip-effect-9 .tooltip-content2 {

    -webkit-transform: translate3d(0, -20px, 0);

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

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    transition: opacity 0.3s, -webkit-transform 0.3s;

    -o-transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;

}



.tooltip-effect-9 .tooltip-content2 i {

    -webkit-transform: translate3d(0, 20px, 0);

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

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    transition: opacity 0.3s, -webkit-transform 0.3s;

    -o-transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;

}



/*******************

Error Page

******************/

.error-box {

    height: 100%;

    position: fixed;

    background: url(../../assets/images/background/error-bg.jpg) no-repeat center center #fff;

    width: 100%;

}



.error-box .footer {

    width: 100%;

    left: 0px;

    right: 0px;

}



.error-body {

    padding-top: 5%;

}



.error-body h1 {

    font-size: 210px;

    font-weight: 900;

    line-height: 210px;

}



/*******************

google map Page

******************/
#map{
    z-index: 0;
}
.gmaps,

.gmaps-panaroma {

    height: 300px;

}



.gmaps,

.gmaps-panaroma {

    height: 300px;

    background: #f2f4f8;

    border-radius: 3px;

}



.gmaps-overlay {

    display: block;

    text-align: center;

    color: #ffffff;

    font-size: 16px;

    line-height: 40px;

    background: #000;

    border-radius: 4px;

    padding: 10px 20px;

}



.gmaps-overlay_arrow {

    left: 50%;

    margin-left: -16px;

    width: 0;

    height: 0;

    position: absolute;

}



.gmaps-overlay_arrow.above {

    bottom: -15px;

    border-left: 16px solid transparent;

    border-right: 16px solid transparent;

    border-top: 16px solid #000;

}



.gmaps-overlay_arrow.below {

    top: -15px;

    border-left: 16px solid transparent;

    border-right: 16px solid transparent;

    border-bottom: 16px solid #000;

}



/*******************

vector map Page

******************/

.jvectormap-zoomin,

.jvectormap-zoomout {

    width: 10px;

    height: 10px;

    line-height: 10px;

}



.jvectormap-zoomout {

    top: 40px;

}



/*******************

Seach listing Page

******************/

.search-listing {

    padding: 0px;

    margin: 0px;

}



.search-listing li {

    list-style: none;

    padding: 15px 0;

    border-bottom: 1px solid rgba(120, 130, 140, 0.13);

}



.search-listing li h3 {

    margin: 0px;

    font-size: 18px;

}



.search-listing li h3 a {

    color: #000;

}



.search-listing li h3 a:hover {

    text-decoration: underline;

}



.search-listing li a {

    color: #26dad2;

}



/*******************

Login register and recover password Page

******************/

.login-register {

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center center;

    height: 100%;

    width: 100%;

    padding: 5% 0;

    position: fixed;

    overflow: auto;

}



.login-box {

    width: 400px;

    margin: 0 auto;

}



.login-box .footer {

    width: 100%;

    left: 0px;

    right: 0px;

}



.login-box .social {

    display: block;

    margin-bottom: 30px;

}



#recoverform {

    display: none;

}



.login-sidebar {

    padding: 0px;

    margin-top: 0px;

}



.login-sidebar .login-box {

    right: 0px;

    position: absolute;

    height: 100%;

}



/*******************

FAQs Page

******************/

.minimal-faq .card {

    border: 0px;

}



.minimal-faq .card .card-header {

    background: #ffffff;

    padding: 20px 0;

    margin-top: 10px;

}



.minimal-faq .card .card-body {

    padding: 15px 0px;

}



/*******************

Pricing Page

******************/

.pricing-box {

    position: relative;

    text-align: center;

    margin-top: 30px;

}



.featured-plan {

    margin-top: 0px;

}



.featured-plan .pricing-body {

    padding: 60px 0;

    background: #ebf3f5;

    border: 1px solid #ddd;

}



.featured-plan .price-table-content .price-row {

    border-top: 1px solid rgba(120, 130, 140, 0.13);

}



.pricing-body {

    border-radius: 0px;

    border-top: 1px solid rgba(120, 130, 140, 0.13);

    border-bottom: 5px solid rgba(120, 130, 140, 0.13);

    vertical-align: middle;

    padding: 30px 0;

    position: relative;

}



.pricing-body h2 {

    position: relative;

    font-size: 56px;

    margin: 20px 0 10px;

    font-weight: 500;

}



.pricing-body h2 span {

    position: absolute;

    font-size: 15px;

    top: -10px;

    margin-left: -10px;

}



.price-table-content .price-row {

    padding: 20px 0;

    border-top: 1px solid rgba(120, 130, 140, 0.13);

}



.pricing-plan {

    padding: 0 15px;

}



.pricing-plan .no-padding {

    padding: 0px;

}



.price-lable {

    position: absolute;

    top: -10px;

    padding: 5px 10px;

    margin: 0 auto;

    display: inline-block;

    width: 100px;

    left: 0px;

    right: 0px;

}



/*******************

chat application Page

******************/

.chat-main-box {

    position: relative;

    overflow: hidden;

}



.chat-main-box .chat-left-aside {

    position: relative;

    width: 250px;

    float: left;

    z-index: 9;

    top: 0px;

    border-right: 1px solid rgba(120, 130, 140, 0.13);

}



.chat-main-box .chat-left-aside .open-panel {

    display: none;

    cursor: pointer;

    position: absolute;

    left: -webkit-calc(100% - 1px);

    top: 50%;

    z-index: 100;

    background-color: #fff;

    -webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);

    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);

    border-radius: 0 100px 100px 0;

    line-height: 1;

    padding: 15px 8px 15px 4px;

}



.chat-main-box .chat-left-aside .chat-left-inner {

    position: relative;

}



.chat-main-box .chat-left-aside .chat-left-inner .form-control {

    height: 60px;

    padding: 15px;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000)), -webkit-gradient(linear, left top, left bottom, from(rgba(120, 130, 140, 0.13)), to(rgba(120, 130, 140, 0.13)));

    background-image: -webkit-linear-gradient(#000, #000), -webkit-linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));

    background-image: -o-linear-gradient(#000, #000), -o-linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));

    background-image: linear-gradient(#000, #000), linear-gradient(rgba(120, 130, 140, 0.13), rgba(120, 130, 140, 0.13));

}



.chat-main-box .chat-left-aside .chat-left-inner .style-none {

    padding: 0px;

}



.chat-main-box .chat-left-aside .chat-left-inner .style-none li {

    list-style: none;

    overflow: hidden;

}



.chat-main-box .chat-left-aside .chat-left-inner .style-none li a {

    padding: 20px;

}



.chat-main-box .chat-left-aside .chat-left-inner .style-none li a:hover, .chat-main-box .chat-left-aside .chat-left-inner .style-none li a.active {

    background: #ebf3f5;

}



.chat-main-box .chat-right-aside {

    width: calc(100% - 250px);

    float: left;

}



.chat-main-box .chat-right-aside .chat-list {

    max-height: none;

    height: 100%;

    padding-top: 40px;

}



.chat-main-box .chat-right-aside .chat-list .chat-text {

    border-radius: 6px;

}



.chat-main-box .chat-right-aside .send-chat-box {

    position: relative;

}



.chat-main-box .chat-right-aside .send-chat-box .form-control {

    border: none;

    border-top: 1px solid rgba(120, 130, 140, 0.13);

    resize: none;

    height: 80px;

    padding-right: 180px;

}



.chat-main-box .chat-right-aside .send-chat-box .form-control:focus {

    border-color: rgba(120, 130, 140, 0.13);

}



.chat-main-box .chat-right-aside .send-chat-box .custom-send {

    position: absolute;

    right: 20px;

    bottom: 10px;

}



.chat-main-box .chat-right-aside .send-chat-box .custom-send .cst-icon {

    color: #67757c;

    margin-right: 10px;

}



/*******************

Email inbox Page

******************/

.inbox-panel .list-group .list-group-item {

    border: 0px;

    border-radius: 0px;

    border-left: 3px solid transparent;

}



.inbox-panel .list-group .list-group-item a {

    color: #67757c;

}



.inbox-panel .list-group .list-group-item.active, .inbox-panel .list-group .list-group-item:hover {

    background: #f2f4f8;

    border-left: 3px solid #000;

}



.inbox-center .unread td {

    font-weight: 400;

}



.inbox-center td {

    vertical-align: middle;

    white-space: nowrap;

}



.inbox-center a {

    color: #67757c;

    padding: 2px 0 3px 0;

    overflow: hidden;

    vertical-align: middle;

    -o-text-overflow: ellipsis;

    text-overflow: ellipsis;

    white-space: nowrap;

    display: inline-block;

}



.inbox-center .checkbox {

    margin-top: -13px;

    height: 20px;

}



.calendar-events {

    padding: 8px 10px;

    border: 1px solid #ffffff;

    cursor: move;

}



.calendar-events:hover {

    border: 1px dashed rgba(120, 130, 140, 0.13);

}



.calendar-events i {

    margin-right: 8px;

}



/*******************

Contact app Page

******************/

/*left-aside-column*/

.contact-page-aside {

    position: relative;

}



.left-aside {

    position: absolute;

    border-right: 1px solid rgba(120, 130, 140, 0.13);

    padding: 20px;

    width: 250px;

    height: 100%;

}



.right-aside {

    padding: 20px;

    margin-left: 250px;

}



.contact-list td {

    vertical-align: middle;

    padding: 25px 10px;

}



.contact-list td img {

    width: 30px;

}



.list-style-none {

    margin: 0px;

    padding: 0px;

}



.list-style-none li {

    list-style: none;

    margin: 0px;

}



.list-style-none li.box-label a {

    font-weight: 500;

}



.list-style-none li.divider {

    margin: 10px 0;

    height: 1px;

    background: rgba(120, 130, 140, 0.13);

}



.list-style-none li a {

    padding: 15px 10px;

    display: block;

    color: #67757c;

}



.list-style-none li a:hover {

    color: #000;

}



.list-style-none li a span {

    float: right;

}



.slimScrollBar {

    z-index: 10 !important;

}



.carousel-item-next,

.carousel-item-prev,

.carousel-item.active {

    display: block;

}



/*Documentation page*/

.plugin-details {

    display: none;

}



.plugin-details-active {

    display: block;

}



.earning-box h6 {

    font-weight: 500;

    margin-bottom: 0px;

    white-space: nowrap;

}



.earning-box td,

.earning-box th {

    vertical-align: middle;

}



/*******************

Table-Jsgrid table

******************/

.jsgrid-pager-page a,

.jsgrid-pager-current-page,

.jsgrid-pager-nav-button a {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    display: inline-block;

    min-width: 1.5em;

    padding: 0.5em 1em;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    color: #67757c;

    border: 1px solid #ddd;

}



.jsgrid-pager-page a:hover,

.jsgrid-pager-nav-button a:hover {

    background-color: #000;

    color: #ffffff;

}



.jsgrid-pager-current-page {

    background-color: #000;

    color: #ffffff;

}



.jsgrid-pager-page,

.jsgrid-pager-nav-button {

    padding: 0;

}



.jsgrid-pager-page.jsgrid-pager-current-page {

    padding: 0.5em 1em !important;

}



/*

Template Name: Admin Press Admin

Author: Themedesigner

Email: niravjoshi87@gmail.com

File: scss

*/

/*******************

Main sidebar

******************/

.left-sidebar {

    position: absolute;

    width: 265px;

    height: 100%;

    top: 0px;

    z-index: 20;

    padding-top: 95px;

    background: #0C111C;

    -webkit-box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);

    box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);

}



.fix-sidebar .left-sidebar {

    position: fixed;

}



/*******************

use profile section

******************/

.user-profile {

    position: relative;

    background-size: cover;

}



.user-profile .setpos {

    top: -47px;

    right: -3px;

}



.user-profile .profile-img {

    width: 70px;

    margin: 0 auto;

    padding: 10px 0 5px 0;

    border-radius: 100%;

}



.user-profile .profile-img img {

    width: 100%;

    padding: 5px;

    border: 1px solid rgba(120, 130, 140, 0.13);

    border-radius: 100%;

}



.user-profile .profile-text {

    padding: 5px 0px;

    position: relative;

    text-align: center;

}



.user-profile .profile-text > a {

    color: #99abb4;

    padding: 0 5px;

}



.user-profile .profile-text > a:hover {

    color: #000;

}



.user-profile .profile-text > a:after {

    display: none;

}



.user-profile .dropdown-menu {

    left: 0px;

    right: 0px;

    top: 62px !important;

    width: 180px;

    margin: 0 auto;

}



/*******************

sidebar footer

******************/

.sidebar-footer {

    position: fixed;

    z-index: 10;

    bottom: 0px;

    left: 0px;

    -webkit-transition: 0.2s ease-out;

    -o-transition: 0.2s ease-out;

    transition: 0.2s ease-out;

    width: 265px;

    background: #fff;

    border-top: 1px solid rgba(120, 130, 140, 0.13);

}



.sidebar-footer a {

    padding: 15px;

    width: 33.333337%;

    float: left;

    text-align: center;

    font-size: 18px;

}



/*******************

sidebar navigation

******************/

.scroll-sidebar {

    padding-bottom: 60px;

    padding-top: 0px;

}



.collapse.in {

    display: block;

}



.sidebar-nav {

    background: #000;

    padding: 0px;

}



.sidebar-nav ul {

    margin: 0px;

    padding: 0px;

    transition: all ease 0.5s;

    padding: 0px 10px 0px 0px;

}



.sidebar-nav ul li {

    list-style: none;

}



.sidebar-nav ul li a {

    color: #fff;

    padding: 8px 35px 8px 15px;

    display: block;

    font-size: 15px;

    font-weight: 400;

    /*border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;*/

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

}



/*.mini-sidebar .sidebar-nav ul li a{color: #fff !important;}*/

.sidebar-nav ul li a.active, .sidebar-nav ul li a:hover {

    color: #000;

}



.sidebar-nav ul li a.active i, .sidebar-nav ul li a:hover i {

    color: #000;

}



.sidebar-nav ul li a.active {

    font-weight: 500;

    color: #263238;

}



.sidebar-nav ul li ul {

    padding-left: 0px;

    /*background: rgba(255, 255, 255, 0.09);*/

}



.sidebar-nav ul li ul li a {

    padding: 7px 25px 7px 60px;

    position: relative;

    font-size: 13px;

    /*color: var(--brand);*/

}



.sidebar-nav ul li ul li a::before {

    content: "";

    width: 10px;

    height: 10px;

    border: 1px solid;

    display: inline-block;

    margin-right: 10px;

    border-radius: 50px;

    position: absolute;

    left: 40px;

    top: 14px;

    margin: 0;

}



.sidebar-nav ul li ul li a::after {

    content: "";

    width: 4px;

    height: 4px;

    border: 1px solid;

    display: inline-block;

    vertical-align: middle;

    margin-right: 10px;

    border-radius: 50px;

    position: absolute;

    left: 43px;

    top: 17px;

}



.sidebar-nav ul li ul ul {

    padding-left: 15px;

}



.sidebar-nav ul li.nav-small-cap {

    font-size: 12px;

    margin-bottom: 0px;

    padding: 14px 14px 14px 20px;

    color: #fff;

    font-weight: 500;

}



.sidebar-nav ul li.nav-devider {

    height: 1px;

    background: #fff;

    display: block;

    margin: 0px 0;

}



.sidebar-nav > ul > li > a {

    border-left: 1px solid transparent;

}



.sidebar-nav > ul > li > a i {

    width: 22px;

    font-size: 17px;

    display: inline-block;

    vertical-align: middle;

    color: #fff;

}



.mini-sidebar .sidebar-nav #sidebarnav > li:hover a i {

    color: var(--brand);

}



.sidebar-nav > ul > li > a .label {

    float: right;

    margin-top: 6px;

}



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

    font-weight: 400;

    /*background: #242933;*/

    color: #26c6da;

}



.sidebar-nav ul li a.active, .sidebar-nav ul li a:hover {

    color: #26c6da;

}



.sidebar-nav > ul > li {

    margin-bottom: 1px;

}



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

    color: #000;

    font-weight: 500;

    border-left: 0px solid #000;

}



.sidebar-nav > ul > li.active > a i {

    color: #000;

}



.sidebar-nav > ul > li.nav-subtitle {

    padding: 0 0px 0 0px;

    margin-bottom: 5px;

    margin-top: 15px;

}



.sidebar-nav > ul > li.nav-subtitle .nav-subtitle-span {

    padding: 5px 20px;

    font-weight: 700;

    font-size: 13px;

    text-transform: uppercase;

    background: rgba(255, 255, 255, 0.2);

    line-height: 1;

    display: block;

    text-align: left;

    color: rgba(255, 255, 255, 0.8);

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

    margin-right: -10px;

}



.sidebar-nav > ul > li.nav-separater hr {

    border-top: 1px dashed rgba(255, 255, 255, .5);

    margin: 9px 0;

}



.mini-sidebar .sidebar-nav > ul > li.nav-subtitle .nav-subtitle-span {

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

    width: 60px;

    font-size: 11px;

}



.sidebar-nav .has-arrow {

    position: relative;

}



.sidebar-nav .has-arrow::after {

    position: absolute;

    content: '';

    width: 8px;

    height: 8px;

    border-width: 2px 0 0 2px;

    border-style: solid;

    border-color: #fff;

    right: 1em;

    -webkit-transform: rotate(135deg) translate(0, -50%);

    -ms-transform: rotate(135deg) translate(0, -50%);

    -o-transform: rotate(135deg) translate(0, -50%);

    transform: rotate(135deg) translate(0, -50%);

    -webkit-transform-origin: top;

    -ms-transform-origin: top;

    -o-transform-origin: top;

    transform-origin: top;

    top: 47%;

    -webkit-transition: all .3s ease-out;

    -o-transition: all .3s ease-out;

    transition: all .3s ease-out;

}



.sidebar-nav .active > .has-arrow::after,

.sidebar-nav li > .has-arrow.active::after,

.sidebar-nav .has-arrow[aria-expanded="true"]::after {

    -webkit-transform: rotate(-135deg) translate(0, -50%);

    -ms-transform: rotate(-135deg) translate(0, -50%);

    -o-transform: rotate(-135deg) translate(0, -50%);

    top: 45%;

    width: 7px;

    transform: rotate(-135deg) translate(0, -50%);

}



/****************

When click on sidebar toggler and also for tablet

*****************/

@media (min-width: 768px) {

    .mini-sidebar .sidebar-nav #sidebarnav li {

        position: relative;

    }



    .mini-sidebar .sidebar-nav #sidebarnav > li > ul {

        position: absolute;

        left: 60px;

        top: 45px;

        width: 200px;

        z-index: 1001;

        background: #313336;

        display: none;

        padding-left: 1px;

    }

    

    .mini-sidebar .sidebar-nav ul li a{color: var(--brand);padding: 7px 25px 7px 60px;position: relative;border-right: 3px solid transparent;}

    .mini-sidebar .sidebar-nav ul li ul li a::after {left: 13px;}

    .mini-sidebar .user-profile .profile-img {

        width: 50px;

    }



    .mini-sidebar .user-profile .profile-img .setpos {

        top: -35px;

    }



    .mini-sidebar.fix-sidebar .left-sidebar {

        position: absolute;

    }



    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul {

        height: auto !important;

        overflow: auto;

    }



    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul,

    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul.collapse {

        display: block;

    }



    .mini-sidebar .sidebar-nav #sidebarnav > li > a.has-arrow:after {

        display: none;

    }



    .mini-sidebar .left-sidebar {

        width: 60px;

    }



    .mini-sidebar .user-profile {

        padding-bottom: 15px;

        width: 60px;

        margin-bottom: 7px;

    }



    .mini-sidebar .user-profile .profile-img {

        padding: 15px 0 0 0;

        margin: 0px 0 0 6px;

    }



    .mini-sidebar .user-profile .profile-img:before {

        top: 15px;

    }



    .mini-sidebar .scroll-sidebar {

        padding-bottom: 0px;

        position: absolute;

        overflow-x: hidden !important;

    }



    .mini-sidebar .hide-menu,

    .mini-sidebar .nav-small-cap,

    .mini-sidebar .sidebar-footer,

    .mini-sidebar .user-profile .profile-text,

    .mini-sidebar > .label {

        display: none;

    }



    .mini-sidebar .nav-devider {

        width: 60px;

    }



    .mini-sidebar .sidebar-nav {

        background: transparent;

    }



    .mini-sidebar .sidebar-nav #sidebarnav > li > a {

        padding: 9px 18px;

        width: 60px;

    }



    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {

        width: 260px;

        background: #313336;

    }



    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a .hide-menu {

        display: inline;

    }



    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a .label {

        display: none;

    }

}



@media (max-width: 767px) {

    .mini-sidebar .left-sidebar {

        position: fixed;

    }



    .mini-sidebar .left-sidebar,

    .mini-sidebar .sidebar-footer {

        left: -265px;

    }



    .mini-sidebar.show-sidebar .left-sidebar,

    .mini-sidebar.show-sidebar .sidebar-footer {

        left: 0px;

    }

}



/*

Template Name: Admin Press Admin

Author: Themedesigner

Email: niravjoshi87@gmail.com

File: scss

*/

/*******************

/*User mail widgets*/

/*******************/

.topbar .top-navbar .mailbox {

    width: 300px;

}



.topbar .top-navbar .mailbox ul {

    padding: 0px;

}



.topbar .top-navbar .mailbox ul li {

    list-style: none;

}



.mailbox ul li .drop-title {

    font-weight: 500;

    padding: 11px 20px 15px;

    border-bottom: 1px solid rgba(120, 130, 140, 0.13);

}



.mailbox ul li .nav-link {

    border-top: 1px solid rgba(120, 130, 140, 0.13);

    padding-top: 15px;

}



.mailbox .message-center {

    height: 200px;

    overflow: auto;

    position: relative;

}



.mailbox .message-center a {

    border-bottom: 1px solid rgba(120, 130, 140, 0.13);

    display: block;

    text-decoration: none;

    padding: 9px 15px;

}



.mailbox .message-center a:hover {

    background: #f2f4f8;

}



.mailbox .message-center a div {

    white-space: normal;

}



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

    width: 40px;

    position: relative;

    display: inline-block;

    margin: 0 10px 15px 0;

}



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

    width: 100%;

}



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

    border: 2px solid #ffffff;

    border-radius: 50%;

    display: inline-block;

    height: 10px;

    left: 30px;

    position: absolute;

    top: 1px;

    width: 10px;

}



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

    background: #26dad2;

}



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

    background: #ef5350;

}



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

    background: #000;

}



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

    background: #000;

}



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

    display: inline-block;

    width: 75%;

    vertical-align: middle;

}



.mailbox .message-center a .mail-contnet h5 {

    margin: 5px 0px 0;

}



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

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

    font-size: 12px;

    display: block;

    margin: 1px 0;

    -o-text-overflow: ellipsis;

    text-overflow: ellipsis;

    overflow: hidden;

    color: #67757c;

    white-space: nowrap;

}



/*******************

/*Analytic info sparkline chart page*/

/*******************/

.analytics-info li span {

    font-size: 24px;

    vertical-align: middle;

}



/*******************

/*States row*/

/*******************/

.stats-row {

    margin-bottom: 20px;

}



.stats-row .stat-item {

    display: inline-block;

    padding-right: 15px;

}



.stats-row .stat-item + .stat-item {

    padding-left: 15px;

    border-left: 1px solid rgba(120, 130, 140, 0.13);

}



/*******************/

/*Dashboard1 Weather*/

/*******************/

.city-weather-days {

    margin: 0px;

}



.city-weather-days li {

    text-align: center;

    padding: 15px 0;

}



.city-weather-days li span {

    display: block;

    padding: 10px 0 0;

    color: #99abb4;

}



.city-weather-days li i {

    display: block;

    font-size: 20px;

    color: #000;

}



.city-weather-days li h3 {

    font-weight: 300;

    margin-top: 5px;

}



/*******************/

/*Comment widgets*/

/*******************/

.comment-widgets {

    position: relative;

    margin-bottom: 10px;

}



.comment-widgets .comment-row {

    border-bottom: 1px solid rgba(120, 130, 140, 0.13);

    padding: 15px;

}



.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.02);

}



.comment-text {

    padding: 15px 15px 15px 20px;

    width: 80%;

}



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

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

    visibility: visible;

}



.comment-text p {

    max-height: 50px;

    width: 100%;

    overflow: hidden;

}



.comment-footer .action-icons {

    visibility: hidden;

}



.comment-footer .action-icons a {

    padding-left: 7px;

    vertical-align: middle;

    color: #99abb4;

}



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

    color: #000;

}



/*******************/

/*To do widgets*/

/*******************/

.todo-list li {

    border: 0px;

    margin-bottom: 0px;

    padding: 20px 15px 15px 0px;

}



.todo-list li .checkbox {

    width: 100%;

}



.todo-list li .checkbox label {

    font-weight: 400;

    color: #455a64;

}



.todo-list li:last-child {

    border-bottom: 0px;

}



.todo-list li .assignedto {

    padding: 0px 0 0 27px;

    margin: 0px;

}



.todo-list li .assignedto li {

    list-style: none;

    padding: 0px;

    display: inline-block;

    border: 0px;

    margin-right: 2px;

}



.todo-list li .assignedto li img {

    width: 30px;

    border-radius: 100%;

}



.todo-list li .item-date {

    padding-left: 25px;

    font-size: 12px;

    display: inline-block;

}



.list-task .task-done span {

    text-decoration: line-through;

}



/*******************/

/*Chat widget*/

/*******************/

.chat-list {

    margin: 0px;

    padding: 0px;

}



.chat-list li {

    list-style: none;

    margin-top: 5px;

}



.chat-list li .chat-img {

    display: inline-block;

    width: 45px;

    vertical-align: top;

}



.chat-list li .chat-img img {

    width: 45px;

    border-radius: 100%;

}



.chat-list li .chat-content {

    width: calc(100% - 140px);

    display: inline-block;

    padding-left: 15px;

}



.chat-list li .chat-content h5 {

    color: #263238;

}



.chat-list li .chat-content .box {

    display: inline-block;

    margin-bottom: 10px;

    position: relative;

}



.chat-list li .chat-content .box:after {

    right: 99%;

    top: 0;

    border: solid transparent;

    content: " ";

    height: 0;

    width: 0;

    position: absolute;

    pointer-events: none;

    border-top-color: #cfecfe;

    border-width: 8px;

    margin-left: -1px;

    border-right-color: #cfecfe;

}



.chat-list li .chat-time {

    display: block;

    text-align: right;

    width: 80px;

    margin-left: 28px;

    font-size: 10px;

    color: #99abb4;

}



.chat-list li.odd .chat-content {

    text-align: right;

    width: calc(100% - 90px);

}



.chat-list li.odd .box {

    clear: both;

}



.chat-list li.odd + .odd {

    margin-top: 0px;

}



.chat-list li.reverse {

    text-align: right;

}



.chat-list li.reverse .box:after {

    left: 99%;

    right: auto;

    border-right-color: transparent;

    border-left-color: #f6f6f6;

    border-top-color: #f6f6f6;

}



.chat-list li.reverse .chat-time {

    text-align: right;

    margin-left: auto;

    margin-right: 65px;

}



.chat-list li.reverse .chat-content {

    padding-left: 0px;

    padding-right: 15px;

}



/*******************/

/*Chat widget*/

/*******************/

.message-box ul li .drop-title {

    font-weight: 500;

    padding: 11px 20px 15px;

    border-bottom: 1px solid rgba(120, 130, 140, 0.13);

}



.message-box ul li .nav-link {

    border-top: 1px solid rgba(120, 130, 140, 0.13);

    padding-top: 15px;

}



.message-box .message-widget {

    position: relative;

}



.message-box .message-widget a {

    border-bottom: 1px solid rgba(120, 130, 140, 0.13);

    display: block;

    text-decoration: none;

    padding: 9px 15px;

}



.message-box .message-widget a:hover {

    background: #f2f4f8;

}



.message-box .message-widget a:last-child {

    border-bottom: 0px;

}



.message-box .message-widget a div {

    white-space: normal;

}



.message-box .message-widget a .user-img {

    width: 45px;

    position: relative;

    display: inline-block;

    margin: 0 10px 15px 0;

}



.message-box .message-widget a .user-img img {

    width: 100%;

}



.message-box .message-widget a .user-img .profile-status {

    border: 2px solid #ffffff;

    border-radius: 50%;

    display: inline-block;

    height: 10px;

    left: 33px;

    position: absolute;

    top: -1px;

    width: 10px;

}



.message-box .message-widget a .user-img .online {

    background: #26dad2;

}



.message-box .message-widget a .user-img .busy {

    background: #ef5350;

}



.message-box .message-widget a .user-img .away {

    background: #000;

}



.message-box .message-widget a .user-img .offline {

    background: #000;

}



.message-box .message-widget a .mail-contnet {

    display: inline-block;

    width: 73%;

    vertical-align: middle;

}



.message-box .message-widget a .mail-contnet h5 {

    margin: 5px 0px 0;

}



.message-box .message-widget a .mail-contnet .mail-desc,

.message-box .message-widget a .mail-contnet .time {

    font-size: 12px;

    display: block;

    margin: 1px 0;

    -o-text-overflow: ellipsis;

    text-overflow: ellipsis;

    overflow: hidden;

    color: #67757c;

    white-space: nowrap;

}



/*******************/

/*Calendar widget*/

/*******************/

.calendar {

    float: left;

    margin-bottom: 0px;

}



.fc-view {

    margin-top: 30px;

}



.none-border .modal-footer {

    border-top: none;

}



.fc-toolbar {

    margin-bottom: 5px;

    margin-top: 15px;

}



.fc-toolbar h2 {

    font-size: 18px;

    font-weight: 500;

    line-height: 30px;

    text-transform: uppercase;

}



.fc-day {

    background: #ffffff;

}



.fc-toolbar .fc-state-active,

.fc-toolbar .ui-state-active,

.fc-toolbar button:focus,

.fc-toolbar button:hover,

.fc-toolbar .ui-state-hover {

    z-index: 0;

}



.fc-widget-header {

    border: 0px !important;

}



.fc-widget-content {

    border-color: rgba(120, 130, 140, 0.13) !important;

}



.fc th.fc-widget-header {

    color: #67757c;

    font-size: 13px;

    font-weight: 300;

    line-height: 20px;

    padding: 7px 0px;

    text-transform: uppercase;

}



.fc th.fc-sun,

.fc th.fc-tue,

.fc th.fc-thu,

.fc th.fc-sat {

    background: #f2f7f8;

}



.fc th.fc-mon,

.fc th.fc-wed,

.fc th.fc-fri {

    background: #f2f7f8;

}



.fc-view {

    margin-top: 0px;

}



.fc-toolbar {

    margin: 0px;

    padding: 24px 0px;

}



.fc-button {

    background: #ffffff;

    border: 1px solid rgba(120, 130, 140, 0.13);

    color: #67757c;

    text-transform: capitalize;

}



.fc-button:hover {

    background: #f2f4f8;

    opacity: 0.8;

}



.fc-text-arrow {

    font-family: inherit;

    font-size: 16px;

}



.fc-state-hover {

    background: #F5F5F5;

}



.fc-unthemed .fc-today {

    border: 1px solid #ef5350;

    background: #f2f4f8 !important;

}



.fc-state-highlight {

    background: #f0f0f0;

}



.fc-cell-overlay {

    background: #f0f0f0;

}



.fc-unthemed .fc-today {

    background: #ffffff;

}



.fc-event {

    border-radius: 0px;

    border: none;

    cursor: move;

    color: #ffffff !important;

    font-size: 13px;

    margin: 1px -1px 0 -1px;

    padding: 5px 5px;

    text-align: center;

    background: #000;

}



.calendar-event {

    cursor: move;

    margin: 10px 5px 0 0;

    padding: 6px 10px;

    display: inline-block;

    color: #ffffff;

    min-width: 140px;

    text-align: center;

    background: #000;

}



.calendar-event a {

    float: right;

    opacity: 0.6;

    font-size: 10px;

    margin: 4px 0 0 10px;

    color: #ffffff;

}



.fc-basic-view td.fc-week-number span {

    padding-right: 5px;

}



.fc-basic-view .fc-day-number {

    padding: 10px 15px;

    display: inline-block;

}



/*******************/

/*Steam line widget*/

/*******************/

.steamline {

    position: relative;

    border-left: 1px solid rgba(120, 130, 140, 0.13);

    margin-left: 20px;

}



.steamline .sl-left {

    float: left;

    margin-left: -20px;

    z-index: 1;

    width: 40px;

    line-height: 40px;

    text-align: center;

    height: 40px;

    border-radius: 100%;

    color: #ffffff;

    background: #263238;

    margin-right: 15px;

}



.steamline .sl-left img {

    max-width: 40px;

}



.steamline .sl-right {

    padding-left: 50px;

}



.steamline .sl-right .desc,

.steamline .sl-right .inline-photos {

    margin-bottom: 30px;

}



.steamline .sl-item {

    border-bottom: 1px solid rgba(120, 130, 140, 0.13);

    margin: 20px 0;

}



.sl-date {

    font-size: 10px;

    color: #99abb4;

}



.time-item {

    border-color: rgba(120, 130, 140, 0.13);

    padding-bottom: 1px;

    position: relative;

}



.time-item:before {

    content: " ";

    display: table;

}



.time-item:after {

    background-color: #ffffff;

    border-color: rgba(120, 130, 140, 0.13);

    border-radius: 10px;

    border-style: solid;

    border-width: 2px;

    bottom: 0;

    content: '';

    height: 14px;

    left: 0;

    margin-left: -8px;

    position: absolute;

    top: 5px;

    width: 14px;

}



.time-item-item:after {

    content: " ";

    display: table;

}



.item-info {

    margin-bottom: 15px;

    margin-left: 15px;

}



.item-info p {

    margin-bottom: 10px !important;

}



/*******************/

/*Feed widget*/

/*******************/

.feeds {

    margin: 0px;

    padding: 0px;

}



.feeds li {

    list-style: none;

    padding: 10px;

    display: block;

}



.feeds li:hover {

    background: #ebf3f5;

}



.feeds li > div {

    width: 40px;

    height: 40px;

    margin-right: 5px;

    display: inline-block;

    text-align: center;

    vertical-align: middle;

    border-radius: 100%;

}



.feeds li > div i {

    line-height: 40px;

}



.feeds li span {

    float: right;

    width: auto;

    font-size: 12px;

}



/*******************/

/*Vertical carousel*/

/*******************/

.vert .carousel-item-next.carousel-item-left,

.vert .carousel-item-prev.carousel-item-right {

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

    transform: translate3d(0, 0, 0);

}



.vert .carousel-item-next,

.vert .active.carousel-item-right {

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

    transform: translate3d(0, 100% 0);

}



.vert .carousel-item-prev,

.vert .active.carousel-item-left {

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

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

}



/*******************/

/*social-widgets*/

/*******************/

.social-widget .soc-header {

    padding: 15px;

    text-align: center;

    font-size: 36px;

    color: #fff;

}



.social-widget .soc-header.box-facebook {

    background: #3b5998;

}



.social-widget .soc-header.box-twitter {

    background: #00aced;

}



.social-widget .soc-header.box-google {

    background: #f86c6b;

}



.social-widget .soc-header.box-linkedin {

    background: #4875b4;

}



.social-widget .soc-content {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    text-align: center;

}



.social-widget .soc-content div {

    padding: 10px;

}



.social-widget .soc-content div h3 {

    margin-bottom: 0px;

}



/*******************/

/*Guage chart*/

/*******************/

.gaugejs-box {

    position: relative;

    margin: 0 auto;

}



.gaugejs-box canvas.gaugejs {

    width: 100% !important;

    height: auto !important;

}



/*******************/

/*social-profile-first*/

/*******************/

.social-profile-first {

    text-align: center;

    padding-top: 22%;

    margin-bottom: 96px;

}



.social-profile-first.bg-over {

    background: rgba(56, 83, 161, 0.7);

}



.social-profile-first .middle {

    vertical-align: middle;

}



/*******************/

/*country-state*/

/*******************/

.country-state {

    list-style: none;

    margin: 0;

    padding: 0 0 0 10px;

}



.country-state li {

    margin-top: 30px;

    margin-bottom: 10px;

}



.country-state h2 {

    margin-bottom: 0px;

    font-weight: 400;

}



/*******************/

/*profile timeline widget*/

/*******************/

.profiletimeline {

    position: relative;

    padding-left: 40px;

    margin-right: 10px;

    border-left: 1px solid rgba(120, 130, 140, 0.13);

    margin-left: 30px;

}



.profiletimeline .sl-left {

    float: left;

    margin-left: -60px;

    z-index: 1;

    margin-right: 15px;

}



.profiletimeline .sl-left img {

    max-width: 40px;

}



.profiletimeline .sl-item {

    margin-top: 8px;

    margin-bottom: 30px;

}



.profiletimeline .sl-date {

    font-size: 12px;

    color: #99abb4;

}



.profiletimeline .time-item {

    border-color: rgba(120, 130, 140, 0.13);

    padding-bottom: 1px;

    position: relative;

}



.profiletimeline .time-item:before {

    content: " ";

    display: table;

}



.profiletimeline .time-item:after {

    background-color: #ffffff;

    border-color: rgba(120, 130, 140, 0.13);

    border-radius: 10px;

    border-style: solid;

    border-width: 2px;

    bottom: 0;

    content: '';

    height: 14px;

    left: 0;

    margin-left: -8px;

    position: absolute;

    top: 5px;

    width: 14px;

}



.profiletimeline .time-item-item:after {

    content: " ";

    display: table;

}



.profiletimeline .item-info {

    margin-bottom: 15px;

    margin-left: 15px;

}



.profiletimeline .item-info p {

    margin-bottom: 10px !important;

}



/*Blog widgets*/

.blog-widget {

    margin-top: 30px;

}



.blog-widget .blog-image img {

    border-radius: 4px;

    margin-top: -45px;

    margin-bottom: 20px;

    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

}



/*Weather smal;*/

.weather-small h1 {

    line-height: 30px;

}



.weather-small sup {

    font-size: 60%;

}



/*little-profile*/

.little-profile .pro-img {

    margin-top: -80px;

    margin-bottom: 20px;

}



.little-profile .pro-img img {

    width: 128px;

    height: 128px;

    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

    border-radius: 100%;

}



.contact-box {

    position: relative;

}



.contact-box .add-ct-btn {

    position: absolute;

    right: 4px;

    top: -46px;

}



.contact-box .contact-widget > a {

    padding: 15px 10px;

}



.contact-box .contact-widget > a .user-img {

    margin-bottom: 0px !important;

}



/*

Template Name: Admin Press Admin

Author: Themedesigner

Email: niravjoshi87@gmail.com

File: scss

*/

@media (min-width: 1600px) {

    .col-xlg-1,

    .col-xlg-10,

    .col-xlg-11,

    .col-xlg-12,

    .col-xlg-2,

    .col-xlg-3,

    .col-xlg-4,

    .col-xlg-5,

    .col-xlg-6,

    .col-xlg-7,

    .col-xlg-8,

    .col-xlg-9 {

        float: left;

    }



    .col-xlg-12 {

        -webkit-box-flex: 0;

        -webkit-flex: 0 0 100%;

        -ms-flex: 0 0 100%;

        flex: 0 0 100%;

        max-width: 100%;

    }



    .col-xlg-11 {

        -webkit-box-flex: 0;

        -webkit-flex: 0 0 91.66666667%;

        -ms-flex: 0 0 91.66666667%;

        flex: 0 0 91.66666667%;

        max-width: 91.66666667%;

    }



    .col-xlg-10 {

        -webkit-box-flex: 0;

        -webkit-flex: 0 0 83.33333333%;

        -ms-flex: 0 0 83.33333333%;

        flex: 0 0 83.33333333%;

        max-width: 83.33333333%;

    }



    .col-xlg-9 {

        -webkit-box-flex: 0;

        -webkit-flex: 0 0 75%;

        -ms-flex: 0 0 75%;

        flex: 0 0 75%;

        max-width: 75%;

    }



    .col-xlg-8 {

        -webkit-box-flex: 0;

        -webkit-flex: 0 0 66.66666667%;

        -ms-flex: 0 0 66.66666667%;

        flex: 0 0 66.66666667%;

        max-width: 66.66666667%;

    }



    .col-xlg-7 {

        -webkit-box-flex: 0;

        -webkit-flex: 0 0 58.33333333%;

        -ms-flex: 0 0 58.33333333%;

        flex: 0 0 58.33333333%;

        max-width: 58.33333333%;

    }



    .col-xlg-6 {

        -webkit-box-flex: 0;

        -webkit-flex: 0 0 50%;

        -ms-flex: 0 0 50%;

        flex: 0 0 50%;

        max-width: 50%;

    }



    .col-xlg-5 {

        -webkit-box-flex: 0;

        -webkit-flex: 0 0 41.66666667%;

        -ms-flex: 0 0 41.66666667%;

        flex: 0 0 41.66666667%;

        max-width: 41.66666667%;

    }



    .col-xlg-4 {

        -webkit-box-flex: 0;

        -webkit-flex: 0 0 33.33333333%;

        -ms-flex: 0 0 33.33333333%;

        flex: 0 0 33.33333333%;

        max-width: 33.33333333%;

    }



    .col-xlg-3 {

        -webkit-box-flex: 0;

        -webkit-flex: 0 0 25%;

        -ms-flex: 0 0 25%;

        flex: 0 0 25%;

        max-width: 25%;

    }



    .col-xlg-2 {

        -webkit-box-flex: 0;

        -webkit-flex: 0 0 16.66666667%;

        -ms-flex: 0 0 16.66666667%;

        flex: 0 0 16.66666667%;

        max-width: 16.66666667%;

    }



    .col-xlg-1 {

        -webkit-box-flex: 0;

        -webkit-flex: 0 0 8.33333333%;

        -ms-flex: 0 0 8.33333333%;

        flex: 0 0 8.33333333%;

        max-width: 8.33333333%;

    }



    .col-xlg-pull-12 {

        right: 100%;

    }



    .col-xlg-pull-11 {

        right: 91.66666667%;

    }



    .col-xlg-pull-10 {

        right: 83.33333333%;

    }



    .col-xlg-pull-9 {

        right: 75%;

    }



    .col-xlg-pull-8 {

        right: 66.66666667%;

    }



    .col-xlg-pull-7 {

        right: 58.33333333%;

    }



    .col-xlg-pull-6 {

        right: 50%;

    }



    .col-xlg-pull-5 {

        right: 41.66666667%;

    }



    .col-xlg-pull-4 {

        right: 33.33333333%;

    }



    .col-xlg-pull-3 {

        right: 25%;

    }



    .col-xlg-pull-2 {

        right: 16.66666667%;

    }



    .col-xlg-pull-1 {

        right: 8.33333333%;

    }



    .col-xlg-pull-0 {

        right: auto;

    }



    .col-xlg-push-12 {

        left: 100%;

    }



    .col-xlg-push-11 {

        left: 91.66666667%;

    }



    .col-xlg-push-10 {

        left: 83.33333333%;

    }



    .col-xlg-push-9 {

        left: 75%;

    }



    .col-xlg-push-8 {

        left: 66.66666667%;

    }



    .col-xlg-push-7 {

        left: 58.33333333%;

    }



    .col-xlg-push-6 {

        left: 50%;

    }



    .col-xlg-push-5 {

        left: 41.66666667%;

    }



    .col-xlg-push-4 {

        left: 33.33333333%;

    }



    .col-xlg-push-3 {

        left: 25%;

    }



    .col-xlg-push-2 {

        left: 16.66666667%;

    }



    .col-xlg-push-1 {

        left: 8.33333333%;

    }



    .col-xlg-push-0 {

        left: auto;

    }



    .offset-xlg-12 {

        margin-left: 100%;

    }



    .offset-xlg-11 {

        margin-left: 91.66666667%;

    }



    .offset-xlg-10 {

        margin-left: 83.33333333%;

    }



    .offset-xlg-9 {

        margin-left: 75%;

    }



    .offset-xlg-8 {

        margin-left: 66.66666667%;

    }



    .offset-xlg-7 {

        margin-left: 58.33333333%;

    }



    .offset-xlg-6 {

        margin-left: 50%;

    }



    .offset-xlg-5 {

        margin-left: 41.66666667%;

    }



    .offset-xlg-4 {

        margin-left: 33.33333333%;

    }



    .offset-xlg-3 {

        margin-left: 25%;

    }



    .offset-xlg-2 {

        margin-left: 16.66666667%;

    }



    .offset-xlg-1 {

        margin-left: 8.33333333%;

    }



    .offset-xlg-0 {

        margin-left: 0;

    }

}



.col-xlg-1,

.col-xlg-10,

.col-xlg-11,

.col-xlg-12,

.col-xlg-2,

.col-xlg-3,

.col-xlg-4,

.col-xlg-5,

.col-xlg-6,

.col-xlg-7,

.col-xlg-8,

.col-xlg-9 {

    position: relative;

    min-height: 1px;

    padding-right: 15px;

    padding-left: 15px;

}



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

/*Bootstrap 4 hack*/

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

.bootstrap-touchspin .input-group-btn {

    -webkit-box-align: normal;

    -ms-flex-align: normal;

    align-items: normal;

}



.form-control-danger, .form-control-success, .form-control-warning {

    padding-right: 2.25rem;

    background-repeat: no-repeat;

    background-position: center right .5625rem;

    -webkit-background-size: 1.125rem 1.125rem;

    background-size: 1.125rem 1.125rem;

}



.has-success .col-form-label, .has-success .custom-control, .has-success .form-check-label, .has-success .form-control-feedback, .has-success .form-control-label {

    color: #26dad2;

}



.has-success .form-control-success {

    background-image: url(../../assets/images/icon/success.svg);

}



.has-success .form-control {

    border-color: #26dad2;

}



.has-warning .col-form-label, .has-warning .custom-control, .has-warning .form-check-label, .has-warning .form-control-feedback, .has-warning .form-control-label {

    color: #000;

}



.has-warning .form-control-warning {

    background-image: url(../../assets/images/icon/warning.svg);

}



.has-warning .form-control {

    border-color: #000;

}



.has-danger .col-form-label, .has-danger .custom-control, .has-danger .form-check-label, .has-danger .form-control-feedback, .has-danger .form-control-label {

    color: #ef5350;

}



.has-danger .form-control-danger {

    background-image: url(../../assets/images/icon/danger.svg);

}



.has-danger .form-control {

    border-color: #ef5350;

}



.input-group-addon [type="radio"]:not(:checked),

.input-group-addon [type="radio"]:checked,

.input-group-addon [type="checkbox"]:not(:checked),

.input-group-addon [type="checkbox"]:checked {

    position: initial;

    opacity: 1;

}



.invisible {

    visibility: hidden !important;

}



.hidden-xs-up {

    display: none !important;

}



@media (max-width: 575px) {

    .hidden-xs-down {

        display: none !important;

    }

}



@media (min-width: 576px) {

    .hidden-sm-up {

        display: none !important;

    }

}



@media (max-width: 767px) {

    .hidden-sm-down {

        display: none !important;

    }

}



@media (min-width: 768px) {

    .hidden-md-up {

        display: none !important;

    }

}



@media (max-width: 991px) {

    .hidden-md-down {

        display: none !important;

    }

}



@media (min-width: 992px) {

    .hidden-lg-up {

        display: none !important;

    }

}



@media (max-width: 1199px) {

    .hidden-lg-down {

        display: none !important;

    }

}



@media (min-width: 1200px) {

    .hidden-xl-up {

        display: none !important;

    }

}



.hidden-xl-down {

    display: none !important;

}



.card-inverse .card-blockquote,

.card-inverse .card-footer,

.card-inverse .card-header,

.card-inverse .card-title {

    color: #ffffff;

}



/*

Template Name: Admin Press Admin

Author: Themedesigner

Email: niravjoshi87@gmail.com

File: scss

*/

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

 For Laptop & above all (1650px)

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

@media (min-width: 1650px) {

    .widget-app-columns {

        -webkit-column-count: 3;

        column-count: 3;

    }



    .campaign {

        height: 365px !important;

    }

}



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

 For Laptop & above all (1370px)

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

@media (max-width: 1370px) {

    .widget-app-columns {

        -webkit-column-count: 2;

        column-count: 2;

    }

}



/*-- ==============================================================

 Small Desktop & above all (1024px)

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

@media (min-width: 1024px) {

    .page-wrapper {

        padding-left: 265px;

    }



    .footer {

        left: 265px;

    }

}



@media (max-width: 1023px) {

    .page-wrapper {

        margin-left: 60px;

        -webkit-transition: 0.2s ease-in;

        -o-transition: 0.2s ease-in;

        transition: 0.2s ease-in;

    }



    .footer {

        left: 60px;

    }



    .widget-app-columns {

        -webkit-column-count: 1;

        column-count: 1;

    }



    .inbox-center a {

        width: 200px;

    }

}



/*-- ==============================================================

 Ipad & above all(768px)

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

@media (min-width: 768px) {

    .navbar-header {

        width: 265px;

        -ms-flex-negative: 0;

        flex-shrink: 0;

    }



    .navbar-header .navbar-brand {

        padding-top: 0px;

    }



    /*This is for the breeadcrumd*/

    .page-titles .breadcrumb {

        float: right;

    }



    .card-group .card:first-child, .card-group .card:not(:first-child):not(:last-child) {

        border-right: 1px solid rgba(0, 0, 0, 0.03);

    }



    .material-icon-list-demo .icons div {

        width: 33%;

        padding: 15px;

        display: inline-block;

        line-height: 40px;

    }



    .mini-sidebar .page-wrapper {

        padding-left: 60px;

    }



    .mini-sidebar .footer {

        left: 60px;

    }



    .flex-wrap {

        -ms-flex-wrap: nowrap !important;

        flex-wrap: nowrap !important;

        -webkit-flex-wrap: nowrap !important;

    }

}



/*-- ==============================================================

 Phone and below ipad(767px)

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

@media (max-width: 767px) {

    /*Header*/

    .topbar {

        position: fixed;

        width: 100%;top: 0; bottom: auto !important;

    }



    .topbar .top-navbar {

        padding-right: 15px;
        padding-left: 15px;

        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

        -ms-flex-direction: row;

        flex-direction: row;

        -ms-flex-wrap: nowrap;

        flex-wrap: nowrap;

        -webkit-align-items: center;

    }



    .topbar .top-navbar .navbar-collapse {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        width: 100%;

    }



    .topbar .top-navbar .navbar-nav {

        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

        -ms-flex-direction: row;

        flex-direction: row;

    }



    .topbar .top-navbar .navbar-nav > .nav-item.show {

        position: static;

    }



    .topbar .top-navbar .navbar-nav > .nav-item.show .dropdown-menu {

        width: 100%;

        margin-top: 0px;

    }



    .topbar .top-navbar .navbar-nav > .nav-item > .nav-link {

        padding-left: .50rem;

        padding-right: .50rem;

    }



    .topbar .top-navbar .navbar-nav .dropdown-menu {

        position: absolute;

    }



    .mega-dropdown .dropdown-menu {

        height: 480px;

        overflow: auto;

    }



    /*Sidebar and wrapper*/

    .mini-sidebar .page-wrapper {

        margin-left: 0px;

        padding-top: 60px;

    }



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

        display: block;

        padding: 10px 0;

    }



    .vtabs .tabs-vertical {

        width: auto;

    }



    /*Footer*/

    .footer {

        left: 0px;

    }



    .material-icon-list-demo .icons div {

        width: 100%;

    }



    .error-page .footer {

        position: fixed;

        bottom: 0px;

        z-index: 10;

    }



    .error-box {

        position: relative;

        padding-bottom: 60px;

    }



    .error-body {

        padding-top: 10%;

    }



    .error-body h1 {

        font-size: 100px;

        font-weight: 600;

        line-height: 100px;

    }



    .login-register {

        position: relative;

        overflow: hidden;

    }



    .login-box {

        width: 90%;

    }



    .login-sidebar {

        padding: 10% 0;

    }



    .login-sidebar .login-box {

        position: relative;

    }



    /*This is for chat page*/

    .chat-main-box .chat-left-aside {

        left: -250px;

        position: absolute;

        -webkit-transition: 0.5s ease-in;

        -o-transition: 0.5s ease-in;

        transition: 0.5s ease-in;

        background: #ffffff;

    }



    .chat-main-box .chat-left-aside.open-pnl {

        left: 0px;

    }



    .chat-main-box .chat-left-aside .open-panel {

        display: block;

    }



    .chat-main-box .chat-right-aside {

        width: 100%;

    }



    /*Timeline*/

    ul.timeline:before {

        left: 40px;

    }



    ul.timeline > li > .timeline-panel {

        width: calc(100% - 90px);

    }



    ul.timeline > li > .timeline-badge {

        top: 16px;

        left: 15px;

        margin-left: 0;

    }



    ul.timeline > li > .timeline-panel {

        float: right;

    }



    ul.timeline > li > .timeline-panel:before {

        right: auto;

        left: -15px;

        border-right-width: 15px;

        border-left-width: 0;

    }



    ul.timeline > li > .timeline-panel:after {

        right: auto;

        left: -14px;

        border-right-width: 14px;

        border-left-width: 0;

    }



    /*Contact app page*/

    .left-aside {

        width: 100%;

        position: relative;

        border: 0px;

    }



    .right-aside {

        margin-left: 0px;

    }



    .flex-wrap {

        -ms-flex-wrap: wrap !important;

        flex-wrap: wrap !important;

        -webkit-flex-wrap: wrap !important;

    }



    .chat-list li .chat-content {

        width: calc(100% - 80px);

    }

}



/*

Template Name: Admin Press Admin

Author: Themedesigner

Email: niravjoshi87@gmail.com

File: scss

*/

/*

Template Name: Admin Press Admin

Author: Themedesigner

Email: niravjoshi87@gmail.com

File: scss

*/

/*Theme Colors*/

/*bootstrap Color*/

/*Light colors*/

/*Normal Color*/

/*Extra Variable*/

/*Preloader*/

.preloader {

    width: 100%;

    height: 100%;

    top: 0px;

    position: fixed;

    z-index: 99999;

    background: #fff;

}



.preloader .cssload-speeding-wheel {

    position: absolute;

    top: calc(50% - 3.5px);

    left: calc(50% - 3.5px);

}



/* Radio Buttons

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

[type="radio"]:not(:checked),

[type="radio"]:checked {

    position: absolute;

    left: -9999px;

    opacity: 0;

}



[type="radio"]:not(:checked) + label,

[type="radio"]:checked + label {

    position: relative;

    padding-left: 35px;

    cursor: pointer;

    display: inline-block;

    height: 25px;

    line-height: 25px;

    font-size: 1rem;

    -webkit-transition: .28s ease;

    -o-transition: .28s ease;

    transition: .28s ease;

    /* webkit (konqueror) browsers */

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}



[type="radio"] + label:before,

[type="radio"] + label:after {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    margin: 4px;

    width: 16px;

    height: 16px;

    z-index: 0;

    -webkit-transition: .28s ease;

    -o-transition: .28s ease;

    transition: .28s ease;

}



/* Unchecked styles */

[type="radio"]:not(:checked) + label:before,

[type="radio"]:not(:checked) + label:after,

[type="radio"]:checked + label:before,

[type="radio"]:checked + label:after,

[type="radio"].with-gap:checked + label:before,

[type="radio"].with-gap:checked + label:after {

    border-radius: 50%;

}



[type="radio"]:not(:checked) + label:before,

[type="radio"]:not(:checked) + label:after {

    border: 1px solid #b1b8bb;

}



[type="radio"]:not(:checked) + label:after {

    z-index: -1;

    -webkit-transform: scale(0);

    -ms-transform: scale(0);

    transform: scale(0);

}



/* Checked styles */

[type="radio"]:checked + label:before {

    border: 2px solid transparent;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"]:checked + label:after,

[type="radio"].with-gap:checked + label:before,

[type="radio"].with-gap:checked + label:after {

    border: 2px solid var(--brand);

}



[type="radio"]:checked + label:after,

[type="radio"].with-gap:checked + label:after {

    background-color: var(--brand);

    z-index: 0;

}



[type="radio"]:checked + label:after {

    -webkit-transform: scale(1.02);

    -ms-transform: scale(1.02);

    transform: scale(1.02);

}



/* Radio With gap */

[type="radio"].with-gap:checked + label:after {

    -webkit-transform: scale(0.5);

    -ms-transform: scale(0.5);

    transform: scale(0.5);

}



/* Focused styles */

[type="radio"].tabbed:focus + label:before {

    -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);

    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



/* Disabled Radio With gap */

[type="radio"].with-gap:disabled:checked + label:before {

    border: 2px solid rgba(0, 0, 0, 0.26);

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap:disabled:checked + label:after {

    border: none;

    background-color: rgba(0, 0, 0, 0.26);

}



/* Disabled style */

[type="radio"]:disabled:not(:checked) + label:before,

[type="radio"]:disabled:checked + label:before {

    background-color: transparent;

    border-color: rgba(0, 0, 0, 0.26);

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"]:disabled + label {

    color: rgba(0, 0, 0, 0.26);

}



[type="radio"]:disabled:not(:checked) + label:before {

    border-color: rgba(0, 0, 0, 0.26);

}



[type="radio"]:disabled:checked + label:after {

    background-color: rgba(0, 0, 0, 0.26);

    border-color: #BDBDBD;

}



/* Checkboxes

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

/* CUSTOM CSS CHECKBOXES */

form p {

    margin-bottom: 10px;

    text-align: left;

}



form p:last-child {

    margin-bottom: 0;

}



/* Remove default checkbox */

[type="checkbox"]:not(:checked),

[type="checkbox"]:checked {

    position: absolute;

    left: -9999px;

    opacity: 0;

}



[type="checkbox"] {

    /* checkbox aspect */

}



[type="checkbox"] + label {

    position: relative;

    padding-left: 35px;

    cursor: pointer;

    display: inline-block;

    height: 25px;

    line-height: 25px;

    font-size: 1rem;

    -webkit-user-select: none;

    /* webkit (safari, chrome) browsers */

    -moz-user-select: none;

    /* mozilla browsers */

    -khtml-user-select: none;

    /* webkit (konqueror) browsers */

    -ms-user-select: none;

    /* IE10+ */

}



[type="checkbox"] + label:before,

[type="checkbox"]:not(.filled-in) + label:after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 18px;

    height: 18px;

    z-index: 0;

    border: 1px solid #b1b8bb;

    border-radius: 1px;

    margin-top: 2px;

    -webkit-transition: .2s;

    -o-transition: .2s;

    transition: .2s;

}



[type="checkbox"]:not(.filled-in) + label:after {

    border: 0;

    -webkit-transform: scale(0);

    -ms-transform: scale(0);

    transform: scale(0);

}



[type="checkbox"]:not(:checked):disabled + label:before {

    border: none;

    background-color: rgba(0, 0, 0, 0.26);

}



[type="checkbox"].tabbed:focus + label:after {

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

    border: 0;

    border-radius: 50%;

    -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);

    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);

    background-color: rgba(0, 0, 0, 0.1);

}



[type="checkbox"]:checked + label:before {

    top: -4px;

    left: -5px;

    width: 12px;

    height: 22px;

    border-top: 2px solid transparent;

    border-left: 2px solid transparent;

    border-right: 2px solid var(--brand);

    border-bottom: 2px solid var(--brand);

    -webkit-transform: rotate(40deg);

    -ms-transform: rotate(40deg);

    transform: rotate(40deg);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    -webkit-transform-origin: 100% 100%;

    -ms-transform-origin: 100% 100%;

    transform-origin: 100% 100%;

}



[type="checkbox"]:checked:disabled + label:before {

    border-right: 2px solid rgba(0, 0, 0, 0.26);

    border-bottom: 2px solid rgba(0, 0, 0, 0.26);

}



/* Indeterminate checkbox */

[type="checkbox"]:indeterminate + label:before {

    top: -11px;

    left: -12px;

    width: 10px;

    height: 22px;

    border-top: none;

    border-left: none;

    border-right: 2px solid var(--brand);

    border-bottom: none;

    -webkit-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    -webkit-transform-origin: 100% 100%;

    -ms-transform-origin: 100% 100%;

    transform-origin: 100% 100%;

}



[type="checkbox"]:indeterminate:disabled + label:before {

    border-right: 2px solid rgba(0, 0, 0, 0.26);

    background-color: transparent;

}



[type="checkbox"].filled-in + label:after {

    border-radius: 2px;

}



[type="checkbox"].filled-in + label:before,

[type="checkbox"].filled-in + label:after {

    content: '';

    left: 0;

    position: absolute;

    /* .1s delay is for check animation */

    -webkit-transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;

    -o-transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;

    transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;

    z-index: 1;

}



[type="checkbox"].filled-in:not(:checked) + label:before {

    width: 0;

    height: 0;

    border: 3px solid transparent;

    left: 6px;

    top: 10px;

    -webkit-transform: rotateZ(37deg);

    -ms-transform: rotate(37deg);

    transform: rotateZ(37deg);

    -webkit-transform-origin: 20% 40%;

    -ms-transform-origin: 100% 100%;

    transform-origin: 100% 100%;

}



[type="checkbox"].filled-in:not(:checked) + label:after {

    height: 20px;

    width: 20px;

    background-color: transparent;

    border: 1px solid #b1b8bb;

    top: 0px;

    z-index: 0;

}



[type="checkbox"].filled-in:checked + label:before {

    top: 0;

    left: 1px;

    width: 8px;

    height: 13px;

    border-top: 2px solid transparent;

    border-left: 2px solid transparent;

    border-right: 2px solid #fff;

    border-bottom: 2px solid #fff;

    -webkit-transform: rotateZ(37deg);

    -ms-transform: rotate(37deg);

    transform: rotateZ(37deg);

    -webkit-transform-origin: 100% 100%;

    -ms-transform-origin: 100% 100%;

    transform-origin: 100% 100%;

}



[type="checkbox"].filled-in:checked + label:after {

    top: 0;

    width: 20px;

    height: 20px;

    border: 2px solid var(--brand);

    background-color: var(--brand);

    z-index: 0;

}



[type="checkbox"].filled-in.tabbed:focus + label:after {

    border-radius: 2px;

    border-color: #5a5a5a;

    background-color: rgba(0, 0, 0, 0.1);

}



[type="checkbox"].filled-in.tabbed:checked:focus + label:after {

    border-radius: 2px;

    background-color: var(--brand);

    border-color: var(--brand);

}



[type="checkbox"].filled-in:disabled:not(:checked) + label:before {

    background-color: transparent;

    border: 2px solid transparent;

}



[type="checkbox"].filled-in:disabled:not(:checked) + label:after {

    border-color: transparent;

    background-color: #BDBDBD;

}



[type="checkbox"].filled-in:disabled:checked + label:before {

    background-color: transparent;

}



[type="checkbox"].filled-in:disabled:checked + label:after {

    background-color: #BDBDBD;

    border-color: #BDBDBD;

}



/* Switch

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

.switch,

.switch * {

    -webkit-user-select: none;

    -moz-user-select: none;

    -khtml-user-select: none;

    -ms-user-select: none;

}



.switch label {

    cursor: pointer;

}



.switch label input[type=checkbox] {

    opacity: 0;

    width: 0;

    height: 0;

}



.switch label input[type=checkbox]:checked + .lever {

    background-color: rgba(var(--brand-rgb),.5);

}



.switch label input[type=checkbox]:checked + .lever:after {

    background-color: var(--brand);

    left: 24px;

}



.switch label .lever {

    content: "";

    display: inline-block;

    position: relative;

    width: 40px;

    height: 15px;

    background-color: #818181;

    border-radius: 15px;

    margin-right: 10px;

    -webkit-transition: background 0.3s ease;

    -o-transition: background 0.3s ease;

    transition: background 0.3s ease;

    vertical-align: middle;

    margin: 0 16px;

}



.switch label .lever:after {

    content: "";

    position: absolute;

    display: inline-block;

    width: 21px;

    height: 21px;

    background-color: #F1F1F1;

    border-radius: 21px;

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);

    left: -5px;

    top: -3px;

    -webkit-transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease;

    transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease;

    -o-transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;

    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;

    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;

}



input[type=checkbox]:checked:not(:disabled) ~ .lever:active::after,

input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 166, 154, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 166, 154, 0.1);

}



input[type=checkbox]:not(:disabled) ~ .lever:active:after,

input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.08);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.08);

}



.switch input[type=checkbox][disabled] + .lever {

    cursor: default;

}



.switch label input[type=checkbox][disabled] + .lever:after,

.switch label input[type=checkbox][disabled]:checked + .lever:after {

    background-color: #BDBDBD;

}



.scale-up {

    -webkit-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all 0.3s ease;

    -webkit-transform: scale(0);

    -ms-transform: scale(0);

    transform: scale(0);

    display: inline-block;

    -webkit-transform-origin: right 0px;

    -ms-transform-origin: right 0px;

    transform-origin: right 0px;

}



.scale-up-left {

    -webkit-transition: all 0.3s ease-out;

    -o-transition: all 0.3s ease-out;

    transition: all 0.3s ease-out;

    -webkit-transform: scale(0);

    -ms-transform: scale(0);

    transform: scale(0);

    display: inline-block;

    -webkit-transform-origin: left 0px;

    -ms-transform-origin: left 0px;

    transform-origin: left 0px;

}



.show > .scale-up {

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

    -webkit-transform-origin: right 0px;

    -ms-transform-origin: right 0px;

    transform-origin: right 0px;

}



.show > .scale-up-left {

    -ms-transform: scale(1);

    transform: scale(1);

    -webkit-transform: scale(1);

    -webkit-transform-origin: left 0px;

    -ms-transform-origin: left 0px;

    transform-origin: left 0px;

}



/*panels*/

.card {

    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);

    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);

    border-radius: 4px;

}



.well, pre {

    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);

    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);

}



.page-titles .justify-content-end:last-child .d-flex {

    margin-right: 10px;

}



.btn-circle.right-side-toggle {

    position: fixed;

    bottom: 20px;

    right: 20px;

    padding: 25px;

    z-index: 10;

}



/*Radio button*/

@-webkit-keyframes ripple {

    0% {

        -webkit-box-shadow: 0px 0px 0px 1px transparent;

        box-shadow: 0px 0px 0px 1px transparent;

    }

    50% {

        -webkit-box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);

        box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);

    }

    100% {

        -webkit-box-shadow: 0px 0px 0px 15px transparent;

        box-shadow: 0px 0px 0px 15px transparent;

    }

}



@keyframes ripple {

    0% {

        -webkit-box-shadow: 0px 0px 0px 1px transparent;

        box-shadow: 0px 0px 0px 1px transparent;

    }

    50% {

        -webkit-box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);

        box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);

    }

    100% {

        -webkit-box-shadow: 0px 0px 0px 15px transparent;

        box-shadow: 0px 0px 0px 15px transparent;

    }

}



/*Bootstrap Select*/

.bootstrap-select.btn-group .dropdown-menu {

    margin-top: -40px;

    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);

    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);

}



.demo-checkbox label, .demo-radio-button label {

    min-width: 200px;

    margin-bottom: 20px;

}



.demo-swtich .demo-switch-title, .demo-swtich .switch {

    width: 150px;

    margin-bottom: 10px;

    display: inline-block;

}



[type="checkbox"] + label {

    padding-left: 26px;

    height: 25px;

    line-height: 21px;

    font-weight: normal;

}



[type="checkbox"]:checked + label:before {

    top: -4px;

    left: -2px;

    width: 11px;

    height: 19px;

}



[type="checkbox"]:checked.chk-col-red + label:before {

    border-right: 2px solid #fb3a3a;

    border-bottom: 2px solid #fb3a3a;

}



[type="checkbox"]:checked.chk-col-pink + label:before {

    border-right: 2px solid #E91E63;

    border-bottom: 2px solid #E91E63;

}



[type="checkbox"]:checked.chk-col-purple + label:before {

    border-right: 2px solid #ebc51a;

    border-bottom: 2px solid #ebc51a;

}



[type="checkbox"]:checked.chk-col-deep-purple + label:before {

    border-right: 2px solid #673AB7;

    border-bottom: 2px solid #673AB7;

}



[type="checkbox"]:checked.chk-col-indigo + label:before {

    border-right: 2px solid #3F51B5;

    border-bottom: 2px solid #3F51B5;

}



[type="checkbox"]:checked.chk-col-blue + label:before {

    border-right: 2px solid #02bec9;

    border-bottom: 2px solid #02bec9;

}



[type="checkbox"]:checked.chk-col-light-blue + label:before {

    border-right: 2px solid #03A9F4;

    border-bottom: 2px solid #03A9F4;

}



[type="checkbox"]:checked.chk-col-cyan + label:before {

    border-right: 2px solid #00BCD4;

    border-bottom: 2px solid #00BCD4;

}



[type="checkbox"]:checked.chk-col-teal + label:before {

    border-right: 2px solid #009688;

    border-bottom: 2px solid #009688;

}



[type="checkbox"]:checked.chk-col-green + label:before {

    border-right: 2px solid #26c6da;

    border-bottom: 2px solid #26c6da;

}



[type="checkbox"]:checked.chk-col-light-green + label:before {

    border-right: 2px solid #8BC34A;

    border-bottom: 2px solid #8BC34A;

}



[type="checkbox"]:checked.chk-col-lime + label:before {

    border-right: 2px solid #CDDC39;

    border-bottom: 2px solid #CDDC39;

}



[type="checkbox"]:checked.chk-col-yellow + label:before {

    border-right: 2px solid #ffe821;

    border-bottom: 2px solid #ffe821;

}



[type="checkbox"]:checked.chk-col-amber + label:before {

    border-right: 2px solid #FFC107;

    border-bottom: 2px solid #FFC107;

}



[type="checkbox"]:checked.chk-col-orange + label:before {

    border-right: 2px solid #FF9800;

    border-bottom: 2px solid #FF9800;

}



[type="checkbox"]:checked.chk-col-deep-orange + label:before {

    border-right: 2px solid #FF5722;

    border-bottom: 2px solid #FF5722;

}



[type="checkbox"]:checked.chk-col-brown + label:before {

    border-right: 2px solid #795548;

    border-bottom: 2px solid #795548;

}



[type="checkbox"]:checked.chk-col-grey + label:before {

    border-right: 2px solid #9E9E9E;

    border-bottom: 2px solid #9E9E9E;

}



[type="checkbox"]:checked.chk-col-blue-grey + label:before {

    border-right: 2px solid #607D8B;

    border-bottom: 2px solid #607D8B;

}



[type="checkbox"]:checked.chk-col-black + label:before {

    border-right: 2px solid #000000;

    border-bottom: 2px solid #000000;

}



[type="checkbox"]:checked.chk-col-white + label:before {

    border-right: 2px solid #ffffff;

    border-bottom: 2px solid #ffffff;

}



[type="checkbox"].filled-in:checked + label:after {

    top: 0;

    width: 20px;

    height: 20px;

    border: 2px solid var(--brand);

    background-color: var(--brand);

    z-index: 0;

}



[type="checkbox"].filled-in:checked + label:before {

    border-right: 2px solid #fff !important;

    border-bottom: 2px solid #fff !important;

}



[type="checkbox"].filled-in:checked.chk-col-red + label:after {

    border: 2px solid #fb3a3a;

    background-color: #fb3a3a;

}



[type="checkbox"].filled-in:checked.chk-col-pink + label:after {

    border: 2px solid #E91E63;

    background-color: #E91E63;

}



[type="checkbox"].filled-in:checked.chk-col-purple + label:after {

    border: 2px solid #ebc51a;

    background-color: #ebc51a;

}



[type="checkbox"].filled-in:checked.chk-col-deep-purple + label:after {

    border: 2px solid #673AB7;

    background-color: #673AB7;

}



[type="checkbox"].filled-in:checked.chk-col-indigo + label:after {

    border: 2px solid #3F51B5;

    background-color: #3F51B5;

}



[type="checkbox"].filled-in:checked.chk-col-blue + label:after {

    border: 2px solid #02bec9;

    background-color: #02bec9;

}



[type="checkbox"].filled-in:checked.chk-col-light-blue + label:after {

    border: 2px solid #03A9F4;

    background-color: #03A9F4;

}



[type="checkbox"].filled-in:checked.chk-col-cyan + label:after {

    border: 2px solid #00BCD4;

    background-color: #00BCD4;

}



[type="checkbox"].filled-in:checked.chk-col-teal + label:after {

    border: 2px solid #009688;

    background-color: #009688;

}



[type="checkbox"].filled-in:checked.chk-col-green + label:after {

    border: 2px solid #26c6da;

    background-color: #26c6da;

}



[type="checkbox"].filled-in:checked.chk-col-light-green + label:after {

    border: 2px solid #8BC34A;

    background-color: #8BC34A;

}



[type="checkbox"].filled-in:checked.chk-col-lime + label:after {

    border: 2px solid #CDDC39;

    background-color: #CDDC39;

}



[type="checkbox"].filled-in:checked.chk-col-yellow + label:after {

    border: 2px solid #ffe821;

    background-color: #ffe821;

}



[type="checkbox"].filled-in:checked.chk-col-amber + label:after {

    border: 2px solid #FFC107;

    background-color: #FFC107;

}



[type="checkbox"].filled-in:checked.chk-col-orange + label:after {

    border: 2px solid #FF9800;

    background-color: #FF9800;

}



[type="checkbox"].filled-in:checked.chk-col-deep-orange + label:after {

    border: 2px solid #FF5722;

    background-color: #FF5722;

}



[type="checkbox"].filled-in:checked.chk-col-brown + label:after {

    border: 2px solid #795548;

    background-color: #795548;

}



[type="checkbox"].filled-in:checked.chk-col-grey + label:after {

    border: 2px solid #9E9E9E;

    background-color: #9E9E9E;

}



[type="checkbox"].filled-in:checked.chk-col-blue-grey + label:after {

    border: 2px solid #607D8B;

    background-color: #607D8B;

}



[type="checkbox"].filled-in:checked.chk-col-black + label:after {

    border: 2px solid #000000;

    background-color: #000000;

}



[type="checkbox"].filled-in:checked.chk-col-white + label:after {

    border: 2px solid #ffffff;

    background-color: #ffffff;

}



[type="radio"]:not(:checked) + label {

    padding-left: 26px;

    height: 25px;

    line-height: 25px;

    font-weight: normal;

}



[type="radio"]:checked + label {

    padding-left: 26px;

    height: 25px;

    line-height: 25px;

    font-weight: normal;

}



[type="radio"].radio-col-red:checked + label:after {

    background-color: #fb3a3a;

    border-color: #fb3a3a;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-pink:checked + label:after {

    background-color: #E91E63;

    border-color: #E91E63;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-purple:checked + label:after {

    background-color: #ebc51a;

    border-color: #ebc51a;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-deep-purple:checked + label:after {

    background-color: #673AB7;

    border-color: #673AB7;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-indigo:checked + label:after {

    background-color: #3F51B5;

    border-color: #3F51B5;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-blue:checked + label:after {

    background-color: #02bec9;

    border-color: #02bec9;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-light-blue:checked + label:after {

    background-color: #03A9F4;

    border-color: #03A9F4;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-cyan:checked + label:after {

    background-color: #00BCD4;

    border-color: #00BCD4;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-teal:checked + label:after {

    background-color: #009688;

    border-color: #009688;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-green:checked + label:after {

    background-color: #26c6da;

    border-color: #26c6da;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-light-green:checked + label:after {

    background-color: #8BC34A;

    border-color: #8BC34A;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-lime:checked + label:after {

    background-color: #CDDC39;

    border-color: #CDDC39;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-yellow:checked + label:after {

    background-color: #ffe821;

    border-color: #ffe821;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-amber:checked + label:after {

    background-color: #FFC107;

    border-color: #FFC107;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-orange:checked + label:after {

    background-color: #FF9800;

    border-color: #FF9800;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-deep-orange:checked + label:after {

    background-color: #FF5722;

    border-color: #FF5722;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-brown:checked + label:after {

    background-color: #795548;

    border-color: #795548;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-grey:checked + label:after {

    background-color: #9E9E9E;

    border-color: #9E9E9E;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-blue-grey:checked + label:after {

    background-color: #607D8B;

    border-color: #607D8B;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-black:checked + label:after {

    background-color: #000000;

    border-color: #000000;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].radio-col-white:checked + label:after {

    background-color: #ffffff;

    border-color: #ffffff;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-red:checked + label:before {

    border: 2px solid #fb3a3a;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-red:checked + label:after {

    background-color: #fb3a3a;

    border: 2px solid #fb3a3a;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-pink:checked + label:before {

    border: 2px solid #E91E63;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-pink:checked + label:after {

    background-color: #E91E63;

    border: 2px solid #E91E63;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-purple:checked + label:before {

    border: 2px solid #ebc51a;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-purple:checked + label:after {

    background-color: #ebc51a;

    border: 2px solid #ebc51a;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-deep-purple:checked + label:before {

    border: 2px solid #673AB7;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-deep-purple:checked + label:after {

    background-color: #673AB7;

    border: 2px solid #673AB7;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-indigo:checked + label:before {

    border: 2px solid #3F51B5;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-indigo:checked + label:after {

    background-color: #3F51B5;

    border: 2px solid #3F51B5;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-blue:checked + label:before {

    border: 2px solid #02bec9;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-blue:checked + label:after {

    background-color: #02bec9;

    border: 2px solid #02bec9;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-light-blue:checked + label:before {

    border: 2px solid #03A9F4;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-light-blue:checked + label:after {

    background-color: #03A9F4;

    border: 2px solid #03A9F4;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-cyan:checked + label:before {

    border: 2px solid #00BCD4;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-cyan:checked + label:after {

    background-color: #00BCD4;

    border: 2px solid #00BCD4;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-teal:checked + label:before {

    border: 2px solid #009688;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-teal:checked + label:after {

    background-color: #009688;

    border: 2px solid #009688;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-green:checked + label:before {

    border: 2px solid #26c6da;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-green:checked + label:after {

    background-color: #26c6da;

    border: 2px solid #26c6da;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-light-green:checked + label:before {

    border: 2px solid #8BC34A;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-light-green:checked + label:after {

    background-color: #8BC34A;

    border: 2px solid #8BC34A;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-lime:checked + label:before {

    border: 2px solid #CDDC39;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-lime:checked + label:after {

    background-color: #CDDC39;

    border: 2px solid #CDDC39;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-yellow:checked + label:before {

    border: 2px solid #ffe821;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-yellow:checked + label:after {

    background-color: #ffe821;

    border: 2px solid #ffe821;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-amber:checked + label:before {

    border: 2px solid #FFC107;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-amber:checked + label:after {

    background-color: #FFC107;

    border: 2px solid #FFC107;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-orange:checked + label:before {

    border: 2px solid #FF9800;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-orange:checked + label:after {

    background-color: #FF9800;

    border: 2px solid #FF9800;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-deep-orange:checked + label:before {

    border: 2px solid #FF5722;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-deep-orange:checked + label:after {

    background-color: #FF5722;

    border: 2px solid #FF5722;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-brown:checked + label:before {

    border: 2px solid #795548;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-brown:checked + label:after {

    background-color: #795548;

    border: 2px solid #795548;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-grey:checked + label:before {

    border: 2px solid #9E9E9E;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-grey:checked + label:after {

    background-color: #9E9E9E;

    border: 2px solid #9E9E9E;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-blue-grey:checked + label:before {

    border: 2px solid #607D8B;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-blue-grey:checked + label:after {

    background-color: #607D8B;

    border: 2px solid #607D8B;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-black:checked + label:before {

    border: 2px solid #000000;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-black:checked + label:after {

    background-color: #000000;

    border: 2px solid #000000;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-white:checked + label:before {

    border: 2px solid #ffffff;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



[type="radio"].with-gap.radio-col-white:checked + label:after {

    background-color: #ffffff;

    border: 2px solid #ffffff;

    -webkit-animation: ripple 0.2s linear forwards;

    animation: ripple 0.2s linear forwards;

}



.switch label {

    font-weight: normal;

    font-size: 13px;

}



.switch label .lever {

    margin: 0 14px;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-red:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(251, 58, 58, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(251, 58, 58, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-red {

    background-color: rgba(251, 58, 58, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-red:after {

    background-color: #fb3a3a;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-pink:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(233, 30, 99, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(233, 30, 99, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-pink {

    background-color: rgba(233, 30, 99, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-pink:after {

    background-color: #E91E63;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-purple:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(116, 96, 238, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(116, 96, 238, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-purple {

    background-color: rgba(116, 96, 238, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-purple:after {

    background-color: #ebc51a;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-deep-purple:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(103, 58, 183, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(103, 58, 183, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-deep-purple {

    background-color: rgba(103, 58, 183, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-deep-purple:after {

    background-color: #673AB7;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-indigo:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(63, 81, 181, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(63, 81, 181, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-indigo {

    background-color: rgba(63, 81, 181, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-indigo:after {

    background-color: #3F51B5;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-blue:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(2, 190, 201, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(2, 190, 201, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-blue {

    background-color: rgba(2, 190, 201, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-blue:after {

    background-color: #02bec9;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-light-blue:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(3, 169, 244, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(3, 169, 244, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-light-blue {

    background-color: rgba(3, 169, 244, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-light-blue:after {

    background-color: #03A9F4;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-cyan:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 188, 212, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 188, 212, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-cyan {

    background-color: rgba(0, 188, 212, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-cyan:after {

    background-color: #00BCD4;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-teal:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 150, 136, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 150, 136, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-teal {

    background-color: rgba(0, 150, 136, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-teal:after {

    background-color: #009688;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-green:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 198, 218, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 198, 218, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-green {

    background-color: rgba(38, 198, 218, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-green:after {

    background-color: #26c6da;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-light-green:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(139, 195, 74, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(139, 195, 74, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-light-green {

    background-color: rgba(139, 195, 74, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-light-green:after {

    background-color: #8BC34A;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-lime:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(205, 220, 57, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(205, 220, 57, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-lime {

    background-color: rgba(205, 220, 57, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-lime:after {

    background-color: #CDDC39;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-yellow:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 232, 33, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 232, 33, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-yellow {

    background-color: rgba(255, 232, 33, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-yellow:after {

    background-color: #ffe821;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-amber:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 193, 7, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 193, 7, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-amber {

    background-color: rgba(255, 193, 7, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-amber:after {

    background-color: #FFC107;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-orange:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 152, 0, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 152, 0, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-orange {

    background-color: rgba(255, 152, 0, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-orange:after {

    background-color: #FF9800;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-deep-orange:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 87, 34, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 87, 34, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-deep-orange {

    background-color: rgba(255, 87, 34, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-deep-orange:after {

    background-color: #FF5722;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-brown:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(121, 85, 72, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(121, 85, 72, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-brown {

    background-color: rgba(121, 85, 72, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-brown:after {

    background-color: #795548;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-grey:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(158, 158, 158, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(158, 158, 158, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-grey {

    background-color: rgba(158, 158, 158, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-grey:after {

    background-color: #9E9E9E;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-blue-grey:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(96, 125, 139, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(96, 125, 139, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-blue-grey {

    background-color: rgba(96, 125, 139, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-blue-grey:after {

    background-color: #607D8B;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-black:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-black {

    background-color: rgba(0, 0, 0, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-black:after {

    background-color: #000000;

}



.switch label input[type=checkbox]:checked:not(:disabled) ~ .lever.switch-col-white:active:after {

    -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 255, 255, 0.1);

    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 255, 255, 0.1);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-white {

    background-color: rgba(255, 255, 255, 0.5);

}



.switch label input[type=checkbox]:checked + .lever.switch-col-white:after {

    background-color: #ffffff;

}





main.py-4 {

    padding: 0 !important;

}



.card-title {

    font-weight: 700;

    color: #000;

    margin-bottom: 0;

    font-size: 18px;

}



.profile-text h5 {

    color: #000;

    font-weight: 700;

}



.profile-text h3 {

    color: #fff;

    font-size: 16px;

    font-weight: 600;

}



.daes-sec-sec .card {

    height:calc(100% - 30px);;

}



.daes-top-sec .card {

    overflow: hidden;

}



.daes-top-sec h3.box {

    font-size: 35px;

}



.daes-top-sec h3.text-info {

    font-weight: 600;

    font-size: 30px;

}



.daes-top-sec h5.text-muted {

    padding-top: 10px;

    padding-bottom: 10px;

    color: #000 !important;;

}



.daes-top-sec a.small-box-footer {

    display: block;

    padding: 10px 0;

    background: #fbdfd6;

    margin: 0 -15px;

}



.table tr td {

    vertical-align: middle;

    font-size: 14px;

}



.table tr td.redirecttopage {

    color: #000;

    cursor: pointer;

    font-weight: 500;

}



/*.table tr td.link-td:hover{background: #000;}*/

.table tr td.redirecttopage:hover {

    color: #000;

}



.table tr td > img {

    object-fit: contain;

    border-radius: 5px;

    height: 50px;
        background: #f0f0f0;


}

.table#transactionListTable tr td > img,.table tr td.payment_icon > img,.table tr td.rules-icon > img{height: auto;}

.daes-sec-sec .table tr {

    cursor: pointer;

}



.table tr td.address-list {

    max-width: 200px;

    white-space: normal;

}







.table thead th, .table th {

    color: #000;

    background: #f8fafd;

    position: relative;

}



.table tr td{color: #222;font-weight: 500;}

.table tr td.action-btn a, .table tr td.restaurant-action-btn a {

    padding: 0 5px;

}

.table-bordered.dataTable{border-radius: 10px;

  overflow: hidden;}

.table.dataTable thead th, .table.dataTable th{font-weight: 600 !important;

  font-size: 15px;background: #F3F4F6; padding: 15px 10px;border-color: #E5E7EB;}

.table tr td.action-btn a, .table tr td.restaurant-action-btn a {

    padding: 0 5px;

}

.mini-sidebar .topbar .top-navbar .navbar-header .navbar-brand .dark-logo {

    display: none;

}



.mini-sidebar .topbar .top-navbar .navbar-header .navbar-brand .light-logo {

    display: block;

    max-width: 50px;

}



.table tr td > span {

    display: inline-block;

}

.table tr td > span.badge{padding: 3px 10px;color: #fff;}



.table tr td.order_completed span {

    background: green;

    color: #fff;

    padding: 3px 10px;

    border-radius: 5px;

}



.table tr td.success span {

    background: green;

    color: #fff;

    padding: 3px 10px;

    border-radius: 5px;

}

.table tr td.refund_success span {

    background: green;

    color: #fff;

    padding: 3px 10px;

    border-radius: 5px;

}

.table tr td.undefined span {

    background: #ffa500;

    color: #fff;

    padding: 3px 10px;

    border-radius: 5px;

}



.table tr td.order_rejected span, .table tr td.driver_rejected span {

    background: red;

    color: #fff;

    padding: 3px 10px;

    border-radius: 5px;

}



.table tr td.in_transit span, .table tr td.order_placed span, .table tr td.order_accepted span, .table tr td.order_shipped span, .table tr td.order_pending span, .table tr td.driver_pending span {

    background: orange;

    color: #fff;

    padding: 3px 10px;

    border-radius: 5px;

}





.vendor_avtive.closed {

    color: red;

    font-weight: 600;

}



.vendor_avtive.open {

    color: green;

    font-weight: 600;

}



.card-body #users-table_filter {

    width: 100%;

    text-align: center;

}



#users-table_filter #selected_search.form-control, #users-table_filter .form-group, #users-table_filter .form-group .form-control, #users-table_filter .form-group button.btn {

    display: inline-block;

    width: auto;

    height: 40px;

}



body.sticky header.topbar {

    position: fixed !important;

    top: 0 !important;

    left: 0;

    right: 0;

    bottom: auto !important;animation: slideDown 0.35s ease-out;

}



@keyframes slideDown {

  from {

    transform: translateY(-100%);

  }

  to {

    transform: translateY(0);

  }

}



.sticky .fix-sidebar .left-sidebar {

    padding-top: 95px;

}



.form-control {

    background-color: #f5f5f5;

    border: 1px solid #ccc;

}



.row.form-layout {

    max-width: 70%;

    margin: 0 auto;

    display: table;

    width: 100%;

}



.page-wrapper > .card-body {

    padding: 0;

    position: relative;

}



.row.form-layout .form-group.row .col-7 {

    -ms-flex: 0 0 100%;

    flex: 0 0 100%;

    max-width: 100%;

}



.row.form-layout .form-group.row .col-7 > span.restaurant_name {

    font-size: 15px;

    background-color: #f5f5f5;

    border: 1px solid #ccc;

    font-weight: 500;

    width: 100%;

    display: block;

    color: #67757c;

    min-height: 38px;

    border-radius: 0.25rem;

    padding: 0.375rem 0.75rem;

}



.row.form-layout .form-group.row .col-7 .control-inner {

    position: relative;

}



.row.form-layout .form-group.row .col-7 .control-inner > span {

    position: absolute;

    right: 35px;

    top: 8px;

    color: #000;

    font-weight: 500;

    font-size: 14px;

}



.row.form-layout .form-group.row .col-7 .form-control {

    width: 100%;

    -ms-flex: 0 0 100%;

    flex: 0 0 100%;

    max-width: 100%;

}



.row.form-layout .form-group.row .col-7 .control-inner > .currentCurrency {

position: absolute;

left: 1px;

top: 1px;

font-weight: 500;

font-size: 13px;

max-width: 40px;

line-height: 35px;

background: #eaeaea;

padding: 0 4px;

color: #000;

border-radius: 5px 0 0 5px;

text-align: center;

}



.row.form-layout .form-group.row .col-7 .form-control.referral_amount {

    padding-left: 45px;

}



.row.form-layout .form-group.row .col-7 .form-control.currency_input {

    padding-left: 45px;

}





.form-layout .form-layout-inner {

    margin: 0 -10px;

}



.form-group.row {

    display: inline-block;

    width: 100%;

    padding: 0 5px;

    margin: 0;

    margin-right: -3px;

    margin-bottom: 25px;

    vertical-align: top;

}



.form-groupa.row {

    display: inline-block;

    width: 100%;

    padding: 0 5px;

    margin: 0;

    margin-right: -3px;

    margin-bottom: 0px;

    vertical-align: top;

}



.form-group.row .select2-container--default .select2-selection--single{background-color: #f5f5f5;border: 1px solid #ccc;height: 40px;}

.form-group.row .select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 40px;}

.form-group.row .select2-container--default .select2-selection--single .select2-selection__arrow{height: 40px;}





.whvptitle{

    padding-left: 1px !important;

}



.whclosetx {

    color: #ff0000;

    font-weight: 600;

}



.form-group.row.width-50 {

    width: 50%;

}



.btm-btn.form-group i.fa {

    margin-right: 10px;

}



.btm-btn.form-group {

    margin-top: 25px;

    margin-bottom: 0;

}



.form-layout-inner fieldset {

    padding: 10px;

    border: 1px solid #ccc;

    margin-bottom: 15px;

    border-radius: 5px;

    background: #fff;

}



.form-layout-inner fieldset legend {

    display: inline-block;

    width: auto;

    font-weight: 600;

    font-size: 14px;

    text-transform: uppercase;

    color: #fff;

    padding: 7px 14px;

    background: #000;

    border-radius: 5px;

}



.btm-btn.form-group a.btn.btn-default {

    background: #979797;

    color: #fff;

}



.row.form-layout label.control-label {

    color: #000;

    font-weight: 500;

    -webkit-box-flex: 0;

    -ms-flex: 0 0 100%;

    flex: 0 0 100%;

    max-width: 100%;

}



.btn-warning:hover {

    background-color: #000;

    border-color: #000;

}



.nav.nav-tabs.align-items-end.card-header-tabs {

    justify-content: center;

    background: none;

    border: 0;

}



.nav-tabs.card-header-tabs .nav-link {

    color: #000;

}



.nav-tabs.card-header-tabs .nav-link.active, .nav-tabs.card-header-tabs .nav-link:hover {

    background: #000;

    color: #fff;

}



.payment-top-tab .nav-tabs.card-header-tabs .nav-link {

    border: 1px solid #f3f3f3;

    border-radius: 0;

}



.payment-top-tab .nav-tabs.card-header-tabs .nav-link.active, .payment-top-tab .nav-tabs.card-header-tabs .nav-link:hover {

    border-color: #000;

}



.nav-tabs.card-header-tabs .nav-link span.badge-success {

    background: #000;

    color: #fff;

}



.nav-tabs.card-header-tabs .nav-link.active span.badge-success, .nav-tabs.card-header-tabs .nav-link:hover span.badge-success {

    background: #fff;

    color: #000;

}





.form-layout .form-text.text-muted {

    font-size: 13px;

    padding-top: 2px;

}





.checkbox {

    position: relative;

    padding-left: 50px;

}



.checkbox input[type=checkbox] {

    box-sizing: border-box;

    padding: 0;

    border: 1px solid #000;

    appearance: none;

    opacity: 1;

    left: 20px;

    width: 20px;

    height: 20px !important;

    display: inline-block;

    vertical-align: middle;

    max-width: inherit;

    min-height: inherit;

    cursor: pointer;

}



.checkbox [type="checkbox"]:checked {

    background: #000;

}





.resttab-section {

    position: relative;

}



.dataTables_processing {

    text-align: center;

    font-size: 27px;

    color: #fff;

    font-weight: 700;

    position: absolute;

    left: -80px;

    right: -80px;

    top: -80px;

    bottom: -150px;

    align-items: center;

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

    z-index: 1;

    padding-top: 10%;

}



.dataTables_processing > span {

    position: absolute;

    top: 50%;

    transform: translate(0, -50%);

    -webkit-transform: translate(0, -50%);

    -ms-transform: translate(0, -50%);

}





ul.rating {

    padding: 0;

    margin: 0;

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    color: #F59E0B;

}



ul.rating li {

    padding: 0 2px;

}



.rating__item {

    font-size: 15px;

    display: block;

    font-family: FontAwesome;

}



.rating__item::after {

    content: "\f006";

}



.rating[data-rating="5.5"] .rating__item:nth-child(-n+5):after, .rating[data-rating="5"] .rating__item:nth-child(-n+5):after, .rating[data-rating="4.5"] .rating__item:nth-child(-n+4):after, .rating[data-rating="4"] .rating__item:nth-child(-n+4):after, .rating[data-rating="3.5"] .rating__item:nth-child(-n+3):after, .rating[data-rating="3"] .rating__item:nth-child(-n+3):after, .rating[data-rating="2.5"] .rating__item:nth-child(-n+2):after, .rating[data-rating="2"] .rating__item:nth-child(-n+2):after, .rating[data-rating="1.5"] .rating__item:nth-child(-n+1):after, .rating[data-rating="1"] .rating__item:nth-child(-n+1):after, .rating[data-rating="0.5"] .rating__item:nth-child(-n+0):after, .rating[data-rating="0"] .rating__item:nth-child(-n+0):after {

    content: "\f005";

}





.rating[data-rating="1.5"] .rating__item:nth-child(2):after, .rating[data-rating="2.5"] .rating__item:nth-child(3):after, .rating[data-rating="3.5"] .rating__item:nth-child(4):after, .rating[data-rating="4.5"] .rating__item:nth-child(5):after {

    content: "\f123";

}









.reviewhtml ul.rating {

    justify-content: center;

    margin-top: 0px;

    margin-right: 15px;

}



.reviewhtml ul.rating li.rating__item {

    font-size: 20px;

    padding: 0 3px;

}



.review-box .review_count {

    color: #000;

    font-weight: 500;

}



.review-box .review_count > span {

    color: #000;

    font-weight: 600;

    padding-left: 10px;

}





.bellow-text ul {

    padding: 0;

    margin: 0;

    list-style-type: none;

}



.bellow-text ul li {

    display: block;

    color: #000;

    padding-top: 5px;

}



.bellow-text ul li label {

    margin-bottom: 0;

    font-weight: 600;

    padding-right: 10px;

}



.bellow-text ul li > span {

    color: #000;

    font-size: 19px;

    font-weight: 600;

}





.menu-tab {

    margin-bottom: 25px;

}



.menu-tab ul {

    padding: 0;

}



.menu-tab ul li {

    display: inline-block;

}



.menu-tab ul li a {

    display: block;

    padding: 5px 10px;

    color: #000;

    font-size: 17px;

    font-weight: 400;

    border-bottom: 1px solid transparent;

}



.menu-tab ul li.active a, .menu-tab ul li a:hover {

    color: #000;

    border-bottom: 1px solid #000;

}





.pagination > li > a.page-link:hover {

    color: #fff;

    background-color: #000;

    border-color: #000;

}



.form-group.row.restaurant_image .restaurant_image img {

    width: 100%;

    height: 150px;

    object-fit: cover;

    border-radius: 10px;

}



.error_top {

    padding: 0px;

    max-width: 70%;

    margin: 0 auto;

    margin-bottom: 20px;

}



.error_top p {

    color: red;

    background: #fff;

    border-radius: 10px;

    border-left: 4px solid red;

    padding: 10px 20px;

    font-weight: 400;

}





.success_top {

    padding: 0px;

    max-width: 70%;

    margin: 0 auto;

    margin-bottom: 20px;

}



.success_top p {

    color: green;

    background: #fff;

    border-radius: 10px;

    border-left: 4px solid green;

    padding: 10px 20px;

    font-weight: 400;

}





.form-group.extra-row {

    padding: 0 20px;

    display: table;

    width: 100%;

}



.btn-primary.active, .btn-primary:active, .btn-primary:focus, .btn-primary.disabled.active, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover, .btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {

    background: #000;

    border-color: #000;

    box-shadow: 0 0 0 0.2rem #000;

    color: #fff;

}





.restaurant_image #photos {

}



.restaurant_image .image-item {

    padding: 5px 10px;

    display: inline-block;

    position: relative;

}



.restaurant_image .image-item img {

    border-radius: 5px;

}



.restaurant_image .image-item span.remove-btn {

    position: absolute;

    top: -3px;

    right: 4px;

    background: #000;

    border-radius: 50px;

    padding: 3px 8px;

    font-size: 12px;

    color: #fff;

    cursor: pointer;

}



.uploaded_image {

    margin-top: 15px;

}



.uploaded_image img#uploaded_image {

    border-radius: 5px;

}



.uploaded_image_owner {

    margin-top: 15px;

    padding-left: 15px;

}



.placeholder_img_thumb, .logo_img_thumb, .favicon_img_thumb {

    padding: 15px 15px;

}



.placeholder_img_thumb img, .logo_img_thumb img {

    margin-right: 5px;

}





.order_detail {

    /*padding: 30px;*/

}



.order_detail h3 {

    /*font-size: 16px;

    font-weight: 600;

    color: #333;

    margin-bottom: 20px;

    border-bottom: 1px solid rgba(120, 130, 140, 0.13);

    padding-bottom: 10px;*/

    font-size: 18px;

font-weight: 700;

color: #333;

margin-bottom: 0;

}



.order_detail .orderdetail-top ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

}



.order_detail .orderdetail-top ul li {

    display: inline-block;

    padding-right: 15px;

    border-right: 1px dashed #000;

    width: 25%;

    margin-right: -4px;

    padding-left: 15px;

}



.order_detail .orderdetail-top ul li:last-child {

    border: 0;

}



.order_detail .orderdetail-top ul li:first-child {

    padding-left: 0;

}



.order_detail .orderdetail-top ul li strong {

    display: block;

    padding-bottom: 5px;

    color: #000;

    font-weight: 600;

}





.order_edit-genrl .form-group.row {

    padding: 0;

    margin: 0px 0px;

    width: auto;

    display: inherit;

}



.order_edit-genrl .form-group.row.widt-50 {

    width: 50%;

    display: inline-block;

    margin-bottom: 15px;

}



.order_edit-genrl .form-group.row .control-label {

    width: 100%;

    -webkit-box-flex: 0;

    -ms-flex: 0 0 100%;

    flex: 0 0 100%;

    max-width: 100%;

}



.order_edit-genrl .form-group.row.gendetail-col .control-label {

    font-weight: 400;

    color: #000;

    font-size: 15px;

    padding-bottom: 10px;

border-bottom: 2px dashed #e9e9e9;

padding-left: 0;

padding-right: 0;

}



.order_edit-genrl .form-group.row.gendetail-col .control-label > strong {

    padding-right: 5px;

    width: 35%;

    float: left;font-weight: 500;

}



.order_edit-genrl .form-group.row.gendetail-col .control-label > span {

    margin-left: 35%;

    display: block;

}



.order_edit-genrl .form-group.row > .col-7 {

    width: 100%;

    -webkit-box-flex: 0;

    -ms-flex: 0 0 100%;

    flex: 0 0 100%;

    max-width: 100%;

}



.order_edit-genrl .form-group.row.gendetail-col .control-label > span#payment_method img{width: 95px !important; }



.order_edit-genrl .form-group.row .input-group.date {

    margin: 0 -5px;

    width: auto;

}



.order_edit-genrl .form-group.row .input-group.date input {

    margin: 0 5px;

    color: #000;

    font-size: 14px;

}



.order_edit-genrl .form-group.row.width-100 {

    width: 100%;

    margin: 0;

}



.order_edit-genrl .form-group.row.width-100 .control-label, .order_edit-genrl .form-group.row.width-100 .col-7 {

    padding: 0;

}





.order_addre-edit > h3 a.edit_address {

    float: right;

    margin-top: 5px;

}



.address p {

    color: #000;

    font-weight: 400;

    border-bottom: 2px dashed #e9e9e9;

    padding-bottom: 10px;

    font-size: 15px;

}



.address p strong {

    width: 35%;

    float: left;font-weight: 500;

}



.address p span#vehicle_number{padding: 4px 16px;border-radius: 10px;border: 1px dashed #494949;background: #ececec;text-transform: uppercase;font-weight: 700;letter-spacing: 1px;}

.address p{display: flex;align-items: center;}

.address p .user-img{display: inline-block;vertical-align: middle;margin-right: 10px;}

.address p .user-img img{width: 50px;border-radius: 50px !important;border: 2px solid #eaeaea;display: block;height: 50px;

object-fit: cover;}



.address p .drove-det .drv-name{display: block;}



.drove-det .badge i.fa,.badge.dr-review i.fa {margin-right: 5px;font-size: 12px;vertical-align: top;display: inline-block;line-height: 12px;}



.order-items-list { /*padding-top: 25px;margin-top: 25px;border-top: 1px solid #ccc;*/

    margin-bottom: 15px;

    background: #fff;

}



.order-items-list td.order-product {

    width: 45%;

}



.order-items-list td.order-product > div {

    display: inline-block;

    vertical-align: middle;

}



.order-items-list td.order-product > div.orders-tracking {

    width: 70%;

}



.order-items-list td.order-product > div > h6 {

    font-weight: 500;

    margin-bottom: 5px;

    color: #000;

    padding: 7px 0;

    font-size: 16px;

}



.order-deta-btm-left .table thead th{ white-space: nowrap; }

.table tr td.price{font-weight: 600;color: #000;}

.woo-orders-tracking-container {

    background: #f5f5f5;

    padding: 4px;

    width: 100%;

    max-width: 500px;

}



.woo-orders-tracking-container .woo-orders-tracking-item-details {

    display: flex;

    width: 100%;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    background: #f1f0f0;

    font-size: 12px;

}



.woo-orders-tracking-container .woo-orders-tracking-item-details > div {

    margin: 4px 0;

    text-align: left;

    padding: 5px;

}



.woo-orders-tracking-item-tracking-code-label {

    width: 20%;

    font-weight: 600;

    color: #000;

    padding: 0 9px !important;

    font-size: 14px;

}



.woo-orders-tracking-container .woo-orders-tracking-item-details .woo-orders-tracking-item-tracking-code-value {

    background: #ffffff;

    line-height: 27px;

    width: 80%;

    min-width: 100px;

    min-height: 25px;

    font-size: 13px;

    font-weight: 500;

    color: #000;

}



.woo-orders-tracking-item-tracking-button-edit-container {

    width: 60px;

}



.woo-orders-tracking-container .woo-orders-tracking-item-details .woo-orders-tracking-item-tracking-code-value > span {

    padding-right: 5px;

}



.woo-orders-tracking-item-tracking-button-edit-container a {

    font-size: 17px;

}



.order_detail-top-box {

    /*background: #fff;

    border-radius: 4px;

    -webkit-box-shadow: 0px 5px 20px rgb(0 0 0 / 5%);

    box-shadow: 0px 5px 20px rgb(0 0 0 / 5%);

    padding: 20px;

    height: calc(100% - 62px);*/

}





.orders-tracking-item-details > strong {

    color: #000;

    padding-bottom: 5px;

    font-weight: 600;

    text-decoration: underline;

    font-size: 14px;

}



.orders-tracking-item-details > div {

    padding-bottom: 3px;

    font-size: 13px;

}



.orders-tracking-item-details > div > span {

    padding-right: 10px;

    font-weight: 400;

}



.orders-tracking-item-details > div > span:last-child {

    font-weight: 600;

}



.order-totals-items {

    /*border-top: 1px solid #ccc;*/

    /*padding-top: 15px;

    margin-top: 15px;

    background: #fff;*/

}



.order-totals-items table.order-totals {

    float: right;

    width: 100%;

}



.order-totals-items table.order-totals tr td {

    color: #000;

    font-size: 14px;

    padding: 10px 15px;

    line-height: 1.2;

}



.order-totals-items table.order-totals tr td.label {

    font-weight: 400;

    text-align: left;

    width: 100%;

    padding-right: 15px;padding-left: 0;font-size: 14px;/*margin-bottom: 10px*/;

}

.order-totals-items table.order-totals tr td:last-child{text-align: right;padding-right: 0;font-weight: 600;}



.order-totals-items table.order-totals tr td.h3{text-align: center;background: #000;color: #fff;font-size: 18px;font-weight: 600;}

.order-totals-items table.order-totals tr td.total {font-weight: 600;text-align: right;}



.order-totals-items table.order-totals tr.final-rate{background: #a3cd4f;}



.order-totals-items table.order-totals tr.final-rate td{color: #fff;padding-left:15px;padding-right: 15px;margin-bottom: 0; font-weight: 700;}



.order-totals-items table.order-totals tr.grand-total td{/*border-top: 1px solid rgba(65, 83, 179, 0.15);*/}

.order-totals-items table.order-totals tr.grand-total td:last-child{color: green;}

.order-totals-items table.order-totals tr.grand-total{position: relative;}

.order-totals-items table.order-totals tr.grand-total::before {content: "Total";position: absolute;left: 0;right: 0;margin: auto;

    width: 80px;top: -30px;background: #fff;z-index: 1;padding: 5px 7px;text-align: center;text-transform: uppercase;font-weight: 400;font-size: 14px;}

.order-totals-items table.order-totals tr.paid { border-top: 1px solid #000;}



.order-totals-items table.order-totals tr td.seprater{padding: 0;position: relative;}

.order-totals-items table.order-totals tr td.seprater span{position: absolute;left: 0;right: 0;margin: auto;width: auto;top: 2px;background: #fff;z-index: 1;padding: 5px 7px;text-align: center;text-transform: none;font-weight: 400;font-size: 14px;color: #67757c;display: inline-block;max-width: 140px;}



.bk-summary-table{/*background: #f1f1f1;*/padding: 0px;margin-top: 0px;border-radius: 5px;}



.print-btn {

    padding-right: 0px;

}



.print-btn button {

    border: 2px solid #000;

    font-size: 16px;

    border-radius: 5px;

    padding: 5px;

    color: #000;

    cursor: pointer;

}



.resturant-detail .card-header h4 {

    margin-bottom: 0;

    color: #000;

}



.resturant-detail a.row.redirecttopage {

    align-items: center;

}



.resturant-detail .card-body h5.contact-info {

    margin-top: 25px;

    font-size: 17px;

    margin-bottom: 15px;

    font-weight: 600;

}

.resturant-detail .card-body p{border-bottom: 1px solid rgba(0,0,0,.1);padding-bottom: 10px;}

.resturant-detail .card-body p strong {

    padding-right: 5px;

    font-weight: 600;

    color: #000;

    float: left;

    width: 25%;

}



.resturant-detail .card-body p > span {

    display: block;

    margin-left: 25%;

}



img.rounded-circle {

    object-fit: cover;

}





.topbar .top-navbar .navbar-header .navbar-brand img#logo_web {

    max-width: 150px;height: 50px;

}



.table tr td > span.badge-success {

    background: green;

}



/*.table tr td.action-btn{display: flex; align-items: center;}*/



.table tr td.action-btn a, .table tr td.vendor-action-btn a ,ul.dtr-details > li span a,.table tr td .action-btn a{ padding: 0 5px;}





.table tr td.action-btn a i.fa-check,.table tr td.action-btn a i.fa-edit, .table tr td.action-btn a i.fa-ellipsis-h, .daes-sec-sec .table span.fa-edit, .table tr td.vendor-action-btn a i.fa-edit, .table tr td.vendor-action-btn a i.fa-ellipsis-h, .table tr td.vendor-action-btn a i.fa-eye,ul.dtr-details > li span a i.fa-edit, ul.dtr-details > li span a i.fa-ellipsis-h, ul.dtr-details > li span a i.fa-ellipsis-h,ul.dtr-details > li span a i.fa-eye,ul.dtr-details > li span a i.fa-check,.table tr td a i.fa-check,.table tr td .action-btn a i.fa-edit,.table tr td .action-btn a i.fa-ellipsis-h {

    background: #E1E7E9;

    width: 28px;

    height: 28px;

    color: #000;

    border-radius: 50px;

    text-align: center;

    padding: 7px 5px;

    font-size: 15px;font-weight: normal !important;

}











.table tr td.action-btn a i.fa-edit, .daes-sec-sec .table span.fa-edit, .table tr td.vendor-action-btn a i.fa-edit,ul.dtr-details > li span a i.fa-edit,.table tr td.action-btn a i.fa-check,ul.dtr-details > li span a i.fa-check,.table tr td .action-btn a i.fa-edit {

    background: green;

    color: #fff !important;

}



.table tr td.action-btn a i.fa-edit:before,.redirecttopage .fa-edit::before,ul.dtr-details > li span a i.fa-edit::before,.table tr td .action-btn a i.fa-edit:before {content: "\f040";}

.table tr td.action-btn a i.fa-eye,.table tr td.action-btn a i.fa-file,ul.dtr-details > li span a i.fa-file,ul.dtr-details > li span a i.fa-eye,.table tr td .action-btn a i.fa-file,.table tr td .action-btn a i.fa-eye{background: #E1E7E9;

width: 28px;

height: 28px;

color: #000;

border-radius: 50px;

text-align: center;

padding: 7px 5px;

font-size: 15px;font-weight: normal !important;}





.table tr td.action-btn a i.fa-trash, .table tr td.vendor-action-btn a i.fa-trash,ul.dtr-details > li span a i.fa-trash,.table tr td.action-btn a i.fa-close,ul.dtr-details > li span a i.fa-close,.table tr td.action-btn a i.fa-file-pdf-o,.table tr td .action-btn a i.fa-file-pdf-o,.table tr td .action-btn a i.fa-trash,.table tr td .action-btn a i.fa-close {

    background: red;

    width: 28px;

    height: 28px;

    color: #fff;

    border-radius: 50px;

    text-align: center;

    padding: 7px 5px;

    font-size: 15px;font-weight: normal !important;

}





.language-options select {

    background: none;

    border: 0;

    color: #fff !important;

}



.language-options select:focus, .language-options select:hover {

    background: none !important;

    border: 0;

    color: #fff !important;

    box-shadow: none;

    outline: none;

}



.language-options select option {

    background: #000;

}





#story_vedios .video-inner,.thumbnail-inner{position: relative;/*border: 1px solid #ccc;*/border-radius: 10px;overflow: hidden;}

#story_vedios .video-inner video{width: 100%;border: 1px solid #ccc;border-radius: 10px;}

#uploding_story_video,#uploding_story_thumbnail{margin-top: 10px;color: green; font-weight: 500;}

.thumbnail-inner img{width: 100%;}

#story_thumbnail{position: relative;}

.remove-story-video,.remove-story-thumbnail{position: absolute;top:5px;right: 4px;background: #000;border-radius: 50px;padding: 3px 8px;font-size: 12px;

color: #fff;cursor: pointer;}



.working_hours_div table.booking-table{width: 100%;}

.working_hours_div table.booking-table td{padding: 5px 18px;}

.working_hours_div table.booking-table td{width: 40% !important;}

.working_hours_div table.booking-table td:last-child{width: 20% !important;}







/********************user detail******************/



.p-card {padding: 20px;}

.card-block {display: flex;flex-direction: column;flex-grow: 1;}

.profile-box {background: #f9fbfe;border-radius: 0 0 5px 5px;padding-bottom: 0px; position: relative;}

.profile-card{background: #000;overflow: hidden;padding: 37px 0;position: relative; text-align: center;}

.profile-card:before{content: "";}

.avatar-100 {height: 100px;min-width: 100px;width: 100px;}

.avatar-rounded {border-radius: 50%;-o-object-fit: cover;object-fit: cover;overflow: hidden;border: 2px solid #fff;position: relative; z-index: 2;}

.profile-card::before {content: "";background: #111;width: 120px;height: 120px;display: inline-block;border-radius: 100px;right: -33px;

  top: -10px;position: absolute;z-index: 0;}

.profile-card::after {content: "";background: #111;width: 120px;height: 120px;display: inline-block;border-radius: 100px;left: -33px;

  bottom: -10px;position: absolute;z-index: 0}

.profile-card h3 {position: relative;z-index: 9;font-size: 20px; font-weight: 600;margin-bottom: 15px !important;}

.pro-content {background: #fff;-ms-box-shadow: 0 2px 25px 0 rgba(45,69,95,.06);-o-box-shadow: 0 2px 25px 0 rgba(45,69,95,.06);box-shadow: 0 2px 25px 0 rgb(45 69 95 / 6%);left: 0;margin-top: -55px;padding: 20px;position: relative;right: 0;max-width: 320px;margin: 0 auto;top: -35px;}

.p-icon {background: #000;border-radius: 5px;color: #fff;height: 30px;line-height: 29px;text-align: center;width: 45px;font-size: 13px;

min-width: 30px;max-width: 30px;margin-right: 10px !important;}



.pro-content p{font-size: 16px;}



.profile-card .user-total-ratings{}



.ride-map-dredetail .ride-map-dredetail-rg .order_addre-edit  .card-body {background: #fff;}





.profile-card a.add-wallate.btn,.profile-card a.change-plan.btn{display: inline-block;position: relative;z-index: 1;margin-bottom: 25px !important;margin-left: 0 !important;padding: 6px 25px;font-size: 15px;font-weight: 600;border-radius: 50px;position: relative;z-index: 1}

.profile-card a.add-wallate.btn i.fa{font-size: 25px;vertical-align: top;margin-right: 10px;font-weight: 700;}

/********************user detail******************/



/********************Live tracking******************/



.ride-list.table-responsive {overflow-y: auto;height: 460px;}

.ride-list.table-responsive .live-tracking-list{padding-right: 10px;}

.live-tracking-list .live-tracking-box{position: relative;padding-bottom: 15px;border-bottom: 1px solid #eaeaea;margin-bottom: 15px; cursor: pointer;}

/*.live-tracking-list .live-tracking-box .listicon{position: absolute; width: 25px; height: 25px; border-radius: 50px; border: 3px solid #000000;left: 0; top: 0;display: inline-block;background: #fff;}*/

.live-tracking-list .live-tracking-box .location-ride > div{position: relative; padding-left: 40px;padding-bottom: 32px;font-size: 15px !important;}

.live-tracking-list .live-tracking-box .location-ride > div:after{position: absolute; width: 20px; height: 20px; border-radius: 50px; border: 3px solid #000000;left: 3px; top: 0;display: inline-block;background: #fff;content: "";}

.live-tracking-list .live-tracking-box .location-ride > div:before{border: 1px dashed #7D7D7D;content: "";width: 2px;left: 12px;top: 0;bottom: 0;display: inline-block;position: absolute;}

.live-tracking-list .live-tracking-box .location-ride > div:last-child:before{display: none;}



.live-tracking-list .live-tracking-box .location-ride > div.to-ride:after{background:#fff url(../images/location.png) no-repeat center; width: 23px; height: 23px; background-size: 100%; border: 0;}



.live-tracking-list .live-tracking-box .location-ride > div span{/*padding: 5px 10px;background: #FFFFFF;border: 1px solid #BFCED2;box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.07);border-radius: 5px;*/ display: inline-block;}



.live-tracking-box h3.drier-name{font-size: 14px;font-weight: 500;line-height: normal; margin-bottom: 5px;}

.live-tracking-box h4.user-name{font-size: 14px;font-weight: 500;margin-bottom: 15px;}

.live-tracking-box p,.live-tracking-list .live-tracking-box .location-ride > div{color: #000; font-size: 13px; text-align: left;}

.live-tracking-list .live-tracking-box .location-ride > div.to-ride{padding-bottom: 0;}

.live-tracking-box .badge{padding: 5px 15px; font-size: 15px; border-radius: 50px;margin-top: 20px;}



.live-tracking-list .live-tracking-box:last-child:before{display: none;}



.applied_drivers_list{background: #FFFFFF;border: 1px solid #E5EAF1;border-radius: 15px;padding: 14px 17px; margin-bottom: 15px;}

.applied_drivers_list > .d-flex{align-items: center;}

.applied_drivers_list .user-img{margin-right: 20px;}

.applied_drivers_list .user-img img{border-radius: 100px !important;border: 2px solid #eaeaea;height: 50px;object-fit: cover;}

.applied_drivers_list .driver_apply-left h4{font-size: 17px; color: #000;font-weight: 700 !important;}

.applied_drivers_list .confirm-tag{ margin-top: 15px; }

.applied_drivers_list .confirm-tag span.badge{padding: 5px 15px;}

.applied_drivers_list .driver-rate{font-size: 18px;font-weight: 500;color: #000;font-size: 18px;font-weight: 600; display: block; margin-bottom: 10px;}



.applied_drivers_list .drivers-suggest > span{display: block;font-size: 14px;color: #333;}

.applied_drivers_list .drivers-suggest > span label{font-weight: 700;color: #000;}



.table tr td .live-tracking-list .live-tracking-box{border-bottom: 0; padding-bottom: 0; margin-bottom: 0;}

.table tr td .live-tracking-list .live-tracking-box .location-ride > div{font-size: 13px !important;padding-bottom: 15px;}

.table tr td .live-tracking-list .live-tracking-box .location-ride > div.to-ride{padding-bottom: 0px;}

/********************Live tracking******************/

.dt-time{width: 135px; white-space: normal !important;}

.dt-time > span {display: block;white-space: nowrap;}

.dt-time > span.date {font-weight: 600;}



.card-header .nav{background: #000;border: 1px solid #000;border-radius: 5px;padding: 5px;margin-bottom: 0 !important;}

.card-header .nav-pills .nav-link{padding: 5px 10px;font-size: 13px;  font-weight: 500;}

.card-header .nav-pills .nav-link.active,.card-header .nav-pills .show > .nav-link{border-radius: 5px;}



.card-header{background: #fff;}



.ride-status-info{margin-top: 20px;/*max-width: 50%;*/background: #fcfff5;padding: 15px;}

.ride-status-info ul{padding: 0 0 0 0px; margin: 0; list-style-type: none;column-count: 2;-moz-column-count: 2;}

.ride-status-info ul li{border-bottom: 1px solid #EFEFEF;padding-bottom: 10px;padding-top: 10px;color: #222;font-weight: 400;font-size: 14px;/*width: 50%;margin-right: -3px;display: inline-block;*/vertical-align: top;}

.ride-status-info ul li span.status{width: 175px;font-weight: 600;margin-right: 19px;display: inline-block;}

.ride-status-info h3{margin-bottom: 15px;margin-top: 0px;color: #000 !important;font-weight: 700;font-size: 17px;}

.badge.unknown-badge{border: 2px solid #000;}



.tip-box {background: #E6F6E6;border-left:4px solid #009400;padding: 15px 15px 15px 30px;border-radius: 10px;box-shadow: 0 2px 5px 0 rgba(0,0,0,0.09);margin-top: 15px;}

.tip-box h5 {font-size: 18px;color: #009400;padding-bottom: 10px;margin: 0px 0px 0px 0px; font-weight: 700;}

.tip-box p{color: #009400;margin-bottom: 0;}

/********************Vehicle  info******************/



.vehicleinfo-list .col-group{box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);padding: 10px;margin-bottom: 20px;border-radius: 5px;font-size: 15px;color: #333;}

.vehicleinfo-list .col-group label{margin-bottom: 0; font-weight: 500;color: #000;}



.num-plat{padding: 4px 16px;border-radius: 10px;border: 1px dashed #494949;background: #ececec;text-transform: uppercase;font-weight: bold;letter-spacing: 1px;}





.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{background-position: center bottom, center calc(100% - -1px);}



.table-responsive .dataTables_wrapper .dataTables_paginate{padding-top: 5px;}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button{padding: 3px 10px;}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current,.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button:hover{background: #000;color: #fff !important;border: 1px solid #000;border-radius: 5px;}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{font-size: 14px;}

.table-responsive .dataTables_wrapper .dataTables_info{font-size: 14px;}





table.dataTable.display > tbody > tr.odd > .sorting_1, table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1{box-shadow: none !important;}



.personal-detail{margin-bottom: 25px;padding: 15px 15px;background: #fcfff5;border-radius: 10px;}

.personal-detail h3{margin-bottom: 15px;margin-top: 0px;color: #000 !important;font-weight: 700; font-size: 17px;}

.user-list-table .table tr td {border-width: 0 !important; border-bottom-width: 0px;border-bottom-width: 0px;border-bottom-width: 1px !important;vertical-align: top;font-size: 14px;border: 1px solid #EFEFEF;width: 50%;vertical-align: middle;}

.user-list-table .table tr td:last-child {padding-left: 10px !important;}





table.dataTable > tbody > tr.child ul.dtr-details{width: 100%;}



table.dataTable > tbody > tr.child span.dtr-title{width: 50%;}

.table tr th.delete-all [type="checkbox"] + label, .table tr td.delete-all [type="checkbox"] + label{margin-bottom: 0;height: 20px;}





.personal-detail ul{padding: 0; margin: 0; list-style-type: none;}

.personal-detail ul li{display: flex; align-items: center; border-bottom: 1px solid #EFEFEF;padding-bottom: 10px; padding-top: 10px;color: #222;font-weight: 400;font-size: 14px;}

.personal-detail ul li:last-child{border-bottom: 0;}

.personal-detail ul li span.rule-img{margin-right: 15px;}

.personal-detail ul li span.rule-img img{width: 30px !important;}



.view-page.btn{font-weight: 600;padding: 6px 20px;}





.user-detail .box {

  margin-bottom: 5px;

  box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%);

  margin-top: 15px;

}

.box-header h3.box-title {

  margin-bottom: 20px;

  font-weight: 600;

  font-size: 18px;

  line-height: 27px;

  letter-spacing: 0.03em;

  color: #333333;

  padding: 15px;

  background: #ececec;

  margin: -11px -11px 8px -11px;

  border-radius: 5px 5px 0 0;

}

/********************Vehicle  info******************/



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

    .table thead th, .table th {
        font-size: 14px;

    }



    .table tr td {

        font-size: 13px;

    }





}



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

    .mini-sidebar .page-wrapper {

        padding-left: 0px;

    }



}



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



    .row.form-layout {

        max-width: 100%;

    }



    .row.form-layout label.control-label {

        -webkit-box-flex: 0;

        -ms-flex: 0 0 100%;

        flex: 0 0 100%;

        max-width: 100%;

    }

.ride-status-info ul li{width: 100%;margin-right: 0;}  



.ride-status-info ul{column-count: 1;-moz-column-count: 1;}  



}



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



    #users-table_filter #selected_search.form-control, #users-table_filter .form-group, #users-table_filter .form-group .form-control, #users-table_filter .form-group button.btn {

        width: 100%;

    }





}



.form-group.row .chosen-container-multi .chosen-choices {

    padding: 10px 10px;

    border-radius: 4px;

}



.form-group.row .chosen-container-multi .chosen-choices li.search-choice {

    padding: 8px 25px 8px 10px;

    font-size: 15px;

    font-weight: 500;

}



.form-group.row .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {

    top: 9px;

    right: 6px;

}



.form-group.row .chosen-container-multi .chosen-drop .result-selected {

    color: #333;

    padding: 8px 6px;

    font-size: 15px;

}



.chosen-container-multi .chosen-choices li.search-field input[type="text"] {

    color: #333 !important;

    font-size: 15px !important;

}



.form-group.row .item_attributes {

    padding: 15px;

}



.form-group.row .item_attributes > div {

    margin-bottom: 10px;

}



.form-group.row .item_attributes label {

}



.item_attributes .bootstrap-tagsinput {

    width: 100%;

}



.item_attributes .bootstrap-tagsinput .tag {

    padding: 7px 10px;

    font-size: 15px;

}



.item_attributes .bootstrap-tagsinput .tag [data-role="remove"] {

    background: #ffff;

    border-radius: 50px;

    width: 18px;

    height: 18px;

    color: #000;

    display: inline-block;

    text-align: center;

    font-weight: 600;

    line-height: 16px;

    vertical-align: middle;

}



.item_variants .table .thead-light th {

    vertical-align: middle;

}



.item_variants .table td .variant-image .upload .icon {

    text-align: center;

    font-size: 20px;

    cursor: pointer;

    display: inline-block;

    margin-left: 15px;

}



.item_variants .table td .variant-image .upload {

    text-align: center;

}



.item_variants .table td .variant-image .upload .image {

    text-align: center;

    position: relative;

    max-width: 55px;

    display: inline-block;

}



.item_variants .table td .variant-image .upload .image i.mdi-delete {

    font-size: 12px;

    cursor: pointer;

    position: absolute;

    right: -8px;

    background: #000;

    color: #fff;

    border-radius: 50px;

    width: 20px;

    height: 20px;

    display: inline-block;

    top: -6px;

}



.web_version {

    text-align: center;

    color: #fff;

    padding: 8px 35px 8px 15px;

    display: block;

    font-size: 15px;

    font-weight: 700;

}

.mini-sidebar .web_version{padding: 8px 11px 8px 5px;width: 60px;}

.radio-form input[type="radio"] {

    position: absolute;

    z-index: 1 !important;

    left: 15px;

    right: 15px;

    height: 100%;

    width: auto;

    opacity: 0;

    cursor: pointer;

}



.table tr td .switch {

    display: inline-block;

    width: 40px;

    height: 21px;

    cursor: pointer;

    margin: auto;

    position: relative;

}



.table tr td .switch input {

    opacity: 0;

    height: 100%;

    z-index: 5;

    position: absolute;

    left: 0;

    right: 0;

    width: 100%;

    top: 0;

    bottom: 0;

    cursor: pointer;

}



.table tr td .switch .slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: red;

    -webkit-transition: .4s;

    transition: .4s;

    border-radius: 34px;

    width: auto;

    height: auto;

}



.table tr td .switch .slider:before {

    position: absolute;

    content: "";

    height: 19px;

    width: 19px;

    left: 1px;

    bottom: 1px;

    background-color: white;

    -webkit-transition: .4s;

    transition: .4s;

    border-radius: 50%;

}



.table tr td .switch input:checked + .slider {

    background-color: green;

}



.table tr td .switch input:checked + .slider::before {

    -webkit-transform: translateX(19px);

    -ms-transform: translateX(19px);

    transform: translateX(19px);

}

.placeholder_img_thumb, .logo_img_thumb {

    padding: 15px 15px;

}



.form-group .placeholder_img_thumb {

    padding: 15px 15px;

}



.form-group .placeholder_img_thumb img {

    height: 50px !important;

object-fit: contain;

width: 50px !important;

}



.placeholder_img_thumb img, .logo_img_thumb img {

    margin-right: 5px;

}



.placeholder_img_thumb .image-item {

    position: relative;

    margin-right: 10px;

    display: inline-block;

}



.placeholder_img_thumb .image-item .delete-btn, .placeholder_img_thumb .image-item .remove-btn {

    position: absolute;

    right: 4px;

    top: -4px;

    width: 20px;

    height: 20px;

    background: #000;

    color: #fff;

    font-size: 9px;

    text-align: center;

    border-radius: 50px;

    line-height: 20px;

    padding: 0 4px 0 2px;

    cursor: pointer;

}

.rental-detailed-ratings-and-reviews h3 {

    font-style: normal;

    font-weight: 500;

    font-size: 18px;

    line-height: 27px;

    letter-spacing: 0.03em;

    color: #000000;

    margin-bottom: 11px;

}



.rental-review .reviews-members-header .feather-star { /*color: #eca700 !important;*/

}





.rental-review .reviews-members {

    background: #FFFFFF;

    border: 1px solid #E5EAF1;

    border-radius: 15px;

    padding: 14px 17px;

}



.rental-review .reviews-members .media {

    padding-bottom: 15px;

    border: 0;

    border-bottom: 1px solid #E5EAF1;

    margin-bottom: 10px;

    padding-left: 0; padding-right: 0;

    padding-top: 0;

}



.rental-review .reviews-members .reviews-members-body p {

    font-weight: 400;

    font-size: 14px;

    line-height: 21px;

    letter-spacing: 0.05em;

}



.review-date span {

    font-style: normal;

    font-weight: 400;

    font-size: 14px;

    line-height: 21px;

    letter-spacing: 0.03em;

    color: #666666;

}

.order_detail-review h4{font-size: 15px;font-weight: 500;color: #333;margin-bottom: 15px;padding-bottom: 4px;border-bottom: 1px solid rgba(0,0,0,0.06);}

 h5.no-review{text-align: center;}



.carbook-detail-left .card {

    background: #FFFFFF;

    border: 0;

    border-radius: 0; /*height: 100%;*/

}



.rental-review .reviews-members-header h6 {

    font-style: normal;

    font-weight: 600;

    font-size: 16px;

    line-height: 24px;

    letter-spacing: 0.03em;

    color: #333333;

}





.attribute-ratings .feature-reviews-members-header {

    position: relative;

    z-index: 1;

}



.attribute-ratings .feature-reviews-members-header:before {

    position: absolute;

    content: "";

    background: #E5EAF1;

    height: 1px;

    left: 0;

    right: 0;

    bottom: 8px;

    z-index: -1;

}



.attribute-ratings .feature-reviews-members-header h6 {

    font-weight: 400;

    font-size: 15px;

    line-height: 22px;

    letter-spacing: 0.05em;

    color: #333333;

    background: #fff;

    padding-right: 10px;

    min-width: 150px;

}



.attribute-ratings .feature-reviews-members-header .rating-info {

    background: #fff;

    padding-left: 10px;

}



.rating-info .feather-star {

    font-size: 17px;

    margin-right: 4px;

}



.attribute-ratings .rating-info .count-rating {

    width: 20px;

    text-align: right;

}



.rental-review .reviews-members .reviews-members-body .photos ul {

    padding-left: 0;

    list-style-type: none;

    margin-bottom: 0;

}



.rental-review .reviews-members .reviews-members-body .photos ul li {

    display: inline-block;

    margin-right: 10px;

    width: 15%;

    vertical-align: middle;

}



.rental-review .reviews-members .reviews-members-body .photos ul li img {

    display: block;

    width: 100%;

    border-radius: 5px;

    background: #E7E7E7;

    height: 53px;

    object-fit: contain;

}



.order_detail .attribute-ratings{border-top: 1px solid rgba(120, 130, 140, 0.13); padding-top: 10px;}

.order_detail .attribute-ratings h3{border:0 ; padding-bottom: 0; }



/*dashnoard*/

.business-analytics .card-box {

    background-color: #fff;

    border-radius: 10px;

    padding: 20px 60px 20px 20px;

    position: relative;

    border: 1px solid rgba(180, 208, 224, .5);

    box-shadow: 0 5px 10px rgba(0, 0, 0, .05);

    height: 100%;

    transition: all .3s ease;

    cursor: pointer;

}



.business-analytics .card-box h5 {

    font-size: 16px;

    margin-bottom: 10px;

    font-weight: 700;

    color: #666;

}



.business-analytics .card-box h2 {

    font-weight: 700;

    font-size: 22px;

    color: #000;

    margin: 0;

}



.business-analytics .card-box h6{font-weight: 600; font-size: 15px;margin-top: 5px;}

.intercity-cont{display: flex;align-items: center;}

.intercity-cont span{margin-left: auto; font-size: 16px; font-weight: 700;}

.business-analytics .card-box i {

    position: absolute;

    inset-block-start: 16px;

    inset-inline-end: 16px;

    font-size: 30px;

    color: #fff;

    width: 40px;

    text-align: center;

    height: 40px;

    background: #80b140;

    border-radius: 5px;

    line-height: 40px;

    align-items: center;

display: flex;

justify-content: center;

}



.business-analytics__img {

    position: absolute;

    inset-block-start: 16px;

    inset-inline-end: 16px;

}



.business-analytics_list > div {

    padding-bottom: 10px;

}



.order-status {

    background-color: rgba(110, 137, 175, .0509803922);

    border-radius: 10px;

    padding: 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    height: 100%;

    transition: all .3s ease;

}



.order-status .data {

    display: flex;

    align-items: center;

    gap: 10px;

}



.order-status:hover {

    box-shadow: 2px 2px 15px rgba(7, 59, 116, .15);

}



.order-status .data i {

    font-size: 22px;

    color: var(--brand);

}

.order-status:hover .data i{

 color: #000;

}

.order-status span.count {

    color: #0661cb;

    font-size: 18px;

    font-weight: 700;

    margin: 0;

    color: var(--brand);

}



.order-status .data h6 {

    margin: 0;

    font-weight: 600;

    font-size: 15px;

    color: #595959;

    margin-bottom: 0;

}





.order_stats_header h4 {

    font-weight: 700;

    color: #000;

    line-height: 30px;

    font-size: 18px;

}



.order_stats_header h4 i {

    font-size: 15px;

    margin-right: 10px;

}





.business-analytics .order-stats__content i {

    font-size: 23px;

}

/*end dashboard*/

td.text-green{

  color:green;

}

td.text-red{

  color:red;

}



.login-logo a{display: inline-block;padding: 10px 15px;background: #000;border: 2px solid #fff;border-radius: 10px;}

.login-logo img{max-width: 150px;}





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

.container-fluid {padding: 0 15px 25px 15px;}

.business-analytics .card-box{padding: 20px 10px 20px;}

.business-analytics .card-box h5{font-size: 12px;}

.business-analytics .card-box h2{font-size: 17px;}

.order-status{padding: 8px;}



.daes-sec-sec .card-body{overflow-y: auto;}



.form-group.row.width-50{width: 100%;}



.row.form-layout{margin: 0;width: auto !important;display: inherit;}

.pro-content{padding: 10px;}





.table-responsive .dataTables_wrapper .dataTables_info{width: 100%; text-align: center;}

.table-responsive .dataTables_wrapper .dataTables_paginate{width: 100%; text-align: center;}



.mini-sidebar .sidebar-nav > ul > li.nav-subtitle .nav-subtitle-span{width: auto ;}



.form-group .select2-container,.note-editor.note-frame{width: 100% !important;}



.page-titles{margin-bottom: 10px;}

.page-wrapper{padding-bottom: 60px;}



.applied_drivers_list .driver_apply-left h4{font-size: 15px;}

.applied_drivers_list .driver-rate{font-size: 15px;}



.mini-sidebar .web_version{width: 100%;}



}



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

.order_edit-genrl .form-group.row.gendetail-col .control-label > strong{width: 100%;margin-bottom: 10px;}    

.order_edit-genrl .form-group.row.gendetail-col .control-label > span{margin-left: 0;}

.address p strong{width: 100%;margin-bottom: 10px;}

.address p > span{width: 100%}

.profile-card::before,.profile-card::after{width: 70px; height: 70px;}



.address p{display: table;width: 100%;}



.p-card {padding: 10px;}



.user-list-table .table tr td{width: auto;display: block;}

.user-list-table .table tr td:last-child {padding-left: 0px !important;}



.avatar-100 {height: 70px;min-width: 70px;width: 70px;}

.profile-card h3{font-size: 18px;}



.card-header .nav li.nav-item{width: 100%; text-align: center;}



.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter{width: 100%;}



.applied_drivers_list{padding: 10px 10px;}

.applied_drivers_list .user-img {margin-right: 10px;}

.applied_drivers_list .user-img img{width: 40px !important;height: 40px;}



.ride-status-info ul li span.status{width: auto;}

.ride-status-info ul li span.info{display: block; margin-top: 10px;}

.ride-status-info{padding: 10px;}



table.dataTable > tbody > tr.child span.dtr-title{width: 40%;float: left;}

table.dataTable > tbody > tr.child span.dtr-data{white-space: normal;word-break: break-all;margin-left: 35%;display: block;}



}



.dataTables_processing.panel-default {text-align: center;font-size: 20px;font-weight: 600;letter-spacing: 4px;padding-top: 20%;

z-index: 8;align-items: center;/*display: flex;justify-content: center;*/left: 0;right: 0;margin: auto;width: auto; top: 0;}

.dataTables_processing {position: absolute;text-align: center;left: 0;right: 0;bottom: 0;top: 0;background: rgba(0, 0, 0, 00.5);z-index: 1;color: #fff;padding-top: 20%;}



.dataTables_processing.panel-default::after {content: "";background: url(../images/loading-loader.gif) no-repeat center;background-size: auto;width: 110px;height: 73px;display: inline-block;position: absolute;top: 15%;left: 0;right: 0;margin: auto;background-size: 100%;}



.required-field::before {content: "*";color: red;}


 


#overlay {position: fixed;display: none;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.5); z-index: 10;cursor: pointer;}

#overlay img{position: absolute; top: 50%; left: 50%; font-size: 50px; color: white; width:40px; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);}

i.fa-info {

    background: #000;

    width: 25px;

    height: 25px;

    color: #fff !important;

    border-radius: 50px;

    text-align: center;

    padding: 5px;

    font-size: 15px;

}

.switch-box .switch {

    float: right;

}



.switch-box .switch-box-inner {

    padding: 5px 15px;

    background: #ecf3fb;

    border-radius: 4px;

}



.switch-box .switch-box-inner label.control-label {

    margin-bottom: 0 !important;

}



.switch-box .switch {

    display: inline-block;

    width: 40px;

    height: 21px;

    cursor: pointer;

    margin: auto;

    position: relative;

    vertical-align: middle;

    margin-left: 15px;

}



.switch-box .switch input {

    opacity: 0;

    height: 100%;

    z-index: 5;

    position: absolute;

    left: 0;

    right: 0;

    width: 100%;

    top: 0;

    bottom: 0;

    cursor: pointer;

}



.switch-box .switch .slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #ccc;

    -webkit-transition: .4s;

    transition: .4s;

    border-radius: 34px;

    width: auto;

    height: auto;

}



.switch-box .switch .slider:before {

    position: absolute;

    content: "";

    height: 19px;

    width: 19px;

    left: 1px;

    bottom: 1px;

    background-color: white;

    -webkit-transition: .4s;

    transition: .4s;

    border-radius: 50%;

}



.switch-box .switch input:checked+.slider {

    background-color: #26B246;

}



.switch-box .switch input:checked+.slider::before {

    -webkit-transform: translateX(19px);

    -ms-transform: translateX(19px);

    transform: translateX(19px);

}

/*Custom Background CSS*/

.bg--1 {

    background: rgba(0, 150, 255, 0.15) !important;

}

.bg--2 {

    background: rgba(0, 170, 109, 0.15) !important;

}

.bg--3 {

    background: rgba(248, 59, 59, 0.1) !important;

}

.bg--4 {

    background: rgba(255, 245, 0, 0.2) !important;

}

.bg--5 {

    background: rgba(248, 146, 59, 0.1) !important;

}

.bg--6 {

    background: rgba(248, 59, 218, 0.11) !important;

}

.bg--7 {

    background: rgba(255, 46, 83, 0.15) !important;

}

.bg--8 {

    background: rgba(0, 170, 17, 0.15) !important;

}

.bg--9 {

    background: rgba(59, 191, 248, 0.1) !important;

}

.bg--10 {

    background: rgba(0, 170, 109, 0.15) !important;

}

.bg--11 {

    background: rgba(248, 146, 59, 0.1) !important;

}

.bg--12 {

    background: rgba(247, 25, 25, 0.11) !important;

}

.bg--13 {

    background: #cceaff !important;

}

.bg--14 {

    background: rgba(255, 0, 0, 0.2) !important;

}

.bg--15 {

    background: rgba(230, 230, 250, 0.8) !important;

}

.bg--16 {

    background: rgba(135, 206, 235, 0.8) !important;

}

.bg--17 {

    background: rgba(152, 251, 152, 0.8) !important;

}

.bg--18 {

    background: rgba(255, 218, 185, 0.8) !important;

}

.bg--19 {

    background: rgba(240, 128, 128, 0.8) !important;

}

.bg--20 {

    background: rgba(255, 215, 0, 0.8) !important;

}

.bg--21 {

    background: rgba(255, 160, 122, 0.8) !important;

}

.bg--22 {

    background: rgba(32, 178, 170, 0.8) !important;

}

.bg--23 {

    background: rgba(224, 255, 255, 0.8) !important;

}

.bg--24 {

    background: rgba(189, 252, 201, 0.8) !important;

}

.bg--25 {

    background: rgba(132, 112, 255, 0.8) !important;

}

.bg--25 {

    background: rgba(132, 112, 255, 0.8) !important;

}

/*Subscription Plans CSS*/

.pricing-card-inner {

    border-radius: 16px;

    border: 1px solid #E5E7EB;

    background: #FFF;

    padding: 24px 24px 150px 24px;

    height: 100%;

    background-size: cover !important;

    background-position: center bottom !important;

    background-repeat: no-repeat !important;

    transition: all ease 0.5s;

}



.pricing-card-inner:hover {

    background: #000 url(../images/commission_base-bg.png) no-repeat center bottom;

    border: 1px solid transparent;

    color: #fff !important;

    transition: all ease 0.5s;

}



.pricing-card.pricing-card-commission .pricing-card-inner:hover {

    background:#000 url(../images/commission_base-bg.png) no-repeat center bottom;

    transition: all ease 0.5s;

}



.pricing-card.Basic .pricing-card-inner:hover {

    background: #000 url(../images/basic-bg.png) no-repeat center bottom;

    transition: all ease 0.5s;

}



.pricing-card.Standard .pricing-card-inner:hover {

    background: #000 url(../images/standard-bg.png) no-repeat center bottom;

    transition: all ease 0.5s;

}



.pricing-card.Pro .pricing-card-inner:hover {

    background: #000 url(../images/pro-bg.png) no-repeat center bottom;

    transition: all ease 0.5s;

}



.pricing-card-btm {

    margin-top: 50px

}



.pricing-card-btm {

    position: absolute;

    left: 40px;

    right: 40px;

    bottom: 30px;

}



.pricing-card-btm .btn {

    width: 100%;

    text-align: center;

    background: #E5E7EB;

    font-size: 16px;

    color: #6B7280;

    padding: 12px 24px;

    border-color: #E5E7EB

}



.pricing-card-btm .btn:hover {

    background: #FF6839;

    border-color: #FF6839;

    color: #fff

}



.pricing-card-content ul {

    padding: 0;

    margin: 0;

    list-style-type: none;

}



.pricing-card-content ul li {

    padding-bottom: 15px

}



.pricing-card-content ul li span.mdi-check {

    color: #26B246;

    margin-right: 5px

}



.pricing-card-content ul li span.mdi-close {

    color: red;

    margin-right: 5px

}



.pricing-card-inner:hover .pricing-card-btm .btn {

    background: #FF6839;

    border-color: #FF6839;

    color: #fff;

    transition: all ease 0.5s;

}



.pricing-card-inner:hover .pricing-card-btm .btn:hover {

    background: #fff;

    color: #FF6839;

    transition: all ease 0.5s;

}



.pricing-card-inner:hover .text-dark-2 {

    color: #fff !important;

    transition: all ease 0.5s;

}



.pay-method-box {

    border-radius: 16px;

    background: #FFF;

    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);

    flex-wrap: wrap;

    padding: 12px;

    margin-bottom: 15px

}



.pay-method-box .pay-method-icon {

    width: 15%;

}



.pay-method-box .form-check {

    width: 85%;

    padding-left: 10px;

    padding-right: 0px;

    font-size: 16px;

    font-weight: 500;

    color: #0C111C;

    justify-content: space-between;

    display: flex;

    align-items: center;

}



.pay-method-box .form-check [type="radio"]+label::before {

    border: 2px solid #4B5563;

    width: 24px;

    height: 24px;

    margin: 0

}



.pay-method-box .form-check [type="radio"]+label::after {

    left: 4px;

    top: 4px;

    border: 2px solid #fff;

    margin: 0;

    background: #FF6839;

}



.pay-method-box .form-check [type="radio"]:checked+label::before {

    background: #FF6839;

    border-color: #FF6839

}



/*End - Subscription Plans CSS*/

/**************************new admin css*************************/

.font-semibold {

    font-weight: 600;

}



.top-title-section {

    font-family: "Urbanist", serif;

}



.text-dark-2 {

    color: #0C111C;

}



.top-title-section .select-box .form-control,

.top-title-section .select-box #daterange {

    background: #F3F4F6;

    border-radius: 20px;

    padding: 8px 18px;

    font-size: 14px;

    color: #6B7280;

    height: auto !important;

}



.top-title-section .select-box #daterange {

    line-height: 2;

}



.select-box .select2.select2-container {

    position: static;

    min-width: 150px;

    width: auto !important;

}



.select-box .select2-container--default .select2-selection--single {

    background: #F3F4F6;

    border-radius: 20px;

    padding: 8px 18px;

    font-size: 14px;

    color: #6B7280;

    position: relative;

    height: auto;

    border-color: #F3F4F6;

}



.select-box .select2-container--default .select2-selection--single .select2-selection__rendered {

    max-width: inherit;

    padding-left: 0;

}



.select-box .select2-container--default .select2-selection--single .select2-selection__arrow {

    height: 40px;

    right: 15px;

}



.select-box .select2-container .select2-selection--single .select2-selection__rendered>span {

    padding-right: 0;

    padding-left: 10px;

}



.select2-container--default .select2-results__option--highlighted[aria-selected] {

    background-color: #0f0f0f !important;

}



.select2-container--open .select2-dropdown {}



.top-title-section .top-title-left h3 {

    font-family: Urbanist;

    font-size: 22px;

    font-style: normal;

    font-weight: 600;

    line-height: 30px;

    color: #0C111C;

}



.top-title-section .top-title-left .icon img {

    max-width: 32px

}



.top-title-section .top-title-left .counter {

    color: #FF6839;

    font-size: 16px;

    display: flex;

    width: 32px;

    padding: 4px;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 4px;

    border-radius: 50px;

    background: #FFEBE5;

}



.top-filter .sis-card-head-select-box{
    justify-content: end;
    gap: 10px;
    white-space: nowrap;
}
.top-filter .sis-card-head-select-box .head-select-box{
gap: 10px;
  display: flex;
  align-items: center;  
}

.top-filter .head-select-box .head-select-box-inner{
 justify-content: end;
    gap: 10px;
color: #000;
}

.top-filter .sis-card-head-select-box .form-control{
  max-width: 150px;
  color: #000;
  display: inline-block;
  width: auto;
  height: 40px !important;
  background: #fff;
}

.daes-sec-sec .table tr td > img{
    border-radius: 50px;
    object-fit: cover;
}

.daes-sec-sec .table{
    border: 1px solid #E5E7EB;
    width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
}

.daes-sec-sec .table td,.daes-sec-sec .table th{
    border-right: 1px solid #E5E7EB;
}

.daes-sec-sec .table tr> td:last-child,.daes-sec-sec .table tr> th:last-child{
    border-right: 0;
}

.table tr td.redirecttopage .top-driver-name{
    display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.chart-legend .legend-item{
  
  text-align: center;
  

}
.chart-legend .legend-item .legend-text{
    color: #374151;
    font-size: 12px;
}
.chart-legend .legend-item .legend-text span{
    font-size: 24px;
    font-weight: 700;
    display: block;
    color: #000;
}

.card.border {
    border-radius: 12px;
    border: 1px solid #E5E7EB !important;
    box-shadow: none;
}

.card.border .card-header {
    border-radius: 12px 12px 0 0;
    background: none;
    padding: 1rem 1rem 1rem 1rem
}
.daes-sec-sec .card.border .card-header a{
  color: #EAB308;
}
.daes-sec-sec .card.border .card-header a:hover{
    color: #000;
}
.daes-sec-sec .table td a {
  text-decoration: underline;
}
.card.border .card-body{
  padding: 1rem 1rem 1rem 1rem
}
.card.card-box-with-icon {
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    margin-bottom: 15px;
    box-shadow: 0 2px 120px 0 rgba(0, 0, 0, 0.08);
    height: calc(100% - 10px);
    cursor: pointer;    
}
.card-body.card-box-with-icon {
    padding: 24px;
}
.card-box-with-content .card-left-title{
  font-size: 16px;
}
.card-box-with-content h3{
  font-size: 24px;
}

.card-box-with-content .up-down-list {
  font-size: 13px;
  margin: 0;
}

.up-down-list i{
  font-size: 12px;
  padding-right: 5px;
}
.card-no-border .card-box-with-icon.card:hover{
    box-shadow: 0 2px 120px 0 rgba(0, 0, 0, 0.08);
}
.card.card-box-with-icon .box-icon img {
    width: 48px;
    height: 48px;
    object-fit: cover;
}
.table-list {
    font-family: Urbanist;
}
.card-header-title h3 {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
}
.card-header-title p {
    color: #6B7280
}
.card-header-search {
    position: relative;
}

.card-header-search input {

    background: #F9FAFB;

    border-radius: 20px;

    padding: 12px 25px;

    font-size: 14px;

    color: #6B7280;

    height: auto !important;

    border: 0px;

}



.card-header-search img {

    position: absolute;

    right: 20px;

    top: 0;

    bottom: 0;

    margin: auto;

}



.card-header-right .select-box .form-control {

    background: #F3F4F6;

    border-radius: 20px;

    padding: 12px 18px;

    font-size: 14px;

    color: #6B7280;

    height: auto !important;

}



.rounded-full {

    border-radius: 50px

}



.card-header-right .btn {

    padding: 8px 20px;

}



.table-responsive .dataTables_wrapper .dataTables_filter input {

    background: #F3F4F6 url(../images/search_icon.png) no-repeat right 10px center;

    border-radius: 20px;

    padding: 12px 25px;

    font-size: 14px;

    color: #6B7280;

    height: auto !important;

    border: 0px;

}



.table-responsive .dataTables_wrapper .dataTables_filter .dt-buttons {

    float: none;

    margin-left: 15px

}



.table-responsive .dataTables_wrapper .dataTables_filter .dt-buttons .dt-button {

    border-radius: 120px;

    background: #F3F4F6;

    color: #0C111C;

    font-size: 14px;

    border: 0;

    padding: 12px 35px

}



.table-responsive .dataTables_wrapper .dataTables_filter .dt-buttons .dt-button i.mdi {

    font-size: 18px;

    margin-right: 10px

}



.table-responsive .dataTables_wrapper .dataTables_filter .dt-buttons .dt-button.buttons-html5 {

    padding: 12px 15px

}



.table-responsive .dataTables_wrapper .dataTables_filter .dt-buttons .dt-button-collection {

    width: auto;

}

/* ===== Export "Export as" button + dropdown ===== */
/* Neutral (non-theme) button so it doesn't follow the dynamic color. */
.table-responsive .dataTables_wrapper .dataTables_filter .dt-buttons .dt-button.buttons-collection,
.dataTables_filter .dt-buttons .dt-button.buttons-collection {
    background: #f3f4f6 !important;
    background-image: none !important;
    color: #0C111C !important;
    border: 1px solid #e2e6ef !important;
    box-shadow: none !important;
}
.dataTables_filter .dt-buttons .dt-button.buttons-collection:hover,
.dataTables_filter .dt-buttons .dt-button.buttons-collection:focus,
.dataTables_filter .dt-buttons .dt-button.buttons-collection.active,
.dataTables_filter .dt-buttons .dt-button.buttons-collection:active {
    background: #e6e9f0 !important;
    color: #0C111C !important;
    border-color: #d3d9e6 !important;
}
.dataTables_filter .dt-buttons .dt-button.buttons-collection i.mdi { color: inherit !important; }

/* The dropdown popover — force a solid WHITE box above everything (was rendering
   red/transparent behind the header). Body-scoped + !important to beat any base rule. */
body div.dt-button-collection,
body div.dt-button-collection.dropdown-menu {
    z-index: 3000 !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #e6e9f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(16,24,40,.18) !important;
    padding: 6px !important;
    min-width: 190px !important;
    color: #3b4060 !important;
    /* the export button sits at the right edge — open the menu right-aligned so it
       doesn't run off the right side and get clipped by the table's overflow */
    left: auto !important;
    right: 0 !important;
}
body div.dt-button-collection .dt-button,
body div.dt-button-collection button.dt-button,
body div.dt-button-collection a.dt-button {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: #fff !important;
    background-image: none !important;
    color: #3b4060 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 7px !important;
    padding: 10px 14px !important;
    margin: 2px 0 !important;
    font-size: 14px !important;
}
body div.dt-button-collection .dt-button span,
body div.dt-button-collection button.dt-button span { color: inherit !important; }
body div.dt-button-collection .dt-button:hover,
body div.dt-button-collection button.dt-button:hover {
    background: #f2f4f8 !important;
    color: #1a1f2e !important;
}
body div.dt-button-collection .dt-button i.mdi { color: #5a6179 !important; margin-right: 8px; }
/* keep the click-catcher (closes dropdown on outside click) but make it invisible
   and sit just below the dropdown, so it no longer dims/covers the page */
div.dt-button-background {
    background: transparent !important;
    opacity: 0 !important;
    z-index: 2999 !important;
}



.table.dataTable tr,

.table.dataTable tr td {

    border-top: 0 !important;

    border-color: #E5E7EB;
    position: relative;


}

table.dataTable.nowrap td .mdi.mdi-check{
  
  position: absolute;
  right: 10px;
  width: 20px;
  height: 20px;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 10px;
  border-radius: 5px;

}


table.dataTable.nowrap td.action-btn .mdi.mdi-check,table.dataTable.nowrap td .action-btn .mdi.mdi-check{
 position: static;
 width: auto;
 display: inherit;
 color: #fff;
 background: none;
}

table.dataTable.display>tbody>tr.odd>.sorting_1,

table.dataTable.order-column.stripe>tbody>tr.odd>.sorting_1 {

    box-shadow: none !important

}



table.dataTable.display tbody tr:hover>.sorting_1,

table.dataTable.order-column.hover tbody tr:hover>.sorting_1 {

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

    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.01) !important

}





.table tr td>span.action-btn a,

table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-data .action-btn a {

    font-size: 18px;

}



/*.table tr td > span.action-btn a i,table.dataTable > tbody > tr.child ul.dtr-details > li .dtr-data .action-btn a i{background: #0C111C;

  padding: 3px 5px;

  border-radius: 50px;

  width: 30px;

  height: 30px;

  display: inline-block;

  text-align: center;}*/



.table tr td>span.action-btn a i.mdi-food,

table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-data .action-btn a i.mdi-food {

    color: #097969

}



.table tr td>span.action-btn a i.mdi-content-copy,

table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-data .action-btn a i.mdi-content-copy {

    color: #26B246;

}



.table tr td>span.action-btn a i.mdi-eye,

table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-data .action-btn a i.mdi-eye {

    color: #B700BD

}



.table tr td>span.action-btn a i.mdi-lead-pencil,

table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-data .action-btn a i.mdi-lead-pencil {

    color: #1FCAFF

}



.table tr td>span.action-btn a i.mdi-delete,

table.dataTable>tbody>tr.child ul.dtr-details>li .dtr-data .action-btn a i.mdi-delete {

    color: #FF3840

}
a i.mdi-wechat {

    color: #007bff
}
.unread-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    line-height: 1;
    z-index: 1;
}

i.mdi-lead-pencil {

    color: #1FCAFF

}

i.mdi-delete {

    color: #FF3840

}

.action-btn a {

    font-size: 18px;

}

.table-responsive .dataTables_wrapper .dataTables_length select {

    padding: 7px 15px;

    border-radius: 50px;

    background: #F3F4F6;

    border-color: #F3F4F6;

}





.card-header-tab ul.nav-tab {

    list-style-type: none;

    padding: 0;

    margin: 0;

    display: flex;

    align-items: center;

}



.card-header-tab ul.nav-tab li {

    margin-left: 5px

}



.card-header-tab ul.nav-tab li a {

    color: #6B7280;

    font-size: 14px;

    font-style: normal;

    font-weight: 500;

    padding: 10px 12px;

    border-radius: 50px

}



.card-header-tab ul.nav-tab li.active a,

.card-header-tab ul.nav-tab li a:hover {

    background: #FF6839;

    color: #fff

}



.card-box-with-icon .card-body .background-img {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 76px;

    height: 73px;

    text-align: right;

    justify-content: center;

    align-items: center;

    display: flex;

    opacity: 0.2;

}



.card-box-with-icon .card-body .background-img img {

    width: 100%

}



.edit-form-group {

    margin-bottom: 15px

}



.edit-form-group label.control-label {

    color: #0C111C;

    font-size: 14px;

    font-weight: 500;

}



.edit-form-group .form-control {

    border-radius: 16px;

    background: #F9FAFB;

    padding: 16px;

    font-size: 16px;

    font-weight: 400;

    color: #6B7280;

    border: 0;

}



.edit-form-group select.form-control {

    height: 56px !important;

}



.edit-form-group.btm-btn .btn {

    padding: 8px 25px;

}



.edit-form-group.btm-btn .btn.btn-default {

    background: #F3F4F6;

    color: #0C111C;

}



.box-shadow-0 {

    box-shadow: none !important;

}



.edit-form-group .form-check {

    padding-left: 0

}



.edit-form-group .form-check label {

    margin-right: 10px;

    align-items: center;

    padding-left: 35px;

    display: flex;

}



.edit-form-group .form-check [type="checkbox"]+label::before {

    border-top: 2px solid transparent;

    border-left: 2px solid transparent;

    border-right: 2px solid #4B5563;

    border-bottom: 2px solid #4B5563;

    width: 8px;

    height: 14px;

    -webkit-transform: rotate(40deg);

    -ms-transform: rotate(40deg);

    transform: rotate(40deg);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    -webkit-transform-origin: 100% 100%;

    -ms-transform-origin: 100% 100%;

    transform-origin: 100% 100%;

    top: 3px;

    left: 2px;

    z-index: 1

}



.edit-form-group .form-check [type="checkbox"]:checked+label::before {

    border-top: 2px solid transparent;

    border-left: 2px solid transparent;

    border-right: 2px solid #fff;

    border-bottom: 2px solid #fff;

}



.edit-form-group .form-check [type="checkbox"]:not(.filled-in)+label::after {

    width: 24px;

    height: 24px;

    border: 2px solid #4B5563;

    border-radius: 50px

}



.edit-form-group .form-check [type="checkbox"]:not(.filled-in)+label::after {

    border: 2px solid #4B5563;

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

}



.edit-form-group .form-check [type="radio"]+label::before {

    border: 2px solid #4B5563;

    width: 24px;

    height: 24px;

    margin: 0

}



.edit-form-group .form-check [type="radio"]+label::after {

    left: 4px;

    top: 4px;

    border: 2px solid #fff;

    margin: 0

}



.edit-form-group .form-check [type="radio"]:checked+label::before {

    background: #FF6839;

    border-color: #FF6839

}



.pricing-card-inner {

    border-radius: 16px;

    border: 1px solid #E5E7EB;

    background: #FFF;

    padding: 24px 24px 150px 24px;

    height: 100%

}



.pricing-card-btm {

    margin-top: 50px

}



.pricing-card-btm {

    position: absolute;

    left: 40px;

    right: 40px;

    bottom: 30px;

}



.pricing-card-btm .btn {

    width: 100%;

    text-align: center;

    background: #E5E7EB;

    font-size: 16px;

    color: #6B7280;

    padding: 12px 24px;

    border-color: #E5E7EB

}



.pricing-card-btm .btn:hover {

    background: #FF6839;

    border-color: #FF6839;

    color: #fff

}



.pricing-card-content ul {

    padding: 0;

    margin: 0;

    list-style-type: none;

}



.pricing-card-content ul li {

    padding-bottom: 10px

}



.pricing-card-content ul li span {

    color: #26B246;

    margin-right: 5px

}



.pricing-card-icon img {

    width: 48px;

    height: 48px;

    object-fit: cover;

}





.top-title-section .breadcrumb {

    padding: 0;

    background: none;

}



.top-title-section .breadcrumb-item+.breadcrumb-item::before {

    color: #0C111C;

}



.sis-img img {

    width: 120px;

    height: 120px;

    object-fit: cover;

    border-radius: 16px

}



.info-list label {

    margin-bottom: 0;

    min-width: 100px;

}



.sis-review {

    border-radius: 100px;

    background: #FFCB39;

    color: #665013;

    font-weight: 600;

    padding: 3px 10px;

    margin-left: 10px;

    line-height: 1;

    display: flex;

    align-items: center;

}



.sis-review i {

    margin-left: 2px;

    font-size: 18px;

}



.map-box {

    border-radius: 16px;

    overflow: hidden;

}



.green {

    color: #26B246

}



.red {

    color: #FF3840

}



.restaurant_info-section p {

    font-size: 14px

}



.restaurant_gallery ul {

    margin: 0 -10px;

    display: flex;

    flex-wrap: wrap;

}



.restaurant_gallery ul li {

    list-style-type: none;

    width: 25%;

    padding: 0 10px

}



.restaurant_gallery ul li img {

    width: 120px;

    height: 120px;

    object-fit: cover;

    border-radius: 16px

}



.restaurant_service ul {

    list-style-type: none;

    padding: 0;

    margin: 0;

    column-count: 3;

}



.restaurant_service ul li {

    color: #1F2937;

    font-weight: 500;

    font-size: 14px;

    padding-bottom: 16px

}



.restaurant_service ul li span {

    font-size: 22px

}



/**************************new admin css*************************/



/*******************

sidebar navigation

******************/

.scroll-sidebar {

    padding-bottom: 60px;

    padding-top: 0px;

}



.collapse.in {

    display: block;

}



.sidebar-search{padding: 10px 15px;}

.sidebar-search input{padding: 8px 12px 8px 48px;

  border-radius: 120px;

  font-size: 14px;

  font-style: normal;

  font-weight: 500;

  line-height: 22px;

  background: #1F2937 url(../images/search_icon.png) no-repeat left 15px center;

  width: 100%;

  border: 0;

  color: #6B7280;

}

.mini-sidebar .sidebar-search{width: 60px;padding: 10px 10px;}

.mini-sidebar .sidebar-search:hover{width: 250px;}

.mini-sidebar .sidebar-search input{background-position: left 10px center;padding: 8px 8px 8px 32px}

.sidebar-nav {

    background: #0C111C;

    padding: 0px;

}



.sidebar-nav ul {

    margin: 0px;

    padding: 0px;

    transition: all ease 0.5s;

}



.sidebar-nav ul li {

    list-style: none;

}



.sidebar-nav ul li a {

    color: #D1D5DB;

    padding: 8px 35px 8px 15px;

    display: block;

    font-size: 14px;

    font-weight: 600;

/*    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;*/

}



/*.mini-sidebar .sidebar-nav ul li a{color: #fff !important;}*/

.sidebar-nav ul li a.active, .sidebar-nav ul li a:hover {

    color: #FF683A;

}



.sidebar-nav ul li a.active i, .sidebar-nav ul li a:hover i {

    color: #FF683A;

}



.sidebar-nav ul li a.active {

    font-weight: 500;

    color: #263238;

}



.sidebar-nav ul li ul {

    padding-left: 0px;

/*    background: rgba(255, 255, 255, 0.09);*/

}



.sidebar-nav ul li ul li a {

    padding: 7px 25px 7px 60px;

    position: relative;

    border-right: 3px solid transparent;

}

.sidebar-nav ul li ul li.active a,.sidebar-nav ul li ul li a:hover{border-color: #ff6839;}

.sidebar-nav ul li ul li a::before {

 content: "";

  width: 3px;

  height: 3px;

  border: 2px solid;

  display: inline-block;

  margin-right: 10px;

  border-radius: 50px;

  position: absolute;

  left: 40px;

  top: 14px;

  margin: 0;

}



.sidebar-nav ul li ul li a::after {

    content: "";

    width: 4px;

    height: 4px;

    border: 1px solid;

    display: inline-block;

    vertical-align: middle;

    margin-right: 10px;

    border-radius: 50px;

    position: absolute;

    left: 25px;

    top: 17px;

    display: none;

}



.sidebar-nav ul li ul ul {

    padding-left: 15px;

}



.sidebar-nav ul li.nav-small-cap {

    font-size: 12px;

    margin-bottom: 0px;

    padding: 14px 14px 14px 20px;

    color: #fff;

    font-weight: 500;

}



.sidebar-nav ul li.nav-devider {

    height: 1px;

    background: #fff;

    display: block;

    margin: 0px 0;

}



.sidebar-nav > ul > li > a {

    border-right: 3px solid transparent;

}



.sidebar-nav > ul > li > a i {

    width: 27px;

    font-size: 19px;

    display: inline-block;

    vertical-align: middle;

    color: #D1D5DB;

}



.mini-sidebar .sidebar-nav #sidebarnav > li:hover a i {

    color: var(--brand);

}



.sidebar-nav > ul > li > a .label {

    float: right;

    margin-top: 6px;

}



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

    font-weight: 400;

    /*background: #242933;*/

    color: #26c6da;

}



.sidebar-nav ul li a.active, .sidebar-nav ul li a:hover {

    color: #26c6da;

}



.sidebar-nav > ul > li {

    margin-bottom: 1px;

}



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

    color: #FF683A;

    font-weight: 500;

    border-right: 3px solid #FF683A;

}



.sidebar-nav > ul > li.active > a i {

    color: #FF683A;

}



.sidebar-nav > ul > li.nav-subtitle {

    padding: 0 0px 0 0px;

    margin-bottom: 5px;

    margin-top: 15px;

}



.sidebar-nav > ul > li.nav-subtitle .nav-subtitle-span {

padding: 5px 20px;

  font-weight: 700;

  font-size: 12px;

  text-transform: uppercase;

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

  line-height: 1;

  display: block;

  text-align: left;

  color: #4B5563;

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

}



.sidebar-nav > ul > li.nav-separater hr {

    border-top: 1px dashed rgba(255, 255, 255, .5);

    margin: 9px 0;

}



.mini-sidebar .sidebar-nav > ul > li.nav-subtitle .nav-subtitle-span {

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

    width: 60px;

    font-size: 11px;

}



.sidebar-nav .has-arrow {

    position: relative;

}



.sidebar-nav .has-arrow::after {

    position: absolute;

    content: '';

    width: 8px;

    height: 8px;

    border-width: 2px 0 0 2px;

    border-style: solid;

    border-color: #D1D5DB;

    right: 1em;

    -webkit-transform: rotate(135deg) translate(0, -50%);

    -ms-transform: rotate(135deg) translate(0, -50%);

    -o-transform: rotate(135deg) translate(0, -50%);

    transform: rotate(135deg) translate(0, -50%);

    -webkit-transform-origin: top;

    -ms-transform-origin: top;

    -o-transform-origin: top;

    transform-origin: top;

    top: 47%;

    -webkit-transition: all .3s ease-out;

    -o-transition: all .3s ease-out;

    transition: all .3s ease-out;

}



.sidebar-nav .active > .has-arrow::after,

.sidebar-nav li > .has-arrow.active::after,

.sidebar-nav .has-arrow[aria-expanded="true"]::after {

    -webkit-transform: rotate(-135deg) translate(0, -50%);

    -ms-transform: rotate(-135deg) translate(0, -50%);

    -o-transform: rotate(-135deg) translate(0, -50%);

    top: 45%;

    width: 7px;

    transform: rotate(-135deg) translate(0, -50%);

}




/****************

When click on sidebar toggler and also for tablet

*****************/

.leaflet-control-container .leaflet-routing-container.leaflet-control{
    display: none;
}
.people-list .chat-list{
border-bottom: 2px solid #fff;
  height: 77vh;
  overflow-y: auto;
  scrollbar-width: thin;
  min-height: 300px;
  overflow-x: hidden;
}
.chat-app .people-list {
    width: 350px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 20px 10px 20px 10px;
    z-index: 2
}

.chat-app .chat {
    margin-left: 350px;
    border-left: 1px solid #eaeaea
}

.people-list {
    -moz-transition: .5s;
    -o-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s
}

.people-list .chat-list li {
    padding: 10px 15px;
    list-style: none;
    border-radius: 3px;
    position: relative;
    -o-transition: all .25s ease;
    -moz-transition: all .25s ease;
    transition: all .25s ease;
    border-bottom: 1px solid #d5dfea
}

.people-list .chat-list li:hover {
    cursor: pointer;
        -webkit-transform: translateY(-4px) scale(1.02);
    -moz-transform: translateY(-4px) scale(1.02);
    -ms-transform: translateY(-4px) scale(1.02);
    -o-transform: translateY(-4px) scale(1.02);
    transform: translateY(-4px) scale(1.02);
    -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
}

.people-list .chat-list li.active {
    background: #efefef;
    border-color: var(--brand);
}

.people-list .chat-list li .name {
    font-size: 15px;
    color: #000;
}

.people-list .chat-list img {
    width: 45px;
    border-radius: 50%;
    height: 45px;
  object-fit: cover;

}

.people-list .input-group{
    border-radius: 50px;
  border: 1px solid #ccc;
}
.people-list .input-group .input-group-prepend .input-group-text{
    border-radius: 50px;
    width: 45px;
  height: 45px;
  border: 0;
  background: none;
  text-align: center;
  display: flex;
  justify-content: center;

}

.people-list .input-group .form-control{
  border-radius: 50px;
  border: 0;
  background: none;
  box-shadow: none;
}

.people-list img {
    float: left;
    border-radius: 50%
}

.people-list .about {
    float: left;
    padding-left: 10px
}
.people-list .about .badge {
  position: absolute;
  right: 15px;
}
.people-list .status {
    color: #475f7b;
    font-size: 13px
}

.people-list .status .text-muted{
    color: #475f7b !important;
}

.people-list .status i{
 font-size: 10px;
}

.chat-send-col .chat-send-input {
    width: calc(100% - 63px);
}

.chat-send-col .chat-send-input label {
    position: absolute;
    right: 10px;
    top: 7px;
    cursor: pointer;
}

.chat-send-col .chat-send-input .form-control {
    height: 40px;
    padding-right: 40px;
}

.chat-app .chat {
    border: 1px solid #eaeaea;
}

.card.chat-app {
    max-width: 100%;
    margin: 15px auto 15px;
    border: 1px solid #eaeaea;

}

.chat .chat-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e6e6e6
}

.chat .chat-header img {
    float: left;
    border-radius: 40px;
    width: 40px;
    height: 40px;
  object-fit: cover;

}

.chat .chat-header .chat-about {
    float: left;
    padding-left: 10px
}

.chat .chat-header .chat-about h6,.chat .chat-header .chat-about h5{
  font-weight: 600;
  font-size: 16px;
  color: #000;
}
.chat .chat-history {
    padding: 20px;
    border-bottom: 2px solid #fff;
    height: 67vh;
    overflow-y: auto;
    scrollbar-width: thin;
    min-height: 300px;
}

.chat .chat-history::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

.chat .chat-history::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

.chat .chat-history::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #555;
}


.chat .chat-history ul {
    padding: 0
}

.chat .chat-history ul li {
    list-style: none;
    margin-bottom: 15px
}

.chat .chat-history ul li:last-child {
    margin-bottom: 0px
}

.chat .chat-history .message-data {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.chat .chat-history .message-data img {
    border-radius: 40px;
    width: 40px
}

.chat .chat-history .message-data-time {
    color: #434651;
    padding-left: 6px
}

.chat .chat-history .message {
    color: #000;
    padding:10px 25px 20px 15px;
    line-height: 26px;
    font-size: 14px;
    border-radius: 12px 12px 12px 0px;
    display: inline-block;
    position: relative;
    font-weight: 500;
    box-shadow: -2px 3px 5px 0px rgba(0,0,0,0.2);
    position: relative;
}
.chat .chat-history .message .message-data-time{
  position: absolute;
  font-size: 10px;
  white-space: nowrap;
  bottom: 0px;
  right: 5px;
  padding-left: 0;
}

.chat .chat-history .message-data .message-data-date{
    color: #434651;
}

.chat .chat-history .other-message{
    border-radius: 12px 12px 0px 12px;
    box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.2);
}

.chat .chat-history .message:after {
    bottom: 100%;
    left: 7%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #fff;
    border-width: 10px;
    margin-left: -10px;
    display: none;
}

.chat .chat-history .my-message {
    background: #f4f4f4;
    color: #000;
}

.chat .chat-history .my-message:after {
    bottom: 100%;
    left: 30px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #e3e3e3;
    border-width: 10px;
    margin-left: -10px
}

.chat .chat-history .other-message {
    background: #b9fd82;
    text-align: right
}

.chat .chat-history .other-message:after {
    border-bottom-color: #ffe3d9;
    left: auto;
    right: 10px
}

.chat .chat-message {
    padding: 20px 20px;
    border-top:1px solid rgba(0, 0, 0, 0.07) ;
}

.chat .chat-message .input-group .input-group-text,.chat .chat-message .input-group .form-control{
    border: 0;
  background: none;
  box-shadow: none;
}
.chat .chat-message .input-group .form-control{
    border-left: 1px solid rgba(0, 0, 0, 0.07);
}
.chat .chat-message .input-group .btn.btn-primary{
  border-radius: 50px;
  width: 40px;
  height: 40px;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  font-size: 13px;
}
.chat-count-message{
    position: relative;
    display: inline-block;
}
.online,
.offline,
.me {
    margin-right: 2px;
    font-size: 8px;
    vertical-align: middle
}

.online {
    color: #86c541
}

.offline {
    color: #ff4e4e
}

.me {
    color: #1d8ecd
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0
}

.chat .chat-history ul li.date-separator{
 position: relative;
}

.chat .chat-history ul li.date-separator:after{
    content: "";
    width: 100%;
    background: #d5dfea;
    height: 1px;
    display: block;
    bottom: 11px;
    position: relative;
}
.chat .chat-history ul li.date-separator .badge{
    position: relative;
    z-index: 1;
    padding: 5px 15px;
    border-radius: 5px;
    background: #f2f2f2;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    font-size: 12px;
}

.check-sign{
  float: right;
  margin-top: 0px;
  margin-left: 2px;
  padding-right: 10px;
}
.check-sign .fa{font-size: 9px;}

.check-sign .fa:before{content: "";
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #606060;
  border-bottom: 2px solid #606060;
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  width: 6px;
  height: 12px;
  display: inline-block;}

.check-sign .fa.fa-check-double:before{
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
}
.check-sign .fa.fa-check-double:after{
  content: "";
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  width: 8px;
  height: 12px;
  display: inline-block;
  margin-left: -3px;
}

.check-sign .fa.fa-check-double{color: #02a843;}

.serice-tab-wrap .card-header{
    position: relative;
}
.serice-tab-wrap .card-header .btn{
  position: absolute;
  right: 10px;
  top: 4px;
}
.serice-tab-wrap .card-header .nav{
 background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px 5px 0px 0px;
  padding: 0;
  margin-bottom: -2px !important;
  z-index: 0;
  position: relative;
  text-align: center;
  justify-content: center;
  display: flex;
  border-bottom: 0;
}
.serice-tab-wrap .card-header .nav-tabs .nav-link{
  border: 0;
  color: #000;
  border-radius: 0;
}
.serice-tab-wrap .card-header .nav-tabs .nav-link.active{background: #e8e8e8;color: #000;}
.serice-tab-wrap .tab-content > .tab-pane{
  border: 1px solid #ccc; 
  border-top:0px;padding: 15px;
  border-radius: 0px 0px 5px 5px;
  background: #e8e8e8;
}



.map-markers ul{
  list-style-type: none;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.map-markers ul li{
  list-style-type: none;
  width: 38px;
  padding: 5px;
  position: relative;
  height: 38px;

}
.map-markers ul li [type="radio"]{
    left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid #ccc;
  opacity: 1;
  background:#ffffff3d;
  appearance: none;
  border-radius: 50px;
  cursor: pointer;
}  

.map-markers ul li [type="radio"]:checked{
  border: 1px solid #000;
  background: transparent;
}

.map-markers ul li img{
  max-width: 100%;
}

.or-line {
  text-align: center;
  position: relative;
  margin-top: 20px;
}

.or-line::before {
  position: absolute;
  height: 1px;
  background: #ccc;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  content: "";
}

.or-line span {
  display: inline-block;
  background: #fff;
  font-size: 20px;
  color: #000;
  z-index: 1;
  position: relative;
  padding: 5px 10px;
}

.add-vehicle-modal .modal-dialog{
    max-width: 800px
}
.control-input-box{
    margin-bottom: 15px;
}
.show_ac_non_ac_div , .show_km_charges_div{
    margin-bottom:10px; 
}
.show_ac_non_ac_div > .row, .show_km_charges_div > .row{
    padding: 15px 0;
    border-radius: 10px;
    border: 1px solid #ccc;    
    margin-left: 0; margin-right: 0;

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


@media only screen and (max-width: 767px) {
    .chat-app .people-list {
        height: auto;
        width: 100%;
        overflow-x: auto;
        background: #fff;
        left: -400px;
        position: static;
        /*display: none*/
    }
    .chat-app .people-list.open {
        left: 0
    }
    .chat-app .chat {
        margin: 0
    }
    .chat-app .chat .chat-header {
        border-radius: 0.55rem 0.55rem 0 0
    }
    .chat-app .chat-history {
        height: 300px;
        overflow-x: auto
    }


}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .chat-app .chat-list {
        height: 650px;
        overflow-x: auto
    }

    .chat-app .chat-history {
        height: 600px;
        overflow-x: auto
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .chat-app .chat-list {
        height: 480px;
        overflow-x: auto
    }

    .chat-app .chat-history {
        height: calc(100vh - 350px);
        overflow-x: auto
    }
}



@media (min-width: 768px) {

    .mini-sidebar .sidebar-nav #sidebarnav li {
        position: relative;
    }
    .mini-sidebar .sidebar-nav #sidebarnav > li > ul {
        position: absolute;
        left: 60px;
        top: 45px;
        width: 200px;
        z-index: 1001;
        background: #313336;
        display: none;
        padding-left: 1px;
    }
    .mini-sidebar .sidebar-nav #sidebarnav > li:last-child > ul{
        position: relative;
        top: 0;
    }
    .mini-sidebar .user-profile .profile-img {
        width: 50px;
    }
    .mini-sidebar .user-profile .profile-img .setpos {
        top: -35px;
    }
    .mini-sidebar.fix-sidebar .left-sidebar {
        position: absolute;
    }
    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul {
        height: auto !important;
        overflow: auto;
    }
    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul,
    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > ul.collapse {
        display: block;
    }
    .mini-sidebar .sidebar-nav #sidebarnav > li > a.has-arrow:after {
        display: none;
    }
    .mini-sidebar .left-sidebar {
        width: 60px;
    }
    .mini-sidebar .user-profile {
        padding-bottom: 15px;
        width: 60px;
        margin-bottom: 7px;
    }
    .mini-sidebar .user-profile .profile-img {
        padding: 15px 0 0 0;
        margin: 0px 0 0 6px;
    }
    .mini-sidebar .user-profile .profile-img:before {
        top: 15px;
    }
    .mini-sidebar .scroll-sidebar {
        padding-bottom: 0px;
        position: absolute;
        overflow-x: hidden !important;
    }
    .mini-sidebar .hide-menu,
    .mini-sidebar .nav-small-cap,
    .mini-sidebar .sidebar-footer,
    .mini-sidebar .user-profile .profile-text,
    .mini-sidebar > .label {
        display: none;
    }
    .mini-sidebar .nav-devider {
        width: 60px;
    }
    .mini-sidebar .sidebar-nav {
        background: transparent;
    }
    .mini-sidebar .sidebar-nav #sidebarnav > li > a {
        padding: 9px 18px;
        width: 60px;
    }
    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
        width: 260px;
        background: #313336;
    }
    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a .hide-menu {
        display: inline;
    }
    .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a .label {
        display: none;
    }

}

@media (max-width: 767px) {
    .mini-sidebar .left-sidebar {
        position: fixed;
    }
    .mini-sidebar .left-sidebar,
    .mini-sidebar .sidebar-footer {
        left: -265px;
    }
    .mini-sidebar.show-sidebar .left-sidebar,
    .mini-sidebar.show-sidebar .sidebar-footer {
        left: 0px;
    }
    .serice-tab-wrap .card-header{
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 5px 5px 0px 0px;
    } 
    .serice-tab-wrap .card-header .btn{
        position: static;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .serice-tab-wrap .card-header .nav{
        border: 0;
    }

    .chart-legend .legend-item .legend-text span{
        font-size: 20px;
    }

}


/* =============================================================
   DASHBOARD — Common Layout & Wrapper
   ============================================================= */

.dash-wrap { padding: 24px 28px 40px; }

/* Dashboard Page Header */
.dash-header { padding: 8px 0 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.dash-header-title { font-size: 22px; font-weight: 700; color: #1e1e2d; margin: 0; }
.dash-header-sub  { font-size: 13px; color: #9ca3af; margin: 3px 0 0; }


/* =============================================================
   DASHBOARD — Filter Bar
   ============================================================= */

.dash-filter {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.dash-filter-label { font-size: 13px; font-weight: 600; color: #6b7280; margin: 0; white-space: nowrap; }
.dash-filter select,
.dash-filter input[type="date"] {
    height: 38px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13px;
    color: #374151;
    background: #f9fafb;
    padding: 0 12px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    max-width: 155px;
}
.dash-filter select:focus,
.dash-filter input[type="date"]:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
    background: #fff;
}
.dash-btn-apply {
    height: 38px;
    padding: 0 22px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
    white-space: nowrap;
}
.dash-btn-apply:hover { opacity: .9; transform: translateY(-1px); }
.dash-btn-clear {
    height: 38px;
    padding: 0 18px;
    background: #f3f4f6;
    color: #6b7280;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background .2s, color .2s;
    white-space: nowrap;
}
.dash-btn-clear:hover { background: #e5e7eb; color: #374151; text-decoration: none; }


/* =============================================================
   DASHBOARD — Stat / KPI Cards
   ============================================================= */

.dash-stat {
    border-radius: 16px;
    padding: 22px 22px 18px;
    margin-bottom: 24px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
    color: #fff;
}
.dash-stat:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.18); }

/* Row-1 gradient variants */
.dash-stat-rides   { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); box-shadow: 0 8px 24px rgba(99,102,241,.35); }
.dash-stat-users   { background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); box-shadow: 0 8px 24px rgba(245,158,11,.35); }
.dash-stat-drivers { background: linear-gradient(135deg, #10b981 0%, #059669 100%); box-shadow: 0 8px 24px rgba(16,185,129,.35); }

/* Row-2 gradient variants */
.dash-stat-earnings   { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); box-shadow: 0 8px 24px rgba(59,130,246,.35); }
.dash-stat-completed  { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); box-shadow: 0 8px 24px rgba(20,184,166,.35); }
.dash-stat-cancelled  { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); box-shadow: 0 8px 24px rgba(239,68,68,.35); }

.dash-stat-bg-icon {
    position: absolute;
    right: -12px;
    bottom: -12px;
    width: 90px;
    height: 90px;
    opacity: .15;
}
.dash-stat-bg-icon img { width: 100%; height: 100%; object-fit: contain; }

.dash-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255,255,255,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.dash-stat-icon img { width: 26px; height: 26px; object-fit: contain; filter: brightness(0) invert(1); }
.dash-stat-icon i   { font-size: 20px; color: #fff; }

.dash-stat-label  { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .82; margin-bottom: 6px; }
.dash-stat-value  { font-size: 32px; font-weight: 800; line-height: 1; margin-bottom: 10px; }
.dash-stat-change { font-size: 12px; font-weight: 600; opacity: .9; margin: 0; }
.dash-stat-change i { margin-right: 4px; }


/* =============================================================
   DASHBOARD — Chart Cards
   ============================================================= */

.dash-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    overflow: hidden;
}
.dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #f3f4f6;
}
.dash-card-head h5 { font-size: 15px; font-weight: 700; color: #111827; margin: 0; }
.dash-card-head .dash-pill-tag {
    font-size: 11px;
    font-weight: 600;
    color: #6366f1;
    background: #ede9fe;
    border-radius: 20px;
    padding: 3px 10px;
}
.dash-card-body { padding: 18px 22px 22px; }

/* Chart legend */
.dash-legend { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.dash-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #6b7280; }
.dash-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }


/* =============================================================
   DASHBOARD — Data Tables (Recent Rides & Top Drivers)
   ============================================================= */

.dash-table-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    overflow: hidden;
}
.dash-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #f3f4f6;
}
.dash-table-head h5 { font-size: 15px; font-weight: 700; color: #111827; margin: 0; }
.dash-table-head .dash-view-all {
    font-size: 12px;
    font-weight: 700;
    color: #6366f1;
    text-decoration: none;
    background: #ede9fe;
    border-radius: 20px;
    padding: 4px 12px;
    transition: background .2s;
}
.dash-table-head .dash-view-all:hover { background: #ddd6fe; text-decoration: none; }

.dash-table-card table { margin: 0; width: 100%; border-collapse: collapse; }
.dash-table-card thead th {
    background: #f9fafb;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #9ca3af;
    padding: 10px 18px;
    border-bottom: 1px solid #f0f0f0;
    border-top: none;
    white-space: nowrap;
}
.dash-table-card tbody td {
    padding: 13px 18px;
    font-size: 13px;
    color: #374151;
    border-bottom: 1px solid #f9fafb;
    vertical-align: middle;
}
.dash-table-card tbody tr:last-child td { border-bottom: none; }
.dash-table-card tbody tr:hover td    { background: #fafafa; }
.dash-table-card tbody a              { color: #6366f1; font-weight: 600; }

/* Ride status badges */
.dash-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.dash-badge-completed { background: #d1fae5; color: #065f46; }
.dash-badge-cancelled { background: #fee2e2; color: #991b1b; }
.dash-badge-ongoing   { background: #dbeafe; color: #1e40af; }
.dash-badge-placed    { background: #fef3c7; color: #92400e; }
.dash-badge-default   { background: #f3f4f6; color: #6b7280; }

/* Driver avatar in table */
.dash-driver-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    flex-shrink: 0;
}
.dash-driver-cell { display: flex; align-items: center; gap: 10px; }
.dash-driver-cell span { font-weight: 600; color: #111827; }

/* Ride ID chip */
.dash-ride-id {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    font-family: monospace;
    background: #f3f4f6;
    color: #374151;
    padding: 3px 8px;
    border-radius: 6px;
    text-decoration: none;
}
.dash-ride-id:hover { background: #ede9fe; color: #6366f1; text-decoration: none; }

/* Rides percent badge on stat cards */
.dash-stat-change.green,
.dash-stat-change.red { color: rgba(255,255,255,.95); }

/* Location text truncation in rides table */
.dash-loc { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* ============================================================= */
/* SIDEBAR — Bordered Card Style                                  */
/* ============================================================= */

/* Kill legacy orange right-border from base CSS on ALL states */
.sidebar-nav > ul > li > a,
.sidebar-nav ul li > a,
.sidebar-nav ul li ul li > a,
.sidebar-nav ul li ul li.active a,
.sidebar-nav ul li ul li a:hover {
    border-right: none !important;
}

/* Sidebar shell */
.left-sidebar {
    background: #0C111C !important;
    border-right: none !important;
    box-shadow: 6px 0 24px rgba(0,0,0,.5) !important;
}

/* Smooth scroll */
.scroll-sidebar { scroll-behavior: smooth !important; }

/* ── Search ─────────────────────────────────────────── */
.sidebar-search { padding: 16px 14px 8px !important; }
.sidebar-search input {
    width: 100% !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,.65) !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all .2s !important;
}
.sidebar-search input::placeholder { color: rgba(255,255,255,.22) !important; }
.sidebar-search input:focus {
    border-color: rgba(var(--brand-rgb),.5) !important;
    background: rgba(var(--brand-rgb),.04) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.07) !important;
}

/* ── Nav wrapper ─────────────────────────────────────── */
.sidebar-nav { background: transparent !important; padding: 0 !important; }
.sidebar-nav ul { padding: 0 10px !important; margin: 0 !important; }

/* ── Section labels ──────────────────────────────────── */
.sidebar-nav > ul > li.nav-subtitle {
    margin: 20px 0 5px !important;
    padding: 0 6px !important;
    border: none !important;
    background: transparent !important;
}
.sidebar-nav > ul > li.nav-subtitle .nav-subtitle-span {
    color: rgba(255,255,255,.25) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    width: auto !important;
    display: block !important;
    margin-right: -10px !important;
}
.sidebar-nav > ul > li.nav-subtitle::before,
.sidebar-nav > ul > li.nav-subtitle::after { display: none !important; }

/* ── List items ──────────────────────────────────────── */
.sidebar-nav ul li { list-style: none !important; margin-bottom: 3px !important; }

/* Top-level link base */
.sidebar-nav > ul > li > a {
    color: rgba(255,255,255,.9) !important;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: background .2s, color .2s, border-color .2s !important;
    background: transparent !important;
    border: 1.5px solid transparent !important;
    position: relative !important;
}

/* ── Icon Badge ──────────────────────────────────────── */
.sidebar-nav > ul > li > a i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 17px !important;
    transition: background .2s, color .2s, box-shadow .2s !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* ── Hover ───────────────────────────────────────────── */
.sidebar-nav > ul > li > a:hover {
    background: rgba(255,255,255,.05) !important;
    color: rgba(255,255,255,.85) !important;
    border-color: rgba(255,255,255,.1) !important;
}
.sidebar-nav > ul > li > a:hover i {
    background: rgba(255,255,255,.11) !important;
    color: rgba(255,255,255,.7) !important;
}

/* ── ACTIVE — full green border on all 4 sides ───────── */
.sidebar-nav > ul > li.active > a,
.sidebar-nav > ul > li > a.active {
    background: transparent !important;
    color: #fff !important;
    font-weight: 600 !important;
    border: 1.5px solid rgba(var(--brand-rgb),.55) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.sidebar-nav > ul > li.active > a i,
.sidebar-nav > ul > li > a.active i {
    background: var(--brand) !important;
    color: #0C111C !important;
    box-shadow: 0 3px 14px rgba(var(--brand-rgb),.45) !important;
}

/* ── Expand arrow ────────────────────────────────────── */
.sidebar-nav .has-arrow::after {
    border-color: rgba(255,255,255,.22) !important;
    right: 12px !important;
    width: 7px !important;
    height: 7px !important;
    transition: all .22s ease !important;
}
.sidebar-nav .has-arrow[aria-expanded="true"]::after,
.sidebar-nav .active > .has-arrow::after,
.sidebar-nav li > .has-arrow.active::after {
    border-color: var(--brand) !important;
}

/* ── Sub-menu container ──────────────────────────────── */
.sidebar-nav ul li > ul {
    padding: 4px 0 6px 0 !important;
    background: rgba(0,0,0,.18) !important;
    border-radius: 0 0 10px 10px !important;
    margin: -4px 1px 4px 1px !important;
    border: 1.5px solid rgba(var(--brand-rgb),.3) !important;
    border-top: none !important;
}

/* Sub-menu links */
.sidebar-nav ul li ul li > a {
    padding: 7px 12px 7px 18px !important;
    font-size: 12.5px !important;
    color: rgba(255,255,255,.42) !important;
    border-radius: 7px !important;
    display: flex !important;
    align-items: center !important;
    font-weight: 400 !important;
    border: none !important;
    transition: color .18s, background .18s !important;
}
.sidebar-nav ul li ul li a::before {
    content: "" !important;
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.2) !important;
    display: inline-block !important;
    margin-right: 10px !important;
    transition: background .18s, transform .18s !important;
    border: none !important;
    position: static !important;
    flex-shrink: 0 !important;
}
.sidebar-nav ul li ul li a::after { display: none !important; }

.sidebar-nav ul li ul li a:hover {
    color: rgba(255,255,255,.78) !important;
    background: rgba(255,255,255,.05) !important;
}
.sidebar-nav ul li ul li a:hover::before { background: rgba(var(--brand-rgb),.75) !important; }

.sidebar-nav ul li ul li.active > a,
.sidebar-nav ul li ul li > a.active {
    color: var(--brand) !important;
    background: transparent !important;
    font-weight: 500 !important;
    border: none !important;
}
.sidebar-nav ul li ul li.active > a::before,
.sidebar-nav ul li ul li > a.active::before { background: var(--brand) !important; }

/* ── Version footer ──────────────────────────────────── */
.web_version {
    color: rgba(255,255,255,.9) !important;
    font-size: 11px !important;
    text-align: center !important;
    padding: 10px 16px 28px !important;
    margin: 0 !important;
}

/* ── Scrollbar ───────────────────────────────────────── */
.scroll-sidebar::-webkit-scrollbar { width: 3px !important; }
.scroll-sidebar::-webkit-scrollbar-track { background: transparent !important; }
.scroll-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.08) !important;
    border-radius: 4px !important;
}
.scroll-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(var(--brand-rgb),.35) !important; }

/* ── Mini Sidebar (collapsed) ──────────────────────────────────── */

/* Hide section labels, search, footer */
.mini-sidebar .sidebar-search,
.mini-sidebar .sidebar-nav > ul > li.nav-subtitle,
.mini-sidebar .web_version { display: none !important; }

/* ul: no padding → li spans full 60px → no gap to submenu */
.mini-sidebar .sidebar-nav ul { padding: 0 !important; }
.mini-sidebar .sidebar-nav #sidebarnav > li { position: relative !important; }

/* Tooltip + submenu handled by #mini-hover-panel (position:fixed via JS) */
#mini-hover-panel {
    position: fixed;
    left: 64px;
    min-width: 150px;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    background: #1e2a3d;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 10px;
    box-shadow: 4px 6px 22px rgba(0,0,0,.55);
    z-index: 99999;
    display: none;
    padding: 5px;
}
#mini-hover-panel .mhp-label {
    padding: 7px 12px 6px;
    color: rgba(255,255,255,.9);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
#mini-hover-panel .mhp-label.has-sub {
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 3px;
}
#mini-hover-panel .mhp-link {
    display: block;
    padding: 7px 12px;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    border-radius: 7px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
#mini-hover-panel .mhp-link:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}

/* ── Default: icon only, centered in 60px ── */
.mini-sidebar .sidebar-nav > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 1.5px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    position: relative !important;
    overflow: visible !important;
    gap: 0 !important;
    transition: background .18s, border-color .18s !important;
}

/* Icon — plain glyph, clearly visible */
.mini-sidebar .sidebar-nav > ul > li > a i {
    font-size: 20px !important;
    color: rgba(255,255,255,.9) !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    display: inline-block !important;
    line-height: 1 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    transition: color .18s !important;
}

/* Label span: always hidden in mini mode (panel shows label via JS) */
.mini-sidebar .sidebar-nav > ul > li > a .hide-menu { display: none !important; }

/* ── Hover: highlight icon ── */
.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.12) !important;
}
.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a i {
    color: var(--brand) !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ── Active: green border + green icon ── */
.mini-sidebar .sidebar-nav > ul > li.active > a,
.mini-sidebar .sidebar-nav > ul > li > a.active {
    border: 1.5px solid rgba(var(--brand-rgb),.6) !important;
    background: transparent !important;
}
.mini-sidebar .sidebar-nav > ul > li.active > a i,
.mini-sidebar .sidebar-nav > ul > li > a.active i { color: var(--brand-ink) !important; background: var(--brand) !important; }

/* Collapse submenus in mini mode (panel handles them) */
.mini-sidebar .sidebar-nav #sidebarnav > li > ul { display: none !important; }

/* ============================================================= */
/* END SIDEBAR                                                    */
/* ============================================================= */

/* ============================================================= */
/* LISTING PAGE — Modern Table UI                                 */
/* ============================================================= */

/* Page title bar */
.page-title-bar {
    background: #fff;
    border-bottom: 1px solid #eef0f4;
    padding: 20px 30px;
    margin-bottom: 0;
}
.page-title-bar .ptb-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.page-title-bar .ptb-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.page-title-bar .ptb-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.page-title-bar .ptb-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.page-title-bar h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1f2e;
    margin: 0 0 3px;
    line-height: 1.2;
}
.page-title-bar .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 13px;
}
.page-title-bar .breadcrumb-item a { color: var(--brand); text-decoration: none; }
.page-title-bar .breadcrumb-item.active { color: #8a93a8; }
.page-title-bar .breadcrumb-item + .breadcrumb-item::before { color: #c5cad6; }
.page-title-bar .ptb-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    background: var(--brand);
    color: #0f1a0a;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    margin-left: 4px;
}

/* Create button */
.btn-page-create {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--brand);
    color: #0C111C;
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 10px;
    border: none;
    text-decoration: none;
    transition: background .18s, box-shadow .18s;
    box-shadow: 0 2px 10px rgba(var(--brand-rgb),.28);
    white-space: nowrap;
}
.btn-page-create:hover {
    background: var(--brand-strong);
    color: #0C111C;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(var(--brand-rgb),.38);
}
.btn-page-create i { font-size: 16px; }

/* Listing table card */
.listing-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #eef0f4;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    overflow: hidden;
    margin: 24px 0;
}
.listing-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #eef0f4;
}
.listing-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1f2e;
    margin: 0 0 3px;
}
.listing-card-subtitle {
    font-size: 13px;
    color: #8a93a8;
    margin: 0;
}

/* Delete-all button inside card header */
.listing-card-header .delete-all-wrap label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #e05454;
    font-weight: 500;
    margin: 0;
}
.listing-card-header .delete-all-wrap label i { font-size: 15px; }

/* Table */
.listing-card .table-responsive { margin: 0; overflow-x: auto; }
/* keep toolbar/footer pinned to the left while a wide table scrolls horizontally */
.listing-card .dt-toolbar,
.listing-card .dt-footer { position: sticky; left: 0; }
/* The table cells use position:relative, so they paint over the sticky toolbar's
   stacking context — which traps the Export dropdown behind the rows. Lift the
   toolbar just above the cells (z-index 5) so the dropdown shows on top — but keep
   it BELOW the loading overlay (#overlay z-index 10) so it dims normally on load. */
.listing-card .dt-toolbar { z-index: 5 !important; }
.listing-card table.dataTable {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 0 !important;
}
.listing-card table thead th {
    background: #f8f9fc;
    border-top: none !important;
    border-bottom: 2px solid #eef0f4 !important;
    color: #5a6179;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 12px 16px !important;
    white-space: nowrap;
}
.listing-card table tbody tr {
    border-bottom: 1px solid #f2f4f8;
    transition: background .14s;
}
.listing-card table tbody tr:last-child { border-bottom: none; }
.listing-card table tbody tr:hover { background: #fafbff; }
.listing-card table tbody td {
    padding: 13px 16px !important;
    font-size: 14px;
    color: #3b4060;
    vertical-align: middle !important;
    border: none !important;
}
.listing-card table tbody td a:not(.action-icon) {
    color: #3b4060;
    font-weight: 500;
    text-decoration: none;
}
.listing-card table tbody td a:not(.action-icon):hover { color: var(--brand); }

/* Action buttons — bordered circles (icon-agnostic: every icon styled) */
/* NOTE: .action-btn is sometimes the <td> itself and sometimes an inner <span>.
   We must NOT set display:flex on it (that breaks <td> table-cell layout and
   stacks icons vertically). Keep it inline and let the <a> items flow inline. */
.listing-card .action-btn { white-space: nowrap; vertical-align: middle !important; }
.listing-card .action-btn > div { display: contents; } /* payout wraps its links in a div */
.listing-card .action-btn a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1.5px solid #d8dde8 !important;
    background: #fff !important;
    text-decoration: none !important;
    transition: all .15s ease !important;
    font-size: 16px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 3px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    position: relative;
}
.listing-card .action-btn a > i { font-size: 16px !important; color: #5a6179 !important; }

/* BLUE — view / edit / file */
.listing-card .action-btn a:has(i.mdi-eye),
.listing-card .action-btn a:has(i.mdi-lead-pencil),
.listing-card .action-btn a:has(i.mdi-pencil),
.listing-card .action-btn a:has(i.mdi-file-pdf-box),
.listing-card .action-btn a:has(i.mdi-file) { border-color: #bfe2f7 !important; }
.listing-card .action-btn a:has(i.mdi-eye) > i,
.listing-card .action-btn a:has(i.mdi-lead-pencil) > i,
.listing-card .action-btn a:has(i.mdi-pencil) > i,
.listing-card .action-btn a:has(i.mdi-file-pdf-box) > i,
.listing-card .action-btn a:has(i.mdi-file) > i { color: #3b9de0 !important; }
.listing-card .action-btn a:has(i.mdi-eye):hover,
.listing-card .action-btn a:has(i.mdi-lead-pencil):hover,
.listing-card .action-btn a:has(i.mdi-pencil):hover,
.listing-card .action-btn a:has(i.mdi-file-pdf-box):hover,
.listing-card .action-btn a:has(i.mdi-file):hover {
    background: #3b9de0 !important; border-color: #3b9de0 !important;
    box-shadow: 0 3px 10px rgba(59,157,224,.32) !important;
}
.listing-card .action-btn a:has(i.mdi-eye):hover > i,
.listing-card .action-btn a:has(i.mdi-lead-pencil):hover > i,
.listing-card .action-btn a:has(i.mdi-pencil):hover > i,
.listing-card .action-btn a:has(i.mdi-file-pdf-box):hover > i,
.listing-card .action-btn a:has(i.mdi-file):hover > i { color: #fff !important; }

/* RED — delete / reject(close) */
.listing-card .action-btn a.delete-btn,
.listing-card .action-btn a:has(i.mdi-delete),
.listing-card .action-btn a:has(i.mdi-close) { border-color: #f6c9c9 !important; }
.listing-card .action-btn a.delete-btn > i,
.listing-card .action-btn a:has(i.mdi-delete) > i,
.listing-card .action-btn a:has(i.mdi-close) > i { color: #e05454 !important; }
.listing-card .action-btn a.delete-btn:hover,
.listing-card .action-btn a:has(i.mdi-delete):hover,
.listing-card .action-btn a:has(i.mdi-close):hover {
    background: #e05454 !important; border-color: #e05454 !important;
    box-shadow: 0 3px 10px rgba(224,84,84,.32) !important;
}
.listing-card .action-btn a.delete-btn:hover > i,
.listing-card .action-btn a:has(i.mdi-delete):hover > i,
.listing-card .action-btn a:has(i.mdi-close):hover > i { color: #fff !important; }

/* GREEN — approve (check) */
.listing-card .action-btn a:has(i.mdi-check) { border-color: #bfe6a3 !important; }
.listing-card .action-btn a:has(i.mdi-check) > i { color: var(--brand) !important; }
.listing-card .action-btn a:has(i.mdi-check):hover {
    background: var(--brand) !important; border-color: var(--brand) !important;
    box-shadow: 0 3px 10px rgba(86,184,0,.32) !important;
}
.listing-card .action-btn a:has(i.mdi-check):hover > i { color: #fff !important; }

/* TEAL — chat (wechat) */
.listing-card .action-btn a:has(i.mdi-wechat) { border-color: #b9e4ea !important; }
.listing-card .action-btn a:has(i.mdi-wechat) > i { color: #1aacc0 !important; }
.listing-card .action-btn a:has(i.mdi-wechat):hover {
    background: #1aacc0 !important; border-color: #1aacc0 !important;
    box-shadow: 0 3px 10px rgba(26,172,192,.32) !important;
}
.listing-card .action-btn a:has(i.mdi-wechat):hover > i { color: #fff !important; }
/* unread count badge stays on top */
.listing-card .action-btn a .unread-count { z-index: 2; }

/* ── Search + Export inline in toolbar ── */
.listing-card .dt-toolbar .dataTables_filter {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    float: none !important;
    margin: 0 !important;
}
.listing-card .dt-toolbar .dataTables_filter label {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.listing-card .dt-toolbar .dt-buttons { margin: 0 !important; float: none !important; }
/* Active sort arrows & current page → follow the theme (primary) color.
   (The export button itself is styled in the bulletproof block earlier.) */
.listing-card table thead .sorting_asc:after,
.listing-card table thead .sorting_desc:after { color: var(--brand) !important; }
.listing-card .dataTables_paginate .paginate_button.current,
.listing-card .dataTables_paginate .paginate_button.current:hover,
.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand) !important; border-color: var(--brand) !important; color: var(--brand-ink) !important;
}
/* Login page button → theme color */
.login-register .btn-primary,
.login-register .btn.btn-dark,
.login-box .btn-primary,
.login-box button[type="submit"] {
    background: var(--brand) !important; border-color: var(--brand) !important; color: var(--brand-ink) !important;
}

/* ── Custom checkboxes (select-all + row select) ── */
/* Base theme pushes native checkbox off-screen (left:-9999px;opacity:0) and
   uses the label as the visual box. We override that to show a real custom box. */
/* Match select checkboxes by identity (.is_open rows, #is_active header) so
   pages that don't wrap them in td.delete-all still get the green design. */
.listing-card .th-delete-wrap input[type="checkbox"],
.listing-card tbody td.delete-all input[type="checkbox"],
.listing-card input.is_open,
.listing-card #is_active {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    border: 1.5px solid #cbd2e0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    cursor: pointer !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    transition: background .15s, border-color .15s !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}
.listing-card .th-delete-wrap input[type="checkbox"]:hover,
.listing-card tbody td.delete-all input[type="checkbox"]:hover,
.listing-card input.is_open:hover,
.listing-card #is_active:hover {
    border-color: var(--brand) !important;
}
.listing-card .th-delete-wrap input[type="checkbox"]:checked,
.listing-card tbody td.delete-all input[type="checkbox"]:checked,
.listing-card input.is_open:checked,
.listing-card #is_active:checked {
    background: var(--brand) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%230C111C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E") no-repeat center center !important;
    border-color: var(--brand) !important;
}

/* Hide the empty theme labels next to checkboxes */
.listing-card .th-delete-wrap label,
.listing-card tbody td.delete-all label,
.listing-card input.is_open + label,
.listing-card #is_active + label {
    display: none !important;
}

/* Delete-all header cell */
.listing-card .th-delete-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.listing-card .th-delete-wrap .do_not_delete {
    color: #aab1c2;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: color .15s;
}
.listing-card .th-delete-wrap .do_not_delete:hover { color: #e05454; text-decoration: none; }
.listing-card thead th.delete-all {
    width: 70px;
    vertical-align: middle !important;
    text-align: left !important;
    padding-left: 22px !important;
}

/* Row checkbox cell — left-aligned to line up with header checkbox column */
.listing-card tbody td.delete-all {
    text-align: left !important;
    vertical-align: middle !important;
    padding-left: 22px !important;
}

/* ── DataTable controls — using dom-injected .dt-toolbar / .dt-footer bars ── */
.listing-card .dataTables_wrapper { margin: 0 !important; padding: 0 !important; }

/* Top toolbar: Show entries (left) + Search (right) */
.listing-card .dt-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 22px !important;
    background: #fafbfc !important;
    border-bottom: 1px solid #eef0f4 !important;
}
.listing-card .dt-toolbar .dataTables_length,
.listing-card .dt-toolbar .dataTables_filter {
    float: none !important;
    margin: 0 !important;
}

/* Show entries */
.listing-card .dt-toolbar .dataTables_length label {
    font-size: 13px !important;
    color: #6b7280 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    font-weight: 500 !important;
}
.listing-card .dt-toolbar .dataTables_length select {
    border: 1px solid #dde0e8 !important;
    border-radius: 8px !important;
    padding: 6px 28px 6px 12px !important;
    font-size: 13px !important;
    color: #3b4060 !important;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 10px center !important;
    outline: none !important;
    cursor: pointer !important;
    height: auto !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Search */
.listing-card .dt-toolbar .dataTables_filter label {
    font-size: 13px !important;
    color: #6b7280 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    font-weight: 500 !important;
}
.listing-card .dt-toolbar .dataTables_filter input {
    border: 1px solid #dde0e8 !important;
    border-radius: 8px !important;
    padding: 8px 14px 8px 36px !important;
    font-size: 13px !important;
    color: #3b4060 !important;
    background: #fff url("../images/search_icon.png") no-repeat left 12px center !important;
    background-size: 14px !important;
    outline: none !important;
    min-width: 240px !important;
    height: auto !important;
    margin: 0 !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.listing-card .dt-toolbar .dataTables_filter input:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.15) !important;
}

/* Bottom footer: info (left) + pagination (right) */
.listing-card .dt-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 22px !important;
    background: #fafbfc !important;
    border-top: 1px solid #eef0f4 !important;
}
.listing-card .dt-footer .dataTables_info {
    font-size: 13px !important;
    color: #8a93a8 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}
.listing-card .dt-footer .dataTables_paginate {
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}
.listing-card .dt-footer .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #5a6179 !important;
    margin: 0 2px !important;
    min-width: 34px;
    text-align: center;
}
.listing-card .dt-footer .dataTables_paginate .paginate_button:hover {
    background: #eef0f4 !important;
    border: 1px solid transparent !important;
    color: #1a1f2e !important;
}
.listing-card .dt-footer .dataTables_paginate .paginate_button.current,
.listing-card .dt-footer .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand) !important;
    border: 1px solid var(--brand) !important;
    color: #0C111C !important;
    font-weight: 700 !important;
}
.listing-card .dt-footer .dataTables_paginate .paginate_button.disabled,
.listing-card .dt-footer .dataTables_paginate .paginate_button.disabled:hover {
    color: #c5cad6 !important;
    background: transparent !important;
    cursor: not-allowed;
}

/* ── Stat cards (rides, transactions, etc.) ── */
.stat-cards-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 24px 0 0;
}
@media (max-width: 991px) { .stat-cards-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .stat-cards-row { grid-template-columns: 1fr; } }
.stat-card {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 4px;
}
.stat-card-info h3 {
    font-size: 26px;
    font-weight: 700;
    color: #1a1f2e;
    margin: 0 0 4px;
    line-height: 1;
}
.stat-card-info p {
    font-size: 13px;
    color: #8a93a8;
    margin: 0;
    font-weight: 500;
}
.stat-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-card-icon img { width: 26px; height: 26px; object-fit: contain; }
.stat-card--blue::before   { background: #3b9de0; }
.stat-card--blue .stat-card-icon   { background: #eaf2ff; }
.stat-card--amber::before  { background: #f5a623; }
.stat-card--amber .stat-card-icon  { background: #fff4e5; }
.stat-card--green::before  { background: var(--brand); }
.stat-card--green .stat-card-icon  { background: #eafbe7; }
.stat-card--purple::before { background: #8b6ef0; }
.stat-card--purple .stat-card-icon { background: #f1ecff; }

/* ── Filter bar inside listing-card header ── */
.listing-card-header { flex-wrap: wrap; gap: 14px; }
.listing-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.listing-filters .select-box { padding: 0 !important; }
.listing-filters select.form-control { min-width: 150px; }

/* select2 single — match the theme */
.listing-filters .select2-container { min-width: 150px; }
.listing-filters .select2-container--default .select2-selection--single {
    height: 38px !important;
    border: 1px solid #dde0e8 !important;
    border-radius: 8px !important;
    background: #fff !important;
}
.listing-filters .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 25px !important;
    color: #3b4060 !important;
    font-size: 13px !important;
    padding-left: 12px !important;
    padding-right: 28px !important;
}
.listing-filters .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 6px !important;
}
.listing-filters .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #8a93a8 !important;
}

/* Date range box */
.listing-filters #daterange {
    border: 1px solid #dde0e8;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: #3b4060;
    cursor: pointer;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-height: 38px;
}
.listing-filters #daterange i { color: #8a93a8; }

/* Export button (DataTables Buttons) inside toolbar */
.listing-card .dt-buttons { display: inline-flex; margin-left: 10px; }
/* only the export button itself (direct child) — NOT the nested dropdown menu items.
   Neutral (non-theme) styling. */
.listing-card .dt-buttons > .btn,
.listing-card .dt-buttons > .dt-button {
    background: #f3f4f6 !important;
    color: #0C111C !important;
    border: 1px solid #e2e6ef !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
}
.listing-card .dt-buttons > .btn:hover,
.listing-card .dt-buttons > .dt-button:hover {
    background: #e6e9f0 !important;
    color: #0C111C !important;
    border-color: #d3d9e6 !important;
}

/* Status-info & tip boxes keep spacing inside card */
.listing-card .ride-status-info,
.listing-card .tip-box { margin: 16px 22px 4px; }

/* ── Row striping: take full control so the sorted column follows the row
   color (DataTables stripes via per-cell box-shadow, and its extra highlight
   on .sorting_1 made that column look uniform). We disable DT's box-shadow
   striping and apply our own background-color striping on the <tr>. ── */
.listing-card table.dataTable.display tbody tr > *,
.listing-card table.dataTable.stripe tbody tr > *,
.listing-card table.dataTable tbody td.sorting_1 {
    box-shadow: none !important;
    background: transparent !important;
}
.listing-card table.dataTable tbody tr.odd { background-color: #fbfcfd !important; }
.listing-card table.dataTable tbody tr.even { background-color: #ffffff !important; }
.listing-card table.dataTable tbody tr:hover { background-color: #f3f7ff !important; }
/* Highlight the sorted column's header + its up/down arrow in green */
.listing-card table.dataTable thead th.sorting_asc,
.listing-card table.dataTable thead th.sorting_desc { color: var(--brand) !important; }
.listing-card table.dataTable thead th.sorting_asc:after,
.listing-card table.dataTable thead th.sorting_desc:after { color: var(--brand) !important; }

/* ── Long-value cell truncation (e.g. airport address, faq description) ── */
.listing-card .cell-truncate {
    display: inline-block;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.listing-card .cell-truncate-wide { max-width: 620px; }

/* ============================================================= */
/* END LISTING PAGE                                               */
/* ============================================================= */

/* ============================================================= */
/* DETAIL PAGE (ride / intercity show) — consistent card headers  */
/* ============================================================= */
.order_detail .card {
    border: 1px solid #eef0f4 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.04) !important;
    overflow: hidden;
    margin-bottom: 24px;
}
/* Unify every card-header / box-header variant into one consistent style */
.order_detail .card .card-header,
.order_detail .card .box-header {
    padding: 14px 18px !important;
    background: #fafbfc !important;
    border-bottom: 1px solid #eef0f4 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 54px;
}
.order_detail .card .card-header h3,
.order_detail .card .box-header h3,
.order_detail .card .card-header .box-title,
.order_detail .card .box-header .box-title {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1f2e !important;
    line-height: 1.2 !important;
    /* kill the base .box-title gray "chip" look so it matches plain headers */
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
.order_detail .card .card-header .badge,
.order_detail .card .box-header .badge { margin-left: auto !important; }

/* Equal-height columns for every two-column layout row → no stagger / gaps.
   Cards in each column fill the column height (last card grows) so side-by-side
   blocks always align at the bottom and the next row starts cleanly. */
.order_detail .order_detail-top > .row,
.order_detail .ride-map-dredetail,
.order_detail .ride-loct-pricedet {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
}
/* Consistent gap BETWEEN rows (last card in a column has no margin, so the
   spacing must live on the row container) */
.order_detail .ride-map-dredetail,
.order_detail .ride-loct-pricedet { margin-bottom: 24px !important; }
.order_detail .order_detail-top { margin-bottom: 24px !important; }
.order_detail .order_detail-top > .row > [class*="col-"],
.order_detail .ride-map-dredetail > [class*="col-"],
.order_detail .ride-loct-pricedet > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
.order_detail .order_detail-top > .row > [class*="col-"] > .card,
.order_detail .ride-map-dredetail > [class*="col-"] > .card,
.order_detail .ride-loct-pricedet > [class*="col-"] > .card {
    width: 100%;
    flex: 0 0 auto;
    margin-bottom: 24px;
}
/* last card in a column grows to fill remaining height → bottoms line up */
.order_detail .order_detail-top > .row > [class*="col-"] > .card:last-child,
.order_detail .ride-map-dredetail > [class*="col-"] > .card:last-child,
.order_detail .ride-loct-pricedet > [class*="col-"] > .card:last-child {
    flex: 1 1 auto;
    margin-bottom: 0;
}
/* map card nests an inner .box wrapper — let it fill the stretched card */
.order_detail .ride-map-dredetail .card > .box { width: 100%; flex: 1 1 auto; }

/* ── Detail-page embedded tables (driver/owner/user view .card-stretch) —
   match the listing pagination (green active page) instead of base black ── */
.card-stretch .table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    font-size: 13px !important;
    padding: 5px 11px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #5a6179 !important;
    margin: 0 2px !important;
}
.card-stretch .table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #eef0f4 !important;
    border: 1px solid transparent !important;
    color: #1a1f2e !important;
}
.card-stretch .table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.card-stretch .table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand) !important;
    border: 1px solid var(--brand) !important;
    color: #0C111C !important;
    font-weight: 700 !important;
}
.card-stretch .table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.card-stretch .table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #c5cad6 !important;
    background: transparent !important;
}
.card-stretch .dataTables_info { font-size: 13px !important; color: #8a93a8 !important; }

/* ============================================================= */
/* FORM PAGE — create/edit forms (modern look)                    */
/* ============================================================= */
.form-page .card {
    border: 1px solid #eef0f4 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
    overflow: visible;
}
.form-page .card-header { background: #fff !important; border-bottom: 1px solid #eef0f4 !important; padding: 18px 24px !important; }
.form-page .card-body { padding: 24px !important; }
.form-page .error_top { color: #e05454; font-size: 13.5px; margin-bottom: 14px; }

/* ── General fieldset frame (simple forms) — green legend badge, NOT the base
   theme's black `.form-layout-inner fieldset legend { background:#000 }` ── */
.form-page fieldset {
    border: 1px solid #e2e6ef;
    border-radius: 12px;
    padding: 22px 22px 10px;
    margin: 22px 0 24px;
    min-width: 0;
}
.form-page fieldset > legend,
.form-page .form-layout-inner fieldset legend,
.form-page .form-layout fieldset legend {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 0 0 4px !important;
    padding: 5px 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    color: #ffffff !important;
    background: var(--brand) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(var(--brand-rgb), .3) !important;
}

/* ── Multilingual fieldset frame ── */
.form-page .lang-fieldset {
    border: 1px solid #e2e6ef;
    border-radius: 12px;
    padding: 8px 0 10px;
    margin: 22px 0 24px;
    position: relative;
    min-width: 0;
}
/* native legend → the badge sits IN the top border (notch), like the reference,
   instead of floating above and leaving a stray line */
.form-page .lang-fieldset > legend {
    width: auto;
    max-width: none;
    float: none;
    margin: 0 0 0 16px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #0C111C;
    background: var(--brand);
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 8px rgba(var(--brand-rgb),.3);
}
/* Tab bar inside the fieldset */
.form-page .lang-tabs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 4px 16px 0 !important;
    margin: 0 !important;
    /* base theme puts a full 1px #aaa border on every <ul>; kill it, keep only
       the bottom divider under the tabs */
    border: 0 !important;
    border-bottom: 1px solid #eef0f4 !important;
    background: transparent !important;
}
.form-page .lang-tabs .nav-item { margin: 0 !important; }
.form-page .lang-tabs .nav-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 18px !important;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    cursor: pointer;
    border-radius: 8px 8px 0 0 !important;
}
.form-page .lang-tabs .nav-link:hover { color: #1a1f2e !important; background: #f8f9fc !important; }
.form-page .lang-tabs .nav-link.active {
    color: #0C111C !important;
    border-bottom: 2px solid var(--brand) !important;
    background: var(--brand-tint) !important;
}
.form-page .lang-tabs .nav-link .badge {
    background: var(--brand) !important;
    color: #0C111C !important;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 700;
    line-height: 1.4;
}
.form-page .lang-tabs .nav-link .badge:empty { display: none; }
.form-page .lang-fieldset .tab-content { padding: 22px 22px 4px; }
/* fields placed DIRECTLY in the language fieldset (not wrapped in .form-section
   or tab-content) still need horizontal padding so they don't touch the frame */
.form-page .lang-fieldset > .form-group,
.form-page .lang-fieldset > .form-check,
.form-page .lang-fieldset > .form-hidden,
.form-page .lang-fieldset > .row,
.form-page .lang-fieldset > .how_much_div,
.form-page .lang-fieldset > .form-section { padding-left: 22px !important; padding-right: 22px !important; }

/* ── Fields (label above input) ── */
.form-page .form-group { margin-bottom: 20px; }
.form-page .control-label,
.form-page label.control-label,
.form-page label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #3b4060 !important;
    margin-bottom: 7px !important;
    display: block;
    text-align: left !important;
    padding: 0 !important;
}
.form-page .form-control,
.form-page input[type="text"].form-control,
.form-page input[type="number"].form-control,
.form-page input[type="email"].form-control,
.form-page select.form-control,
.form-page textarea.form-control {
    border: 1px solid #dde0e8 !important;
    border-radius: 9px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    color: #1a1f2e !important;
    background: #fff !important;
    height: auto !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
    width: 100%;
}
.form-page .form-control:focus,
.form-page textarea.form-control:focus,
.form-page select.form-control:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.15) !important;
}
.form-page textarea.form-control { min-height: 110px; }
.form-page .form-text, .form-page .text-muted { font-size: 12px !important; color: #8a93a8 !important; margin-top: 6px; }
/* (base theme already adds the red asterisk via .required-field::before — don't double it) */

/* FULL-WIDTH fields: stack label over input and make EVERY field span the form.
   Overrides the old half-width (.width-50) groups and the col-6/col-7 input widths. */
.form-page .form-group.row { display: block !important; margin-left: 0 !important; margin-right: 0 !important; }
.form-page .form-group.row > .control-label,
.form-page .form-group.row > label { width: 100% !important; max-width: 100% !important; flex: none !important; }
.form-page .form-group.row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; }
/* half-width form groups → full width */
.form-page .form-group.width-50,
.form-page .form-group.width-100,
.form-page .width-50 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
/* inputs/selects/textareas with leftover col-* classes → full width */
.form-page .form-control,
.form-page input.form-control,
.form-page select.form-control,
.form-page textarea.form-control { width: 100% !important; max-width: 100% !important; float: none !important; }
/* the base theme centers the form wrapper at max-width:70% (big side gaps) → full width */
.form-page .row.form-layout { max-width: 100% !important; margin: 0 !important; width: 100% !important; }
.form-page .form-layout .form-layout-inner { margin: 0 !important; }

/* ── Status / standalone checkbox + radio option groups (green) ── */
.form-page .form-check {
    display: flex !important; flex-wrap: wrap; align-items: center;
    gap: 8px; margin: 0 0 8px 0; padding: 0; vertical-align: middle;
}
.form-page .form-check > label,
.form-page .form-check label.control-label {
    width: auto !important; max-width: none !important; flex: 0 0 auto !important;
    margin: 0 !important; padding-left: 0 !important; cursor: pointer; font-weight: 500;
}
/* help text under a checkbox/radio drops to its own full-width line (not squeezed right) */
.form-page .form-check > .form-text,
.form-page .form-check > .text-muted {
    flex: 0 0 100% !important; width: 100% !important; margin: 4px 0 0 0 !important;
    font-size: 12.5px; color: #8a90a6 !important;
}
/* a number input that sits beside a radio (Limited → Ex:1000) stays compact */
.form-page .form-check .form-control {
    width: 180px !important; max-width: 180px !important; flex: 0 0 180px !important;
}
/* kill the base materialize checkbox box drawn on the label (we style the real input) */
.form-page .form-check label::before,
.form-page .form-check label::after { display: none !important; content: none !important; }
.form-page .form-check input[type="checkbox"]:not(:checked),
.form-page .form-check input[type="checkbox"]:checked,
.form-page .form-check input[type="checkbox"] {
    -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
    position: static !important; left: auto !important; opacity: 1 !important;
    width: 20px !important; height: 20px !important; min-width: 20px !important;
    border: 1.5px solid #cbd2e0 !important; border-radius: 6px !important; background: #fff !important;
    cursor: pointer !important; margin: 0 !important; display: inline-block !important; vertical-align: middle;
    transition: background .15s, border-color .15s !important;
}
.form-page .form-check input[type="checkbox"]:hover { border-color: var(--brand) !important; }
.form-page .form-check input[type="checkbox"]:checked {
    background: var(--brand) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%230C111C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E") no-repeat center center !important;
    border-color: var(--brand) !important;
}
.form-page .form-check input[type="checkbox"] + label { display: inline !important; }

/* ── Radio buttons inside form-check (base theme hides them off-screen too) ── */
.form-page .form-check input[type="radio"] {
    -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
    position: static !important; left: auto !important; top: auto !important; opacity: 1 !important;
    width: 19px !important; height: 19px !important; min-width: 19px !important;
    border: 1.5px solid #cbd2e0 !important; border-radius: 50% !important; background: #fff !important;
    cursor: pointer !important; margin: 0 !important; padding: 0 !important;
    display: inline-block !important; vertical-align: middle !important; flex: 0 0 auto !important;
    box-shadow: none !important; transition: background .15s, border-color .15s !important;
}
.form-page .form-check input[type="radio"]:hover { border-color: var(--brand) !important; }
.form-page .form-check input[type="radio"]:checked {
    border-color: var(--brand) !important;
    background: radial-gradient(var(--brand) 0 4.5px, #fff 5.5px) !important;
}
.form-page .form-check input[type="radio"] + label { padding-left: 0 !important; display: inline !important; }

/* don't let the global .width-50/.width-100 rule force inline radio-option /
   number-input form-check groups to full width — only top-level field rows are full-width */
.form-page .form-check.width-50,
.form-page .form-check.width-100 { width: auto !important; max-width: none !important; flex: 0 0 auto !important; }
.form-page .d-flex { display: flex !important; align-items: center; gap: 14px; flex-wrap: wrap; }
/* our display:flex/block overrides on .form-check & .form-group.row are strong enough to
   defeat Bootstrap's .d-none — restore it so JS-toggled fields stay hidden until shown */
.form-page .d-none,
.form-page .form-check.d-none,
.form-page .form-group.d-none,
.form-page .d-flex.d-none,
.form-page .form-group.row.d-none { display: none !important; }

/* ── Roles permission checkboxes (.permission / #all_permission) ── */
.form-page input[type="checkbox"].permission,
.form-page input#all_permission {
    -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
    position: static !important; left: auto !important; top: auto !important; opacity: 1 !important;
    width: 19px !important; height: 19px !important; min-width: 19px !important;
    border: 1.5px solid #cbd2e0 !important; border-radius: 5px !important; background: #fff !important;
    cursor: pointer !important; margin: 0 8px 0 0 !important; padding: 0 !important;
    display: inline-block !important; vertical-align: middle !important;
    box-shadow: none !important; transition: background .15s, border-color .15s !important;
}
.form-page input[type="checkbox"].permission:hover,
.form-page input#all_permission:hover { border-color: var(--brand) !important; }
.form-page input[type="checkbox"].permission:checked,
.form-page input#all_permission:checked {
    background: var(--brand) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%230C111C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E") no-repeat center center !important;
    border-color: var(--brand) !important;
}
.form-page input[type="checkbox"].permission + label::before,
.form-page input[type="checkbox"].permission + label::after,
.form-page input#all_permission + label::before,
.form-page input#all_permission + label::after,
.form-page .control-label2::before,
.form-page .control-label2::after { display: none !important; content: none !important; }
.form-page input#all_permission + label { padding-left: 0 !important; margin: 0 !important; cursor: pointer; vertical-align: middle; }
.form-page .control-label2 {
    display: inline-block !important; width: auto !important; height: auto !important;
    padding: 0 24px 0 0 !important; margin: 0 0 8px 0 !important;
    line-height: 19px !important; font-weight: 500; color: #3b4060;
    cursor: pointer; vertical-align: middle; white-space: nowrap;
}
.form-page .role-table td { white-space: normal; vertical-align: middle; }
.form-page .role-table td strong { font-weight: 700; color: #1a1f2e; }
/* permission cell: flex so every checkbox + its label sits perfectly centered on one line */
.form-page .role-table td:has(.permission) {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; padding-top: 14px; padding-bottom: 14px;
}
.form-page .role-table td:has(.permission) .permission { margin: 0 !important; top: 0 !important; }
.form-page .role-table td:has(.permission) .control-label2 {
    margin: 0 20px 0 0 !important; padding: 0 !important; line-height: 19px !important; white-space: nowrap;
}
/* roles: "Assign Permissions" label + inline All-Permissions checkbox */
.form-page .assign-perm-row { margin-top: 4px; }
.form-page .assign-perm-row .form-check { margin: 6px 0 0 0; }
/* locked role (Super Administrator) → disabled checkboxes shown as clearly non-editable */
.form-page input[type="checkbox"]:disabled,
.form-page input[type="checkbox"].permission:disabled,
.form-page input#all_permission:disabled { opacity: .45 !important; cursor: not-allowed !important; background: #eef0f4 !important; }

/* ── Subscription: numeric price / limit fields a sensible moderate width (not stretched) ── */
.form-page #plan_price,
.form-page #order,
.form-page #plan_validity,
.form-page #booking_limit,
.form-page #driver_limit { max-width: 320px !important; width: 100% !important; flex: 0 0 320px !important; }

/* ── CMS & any .form-group.width-100 (no .row): stretch inner column + Summernote editor full width ── */
.form-page .form-group.width-100 > [class*="col-"],
.form-page .form-group > .col-7 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
.form-page textarea.col-7 { width: 100% !important; max-width: 100% !important; }
.form-page .note-editor,
.form-page .note-editor.note-frame,
.form-page .note-frame { width: 100% !important; max-width: 100% !important; }

/* ── Services "Manage prices by zone" tab block: kill stray outline/border artifacts ── */
.form-page .serice-tab-wrap { border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 22px 0 0 !important; }
.form-page .serice-tab-wrap > .card-header,
.form-page .serice-tab-wrap .nav-tabs { border: 0 !important; background: transparent !important; }
.form-page #zone-contents,
.form-page #zone-contents > .tab-pane { border: 0 !important; }

/* Non-translatable fields section (shown once, inside the fieldset below the tabs) */
.form-page .form-section { margin: 0 0 20px; padding: 0 2px; }
.form-page .lang-fieldset .form-section {
    margin: 0;
    padding: 8px 22px 4px;
    max-width: none;
}

/* Instructions / map area */
.form-page .instructions-block h4 { font-size: 15px; font-weight: 700; color: #1a1f2e; margin-bottom: 8px; }
.form-page .instructions-block p { font-size: 13.5px; color: #5a6179; }
.form-page .instructions-block img { max-width: 100%; border-radius: 10px; margin-top: 12px; }
.form-page .zone-demo-gif { width: 100%; border-radius: 10px; border: 1px solid #e2e6ef; }
/* Equal-height GIF + map so no blank space shows between the two columns */
.form-page .zone-map-row { display: flex; flex-wrap: wrap; align-items: stretch; }
.form-page .zone-map-row > [class*="col-"] { display: flex; flex-direction: column; }
.form-page .zone-map-row .zone-demo-gif { height: 100%; min-height: 480px; object-fit: cover; flex: 1 1 auto; }
.form-page .zone-map-row .zone-map-box { flex: 1 1 auto; }
.form-page .zone-map-row .zone-map-box #map { height: 100% !important; min-height: 440px; }

/* Zone map: search on top, map below with the tool buttons overlaid top-right */
.form-page .zone-map-box { position: relative; margin-top: 12px; }
.form-page .zone-map-box #map {
    width: 100% !important;
    height: 480px !important;
    border-radius: 10px;
    overflow: hidden;
    z-index: 0;
    border: 1px solid #e2e6ef;
}
.form-page .zone-map-box .mapType {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 600;
    width: auto;
    padding: 0;
    margin: 0;
}
.form-page .zone-map-box .mapType ul { margin: 0 !important; padding: 0 !important; list-style: none; }
.form-page .zone-map-box .mapType li { margin-bottom: 8px; }
.form-page #search-box { margin-bottom: 0; }
.form-page #autocomplete-list { position: relative; z-index: 700; }

/* ── Buttons ── */
.form-page .btm-btn { margin-top: 28px; padding-top: 22px; border-top: 1px solid #eef0f4; }
.form-page .save-setting-btn,
.form-page button.btn-primary,
.form-page .btn.btn-primary {
    background: var(--brand) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 11px 26px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    box-shadow: 0 2px 10px rgba(var(--brand-rgb),.28) !important;
}
.form-page .save-setting-btn:hover,
.form-page button.btn-primary:hover,
.form-page .btn.btn-primary:hover { background: var(--brand-strong) !important; }
.form-page .btn-default {
    background: #f1f3f7 !important;
    color: #5a6179 !important;
    border: 1px solid #e2e6ef !important;
    border-radius: 10px !important;
    padding: 11px 24px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-left: 8px;
}
.form-page .btn-default:hover { background: #e7eaf0 !important; }


/* ═══════════════════════════════════════════════════════════════════════
   NEW-UI for pages using .form-layout but NOT wrapped in .form-page
   (Reports, Settings, Payments, etc.). Scoped via
   :has(.page-titles, .payment-top-tab) so it NEVER affects .form-page pages.
   ═══════════════════════════════════════════════════════════════════════ */
/* Header */
.row.page-titles { padding: 6px 4px 16px !important; margin: 0 0 6px !important; border-bottom: 1px solid #eef0f4; align-items: center; }
.page-titles h3.text-themecolor { font-size: 22px !important; font-weight: 700 !important; color: #0C111C !important; margin: 0 !important; }
.page-titles .breadcrumb { background: transparent !important; padding: 6px 0 0 !important; margin: 0 !important; font-size: 13px; }
.page-titles .breadcrumb-item a { color: var(--brand) !important; text-decoration: none; }
.page-titles .breadcrumb-item.active { color: #8a93a8 !important; }

/* Card — borderless so the fieldset is the ONLY frame (no double border), like badges/save */
.page-wrapper:has(.page-titles, .payment-top-tab) .card { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }

/* Full width — kill the base 70% centered gap on left/right */
.page-wrapper:has(.page-titles, .payment-top-tab) .row.form-layout { max-width: 100% !important; width: 100% !important; margin: 0 !important; }
.page-wrapper:has(.page-titles, .payment-top-tab) .form-layout-inner { margin: 0 !important; width: 100% !important; }

/* Fieldset frame + GREEN legend (2-column flex layout inside) */
.page-wrapper:has(.page-titles, .payment-top-tab) fieldset:not(.lang-fieldset) {
    border: 1px solid #e2e6ef !important; border-radius: 12px !important;
    padding: 22px !important; margin: 22px 0 24px !important; min-width: 0;
    display: flex !important; flex-wrap: wrap !important; gap: 0 22px !important;
    align-content: flex-start; align-items: flex-start;
}
.page-wrapper:has(.page-titles, .payment-top-tab) fieldset:not(.lang-fieldset) > * { flex: 0 0 100%; max-width: 100%; }
.page-wrapper:has(.page-titles, .payment-top-tab) fieldset:not(.lang-fieldset) > legend {
    display: inline-block !important; width: auto !important; max-width: max-content !important;
    padding: 7px 18px !important; margin-bottom: 12px !important;
    background: var(--brand) !important; color: #ffffff !important; border: none !important;
    border-radius: 8px !important; font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: .5px !important; text-transform: uppercase !important;
    box-shadow: 0 2px 8px rgba(var(--brand-rgb), .3) !important;
}
/* remove the icon that used to sit inside the legend */
.page-wrapper:has(.page-titles, .payment-top-tab) fieldset > legend i,
.page-wrapper:has(.page-titles, .payment-top-tab) fieldset > legend .mdi,
.page-wrapper:has(.page-titles, .payment-top-tab) fieldset > legend .fa { display: none !important; }

/* 2 fields per row: .width-50 = half, everything else full row */
.page-wrapper:has(.page-titles, .payment-top-tab) fieldset:not(.lang-fieldset) > .form-group.width-50,
.page-wrapper:has(.page-titles, .payment-top-tab) fieldset:not(.lang-fieldset) > .form-check.width-50 {
    flex: 0 0 calc(50% - 11px) !important; max-width: calc(50% - 11px) !important;
}
.page-wrapper:has(.page-titles, .payment-top-tab) fieldset:not(.lang-fieldset) > button,
.page-wrapper:has(.page-titles, .payment-top-tab) fieldset:not(.lang-fieldset) > .btn,
.page-wrapper:has(.page-titles, .payment-top-tab) fieldset:not(.lang-fieldset) > a.btn { flex: 0 0 auto !important; align-self: flex-start; }

/* Inputs / selects / textareas */
.page-wrapper:has(.page-titles, .payment-top-tab) .form-control {
    border: 1px solid #e2e6ef !important; border-radius: 10px !important;
    padding: 10px 14px !important; height: auto !important; box-shadow: none !important; width: 100% !important;
}
.page-wrapper:has(.page-titles, .payment-top-tab) .form-control:focus {
    border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.15) !important;
}

/* Label-above-input inside each field */
.page-wrapper:has(.page-titles, .payment-top-tab) .form-group.row { margin: 0 0 18px !important; }
.page-wrapper:has(.page-titles, .payment-top-tab) .form-group.row > label,
.page-wrapper:has(.page-titles, .payment-top-tab) .form-group.row > .control-label { display: block !important; width: 100% !important; margin-bottom: 8px !important; font-weight: 600 !important; color: #3b4060 !important; }
.page-wrapper:has(.page-titles, .payment-top-tab) .form-group.row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 0 !important; }

/* dynamic "add more" rows (schedule notification) — two fields + delete inline */
.page-wrapper:has(.page-titles, .payment-top-tab) .option-row { display: flex !important; flex-wrap: nowrap !important; gap: 14px !important; align-items: flex-start !important; }
.page-wrapper:has(.page-titles, .payment-top-tab) .option-row > .form-group { flex: 1 1 0 !important; margin: 0 !important; }

/* Buttons: primary → theme green; delete-icon buttons → compact red */
.page-wrapper:has(.page-titles, .payment-top-tab) .btn-primary {
    background: var(--brand) !important; color: #ffffff !important; border: none !important;
    border-radius: 10px !important; padding: 10px 24px !important; font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(var(--brand-rgb),.28) !important;
}
.page-wrapper:has(.page-titles, .payment-top-tab) .btn:has(> i.mdi-delete),
.page-wrapper:has(.page-titles, .payment-top-tab) .btn:has(> i.fa-trash) {
    background: #fdecec !important; color: #e05454 !important; border: 1px solid #f6c9c9 !important;
    width: 42px !important; height: 42px !important; min-width: 42px !important; padding: 0 !important;
    border-radius: 10px !important; box-shadow: none !important; font-weight: 400 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important;
}
.page-wrapper:has(.page-titles, .payment-top-tab) .btn:has(> i.mdi-delete) i,
.page-wrapper:has(.page-titles, .payment-top-tab) .btn:has(> i.fa-trash) i { color: #e05454 !important; margin: 0 !important; }

/* ---- Extra fixes for old-UI (page-titles / payment) pages ---- */

/* Cancel / Back button (btn-default) -> neutral gray (was blue) */
.page-wrapper:has(.page-titles, .payment-top-tab) .btn-default {
    background: #f1f3f7 !important; color: #5a6179 !important; border: 1px solid #e2e6ef !important;
    border-radius: 10px !important; padding: 10px 22px !important; font-weight: 600 !important; box-shadow: none !important;
}
/* button row sits clearly below the fields */
.page-wrapper:has(.page-titles, .payment-top-tab) .form-group.col-12.text-center,
.page-wrapper:has(.page-titles, .payment-top-tab) .btm-btn { flex: 0 0 100% !important; width: 100% !important; margin-top: 18px !important; padding-top: 6px !important; }

/* Checkboxes aligned + green (like create/edit forms) */
.page-wrapper:has(.page-titles, .payment-top-tab) .form-check { display: flex !important; align-items: center; gap: 10px; padding: 0; margin: 0 0 8px 0; }
.page-wrapper:has(.page-titles, .payment-top-tab) .form-check > label,
.page-wrapper:has(.page-titles, .payment-top-tab) .form-check label.control-label { width: auto !important; max-width: none !important; margin: 0 !important; padding-left: 0 !important; font-weight: 500 !important; }
.page-wrapper:has(.page-titles, .payment-top-tab) .form-check label::before,
.page-wrapper:has(.page-titles, .payment-top-tab) .form-check label::after { display: none !important; content: none !important; }
.page-wrapper:has(.page-titles, .payment-top-tab) .form-check input[type="checkbox"] {
    -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
    position: static !important; left: auto !important; opacity: 1 !important;
    width: 20px !important; height: 20px !important; min-width: 20px !important;
    border: 1.5px solid #cbd2e0 !important; border-radius: 6px !important; background: #fff !important;
    cursor: pointer !important; margin: 0 !important; display: inline-block !important; vertical-align: middle;
}
.page-wrapper:has(.page-titles, .payment-top-tab) .form-check input[type="checkbox"]:checked {
    background: var(--brand) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%230C111C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E") no-repeat center center !important;
    border-color: var(--brand) !important;
}

/* Payment: 2 fields per row (their fields are width-100) */
.page-wrapper:has(.payment-top-tab) fieldset:not(.lang-fieldset) > .form-group.width-100,
.page-wrapper:has(.payment-top-tab) fieldset:not(.lang-fieldset) > .form-check.width-100 {
    flex: 0 0 calc(50% - 11px) !important; max-width: calc(50% - 11px) !important;
}

/* Payment tabs: themed selected tab + Active badges follow theme color */
.page-wrapper:has(.payment-top-tab) .payment-top-tab .nav-link { border-radius: 10px !important; color: #5a6179 !important; font-weight: 600; border: 1px solid transparent !important; }
.page-wrapper:has(.payment-top-tab) .payment-top-tab .nav-link.active { background: var(--brand) !important; color: #ffffff !important; border-color: var(--brand) !important; }
.page-wrapper:has(.payment-top-tab) .payment-top-tab .nav-link:not(.active) .badge { background: var(--brand) !important; color: #ffffff !important; }
.page-wrapper:has(.payment-top-tab) .payment-top-tab .nav-link.active .badge { background: rgba(12,17,28,.85) !important; color: #fff !important; }

/* ---- Round 2 fixes for old-UI (page-titles / payment) pages ---- */

/* 1. Side spacing for pages whose .card-body is a DIRECT child of page-wrapper
   (businessModel, schedule) so they match the container-fluid pages (Global) */
.page-wrapper:has(.page-titles) > .card-body { padding-left: 24px !important; padding-right: 24px !important; }

/* 2. Payment tab hover -> theme tint (was black) */
.page-wrapper:has(.payment-top-tab) .payment-top-tab .nav-link:not(.active):hover {
    background: var(--brand) !important; color: #ffffff !important; border-color: var(--brand) !important;
}

/* 3. Privacy / Terms language tabs (in .card-header) -> clean new-UI tabs */
.page-wrapper:has(.page-titles) .card-header { background: transparent !important; border: none !important; padding: 0 0 2px !important; }
.page-wrapper:has(.page-titles) .card-header .nav-tabs { border: none !important; border-bottom: 1px solid #eef0f4 !important; background: transparent !important; }
.page-wrapper:has(.page-titles) .card-header .nav-tabs .nav-item { margin: 0 !important; }
.page-wrapper:has(.page-titles) .card-header .nav-tabs .nav-link { border: none !important; background: transparent !important; color: #5a6179 !important; font-weight: 600 !important; padding: 10px 18px !important; border-radius: 0 !important; }
.page-wrapper:has(.page-titles) .card-header .nav-tabs .nav-link.active { color: #0C111C !important; border-bottom: 2px solid var(--brand) !important; background: transparent !important; }

/* 4. Help text under fields -> left-aligned, full-width */
.page-wrapper:has(.page-titles, .payment-top-tab) .form-text,
.page-wrapper:has(.page-titles, .payment-top-tab) .form-group .text-muted {
    display: block !important; width: 100% !important; margin: 6px 0 0 0 !important; padding-left: 0 !important;
    font-size: 12.5px !important; color: #8a90a6 !important; text-align: left !important;
}

/* 5. Color pickers -> show a real swatch (the .form-control rule was collapsing them to a line) */
.page-wrapper:has(.page-titles, .payment-top-tab) input[type="color"] {
    width: 56px !important; min-width: 56px !important; height: 40px !important; flex: 0 0 56px !important;
    padding: 3px !important; border: 1px solid #e2e6ef !important; border-radius: 8px !important;
    background: #fff !important; cursor: pointer !important; box-shadow: none !important;
}

/* Currency-prefixed inputs (.control-inner + .currentCurrency $ box) — realign with
   the taller new input; my .form-control padding had overridden the base padding-left */
.page-wrapper:has(.page-titles, .payment-top-tab) .control-inner { position: relative; }
.page-wrapper:has(.page-titles, .payment-top-tab) .control-inner > .form-control.referral_amount,
.page-wrapper:has(.page-titles, .payment-top-tab) .control-inner > .form-control.currency_input { height: 44px !important; }
.page-wrapper:has(.page-titles, .payment-top-tab) .control-inner > .currentCurrency {
    top: 1px !important; left: 1px !important; bottom: auto !important; height: 42px !important;
    width: 44px !important; max-width: 44px !important; line-height: normal !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: #f1f3f7 !important; color: #5a6179 !important; font-weight: 600 !important;
    border-radius: 9px 0 0 9px !important; border-right: 1px solid #e2e6ef !important; padding: 0 !important;
}
.page-wrapper:has(.page-titles, .payment-top-tab) .control-inner > .form-control.referral_amount,
.page-wrapper:has(.page-titles, .payment-top-tab) .control-inner > .form-control.currency_input {
    padding-left: 56px !important;
}

/* Language tabs moved INSIDE the fieldset (Privacy / Terms) — style like the multilingual forms */
.page-wrapper:has(.page-titles) fieldset .lang-tabs,
.page-wrapper:has(.page-titles) fieldset ul#language-tabs {
    display: flex !important; flex: 0 0 100% !important; width: 100% !important; list-style: none !important;
    padding: 0 !important; margin: 0 0 20px !important; gap: 4px;
    border: none !important; border-bottom: 1px solid #eef0f4 !important; background: transparent !important;
}
.page-wrapper:has(.page-titles) fieldset .lang-tabs .nav-item { margin: 0 !important; }
.page-wrapper:has(.page-titles) fieldset .lang-tabs .nav-link {
    border: none !important; background: transparent !important; color: #5a6179 !important;
    font-weight: 600 !important; padding: 10px 18px !important; border-radius: 0 !important;
}
.page-wrapper:has(.page-titles) fieldset .lang-tabs .nav-link.active {
    color: #0C111C !important; border-bottom: 2px solid var(--brand) !important; background: transparent !important;
}
.page-wrapper:has(.page-titles) fieldset .lang-tabs .nav-link .badge {
    background: var(--brand) !important; color: #ffffff !important;
}

/* Remove the Back/Cancel button on all payment method pages */
.page-wrapper:has(.payment-top-tab) .btn-default { display: none !important; }

/* Consistent SMALL icon-text gap on all Save/buttons (the base .btm-btn i.fa
   margin-right:10px made some buttons have a big gap).
   Exclude .btn-default so the hidden payment Back button stays hidden. */
.page-wrapper:has(.page-titles, .payment-top-tab) .btn:not(.btn-default) {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
}
.page-wrapper:has(.page-titles, .payment-top-tab) .btn i,
.page-wrapper:has(.page-titles, .payment-top-tab) .btn i.fa,
.page-wrapper:has(.page-titles, .payment-top-tab) .btm-btn.form-group i.fa { margin: 0 !important; }

/* Help text inside a form-check (e.g. COD "Enable" note) drops full-width below,
   instead of being squeezed into a narrow vertical column */
.page-wrapper:has(.page-titles, .payment-top-tab) .form-check { flex-wrap: wrap !important; }
.page-wrapper:has(.page-titles, .payment-top-tab) .form-check > .form-text,
.page-wrapper:has(.page-titles, .payment-top-tab) .form-check > .text-muted {
    flex: 0 0 100% !important; width: 100% !important; margin: 5px 0 0 0 !important;
    font-size: 12.5px !important; color: #8a90a6 !important; text-align: left !important;
}

/* Payment method: supported-currency note box */
.page-wrapper:has(.payment-top-tab) .payment-currency-note {
    display: flex; align-items: flex-start; gap: 10px; width: 100%;
    background: rgba(var(--brand-rgb), .08);
    border: 1px solid rgba(var(--brand-rgb), .28);
    border-radius: 10px; padding: 12px 14px; margin-top: 4px;
    font-size: 13px; color: #3b4060; line-height: 1.5;
}
.page-wrapper:has(.payment-top-tab) .payment-currency-note i { color: var(--brand); font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.page-wrapper:has(.payment-top-tab) .payment-currency-note a { color: var(--brand); font-weight: 700; text-decoration: underline; }

/* Currency note: force the whole note field full-width & center it at the bottom.
   Higher specificity than the 2-per-row rule that was keeping it at 50% in the right column. */
.page-wrapper:has(.payment-top-tab) fieldset:not(.lang-fieldset) > .form-group.width-100:has(.payment-currency-note),
.page-wrapper:has(.payment-top-tab) fieldset > .form-group:has(.payment-currency-note) {
    flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; margin-top: 8px !important;
    display: flex !important; justify-content: center !important; align-items: center !important;
}
.page-wrapper:has(.payment-top-tab) .payment-currency-note {
    display: inline-flex !important; justify-content: center !important; text-align: center !important;
    width: fit-content !important; max-width: 100% !important; margin: 6px auto 0 !important;
}

/* Detail-page info boxes: bordered card + brand-tint filled heading bar
   (ported from owner panel — General Details / Billing Details / Map View headers) */
.page-wrapper:has(.page-titles, .payment-top-tab) .card:has(.card-header.bg-white) {
    border: 1px solid #e6e9f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .05) !important;
    overflow: hidden;
    margin-bottom: 20px;
}
.page-wrapper:has(.page-titles, .payment-top-tab) .card-header.bg-white {
    background: var(--brand-tint) !important;
    border-bottom: 1px solid #e6e9f0 !important;
    padding: 14px 18px !important;
}
.page-wrapper:has(.page-titles, .payment-top-tab) .card-header.bg-white h3 {
    border-left: none !important; border-right: none !important;
    padding-left: 0 !important; padding-right: 0 !important;
    margin: 0 !important; color: #0C111C !important;
    font-size: 16px !important; font-weight: 700 !important;
}

/* Checkbox rows WITHOUT a help block (e.g. Maintenance Mode) — keep the box + label on ONE line.
   Rows that carry a .text-muted / .form-text help (e.g. COD) keep their wrap so the help drops below. */
.page-wrapper:has(.page-titles, .payment-top-tab) .form-check:not(:has(.text-muted, .form-text)) {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; gap: 10px !important;
}
.page-wrapper:has(.page-titles, .payment-top-tab) .form-check:not(:has(.text-muted, .form-text)) > label,
.page-wrapper:has(.page-titles, .payment-top-tab) .form-check:not(:has(.text-muted, .form-text)) > label.control-label {
    flex: 1 1 auto !important; width: auto !important; max-width: none !important; margin: 0 !important;
}


/* ============================================================
   Poolmate additions (preserved across theme updates)
   ============================================================ */

/* Language tabs - brand underline style for multilingual form fields. The base
   theme paints .nav-tabs and .nav-item with a grey background band; strip all
   of it here. */
ul.nav-tabs.ec-lang-tabs,
.ec-lang-tabs {
    display: flex !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #eef0f4 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ec-lang-tabs .nav-item { background: transparent !important; margin: 0 !important; }
.ec-lang-tabs .nav-link,
.ec-lang-tabs .nav-item .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #8a90a6 !important;
    font-weight: 600;
    font-size: 13.5px;
    padding: 10px 16px;
}
.ec-lang-tabs .nav-link:hover { color: var(--primary) !important; }
.ec-lang-tabs .nav-link.active,
.ec-lang-tabs .nav-item .nav-link.active {
    color: var(--primary) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--primary) !important;
}
.ec-form-help {
    font-size: 12px;
    color: #8a90a6;
    margin-top: 4px;
}

/* Align the language-tab strip with the form content. The first tab loses its
   left padding so its text and underline start at the strip's own left edge. */
.ec-lang-tabs .nav-item:first-child .nav-link {
    padding-left: 0 !important;
}
/* ul.nav-tabs.ec-lang-tabs needed (not just .ec-lang-tabs) to out-rank the
   base rule's margin: 0 !important at specificity (0,2,1). */
fieldset > ul.nav-tabs.ec-lang-tabs {
    margin: 0 !important;
}

#userTable_processing {
    height: 80px;
}

/* Mini-sidebar hover flyout (panel element is created by layouts/menu JS;
   it only positions itself - all appearance comes from these rules) */
#mini-hover-panel {
    display: none;
    position: fixed;
    left: 66px;
    z-index: 1100;
    min-width: 200px;
    max-width: 300px;
    background: #0C111C;
    border: 1px solid rgba(var(--brand-rgb), .35);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    padding: 8px;
}
#mini-hover-panel .mhp-label {
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
}
#mini-hover-panel .mhp-label.has-sub {
    color: rgba(255, 255, 255, .55);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .08em;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    border-radius: 0;
    margin-bottom: 6px;
}
#mini-hover-panel .mhp-link {
    display: block;
    color: rgba(255, 255, 255, .75);
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
}
#mini-hover-panel .mhp-link:hover {
    background: rgba(var(--brand-rgb), .16);
    color: #fff;
}

/* Collapsed-sidebar brand: the icon logo (light-logo) replaces the wordmark */
.mini-sidebar .topbar .top-navbar .navbar-header .navbar-brand .light-logo {
    max-width: 34px;
    margin: 0 auto;
}

/* Poolmate brand is a dark blue (goride's was a light lime), so text that
   sits ON the brand color must be white, not ink. */
.page-title-bar .ptb-count { color: #fff; }
.btn-page-create, .btn-page-create:hover { color: #fff; }
.sidebar-nav > ul > li.active > a i,
.sidebar-nav > ul > li > a.active i { color: #fff !important; }
.form-page fieldset > legend,
.form-page .form-layout-inner fieldset legend,
.form-page .form-layout fieldset legend { color: #fff !important; }
.page-wrapper:has(.payment-top-tab) .payment-top-tab .nav-link.active { color: #fff !important; }
.page-wrapper:has(.payment-top-tab) .payment-top-tab .nav-link:not(.active) .badge { color: #fff !important; }

/* Pages that keep the old page-titles chrome (settings, reports) fall back to
   the base theme's BLACK legend - give them the brand pill with white text. */
.form-layout-inner fieldset legend,
.form-layout fieldset legend {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 0 0 4px !important;
    padding: 5px 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    color: #ffffff !important;
    background: var(--brand) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(var(--brand-rgb), .3) !important;
}

/* select2 country options render 120px flag PNGs - size them down
   (rule existed in the old stylesheet, missing from the new one) */
.img-flag {
    width: 20px;
    height: auto;
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 2px;
}
.select2-container .select2-selection--single .select2-selection__rendered .img-flag {
    width: 18px;
}

/* Fieldset legends: brand pill with WHITE text (matches foodie/goride reference) */
.form-page fieldset > legend,
.form-page .form-layout-inner fieldset legend,
.form-page .form-layout fieldset legend,
.form-layout-inner fieldset legend,
.form-layout fieldset legend {
    color: #ffffff !important;
    background: var(--brand) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(var(--brand-rgb), .3) !important;
}


/* ============================================================
   Foodie ec-* component library (page chrome: ec-page-head /
   ec-kpi / ec-filter-card / ec-list-card / ec-form-card /
   settings-card / header chips). Tokens bridged to --brand.
   ============================================================ */
/* 
   
   ==== ec-* components ====
   
    *//* ============================================================
   ec-* component library
   Everything here is driven by --admin-panel-color / --admin-panel-rgb /
   --admin-panel-contrast, set in :root by layouts/app.blade.php.
   ============================================================ */

/* Brand loader: a conic-gradient masked ring + a leading dot, with a pulsing
   gradient app name. Colours inherit the admin theme. */
.ec-loader-box{
    position: fixed; inset: 0; margin: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
}

.ec-spinner{
    position: relative;
    width: 68px; height: 68px; border-radius: 50%;
    border: 0; box-sizing: border-box;
    background: conic-gradient(from 90deg,
        var(--admin-panel-color) 0%,
        rgba(var(--admin-panel-rgb, 132, 74, 239), .55) 42%,
        rgba(var(--admin-panel-rgb, 132, 74, 239), 0) 76%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
    animation: ec-spin .85s linear infinite;
}

.ec-spinner::after{
    content: ''; position: absolute; top: 0; left: 50%;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--admin-panel-color); transform: translateX(-50%);
}

.ec-spinner-label{
    font-size: 18px; font-weight: 800; letter-spacing: .4px; margin: 0; text-align: center;
    background: linear-gradient(90deg, var(--admin-panel-color), color-mix(in srgb, var(--admin-panel-color) 55%, #fff));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    color: var(--admin-panel-color);
    animation: ec-pulse 1.3s ease-in-out infinite;
}

@keyframes ec-spin{ to { transform: rotate(360deg); } }

@keyframes ec-pulse{ 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Page head — title + subtitle + primary action */
.ec-page-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ec-page-head-text h3{
    font-size: 24px;
    color: #0C111C;
    margin: 0;
}

.ec-page-head-text p{ font-size: 14px; }

.ec-head-btn{
    background: var(--admin-panel-color);
    color: var(--admin-panel-contrast, #fff);
    border: none;
    box-shadow: 0 6px 14px rgba(var(--admin-panel-rgb, 132, 74, 239), .28);
    transition: box-shadow .15s, transform .06s;
    display: inline-flex;
}

.ec-head-btn:hover{ color: var(--admin-panel-contrast, #fff); box-shadow: 0 10px 22px rgba(var(--admin-panel-rgb, 132, 74, 239), .38); }

.ec-head-btn:active{ transform: translateY(1px); }

.ec-head-btn i{ font-size: 18px; }

/* KPI horizontal stat variant — icon-left, value-top, sub-label under */

.ec-kpi.ec-kpi-stat .ec-kpi-sub{ font-size: 12px; color: #9aa1b4; font-weight: 500; }

/* Filter card ─────────────────────────────────────────── */

.ec-filter-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .12);
    color: var(--admin-panel-color);
    font-size: 20px;
}

.ec-quick-chips{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ec-quick-label{ font-size: 12.5px; color: #8a90a6; font-weight: 500; margin-right: 4px; }

.ec-chip{
    background: #f5f7fb;
    border: 1px solid #e6e9f0;
    color: #3b4060;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.ec-chip i{ font-size: 15px; }

.ec-chip:hover{
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10);
    border-color: rgba(var(--admin-panel-rgb, 132, 74, 239), .28);
    color: var(--admin-panel-color);
}

.ec-chip.is-active{
    background: var(--admin-panel-color);
    border-color: var(--admin-panel-color);
    color: #fff;
}

/* Filter row inputs */

.ec-filter-card .form-control{
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    font-size: 14px;
    color: #0C111C;
}

.ec-filter-card .form-control:focus{
    background: #fff;
    border-color: var(--admin-panel-color);
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .15);
}

.ec-btn-ghost{
    height: 42px;
    display: inline-flex; align-items: center; gap: 5px;
}

/* Listings table card */

/* Card body inset — matches the card-header's 20px horizontal padding so the
   length menu / info / pagination sit inside a consistent frame instead of
   flush against the card's right border (which read as a text-alignment bug). */
.ec-list-card .card-body{ padding: 16px 20px; }

/* Higher specificity — DataTables' `.display` / `.dataTable` classes
   land after our rules on init, so we anchor selectors on `.dataTable` to
   keep the header size stable before AND after the table renders. */
.ec-list-table thead th,
table.ec-list-table.dataTable thead th,
table.ec-list-table.dataTable thead > tr > th{
    background: #fafbfd;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700 !important;  /* beats the global `.table.dataTable th{font-weight:400!important}` in style.css:10939 */
    letter-spacing: 0;
    text-transform: none;
    padding: 14px 16px !important;
}

.ec-list-table tbody td,
table.ec-list-table.dataTable tbody td{
    vertical-align: middle;
    font-size: 13.5px;
    color: #3b4060;
    background: #fff;
}

/* Kill DataTables' zebra stripe (`.display` adds .odd/.even) so every row
   is uniform white; only the hover tint remains. */

/* Kill DataTables' sorted-column tint (`.sorting_1/2/3`) so the active sort
   column matches the rest; sort direction is still visible via the arrow icon. */

/* Give the active sort column's HEADER a subtle brand tint instead of the
   default gray, so the "which column is sorted" cue matches the admin colour. */
table.ec-list-table.dataTable thead th.sorting_asc,
table.ec-list-table.dataTable thead th.sorting_desc{
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .08);
    color: var(--admin-panel-color);
}

/* Listing cell — thumbnail + title + short ID */

/* Category chip */

/* Category chips that wrap onto multiple lines inside a table cell.
   flex-wrap wraps the chips even when the DataTable has the `nowrap` class. */

/* Seller / user cell — avatar + name.
   Same structure across Listings (seller) and Users (user info):
   <span class="ec-seller">
       <img class="ec-seller-avatar"> | <span class="ec-avatar-fallback">…</span>
       <a class="ec-seller-name">Name</a>
   </span>
*/

/* Explicit margin-right on the avatar instead of `gap` on the container —
   Bootstrap's `<a>` reset can strip flex gap between an <img> and a following
   inline link, which is why the avatar and name were touching. */
.ec-seller-avatar,
.ec-avatar-fallback{
    display: inline-flex;
    overflow: hidden;
    box-sizing: border-box;
    margin-right: 14px !important;
}

/* Status pills */
.ec-pill{
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.6;
}

.ec-pill.pill-green{ background: #e5f7ed; color: #1a7f4c; }

.ec-pill.pill-amber{ background: #fef3d5; color: #a86400; }

/* Row actions */
.ec-actions{ display: inline-flex; align-items: center; gap: 4px; justify-content: flex-start; }

.ec-act{
    width: 38px; height: 38px;
    border-radius: 8px;
    background: transparent;
    color: #8a90a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: background .15s, color .15s;
}

.ec-act:hover{
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10);
    color: var(--admin-panel-color);
}

/* Delete icon uses the same brand hover as every other action so the row's
   action strip reads as one uniform control; the mdi-delete icon shape alone
   signals intent. Bulk-delete link in the card header stays red. */
.ec-act.ec-act-danger{ color: #8a90a6; }

.ec-act.ec-act-danger:hover{ background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10); color: var(--admin-panel-color); }

/* Approve variant — green on hover, distinct from destructive/danger */

/* DataTables Export button collection when it lives in a list-card header
   slot — brand-coloured pill button matching .ec-btn-brand, no odd margins. */
[id$="-export-slot"] .dt-buttons{ margin: 0; }

/* DataTables — quiet the length/info/paginate to match the card */

.ec-list-card .dataTables_length{ padding: 0; }

.ec-list-card .dataTables_length select{
    margin: 0 6px;
    font-size: 12.5px;
}

.ec-list-card .dataTables_paginate{ margin: 0 !important; padding: 0 !important; }

.ec-list-card .dataTables_paginate .paginate_button{
    padding: 4px 10px !important;
    margin: 0 2px !important;
    border-radius: 8px !important;
    color: #5a6179 !important;
    border: none !important;
    background: transparent !important;
}

.ec-list-card .dataTables_paginate .paginate_button:hover{
    background: #f5f7fb !important;
    color: var(--admin-panel-color) !important;
    border: none !important;
}

/* Higher specificity (0,5,1) — the theme's
   `.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button:hover`
   rule (0,5,0) forces `color: #fff !important`, which combined with our light
   hover background made the hovered page number invisible. */
.ec-list-card .dataTables_wrapper .dataTables_paginate a.paginate_button:hover{
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10) !important;
    color: var(--admin-panel-color) !important;
    border: none !important;
}

.ec-list-card .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover{
    background: transparent !important;
    color: #cbd0da !important;
}

.ec-list-card .dataTables_paginate .paginate_button.current,
.ec-list-card .dataTables_paginate .paginate_button.current:hover{
    background: var(--admin-panel-color) !important;
    color: #fff !important;
    border: none !important;
}

/* 5-class + element selector — outranks the DataTables plugin's
   `.dataTables_wrapper .dataTables_paginate .paginate_button.current { color: inherit !important }`
   (0,4,0). Needed for the hand-built pagination on Cities/Areas, which sits
   outside .table-responsive so the theme's 5-class rule doesn't reach it.
   Also caps the pill height so it doesn't touch the separator line above. */
.ec-list-card .dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.ec-list-card .dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover{
    background: var(--admin-panel-color) !important;
    color: #fff !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 10px !important;
    margin: 0 4px;
    line-height: 1;
    border-radius: 8px !important;
}

.ec-list-card .dataTables_paginate .paginate_button.disabled,
.ec-list-card .dataTables_paginate .paginate_button.disabled:hover{
    background: transparent !important;
    color: #cbd0da !important;
    cursor: not-allowed;
}

.ec-list-card .dataTables_length select{
    border: 1px solid #e2e6ef;
    height: 34px;
    color: #3b4060;
}

.ec-list-card .paginate_button.current,
.ec-list-card .paginate_button.current:hover{
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
    color: #fff !important;
}

/* Published toggle in the listings table — override the global red/green
   pill with a slim modern switch that uses the brand color when on. */
.ec-list-table .switch-box{ padding: 0; margin: 0; float: none; display: inline-block; }

.ec-list-table .switch-box .switch{ width: 36px; height: 20px; margin: 0; display: inline-block; position: relative; vertical-align: middle; }

.ec-list-table .switch-box .switch input{ opacity: 0; width: 0; height: 0; position: absolute; }

.ec-list-table .switch-box .switch .slider{
    position: absolute; inset: 0;
    background: #d0d5de;
    border-radius: 999px;
    cursor: pointer;
    transition: background .18s ease;
}

.ec-list-table .switch-box .switch .slider::before{
    content: ''; position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(15,23,42,.18);
    transition: transform .18s ease;
}

.ec-list-table .switch-box .switch input:checked + .slider{ background: var(--admin-panel-color); }

.ec-list-table .switch-box .switch input:checked + .slider::before{ transform: translateX(16px); }

/*******************
   Users — index page (reuses listings scaffolding + tiny extras)
*******************/

/*******************
   Create / Edit form pages — shared pattern
   Structure: ec-page-head (title + Back) → ec-form-card(s) → ec-form-actions.
   Fields: 2-per-row (`.row` > `.col-md-6.mb-3`), label above input,
   required * on English only, helper text via .ec-form-help.
*******************/

/* Subtle divider between logical groups inside a form section */

/* Utility: aligns a label-less control (toggle, button…) with the INPUT line of an
   adjacent field that has an .ec-form-label above it. Reusable on any form page. */

/* Any leftover legacy control-label inside a form card follows the same scale */

/* Select2 inside the ad wizard (Seller) — match .ec-form-card .form-control */

/* ── Detail / view page primitives ─────────────────────────────────────── */

/* Deleted / missing user label */

/* Brand-tinted info note (e.g. payment currency-support hint) */

input[type="checkbox"].ec-check{
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; padding: 0;
    border: 1.5px solid #cbd0da; border-radius: 6px; background: #fff;
    cursor: pointer; vertical-align: middle; flex-shrink: 0;
    transition: background .15s ease, border-color .15s ease;
    /* Undo the theme's off-screen checkbox hide (position:absolute;left:-9999px;opacity:0) */
    position: relative !important; left: auto !important; opacity: 1 !important;
}

/* Non-bootstrap checkboxes (payment rows, .ec-check) get inline spacing;
   .form-check-input keeps Bootstrap's own absolute positioning untouched. */

/* The base theme draws its OWN checkbox on the following <label> via ::before/::after.
   Our custom box already renders on the input, so suppress the theme's to avoid doubles. */
.form-check input[type="checkbox"] + label::before,
.form-check input[type="checkbox"] + label::after,
.form-check-input[type="checkbox"] + label::before,
.form-check-input[type="checkbox"] + label::after,
input[type="checkbox"].ec-check + label::before,
input[type="checkbox"].ec-check + label::after{
    display: none !important;
}

.form-check input[type="checkbox"]:checked,
.form-check-input[type="checkbox"]:checked,
input[type="checkbox"].ec-check:checked{
    background: var(--admin-panel-color); border-color: var(--admin-panel-color);
}

.form-check input[type="checkbox"]:checked::after,
.form-check-input[type="checkbox"]:checked::after,
input[type="checkbox"].ec-check:checked::after{
    content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.form-check input[type="checkbox"]:focus,
.form-check-input[type="checkbox"]:focus,
input[type="checkbox"].ec-check:focus{
    outline: none; box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .15);
}

/* Checkbox selection column — center the box in header + every row */

/* Themed inline link (e.g. clickable seller / buyer / ad names in list tables) */

/* Super Admin lock note — tinted with the dynamic admin panel color (not Bootstrap blue) */

/* Checkbox stays the standard 20px ec-check so the white tick is centered exactly like
   every other checkbox (e.g. bulk delete) — no size/tick override here. */

/* Bulk-action bar (list pages) — appears when rows are checkbox-selected */
.ec-bulk-bar{
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .07);
    border: 1px solid rgba(var(--admin-panel-rgb, 132, 74, 239), .18);
    border-radius: 10px; padding: 10px 16px;
}

.ec-bulk-bar .ec-bulk-count{ font-size: 14px; color: #3b4060; }

.ec-bulk-bar .ec-bulk-count strong{ color: var(--admin-panel-color); }

.ec-bulk-bar .ec-bulk-actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.form-check.width-100 .ec-form-help{ flex-basis: 100%; margin-top: 4px; }

/* Language tabs — brand underline style. The base theme paints .nav-tabs and
   .nav-item with a grey background band; strip all of it here. */

/* Bottom action bar */

/* Image upload preview */

/* Styled file input — hides the native control behind a dashed upload box,
   shared by every converted form.
   Markup: <label class="ec-upload" data-placeholder="…">
             <input type="file" …>
             <i class="mdi mdi-cloud-upload-outline"></i>
             <span class="ec-upload-text">…</span>
             <span class="ec-upload-hint">…</span></label>
   ec-form.js swaps .ec-upload-text for the chosen file name on change. */

/* Custom pager (previous / next) — match the rest of the pill-button family */

/* Cities / Areas now use DataTables' exact class names (dataTables_info,
   dataTables_length, dataTables_paginate) so all DataTables CSS in the codebase
   applies uniformly — no divergence from Currencies/Countries/States. */
.ec-list-card .dataTables_wrapper .dataTables_info,
body .table-responsive .dataTables_wrapper .dataTables_info{ color: #8a90a6; font-size: 14px; }

/* DataTables-look Prev/Next pager for pages that can't use DataTables' own
   pagination (they use Firestore cursors). */

.ec-lang { position: relative; margin: 0 8px; }
.ec-lang-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 14px;
    height: 36px;
    border-radius: 999px;
    background: #f5f7fb;
    border: none;
    color: #0C111C;
    font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.ec-lang-btn:hover { background: #ecf0f6; }
.ec-lang-btn .fa-globe { color: #3b4060; font-size: 13px; }
.ec-lang-btn .ec-lang-chev { color: #64748b; font-size: 16px; transition: transform .15s; }
.ec-lang.open .ec-lang-btn .ec-lang-chev { transform: rotate(180deg); }
.ec-lang-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .18); }

.ec-lang-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 160px;
    list-style: none; padding: 6px; margin: 0;
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    z-index: 1050;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .12s, transform .12s;
}
.ec-lang.open .ec-lang-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ec-lang-menu li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px; color: #3b4060;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ec-lang-menu li:hover { background: #f5f7fb; color: #0C111C; }
.ec-lang-menu li.active { color: var(--admin-panel-color); font-weight: 700; background: rgba(var(--admin-panel-rgb, 132, 74, 239), .08); }
.ec-lang-menu li .mdi { font-size: 18px; }

.settings-card-icon {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .12) !important;
    color: var(--admin-panel-color) !important;
}
.settings-card-link:hover .settings-card-arrow {
    color: var(--admin-panel-color) !important;
}

.ec-hero-banner {
    background: linear-gradient(120deg,
        rgba(var(--admin-panel-rgb, 132, 74, 239), .95) 0%,
        rgba(var(--admin-panel-rgb, 132, 74, 239), .78) 55%,
        #0b0f18 100%);
    border-radius: 18px;
    padding: 26px 30px;
    color: #fff;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 20px;
    box-shadow: 0 12px 30px rgba(var(--admin-panel-rgb, 132, 74, 239), .18);
    position: relative; overflow: hidden;
}
.ec-hero-banner::before {
    content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%;
    background: rgba(255, 255, 255, .06); top: -100px; right: -80px;
}
.ec-hero-banner::after {
    content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .10); bottom: -80px; left: 30%;
}
.ec-hero-text { position: relative; z-index: 2; }
.ec-hero-text h3 { font-size: 22px; margin: 0 0 6px; color: #fff; }
.ec-hero-text p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .78); }
.ec-hero-actions { position: relative; z-index: 2; display: flex; gap: 10px; flex-wrap: wrap; }
.ec-hero-btn {
    background: #fff; color: #0C111C !important;
    border-radius: 10px; padding: 10px 18px; font-weight: 600; font-size: 13.5px;
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none !important; transition: transform .12s, box-shadow .15s;
    border: none;
}
.ec-hero-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .20); color: #0C111C !important; }
.ec-hero-btn-outline {
    background: transparent; color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .3);
}
.ec-hero-btn-outline:hover { background: rgba(255, 255, 255, .10); color: #fff !important; }

/* KPI cards */
.ec-kpi-row { margin: 6px -8px 4px; }
.ec-kpi-row > [class*="col-"] { padding: 0 8px; }
.ec-kpi {
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 16px;
    position: relative; overflow: hidden;
    transition: transform .12s, box-shadow .15s;
}
.ec-kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(15, 23, 42, .06); }
.ec-kpi::before { display: none; }
.ec-kpi.kpi-brand { --kpi-accent: var(--admin-panel-color); --kpi-tint: rgba(var(--admin-panel-rgb, 132, 74, 239), .10); }
.ec-kpi.kpi-blue  { --kpi-accent: #3b82f6; --kpi-tint: rgba(59, 130, 246, .10); }
.ec-kpi.kpi-amber { --kpi-accent: #f59e0b; --kpi-tint: rgba(245, 158, 11, .10); }
.ec-kpi.kpi-green { --kpi-accent: #22c55e; --kpi-tint: rgba(34, 197, 94, .10); }

.ec-kpi-head { display: flex; align-items: center; gap: 12px; }
.ec-kpi-icon {
    background: var(--kpi-tint);
    color: var(--kpi-accent);
    display: inline-flex; align-items: center; justify-content: center;
}
.ec-kpi-label { font-size: 13px; color: #8a90a6; font-weight: 600; }
.ec-kpi-value { font-weight: 800; color: #0C111C; line-height: 1.05; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }

/* Cards.
   No height:100% — that made every card stretch to its tallest row neighbour,
   leaving a large empty area inside the shorter one (a 5-row table beside a
   13-row one). Cards size to their own content instead. */
.ec-card .card-header { border-bottom: 1px solid #f0f2f7; }
.ec-card .card-header h5 { font-size: 15.5px; color: #0C111C; }
.ec-card .card-header small { display: block; }

/* Force rows on the dashboard to keep siblings the same height */
.dashboard-page .row { align-items: stretch; }

/* Filter row inside cards */

/* Link-style CTA */
.ec-link-btn {
    color: var(--admin-panel-color); font-weight: 600; font-size: 13px;
    text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.ec-link-btn:hover { text-decoration: underline; color: var(--admin-panel-color); }

/* Ads by Status list */
.ec-status-list { list-style: none; padding: 12px 4px 0; margin: 0; }
.ec-status-list li {
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px dashed #f0f2f7;
}
.ec-status-list li:last-child { border-bottom: none; }
.ec-status-list .ec-status-name { flex: 1; }
.ec-status-list .ec-status-count { font-weight: 700; color: #0C111C; }
.ec-status-list .ec-status-pct { color: #8a90a6; font-size: 12px; width: 44px; text-align: right; }

/* Recent ads table */
.ec-recent-table { font-size: 14px; }
.ec-recent-table thead th {
    background: #f9fafc; color: #64748b; font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: .4px;
    border-top: 1px solid #f0f2f7; border-bottom: 1px solid #eef1f6;
}
.ec-recent-table tbody td { border-top: 1px solid #f5f7fb;
    vertical-align: middle;
}
.ec-recent-table tbody tr:hover { background: #fafbfd; }

/* Top categories list */

/* User avatar in recent-users table */
.ec-avatar {
    border: 1px solid #eef1f6;
}

/* Pending action queue */
.ec-queue-list { list-style: none; padding: 0; margin: 0; }
.ec-queue-list li {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 8px;
    background: var(--q-tint, #f5f7fb);
    transition: transform .12s, box-shadow .15s;
}
.ec-queue-list li:last-child { margin-bottom: 0; }
.ec-queue-list li:hover { transform: translateX(2px); box-shadow: 0 8px 18px rgba(15, 23, 42, .05); }
.ec-queue-list .q-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--q-accent, #64748b);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
}
.ec-queue-list .q-body { flex: 1; min-width: 0; }
.ec-queue-list .q-title { font-weight: 700; font-size: 13.5px; color: #0C111C; line-height: 1.2; }
.ec-queue-list .q-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.ec-queue-list .q-cta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: 999px;
    background: #fff; color: var(--q-accent, #64748b) !important;
    font-weight: 700; font-size: 13.5px;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
    transition: background .12s, color .12s;
}
.ec-queue-list .q-cta:hover { background: var(--q-accent, #64748b); color: #fff !important; }

.ec-queue-list .q-amber  { --q-accent: #f59e0b; --q-tint: rgba(245, 158, 11, .08); }
.ec-queue-list .q-blue   { --q-accent: #3b82f6; --q-tint: rgba(59, 130, 246, .08); }
.ec-queue-list .q-red    { --q-accent: #ef4444; --q-tint: rgba(239, 68, 68, .08); }
.ec-queue-list .q-green  { --q-accent: #22c55e; --q-tint: rgba(34, 197, 94, .08); }

/* =====================================================
   Foodie-only brand hooks
   Selectors that exist in this panel but not in the shared
   base — ported off the old inline `<?php echo $_COOKIE[...] ?>`
   block in layouts/app.blade.php onto the CSS variables so
   they follow the admin's colour like everything else.
   ===================================================== */

/* Payout create screens */

/* Category slider (POS / menu builder) */

/* Dashboard analytics + order status widgets */

/* Print / secondary outline button */

/* Card-header tab strip */

/* Custom check/radio inside edit forms (base draws these with pseudo-elements) */
.edit-form-group .form-check [type="checkbox"]:checked + label::after,
.edit-form-group .form-check [type="radio"]:checked + label::before {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
}
[type="checkbox"]:checked + label::before {
    border-right: 2px solid var(--admin-panel-color) !important;
    border-bottom: 2px solid var(--admin-panel-color) !important;
}
[type="radio"]:checked + label::after,
[type="radio"].with-gap:checked + label::after { background-color: var(--admin-panel-color) !important; }
[type="radio"]:checked + label::after,
[type="radio"].with-gap:checked + label::before,
[type="radio"].with-gap:checked + label::after { border: 2px solid var(--admin-panel-color) !important; }

/* Pricing cards */
.pricing-card-btm .btn:hover {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
}

/* Unread chat badge in listing action columns */
.table tr td .action-btn .chat-count-message .unread-count {
    background: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
}

/* Misc legacy text hooks */
.bellow-text ul li > span,
.ai-text-animation { color: var(--admin-panel-color) !important; }
html body blockquote { border-left: 5px solid var(--admin-panel-color); }

/* Extra KPI accents — this dashboard runs 7 stat cards. */
.ec-kpi.kpi-purple { --kpi-accent: #8b5cf6; --kpi-tint: rgba(139, 92, 246, .10); }
.ec-kpi.kpi-rose   { --kpi-accent: #f43f5e; --kpi-tint: rgba(244, 63, 94, .10); }
.ec-kpi.kpi-cyan   { --kpi-accent: #06b6d4; --kpi-tint: rgba(6, 182, 212, .10); }

/* Order-status tiles — the dashboard's status strip, restyled to sit alongside
   the KPI cards instead of the old flat link rows. */

/* Colour settings grid (Settings → Global) */
.ec-color-input { display: flex; align-items: center; gap: 10px; }
.brand-color-input {
    width: 60px; height: 38px; padding: 2px;
    border: 1px solid #d1d5db; border-radius: 8px;
    cursor: pointer; background: #fff; flex: 0 0 60px;
}
.ec-color-hex {
    font-size: 13px; font-weight: 600; letter-spacing: .3px;
    color: #3b4060; background: #f5f7fb;
    border: 1px solid #eef1f6; border-radius: 8px;
    padding: 7px 10px; text-transform: uppercase;
}

.ec-chart-box { position: relative; width: 100%; }
.ec-chart-box > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* =====================================================
   Interactive states for the clickable dashboard cards
   These tiles are <a> elements, so without explicit rules their
   hover / focus / selection appearance falls through to browser and
   base-theme defaults (which render as a flat grey wash). Pin all
   three to the brand instead.
   ===================================================== */

/* Selection — brand tint rather than the default blue/grey block. */
::selection      { background: rgba(var(--admin-panel-rgb, 132, 74, 239), .18); color: inherit; }
::-moz-selection { background: rgba(var(--admin-panel-rgb, 132, 74, 239), .18); color: inherit; }

/* Hover: keep the card white and lead with the accent border + lift. */
a.ec-kpi,
a.ec-kpi:link,
a.ec-kpi:visited { background: #fff; }

a.ec-kpi:hover,
a.ec-kpi:focus,
a.ec-kpi:active {
    background: #fff;
    border-color: rgba(var(--admin-panel-rgb, 132, 74, 239), .45);
    box-shadow: 0 12px 24px rgba(var(--admin-panel-rgb, 132, 74, 239), .12);
    text-decoration: none;
}
a.ec-kpi:hover .ec-kpi-icon { transform: scale(1.06); }
.ec-kpi-icon { transition: transform .15s; }

/* Keyboard focus stays visible; mouse clicks don't get a lingering ring. */
a.ec-kpi:focus,
a.ec-status-tile:focus,
.ec-hero-btn:focus { outline: none; }

a.ec-kpi:focus-visible,
a.ec-status-tile:focus-visible,
.ec-hero-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .35);
}

/* Hero buttons sit on the brand banner — lock their states so they never
   pick up a grey/blue default fill. */
.ec-hero-btn:hover,
.ec-hero-btn:focus,
.ec-hero-btn:active { text-decoration: none; }

/* Chart sizes — the wide time-series card gets more room than the doughnut cards,
   which also carry a legend list underneath. */

/* Card header with a supporting subtitle */
.ec-card > .card-header h5 { font-size: 16px; color: #0C111C; }
.ec-card > .card-header small { font-size: 12.5px; display: block; margin-top: 2px; }

/* "View all" link in card headers */

/* Doughnut legend rows sit tight under their chart */
.ec-card .ec-status-list { padding-top: 6px; }
.ec-card .ec-status-list .dot { flex: 0 0 8px; }

/* DataTables tints the whole sorted column (.sorting_1) — reads as an accidental
   highlight rather than a sort cue. Drop the tint; the header arrow already says
   which column is sorted. */
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc { background-color: #fafbfd !important; }

/* KPI / status cards: always white, in every interaction state.
   These are <a> elements, so browsers apply their own affordances — the grey wash
   is Chrome's drag ghost, which appears when a link is dragged rather than clicked.
   user-drag:none stops the ghost; the rest pins the surface so no UA or base-theme
   state can tint it. */
a.ec-kpi,
a.ec-kpi:link,
a.ec-kpi:visited,
a.ec-kpi:hover,
a.ec-kpi:focus,
a.ec-kpi:active,
a.ec-kpi:focus-within,
a.ec-status-tile,
a.ec-status-tile:link,
a.ec-status-tile:visited,
a.ec-status-tile:hover,
a.ec-status-tile:focus,
a.ec-status-tile:active,
a.ec-status-tile:focus-within {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
    user-drag: none;
}
a.ec-kpi *,
a.ec-status-tile * { -webkit-user-drag: none; user-drag: none; }

/* Card tiles are links, not prose. Browsers therefore give them a selection
   highlight (the grey wash) when a drag crosses them. Nothing in any stylesheet
   paints that — it is the UA's own selection layer, so it can only be removed by
   making the tiles unselectable. */
a.ec-kpi,
a.ec-status-tile,
.ec-kpi,
.ec-status-tile {
    -webkit-user-select: none;
    user-select: none;
}
a.ec-kpi::selection,       a.ec-kpi *::selection,
a.ec-status-tile::selection, a.ec-status-tile *::selection { background: transparent; }

/* Compact table for the narrow col-lg-4 panels — smaller avatars and tighter
   padding so a 4-column table still reads well at a third of the width. */

/* Status list rows link through to the filtered order list. */
.ec-status-list a.ec-status-name { color: #3b4060; text-decoration: none; }
.ec-status-list a.ec-status-name:hover { color: var(--admin-panel-color); }

/* ── KPI tiles are <div onclick>, not <a> ────────────────────────────────────
   They were anchors, which is where the grey wash came from: browsers apply
   their own link affordances (drag ghost / selection layer) that no background
   override can reach. Plain divs have no link semantics, so there is nothing to
   grey out. This is how these tiles worked originally. */
.ec-kpi[onclick] { cursor: pointer; }
.ec-kpi, .ec-status-tile { height: auto; }

/* Compact spacing — the panels were carrying a lot of dead vertical space. */
.ec-kpi { padding: 16px 18px 14px; }
.ec-kpi-head { margin-bottom: 8px; }
.ec-kpi-icon { width: 38px; height: 38px; border-radius: 10px; font-size: 19px; }
.ec-kpi-value { font-size: 24px; margin-bottom: 6px; }
.ec-kpi-row { margin-bottom: 0; }

.ec-card > .card-header { padding: 13px 18px; }
.ec-card > .card-body { padding: 14px 18px; }
.ec-card > .card-body.p-0 { padding: 0 !important; }
.ec-status-list li { padding: 6px 4px; font-size: 13px; }

.ec-recent-table thead th { padding: 10px 14px; }

/* ── Equal-height rows ───────────────────────────────────────────────────────
   Cards in a marked row match the tallest card, and their content grows into the
   leftover space so the bottom edges line up — instead of a short card ending
   early and leaving a gap beside its taller neighbour.
   Charts stretch; tables distribute their rows over the available height. */
.ec-equal-row > [class*="col-"] { display: flex; }
.ec-equal-row > [class*="col-"] > .ec-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.ec-equal-row .ec-card > .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ec-equal-row .ec-card > .card-body > .table-responsive { flex: 1 1 auto; }

/* height:100% lets the browser spread the rows over the card's full height. */
.ec-equal-row .ec-recent-table { height: 100%; }

/* min-height keeps Chart.js from ever measuring a zero-height parent mid-layout. */
.ec-equal-row .ec-chart-box { flex: 1 1 auto; height: auto; min-height: 200px; }

/* Eighth KPI accent — categories. */
.ec-kpi.kpi-indigo { --kpi-accent: #4f46e5; --kpi-tint: rgba(79, 70, 229, .10); }

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

.ec-filter-row .ec-filter-label { display: block; }

/* ── Listing row internals ───────────────────────────────────────────────────
   The rows in these tables are built by each page's own JS, which emits the
   legacy `.action-btn` strip and inline-sized <img> thumbnails. Mapping those
   onto the ec-act / ec-list-thumb look here restyles every listing at once,
   instead of rewriting the row builder in ~46 views. */

/* Action strip: each <a> becomes a square icon button. */
.ec-list-table .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}
.ec-list-table .action-btn > a {
    background: transparent;
    color: #8a90a6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.ec-list-table .action-btn > a:hover {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10);
    color: var(--admin-panel-color);
    text-decoration: none;
}

/* Row thumbnails — the JS sets width/height inline, so these need !important. */
.ec-list-table tbody td img:not(.ec-avatar) {
    width: 44px !important;
    height: 44px !important;
    object-fit: cover;
    background: #f5f7fb;
}
/* Rating stars and other inline glyph images must not be resized. */
.ec-list-table tbody td ul.rating img,
.ec-list-table tbody td img.no-thumb {
    width: auto !important;
    height: auto !important;
    border-radius: 0;
}

/* Header select-all cell keeps its inline delete link tidy. */

/* DataTables search + export buttons sit on one line above the table. */
.ec-list-card .dataTables_filter { float: none; text-align: right; margin-bottom: 10px; }
.ec-list-card .dataTables_filter input {
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
    margin-left: 8px;
}
.ec-list-card .dataTables_filter input:focus {
    border-color: var(--admin-panel-color);
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .15);
    outline: none;
}

/* ── Filter card: select2 + actions ──────────────────────────────────────────
   These filters are select2 widgets, which hide the native <select> and insert
   their own container — so styling `.form-control` alone leaves them unstyled.
   Match them to the plain inputs beside them. */
.ec-filter-card .ec-filter-label { display: block !important; }
.ec-filter-card .select2-container--default .select2-selection--single {
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 12px;
}
/* The selected value shares the box with a clear (×) button and the caret. With
   no right padding the label ran underneath both, so it looked cut off and the ×
   sat right against the text. Reserve room for both and ellipsize cleanly. */
.ec-filter-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #0C111C;
    font-size: 14px;
    line-height: 1.4;
    padding: 0 44px 0 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    width: 100%;
    /* style.css:13386 caps every select2 label at `max-width: 107px`, so long
       values were clipped regardless of how wide the field itself was. */
    max-width: none !important;
}

/* Clear button: pulled out of the text flow and parked left of the caret, so the
   two controls never crowd the label or each other. */
.ec-filter-card .select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0 4px;
    float: none !important;
    font-size: 17px;
    line-height: 1;
    font-weight: 400;
    color: #9aa1b4;
    cursor: pointer;
}
.ec-filter-card .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #ef4444;
}
.ec-filter-card .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #b3b9c9; }
.ec-filter-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    right: 8px;
}
.ec-filter-card .select2-container--default.select2-container--focus .select2-selection--single,
.ec-filter-card .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--admin-panel-color);
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .15);
}
/* Dropdown list — the default renders a black highlight bar. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[data-selected="true"] {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .12) !important;
    color: var(--admin-panel-color) !important;
}
.select2-dropdown {
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    overflow: hidden;
}

/* Action row: export dropdown + reset, right-aligned. */
.ec-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.ec-filter-actions .dt-buttons { margin: 0; float: none; }
.ec-filter-actions .dt-buttons .btn,
.ec-filter-actions .dt-button,
#ec-export-mount .dt-buttons .btn,
#ec-export-mount .dt-button {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10) !important;
    border: 1px solid rgba(var(--admin-panel-rgb, 132, 74, 239), .28) !important;
    color: var(--admin-panel-color) !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.ec-filter-actions .dt-buttons .btn:hover,
.ec-filter-actions .dt-button:hover,
#ec-export-mount .dt-buttons .btn:hover,
#ec-export-mount .dt-button:hover {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .18) !important;
}
.ec-btn-ghost {
    background: #fff;
    border: 1px solid #e2e6ef;
    color: #3b4060;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
}
.ec-btn-ghost:hover { background: #f5f7fb; color: #0C111C; }

/* "Show N entries" sits alone above the table now that search moved out. */

/* ============================================================
   Listing page — alignment, checkboxes, actions, dropdowns
   ============================================================ */

/* ── Filter row ──────────────────────────────────────────────────────────────
   Give every field the same two-line rhythm (label, then control) so the search
   input and the select2 widgets sit on a shared baseline, and add column gaps. */
/* Each filter column is a 2-row grid: a fixed 26px label row and a fixed 42px
   control row. Because both track sizes are explicit, every control lands on the
   same baseline whether its label renders, wraps, or is missing entirely — the
   alignment no longer depends on the label's own box. select2's injected
   container and a plain <input> both occupy row 2. */
.ec-filter-card .ec-filter-row > [class*="col-"] {
    display: grid;
    grid-template-rows: 26px 42px;
    align-content: start;
}
/* The actions column is a single full-width row, not a label+control pair. */
.ec-filter-card .ec-filter-row > .col-12 { display: block; }

.ec-filter-card .ec-filter-row .ec-filter-label {
    grid-row: 1;
    display: block !important;
    margin: 0 !important;
    align-self: end;
    padding-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #5a6179;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Row 2 holds the control.
   box-sizing MUST be border-box here: these controls inherit content-box, so
   `width:100%` resolved to 100% of the column's content box PLUS their own padding
   and border — about 26px of overflow each, which swallowed the whole gutter and
   made adjacent fields look welded together. */
.ec-filter-card .ec-filter-row > [class*="col-"] > .form-control:not(.select2-hidden-accessible),
.ec-filter-card .ec-filter-row > [class*="col-"] > .select2-container {
    grid-row: 2;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 42px;
    margin: 0;
}
/* The base theme leaves .select2-container `position: absolute` (it only resets it
   to static inside `.select-box`, a wrapper this layout doesn't use). While
   absolute, `width:100%` resolves against the containing block's PADDING box — the
   full 211px column — instead of its 183px content box, so each widget overflowed
   by exactly the gutter and adjacent filters appeared welded together. Putting it
   back in flow makes 100% mean the content box. */

/* The original <select> stays in the DOM (marked `select2` / `select2-hidden-
   accessible`) purely for accessibility. Never size it: select2 copies its width
   onto the visible container. */
.ec-filter-card .ec-filter-row > [class*="col-"] > select.select2,
.ec-filter-card .ec-filter-row > [class*="col-"] > .select2-hidden-accessible {
    grid-row: 2;
    width: 1px !important;
    max-width: 1px !important;
}
.ec-filter-card .ec-filter-row .select2-container--default .select2-selection--single { height: 42px; }

/* Horizontal breathing room between filter columns.
   The controls fill 100% of their column, so the visible gap is entirely the
   column gutter. My earlier override set 10px — narrower than Bootstrap's own
   15px — which made the fields read as touching. 14px per side gives a clear
   28px channel between adjacent controls. */
.ec-filter-card .ec-filter-row {
    row-gap: 18px;
    margin-left: -14px !important;
    margin-right: -14px !important;
}
.ec-filter-card .ec-filter-row > [class*="col-"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* ── select2 dropdown ────────────────────────────────────────────────────────
   The panel is appended to <body> and sizes to its content, so a long option
   made it wider than the field it belongs to. Clamp it to the trigger's width. */
/* The base theme sets `.select2-container--open .select2-dropdown{min-width:250px}`,
   which floors every panel at 250px and made it overhang a 183px trigger. The panel
   is normally appended to <body>, out of reach of any ancestor selector, so these
   filters pass `dropdownParent: jQuery('.ec-filter-card')` and the panel renders
   inside the card — letting it be scoped here and clearing the floor so select2's
   own inline width (copied from the trigger) applies.
   NOT `dropdownCssClass`: that option lives in select2's full/compat build, and this
   app ships the standard build, where it throws and select2 fails to initialise. */
.ec-filter-card .select2-container--open .select2-dropdown,
.ec-filter-card .select2-dropdown {
    min-width: 0 !important;
    max-width: none;
    box-sizing: border-box;
}
.select2-container .select2-results__option {
    font-size: 13.5px;
    padding: 8px 12px;
    white-space: normal;
    word-break: break-word;
}

/* ── Row checkboxes ──────────────────────────────────────────────────────────
   Deliberately NO appearance/size rules here: `input.ec-check` is already fully
   styled by the ec-* component rules (custom 20px rounded box with a brand fill
   and white tick). Anything declared here would override that and fall back to
   a plain native checkbox. Only layout of the containing cell belongs here. */
/* Header and body checkbox cells must share identical geometry.
   Two things break that by default:
     1. DataTables Responsive gives `td.dtr-control` padding-left:30px — body rows
        only, never the header, so the column visibly steps sideways.
     2. The base theme adds its own padding to `.delete-all`.
   Zero the padding on both and centre the control, so header and rows land on the
   same axis whatever those plugins add. */
/* NOTE: DataTables Responsive REPLACES the class on the first body cell with
   `dtr-control`, so `.ec-check-col` survives on the <th> but never on the <td>.
   The body selectors below therefore target `td.dtr-control` and the first cell
   directly — matching on `.ec-check-col` alone silently missed every row. */
.ec-list-table th.ec-check-col,
.ec-list-table td.ec-check-col,
.ec-list-table th.delete-all,
.ec-list-table td.delete-all,
.ec-list-table > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable > tbody > tr > td.dtr-control {
    max-width: 48px !important;
    padding: 0 !important;
}
/* Responsive draws a green +/- expand pip via ::before on that same cell; it would
   sit under the checkbox. */
.ec-list-table > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { display: none !important; }

/* Centre the control itself rather than relying on text-align alone. */
.ec-list-table th.ec-check-col > input[type="checkbox"],
.ec-list-table td.ec-check-col > input[type="checkbox"],
.ec-list-table > tbody > tr > td.dtr-control > input[type="checkbox"] {
    display: inline-block !important;
}
/* Suppress the theme's pseudo-element checkbox art on any stray trailing label. */
.ec-list-table input[type="checkbox"] + label::before,
.ec-list-table input[type="checkbox"] + label::after { content: none !important; }
.ec-list-table td.ec-check-col label,
.ec-list-table th.ec-check-col label { display: none !important; }

/* ── Action icons ────────────────────────────────────────────────────────────
   One uniform muted strip that picks up the brand on hover, instead of a
   different hue per action (green/purple/cyan/red). */
.ec-list-table .action-btn a i.mdi,
.ec-list-table td > span.action-btn a i.mdi,
.ec-list-table tr td > span.action-btn a i[class*="mdi-"] {
    color: #8a90a6 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
}
.ec-list-table .action-btn a:hover i.mdi,
.ec-list-table td > span.action-btn a:hover i[class*="mdi-"] {
    color: var(--admin-panel-color) !important;
}

/* ── Sorting affordance ──────────────────────────────────────────────────────
   Only show the sort arrow on columns that are actually sortable. */
.ec-list-table thead th.sorting_disabled::before,
.ec-list-table thead th.sorting_disabled::after { display: none !important; }

/* List table top bar: length menu left, record-count info right. Both are
   emitted by DataTables via the `dom` layout string. */
.ec-list-card .ec-dt-top { margin: 0 0 14px; }
.ec-list-card .ec-dt-info { text-align: right; }
.ec-list-card .ec-dt-info .dataTables_info {
    /* DataTables floats this left by default, which pinned it to the left edge of
       its half-width column — i.e. the middle of the card. Unfloat it so the
       column's text-align:right can carry it to the right edge. */
    float: none !important;
    display: block;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}
.ec-list-card .ec-dt-top .dataTables_length { float: none; margin: 0; }
.ec-list-card .ec-dt-top .dataTables_length label { margin: 0; color: #8a90a6; font-size: 13px; }
@media (max-width: 575px) {
    .ec-list-card .ec-dt-info { text-align: left; margin-top: 8px; }
}

/* Date-range picker used as a filter control — make the div look like the inputs
   beside it (it is a <div>, not an <input>, so it gets no form-control sizing). */
.ec-filter-card .ec-daterange {
    display: flex;
    overflow: hidden;
}

/* Legacy checkbox headers.
   Pages not yet structurally ported keep `<th class="delete-all">`, which holds the
   select-all checkbox AND the "All" bulk-delete link. That cell can't centre a lone
   control the way a ported `th.ec-check-col` does, so the header checkbox drifted a
   few px from the rows below it. Where the header is still the legacy cell, anchor
   both header and body cells to the same left offset instead of centring. */
.ec-list-table thead th.delete-all {
    text-align: left !important;
    padding-left: 16px !important;
    white-space: nowrap;
    width: auto !important;
    max-width: none !important;
}
.ec-list-table thead th.delete-all > input[type="checkbox"] { margin: 0 8px 0 0 !important; }
.ec-list-table thead th.delete-all label { margin: 0 !important; font-weight: 600; }

/* Must out-specify the centring override above, which uses
   `table.dataTable.dtr-inline.collapsed > … td.dtr-control` (four classes). */

/* Date-range pickers rendered as a <div> rather than an <input> get no field
   sizing from Bootstrap, so they floated as bare text next to the real controls. */
.ec-filter-card .ec-filter-row #daterange,
.ec-filter-card .ec-filter-row .ec-daterange {
    grid-row: 2;
    box-sizing: border-box !important;
    display: flex !important;
    height: 42px;
    width: 100% !important;
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    padding: 0 10px 0 12px;
    font-size: 14px;
    color: #0C111C;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
.ec-filter-card .ec-filter-row #daterange .fa,
.ec-filter-card .ec-filter-row .ec-daterange .fa { color: #8a90a6; }

/* Export group inside the filter header stays on one line. */
.ec-filter-actions .dt-buttons,
#ec-export-mount .dt-buttons { display: inline-flex; gap: 6px; flex-wrap: wrap; margin: 0; float: none; }

/* Checkbox column: header and body cells must resolve to identical padding, or the
   centred control sits at a different offset in each. `.ec-list-table thead th`
   applies 16px horizontally, so this needs a selector that outranks it on both
   halves of the table. */
table.dataTable.ec-list-table thead th.ec-check-col,
table.dataTable.ec-list-table tbody td.ec-check-col,
table.dataTable.ec-list-table tbody td.dtr-control,
table.dataTable.dtr-inline.collapsed.ec-list-table tbody td.dtr-control {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Centre the control itself rather than relying on the cell's text-align, which the
   theme's positioning rules on checkboxes can defeat in body rows. */
table.dataTable.ec-list-table thead th.ec-check-col > input[type="checkbox"],
table.dataTable.ec-list-table tbody td.ec-check-col > input[type="checkbox"],
table.dataTable.ec-list-table tbody td.dtr-control > input[type="checkbox"] {
    display: block !important;
    margin: 0 auto !important;
    float: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
}

/* Row action controls: pin the table icon size so the glyph set reads uniformly. */
/* The legacy .action-btn cell added its own spacing/colour on the anchors it held;
   ec-actions owns layout now, so neutralise the leftovers. */

/* ------------------------------------------------------------------
   Row action strip — normalised in CSS rather than markup. Pages build their
   action column in several shapes: a Blade <td>, a JS string, an <a>, a
   <button>, or (dynamic notifications) a bare tooltip <i> with its own utility
   colour. Styling the container's children covers all of them uniformly, so a
   page that isn't rewritten still gets the same strip.
   ------------------------------------------------------------------ */
/* NB: the cell itself must stay `table-cell`. Giving a <td> display:flex takes it
   out of the table's box model, so the browser generates a phantom anonymous cell
   for the leftover width — that was the empty bordered column after "Actions".
   Only the inner <span> wrapper (POS builds one) may be a flex row; the controls
   are inline-flex chips, so they line up on their own inside a plain cell. */
table.ec-list-table td.action-btn,
table.ec-list-table td.ec-actions {
    display: table-cell !important;
}
table.ec-list-table span.action-btn,
table.ec-list-table span.ec-actions {
    display: inline-flex; align-items: center; justify-content: flex-start;
}
table.ec-list-table .action-btn > a.ec-act,
table.ec-list-table .action-btn > button.ec-act,
table.ec-list-table .action-btn > i,
table.ec-list-table td.ec-actions > a.ec-act,
table.ec-list-table td.ec-actions > button.ec-act {
    border-radius: 8px;
    background: transparent;
    border: 0;
    margin: 0; padding: 0;
    color: #8a90a6 !important;      /* beats .text-dark / theme link colour */
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
    transition: background .15s, color .15s;
}
table.ec-list-table .action-btn > a > i,
table.ec-list-table .action-btn > button > i,
table.ec-list-table td.ec-actions > a > i { color: inherit !important; }

table.ec-list-table .action-btn > a:hover,
table.ec-list-table .action-btn > button:hover,
table.ec-list-table .action-btn > i:hover,
table.ec-list-table td.ec-actions > a:hover,
table.ec-list-table td.ec-actions > button:hover {
    background: rgba(var(--admin-panel-rgb, 255, 104, 58), .10);
    color: var(--admin-panel-color) !important;
}

/* ------------------------------------------------------------------
   Column overflow. The listings carry DataTables' `nowrap` class, so a cell
   whose column is narrower than its text spills over the neighbouring cell
   instead of wrapping — the overlapping "meshed" text. Cells wrap instead.
   ------------------------------------------------------------------ */
table.ec-list-table.nowrap th,
table.ec-list-table.nowrap td,
table.ec-list-table th,
table.ec-list-table td {
    white-space: normal;   /* wrap at spaces; no mid-word breaks */
    vertical-align: middle;
}
/* Keep the controls themselves on one line. */
table.ec-list-table td.ec-check-col,
table.ec-list-table td.action-btn,
table.ec-list-table td.ec-actions { white-space: nowrap; }

/* Now that cells wrap, DataTables' auto width can squeeze a short-header column
   (e.g. "Type") down to a few characters and break the word mid-way. A floor on
   data columns keeps them readable; the control columns keep their own widths. */
/* Let the row scroll rather than cram when the sum of the floors exceeds the card. */
.ec-list-card .table-responsive { overflow-x: auto; }

/* Thumbnail cells: the row builders wrap the image in a block-level `div.any`,
   which pushed the label onto its own line. Laying the cell out as a flex row
   puts the label beside the thumbnail. */
/* Same rule as the action cell: the <td> stays a table-cell, and the thumbnail
   wrapper goes inline-block so the label sits beside it instead of below. */
table.ec-list-table tbody td > div.any {
    margin: 0 10px 0 0;
    display: inline-block;
    vertical-align: middle;
}
table.ec-list-table tbody td:has(> div.any) { white-space: nowrap; vertical-align: middle; }
/* Keep the name and any trailing verification badge on one line together. */
table.ec-list-table tbody td:has(> div.any) > a,
table.ec-list-table tbody td:has(> div.any) > span { vertical-align: middle; white-space: nowrap; }
table.ec-list-table tbody td > div.any > img { display: block; object-fit: cover; }

/* Some action controls carry their own theme styling (`.delete-btn` ships a red
   pill, POS wraps its strip in a <span>), which outranked the plain chip rules
   above. Pinned so every row control resolves to the same chip. */
table.ec-list-table .action-btn > a.ec-act,
table.ec-list-table .action-btn > button.ec-act,
table.ec-list-table .ec-actions > a.ec-act,
table.ec-list-table .ec-actions > button.ec-act {
    width: 38px !important; height: 38px !important;
    min-width: 38px !important;
    background: transparent !important;
    border: 0 !important; box-shadow: none !important;
    border-radius: 8px !important;
    color: #8a90a6 !important;
    font-size: 20px !important; line-height: 1 !important;
}
table.ec-list-table .action-btn > a.ec-act:hover,
table.ec-list-table .action-btn > button.ec-act:hover,
table.ec-list-table .ec-actions > a.ec-act:hover,
table.ec-list-table .ec-actions > button.ec-act:hover {
    background: rgba(var(--admin-panel-rgb, 255, 104, 58), .10) !important;
    color: var(--admin-panel-color) !important;
}
/* Checkbox column: centre the control in both the header and the body rows. */
table.ec-list-table th.ec-check-col > input[type="checkbox"],
table.ec-list-table td.ec-check-col > input[type="checkbox"] { display: inline-block !important; }
table.ec-list-table td.ec-check-col > label { display: none !important; }

table.ec-list-table th.ec-check-col,
table.ec-list-table td.ec-check-col,
table.ec-list-table td.dtr-control {
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
}
table.ec-list-table th.ec-check-col > input[type="checkbox"],
table.ec-list-table td.ec-check-col > input[type="checkbox"],
table.ec-list-table td.dtr-control > input[type="checkbox"] {
    display: inline-block !important;
    position: static !important;
}

/* Larger action controls, per request — the chip scaled up. */
table.ec-list-table .action-btn > a,
table.ec-list-table .action-btn > button,
table.ec-list-table .action-btn > i,
table.ec-list-table .ec-actions > a,
table.ec-list-table .ec-actions > button,
table.ec-list-table .action-btn > a.delete-btn,
table.ec-list-table .ec-actions > a.delete-btn {
    width: 38px !important; height: 38px !important;
    font-size: 20px !important;
}

/* ------------------------------------------------------------------
   Support inbox tab strip. The theme renders these pills grey; they should
   carry the admin colour like every other active control in the panel.
   ------------------------------------------------------------------ */
#chatTabs.nav-pills {
    background: #f4f6fa;
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
    display: inline-flex;
    flex-wrap: wrap;
}
#chatTabs.nav-pills .nav-item { margin: 0; }
#chatTabs.nav-pills .nav-link {
    background: transparent !important;
    color: #6b7280 !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    font-weight: 600;
    transition: background .15s, color .15s;
}
#chatTabs.nav-pills .nav-link:hover {
    background: rgba(var(--admin-panel-rgb, 255, 104, 58), .10) !important;
    color: var(--admin-panel-color) !important;
}
#chatTabs.nav-pills .nav-link.active {
    background: linear-gradient(135deg,
        var(--admin-panel-color) 0%,
        rgba(var(--admin-panel-rgb, 255, 104, 58), .78) 100%) !important;
    color: var(--admin-panel-contrast, #fff) !important;
    box-shadow: 0 2px 8px rgba(var(--admin-panel-rgb, 255, 104, 58), .30);
}

/* DataTables' autoWidth writes an inline `width` on every <th> from a measurement
   taken before these styles applied, which pinned short-headed columns ("Type")
   at their wrapped width. Releasing it lets the browser size columns from real
   content; the control-column rules below still win, being later and equal weight. */
table.ec-list-table {
    table-layout: auto !important;
    /* Size to content and let .table-responsive scroll, rather than cramming every
       column into the card width — that cramming is what broke vendor names and
       email addresses across lines. min-width keeps short tables full-bleed. */
    width: auto !important;
    min-width: 100%;
}
table.ec-list-table thead th,
table.ec-list-table tbody td { width: auto !important; }

/* Width distribution. The control columns shrink to their content (`width:1%`
   with nowrap is the standard trick), so all leftover width goes to the data
   columns instead of inflating "Actions" — that starvation is what squeezed
   Email Templates' "Type" column down to three broken lines. */
table.ec-list-table th.action-btn,
table.ec-list-table td.action-btn,
table.ec-list-table th.ec-actions,
table.ec-list-table td.ec-actions,
table.ec-list-table thead th:last-child,
table.ec-list-table tbody td:last-child { width: 1% !important; white-space: nowrap !important; }

/* Vendors/users build the identity cell as a bare <img> followed by the name link
   (no `div.any` wrapper), so it needs its own rule. Keeping the cell nowrap holds
   the name and its trailing verification badge on one line beside the avatar. */
table.ec-list-table tbody td:has(> img) { white-space: nowrap !important; }
table.ec-list-table tbody td > img {
    display: inline-block; vertical-align: middle;
}
table.ec-list-table tbody td:has(> img) > a,
table.ec-list-table tbody td:has(> img) > span { vertical-align: middle; }
/* The badge itself is an inline image/icon appended inside the link. */
table.ec-list-table tbody td a > img,
table.ec-list-table tbody td a > i { vertical-align: middle; margin-left: 4px; }

/* Row checkboxes must never carry a bespoke size — the .ec-check control is 20px
   and any inline width knocks it out of alignment with the header checkbox. */
table.ec-list-table input.ec-check[style] { width: 20px !important; height: 20px !important; }

/* The checkbox cell ships a sibling <label> (Bootstrap `col-3 control-label`) that
   the original markup used as the visual box. It is dead weight now that .ec-check
   styles the input directly, and being in-flow it added height below the control —
   which is what pushed the checkbox above the cell's centre. DataTables Responsive
   renames this cell to `dtr-control`, so both class names must be covered. */
table.ec-list-table td.ec-check-col > label,
table.ec-list-table td.dtr-control > label,
table.ec-list-table th.ec-check-col > label { display: none !important; }
table.ec-list-table td.ec-check-col > input[type="checkbox"],
table.ec-list-table td.dtr-control > input[type="checkbox"],
table.ec-list-table th.ec-check-col > input[type="checkbox"] {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    float: none !important;
}

/* Superseded by the labelled-row-button block below, which targets the buttons
   themselves so both disbursement pages resolve to the same pill. */

/* Authoritative chip size. Earlier rules required an `.action-btn`/`.ec-actions`
   container, which the JS-built cells don't always carry — those controls fell back
   to the 30px base in ec-components.css. Targeting .ec-act directly covers every
   page regardless of how its action cell is assembled. */
table.ec-list-table tbody a.ec-act,
table.ec-list-table tbody button.ec-act {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    vertical-align: middle !important;
}
table.ec-list-table tbody a.ec-act > i,
table.ec-list-table tbody button.ec-act > i { line-height: 1 !important; }

/* The chips are flex items inside `.ec-actions`, and the Actions column is
   shrink-to-content (width:1%). Default `flex-shrink:1` therefore compressed them
   below the declared 38px — the width rule was matching all along, but flex layout
   overrode the used width. Pinning the flex basis stops the shrink. */
table.ec-list-table .ec-actions > a.ec-act,
table.ec-list-table .ec-actions > button.ec-act,
table.ec-list-table .action-btn > a.ec-act,
table.ec-list-table .action-btn > button.ec-act,
table.ec-list-table tbody a.ec-act,
table.ec-list-table tbody button.ec-act { flex: 0 0 38px !important; }
/* Give the strip room to lay the chips out at full size. */
table.ec-list-table .action-btn,
table.ec-list-table .ec-actions { min-width: max-content !important; }

/* Cross axis: the chip must not be sized by the flex line either. */
table.ec-list-table .ec-actions > a.ec-act,
table.ec-list-table .ec-actions > button.ec-act,
table.ec-list-table .action-btn > a.ec-act,
table.ec-list-table .action-btn > button.ec-act,
table.ec-list-table tbody a.ec-act,
table.ec-list-table tbody button.ec-act {
    min-height: 38px !important;
    max-height: 38px !important;
    align-self: center !important;
}

/* Identity cells that pair an avatar with a name + secondary line (employee's
   "Restaurant Info", vendor/user rows). The text block sits beside the image
   rather than being pushed under it by a bare <br>. */
table.ec-list-table tbody td > .ec-id-text {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.35;
    white-space: nowrap;
}
table.ec-list-table tbody td > .ec-id-text > .ec-id-name { display: block; }
table.ec-list-table tbody td > .ec-id-text > .ec-id-sub {
    display: block;
    font-size: 12px;
    color: #8a90a6;
}
/* Avatars in identity cells are round and evenly sized. */

/* ==================================================================
   DataTables Responsive corrections
   ================================================================== */

/* Responsive tags the FIRST column `dtr-control`. That is the checkbox column only
   on tables that have bulk select; on Attributes / Review Attributes it lands on
   "Name", which then inherited the 48px width and centring meant for a checkbox.
   Those cells are restored to normal data-cell behaviour. */
table.ec-list-table td.dtr-control:not(:has(> input[type="checkbox"])),
table.ec-list-table th.dtr-control:not(:has(> input[type="checkbox"])) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
    padding: 14px !important;
}

/* Responsive also HIDES columns once the table outgrows its container — that is why
   Actions vanished on wide tables and why the remaining columns were squeezed until
   short headers like "Type" broke over three lines. Every column stays visible and
   the card scrolls sideways instead. */
table.ec-list-table > thead > tr > th,
table.ec-list-table > tbody > tr > td { display: table-cell !important; }
table.ec-list-table > tbody > tr.child { display: none !important; }

/* With all columns present, a floor keeps data columns readable; control columns
   stay shrink-to-fit. */
/* A fixed floor either starves columns on narrow tables or overflows the card on
   wide ones. `min-content` is the right primitive: no column may be narrower than
   its longest word (so no mid-word breaks, no "Ty pe"), while the browser still
   distributes the remaining width naturally and the table stays inside the card. */
table.ec-list-table th,
table.ec-list-table td { min-width: min-content; }
table.ec-list-table th.ec-check-col,
table.ec-list-table td.ec-check-col,
table.ec-list-table td.dtr-control:has(> input[type="checkbox"]) { min-width: 48px !important; width: 48px !important; }
table.ec-list-table th.action-btn,
table.ec-list-table td.action-btn,
table.ec-list-table th.ec-actions,
table.ec-list-table td.ec-actions,
table.ec-list-table thead th:last-child,
table.ec-list-table tbody td:last-child { min-width: 0 !important; }

/* ------------------------------------------------------------------
   Labelled row buttons (the payout / disbursement flows).
   The two disbursement pages build their action cell differently — one wraps the
   buttons in a <span class="action-btn">, the other emits a bare <td> — so container
   based rules styled only one of them. Targeting the buttons themselves gives both
   pages the same compact pill set, and replaces the theme's mixed teal/navy/orange
   variants with the admin palette.
   ------------------------------------------------------------------ */
table.ec-list-table tbody a.btn,
table.ec-list-table tbody button.btn {
    display: inline-block !important;
    width: auto !important; height: auto !important;
    min-width: 0 !important; max-height: none !important;
    padding: 7px 14px !important;
    margin: 3px 4px 3px 0 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    transition: filter .15s, background .15s;
}
/* Primary money action carries the brand colour. */
table.ec-list-table tbody a.btn[name$="_view"],
table.ec-list-table tbody a.btn[name$="_pay"] {
    background: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
}
/* Cancelling a request is destructive — soft red, not a solid slab. */
table.ec-list-table tbody a.btn[name$="_reject_request"] {
    background: rgba(239, 68, 68, .10) !important;
    color: #dc2626 !important;
    border-color: rgba(239, 68, 68, .25) !important;
}

.ec-card,
.ec-list-card,
.ec-filter-card {
    background: #fff !important;
}
/* Inner sections must not square off the rounded corners. */
.ec-card > .card-header,
.ec-list-card > .card-header,
.ec-filter-card > .card-header {
    border-radius: 16px 16px 0 0 !important;
    background: transparent !important;
    border-bottom: 1px solid #f1f3f7 !important;
}
.ec-card > .card-body:last-child,
.ec-list-card > .card-body:last-child,
.ec-filter-card > .card-body:last-child { border-radius: 0 0 16px 16px !important; }

.ec-cat-chip {
    display: inline-block;
    background: #f5f7fb;
    color: #3b4060;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 500;
}

.ec-recent-table tbody td.redirecttopage,
.ec-recent-table tbody td { color: #0C111C !important; }
.ec-recent-table tbody td a { color: var(--admin-panel-color) !important; font-weight: 600; }
.ec-recent-table tbody td a:hover { text-decoration: underline; }
.ec-recent-table tbody td.redirecttopage { cursor: pointer; }
.ec-recent-table tbody td i.fa-shopping-cart { color: #8a90a6 !important; }

/* ==================================================================
   Corrections
   ================================================================== */

/* Toggle knob. The theme's `.slider:before` pins the knob with top:1px AND
   bottom:1px at 19px square inside a 20px track, so it never sits centred. Centring
   from the middle instead removes the dependency on those offsets entirely; the
   checked state has to carry the Y translation too or it would be dropped. */
table.ec-list-table .switch .slider::before,
table.ec-list-table .switch .slider:before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 2px !important;
    right: auto !important;
    bottom: auto !important;
    width: 16px !important;
    height: 16px !important;
    background: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .18) !important;
    transform: translateY(-50%) !important;
    transition: transform .18s ease !important;
}
table.ec-list-table .switch input:checked + .slider::before,
table.ec-list-table .switch input:checked + .slider:before {
    transform: translate(16px, -50%) !important;
}

/* Action glyphs at 20px. */
table.ec-list-table tbody a.ec-act,
table.ec-list-table tbody button.ec-act,
table.ec-list-table .ec-act { font-size: 20px !important; }
table.ec-list-table tbody a.ec-act > i,
table.ec-list-table tbody button.ec-act > i,
table.ec-list-table .ec-act > i { font-size: 20px !important; }

/* Date-range control: the caret sat hard against the label. Push it to the far
   right of the field so the control reads like the other filter inputs. */
.ec-filter-row .ec-daterange,
.ec-filter-row #daterange {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.ec-filter-row .ec-daterange > span,
.ec-filter-row #daterange > span { flex: 1 1 auto; }
.ec-filter-row .ec-daterange > .fa-caret-down,
.ec-filter-row #daterange > .fa-caret-down {
    margin-left: auto !important;
}

/* Payout rows: the restaurants page laid its labelled buttons out inline because the
   strip is inline-flex, which ignores the <br> separators the markup uses. Making the
   container a block restores the stacked layout the drivers page already shows. */
table.ec-list-table .action-btn:has(> a.btn),
table.ec-list-table .ec-actions:has(> a.btn) {
    display: block !important;
    white-space: normal !important;
}

/* Underline tab strip — `.ec-lang-tabs`. Advertisement Requests and the Support
   inbox use it instead of the pill strip. */
ul.nav-tabs.ec-lang-tabs,
.ec-lang-tabs {
    display: flex !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #eef0f4 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
    gap: 0 !important;
}
.ec-lang-tabs .nav-item { background: transparent !important; margin: 0 !important; }
.ec-lang-tabs .nav-link,
.ec-lang-tabs .nav-item .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 10px 16px !important;
    box-shadow: none !important;
}
.ec-lang-tabs .nav-link:hover { color: var(--admin-panel-color) !important; }
.ec-lang-tabs .nav-link.active,
.ec-lang-tabs .nav-item .nav-link.active,
.ec-lang-tabs .show > .nav-link {
    color: var(--admin-panel-color) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--admin-panel-color) !important;
    box-shadow: none !important;
}

/* List-card header: the card-body below it already carries 20px padding, and the
   DataTables top bar adds its own margin, which stacked into a large dead gap under
   the title. Trimmed so the header sits close to the table controls. */
.ec-list-card > .card-header {
    padding: 16px 20px !important;
    margin-bottom: 0 !important;
}
.ec-list-card > .card-body { padding-top: 12px !important; }
.ec-list-card .dataTables_wrapper > .ec-dt-top { margin-top: 0 !important; }
.ec-list-card .table-responsive.m-t-10 { margin-top: 0 !important; }

/* Action strip: chips carried a right margin plus the flex gap, which read as loose
   spacing between icons on rows with several actions. One source of spacing only. */
table.ec-list-table .action-btn,
table.ec-list-table .ec-actions { gap: 0 !important; }
table.ec-list-table tbody a.ec-act,
table.ec-list-table tbody button.ec-act,
table.ec-list-table .action-btn > a.ec-act,
table.ec-list-table .ec-actions > a.ec-act { margin: 0 !important; }

/* ------------------------------------------------------------------
   Dashboard table cells
   ------------------------------------------------------------------ */

/* Identity cell: avatar and name on one line, so the thumbnail needs no column. */
.ec-recent-table tbody td.ec-id-cell {
    display: flex !important;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.ec-recent-table .ec-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 36px;
    background: #f1f3f7;
}
.ec-recent-table .ec-avatar-fallback {
    display: inline-flex; align-items: center; justify-content: center;
    color: #9aa1b4; font-size: 22px;
}
.ec-recent-table td.ec-id-cell > span,
.ec-recent-table td.ec-id-cell > a { font-weight: 600; }

/* Star rating: warm amber, not the brand red. */
.ec-recent-table .rating__item::before,
.ec-recent-table .rating__item,
.ec-recent-table .rating .rating__item { color: #d5d9e2 !important; }
.ec-recent-table .rating[data-rating="1"] .rating__item:nth-child(-n+1),
.ec-recent-table .rating[data-rating="2"] .rating__item:nth-child(-n+2),
.ec-recent-table .rating[data-rating="3"] .rating__item:nth-child(-n+3),
.ec-recent-table .rating[data-rating="4"] .rating__item:nth-child(-n+4),
.ec-recent-table .rating[data-rating="5"] .rating__item:nth-child(-n+5) { color: #f5a524 !important; }

/* Recent Orders / Payouts read as empty because several cells carry no value and the
   rows are tall. Tighter rows, and an em dash marks a genuinely empty cell. */
.ec-recent-table tbody td:empty::after {
    content: "\2014";
    color: #c2c7d4;
}

/* Dashboard action cell: both tables build their edit control differently (one wraps
   it in an <a>, one did not), which is why the two pencils resolved to different
   colours. The chip styling is pinned here so they match. */
.ec-recent-table td.ec-act-cell { text-align: left; }
.ec-recent-table td.ec-act-cell > a.ec-act {
    width: 34px !important; height: 34px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    border-radius: 8px;
    color: #8a90a6 !important;
    font-size: 18px !important;
    transition: background .15s, color .15s;
}
.ec-recent-table td.ec-act-cell > a.ec-act:hover {
    background: rgba(var(--admin-panel-rgb, 255, 104, 58), .10);
    color: var(--admin-panel-color) !important;
}

.ec-form-card > .card-header {
    background: #fff !important;
    padding: 16px 20px !important;
}
.ec-form-card > .card-header h5 { margin: 0; }
.ec-form-card > .card-body { padding: 20px !important; }

.ec-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #3b4060;
    margin-bottom: 6px;
}
.ec-form-help { font-size: 12px; color: #9aa1b4; margin-top: 4px; }
/* Divider between logical groups inside a section */
/* Aligns a label-less control (toggle, button) with the input line of a neighbour
   that has an .ec-form-label above it. */
.ec-label-offset { margin-top: 26px; }
/* Legacy control-labels inside a converted card follow the same scale. */
.ec-form-card label.control-label { font-size: 13px; font-weight: 600; color: #3b4060; }

.ec-form-card .form-control {
    background: #fff;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    min-height: 42px;
    font-size: 14px;
    color: #0C111C;
}
.ec-form-card textarea.form-control { min-height: auto; }
.ec-form-card .form-control:focus {
    background: #fff;
    border-color: var(--admin-panel-color);
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 255, 104, 58), .15);
}
/* select2 controls inside a form card match the native inputs. */
.ec-form-card .select2-container--default .select2-selection--single {
    height: 42px; background: #fff; border: 1px solid #e2e6ef; border-radius: 10px;
    display: flex; align-items: center;
}
.ec-form-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.4; padding-left: 12px; padding-right: 28px; color: #0C111C; font-size: 14px;
}
.ec-form-card .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 8px; }
.ec-form-card .select2-container--open .select2-selection--single,
.ec-form-card .select2-container--focus .select2-selection--single {
    border-color: var(--admin-panel-color);
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 255, 104, 58), .15);
}

/* A titled group inside a long form. The title sits on the section's top border. */
.ec-section {
    position: relative;
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    padding: 30px 22px 10px;
    margin-bottom: 28px;
}
.ec-section-title {
    display: inline-block;
    background: var(--admin-panel-color);
    color: var(--admin-panel-contrast, #fff);
    font-size: 12px;
    letter-spacing: .04em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 8px; border: none;
}
.ec-section-title i { color: inherit; }
.ec-section > .ec-section-title:first-child { position: absolute; top: -14px; left: 20px; margin: 0; }

/* ------------------------------------------------------------------
   Settings/form field layout. The converted screens still carry the theme's
   `form-group row` with a `col-N` label beside a `col-M` input. Here the label
   stacks above the input and two fields run per row, done in CSS rather than by
   rewriting ~180 field blocks — CSS keeps it reversible and cannot desync the
   markup. Only .form-group children become grid cells; tables, checkbox rows,
   image uploads and anything else span the full width so nothing complex gets
   squeezed into half a row.
   ------------------------------------------------------------------ */
.form-page .ec-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    align-content: start;
}
/* Full width only for the things that actually need it. The previous blanket
   `> *:not(.form-group)` also caught .ec-section-title, which is absolutely
   positioned onto the section's top border — giving it a grid area pushed the
   fields down and left a large gap under the pill. */
/* Branding wraps its columns in a bare .row. Must NOT match .form-group.row —
   the shared template gives every field `form-group row width-100`, so spanning
   those collapsed all the two-per-row layouts to one field per row. */
.form-page .ec-section > .row:not(.form-group),
.form-page .ec-section > table,
.form-page .ec-section > .table-responsive,
.form-page .ec-section > .form-check,
.form-page .ec-section > .ec-form-actions,
.form-page .ec-section > .ec-map-picker,
.form-page .ec-section > .form-group.ec-span-all,
/* A toggle row is a full-width statement, not a half-width field. Letting it
   occupy a single cell pushed the pair of fields after it onto separate rows. */
.form-page .ec-section > .form-group.switch-box { grid-column: 1 / -1; }

/* Label above input, not beside it. The detail-page rules further down force a
   180px label column beside its input with !important (they fix the label/value
   gap on view screens, which share the .restaurant_payout_create wrapper).
   Inside .ec-section we want the stacked layout instead, so these carry
   !important too and are one class more specific — .form-page .ec-section
   .form-group.row > label .control-label (0,5,1) beats
   .row.restaurant_payout_create .form-group.row > label.control-label (0,4,1). */
.page-wrapper.form-page .ec-section .form-group.row,
.page-wrapper.form-page .ec-section .form-group {
    display: block !important;
    margin-left: 0;
    margin-right: 0;
}
.page-wrapper.form-page .ec-section .form-group.row > label.control-label,
.page-wrapper.form-page .ec-section .form-group > label.control-label {
    display: block;
    width: 100%;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #3b4060;
}
.page-wrapper.form-page .ec-section .form-group.row > div[class*="col-"],
.page-wrapper.form-page .ec-section .form-group.row > div:not(label) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}
/* The detail-page rule `.restaurant_payout_create .form-group.row` gives each
   label/value pair a bottom rule, which is right for a view screen but drew a
   stray line under every field on these forms. Sections own their borders here;
   fields must not add their own. */
.page-wrapper.form-page .ec-section .form-group.row,
.page-wrapper.form-page .ec-section .form-group,
.page-wrapper.form-page .ec-section .form-check {
    border-bottom: 0 !important;
    border-top: 0 !important;
}

/* The card is a plain white surface with no outline, so the only visible
   borders are the ec-section boxes inside; an outline would double up with them. */
.page-wrapper.form-page > .container-fluid > .card.ec-form-card:has(.ec-section),
.page-wrapper.form-page .card.ec-card.ec-form-card:has(.ec-section) {
    border: 0 !important;
    box-shadow: none !important;
}

/* Toggle rows: the theme paints .switch-box-inner with a pale blue panel
   (#ecf3fb), which reads as a highlighted/selected state inside our sections.
   Flatten it so the row sits on the card like every other field. */
.page-wrapper.form-page .ec-section .switch-box .switch-box-inner {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    /* Label, info icon and toggle sit together as one group — the toggle used to
       be pushed to the far right, leaving a wide dead gap after the label. */
    justify-content: flex-start;
    gap: 8px;
    min-height: 34px;
}
/* The theme sizes .switch as a 40x21 floated box. Making the parent a flex
   container took it out of flow and collapsed it to nothing, so the toggle
   vanished — restore explicit size and push it to the right with margin
   instead of the float. */
.page-wrapper.form-page .ec-section .switch-box .switch {
    float: none !important;
    /* clear of the info icon rather than butted against it, and centred on the
       label's line instead of inheriting the theme's `margin: auto` */
    margin: 0 0 0 60px !important;
    align-self: center;
    flex: 0 0 40px;
    width: 40px !important;
    height: 21px !important;
    position: relative;
    order: 3;
}
.page-wrapper.form-page .ec-section .switch-box .switch-box-inner > label.control-label {
    margin-bottom: 0 !important;
    flex: 0 1 auto;
    align-self: center;
    line-height: 1.2;
}

/* The tooltip info glyph rendered as a large filled black circle. Make it a
   small muted hint that sits beside its label. */
/* Sits directly after its label as a small brand-tinted circle — readable as a
   hint, without the large black disc the theme rendered. Sized and centred as a
   flex item so it lines up on the label's centre line rather than its baseline. */
.page-wrapper.form-page .ec-section i.fa-info,
.page-wrapper.form-page .ec-section i.fa-info-circle {
    font-size: 10px !important;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: rgba(var(--admin-panel-rgb, 255, 104, 58), .14) !important;
    color: var(--admin-panel-color) !important;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin: 10px 0 0 0px;
    order: 2;
    cursor: help;
}

/* The theme's help text -> ec-form-help appearance. */
.form-page .ec-section .form-text.text-muted {
    font-size: 12px;
    color: #9aa1b4 !important;
    margin-top: 4px;
}

/* Checkbox rows read as "[box] Label" on one line (.ec-pay-check) — the theme's
   col-N on the label was stacking it under the box and leaving it at a quarter
   width. */
.page-wrapper.form-page .ec-section .form-check {
    flex-wrap: wrap;
    /* Bootstrap indents .form-check by 1.25rem, which left the checkbox row
       sitting ~20px right of the field labels below it. */
    padding-left: 0 !important;
    margin-left: 0;
}
.page-wrapper.form-page .ec-section .form-check > label.control-label {
    flex: 0 0 auto !important;
    max-width: none !important;
}
.page-wrapper.form-page .ec-section .form-check > .form-text.text-muted {
    flex: 1 0 100%;
    margin-top: 2px;
}

/* A few screens (admin commission, bulk update) keep a save row per section
   rather than one for the page. Span the grid and sit it flush on the
   section's bottom edge so it reads as that section's footer. */
.page-wrapper.form-page .ec-section > .ec-form-actions {
    grid-column: 1 / -1;
    margin: 8px -22px -10px;
    padding: 14px 22px;
}

@media (max-width: 767px) {
    .form-page .ec-section { grid-template-columns: 1fr; }
}

/* Bottom action bar of a form card. */
.ec-form-actions {
    border-top: 1px solid #eef0f4;
    padding: 16px 20px;
    text-align: center;
}
.ec-form-actions .btn { min-width: 130px; justify-content: center; }
.ec-form-actions .ec-btn-ghost { margin-left: 8px; }

/* Image upload preview. */
.ec-form-card .placeholder_img_thumb img,
.ec-upload-thumb img { max-width: 200px;
    object-fit: cover;
    background: #f5f7fb; padding: 4px;
    border: 1px solid #eef0f4;
}

/* Styled file input — hides the native control behind a dashed upload box,
   shared by every converted form.
   Markup: <label class="ec-upload" data-placeholder="…">
             <input type="file" …>
             <i class="mdi mdi-cloud-upload-outline"></i>
             <span class="ec-upload-text">…</span>
             <span class="ec-upload-hint">…</span></label>
   ec-form.js swaps .ec-upload-text for the chosen file name on change. */
.ec-upload {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    margin: 0;
    background: #fafbfd;
    border: 1.5px dashed #d0d5de;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ec-upload:hover {
    border-color: var(--admin-panel-color);
    background: rgba(var(--admin-panel-rgb, 255, 104, 58), .04);
}
.ec-upload input[type="file"] { display: none; }
.ec-upload > i {
    font-size: 22px;
    color: var(--admin-panel-color);
    flex: 0 0 auto;
}
.ec-upload-text {
    font-size: 13.5px;
    font-weight: 600;
    color: #3b4060;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-upload-hint { font-size: 12px; color: #9aa1b4; margin-left: auto; flex: 0 0 auto; }
.ec-upload.has-file { border-style: solid; border-color: rgba(var(--admin-panel-rgb, 255, 104, 58), .45); }

/* Thumbnail shown under an .ec-upload once an image exists or is picked.
   The legacy *_img_thumb hooks are kept as aliases so the existing upload
   handlers can keep writing to the same containers. */
.brand-thumb img,
.logo_img_thumb img,
.favicon_img_thumb img,
.placeholder_img_thumb img {
    height: 56px !important;
    width: auto !important;
    max-width: 260px;
    object-fit: contain;
    background: #f5f7fb;
    padding: 6px;
    border: 1px solid #eef0f4;
}

/* Primary form button. */
.ec-btn-brand {
    background: var(--admin-panel-color);
    color: var(--admin-panel-contrast, #fff);
    border: none;
    border-radius: 10px;
    height: 42px;
    padding: 0 16px;
    font-weight: 600;
    font-size: 13.5px;
    display: inline-flex; align-items: center; gap: 5px;
    box-shadow: 0 4px 10px rgba(var(--admin-panel-rgb, 255, 104, 58), .22);
}
.ec-btn-brand:hover {
    color: var(--admin-panel-contrast, #fff);
    box-shadow: 0 8px 18px rgba(var(--admin-panel-rgb, 255, 104, 58), .32);
}

/* Detail / view page primitives. */
.ec-detail-profile { display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap; }
.ec-detail-avatar {
    flex-shrink: 0; width: 96px; height: 96px;
    border-radius: 14px; overflow: hidden; background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
}
.ec-detail-avatar img { width: 100%; height: 100%; }
.ec-detail-info { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; }

/* Detail rows — label/value pairs inside a view card. */
.ec-detail-row {
    display: flex; align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid #f1f2f6;
    gap: 16px;
}
.ec-detail-row:last-child { border-bottom: none; }
.ec-detail-label { flex: 0 0 160px; font-size: 13px; font-weight: 600; color: #6b7280; }
.ec-detail-value { flex: 1; font-size: 14px; color: #0C111C; word-break: break-word; }
/* A referenced record that no longer exists. */
/* Brand-tinted inline note. */
.ec-info-note {
    display: flex; align-items: center; gap: 8px;
    color: #374151; padding: 4px 20px 8px;
    font-size: 13.5px; margin: 0; max-width: 100%;
}
.ec-info-note i { color: var(--admin-panel-color); font-size: 18px; flex-shrink: 0; }
.ec-info-note a { color: var(--admin-panel-color); font-weight: 600; text-decoration: underline; }

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

.listings-page fieldset {
    position: relative;
    border: 1px solid #e2e6ef !important;
    border-radius: 10px !important;
    padding: 30px 22px 10px !important;
    margin-bottom: 28px !important;
    background: #fff;
}
.restaurant_payout_create fieldset > legend,
.restaurant_info-section fieldset > legend,
.form-page fieldset > legend,
.listings-page fieldset > legend {
    position: absolute;
    top: -14px; left: 20px;
    display: inline-block;
    border: none !important;
    margin: 0 !important;
}

.form-page .badge, .listings-page .badge,
.order_edit-genrl .badge, .order_detail-top-box .badge {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    border: 0 !important;
    box-shadow: none !important;
}
.form-page .badge-success, .listings-page .badge-success,
.order_edit-genrl .badge-success { background: #e5f7ed !important; color: #1a7f4c !important; }
.form-page .badge-warning, .listings-page .badge-warning,
.order_edit-genrl .badge-warning { background: #fef3d5 !important; color: #a86400 !important; }
.form-page .badge-danger, .listings-page .badge-danger,
.order_edit-genrl .badge-danger { background: #fdecec !important; color: #b91c1c !important; }
.form-page .badge-info, .form-page .badge-primary,
.listings-page .badge-info, .listings-page .badge-primary { background: #eef0f4 !important; color: #5a6179 !important; }

.ec-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; }
.ec-filter-row > [class*="col-"] {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0;
}
.ec-filter-row > [class*="col-"]:first-child { flex: 2 1 0 !important; }
/* The date-range column keeps room for its full label ("Aug 17, 2026 - Aug 18, 2026" plus icon
   and caret); the other filters divide what is left, and the row wraps below that. */
.ec-filter-row > [class*="col-"]:has(> #daterange, > .ec-daterange) { min-width: 280px; }

.settings-card-link { display: block; color: inherit; text-decoration: none; }
.settings-card-link:hover { text-decoration: none; color: inherit; }
.settings-card {
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.settings-card-link:hover .settings-card {
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
    border-color: var(--admin-panel-color) !important;
    transform: translateY(-1px);
}
.settings-card .card-body { padding: 20px !important; }
.settings-card-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.settings-card h5 { font-size: 15px; color: #0C111C; }
.settings-card p { font-size: 12.5px; line-height: 1.5; }
.settings-card-arrow { color: #9ca3af; font-size: 22px; line-height: 1; }
.settings-card-link:hover .settings-card-arrow { color: var(--admin-panel-color); }

.payment-top-tab ul.nav-tabs.ec-lang-tabs,
.payment-top-tab .ec-lang-tabs {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    /* The underline-strip rule sets `gap: 0 !important`, which left the gateway
   chips butted together with no spacing; use 8px. */
    gap: 8px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    padding: 4px 0 !important;
}
.payment-top-tab .ec-lang-tabs .nav-item { margin: 0 !important; }
.payment-top-tab .ec-lang-tabs .nav-link {
    display: flex !important;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2e6ef !important;
    border-radius: 9px !important;
    padding: 8px 14px !important;
    background: #fff !important;
    font-size: 13.5px !important;
    white-space: nowrap;
}
.payment-top-tab .ec-lang-tabs .nav-link.active,
.payment-top-tab .ec-lang-tabs .nav-link:hover {
    border-color: var(--admin-panel-color) !important;
    background: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
}
/* The generic `.form-page .badge-success` rule paints these green with
   !important, so these carry it too — gateway badges are solid brand, inverted
   to white on the active chip. */
.payment-top-tab .ec-lang-tabs .nav-link .badge,
.payment-top-tab .ec-lang-tabs .nav-link .badge-success {
    margin: 0 !important;
    background: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
    -webkit-text-fill-color: var(--admin-panel-contrast, #fff) !important;
}
.payment-top-tab .ec-lang-tabs .nav-link.active .badge,
.payment-top-tab .ec-lang-tabs .nav-link.active .badge-success,
.payment-top-tab .ec-lang-tabs .nav-link:hover .badge,
.payment-top-tab .ec-lang-tabs .nav-link:hover .badge-success {
    background: #fff !important;
    color: var(--admin-panel-color) !important;
    /* the hovered chip forces a white text fill on everything inside it; the badge keeps its own */
    -webkit-text-fill-color: var(--admin-panel-color) !important;
}

.ec-dep-hidden { display: none !important; }

.ec-detail-value.address .res-search-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* row gap matches mb-4 so stacked address rows are not flush */
    gap: 24px 16px;
    margin: 0;
    align-items: start;
}
.ec-detail-value.address .res-search-list > .transactions-list-wrap {
    max-width: 100% !important;
    flex: none !important;
    width: auto;
    padding: 0;
    margin-top: 0 !important;
}
@media (max-width: 991px) {
    .ec-detail-value.address .res-search-list { grid-template-columns: 1fr; }
}

/* Driver Details + Bank Details side by side.
   `.row.restaurant_payout_create` forces display:block and width:100% with
   !important, which is why Bootstrap columns had no effect here. As grid items
   inside .ec-detail-pair they size to their track instead. */
.ec-detail-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    align-items: start;
}
.ec-detail-pair > .row.restaurant_payout_create {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0;
}
@media (max-width: 991px) {
    .ec-detail-pair { grid-template-columns: 1fr; }
}

/* The paired detail blocks: give them room below the KPI strip, and cancel the
   legacy `*-inner` -10px margin so their edges line up with the cards above
   (they were sitting at x=285 against the KPI row's 295). */
.ec-detail-pair { margin-top: 24px; }
.ec-detail-pair .restaurant_payout_create-inner,
.ec-detail-pair .page-inn {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Page-head buttons are one size. .ec-head-btn was 49px tall with 14px text
   against .ec-btn-ghost's 42px / 13.5px, so the pair looked mismatched. */
.ec-page-head .ec-head-btn,
.ec-page-head .btn.ec-head-btn {
    height: 42px;
    padding: 0 16px !important;
    font-size: 13.5px !important;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 10px;
}

.ec-kpi.ec-kpi-stat { display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.ec-kpi.ec-kpi-stat .ec-kpi-icon {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px;
    background: var(--kpi-tint); color: var(--kpi-accent);
    display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0;
}
.ec-kpi.ec-kpi-stat .ec-kpi-body { min-width: 0; }
.ec-kpi.ec-kpi-stat .ec-kpi-value { font-size: 24px; font-weight: 800; color: #0C111C; line-height: 1.1; margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-kpi.ec-kpi-stat .ec-kpi-label { font-size: 13px; color: #5a6179; font-weight: 600; margin: 0; }

.swal2-popup.ec-swal { border-radius: 16px; font-family: inherit; padding: 28px 24px 24px; }
.swal2-popup.ec-swal .swal2-html-container { font-size: 15px; color: #0C111C; line-height: 1.5; }
.swal2-popup.ec-swal .swal2-styled { border-radius: 10px; font-weight: 700; font-size: 14px; padding: 9px 22px; box-shadow: none !important; margin: 0 6px; }
.swal2-popup.ec-swal .swal2-cancel { background: #F6F8FB !important; color: #44506A !important; border: 1px solid #E4E7EE !important; }
.swal2-popup.ec-swal .swal2-icon { margin: 0 auto 14px; transform: scale(.9); }

/* Identity cell used by the roles listing: round initial avatar + name (+ a crown
   badge on the locked Super Administrator row). The avatar sizing lived only in the
   partial rule above, and .ec-seller / .ec-seller-name / .ec-verified-badge had no
   rules at all, so the cell rendered as plain text. */
.ec-seller { display: inline-flex; align-items: center; min-width: 0; line-height: 1; }
.ec-seller-avatar,
.ec-avatar-fallback {
    width: 36px; height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(var(--admin-panel-rgb, 255, 104, 57), .14);
    color: var(--admin-panel-color);
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}
.ec-seller-name {
    font-size: 13.5px;
    color: #3b4060;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.ec-seller-name:hover { color: var(--admin-panel-color); text-decoration: none; }
.ec-verified-badge { color: #22c55e; font-size: 15px; vertical-align: middle; margin-left: 4px; }

/* ── Role permissions popup: allowed permissions shown as ticked labels, grouped by
      menu, so it reads like the role form instead of a wall of raw slugs. ────────── */
.perm-scroll { max-height: 60vh; overflow-y: auto; }
.perm-table th { font-weight: 600; }
.perm-table td { vertical-align: middle; }
.perm-table td:first-child { width: 34%; white-space: nowrap; }
.perm-allowed {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 3px 14px 3px 0;
    font-size: 13px;
    color: #4a4a4a;
    white-space: nowrap;
}
.perm-allowed .mdi-check-circle { color: var(--admin-panel-color); font-size: 16px; line-height: 1; }



/* Roles listing: the permission count is a button that opens the role's permission
   list, so it is outlined in the brand colour rather than looking like a grey label. */
.ec-cat-chip.ec-count-chip {
    background: #fff;
    border: 1px solid var(--admin-panel-color);
    color: var(--admin-panel-color);
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
    transition: background .15s, color .15s;
}
.ec-cat-chip.ec-count-chip:hover,
.ec-cat-chip.ec-count-chip:focus {
    background: var(--admin-panel-color);
    color: var(--admin-panel-contrast, #fff);
}
.ec-cat-chip.ec-count-chip i { font-size: 14px; }


/* Token bridge: foodie components read --admin-panel-color; map them onto
   poolmate's --brand tokens so applyAdminTheme() recolors everything. */
:root {
    --admin-panel-color: var(--brand);
    --admin-panel-rgb: var(--brand-rgb);
    --admin-panel-contrast: #ffffff;
}
/* ============================================================
   Foodie shell port — Top bar + Page shell + Dynamic brand color
   (extracted from foodie-admin style.css 5049-5222, 5638-5826)
   ============================================================ */
/* ============================================================
   eClassified Admin — Shell (header + sidebar + footer)
   Modern refresh layered over the Yelpify base. Uses
   --admin-panel-color and --admin-panel-rgb from :root
   (both set inline in layouts/app.blade.php).
   ============================================================ */

body {
    /* Cards stay visible through their own 1px #eef0f4 border, not because the
       page behind them is tinted. */
    background: #f5f7fb;
    color: #0C111C;
    -webkit-font-smoothing: antialiased;
}

/* =====================================================
   Top bar
   ===================================================== */
.topbar { box-shadow: none !important; border-bottom: none !important; }
.topbar .navbar-collapse {
    border-bottom: none !important;
    min-height: 68px;
    padding: 0 24px;
    background: #fff;
}
.topbar .navbar-header {
    background: #0b0f18;
    display: flex; align-items: center; justify-content: center;
}
.topbar .navbar-brand img { max-height: 40px; width: auto; }

.topbar .navbar-nav .nav-item > .nav-link {
    padding: 9px 12px !important;
    border-radius: 10px;
    transition: background .15s, color .15s;
}
.topbar .navbar-nav .nav-item > .nav-link:hover,
.topbar .navbar-nav .nav-item > .nav-link:focus {
    background: #f0f2f7;
    color: #0C111C !important;
}

/* Sidebar-collapse toggle — override the base pill (dark gray circle from style.css)
   to match the shell design: brand-tinted pill with a bold icon that's actually visible. */
.topbar .navbar-nav > .nav-item > .nav-link.sidebartoggler {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .12) !important;
    border-radius: 999px !important;
    padding: 8px 12px !important;
    width: 40px; height: 40px;
    margin: 0 4px !important;
    transition: background .15s;
}
.topbar .navbar-nav > .nav-item > .nav-link.sidebartoggler:hover {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .22) !important;
}
.topbar .sidebartoggler .mdi {
    font-size: 22px !important;
    color: var(--admin-panel-color) !important;
    line-height: 1;
}
/* Mobile hamburger (visible only on small screens) */
.topbar .nav-toggler .mdi { font-size: 22px !important; color: #3b4060 !important; }
.topbar .nav-toggler:hover .mdi { color: var(--admin-panel-color) !important; }

/* View site pill */
.viewSiteUrl {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10) !important;
    color: var(--admin-panel-color) !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-weight: 600;
    font-size: 13.5px;
    margin: 0 8px;
    transition: background .15s, box-shadow .15s;
    line-height: 1;
    display: inline-flex; align-items: center;
}
.viewSiteUrl:hover {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .18) !important;
    box-shadow: 0 4px 14px rgba(var(--admin-panel-rgb, 132, 74, 239), .18);
    text-decoration: none;
}

/* Custom language dropdown */
.ec-lang { position: relative; margin: 0 8px; }
.ec-lang-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 14px;
    height: 36px;
    border-radius: 999px;
    background: #f5f7fb;
    border: none;
    color: #0C111C;
    font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.ec-lang-btn:hover { background: #ecf0f6; }
.ec-lang-btn .fa-globe { color: #3b4060; font-size: 13px; }
.ec-lang-btn .ec-lang-chev { color: #64748b; font-size: 16px; transition: transform .15s; }
.ec-lang.open .ec-lang-btn .ec-lang-chev { transform: rotate(180deg); }
.ec-lang-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .18); }

.ec-lang-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 160px;
    list-style: none; padding: 6px; margin: 0;
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    z-index: 1050;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .12s, transform .12s;
}
.ec-lang.open .ec-lang-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ec-lang-menu li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px; color: #3b4060;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ec-lang-menu li:hover { background: #f5f7fb; color: #0C111C; }
.ec-lang-menu li.active { color: var(--admin-panel-color); font-weight: 700; background: rgba(var(--admin-panel-rgb, 132, 74, 239), .08); }
.ec-lang-menu li .mdi { font-size: 18px; }

/* User chip */
.topbar .navbar-nav .nav-item.dropdown > .d-flex.align-items-center {
    padding: 4px 14px 4px 4px;
    border-radius: 999px;
    background: #f5f7fb;
    transition: background .15s;
    gap: 8px;
    cursor: pointer;
}
.topbar .navbar-nav .nav-item.dropdown > .d-flex.align-items-center:hover { background: #ecf0f6; }
.topbar .navbar-nav .nav-item.dropdown > .d-flex.align-items-center::after { display: none; }
.topbar .profile-pic {
    width: 34px !important; height: 34px !important; border-radius: 50%; object-fit: cover;
    border: 2px solid #fff;
}
.topbar .nav-item-user h5 { font-size: 14px; margin: 0; }
.topbar .navbar-nav .nav-item.dropdown > .d-flex.align-items-center .nav-link { padding: 0 !important; background: transparent !important; }

/* User dropdown menu */
.topbar .dropdown-menu {
    border: 1px solid #eef1f6;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    padding: 6px;
    min-width: 240px;
    margin-top: 8px;
}
.dropdown-user > li > a {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    font-size: 14px;
    color: #3b4060 !important;
    display: flex; align-items: center; gap: 10px;
    transition: background .12s, color .12s;
}
.dropdown-user > li > a:hover {
    background: #f5f7fb !important;
    color: var(--admin-panel-color) !important;
}
.dropdown-user > li > a i { color: #8a90a6; font-size: 16px; width: 18px; }
.dropdown-user > li > a:hover i { color: var(--admin-panel-color); }
.dw-user-box .u-text h4 { color: #0C111C; }
.dw-user-box .u-text p { margin: 2px 0 0; }
.dropdown-menu > li.divider,
.dropdown-menu > li[role="separator"] { border-top: 1px solid #eef1f6; margin: 4px 0; }

/* =====================================================
   Footer
   ===================================================== */
.footer {
    background: #fff !important;
    border-top: 1px solid #eef1f6;
    color: #8a90a6 !important;
    font-size: 13px;
    padding: 14px 24px !important;
    text-align: center;
    box-shadow: none;
}

/* =====================================================
   Page content shell
   ===================================================== */
main.py-4 { padding: 0 !important; }
/* Give the first child inside main a subtle top margin so it doesn't
   glue to the header, without the visible gray band a padding-top would create. */
main.py-4 > * { margin-top: 0; }
.card-header {
    border-radius: 14px 14px 0 0 !important;
    background: #fff;
    border-bottom: 1px solid #eef1f6;
    padding: 16px 20px;
}
.card-body { padding: 20px; }

/* Page title header */
.page-titles {
    padding: 4px 4px 20px !important;
}
.page-titles .top-title-left .icon { margin-right: 14px !important; }
.breadcrumb-item a:hover { color: var(--admin-panel-color); }
.breadcrumb-item.active { font-weight: 600; }

/* =====================================================
   Dynamic brand color everywhere — replaces the hardcoded
   #FF7E56 / #FF683A peach from the legacy base with the
   admin's --admin-panel-color choice.
   ===================================================== */

/* Settings hub cards */
.settings-card-icon {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .12) !important;
    color: var(--admin-panel-color) !important;
}
.settings-card-link:hover .settings-card-arrow {
    color: var(--admin-panel-color) !important;
}

/* Buttons */
.btn-primary,
.btn-primary.disabled,
.btn-primary:hover,
.btn-primary.disabled:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
    color: #fff !important;
}
.btn-primary:hover { filter: brightness(.92); }
.btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 3px rgba(var(--admin-panel-rgb, 132, 74, 239), .25) !important;
}
.btn-warning, .btn-warning:hover, .btn-warning:focus {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
    color: #fff !important;
}
.btn-outline-primary {
    color: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--admin-panel-color) !important;
    color: #fff !important;
}

/* Text + link colors */
.text-themecolor,
.text-primary,
.text-warning,
.text-info,
html body .text-themecolor {
    color: var(--admin-panel-color) !important;
}
a { color: var(--admin-panel-color); }
/* Text links only. This rule used to match EVERY anchor, so any brand-filled
   control (buttons, active/hovered tabs, chips) got brand-coloured text on a
   brand background and its label vanished. Excluding the control classes here
   fixes it once, instead of an override per component. */
a:not(.btn):not([class*="ec-btn"]):not(.ec-head-btn):not(.nav-link):not(.ec-act):not(.settings-card-link):not(.page-link):hover,
a:not(.btn):not([class*="ec-btn"]):not(.ec-head-btn):not(.nav-link):not(.ec-act):not(.settings-card-link):not(.page-link):focus {
    color: var(--admin-panel-color);
    filter: brightness(.85);
}
.blue-text, .btn-link { color: var(--admin-panel-color) !important; }

/* Pagination */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
    color: #fff !important;
}
.pagination > li > a.page-link { color: var(--admin-panel-color); }
.pagination > li > a.page-link:hover {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .10) !important;
    color: var(--admin-panel-color) !important;
    border-color: rgba(var(--admin-panel-rgb, 132, 74, 239), .40) !important;
}

/* Tabs */
.nav-tabs.card-header-tabs .nav-link.active,
.nav-tabs.card-header-tabs .nav-link:hover {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) var(--admin-panel-color) #fff !important;
    color: #fff !important;
}

/* Backgrounds */
.bg-theme, .bg-info { background-color: var(--admin-panel-color) !important; }

/* Checkboxes / Radios accent */
[type="checkbox"], [type="radio"] {
    accent-color: var(--admin-panel-color);
}

/* Table row indicator */

/* SweetAlert action buttons */
.swal2-actions .swal2-confirm,
.swal2-actions .swal2-styled.swal2-confirm {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
}

/* Toastr success */

/* Card head count / badges */

/* Rating stars */
ul.rating { color: var(--admin-panel-color) !important; }

/* Scrollbar — neutral subtle color everywhere (overrides the legacy peach from base) */
* { scrollbar-color: rgba(128, 128, 128, .35) transparent !important; scrollbar-width: thin !important; }
::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, .35) !important;
    border-radius: 999px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}
::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, .55) !important; background-clip: padding-box !important; }

/* Sidebar scrollbar — light tint derived from the admin brand color so it
   automatically follows whatever color the admin sets in Branding (was hard-
   coded lavender before, which stayed purple when the brand changed to orange). */
.scroll-sidebar,
.scroll-sidebar * {
    scrollbar-color: color-mix(in srgb, var(--admin-panel-color) 45%, #ffffff 55%) transparent !important;
    scrollbar-width: thin !important;
}
.scroll-sidebar::-webkit-scrollbar,
.scroll-sidebar *::-webkit-scrollbar { width: 6px !important; height: 6px !important; background: transparent !important; }
.scroll-sidebar::-webkit-scrollbar-track,
.scroll-sidebar *::-webkit-scrollbar-track { background: transparent !important; }
.scroll-sidebar::-webkit-scrollbar-thumb,
.scroll-sidebar *::-webkit-scrollbar-thumb {
    /* Fallback for browsers without color-mix (mixes brand rgb with white via rgba stack) */
    background: color-mix(in srgb, var(--admin-panel-color) 45%, #ffffff 55%) !important;
    border-radius: 999px !important;
    border: none !important;
    background-clip: border-box !important;
    min-height: 40px !important;
}
.scroll-sidebar::-webkit-scrollbar-thumb:hover,
.scroll-sidebar *::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--admin-panel-color) 45%, #ffffff 55%) !important;
}


/* ============================================================
   Header sizing — match foodie's slim bar exactly and neutralise
   the black .topbar paint that colors/blue.css (loaded after this
   file) applies. blue.css has no !important on these, so these win.
   ============================================================ */
.topbar { background: #fff !important; }
.topbar .navbar-header { background: #0b0f18 !important; }
.topbar .top-navbar { min-height: 68px; }
.topbar .top-navbar .navbar-header {
    height: 68px !important;
    padding: 7px 0 !important;
    line-height: 45px !important;
}
.topbar .top-navbar .navbar-header .navbar-brand img#logo_web {
    max-width: 120px !important;
    height: auto !important;
    max-height: 44px !important;
    width: auto !important;
}
/* Sidebar content starts right below the 68px header (was 95px for the
   old 90px header). */
.left-sidebar { padding-top: 68px !important; }

/* Settings hub cards: the goride-era blanket rule `.form-page .d-flex`
   forces flex-wrap:wrap + gap:14px, which pushed the chevron (and on long
   titles even the text block) onto a new line. Pin the foodie layout. */
.settings-card .card-body {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

/* =====================================================
   Dashboard (foodie home.blade.php port — Oct 2026)
   The ec-* dashboard library (hero banner, KPI tiles,
   chart cards, status lists, recent tables, equal rows)
   is already present above from the foodie UI port; this
   chunk carries only what that extraction did not include.
   ===================================================== */

/* Foodie's Dashboard section rule poolmate was missing. */
.dashboard-page .container-fluid { padding: 4px 4px 0; }

/* Ride-status pills — same pattern as foodie's pill-green / pill-amber,
   extended with the colours poolmate's ride states need. */
.ec-pill.pill-blue { background: #dbeafe; color: #1e40af; }
.ec-pill.pill-red  { background: #fee2e2; color: #991b1b; }
.ec-pill.pill-gray { background: #f3f4f6; color: #6b7280; }

/* Long pickup / drop addresses truncate instead of stretching the row;
   the full address stays available in the title tooltip. */
.ec-recent-table .ec-loc {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Tight label-toggle pair (foodie). Overrides .switch-box's float:right so the
   toggle sits next to its label instead of being pushed to the far edge of
   whatever column it lands in. */
.switch-box.switch-box-tight {
    display: flex;
    align-items: center;
    gap: 12px;
}
.switch-box.switch-box-tight .control-label,
.switch-box.switch-box-tight .ec-form-label { margin-bottom: 0; }
.switch-box.switch-box-tight .switch { float: none !important; margin-left: 0 !important; }

/* Flat action icons: the legacy base gives .fa-file/.fa-eye/etc circular grey
   backgrounds inside action cells. Foodie's ec-act chips are flat — strip the
   old treatment wherever the cell uses the ec-actions wrapper. */
.ec-actions .ec-act i,
.ec-actions .ec-act .fa,
.ec-actions .ec-act .mdi,
.table tr td.action-btn.ec-actions a i,
.table tr td .action-btn.ec-actions a i,
span.action-btn.ec-actions a i {
    background: none !important;
    width: auto !important;
    height: auto !important;
    line-height: inherit !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* =====================================================
   Detail pages (rv-*) — foodie detail-page vocabulary
   Extracted from foodie-admin/public/css/style.css
   ("Restaurant view — hero + facts layout" and
   "User / Driver view" sections). Foodie's hard-coded
   orange brand values are swapped for the admin-panel
   brand tokens used elsewhere in this stylesheet.
   ===================================================== */

/* strip heading between KPI rows */
.rv-strip-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 14px; }
.rv-strip-head h5 { font-size: 17px; color: #0C111C; }

/* detail rows */
.rv-page .ec-detail-row { display: flex; align-items: center; padding: 11px 0; border-bottom: 1px dashed #E4E7EE; gap: 16px; }
.rv-page .ec-detail-row:last-child { border-bottom: none; }
.rv-page .ec-detail-label { flex: 0 0 170px; font-size: 13px; font-weight: 600; color: #7C8698; }
.rv-page .ec-detail-value { flex: 1; font-size: 14px; font-weight: 600; color: #0C111C; word-break: break-word; }
.rv-page .rv-cap { text-transform: capitalize; }

/* hero: avatar + title row + meta list */
.rv-profile { display: flex; gap: 20px; align-items: flex-start; }
.rv-avatar {
    flex: 0 0 120px; width: 120px; height: 120px; border-radius: 16px; overflow: hidden;
    background: #F6F8FB; border: 1px solid #E4E7EE;
}
.rv-avatar img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; margin: 0 !important; }
.rv-profile-body { flex: 1; min-width: 0; }
.rv-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 10px; }
.rv-name { font-size: 22px; color: #0C111C; line-height: 1.2; }
.rv-rating {
    display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px; border-radius: 999px;
    background: #FEF3C7; color: #B45309; font-size: 13px; font-weight: 700; line-height: 1.4;
}
.rv-rating .mdi { font-size: 14px; color: #F59E0B; }
/* JS fills some rating slots with a .badge pill — flatten it into the rv pill */
.rv-rating .badge {
    background: transparent !important; color: inherit !important; padding: 0;
    font-size: inherit; font-weight: inherit; line-height: inherit;
}
.rv-rating .badge .fa, .rv-rating .fa { color: #F59E0B; margin-right: 3px; }
.rv-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid #E4E7EE; font-size: 12.5px; font-weight: 600; line-height: 1.5;
}
.rv-chip .mdi { font-size: 14px; }
.rv-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* state chip colours follow the classes the page JS toggles (.green / .red) */
.rv-chip-state:has(.green) { background: #ECFDF3; border-color: #BBF7D0; color: #166534; }
.rv-chip-state:has(.green) .rv-dot { background: #22C55E; }
.rv-chip-state:has(.red)   { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.rv-chip-state:has(.red) .rv-dot { background: #EF4444; }
.rv-chip-dine:has(.green)  {
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .08);
    border-color: rgba(var(--admin-panel-rgb, 132, 74, 239), .25);
    color: var(--admin-panel-color);
}
.rv-chip .green, .rv-chip .red { color: inherit !important; }
.rv-chip .dine_in_future:empty { display: none; }
.rv-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.rv-meta li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: #44506A; line-height: 1.5; }
.rv-meta li .mdi, .rv-meta li .fa { color: var(--admin-panel-color); font-size: 17px; line-height: 1.25; flex: 0 0 auto; }
.rv-meta li span { min-width: 0; word-break: break-word; }

/* facts strip under the profile */
.rv-facts { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-top: 18px; }
.rv-fact { background: #F6F8FB; border: 1px solid #EEF1F6; border-radius: 12px; padding: 12px 14px; min-width: 0; }
.rv-fact-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #7C8698; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px; }
.rv-fact-label .mdi { font-size: 15px; color: var(--admin-panel-color); }
.rv-fact-value { display: block; font-size: 14px; font-weight: 600; color: #0C111C; word-break: break-word; }
.rv-fact-money { font-size: 18px; font-weight: 800; color: var(--admin-panel-color); }
.rv-fact-value:empty::before { content: "\2014"; color: #A5AEC1; }
@media (max-width: 991px) { .rv-fact-wide { grid-column: 1 / -1; } }
@media (max-width: 575px) { .rv-facts { grid-template-columns: 1fr; } .rv-profile { flex-direction: column; } }
.rv-facts.rv-facts-2 { grid-template-columns: 2fr 1fr; }

/* map */
.rv-map .mapouter { height: 100%; min-height: 250px; text-align: left; }
.rv-map .gmap_canvas, .rv-map .gmap_iframe { height: 100% !important; overflow: hidden; }
.rv-map .mapouter > p {
    height: 100%; min-height: 250px; margin: 0; display: flex; align-items: center; justify-content: center;
    background: #F6F8FB; border: 1px dashed #D8DEE9; border-radius: 12px; color: #7C8698; font-size: 14px;
}
.rv-map { height: 100%; }
@media (max-width: 991px) { .rv-map { margin-top: 18px; } }
.rv-page .rv-map .mapouter:empty { display: none; }

/* working hours list */
.rv-hours { display: flex; flex-direction: column; }
.rv-hours-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 10px; border-bottom: 1px dashed #E4E7EE; border-radius: 8px;
}
.rv-hours-row:last-child { border-bottom: 0; }
.rv-hours-day { font-size: 13.5px; font-weight: 700; color: #3B4060; flex: 0 0 auto; }
.rv-hours-slots { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.rv-hours-slots p {
    margin: 0 !important; padding: 3px 10px; border-radius: 999px; background: #F6F8FB; border: 1px solid #E4E7EE;
    font-size: 12.5px; font-weight: 600; color: #44506A; line-height: 1.5; white-space: nowrap;
}
.rv-hours-row.is-today { background: rgba(var(--admin-panel-rgb, 132, 74, 239), .08); }
.rv-hours-row.is-today .rv-hours-day { color: var(--admin-panel-color); }
.rv-hours-row.is-today .rv-hours-slots p {
    background: #fff;
    border-color: rgba(var(--admin-panel-rgb, 132, 74, 239), .25);
    color: var(--admin-panel-color);
}

/* gallery hover + plan feature chips (foodie parity) */
.rv-page #photos img:hover { transform: scale(1.03); }
.rv-page .plan_features .pricing-card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rv-page .plan_features .pricing-card-list li {
    display: inline-flex; padding: 3px 10px; border-radius: 999px;
    background: rgba(var(--admin-panel-rgb, 132, 74, 239), .08);
    border: 1px solid rgba(var(--admin-panel-rgb, 132, 74, 239), .25);
    color: var(--admin-panel-color); font-size: 12.5px; font-weight: 600; line-height: 1.5;
}
.rv-page .plan_features .pricing-card-list li::before { content: none !important; }
.rv-page .plan-features-col { align-items: flex-start; }
.rv-page .plan-features-col .ec-detail-label { padding-top: 3px; }
/* theme gives gallery li width:25% + padding and services ul column-count:3 — undo for the chip/grid layout */
.rv-page .restaurant_gallery ul li { width: auto !important; padding: 0 !important; flex: 0 0 auto; }
.rv-page .restaurant_service ul { column-count: auto !important; }
.rv-page .restaurant_service ul li { padding-bottom: 6px !important; }

/* ── User / Driver view (restaurant-view vocabulary) ─────────────────────────── */
.rv-page .rv-facts.rv-facts-2 { grid-template-columns: 2fr 1fr; }
.rv-user-default-addr:empty::before, .rv-driver-zone:empty::before { content: "\2014"; color: #A5AEC1; }
/* address tiles: the JS emits .res-search-list.row > .transactions-list-wrap.col-md-12 > .transactions-list-view */
.rv-addr-list .res-search-list { margin: 0 -6px; }
.rv-addr-list .transactions-list-wrap { flex: 0 0 50%; max-width: 50%; padding: 0 6px; margin-top: 0 !important; margin-bottom: 12px; }
.rv-addr-list .transactions-list-view { border: 1px solid #EEF1F6; border-radius: 12px; padding: 12px 14px; box-shadow: none !important; margin: 0 !important; height: 100%; }
.rv-addr-list .transactions-list-view h6 { font-size: 14px; font-weight: 600; color: #0C111C; margin: 0 0 8px; line-height: 1.5; }
.rv-addr-list .badge { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.rv-addr-list .badge-info { background: #F6F8FB; color: #44506A; }
.rv-addr-list .badge-success { background: #ECFDF3; color: #166534; }
.rv-addr-list > h5 { font-size: 14px; color: #7C8698; font-weight: 500; margin: 0; }
@media (max-width: 767px) { .rv-addr-list .transactions-list-wrap { flex-basis: 100%; max-width: 100%; } .rv-facts.rv-facts-2 { grid-template-columns: 1fr; } }
.rv-addr-list .transactions-list-wrap, .rv-addr-list .gold-members, .rv-addr-list .media, .rv-addr-list .transactions-list-left { border: 0 !important; box-shadow: none !important; padding: 0 !important; background: transparent !important; }

/* Detail sub-tabs (foodie underline strip): the legacy .menu-tab rules above
   only drew a thin black underline. Poolmate's user-view tabs are bootstrap
   pill tabs, which put .active on the <a>, so that variant is covered too. */
.resttab-sec { position: relative; }
.menu-tab > ul {
    display: flex; flex-wrap: wrap;
    gap: 2px 4px;
    padding: 0; margin: 0;
    list-style: none;
    border-bottom: 1px solid #eef0f4;
}
.menu-tab > ul > li { margin: 0; }
.menu-tab > ul > li > a {
    display: inline-block;
    border: 0; border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #8a90a6;
    font-weight: 600; font-size: 13.5px;
    padding: 10px 14px;
    white-space: nowrap;
}
.menu-tab > ul > li > a:hover,
.menu-tab > ul > li.active > a,
.menu-tab > ul > li > a.active {
    color: var(--admin-panel-color);
    border-bottom: 2px solid var(--admin-panel-color);
    background: transparent;
}
.menu-tab > ul > li > a:visited { color: #8a90a6; }
.menu-tab > ul > li.active > a:visited,
.menu-tab > ul > li > a.active:visited { color: var(--admin-panel-color); }

/* rides/show: JS-built booked-user rows read as tiles inside the rv card */
.rv-page .applied_drivers_list {
    border: 1px solid #EEF1F6; border-radius: 12px; padding: 12px 14px;
    background: #fff;
}
.rv-page .applied_drivers_list .booked_user_cont h4 { font-size: 14.5px; margin-bottom: 4px; }
.rv-page .applied_drivers_list .booked_user_cont h4 a { color: #0C111C; font-weight: 600; }
.rv-page .applied_drivers_list .ml-auto { display: flex; align-items: center; gap: 10px; }
.rv-page .live-tracking-list .location-ride .from-ride,
.rv-page .live-tracking-list .location-ride .to-ride { font-size: 14px; color: #44506A; line-height: 1.5; }

/* rv hero: travel-preferences tile (users/view) + JS-filled preference lists */
.rv-prefs { display: flex; flex-direction: column; }
.rv-page .prefrences-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.rv-page .prefrences-list ul li { display: flex; align-items: flex-start; gap: 4px; font-size: 14px; color: #44506A; line-height: 1.5; }
.rv-page .prefrences-list ul li .mdi, .rv-page .prefrences-list ul li .fa { color: var(--admin-panel-color); font-size: 16px; line-height: 1.3; flex: 0 0 auto; }
.rv-page .travel_prefrence p { display: flex; align-items: flex-start; gap: 4px; font-size: 14px; color: #44506A; line-height: 1.5; margin: 0 0 8px; }
.rv-page .travel_prefrence p:last-child { margin-bottom: 0; }
.rv-page .travel_prefrence p .mdi, .rv-page .travel_prefrence p .fa { color: var(--admin-panel-color); font-size: 16px; line-height: 1.3; flex: 0 0 auto; }
@media (max-width: 991px) { .rv-prefs { margin-top: 18px; height: auto !important; } }

/* Uniform white rows — kill DataTables' zebra stripe and sorted-column tint
   (foodie parity: one row color, hover tint alone signals the active row). */
table.ec-list-table.dataTable tbody tr.odd,
table.ec-list-table.dataTable tbody tr.even,
table.ec-list-table.dataTable tbody tr.odd > *,
table.ec-list-table.dataTable tbody tr.even > *,
table.ec-list-table.dataTable tbody td.sorting_1,
table.ec-list-table.dataTable tbody td.sorting_2,
table.ec-list-table.dataTable tbody td.sorting_3 {
    background: #fff !important;
    box-shadow: none !important;
}

/* Toggles follow the theme color (foodie's brand hooks — checked state),
   and the off state is neutral grey like foodie, not red. */
.table tr td .switch .slider,
.switch .slider,
.switch .slider.round {
    background-color: #d0d5de;
}
.switch input:checked + .slider,
.switch input:checked + .slider.round,
table.ec-list-table .switch input:checked + .slider,
.table tr td .switch input:checked + .slider {
    background-color: var(--admin-panel-color) !important;
}

/* .ec-upload fills its grid column (foodie parity). */
.page-wrapper.form-page .card-body .row > [class*="col-"] .ec-upload { width: 100%; }

/* Chat (support conversations) — theme the bubbles with the admin color and
   drop the empty people-list gutter (poolmate's chat page has no contact
   sidebar element, but the base CSS still reserved 350px for one). */
.chat-app .chat { margin-left: 0 !important; border-left: none !important; }
.chat-app .people-list { display: none !important; }
.chat .chat-history .other-message {
    background: var(--admin-panel-color) !important;
    color: #ffffff !important;
}
.chat .chat-history .my-message {
    background: #f1f3f9 !important;
    color: #0C111C !important;
}

/* Language-tab panes: the non-English panes are built by each page's
   paneBuilder JS with legacy `form-group row width-*` markup. Map that DOM
   onto the foodie field look at HALF width, so every language pane matches
   the static English pane (user: "both fields same size, like Subject For").
   Textareas/editors stay full width. */
.tab-pane .form-group.row.width-100,
.tab-pane .form-group.row.width-50 {
    display: block !important;
    width: 50% !important;
    max-width: 50% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}
.tab-pane .form-group.row.width-100:has(textarea),
.tab-pane .form-group.row.width-100:has(.note-editor),
.tab-pane .form-group.row.width-50:has(textarea),
.tab-pane .form-group.row.width-50:has(.note-editor) {
    width: 100% !important;
    max-width: 100% !important;
}
.tab-pane .form-group.row.width-100 > label,
.tab-pane .form-group.row.width-50 > label {
    display: block; width: 100%; max-width: 100%; flex: none;
    padding: 0 0 6px; margin: 0;
    font-size: 13.5px; font-weight: 600; color: #3b4060;
}
.tab-pane .form-group.row.width-100 > [class*="col-"],
.tab-pane .form-group.row.width-50 > [class*="col-"] {
    width: 100% !important; max-width: 100% !important;
    flex: none !important; padding: 0 !important;
}
.tab-pane .form-group .form-text { font-size: 12.5px; color: #9aa1b4; }
@media (max-width: 767px) {
    .tab-pane .form-group.row.width-100,
    .tab-pane .form-group.row.width-50 { width: 100% !important; max-width: 100% !important; }
}

/* RTL language panes: dir="rtl" makes the half-width block start at the RIGHT
   edge, leaving a dead left half. Pin the field block to the left so every
   tab looks identical; the text inside stays RTL. */
.tab-pane[dir="rtl"] .form-group.row.width-100,
.tab-pane[dir="rtl"] .form-group.row.width-50 {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Dashboard stat tiles: the VALUE always shows in full — the label is the
   flexible part that ellipsizes when space runs short (user: show the exact
   amount like $131764.00, never "…" or "k"). */
.ec-kpi.ec-kpi-stat .ec-kpi-value {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    flex-shrink: 0 !important;
    font-size: 22px;
}
.ec-kpi.ec-kpi-stat .ec-kpi-head { min-width: 0; padding-right: 10px; }
.ec-kpi.ec-kpi-stat .ec-kpi-label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 12.5px;
    line-height: 1.25;
}

/* ============================================================================
   users/view detail polish (appended) — sub-tab strip, fact tiles, preferences
   ============================================================================
   (a) Sub-tab strip: this project's customized bootstrap.min.css paints EVERY
   ul.nav grey (`.nav{background:#aaaaaa;border:1px solid #aaaaaa}`) with white
   links and a white chip on `.nav-link.active` — on the users/view pill strip
   that reads as a full-width grey band with barely-visible tabs. The earlier
   `.menu-tab > ul` port never reset that background. Neutralize it for this
   strip only and draw foodie's transparent underline look. Markup and
   Bootstrap's data-toggle="pill" JS stay untouched. */
.rv-page .resttab-sec .menu-tab > ul.nav {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #eef0f4 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    padding: 0;
    margin: 0;
}
.rv-page .resttab-sec .menu-tab > ul.nav > li.nav-item { margin: 0; }
.rv-page .resttab-sec .menu-tab > ul.nav .nav-link {
    display: inline-block;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: #8a90a6 !important;
    font-weight: 600;
    font-size: 13.5px;
    padding: 10px 14px;
    white-space: nowrap;
}
.rv-page .resttab-sec .menu-tab > ul.nav .nav-link:hover,
.rv-page .resttab-sec .menu-tab > ul.nav .nav-link.active {
    color: var(--admin-panel-color) !important;
    border-bottom: 2px solid var(--admin-panel-color) !important;
    background: transparent !important;
}

/* (b)+(c) Facts: wallet / dob / gender / bio as a 2x2 grid of equal tiles —
   same font scale everywhere; the wallet keeps only the brand color accent.
   A bio the JS fills with "-" now sits in a compact tile identical to
   dob/gender instead of a stretched wide one. */
.rv-facts.uv-facts { grid-template-columns: 1fr 1fr; }
.rv-facts.uv-facts .rv-fact-money {
    font-size: 14px;
    font-weight: 700;
    color: var(--admin-panel-color);
}
@media (max-width: 575px) {
    .rv-facts.uv-facts { grid-template-columns: 1fr; }
}

/* (d) Travel Preferences: height follows content (the h-100 stretch is gone
   from the markup); the JS-appended "No Preferences Found" plain text (no
   <ul>) renders centered and muted. */
.rv-page .rv-prefs { height: auto; min-height: 0; }
.rv-page .rv-prefs .prefrences-list:not(:has(ul)) {
    text-align: center;
    color: #A5AEC1;
    font-size: 13.5px;
    padding: 14px 0;
}

/* In-tab single-line text fields: HALF width on every form, matching the
   JS-built language panes and the fields outside the tabs (user: "field
   width is 50%"). Textareas/editors/uploads keep their full-width columns
   (the input there is nested, so :has(>input) does not match them). */
.tab-pane .col-12.mb-3:has(> input.form-control) {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}
@media (max-width: 767px) {
    .tab-pane .col-12.mb-3:has(> input.form-control) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Breathing room between the upload box and the preview thumbnail below it
   (the flag/logo previews sat flush against the dashed border). */
label.ec-upload ~ .placeholder_img_thumb,
label.ec-upload ~ div[id*="uploding"],
label.ec-upload + .placeholder_img_thumb {
    margin-top: 12px;
}

/* The native checkbox inside a .switch must never paint — only the slider
   does (it was peeking out behind the rounded slider on switch-box rows). */
.switch input[type="checkbox"],
.switch-box .switch input[type="checkbox"] {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Switch knob is always a CIRCLE — the base theme's .slider:before rules
   omit border-radius, leaving a white square that reads as a checkbox
   sitting on the track. */
.switch .slider:before,
.switch-box .switch .slider:before,
.table tr td .switch .slider:before {
    border-radius: 50% !important;
}

/* Upload box content: icon + text always get their padding and gap, even
   inside fieldsets whose legacy label rules strip them (Upload Document). */
label.ec-upload {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    margin: 0 !important;
}
label.ec-upload > i { line-height: 1; }

/* User hero facts: single responsive strip across the card. */
.ec-form-card .rv-facts.uv-facts {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 16px;
}

/* Currency suffix inside any .control-inner input (e.g. the Add Wallet
   modal): the symbol sits inside the field instead of dropping below it.
   Pages with their own prefix-box styling override this via their
   higher-specificity rules. */
.control-inner { position: relative; }
.control-inner > .currentCurrency {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #8a90a6;
    font-weight: 600;
    font-size: 13.5px;
    pointer-events: none;
}
.control-inner > .form-control { padding-left: 34px; }

/* Dashboard stat tiles: stacked layout (icon + label on top, value below,
   Today under it). The one-line layout overlapped once real data produced
   long amounts — stacking fits any value length by design. */
.dashboard-page .ec-kpi.ec-kpi-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px 20px;
}
.dashboard-page .ec-kpi.ec-kpi-stat .ec-kpi-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 0;
    min-width: 0;
    width: 100%;
}
.dashboard-page .ec-kpi.ec-kpi-stat .ec-kpi-label {
    font-size: 13px;
    font-weight: 600;
    color: #5a6179;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.dashboard-page .ec-kpi.ec-kpi-stat .ec-kpi-value {
    font-size: 24px;
    margin: 0;
}
.dashboard-page .ec-kpi.ec-kpi-stat .ec-kpi-sub {
    font-size: 12px;
    color: #8a90a6;
    margin: 0;
}

/* Status badges inside list/recent tables: foodie's soft pills everywhere
   (the solid bootstrap badges were only restyled under .listings-page /
   .form-page, but list pages use plain .page-wrapper). */
.ec-list-table .badge,
.ec-recent-table .badge,
.ec-card .badge {
    display: inline-block !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    border: 0 !important;
    box-shadow: none !important;
    text-transform: none;
}
.ec-list-table .badge-success, .ec-recent-table .badge-success, .ec-card .badge-success {
    background: #e5f7ed !important; color: #1a7f4c !important;
}
.ec-list-table .badge-warning, .ec-recent-table .badge-warning, .ec-card .badge-warning {
    background: #fef3d5 !important; color: #a86400 !important;
}
.ec-list-table .badge-danger, .ec-recent-table .badge-danger, .ec-card .badge-danger {
    background: #fdecec !important; color: #b91c1c !important;
}
.ec-list-table .badge-primary, .ec-list-table .badge-info,
.ec-recent-table .badge-primary, .ec-recent-table .badge-info,
.ec-card .badge-primary, .ec-card .badge-info {
    background: #e8f0fe !important; color: #2b6fd4 !important;
}
.ec-list-table .badge-secondary, .ec-list-table .badge-light,
.ec-card .badge-secondary, .ec-card .badge-light {
    background: #eef0f4 !important; color: #5a6179 !important;
}
/* The Verified chip is a <sup> — render it as a small pill on its own line
   UNDER the name, so every row's chip aligns at the same left edge instead
   of zigzagging after names of different lengths. */
.ec-list-table sup.badge {
    position: static !important;
    top: auto !important;
    display: block !important;
    width: max-content;
    vertical-align: baseline !important;
    line-height: 1.4 !important;
    margin: 5px 0 0 !important;
}
.ec-list-table sup.badge .fa { font-size: 10px; }

/* Verified: compact icon beside the name; the label lives in the tooltip. */
.ec-list-table .uv-verified-ico {
    color: #1a9e55;
    font-size: 16px;
    vertical-align: -2px;
}

/* Settings hub: chevron pinned to the card's right edge (foodie layout) —
   the text block takes all free space regardless of legacy flex rules. */
.settings-card .card-body > .flex-grow-1 { flex: 1 1 auto !important; min-width: 0; }
.settings-card .settings-card-arrow { margin-left: auto !important; align-self: center; flex-shrink: 0; }

/* Global Settings: foodie's 2-column field grid inside every fieldset.
   Done in CSS so this fragile page's markup and scripts stay untouched.
   Fields with a textarea/editor stay full width. */
.gs-page fieldset {
    display: flex !important;
    flex-wrap: wrap;
    column-gap: 24px;
    align-items: flex-start;
}
.gs-page fieldset > * { flex: 0 0 100%; max-width: 100%; }
.gs-page fieldset > legend { flex: none; }
.gs-page fieldset > .form-group.row {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    width: auto !important;
    display: block !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}
.gs-page fieldset > .form-group.row:has(textarea),
.gs-page fieldset > .form-group.row:has(.note-editor) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
.gs-page fieldset > .form-group.row > label.control-label {
    display: block; width: 100%; max-width: 100%; flex: none;
    padding: 0 0 6px; margin: 0;
    font-size: 13.5px; font-weight: 600; color: #3b4060;
}
.gs-page fieldset > .form-group.row > [class*="col-"] {
    width: 100% !important; max-width: 100% !important;
    flex: none !important; padding: 0 !important;
}
@media (max-width: 767px) {
    .gs-page fieldset > .form-group.row { flex-basis: 100% !important; max-width: 100% !important; }
}

/* Checkbox tick: the checked state already paints an SVG tick as its
   background — suppress the second, border-drawn ::after tick that sat
   on top of it (showed as two overlapping check lines). */
input[type="checkbox"]:not(.ec-check):checked::after {
    content: none !important;
    display: none !important;
}

/* Payment gateway tab strip — foodie's chip tabs (ported verbatim). */
/* The gateway strip lists 20 providers; as a wrapping tab row it ran to three lines.
   As a chip grid each provider reads as its own target and the active one is
   unmistakable. */
/* Gateway tab strip: naturally-sized chips that wrap and centre, the active one
   filled solid with the brand colour, and its status badge inverted to white on
   that fill (replaces the equal-width grid with a tinted active state and a
   green badge). */
/* The underline-strip rule is `ul.nav-tabs.ec-lang-tabs` (0,2,1) with
   !important, so a plain `.payment-top-tab .ec-lang-tabs` (0,2,0) loses and the
   1px rule stayed. Matching its shape wins the gateway strip back. */
.payment-top-tab ul.nav-tabs.ec-lang-tabs,
.payment-top-tab .ec-lang-tabs {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    /* The underline-strip rule sets `gap: 0 !important`, which left the gateway
   chips butted together with no spacing; use 8px. */
    gap: 8px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    padding: 4px 0 !important;
}
.payment-top-tab .ec-lang-tabs .nav-item { margin: 0 !important; }
.payment-top-tab .ec-lang-tabs .nav-link {
    display: flex !important;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2e6ef !important;
    border-radius: 9px !important;
    padding: 8px 14px !important;
    background: #fff !important;
    font-size: 13.5px !important;
    white-space: nowrap;
}
.payment-top-tab .ec-lang-tabs .nav-link.active,
.payment-top-tab .ec-lang-tabs .nav-link:hover {
    border-color: var(--admin-panel-color) !important;
    background: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
}
/* The generic `.form-page .badge-success` rule paints these green with
   !important, so these carry it too — gateway badges are solid brand, inverted
   to white on the active chip. */
.payment-top-tab .ec-lang-tabs .nav-link .badge,
.payment-top-tab .ec-lang-tabs .nav-link .badge-success {
    margin: 0 !important;
    background: var(--admin-panel-color) !important;
    color: var(--admin-panel-contrast, #fff) !important;
    -webkit-text-fill-color: var(--admin-panel-contrast, #fff) !important;
}
.payment-top-tab .ec-lang-tabs .nav-link.active .badge,
.payment-top-tab .ec-lang-tabs .nav-link.active .badge-success,
.payment-top-tab .ec-lang-tabs .nav-link:hover .badge,
.payment-top-tab .ec-lang-tabs .nav-link:hover .badge-success {
    background: #fff !important;
    color: var(--admin-panel-color) !important;
    
    -webkit-text-fill-color: var(--admin-panel-color) !important;
}
/* Any tab that takes a brand background — active or merely hovered — keeps a
   readable label. */
.page-wrapper .nav-tabs .nav-link:hover,
.page-wrapper .nav-tabs .nav-link:focus,
.payment-top-tab .ec-lang-tabs .nav-link:hover {
    color: var(--admin-panel-contrast, #fff) !important;
}

.page-wrapper .payment-top-tab .ec-lang-tabs .nav-link:hover,
.page-wrapper .payment-top-tab .nav-tabs.ec-lang-tabs .nav-link:hover,
.page-wrapper .payment-top-tab .ec-lang-tabs .nav-link:focus,
.page-wrapper .payment-top-tab .nav-tabs.ec-lang-tabs .nav-link:focus { background: var(--admin-panel-color) !important; color: var(--admin-panel-contrast, #fff) !important; }

/* Fieldset legends on form pages without .listings-page: the pill legend is
   absolutely positioned, so its fieldset must be the positioning context —
   otherwise every legend on the page stacks at the card's top edge. */
.form-page fieldset { position: relative; margin-top: 18px; }

/* Global Settings: the Verify Booking / Verify Publish toggles sit outside a
   .switch-box, so they never got the switch's size — the slider stretched
   into a big grey circle. Give them the same 40x21 track + knob. */
.verify_switch .switch {
    display: inline-block !important;
    position: relative !important;
    width: 40px !important;
    height: 21px !important;
    margin: 4px 0 0 !important;
    vertical-align: middle;
    cursor: pointer;
}
.verify_switch .switch .slider {
    position: absolute; inset: 0;
    background-color: #d0d5de;
    border-radius: 999px !important;
    transition: .3s;
}
.verify_switch .switch .slider:before {
    position: absolute; content: "";
    width: 17px; height: 17px; left: 2px; bottom: 2px;
    background: #fff; border-radius: 50% !important;
    transition: .3s;
}
.verify_switch .switch input:checked + .slider { background-color: var(--admin-panel-color) !important; }
.verify_switch .switch input:checked + .slider:before { transform: translateX(19px); }

/* A preview whose image failed to load (dead storage URL) collapses entirely
   instead of leaving an orphan remove "x" button behind. */
.image-item:has(> img[hidden]) { display: none !important; }
.verify_switch .switch .slider {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    min-width: 0 !important; min-height: 0 !important;
}

/* "File Uploaded" status under an upload box (replaces the raw file link). */
.ec-file-ok {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px;
    color: #1a9e55; font-weight: 600; font-size: 13.5px;
}
.ec-file-ok .mdi { font-size: 17px; }

/* Payment gateway strip — clean chip grid: left-aligned, even gaps, every
   chip bordered; active = brand fill; hover = brand outline only (a full
   fill on hover read as a second selected tab). */
.page-wrapper .payment-top-tab ul.nav.nav-tabs.ec-lang-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
.page-wrapper .payment-top-tab ul.nav.nav-tabs.ec-lang-tabs > .nav-item { margin: 0 !important; }
.page-wrapper .payment-top-tab ul.nav.nav-tabs.ec-lang-tabs .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    border: 1px solid #e2e6ef !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #3b4060 !important;
    -webkit-text-fill-color: #3b4060 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    box-shadow: none !important;
}
.page-wrapper .payment-top-tab ul.nav.nav-tabs.ec-lang-tabs .nav-link > i.fa { margin: 0 !important; font-size: 13px; color: #8a90a6; }
.page-wrapper .payment-top-tab ul.nav.nav-tabs.ec-lang-tabs .nav-link:hover,
.page-wrapper .payment-top-tab ul.nav.nav-tabs.ec-lang-tabs .nav-link:focus {
    background: #fff !important;
    border-color: var(--admin-panel-color) !important;
    color: var(--admin-panel-color) !important;
    -webkit-text-fill-color: var(--admin-panel-color) !important;
}
.page-wrapper .payment-top-tab ul.nav.nav-tabs.ec-lang-tabs .nav-link.active,
.page-wrapper .payment-top-tab ul.nav.nav-tabs.ec-lang-tabs .nav-link.active:hover {
    background: var(--admin-panel-color) !important;
    border-color: var(--admin-panel-color) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.page-wrapper .payment-top-tab ul.nav.nav-tabs.ec-lang-tabs .nav-link.active > i.fa { color: #fff; }
/* status badge: soft green pill; white-on-brand inside the active chip */
.page-wrapper .payment-top-tab ul.nav.nav-tabs.ec-lang-tabs .nav-link .badge {
    margin: 0 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    background: #e5f7ed !important;
    color: #1a7f4c !important;
    -webkit-text-fill-color: #1a7f4c !important;
}
.page-wrapper .payment-top-tab ul.nav.nav-tabs.ec-lang-tabs .nav-link .badge:empty { display: none !important; }
.page-wrapper .payment-top-tab ul.nav.nav-tabs.ec-lang-tabs .nav-link.active .badge {
    background: #fff !important;
    color: var(--admin-panel-color) !important;
    -webkit-text-fill-color: var(--admin-panel-color) !important;
}
/* align the strip with the card's left edge */
.form-page > .payment-top-tab { padding-left: 20px; padding-right: 20px; }