/*
Template Name: DASHGUM - Bootstrap 3.2 Admin Theme
Template Version: 1.0
Author: Carlos Alvarez
Website: http://Alvarez.is/
*/

/* Import fonts */
/*@import url(http://fonts.googleapis.com/css?family=Ruda:400,700,900);*/

/* BASIC THEME CONFIGURATION */
@font-face {
    font-family: 'Ruda';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/Ruda-Regular.ttf');
}

body {
    color: #3e3e3e;
    background: #f2f2f2;
    font-family: 'Ruda', sans-serif;
    padding: 0px !important;
    margin: 0px !important;
    font-size: 13px;
}

ul li {
    list-style: none;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}

#container {
    width: 100%;
    height: 100%;
}

/* Bootstrap Modifications */
.modal-content {
    border-radius: 10px;
}

.modal-header {
    background: #fff;
    border-bottom: 1px solid #e8eaed;
    border-radius: 10px 10px 0 0;
}

.modal-title {
    color: #333;
}

.modal-delete .modal-header h4.modal-title {
    color: #c9302c;
}


.btn-round {
    border-radius: 20px;
    -webkit-border-radius: 20px;
}

.accordion-heading .accordion-toggle {
    display: block;
    cursor: pointer;
    border-top: 1px solid #F5F5F5;
    padding: 5px 0px;
    line-height: 28.75px;
    text-transform: uppercase;
    color: #1a1a1a;
    background-color: #ffffff;
    outline: none !important;
    text-decoration: none;
}



/*Theme Backgrounds*/

.bg-theme {
    background-color: #d71149;
}

.bg-theme02 {
    background-color: #ac92ec;
}

.bg-theme03 {
    background-color: #48cfad;
}

.bg-theme04 {
    background-color: #ed5565;
}

/*Theme Buttons*/

.btn-theme {
    color: #fff;
    background-color: #3dc8de;
    border-color: #48bcb4;
}

.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-theme.active,
.open .dropdown-toggle.btn-theme {
    color: #fff;
    background-color: #48bcb4;
    border-color: #48bcb4;
}

.btn-tint {
    color: #fff;
    background-color: #d71149;
    border-color: #d71149;
}

.btn-tint:hover,
.btn-tint:focus,
.btn-tint:active,
.btn-tint.active,
.open .dropdown-toggle.btn-tint {
    color: #fff;
    background-color: #b80e3d;
    border-color: #b80e3d;
}

.module-title i {
    color: #d71149;
}

.btn-theme02 {
    color: #fff;
    background-color: #ac92ec;
    border-color: #967adc;
}

.btn-theme02:hover,
.btn-theme02:focus,
.btn-theme02:active,
.btn-theme02.active,
.open .dropdown-toggle.btn-theme02 {
    color: #fff;
    background-color: #967adc;
    border-color: #967adc;
}

.btn-theme03 {
    color: #fff;
    background-color: #48cfad;
    border-color: #37bc9b;
}

.btn-theme03:hover,
.btn-theme03:focus,
.btn-theme03:active,
.btn-theme03.active,
.open .dropdown-toggle.btn-theme03 {
    color: #fff;
    background-color: #37bc9b;
    border-color: #37bc9b;
}

.btn-theme04 {
    color: #fff;
    background-color: #ed5565;
    border-color: #da4453;
}

.btn-theme04:hover,
.btn-theme04:focus,
.btn-theme04:active,
.btn-theme04.active,
.open .dropdown-toggle.btn-theme04 {
    color: #fff;
    background-color: #da4453;
    border-color: #da4453;
}

.btn-theme05 {
    color: #fff;
    background-color: #546e7a;
    border-color: #455a64;
}

.btn-theme05:hover,
.btn-theme05:focus,
.btn-theme05:active,
.btn-theme05.active,
.open .dropdown-toggle.btn-theme05 {
    color: #fff;
    background-color: #455a64;
    border-color: #37474f;
}

.btn-excel {
    color: #fff;
    background-color: #3c8b59;
    border-color: #185c37;
}

.btn-excel:hover,
.btn-excel:focus,
.btn-excel:active,
.btn-excel.active,
.open .dropdown-toggle.btn-excel {
    color: #fff;
    background-color: #217346;
    border-color: #185c37;
}

.btn-barcode {
    color: #fff;
    background-color: #a1a1a1;
    border-color: #a1a1a1;
}

.btn-barcode:hover,
.btn-barcode:focus,
.btn-barcode:active,
.btn-barcode.active {
    color: #fff;
    background-color: #949494;
    border-color: #888888;
}

.btn-barcode.disabled:hover,
.btn-barcode.disabled:focus,
.btn-barcode.disabled:active,
.btn-barcode.disabled.active,
.btn-barcode[disabled]:hover,
.btn-barcode[disabled]:focus,
.btn-barcode[disabled]:active,
.btn-barcode[disabled].active,
fieldset[disabled] .btn-barcode:hover,
fieldset[disabled] .btn-barcode:focus,
fieldset[disabled] .btn-barcode:active,
fieldset[disabled] .btn-barcode.active {
    color: #fff;
    background-color: #a1a1a1;
    border-color: #a1a1a1;
}

.btn-clear-g {
    color: #48bcb4;
    background: transparent;
    border-color: #48bcb4;
}

.btn-clear-g:hover {
    color: white;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #797979;
}



/*Helpers*/

.centered {
    text-align: center;
}

.goleft {
    text-align: left;
}

.goright {
    text-align: right;
}

.mt {
    margin-top: 25px;
}

.mb {
    margin-bottom: 25px;
}

.ml {
    margin-left: 5px;
}

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

/*Exclusive Theme Colors Configuration*/

.label-theme {
    background-color: #d71149;
}

.bg-theme {
    background-color: #d71149;
}

ul.top-menu>li>.logout {
    color: #ddd;
    font-size: 12px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #777 !important;
    padding: 5px 15px;
    background-color: #666;
    margin-right: 0;
    margin-top: 10px;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

ul.top-menu>li>.logout:hover {
    color: #fff !important;
    background-color: #d71149 !important;
    border-color: #d71149 !important;
}


/*sidebar navigation*/

#sidebar {
    width: 210px;
    height: 100%;
    position: fixed;
    background: #1e2a3a;
}

#sidebar h5 {
    color: #f2f2f2;
    font-weight: 700;
}

#sidebar ul li {
    position: relative;
}

#sidebar .sub-menu>.sub li {
    /*padding-left: 32px;*/
    padding-left: 22px;
}

#sidebar .sub-menu>.sub li:last-child {
    padding-bottom: 10px;
}

/*LEFT NAVIGATION ICON*/
.dcjq-icon {
    height: 17px;
    width: 17px;
    display: inline-block;
    background: url("../img/nav-expand.png") no-repeat top;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    position: absolute;
    right: 10px;
    top: 11px;
}

.active .dcjq-icon {
    background: url("../img/nav-collapse.png") no-repeat bottom;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

/*---*/

.nav-collapse.collapse {
    display: inline;
}

ul.sidebar-menu,
ul.sidebar-menu li ul.sub {
    margin: -2px 0 0;
    padding: 0;
}

ul.sidebar-menu {
    margin-top: 75px;
}

#sidebar>ul>li>ul.sub {
    display: none;
}

#sidebar>ul>li.active>ul.sub,
#sidebar>ul>li>ul.sub>li>a {
    display: block;
}

ul.sidebar-menu li ul.sub li {
    background: #1e2a3a;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}

ul.sidebar-menu li ul.sub li:last-child {
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
}

ul.sidebar-menu li ul.sub li a {
    font-size: 12px;
    padding: 6px 0;
    line-height: 35px;
    height: 35px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    color: #aeb2b7;
}

ul.sidebar-menu li ul.sub li a:hover {
    color: white;
    background: transparent;
}

ul.sidebar-menu li ul.sub li.active a {
    color: #fc8aab;
    display: block;
}

ul.sidebar-menu li.active a:focus i,
ul.sidebar-menu li.active a:hover i,
ul.sidebar-menu li ul.sub li.active a:hover {
    color: #fd9fba;
}

ul.sidebar-menu li {
    /*line-height: 20px !important;*/
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

ul.sidebar-menu li.sub-menu {
    line-height: 15px;
}

ul.sidebar-menu li a span {
    display: inline-block;
}

ul.sidebar-menu li a {
    color: #aeb2b7;
    text-decoration: none;
    display: block;
    padding: 12px 0 12px 10px;
    font-size: 12px;
    outline: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

ul.sidebar-menu li ul.sub li a.active {
    background: none;
}

ul.sidebar-menu li a.active,
ul.sidebar-menu li a:hover,
ul.sidebar-menu li a:focus {
    background: #2a3a4e;
    color: #fff;
    display: block;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}


ul.sidebar-menu li a i {
    font-size: 15px;
    padding-right: 6px;
}

ul.sidebar-menu li a .glyphicon {
    font-size: 15px;
    padding-right: 6px;
}

ul.sidebar-menu li a:hover i,
ul.sidebar-menu li a:focus i {
    color: #fff;
}

ul.sidebar-menu li a.active i {
    color: #fff;
}


.mail-info,
.mail-info:hover {
    margin: -3px 6px 0 0;
    font-size: 11px;
}

/* MAIN CONTENT CONFIGURATION */
#main-content {
    margin-left: 210px;
}

.header,
.footer {
    min-height: 48px;
    padding: 0 15px;
}

.header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1002;
}

.black-bg {
    background: linear-gradient(90deg, #d6d8dc 0%, #bfc2c8 20%, #d4d6db 40%, #b0b4bb 60%, #c8cbd0 80%, #dcdee2 100%);
    border-bottom: 1px solid #b0b4ba;
}

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

a.logo {
    font-size: 24px;
    color: #333333;
    float: left;
    margin: 9px 0 0 3px;
    /*text-transform: uppercase;*/
}

a.logo b {
    font-weight: 900;
}

a.logo:hover,
a.logo:focus {
    text-decoration: none;
    outline: none;
}

a.logo span {
    color: #d71149;
}


/*notification*/
#top_menu .nav>li,
ul.top-menu>li {
    float: left;
}

.notify-row {
    float: left;
    margin-top: 14px;
    margin-left: 134px;
}

.notify-row .notification span.label {
    display: inline-block;
    height: 18px;
    width: 20px;
    padding: 5px;
}

ul.top-menu>li>a {
    color: #666666;
    font-size: 16px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #666666 !important;
    padding: 2px 6px;
    margin-right: 15px;
}

ul.top-menu>li>a:hover,
ul.top-menu>li>a:focus {
    border: 1px solid #b6b6b6 !important;
    background-color: transparent !important;
    border-color: #b6b6b6 !important;
    text-decoration: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #b6b6b6 !important;
}

.notify-row .badge {
    position: absolute;
    right: -10px;
    top: -10px;
    z-index: 100;
}

.dropdown-menu.extended {
    max-width: 300px !important;
    min-width: 160px !important;
    top: 42px;
    width: 235px !important;
    padding: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.176) !important;
    border: none !important;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

    /* Safari and Chrome */
    .dropdown-menu.extended {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.176) !important;
    }
}

.dropdown-menu.extended li p {
    background-color: #F1F2F7;
    color: #666666;
    margin: 0;
    padding: 10px;
    border-radius: 4px 4px 0px 0px;
    -webkit-border-radius: 4px 4px 0px 0px;
}

.dropdown-menu.extended li p.green {
    background-color: #d71149;
    color: #fff;
}

.dropdown-menu.extended li p.yellow {
    background-color: #fcb322;
    color: #fff;
}

.dropdown-menu.extended li a {
    border-bottom: 1px solid #EBEBEB !important;
    font-size: 12px;
    list-style: none;
}

.dropdown-menu.extended li a {
    padding: 15px 10px !important;
    width: 100%;
    display: inline-block;
}

.dropdown-menu.extended li a:hover {
    background-color: #F7F8F9 !important;
    color: #2E2E2E;
}

.dropdown-menu.tasks-bar .task-info .desc {
    font-size: 13px;
    font-weight: normal;
}

.dropdown-menu.tasks-bar .task-info .percent {

    float: right;
    font-size: 13px;
    font-weight: 600;
    padding-left: 10px;
    margin-top: -4px;
}

.dropdown-menu.extended .progress {
    margin-bottom: 0 !important;
    height: 10px;
}

.dropdown-menu.inbox li a .photo img {
    border-radius: 2px 2px 2px 2px;
    float: left;
    height: 40px;
    margin-right: 4px;
    width: 40px;
}

.dropdown-menu.inbox li a .subject {
    display: block;
}

.dropdown-menu.inbox li a .subject .from {
    font-size: 12px;
    font-weight: 600;
}

.dropdown-menu.inbox li a .subject .time {
    font-size: 11px;
    font-style: italic;
    font-weight: bold;
    position: absolute;
    right: 5px;
}

.dropdown-menu.inbox li a .message {
    display: block !important;
    font-size: 11px;
}

.top-nav {
    margin-top: 7px;
}

.top-nav ul.top-menu>li .dropdown-menu.logout {
    width: 268px !important;

}

.top-nav li.dropdown .dropdown-menu {
    float: right;
    right: 0;
    left: auto;
}

.dropdown-menu.extended.logout>li {
    float: left;
    text-align: center;
    width: 33.3%;
}

.dropdown-menu.extended.logout>li:last-child {
    float: left;
    text-align: center;
    width: 100%;
    background: #a9d96c;
    border-radius: 0 0 3px 3px;
}

.dropdown-menu.extended.logout>li:last-child>a,
.dropdown-menu.extended.logout>li:last-child>a:hover {
    color: #fff;
    border-bottom: none !important;
    text-transform: uppercase;
}

.dropdown-menu.extended.logout>li:last-child>a:hover>i {
    color: #fff;
}

.dropdown-menu.extended.logout>li>a {
    color: #a4abbb;
    border-bottom: none !important;
}

.full-width .dropdown-menu.extended.logout>li>a:hover {
    background: none !important;
    color: #50c8ea !important;
}

.dropdown-menu.extended.logout>li>a:hover {
    background: none !important;
}

.dropdown-menu.extended.logout>li>a:hover i {
    color: #50c8ea;
}

.dropdown-menu.extended.logout>li>a i {
    font-size: 17px;
}

.dropdown-menu.extended.logout>li>a>i {
    display: block;
}

.top-nav ul.top-menu>li>a {
    border: 1px solid #eeeeee;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: 6px;
    background: none;
    margin-right: 0;
}

.top-nav ul.top-menu>li {
    margin-left: 10px;
}

.top-nav ul.top-menu>li>a:hover,
.top-nav ul.top-menu>li>a:focus {
    border: 1px solid #F1F2F7;
    background: #F1F2F7;

}

.top-nav .dropdown-menu.extended.logout {
    top: 50px;
}

.top-nav .nav .caret {
    border-bottom-color: #A4AABA;
    border-top-color: #A4AABA;
}

.top-nav ul.top-menu>li>a:hover .caret {
    border-bottom-color: #000;
    border-top-color: #000;
}

.log-arrow-up {
    background: url("../img/arrow-up.png") no-repeat;
    width: 20px;
    height: 11px;
    position: absolute;
    right: 20px;
    top: -10px;
}

/*----*/

.notify-arrow {
    border-style: solid;
    border-width: 0 9px 9px;
    height: 0;
    margin-top: 0;
    opacity: 0;
    position: absolute;
    left: 7px;
    top: -18px;
    transition: all 0.25s ease 0s;
    width: 0;
    z-index: 10;
    margin-top: 10px;
    opacity: 1;
}

.notify-arrow-yellow {
    border-color: transparent transparent #FCB322;
    border-bottom-color: #FCB322 !important;
    border-top-color: #FCB322 !important;
}

.notify-arrow-green {
    border-color: transparent transparent #d71149;
    border-bottom-color: #d71149 !important;
    border-top-color: #d71149 !important;
}

/*--sidebar toggle---*/

.sidebar-toggle-box {
    float: left;
    padding-right: 15px;
    margin-top: 13px;
}

.sidebar-toggle-box .fa-bars {
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    color: #333333;
}


.sidebar-closed>#sidebar>ul {
    display: none;
}

.sidebar-closed #main-content {
    margin-left: 0px;
}

.sidebar-closed #sidebar {
    margin-left: -180px;
}


/* Dash Side */

.ds {
    background: #ffffff;
    padding-top: 20px;
}

.ds h4 {
    font-size: 14px;
    font-weight: 700;
}

.ds h3 {
    color: #ffffff;
    font-size: 16px;
    padding: 0 10px;
    line-height: 60px;
    height: 60px;
    margin: 0;
    background: #ff865c;
    text-align: center;
}

.ds i {
    font-size: 12px;
    line-height: 16px;
}

.ds .desc {
    border-bottom: 1px solid #eaeaea;
    display: inline-block;
    padding: 7px 0;
    width: 100%;
}

.ds .desc:hover {
    background: #f2f2f2;
}

.ds .thumb {
    width: 30px;
    margin: 0 10px 0 20px;
    display: block;
    float: left;
}

.ds .details {
    width: 170px;
    float: left;
}

.ds>.desc p {
    font-size: 11px;
}

.ds p>muted {
    font-size: 9px;
    text-transform: uppercase;
    font-style: italic;
    color: #666666
}

.ds a {
    color: #d71149;
}

/* LINE ICONS CONFIGURATION */

.mtbox {
    margin-top: 80px;
    margin-bottom: 40px;
}

.box1 {
    padding: 15px;
    text-align: center;
    color: #989898;
    border-bottom: 1px solid #989898;
}

.box1 span {
    font-size: 50px;

}

.box1 h3 {
    text-align: center;
}

.box0:hover .box1 {
    border-bottom: 1px solid #ffffff;
}

.box0 p {
    text-align: center;
    font-size: 12px;
    color: #f2f2f2;
}

.box0:hover p {
    color: #ff865c;
}

.box0:hover {
    background: #ffffff;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}

/* MAIN CHART CONFIGURATION */
.main-chart {
    padding-top: 20px;
}

.border-head h3 {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 15px;
    padding-bottom: 5px;
    font-size: 18px;
    display: inline-block;
    width: 100%;
    font-weight: 700;
    color: #989898;
}

.custom-bar-chart {
    height: 290px;
    margin-top: 20px;
    margin-left: 20px;
    position: relative;
    border-bottom: 1px solid #c9cdd7;
}

.custom-bar-chart .bar {
    height: 100%;
    position: relative;
    width: 6%;
    margin: 0px 4%;
    float: left;
    text-align: center;
    z-index: 10;
}

.custom-bar-chart .bar .title {
    position: absolute;
    bottom: -30px;
    width: 100%;
    text-align: center;
    font-size: 11px;
}

.custom-bar-chart .bar .value {
    position: absolute;
    bottom: 0;
    background: #ff865c;
    color: #d71149;
    width: 100%;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}



.custom-bar-chart .bar .value:hover {
    background: #2f2f2f;
    color: #fff;
}

.y-axis {
    color: #555555;
    position: absolute;
    text-align: left;
    width: 100%;
    font-size: 11px;
}

.y-axis li {
    border-top: 1px dashed #dbdce0;
    display: block;
    height: 58px;
    width: 100%;
}

.y-axis li:last-child {
    border-top: none;
}

.y-axis li span {
    display: block;
    margin: -10px 0 0 -60px;
    padding: 0 10px;
    width: 40px;
}


/*Donut Chart Main Page Conf*/
.donut-main {
    display: block;
    text-align: center;
}

.donut-main h4 {
    font-weight: 700;
    font-size: 16px;
}

/* *************************************************************************************
PANELS CONFIGURATIONS
*************************************************************************************** */

/*Panel Size*/

.pn {
    height: 250px;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}

.pn:hover {
    box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.3);

}

/*Grey Panel*/

.grey-panel {
    text-align: center;
    background: #eaebee;
    border-radius: 10px;
    border: 1px solid #d8dade;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.grey-panel .grey-header {
    background: #dddfe4;
    padding: 6px 10px;
    margin-bottom: 15px;
    border-radius: 10px 10px 0 0;
    font-weight: 600;
    color: #444;
    border-bottom: 1px solid #dcdee3;
}

.grey-panel h5 {
    font-weight: 200;
    margin-top: 10px;
}

.grey-panel table {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #d5d7dc;
    margin-bottom: 10px;
}

.grey-panel table thead th {
    background: #2c3e6b;
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: 12px;
    padding: 9px 10px;
}

.grey-panel table tbody td {
    padding: 7px 10px;
    border-top: 1px solid #eef0f2;
    border-left: none;
    border-right: none;
    font-size: 13px;
    vertical-align: middle;
}

.grey-panel table tbody tr:first-child td {
    border-top: none;
}

.grey-panel table tbody tr:nth-child(even) {
    background: #f8f9fb;
}

.grey-panel table tbody tr:hover {
    background: #edf1f7;
}

.grey-panel p {
    margin-left: 5px;
}

/* Specific Conf for Donut Charts*/
.donut-chart p {
    margin-top: 5px;
    font-weight: 700;
    margin-left: 15px;
}

.donut-chart h2 {
    font-weight: 900;
    color: #FF6B6B;
    font-size: 38px;
}

/* Dark Blue*/

.darkblue-panel {
    text-align: center;
    background: #444c57;
}

.darkblue-panel .darkblue-header {
    background: transparent;
    padding: 3px;
    margin-bottom: 15px;
}

.darkblue-panel h1 {
    color: #f2f2f2;
}

.darkblue-panel h5 {
    font-weight: 200;
    margin-top: 10px;
    color: white;
}

.darkblue-panel footer {
    color: white;
}

.darkblue-panel footer h5 {
    margin-left: 10px;
    margin-right: 10px;
    font-weight: 700;
}

/*Green Panel*/
.green-panel {
    text-align: center;
    background: #d71149;
}

.green-panel .green-header {
    background: #43b1a9;
    padding: 3px;
    margin-bottom: 15px;
}

.green-panel h5 {
    color: white;
    font-weight: 200;
    margin-top: 10px;
}

.green-panel h3 {
    color: white;
    font-weight: 100;
}

.green-panel p {
    color: white;
}

/*White Panel */
.white-panel {
    text-align: center;
    background: #ffffff;
    color: #ccd1d9;
}

.white-panel p {
    margin-top: 5px;
    font-weight: 700;
    margin-left: 15px;
}

.white-panel .white-header {
    background: #f4f4f4;
    padding: 3px;
    margin-bottom: 15px;
    color: #c6c6c6;
}

.white-panel .small {
    font-size: 10px;
    color: #ccd1d9;
}

.white-panel i {
    color: #d71149;
    padding-right: 4px;
    font-size: 14px;
}

/*STOCK CARD Panel*/
.card {
    background: white;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
    margin-bottom: 1em;
    height: 250px;
}

.stock .stock-chart {
    background: #00c5de;
}

.stock .stock-chart #chart {
    height: 10.7em;
    background: url(http://i.imgbox.com/abmuNQx2) center bottom no-repeat;
}

.stock .current-price {
    background: #1d2122;
    padding: 10px;
}

.stock .current-price .info abbr {
    display: block;
    color: #f8f8f8;
    font-size: 1.5em;
    font-weight: 600;
    margin-top: 0.18em;
}

.stock .current-price .changes {
    text-align: right;
}

.stock .changes .up {
    color: #4fd98b
}

.stock .current-price .changes .value {
    font-size: 1.8em;
    font-weight: 700;
}

.stock .summary {
    color: #2f2f2f;
    display: block;
    background: #f2f2f2;
    padding: 10px;
    text-align: center;
}

.stock .summary strong {
    font-weight: 900;
    font-size: 14px;
}

/*Content Panel*/
.content-panel {
    background: #ffffff;
    box-shadow: 0px 3px 2px #aab2bd;
    padding-top: 8px;
    padding-bottom: 5px;
}

.content-panel h4 {
    margin-left: 10px;
}

/*WEATHER PANELS*/

/* Weather 1 */
.weather {
    background: url(../img/weather.jpg) no-repeat center top;
    text-align: center;
    background-position: center center;
}

.weather i {
    color: white;
    margin-top: 45px;
}

.weather h2 {
    color: white;
    font-weight: 900;
}

.weather h4 {
    color: white;
    font-weight: 900;
    letter-spacing: 1px;
}

/* Weather 2 */
.weather-2 {
    background: #e9f0f4;
}

.weather-2 .weather-2-header {
    background: #54bae6;
    padding-top: 5px;
    margin-bottom: 5px;
}

.weather-2 .weather-2-header p {
    color: white;
    margin-left: 5px;
    margin-right: 5px;
}

.weather-2 .weather-2-header p small {
    font-size: 10px;
}

.weather-2 .data {
    margin-right: 10px;
    margin-left: 10px;
    color: #272b34;
}

.weather-2 .data h5 {
    margin-top: 0px;
    font-weight: lighter;
}

.weather-2 .data h1 {
    margin-top: 2px;
}

/* Weather 3 */
.weather-3 {
    background: #ffcf00;
}

.weather-3 i {
    color: white;
    margin-top: 30px;
    font-size: 70px;
}

.weather-3 h1 {
    margin-top: 10px;
    color: white;
    font-weight: 900;
}

.weather-3 .info {
    background: #f2f2f2;
}

.weather-3 .info i {
    font-size: 15px;
    color: #c2c2c2;
    margin-bottom: 0px;
    margin-top: 10px;
}

.weather-3 .info h3 {
    font-weight: 900;
    margin-bottom: 0px;
}

.weather-3 .info p {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 16px;
    color: #c2c2c2;
    font-size: 15px;
    font-weight: 700;
}


/* Message Panel */
.message-p {
    background: #f5f5f5;
}

.message-p .message-header {
    background: #dcdfe3;
    padding: 3px;
    margin-bottom: 15px;
    text-align: center;
}

.message-p h5 {
    font-weight: 200;
    margin-top: 10px;
}

.message-p p {
    margin-left: 10px;
}

.message-p .small {
    font-size: 11px;
    color: #aab2bd;
    margin-top: -10px;
}

.message-p name {
    color: #ed5565;
    font-weight: 700;
}

.message-p .message {
    font-size: 12px;
}

.message-p .form-inline {
    margin-left: 10px;
}

.message-p .form-inline .form-group {
    width: 80%;
}

.message-p .form-inline .form-control {
    width: 100%
}

/*Twitter Panel*/
.twitter-panel {
    background: #4fc1e9;
    text-align: center;
}

.twitter-panel i {
    color: white;
    margin-top: 40px;
}

.twitter-panel p {
    color: #f5f5f5;
    margin: 10px;
}

.twitter-panel .user {
    color: white;
    font-weight: 900;
}


/* Instagram Panel*/
.instagram-panel {
    background: url(../img/instagram.jpg) no-repeat center top;
    text-align: center;
    background-position: center center;
}

.instagram-panel i {
    color: white;
    margin-top: 35px;
}

.instagram-panel p {
    margin: 5px;
    color: white;
}

/* Product Panel */
.product-panel {
    background: #dadad2;
    text-align: center;
    padding-top: 50px;
    height: 100%;
}

/* Product Panel 2*/
.product-panel-2 {
    background: #dadad2;
    text-align: center;
}

.product-panel-2 .badge {
    position: absolute;
    top: 20px;
    left: 35px;
}

.badge-hot {
    background: #ed5565;
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    border-radius: 100%;
}

/* Soptify Panel */
#spotify {
    background: url(../img/lorde.jpg) no-repeat center top;
    margin-top: -15px;
    background-attachment: relative;
    background-position: center center;
    min-height: 220px;
    width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#spotify .btn-clear-g {
    top: 15%;
    right: 10px;
    position: absolute;
    margin-top: 5px;
}

#spotify .sp-title {
    bottom: 15%;
    left: 25px;
    position: absolute;
    color: #efefef;
}

#spotify .sp-title h3 {
    font-weight: 900;
}

#spotify .play {
    bottom: 18%;
    right: 25px;
    position: absolute;
    color: #efefef;
    font-size: 20px
}

.followers {
    margin-left: 5px;
    margin-top: 5px;
}

/* BLOG PANEL */
#blog-bg {
    background: url(../img/blog-bg.jpg) no-repeat center top;
    margin-top: -15px;
    background-attachment: relative;
    background-position: center center;
    min-height: 150px;
    width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#blog-bg .badge {
    position: absolute;
    top: 20px;
    left: 35px;
}

.badge-popular {
    background: #3498db;
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 13px;
    color: #fff;
    text-align: center;
    border-radius: 100%;
}

.blog-title {
    background: rgba(0, 0, 0, 0.5);
    bottom: 100px;
    padding: 6px;
    color: white;
    font-weight: 700;
    position: absolute;
    display: block;
    width: 120px;
}

.blog-text {
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 15px;
    font-size: 12px;
}

/* Calendar Configuration */
#calendar {
    color: white;
    padding: 0px !important;
}

.calendar-month-header {
    background: #43b1a9;
}

/* TODO PANEL */
.steps {
    display: block;
}

.steps input[type=checkbox] {
    display: none;
}

.steps input[type=submit] {
    background: #f1783c;
    border: none;
    padding: 0px;
    margin: 0 auto;
    width: 100%;
    height: 55px;
    color: white;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.5s ease
}

.steps input[type=submit]:hover {
    background: #8fde9c;
}

.steps label {
    background: #393D40;
    height: 65px;
    line-height: 65px;
    width: 100%;
    display: block;
    border-bottom: 1px solid #44494e;
    color: #889199;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 1px;
    text-indent: 52px;
    cursor: pointer;
    transition: all 0.7s ease;
    margin: 0px;
}

.steps label:before {
    content: "";
    width: 12px;
    height: 12px;
    display: block;
    position: absolute;
    margin: 26px 0px 0px 18px;
    border-radius: 100%;
    transition: border 0.7s ease
}

.steps label:hover {
    background: #2B2E30;
    color: #46b7e5
}

.steps label:hover:before {
    border: 1px solid #46b7e5;
}

#op1:checked~label[for=op1]:before,
#op2:checked~label[for=op2]:before,
#op3:checked~label[for=op3]:before {
    border: 2px solid #96c93c;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGFJREFUeNpinHLMhgEHKADia0xQThIQs6JJ9gPxZhYQAcS6QHwDiI8hSYJAC0gBPxDLAvFcIJ6JJJkDxFNBVtgBcQ8Qa6BLghgwN4A4a9ElQYAFSj8C4mwg3o8sCQIAAQYA78QTYqnPZuEAAAAASUVORK5CYII=') no-repeat center center;
}

/* PROFILE PANELS */
/* Profile 01*/
#profile-01 {
    background: url(../img/profile-01.jpg) no-repeat center top;
    margin-top: -15px;
    background-attachment: relative;
    background-position: center center;
    min-height: 150px;
    width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#profile-01 h3 {
    color: white;
    padding-top: 50px;
    margin: 0px;
    text-align: center;
}

#profile-01 h6 {
    color: white;
    text-align: center;
    margin-bottom: 0px;
    font-weight: 900;
}

.profile-01 {
    background: #d71149;
    height: 50px;
}

.profile-01:hover {
    background: #2f2f2f;
    -webkit-transition: background-color 0.6s;
    -moz-transition: background-color 0.6s;
    -o-transition: background-color 0.6s;
    transition: background-color 0.6s;
    cursor: pointer;
}

.profile-01 p {
    color: white;
    padding-top: 15px;
    font-weight: 400;
    font-size: 15px;
}

/* Profile 02*/
#profile-02 {
    background: url(../img/profile-02.jpg) no-repeat center top;
    margin-top: -15px;
    background-attachment: relative;
    background-position: center center;
    min-height: 200px;
    width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#profile-02 .user {
    padding-top: 40px;
    text-align: center;
}

#profile-02 h4 {
    color: white;
    margin: 0px;
    padding-top: 8px;
}

.pr2-social a {
    color: #cdcdcd;
}

.pr2-social a:hover {
    color: #d71149;
}

.pr2-social i {
    margin-top: 15px;
    margin-right: 12px;
    font-size: 20px;
}


/*spark line*/
.chart {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.chart .heading {
    text-align: left;
}

.chart .heading span {
    display: block;
}

.panel.green-chart .chart-tittle {
    font-size: 16px;
    padding: 15px;
    display: inline-block;
    font-weight: normal;
    background: #99c262;
    width: 100%;
    -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
}

#barchart {
    margin-bottom: -15px;
    display: inline-block;
}

.panel.green-chart .chart-tittle .value {
    float: right;
    color: #c0f080;
}

.panel.green-chart {
    background: #a9d96c;
    color: #fff;
}

.panel.terques-chart {
    background: transparent;
    color: #797979;
}

.panel.terques-chart .chart-tittle .value {
    float: right;
    color: #fff;
}

.panel.terques-chart .chart-tittle .value a {
    color: #2f2f2f;
    font-size: 12px;
}

.panel.terques-chart .chart-tittle .value a:hover,
.panel.terques-chart .chart-tittle .value a.active {
    color: #d71149;
    font-size: 12px;
}

.panel.terques-chart .chart-tittle {
    font-size: 16px;
    padding: 15px;
    display: inline-block;
    font-weight: normal;
    background: #39b7ac;
    width: 100%;
    -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
}

.inline-block {
    display: inline-block;
}

/* showcase background */
.showback {
    background: #ffffff;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0px 3px 2px #aab2bd;
}

/* Font Awesome Showcase */
.fontawesome-list .fa-hover a {
    display: block;
    color: #222;
    line-height: 32px;
    height: 32px;
    padding-left: 10px;
    border-radius: 4px;
}

.fontawesome-list i {
    margin-right: 8px;
}

.show-grid [class^=col-] {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #ccc;
    border: 1px solid #ddd;
}

.show-grid [class^=col-]:hover {
    background-color: white;
}

/* Calendar Events - Calendar.html*/
.external-event {
    cursor: move;
    display: inline-block !important;
    margin-bottom: 7px !important;
    margin-right: 7px !important;
    padding: 10px;
}

.drop-after {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #ccc;
}

.fc-state-default,
.fc-state-default .fc-button-inner {
    background: #f2f2f2;
}

.fc-state-active .fc-button-inner {
    background: #FFFFFF;
}

/* Gallery Configuration */
.photo-wrapper {
    display: block;
    position: relative;
    overflow: hidden;
    background-color: #dde0e4;
    -webkit-transition: background-color 0.4s;
    -moz-transition: background-color 0.4s;
    -o-transition: background-color 0.4s;
    transition: background-color 0.4s;
}

.project .overlay {
    position: absolute;
    text-align: center;
    color: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;

}

.project:hover .photo-wrapper {
    background-color: #c8ccd2;
    background-image: url(../img/zoom.png);
    background-repeat: no-repeat;
    background-position: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: relative;
}

.project:hover .photo {
    opacity: 0.1;
    filter: alpha(opacity=40);
}

.project:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
}



/* EZ Checklist */
.ez-checkbox {
    margin-right: 5px;
}

.ez-checkbox,
.ez-radio {
    height: 20px;
    width: 20px;
}

.brand-highlight {
    background: #fffbcc !important;
}


/* FORMS CONFIGURATION */
.form-panel {
    background: #ffffff;
    margin: 10px;
    padding: 10px;
    border-radius: 7px;
    border: 1px solid #e8eaed;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-align: left;
    transition: box-shadow 0.2s ease;
}

@media (max-width: 768px) {
    .wrapper .form-panel {
        margin: 10px 0px;
    }

    .wrapper .panel-body {
        padding: 0px;
    }

    .dataTables_scrollBody {
        max-height: calc(100vh - 380px) !important;
    }
}

.form-horizontal.style-form .form-group {
    border-bottom: 1px solid #f0f1f3;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.round-form {
    border-radius: 500px;
    -webkit-border-radius: 500px;
}

@media (min-width: 768px) {
    .form-horizontal .control-label {
        text-align: left;
    }
}

#focusedInput {
    border: 1px solid #ed5565;
    box-shadow: none;
}

.add-on {
    float: right;
    margin-top: -37px;
    padding: 3px;
    text-align: center;
}

.add-on .btn {
    height: 34px;
}

/* TOGGLE CONFIGURATION */
.has-switch {
    border-radius: 30px;
    -webkit-border-radius: 30px;
    display: inline-block;
    cursor: pointer;
    line-height: 1.231;
    overflow: hidden;
    position: relative;
    text-align: left;
    width: 80px;
    -webkit-mask: url('../img/mask.png') 0 0 no-repeat;
    mask: url('../img/mask.png') 0 0 no-repeat;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.has-switch.deactivate {
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: default !important;
}

.has-switch.deactivate label,
.has-switch.deactivate span {
    cursor: default !important;
}

.has-switch>div {
    width: 162%;
    position: relative;
    top: 0;
}

.has-switch>div.switch-animate {
    -webkit-transition: left 0.25s ease-out;
    -moz-transition: left 0.25s ease-out;
    -o-transition: left 0.25s ease-out;
    transition: left 0.25s ease-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.has-switch>div.switch-off {
    left: -63%;
}

.has-switch>div.switch-off label {
    background-color: #7f8c9a;
    border-color: #bdc3c7;
    -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);
    -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);
}

.has-switch>div.switch-on {
    left: 0%;
}

.has-switch>div.switch-on label {
    background-color: #41cac0;
}

.has-switch input[type=checkbox] {
    display: none;
}

.has-switch span {
    cursor: pointer;
    font-size: 14.994px;
    font-weight: 700;
    float: left;
    height: 29px;
    line-height: 19px;
    margin: 0;
    padding-bottom: 6px;
    padding-top: 5px;
    position: relative;
    text-align: center;
    width: 50%;
    z-index: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: 0.25s ease-out;
    -moz-transition: 0.25s ease-out;
    -o-transition: 0.25s ease-out;
    transition: 0.25s ease-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.has-switch span.switch-left {
    border-radius: 30px 0 0 30px;
    background-color: #2A3542;
    color: #41cac0;
    border-left: 1px solid transparent;
}

.has-switch span.switch-right {
    border-radius: 0 30px 30px 0;
    background-color: #bdc3c7;
    color: #ffffff;
    text-indent: 7px;
}

.has-switch span.switch-right [class*="fui-"] {
    text-indent: 0;
}

.has-switch label {
    border: 4px solid #2A3542;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    float: left;
    height: 29px;
    margin: 0 -21px 0 -14px;
    padding: 0;
    position: relative;
    vertical-align: middle;
    width: 29px;
    z-index: 100;
    -webkit-transition: 0.25s ease-out;
    -moz-transition: 0.25s ease-out;
    -o-transition: 0.25s ease-out;
    transition: 0.25s ease-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.switch-square {
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -webkit-mask: url('../img/mask.png') 0 0 no-repeat;
    mask: url('../img/mask.png') 0 0 no-repeat;
}

.switch-square>div.switch-off label {
    border-color: #7f8c9a;
    border-radius: 6px 0 0 6px;
}

.switch-square span.switch-left {
    border-radius: 6px 0 0 6px;
}

.switch-square span.switch-left [class*="fui-"] {
    text-indent: -10px;
}

.switch-square span.switch-right {
    border-radius: 0 6px 6px 0;
}

.switch-square span.switch-right [class*="fui-"] {
    text-indent: 5px;
}

.switch-square label {
    border-radius: 0 6px 6px 0;
    border-color: #41cac0;
}


/* TABLES CONF*/
.dataTables_paginate.paging_bootstrap.pagination {
    float: right;
    margin-top: -5px;
    margin-bottom: 15px;
}

.dataTables_paginate {
    padding: 15px 0;
}

.dataTables_paginate.paging_bootstrap.pagination li {
    float: left;
    margin: 0 1px;
    border: 1px solid #ddd;
    border-radius: 3px;
    -webkit-border-radius: 3px;
}

ul li {
    list-style: none;
}

.dataTables_paginate.paging_bootstrap.pagination li a {
    color: #797979;
    padding: 5px 10px;
    display: inline-block;
}

.dataTables_paginate.paging_bootstrap.pagination li:hover a,
.dataTables_paginate.paging_bootstrap.pagination li.active a {
    color: #fff;
    background: #d71149;
    border-radius: 3px;
    -webkit-border-radius: 3px;
}

/*LOGIN CONFIGURATION PAGE*/
.form-login {
    max-width: 330px;
    margin: 130px auto 0;
    background: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

.form-login h2.form-login-heading {
    margin: 0;
    padding: 20px 20px 20px 116px;
    /* text-align: center; */
    background: #1e2a3a;
    border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    color: #fff;
    font-size: 32px;
    /*text-transform: uppercase;*/
    font-weight: 300;
}

.login-wrap {
    padding: 20px;
}

.login-wrap .registration {
    text-align: center;
}

.login-social-link {
    display: block;
    margin-top: 20px;
    margin-bottom: 15px;
}


/*LOCK SCREEN CONF*/
#showtime {
    width: 100%;
    color: #fff;
    font-size: 90px;
    margin-bottom: 30px;
    margin-top: 250px;
    display: inline-block;
    text-align: center;
    font-weight: 400;
}

.lock-screen {
    text-align: center;
}

.lock-screen a {
    color: white;
}

.lock-screen a:hover {
    color: #48cfad
}

.lock-screen i {
    font-size: 60px;
}

.lock-screen .modal-content {
    position: relative;
    background-color: #f2f2f2;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 5px;
}




/* PROFILE PAGE CONF */
.profile-pic img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 10px solid #f1f2f7;
    margin-top: 20px;
}

.profile-text h6 {
    margin-top: -10px;
    margin-bottom: 20px;
    color: #d3d3d3;
}

.profile-text h3 {
    font-weight: 700;
    color: #FF865C;
}

.profile-text h4 {
    color: #FF865C;
}

profile-text p {
    margin-left: 10px;
}

.right-divider {
    border-right: 1px solid #d3d3d3;
    height: 100%;
}

.panel-heading .nav {
    border: medium none;
    font-size: 13px;
    margin-left: 0px;
    margin-right: 0px;
    text-transform: uppercase;
}

.nav-tabs {
    background: #e0e1e7;
    border-bottom: 2px solid #ccd0d8;
}

.nav-tabs>li>a {
    color: #666;
    border-radius: 4px 4px 0 0;
    margin-bottom: -2px;
    transition: color 0.15s, background 0.15s;
}

.nav-tabs>li>a:hover {
    color: #333;
    background: #eaebef;
    border-color: transparent;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    color: #2c3e6b;
    font-weight: 600;
    background: #fff;
    border: 2px solid #ccd0d8;
    border-bottom-color: #fff;
}

.grey-style {
    background: #f2f4f6;
    padding: 10px;
    height: 45px;
}

.detailed h4 {
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid #e2e2e2;
    font-weight: 700;
    color: #FF865C;
}

ul.my-friends {
    margin: 0px;
    margin-top: 16px;
    margin-left: 10px;
    padding: 0;
}

ul.my-friends li .friends-pic {

    float: left;
    overflow: hidden;
    margin: 4px;
}

.recent-activity {
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
    position: relative;
    table-layout: fixed;
    width: 100%;
}

.recent-activity:before {
    background-color: #eeeeee;
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    top: 50px;
    width: 2px;
    z-index: 0;
}

.activity-icon {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    color: #FFFFFF;
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 30px;
    margin: 20px auto 20px;
    position: relative;
}

.activity-panel {
    padding: 15px 30px;
    background: #f2f2f2;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    position: relative;
    text-align: center;
}

.activity-panel h5 {
    font-weight: 700;
}

/* INVOICE CONF */
.well.green {
    background-color: #48cfad;
    color: #fff;
    border: none;
}

.well.well-small {
    padding: 7px;
    width: auto;
}

.invoice-body {
    padding: 30px;
}

.invoice-body h1 {
    font-weight: 900;
}

.invoice-body h4 {
    margin-left: 0px;
}

/* Map Wrap*/
#map {
    width: 100%;
    height: 450px;
}


/*PRICING TABLE*/
.custom-box {
    background: #FFFFFF;
    border: 1px solid #DCDBD7;
    margin: 30px 0;
    padding: 30px 20px 35px;
    text-align: center;
}

.servicetitle hr {
    border: 0 none;
    height: 3px;
    margin: 10px auto;
    width: 80px;
    background-color: #d71149;
}

.icn-main-container {
    position: relative;
}

.icn-container {
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 500px;
    text-align: center;
    margin: 10px 0;
    font-weight: 600;
    font-size: 2.4em;
    line-height: 100px;
    color: #fff;
    background-color: #d71149;
    -webkit-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.icn-container.active,
.icn-container:hover {
    background: #2B2E31 !important;
}

.pricing {
    list-style: none;
    padding: 10px 0 20px;
}

.pricing li {
    border-bottom: 1px solid #DCDBD7;
    font-size: 13px;
    font-weight: 100;
    line-height: 34px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 70%;
    -webkit-transition: background-color .4s linear, color .4s linear;
    -moz-transition: background-color .4s linear, color .4s linear;
    -o-transition: background-color .4s linear, color .4s linear;
    -ms-transition: background-color .4s linear, color .4s linear;
    transition: background-color .4s linear, color .4s linear;
}

.pricing li:last-child {
    border-bottom: 0px solid #fff;
}


/* FAQ CONF */
.dmbox {
    margin: 0;
    border: 0;
    border: 1px solid #EDEDED;
    background-color: #fff;
    padding: 9px 18px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    text-align: center;
    -webkit-transition: background 0.3s ease-out;
    transition: background 0.3s ease-out;
}

.dm-icon {
    display: inline-block;
    cursor: pointer;
    margin: 15px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    z-index: 1;
    background: #2B2E31;
    color: #ffffff;
}

.dm-icon:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.dm-icon:before {

    line-height: 105px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: block;
    -webkit-font-smoothing: antialiased;
}

.dm-icon:active,
.dm-icon:hover {
    background: #d71149
}


/* 404 & 500 Error Pages Conf*/
.p404 img {
    margin-top: 120px;
}

.p404 h1 {
    font-weight: 900;
}


/* MAIL CONFIGURATION - INBOX, MAIL COMPOSE & MAIL VIEW  */
.mail-nav {
    margin: 15px -15px 0 -15px;
}

.mail-nav li a {
    border-radius: 0;
    -webkit-border-radius: 0;
    border-top: 1px solid #f2f3f6;
    padding: 15px;
    border-right: 3px solid rgba(0, 0, 0, 0);
    color: #a2a2a2;
}

.mail-nav>li>a:hover,
.mail-nav>li>a:focus {
    background: #fafafa;
    color: #d71149;
    border-right: 3px solid #1fb5ad;
}

.mail-nav>li.active>a,
.mail-nav>li.active>a:hover,
.mail-nav>li.active>a:focus {
    background: #fafafa;
    color: #d71149;
    border-right: 3px solid #d71149;
}

.mail-nav>li+li {
    margin-left: 0;
    margin-top: 0px;
}

.mail-nav i {
    font-size: 16px;
    margin-right: 10px;
}

.inbox-notification {
    margin-top: -2px;
}

.user-head .inbox-avatar {
    width: 65px;
    float: left;
}

.user-head .inbox-avatar img {
    border-radius: 4px;
    -webkit-border-radius: 4px;
}

.user-head .user-name {
    display: inline-block;
    margin: 0 0 0 10px;
}

.user-head .user-name h5 {
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 0;
    font-weight: 300;
}

.user-head .user-name h5 a {
    color: #fff;
}

.user-head .user-name span a {
    font-size: 12px;
    color: #87e2e7;
}

a.mail-dropdown {
    background: #80d3d9;
    padding: 3px 5px;
    font-size: 10px;
    color: #01a7b3;
    border-radius: 2px;
    margin-top: 20px;
}

.inbox-body {
    padding: 20px;
}

.btn-compose {
    background: #d71149;
    padding: 12px 0;
    text-align: center;
    width: 100%;
    color: #fff;
}

.btn-compose:hover,
.btn-compose:focus {
    background: #1ca59e;
    color: #fff;
}

.btn-compose i {
    padding: 5px;
}

ul.inbox-nav {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.inbox-divider {
    border-bottom: 1px solid #d5d8df;
}

.inbox-action {
    margin-top: 50px;
}

.src-position {
    margin-top: -7px;
}

.mail-src-position {
    margin-top: -3px;
}

ul.labels-info {
    border-bottom: 1px solid #f1f2f7;
    margin-bottom: 10px;
}

ul.inbox-nav li {
    display: inline-block;
    line-height: 45px;
    width: 100%;
}

ul.inbox-nav li a {
    color: #6a6a6a;
    line-height: 45px;
    width: 100%;
    display: inline-block;
    padding: 0 20px;
}

ul.inbox-nav li a:hover,
ul.inbox-nav li.active a,
ul.inbox-nav li a:focus {
    color: #6a6a6a;
    background: #d5d7de;
}

ul.inbox-nav li a i {
    padding-right: 10px;
    font-size: 16px;
    color: #6a6a6a;
}

ul.inbox-nav li a span.label {
    margin-top: 13px;
}

ul.labels-info li h4 {
    padding-top: 5px;
    color: #5c5c5e;
    font-size: 15px;
    text-transform: uppercase;
}

ul.labels-info li {
    margin: 0;
}

ul.labels-info li a {
    color: #6a6a6a;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

ul.labels-info li a:hover,
ul.labels-info li a:focus {
    color: #6a6a6a;
    background: none;
}

ul.labels-info li img {
    margin-right: 10px;
}

.nav.nav-pills.nav-stacked.labels-info p {
    margin-bottom: 0;
    padding: 0 22px;
    color: #9d9f9e;
    font-size: 11px;
}

.inbox-head {
    padding: 20px;
    background: #41cac0;
    color: #fff;
    border-radius: 0 4px 0 0;
    -webkit-border-radius: 0 4px 0 0;
    min-height: 80px;
}

.inbox-head h3 {
    margin: 0;
    display: inline-block;
    padding-top: 6px;
    font-weight: 300;
}

.inbox-head .sr-input {
    height: 40px;
    border: none;
    box-shadow: none;
    padding: 0 10px;
    float: left;
    border-radius: 4px 0 0 4px;
    color: #8a8a8a;
}

.inbox-head .sr-btn {
    height: 40px;
    border: none;
    background: #00a6b2;
    color: #fff;
    padding: 0 20px;
    border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
}

.wht-bg {
    background: #fff;
}

.wht-bg h4 {
    font-size: 24px;
    color: #a2a2a2;
    font-weight: 300;
}

.table-inbox-wrap {
    margin: 0 -15px;
}

.mail-checkbox {
    margin-right: 10px;
}

.table-inbox {
    margin: 0;
}

.table-inbox tr td {
    padding: 12px !important;
}

.table-inbox tr td:first-child {
    width: 5%;
}

.table-inbox tr td:first-child .icheckbox_minimal {
    margin-left: 15px;
}

.table-inbox tr td:hover {
    cursor: pointer;
}

.table-inbox tr td .fa-star.inbox-started,
.table-inbox tr td .fa-star:hover {
    color: #f78a09;
}

.table-inbox tr td .fa-star {
    color: #d5d5d5;
}

.table-inbox tr.unread td {
    font-weight: 600;
    background: #f7f7f7;
}

.table-inbox tr.unread a {
    color: #32323a;
}

.table-inbox tr a {
    color: #767676;
}

ul.inbox-pagination {
    float: right;
}

ul.inbox-pagination li {
    float: left;
}

.pagination li a {
    color: #32323a;
}

.mail-option {
    display: inline-block;
    margin-bottom: 10px;
    width: 100%;
}

.mail-option .chk-all {
    float: left;
}

.mail-option .chk-all,
.mail-option .btn-group {
    margin-right: 5px;
}

.mail-option .chk-all,
.mail-option .btn-group a.btn {
    border: 1px solid #e7e7e7;
    padding: 5px 10px;
    display: inline-block;
    background: #fcfcfc;
    color: #afafaf;
    border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
}

.inbox-pagination a.np-btn {
    border: 1px solid #e7e7e7;
    padding: 5px 15px;
    display: inline-block;
    background: #fcfcfc;
    color: #afafaf;
    border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
}

.mail-option .chk-all input[type=checkbox] {
    margin-top: 0;
}

.mail-option .btn-group a.all {
    padding: 0;
    border: none;
}

.inbox-pagination a.np-btn {
    margin-left: 5px;
}

.inbox-pagination li span {
    display: inline-block;
    margin-top: 7px;
    margin-right: 5px;
}

.fileinput-button {
    border: 1px solid #e6e6e6;
    background: #eeeeee;
}

.inbox-body .modal .modal-body input,
.inbox-body .modal .modal-body textarea {
    border: 1px solid #e6e6e6;
    box-shadow: none;
}

.btn-send,
.btn-send:hover {
    background: #00A8B3;
    color: #fff;
}

.btn-send:hover {
    background: #009da7;
}

.modal-header h4.modal-title {
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
}

.modal-body label {
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}

.compose-mail {
    width: 100%;
    display: inline-block;
    position: relative;
    margin-top: 20px;
}


.compose-mail .compose-options {
    color: #979797;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    position: absolute;
    right: 10px;
    top: 7px;
}

.compose-mail input,
.compose-mail input:focus {
    border: none;
    padding: 0;
    width: 80%;
    float: left;
}

.compose-mail .form-group {
    border: 1px solid #F2F3F6;
    display: inline-block;
    width: 100%;
    margin-bottom: 0;
}

.compose-mail .form-group label {
    line-height: 34px;
    width: 10%;
    float: left;
    padding-left: 5px;
    margin-bottom: 0;
}

.compose-editor input {
    margin-top: 15px;
}

.compose-editor {
    margin-bottom: 15px;
    display: inline-block;
    width: 100%;
}

.compose-btn {
    float: left;
    margin-top: 6px;
}

.mail-header h4 {
    font-weight: 300;
}

.mail-sender,
.attachment-mail {
    width: 100%;
    display: inline-block;
    margin: 20px 0;
    border-top: 1px solid #EFF2F7;
    border-bottom: 1px solid #EFF2F7;
    padding: 10px 0;

}

.mail-sender img {
    width: 30px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
}

.mail-sender .date {
    line-height: 30px;
    margin-bottom: 0;
    text-align: right;
}

.view-mail a,
.attachment-mail a:hover {
    color: #d71149;
}

.attachment-mail a {
    color: #d71149;
}

.attachment-mail ul li {
    float: left;
    width: 200px;
    margin-right: 15px;
    margin-top: 15px;
    list-style: none;
}

.attachment-mail ul li a.atch-thumb img {
    width: 200px;
    height: 180px;
    margin-bottom: 10px;
}

.attachment-mail ul li a.name span {
    float: right;
    color: #767676;
}


/*CHAT ROOM & LOBBY CONFIGURATION*/

/*chat room*/
.chat-room {
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
    position: relative;
}

.chat-room aside {
    display: table-cell;
    float: none;
    height: 100%;
    padding: 0;
    vertical-align: top;
}

.chat-room .mid-side {
    width: 75%;
    background: #fff;
    border-right: 1px solid #e5e8ef;
}

.chat-room .right-side {
    width: 25%;
    background: #fff;
}

.chat-room .right-side .user-head {
    background: #3498db;
    color: #FFFFFF;
    min-height: 70px;
    padding: 10px;
    border-left: 1px solid #3498db;
    margin-left: -1px;
    position: relative;
}


.chat-room .user-head i {
    float: left;
    font-size: 40px;
    margin-right: 10px;
}

.chat-room .user-head h3 {
    margin: 6px 0 0 0;
    font-weight: 100;
    letter-spacing: 1px;
}

.chat-room-head {
    background: #d71149;
    color: #FFFFFF;
    min-height: 70px;
    padding: 15px;
}

.chat-room-head h3 {
    margin: 5px 0 0;
    font-weight: 100;
    letter-spacing: 1px;
    display: inline-block;
}

.chat-room-head .search-btn {
    width: 20px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    box-shadow: none;
    background: #34495e;
    padding: 0 5px 0 35px;
    margin-top: 2px;
    border: none;
    color: #fff;
}

.chat-room-head .search-btn:focus {
    width: 180px;
    box-shadow: none;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    /*background: #01a6b2;*/
    font-weight: 300;
    color: #fff;
}

.chat-room-head .search-btn:focus::-moz-placeholder {
    color: #fff;
}

ul.chat-list li a {
    color: #6a6a6a;
    display: block;
    padding: 15px;
    font-weight: 300;
}

ul.chat-list li a:hover,
ul.chat-list li.active a {
    color: #00a9b4;
    background: #f2f4f7;
}

ul.chat-list li h4 {
    padding: 17px 15px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #D5D7DE;
}

ul.chat-list li h4 i {
    padding-right: 5px;
}

ul.chat-list li a span {
    padding-left: 10px;
}

ul.chat-list li a i.fa-times {
    color: #9fa3b0;
}

ul.chat-list li.active {
    color: #00a9b4;
    background: #f2f4f7;
}

ul.chat-list {
    border-bottom: 1px solid #d5d7de;
}

ul.chat-user {
    margin-bottom: 200px;
}

ul.chat-user li {
    border-bottom: none;
}

ul.chat-user li a:hover {
    background: none;
    color: #6a6a6a;
}

.chat-room .mid-side footer {
    background: #f6f6f6;
    padding: 15px;
    height: 70px;
    width: 75%;
    position: absolute;
    bottom: 0;
    border-right: 1px solid #E5E8EF;
}

.chat-room .right-side footer {
    background: #fff;
    padding: 15px;
    height: 70px;
    width: 25%;
    position: absolute;
    bottom: 0;
    border-top: 1px solid #E5E8EF;
    border-radius: 0 0 4px 0;
    -webkit-border-radius: 0 0 4px 0;
}

.room-desk {
    display: inline-block;
    margin-bottom: 30px;
    width: 100%;
    padding: 15px;
}

.room-desk h4 {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 16px;
    margin: 5px 0 0 0;
}

.room-box {
    border: 1px solid #e7e7e7;
    background: #f7f8fa;
    padding: 10px;
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
}

.room-box:hover {
    background: #f0f0f0
}

.room-box h5 {
    margin: 0 0 5px 0;
    font-weight: 300;
    font-size: 16px;
}

.room-box h5 a {
    color: #d71149;
}

.chat-tools {
    float: right;
    padding: 3px;
    width: 40px;
    height: 35px;
    line-height: 30px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    text-align: center;
    margin-top: 6px;
    margin-left: 10px;
}

.chat-tools i {
    font-size: 16px !important;
    float: none !important;
    margin-right: 0 !important;
    color: #fff;
}

.invite-row {
    background: #ecf0f1;
    padding: 6px 10px;
    display: inline-block;
    width: 100%;
}

.invite-row h4 {
    font-size: 16px;
    font-weight: 300;
}

ul.chat-available-user {
    padding: 10px;
}

ul.chat-available-user li {
    margin-bottom: 15px;
}

ul.chat-available-user li a {
    color: #6a6a6a;
}

ul.chat-available-user li a:hover {
    color: #d71149;
}


.group-rom {
    width: 100%;
    float: left;
    border-bottom: 1px solid #eaebee;
}

.group-rom .first-part,
.group-rom .second-part,
.group-rom .third-part {
    float: left;
    padding: 15px;
}

.group-rom .first-part {
    width: 25%;
}

.group-rom .first-part.odd {
    background: #f7f8fa;
    color: #6a6a6a;
    font-weight: 600;
}

.group-rom .second-part {
    width: 60%;
}

.group-rom .third-part {
    width: 15%;
    color: #d4d3d3;
}

.last-group {
    margin-bottom: 70px;
}

.chat-txt {
    float: left;
    width: 75%;
    margin-right: 5px;
}

.lobby {
    padding: 0 !important;
}


/* GOOGLE MAPS - SCRIPT HELPER*/
#gmap-list,
#gmap-tabs {
    height: 450px;
}

.gmaps {
    height: 300px;
    width: 100%;
}

.ullist {
    border-bottom: #ccc 1px solid;
    margin-left: 20px;
}

.ullist li {
    display: inline-block;
    margin-left: 5px;
}

.ullist li a {
    display: inline-block;
    padding: 10px 20px !important;
    border-top: #ccc 1px solid;
    border-left: #ccc 1px solid;
    border-right: #ccc 1px solid;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    background: #f1f1f1;
}

.ullist li.active a {
    background: #fff;
    border-bottom: #fff 1px solid;
    position: relative;
    top: 1px;
    margin-bottom: -1px;
}


.btn-facebook {
    color: #fff;
    background-color: #5193ea;
    border-color: #2775e2;
}

.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active,
.btn-facebook.active,
.open .dropdown-toggle.btn-facebook {
    color: #fff;
    background-color: #2775e2;
    border-color: #2775e2;
}

.btn-twitter {
    color: #fff;
    background-color: #44ccfe;
    border-color: #2bb4e8;
}

.btn-twitter:hover,
.btn-twitter:focus,
.btn-twitter:active,
.btn-twitter.active,
.open .dropdown-toggle.btn-twitter {
    color: #fff;
    background-color: #2bb4e8;
    border-color: #2bb4e8;
}


/*badge*/
.badge.bg-primary {
    background: #8075c4;
}

.badge.bg-success {
    background: #a9d86e;
}

.badge.bg-warning {
    background: #FCB322;
}

.badge.bg-important {
    background: #ff6c60;
}

.badge.bg-info {
    background: #41cac0;
}

.badge.bg-inverse {
    background: #2A3542;
}


/*easy pie chart*/
.easy-pie-chart {
    display: inline-block;
    padding: 30px 0;
}

.chart-info,
.chart-info .increase,
.chart-info .decrease {
    display: inline-block;
}

.chart-info {
    width: 100%;
    margin-bottom: 5px;
}

.chart-position {
    margin-top: 70px;
}

.chart-info span {
    margin: 0 3px;
}

.chart-info .increase {
    background: #ff6c60;
    width: 10px;
    height: 10px;
}

.chart-info .decrease {
    background: #f2f2f2;
    width: 10px;
    height: 10px;
}

.panel-footer.revenue-foot {
    background-color: #e6e7ec;
    -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    border: none;
    padding: 0;
    width: 100%;
    display: inline-block;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

    /* Safari and Chrome */
    .panel-footer.revenue-foot {
        margin-bottom: -4px;
    }
}


.panel-footer.revenue-foot ul {
    margin: 0;
    padding: 0;
    width: 100%;
    display: inline-flex;
}

.panel-footer.revenue-foot ul li {
    float: left;
    width: 33.33%;
}

.panel-footer.revenue-foot ul li.first a:hover,
.panel-footer.revenue-foot ul li.first a {
    -webkit-border-radius: 0px 0px 0px 4px;
    border-radius: 0px 0px 0px 4px;
}

.panel-footer.revenue-foot ul li.last a:hover,
.panel-footer.revenue-foot ul li.last a {
    -webkit-border-radius: 0px 0px 4px 0px;
    border-radius: 0px 0px 4px 0px;
    border-right: none;

}

.panel-footer.revenue-foot ul li a {
    display: inline-block;
    width: 100%;
    padding: 14px 15px;
    text-align: center;
    border-right: 1px solid #d5d8df;
    color: #797979;
}

.panel-footer.revenue-foot ul li a:hover,
.panel-footer.revenue-foot ul li.active a {
    background: #fff;
    position: relative;
}

.panel-footer.revenue-foot ul li a i {
    color: #c6cad5;
    display: block;
    font-size: 16px;
}

.panel-footer.revenue-foot ul li a:hover i,
.panel-footer.revenue-foot ul li.active a i {
    color: #ff6c60;
    display: block;
    font-size: 16px;
}


/*fontawesome*/
.fontawesome-icon-list h2 {
    margin-top: 0;
    font-size: 20px;
    font-weight: 300;
}

.fontawesome-icon-list .col-sm-4,
.fontawesome-icon-list .col-md-3,
.fontawesome-icon-list .col-xs-6 {
    margin-bottom: 10px;
}

.fontawesome-icon-list .page-header {
    border-bottom: 1px solid #C9CDD7;
}

.fontawesome-icon-list a {
    color: #797979;
}

.fontawesome-icon-list a:hover {
    color: #35404D;
}

.fontawesome-icon-list i {
    font-size: 16px;
    padding-right: 10px;
}

#web-application,
#text-editor,
#directional,
#video-player,
#brand,
#medical,
#currency {
    margin-top: 10px;
}

/*flot chart*/
.flot-chart .chart,
.flot-chart .pie,
.flot-chart .bars {
    height: 300px;
}


/*xchart*/
.demo-xchart {
    height: 400px;
    width: 100%;
}


/*todolist*/
#sortable {
    list-style-type: none;
    margin: 0 0 20px 0;
    padding: 0;
    width: 100%;
}

#sortable li {
    padding-left: 3em;
    font-size: 12px;
}

#sortable li i {
    position: absolute;
    left: 6px;
    padding: 4px 10px 0 10px;
    cursor: pointer;
}

#sortable li input[type=checkbox] {
    margin-top: 0;
}

.ui-sortable>li {
    padding: 15px 0 15px 35px !important;
    position: relative;
    background: #f5f6f8;
    margin-bottom: 2px;
    border-bottom: none !important;
}

.ui-sortable li.list-primary {
    border-left: 3px solid #41CAC0;
}

.ui-sortable li.list-success {
    border-left: 3px solid #78CD51;
}

.ui-sortable li.list-danger {
    border-left: 3px solid #FF6C60;
}

.ui-sortable li.list-warning {
    border-left: 3px solid #F1C500;
}

.ui-sortable li.list-info {
    border-left: 3px solid #58C9F3;
}

.ui-sortable li.list-inverse {
    border-left: 3px solid #BEC3C7;
}

/*footer*/
.site-footer {
    background: linear-gradient(90deg, #d6d8dc 0%, #bfc2c8 20%, #d4d6db 40%, #b0b4bb 60%, #c8cbd0 80%, #dcdee2 100%);
    color: #555;
    padding: 10px 0;
}


.go-top {
    margin-right: 1%;
    float: right;
    background: rgba(255, 255, 255, .5);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
}

.go-top i {
    color: #2A3542;
}

.site-min-height {
    min-height: 900px;
}

.holds-the-iframe {
    background: url(../assets/img/loading.gif) center center no-repeat;
}

.form-mdown {
    margin-bottom: 50px;
}

.dataTable .btn-sm .toggle-on {
    margin: 0 2px;
}

.fadein {
    -webkit-animation: fadein 2s;
    /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s;
    /* Firefox < 16 */
    -ms-animation: fadein 2s;
    /* Internet Explorer */
    -o-animation: fadein 2s;
    /* Opera < 12.1 */
    animation: fadein 2s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.toolbar-form {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9;
}

.my-has-error,
.my-has-error.bootstrap-select .dropdown-toggle,
img.my-has-error {
    border: 1px solid red !important;
    -webkit-box-shadow: 0 0 0px red, 0 0 5px #ff6b6b;
    box-shadow: 0 0 0px red, 0 0 3px #ff6b6b;
}

.my-has-error:focus {
    border-color: #A43534 !important;
    -webkit-box-shadow: 0 0 0px red, 0 0 5px #ff6b6b;
    box-shadow: 0 0 0px red, 0 0 1px #ff6b6b;
}

.nav-tabs .my-has-error,
.nav-tabs .my-has-error:focus,
.nav-tabs>li>a.my-has-error,
.nav-tabs>li.active>a.my-has-error,
.nav-tabs>li.active>a.my-has-error:hover,
.nav-tabs>li.active>a.my-has-error:focus {
    border-color: red red transparent red !important;
    box-shadow: 0 -2px 6px rgba(255, 0, 0, 0.25) !important;
    -webkit-box-shadow: 0 -2px 6px rgba(255, 0, 0, 0.25) !important;
}

input[type=radio].my-has-error {
    outline: 1px solid red;
}

.rainbow {
    color: white !important;
}

@-webkit-keyframes colours {
    0% {
        color: white
    }

    20% {
        color: lightpink
    }

    40% {
        color: lightblue
    }

    60% {
        color: orange
    }

    80% {
        color: lightgreen
    }

    100% {
        color: white
    }
}

@keyframes colours {
    0% {
        color: white
    }

    20% {
        color: lightpink
    }

    40% {
        color: lightblue
    }

    60% {
        color: orange
    }

    80% {
        color: lightgreen
    }

    100% {
        color: white
    }
}

@-moz-keyframes colours {
    0% {
        color: white
    }

    20% {
        color: lightpink
    }

    40% {
        color: lightblue
    }

    60% {
        color: orange
    }

    80% {
        color: lightgreen
    }

    100% {
        color: white
    }
}

.rainbow {
    -webkit-animation: colours 10s linear 3;
    -moz-animation: colours 10s linear 3;
    animation: colours 10s linear 3;
}

.imgframe {
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.form-buttons {
    text-align: right;
    margin: 7px;
}

.form-buttons input {
    margin: 0 2px;
}

/*fix for -xs- label*/
.form-horizontal .control-label[class*='col-xs-'] {
    padding-top: 7px;
}

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

.tab-content>.tab-pane {
    background: white;
}

.btn.btn-gray {
    border: 1px solid #626e7f;
    -webkit-box-shadow: inset 0 1px 2px #9aa4b1;
    -moz-box-shadow: inset 0 1px 2px #9aa4b1;
    box-shadow: inset 0 1px 2px #9aa4b1;
    background: #758294;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOTdhNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc1ODI5NCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c97a6), color-stop(100%, #758294));
    background-image: -webkit-linear-gradient(top, #8c97a6, #758294);
    background-image: -moz-linear-gradient(top, #8c97a6, #758294);
    background-image: -o-linear-gradient(top, #8c97a6, #758294);
    background-image: linear-gradient(top, #8c97a6, #758294);
}


.btn.btn-gray:hover {
    background: #728092;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOTdhNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzcyODA5MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c97a6), color-stop(100%, #728092));
    background-image: -webkit-linear-gradient(top, #8c97a6, #728092);
    background-image: -moz-linear-gradient(top, #8c97a6, #728092);
    background-image: -o-linear-gradient(top, #8c97a6, #728092);
    background-image: linear-gradient(top, #8c97a6, #728092);
    -webkit-transition: box-shadow 0.05s ease-in-out;
    -moz-transition: box-shadow 0.05s ease-in-out;
    -o-transition: box-shadow 0.05s ease-in-out;
    transition: box-shadow 0.05s ease-in-out;
}


.btn.btn-gray:active {
    background: #818d9d;
    border-color: #5d6979;
    -webkit-box-shadow: 0 0 5px #818d9d inset;
    -moz-box-shadow: 0 0 5px #818d9d inset;
    box-shadow: 0 0 5px #818d9d inset;
}

/*override bootstrap*/
.form-group {
    margin-bottom: 11px;
}

.form-control,
.form-control.bootstrap-select .btn {
    height: 32px;
    padding: 6px 8px;
    font-size: 13px;
}

.form-control:focus {
    border-color: #5e7ca3;
}

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

.add-on .btn {
    height: 32px;
}

.add-on {
    margin-top: -35px;
}

table.dataTable tbody tr:nth-child(odd) {
    background-color: #f1f1f1;
}

table.dataTable tbody tr:nth-child(even) {
    background-color: #ffffff;
}

table.dataTable tbody tr.selected {
    background-color: #c4d6e6 !important;
}

table.dataTable tbody tr.selected>.sorting_1,
table.dataTable tbody tr.selected>.sorting_2,
table.dataTable tbody tr.selected>.sorting_3 {
    background-color: #bdd1e0 !important;
}

table.dataTable tbody tr.selected:hover {
    background-color: #bbcfdf !important;
}

table.dataTable tbody tr.selected:hover>.sorting_1,
table.dataTable tbody tr.selected:hover>.sorting_2,
table.dataTable tbody tr.selected:hover>.sorting_3 {
    background-color: #b4c9da !important;
}

table.dataTable tbody th,
table.dataTable tbody td {
    padding: 1px 6px;
}

div.dtDetail {
    display: none;
}

.dataTable tbody tr {
    height: 38px;
}

.dataTable tbody tr.no-padding {
    height: auto;
}

.holds-the-iframe {
    background: url(../img/iframe_loading.gif) center center no-repeat;
}

.hilite {
    /* for searching*/
    background-color: #feee8c;
}

.tab-pane {
    padding: 0 1% 15px 1%;
}

.slim-padding {
    padding: 5px;
}

.thick-padding {
    padding: 20px;
}

.normal-padding {
    padding: 10px;
}

.small-note {
    color: blue;
    font-style: italic;
    font-size: 12px;
}

legend {
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .btn {
        margin-bottom: 7px;
    }

    .toggle-group>.btn {
        margin-bottom: 0px;
    }

}

@media (min-width: 768px) {
    .form-group>div>.toggle.btn {
        margin-top: 3px;
        margin-bottom: 0px;
    }
}

/* computer view */
@media (min-width: 768px) {
    .form-horizontal .control-label {
        text-align: left;
    }
}

/* mobile view (not iframe)*/
@media (max-width: 767px) {
    body:not(.body-frame) .form-panel {
        padding: 5px;
        margin: 5px;
    }

    body:not(.body-frame) .panel-body {
        padding: 5px;
    }

    body:not(.body-frame) .wrapper {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
    }

    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs>li {
        float: none;
        flex-shrink: 0;
    }

    .nav-tabs>li>a {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 13px;
    }
}

input[type="radio"],
input[type="checkbox"] {
    margin: 2px 0 0;
}

.row-per-page {
    margin: 8px;
    float: left;
}

.logo img {
    width: 77px;
    position: absolute;
    left: 67px;
    top: 0px;
}

.btn.dropdown-toggle {
    padding-top: 5px;
    padding-bottom: 5px;
}

.note-editable p {
    margin: 0;
}

.modal-body {
    padding: 15px 35px;
}

tr.no-select {
    color: #b6b6b6;
}

tr.no-select img {
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: 0.6;
}

.datepicker.dropdown-menu {
    z-index: 1003 !important;
    /* higher than the header */
}

.target-link {
    color: inherit;
    text-decoration: none;
}

.target-link:hover {
    color: #337ab7;
}

.toggle-group {
    transition: left 0.2s !important;
    -webkit-transition: left 0.2s !important;
}

.body-frame {
    margin: 0;
}

.body-frame #container {
    padding: 5px 2%;
}

.body-frame #container > .main-content,
.body-frame #container > section.wrapper {
    padding-bottom: 0;
    margin-bottom: 0;
}

.body-frame .dataTables_wrapper {
    margin-bottom: 0;
}

.form-panel.form-panel-index {
    margin: 5px 0px;
    padding: 10px 14px 6px;
}

.form-panel.form-panel-index button,
.form-panel.form-panel-index .btn {
    margin: 0;
}

.dt-center.dt-nowrap>a {
    margin-right: 3px;
}

.sidebar-menu .fa-fw {
    --fa-width: 1.55em;
}

#my-modal {
    max-width: 96%;
    margin-left: auto;
    margin-right: auto
}

h3.module-title {
    font-size: 23px;
    margin-top: 15px;
    margin-bottom: 8px;
}

.btn-sm.btn-href-fcy,
.btn-sm.btn-href-tint,
.btn-sm.btn-href-tint-fcy,
.btn-sm.btn-href-tint-del {
    padding: 5px 7px;
}

@media (max-width: 600px) {
    #my-modal.modal-dialog {
        margin-top: 16px;
        margin-bottom: 16px;
    }
}

/* Center match modal vertically on mobile */
@media (max-width: 768px) {
    #myDynamicModal.modal.in {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    #myDynamicModal.modal.in .modal-dialog {
        margin: 0 auto;
    }

    #myDynamicModal .modal-body {
        position: relative;
    }

    #myDynamicModal .nav-tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-right: 96px;
    }

    #myDynamicModal .nav-tabs>li {
        float: none;
        margin: 0;
        flex: 1 0 33.333%;
        text-align: center;
    }

    #myDynamicModal .nav-tabs>li>a {
        padding: 6px 8px;
        font-size: 12px;
        line-height: 1.1;
    }

    #myDynamicModal .new-line-in-mobile {
        display: none;
    }

    #myDynamicModal button[data-target="#jsshare"],
    #myDynamicModal .btn-subs {
        position: absolute;
        right: 8px;
        float: none !important;
        margin: 0 !important;
        z-index: 3;
    }

    #myDynamicModal button[data-target="#jsshare"] {
        top: 6px;
    }

    #myDynamicModal .btn-subs {
        top: 36px;
    }
}

/* Verified icon in admin data tables */
.verif-icon {
    width: 12px;
    height: 12px;
    vertical-align: super;
    object-fit: contain;
    border: none;
}

/* ── Toolbar row: flex layout for buttons + filter + search ── */
.toolbar-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.toolbar-section.toolbar-buttons {
    flex: 1 1 0;
    min-width: 200px;
}

.toolbar-section.toolbar-filters {
    flex: 0 1 auto;
}

.toolbar-section.toolbar-search {
    flex: 0 0 auto;
    margin-left: auto;
}

.toolbar-section.toolbar-search input {
    width: 200px;
    height: 34px;
}

@media (max-width: 767px) {
    .toolbar-section.toolbar-buttons {
        flex-basis: 100%;
    }

    .toolbar-section.toolbar-filters {
        flex-basis: 100%;
    }

    .toolbar-section.toolbar-search {
        flex-basis: 100%;
        margin-left: 0;
    }

    .toolbar-section.toolbar-search input {
        width: 100%;
    }

    .mf-container {
        flex-direction: row;
    }

    .mf-panel {
        right: auto;
        left: 0;
    }
}

/* ── Scrollable toolbar for action buttons ────────── */
.toolbar-scroll-wrapper {
    position: relative;
}

.toolbar-scroll {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: none;
    /* Firefox: hide scrollbar */
    -webkit-overflow-scrolling: touch;
}

.toolbar-scroll::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari: hide scrollbar */
}

.toolbar-scroll .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.toolbar-scroll-nav {
    position: absolute;
    top: 0;
    bottom: 4px;
    display: none;
    align-items: center;
    cursor: pointer;
    z-index: 2;
}

.toolbar-scroll-nav.nav-right {
    right: 0;
    padding: 0 2px 0 12px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 40%);
}

.toolbar-scroll-nav.nav-left {
    left: 0;
    padding: 0 12px 0 2px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 40%);
}

.toolbar-scroll-nav .btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    font-size: 11px;
    line-height: 26px;
    text-align: center;
    background: #e0e0e0;
    border: none;
    color: #555;
    transition: all 0.15s;
}

.toolbar-scroll-nav .btn:hover {
    background: #d71149;
    color: #fff;
}

.toolbar-scroll-wrapper.can-scroll-right .toolbar-scroll-nav.nav-right,
.toolbar-scroll-wrapper.can-scroll-left .toolbar-scroll-nav.nav-left {
    display: flex;
}

/* ── Multi-filter dropdown ────────────────────────── */
.mf-container {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.mf-trigger {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 15px;
    border: 1px solid #bbb;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.mf-trigger:hover {
    border-color: #888;
    color: #333;
}

.mf-trigger.active {
    border-color: #1976d2;
    color: #1976d2;
    background: #e3f2fd;
}

.mf-badge {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    background: #1976d2;
    color: #fff;
    padding: 0 4px;
}

.mf-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 6px 0 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 12px;
    background: #e3f2fd;
    border: 1px solid #90caf9;
    color: #1565c0;
    white-space: nowrap;
}

.mf-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 700;
    color: #90caf9;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    transition: all 0.15s;
}

.mf-chip-x:hover {
    color: #fff;
    background: #e53935;
}

/* Panel */
.mf-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 200px;
    max-width: min(280px, calc(100vw - 30px));
    max-height: 340px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    z-index: 20;
}

.mf-group {
    padding: 8px 12px 6px;
    border-bottom: 1px solid #f0f0f0;
}

.mf-group:last-of-type {
    border-bottom: none;
}

.mf-group-title {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.mf-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px;
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
}

.mf-group label:hover {
    background: #f5f5f5;
}

.mf-group label input[type="checkbox"] {
    margin: 0;
}

.mf-group[data-binary] label input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 13px;
    min-width: 13px;
    height: 13px;
    min-height: 13px;
    border: 1.5px solid #767676;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

.mf-group[data-binary] label input[type="checkbox"]:checked {
    border-color: #2563eb;
    background: #fff;
}

.mf-group[data-binary] label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2563eb;
}

.mf-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.mf-panel-header span {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mf-panel-header .mf-panel-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}

.mf-panel-header .mf-panel-close:hover {
    color: #333;
}

.mf-panel-footer {
    padding: 6px 12px;
    border-top: 1px solid #eee;
    text-align: center;
}

.mf-panel-footer a {
    font-size: 11.5px;
    color: #999;
    text-decoration: none;
}

.mf-panel-footer a:hover {
    color: #e53935;
}

/* Legacy chip-select (used in staff/person views) */
.filter-chip-select {
    display: inline-block;
    height: 30px;
    padding: 2px 24px 2px 10px;
    font-size: 12px;
    border-radius: 15px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    margin-top: 5px;
    appearance: auto;
    transition: all 0.2s;
}

.filter-chip-select:focus {
    outline: none;
    border-color: #999;
}

.filter-chip-select.active {
    background: #e8f5e9;
    border-color: #4caf50;
    color: #2e7d32;
    font-weight: 600;
}

/* ── Basketball scoreboard: +1/+2/+3 point buttons ── */
.sb-basket-pts {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--vmin, 1vmin) * 5.5);
    height: calc(var(--vmin, 1vmin) * 4);
    padding: 0 calc(var(--vmin, 1vmin) * 0.8);
    border-radius: calc(var(--vmin, 1vmin) * 0.6);
    font-size: calc(var(--vmin, 1vmin) * 2.4);
    font-weight: 700;
    background: rgba(30, 50, 50, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--sb-text, #fff);
    cursor: pointer;
    transition: background 0.15s;
}

.sb-basket-pts:hover {
    background: rgba(50, 80, 80, 0.9);
}

.sb-basket-pts-neg {
    opacity: 0.5;
    font-size: calc(var(--vmin, 1vmin) * 2);
    min-width: calc(var(--vmin, 1vmin) * 4.5);
}

.sb-basket-pts-row {
    position: absolute;
    display: flex;
    justify-content: center;
    gap: calc(var(--vmin, 1vmin) * 0.6);
    bottom: calc(var(--vh, 1vh) * 3 - var(--vmin, 1vmin) * 2.5);
    z-index: 5;
}
.sb-basket-pts-row[data-side="home"] {
    left: calc(var(--vw, 1vw) * 9);
}
.sb-basket-pts-row[data-side="visitor"] {
    right: calc(var(--vw, 1vw) * 9);
}
.sb-swapped .sb-basket-pts-row[data-side="home"] {
    left: auto;
    right: calc(var(--vw, 1vw) * 9);
}
.sb-swapped .sb-basket-pts-row[data-side="visitor"] {
    right: auto;
    left: calc(var(--vw, 1vw) * 9);
}

/* ─── Basketball Stats Table ─── */
.bball-stats-table {
    font-size: 11px;
    white-space: nowrap;
    border-collapse: separate;
    border-spacing: 0;
}

.bball-stats-table thead th {
    background: #3a3f51;
    color: #fff;
    text-align: center;
    padding: 5px 3px;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-color: #4a4f61;
    position: sticky;
    top: 0;
    z-index: 1;
}

.bball-stats-table td,
.bball-stats-table th {
    vertical-align: middle !important;
}

.bball-stats-table tbody td {
    text-align: center;
    padding: 2px 1px;
}

.bball-stats-table tbody tr:nth-child(even) {
    background: #f9f9fb;
}

.bball-stats-table tbody tr:hover {
    background: #eef2ff;
}

/* Player name column — left-aligned, truncated */
.bball-stats-table tbody td:nth-child(2) {
    text-align: left;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bball-stat-input {
    /* width: 32px; */
    padding: 2px 0px;
    text-align: center;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
    transition: border-color 0.15s;
}


.bball-stat-input:focus {
    border-color: #5b9bd5;
    box-shadow: 0 0 0 2px rgba(91, 155, 213, 0.15);
    outline: none;
}

.form-control.bball-stat-input {
    height: 30px;
}

.table-bordered.bball-stats-table>tbody>tr>td {
    padding: 4px 3px;
}

.bball-derived {
    color: #888;
    font-size: 11px;
}

.bball-derived-col {
    background: #f0f4ff !important;
}

.bball-stats-table thead th.bball-derived-col {
    background: #2e3a5c !important;
    color: #a8c4ff;
}

/* Primary columns: minimum-required stats (PTS, fouls, cards).
   A subtle tint signals "fill at least these". */
.bball-stats-table .bball-primary-col {
    background: #fff8e1 !important;
}

.bball-stats-table thead th.bball-primary-col {
    background: #5a4a1c !important;
    color: #ffeaa0;
}

/* Thick right border on the last primary column = visual separator
   between the primary group and the detailed-stats group. */
.bball-stats-table .bball-primary-sep {
    border-right: 3px solid #ffb300 !important;
}

.bball-derived-label {
    color: #4a6fa5;
    font-weight: 600;
}

.bball-stats-table tfoot td {
    text-align: center;
    padding: 4px 3px;
    font-size: 11px;
}

.bball-stats-table .bball-row-total {
    background: #eef0f5;
    font-weight: 700;
    border-top: 2px solid #ccc;
}

.bball-stats-table .bball-row-avg {
    background: #f5f6fa;
    font-style: italic;
    color: #666;
}

.bball-legend {
    margin-bottom: 16px;
    padding: 10px 14px;
    background: #f8f9fc;
    border: 1px solid #e2e5ec;
    border-radius: 4px;
    font-size: 11px;
    color: #666;
    line-height: 1.7;
}

/* Inline radio group (dg_radio rdStyle=normal). Flex+gap gives uniform
   spacing on every line, so wrapped lines no longer inherit the leading
   offset Bootstrap's `.radio-inline + .radio-inline { margin-left: 10px }`
   leaks across line boundaries. */
.radio-inline-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0px 16px;
    align-items: center;
}
.radio-inline-group .radio-inline {
    margin-left: 0;
}

/* ── Clickable stat counters (deep-link hash navigation across public pages) ── */
html { scroll-behavior: smooth; }

/* Anchor targets clear the sticky navbar (~100px desktop, less on mobile) */
#ev-grid, #tm-grid, #t,
#wl-province-grid, #wl-events, #wl-teams, #wl-regencies {
    scroll-margin-top: 80px;
}

/* Stat-box anchor variants: keep the look identical to the unlinked div,
   add cursor + subtle hover lift to signal interactivity. Visited state stays
   inherited so navigated-to counters don't change color. */
.home-stat-box--link,
.pl-hero__stat--link,
.wl-hero__stat--link {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.home-stat-box--link:hover,
.pl-hero__stat--link:hover,
.wl-hero__stat--link:hover,
.home-stat-box--link:focus,
.pl-hero__stat--link:focus,
.wl-hero__stat--link:focus {
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
    outline: none;
}
.home-stat-box--link:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.10); }
.pl-hero__stat--link:hover { background: rgba(255,255,255,0.14); }
.wl-hero__stat--link:hover { background: rgba(255,255,255,0.10); border-radius: 8px; }