.admin-dashboard, .member-dashboard {

}

.admin-dashboard pre, .member-dashboard pre {
    white-space: pre-wrap;
}

.admin-dashboard .well, .member-dashboard .well {
    word-wrap: break-word;
}

.admin-dashboard .table, .member-dashboard .table {
    /*table-layout: fixed;*/
}

.admin-dashboard .table > tbody > tr > td, .member-dashboard .table > tbody > tr > td,
.admin-dashboard .table > tbody > tr > th, .member-dashboard .table > tbody > tr > th,
.admin-dashboard .table > tfoot > tr > td, .member-dashboard .table > tfoot > tr > td,
.admin-dashboard .table > tfoot > tr > th, .member-dashboard .table > tfoot > tr > th,
.admin-dashboard .table > thead > tr > td, .member-dashboard .table > thead > tr > td,
.admin-dashboard .table > thead > tr > th, .member-dashboard .table > thead > tr > th {
    white-space: normal !important;
    word-wrap: break-word;
}

/* Frame page */
body.frame {
    overflow: hidden;
    padding-top: 0;
}

body.frame .banner {
    margin: 0px;
}

img {
    max-width: 100%;
}

.installation .login-box {
    width: 550px;
}

.shorten-member {
    margin-bottom: 0px;
    box-shadow: none;
}

@media (min-width: 768px) {
    .sidebar-mini.sidebar-collapse .shorten-button {
        padding-left: 32px;
        height: 45px;
    }

    .sidebar-mini.sidebar-collapse .shorten-button span {
        display: none;
    }
}

@media (max-width: 767px) {
    .skin-blue .main-header .navbar .dropdown-menu li a {
        color: #777777;
    }
}

@media (min-width: 768px) {
    .navbar-nav > li > a {
        font-size: 12px;
    }
}

@media only screen and (min-width: 768px) {
    .is-table-row {
        display: table;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .is-table-row [class*="col-"] {
        float: none;
        display: table-cell;
        vertical-align: middle;
    }
}

@media only screen and (max-width: 768px) {
    body.frame .counter {
        padding-top: 8px;
    }
}

/** Inner pages **/
@media (min-width: 768px) {
    .inner-page header .intro-text {
        padding-top: 115px;
        padding-bottom: 100px;
    }

    header .intro-text .intro-lead-in {
        margin-bottom: 0;
    }
}

.inner-page section {
    padding: 20px 0;
}

/** Logo **/
.navbar-brand.logo-image {
    padding: 0 15px;
}

.navbar-brand.logo-image img {
    height: 100%;
}

/*
 * App Loader
 */
.loader:before,
.loader:after,
.loader {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}

.loader {
    font-size: 10px;
    /*margin: 80px auto;*/
    margin: 0px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.loader:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.loader:after {
    left: 3.5em;
}

.loader:before,
.loader:after {
    content: '';
    position: absolute;
    top: 0;
}

@-webkit-keyframes load7 {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em #ffffff;
    }
    40% {
        box-shadow: 0 2.5em 0 0 #ffffff;
    }
}

@keyframes load7 {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em #ffffff;
    }
    40% {
        box-shadow: 0 2.5em 0 0 #ffffff;
    }
}

.shorten #shorten input {
    border: none;
}

.shorten #shorten .input-group-addon {
    background-color: #fff;
    border: none;
    padding: 0;
}

.shorten #shorten button {
    background-color: #fff;
    border: none;
}

.shorten .fasubmit {
    padding: 14px 8px;
}

.shorten #shorten {
    opacity: 0.9;
}

.advertising-rates table th[rowspan='2'],
.advertising-rates table th[colspan='3'],
.payout-rates table th[rowspan='2'],
.payout-rates table th[colspan='2'] {
    vertical-align: middle;
    text-align: center;
}

.display-counter {
    font-size: 70px;
    display: block;
    color: #0070BA;
}

/** Banner Ads **/

.countdown {
    border: 2px solid #888;
    border-radius: 50%;
    color: #888;
    display: block;
    font-size: 16px;
    font-weight: 300;
    height: 100px;
    line-height: 18px;
    margin: 25px auto;
    padding: 29px 0 0;
    width: 100px;
}

.countdown .timer {
    font-size: 25px;
}

.banner {
    text-align: center;
    margin-bottom: 10px;
}

.banner .banner-inner {
    margin: 0 auto;
}

.banner-captcha .banner-inner {
    max-width: 728px;
}

.banner-member .banner-inner {
    max-width: 728px;
}

.banner-728x90 .banner-inner {
    max-width: 728px;
}

.banner-468x60 .banner-inner {
    max-width: 468px;
}

.banner-336x280 .banner-inner {
    max-width: 336px;
}

#cookie-pop {
    position: sticky;
    bottom: 0;
    z-index: 10000;
    width: 100%;
    background-color: #003087;
}

.cookie-message {
    color: #ffffff;
}

.cookie-message a {
    color: #ffffff;
}

.cookie-confirm {
    text-align: right;
}

@media (min-width: 768px) {
    .cookie-message {
        padding: 20px 0;
    }

    .cookie-confirm {
        padding-top: 15px;
    }
}

@media (max-width: 767px) {
    #cookie-pop {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

.btn-google, .btn-google:hover, .btn-google:focus, .btn-google:active {
    background-color: #4285f4;
}

.btn-social.btn-google > :first-child {
    background-color: #fff;
    color: #4285f4;
}

/* =====================================================
 * PayPal Modern Theme — Admin/Member
 * Primary: #0070BA | Dark: #003087 | Hover: #005EA6
 * Yellow CTA: #FFC439 | Light BG: #F5F7FA
 * ===================================================== */

/* ---- VARIABLES GLOBALES ---- */
.admin-dashboard,
.member-dashboard {
    background-color: #FFFFFF;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---- HEADER ---- */
.skin-blue .main-header .logo,
.skin-blue .main-header .logo:hover {
    background-color: #0D2B6B;
    color: #ffffff;
    border-bottom: 0 solid transparent;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.skin-blue .main-header .navbar {
    background-color: #3BA8E0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.skin-blue .main-header .navbar .nav > li > a {
    color: rgba(255, 255, 255, 0.95);
    transition: background-color 0.2s ease;
}

.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:active,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus {
    background-color: #2A95CE;
}

.skin-blue .main-header .navbar .sidebar-toggle {
    color: rgba(255, 255, 255, 0.95);
    transition: background-color 0.2s ease;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: #2A95CE;
}

.skin-blue .main-header li.user-header {
    background-color: #3BA8E0;
}

/* ---- SIDEBAR — Estilo blanco minimalista ---- */
.skin-blue .main-sidebar,
.skin-blue .left-side {
    background-color: #ffffff;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
    border-right: 1px solid #E8ECF0;
}

/* Logo area */
.skin-blue .main-header .logo,
.skin-blue .main-header .logo:hover {
    background-color: #0070BA !important;
    color: #ffffff !important;
}

/* Headers de sección (GENERAL, CUENTA, etc.) */
.skin-blue .sidebar-menu > li.header {
    background: transparent;
    color: #9BA5B4;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 18px 20px 6px;
    text-transform: uppercase;
}

.skin-blue .sidebar a {
    color: #2C3345 !important;
    transition: all 0.18s ease;
}

.skin-blue .sidebar a:hover {
    color: #0070BA !important;
}

/* Items del sidebar — sin recuadros, texto negro negrita */
.skin-blue .sidebar-menu > li {
    padding: 1px 8px;
}

.skin-blue .sidebar-menu > li > a {
    border-left: none !important;
    border: none !important;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    background: transparent !important;
    box-shadow: none !important;
    color: #000000 !important;
    transition: all 0.18s ease;
}

.skin-blue .sidebar-menu > li > a > .fa,
.skin-blue .sidebar-menu > li > a > .ion {
    width: 20px;
    text-align: center;
    margin-right: 10px;
    font-size: 14px;
    color: #000000 !important;
    transition: color 0.18s ease;
}

.skin-blue .sidebar-menu > li > a > .pull-right-container {
    margin-left: auto;
    color: #9BA5B4;
}

.skin-blue .sidebar-menu > li > a:hover {
    color: #0070BA !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    transform: translateX(4px);
    font-weight: 800;
}

.skin-blue .sidebar-menu > li > a:hover > .fa,
.skin-blue .sidebar-menu > li > a:hover > .ion {
    color: #0070BA !important;
}

.skin-blue .sidebar-menu > li.menu-open > a {
    color: #0070BA !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.skin-blue .sidebar-menu > li.active > a {
    color: #0070BA !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    font-weight: 800;
    border-left: 3px solid #0070BA !important;
}

.skin-blue .sidebar-menu > li.active > a > .fa,
.skin-blue .sidebar-menu > li.active > a > .ion {
    color: #0070BA !important;
}

/* Submenú (treeview) */
.skin-blue .sidebar-menu > li > .treeview-menu {
    background: transparent;
    padding: 2px 0 4px 0;
    margin: 0 4px;
}

.skin-blue .sidebar-menu .treeview-menu > li {
    padding: 1px 0;
}

.skin-blue .sidebar-menu .treeview-menu > li > a {
    padding: 7px 12px 7px 16px;
    font-size: 13px;
    font-weight: 400;
    color: #4A5568;
    border-radius: 6px;
    display: block;
    transition: all 0.18s ease;
    background: transparent;
    border: 1px solid transparent;
}

.skin-blue .sidebar-menu .treeview-menu > li > a::before {
    content: '›';
    margin-right: 8px;
    color: #9BA5B4;
    font-size: 18px;
    line-height: 0;
    vertical-align: middle;
}

.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
    color: #0070BA;
    background: #EBF4FF;
    border-color: #CCE0F5;
    transform: translateX(3px);
}

.skin-blue .sidebar-menu .treeview-menu > li.active > a,
.skin-blue .sidebar-menu > li > .treeview-menu > li.active > a {
    color: #0070BA;
    font-weight: 600;
    background: #EBF4FF;
    border-color: #CCE0F5;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* User panel en sidebar */
.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a {
    color: #2C3345;
}

.skin-blue .user-panel > .info {
    color: #4A5568;
}

/* Scrollbar del sidebar */
.main-sidebar::-webkit-scrollbar { width: 4px; }
.main-sidebar::-webkit-scrollbar-track { background: #f0f0f0; }
.main-sidebar::-webkit-scrollbar-thumb { background: #CBD2D6; border-radius: 4px; }

/* ---- BOTONES — ESTILOS MODERNOS ---- */

/* Reset base */
.btn {
    border-radius: 5px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    padding: 7px 16px;
    transition: all 0.2s ease;
    border-width: 1px;
}

/* Primary — Azul PayPal */
.btn-primary {
    background-color: #0070BA;
    border-color: #005EA6;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 112, 186, 0.3);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #005EA6;
    border-color: #004C8C;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 112, 186, 0.4);
    transform: translateY(-1px);
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: #004C8C;
    border-color: #003A70;
    box-shadow: 0 1px 3px rgba(0, 112, 186, 0.3);
    transform: translateY(0);
}

/* Success — Verde */
.btn-success {
    background-color: #00A651;
    border-color: #008A44;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 166, 81, 0.3);
}

.btn-success:hover,
.btn-success:focus {
    background-color: #008A44;
    border-color: #007038;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 166, 81, 0.4);
    transform: translateY(-1px);
}

/* Danger — Rojo */
.btn-danger {
    background-color: #D9534F;
    border-color: #C9302C;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(217, 83, 79, 0.3);
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #C9302C;
    border-color: #AC2925;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(217, 83, 79, 0.4);
    transform: translateY(-1px);
}

/* Warning — Amarillo PayPal */
.btn-warning {
    background-color: #FFC439;
    border-color: #FFB300;
    color: #003087;
    box-shadow: 0 2px 4px rgba(255, 196, 57, 0.4);
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #FFB300;
    border-color: #E6A000;
    color: #003087;
    box-shadow: 0 4px 10px rgba(255, 196, 57, 0.5);
    transform: translateY(-1px);
}

/* Default / Info */
.btn-default {
    background-color: #ffffff;
    border-color: #CBD2D6;
    color: #2C2E2F;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-default:hover,
.btn-default:focus {
    background-color: #F5F7FA;
    border-color: #0070BA;
    color: #0070BA;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.btn-info {
    background-color: #009CDE;
    border-color: #007BB5;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 156, 222, 0.3);
}

.btn-info:hover,
.btn-info:focus {
    background-color: #007BB5;
    border-color: #006290;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 156, 222, 0.4);
    transform: translateY(-1px);
}

/* Botón pequeño */
.btn-sm, .btn-xs {
    border-radius: 4px;
    font-size: 12px;
    padding: 4px 10px;
}

/* ---- CAJAS / CARDS ---- */
.box {
    border-radius: 6px;
    border-top: none;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

.box-header {
    border-radius: 6px 6px 0 0;
    padding: 12px 15px;
    border-bottom: 1px solid #eef1f4;
}

.box-header .box-title {
    font-size: 15px;
    font-weight: 600;
    color: #2C2E2F;
}

.box.box-primary {
    border-top: 3px solid #0070BA;
    border-radius: 0 0 6px 6px;
}

.box.box-success {
    border-top: 3px solid #00A651;
    border-radius: 0 0 6px 6px;
}

.box.box-warning {
    border-top: 3px solid #FFC439;
    border-radius: 0 0 6px 6px;
}

.box.box-danger {
    border-top: 3px solid #D9534F;
    border-radius: 0 0 6px 6px;
}

.box.box-info {
    border-top: 3px solid #009CDE;
    border-radius: 0 0 6px 6px;
}

.box.box-solid.box-primary > .box-header {
    background-color: #0070BA;
    color: #ffffff;
    border-radius: 6px 6px 0 0;
}

.box.box-solid.box-primary {
    border: 1px solid #0070BA;
    border-radius: 6px;
}

/* ---- INFO BOXES (tarjetas de estadísticas) ---- */
.info-box {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    min-height: 80px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.info-box:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.13);
    transform: translateY(-2px);
}

.info-box-icon {
    border-radius: 8px 0 0 8px;
    width: 80px;
    line-height: 80px;
    font-size: 36px;
}

.info-box-icon.bg-aqua  { background-color: #009CDE; }
.info-box-icon.bg-blue  { background-color: #0070BA; }
.info-box-icon.bg-green { background-color: #00A651; }
.info-box-icon.bg-yellow { background-color: #FFC439; color: #003087; }
.info-box-icon.bg-red   { background-color: #D9534F; }
.info-box-icon.bg-purple { background-color: #7B4FD3; }
.info-box-icon.bg-orange { background-color: #F0A500; }
.info-box-icon.bg-navy  { background-color: #003087; }

.info-box-content {
    padding: 10px 16px;
}

.info-box-text {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6C7378;
}

.info-box-number {
    font-size: 22px;
    font-weight: 700;
    color: #2C2E2F;
}

/* ---- BADGES Y LABELS ---- */
.label-primary, .badge-primary { background-color: #0070BA; border-radius: 4px; }
.label-success, .badge-success { background-color: #00A651; border-radius: 4px; }
.label-warning, .badge-warning { background-color: #FFC439; color: #003087; border-radius: 4px; }
.label-danger,  .badge-danger  { background-color: #D9534F; border-radius: 4px; }
.label-info,    .badge-info    { background-color: #009CDE; border-radius: 4px; }

.badge {
    padding: 3px 7px;
    font-size: 11px;
    font-weight: 600;
}

/* ---- INPUTS / FORMULARIOS ---- */
.form-control {
    border-radius: 5px;
    border: 1px solid #CBD2D6;
    box-shadow: none;
    font-size: 13px;
    color: #2C2E2F;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    border-color: #0070BA;
    box-shadow: 0 0 0 3px rgba(0, 112, 186, 0.12);
    outline: none;
}

.form-group label {
    font-weight: 600;
    font-size: 13px;
    color: #4A5568;
}

/* ---- TABLAS ---- */
.admin-dashboard .table,
.member-dashboard .table {
    border-radius: 6px;
    overflow: hidden;
}

.admin-dashboard .table > thead > tr > th,
.member-dashboard .table > thead > tr > th {
    background-color: #F5F7FA;
    color: #6C7378;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    border-bottom: 2px solid #E2E8F0;
    padding: 10px 12px;
}

.admin-dashboard .table > tbody > tr:hover,
.member-dashboard .table > tbody > tr:hover {
    background-color: #EBF4FF;
    transition: background-color 0.15s ease;
}

.admin-dashboard .table > tbody > tr > td,
.member-dashboard .table > tbody > tr > td {
    padding: 10px 12px;
    vertical-align: middle;
    border-top: 1px solid #EEF1F4;
}

/* ---- PAGINACIÓN ---- */
.pagination > li > a,
.pagination > li > span {
    color: #0070BA;
    border-color: #CBD2D6;
    border-radius: 4px;
    margin: 0 2px;
    transition: all 0.2s ease;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    background-color: #EBF4FF;
    border-color: #0070BA;
    color: #0070BA;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: #0070BA;
    border-color: #0070BA;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 112, 186, 0.3);
}

/* ---- TABS ---- */
.nav-tabs {
    border-bottom: 2px solid #E2E8F0;
}

.nav-tabs > li > a {
    color: #6C7378;
    border-radius: 5px 5px 0 0;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

.nav-tabs > li > a:hover {
    color: #0070BA;
    background-color: #F5F7FA;
    border-bottom-color: #0070BA;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #0070BA;
    border: none;
    border-bottom: 2px solid #0070BA;
    background-color: #ffffff;
    font-weight: 700;
}

/* ---- ALERTS ---- */
.alert {
    border-radius: 6px;
    border-left-width: 4px;
    font-size: 13px;
}

.alert-success {
    background-color: #E6F7EE;
    border-color: #00A651;
    color: #006B34;
}

.alert-danger, .alert-error {
    background-color: #FDECEA;
    border-color: #D9534F;
    color: #8B1A18;
}

.alert-warning {
    background-color: #FFF8E6;
    border-color: #FFC439;
    color: #7A5200;
}

.alert-info {
    background-color: #E6F3FB;
    border-color: #009CDE;
    color: #005F8A;
}

/* ---- LINKS ---- */
.admin-dashboard a:not(.btn):not(.nav-link):not(.dropdown-toggle),
.member-dashboard a:not(.btn):not(.nav-link):not(.dropdown-toggle) {
    color: #0070BA;
    transition: color 0.15s ease;
}

.admin-dashboard a:not(.btn):hover,
.member-dashboard a:not(.btn):hover {
    color: #005EA6;
}

/* ---- LOGIN / AUTH ---- */
.login-box-body,
.register-box-body {
    border-top: 3px solid #0070BA;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 20px rgba(0, 48, 135, 0.12);
}

.login-box,
.register-box {
    margin-top: 80px;
}

.auth .login-logo a,
.auth .register-logo a {
    color: #003087;
    font-weight: 700;
}

/* ---- PROGRESS BARS ---- */
.progress {
    border-radius: 10px;
    height: 8px;
    background-color: #E2E8F0;
    box-shadow: none;
}

.progress-bar {
    background-color: #0070BA;
    border-radius: 10px;
    box-shadow: none;
    transition: width 0.4s ease;
}

.progress-bar-success { background-color: #00A651; }
.progress-bar-warning { background-color: #FFC439; }
.progress-bar-danger  { background-color: #D9534F; }
.progress-bar-info    { background-color: #009CDE; }

/* ---- DROPDOWNS ---- */
.dropdown-menu {
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border: 1px solid #E2E8F0;
    padding: 4px 0;
    font-size: 13px;
}

.dropdown-menu > li > a {
    padding: 8px 16px;
    color: #2C2E2F;
    transition: background-color 0.15s ease;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: #EBF4FF;
    color: #0070BA;
}

/* ---- CONTENT WRAPPER ---- */
.content-wrapper {
    background-color: #FFFFFF;
}

.content-header > h1 {
    font-size: 22px;
    font-weight: 700;
    color: #2C2E2F;
}

.content-header .breadcrumb {
    background-color: transparent;
    font-size: 12px;
}

.content-header .breadcrumb > .active {
    color: #0070BA;
}

/* ---- SMALL BOXES (dashboard stats) ---- */
.small-box {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.small-box:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    transform: translateY(-3px);
}

.small-box > .inner {
    padding: 16px 20px;
}

.small-box > .inner h3 {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 4px;
}

.small-box > .inner p {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.9;
}

.small-box > .small-box-footer {
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.12);
    transition: background-color 0.2s ease;
}

.small-box > .small-box-footer:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

/* ---- SIDEBAR TOGGLE BUTTON ---- */
.shorten-button .btn,
.btn.btn-block {
    border-radius: 5px;
    font-weight: 600;
}

/* ---- SCROLLBAR SUTIL ---- */
.main-sidebar::-webkit-scrollbar { width: 4px; }
.main-sidebar::-webkit-scrollbar-track { background: #002472; }
.main-sidebar::-webkit-scrollbar-thumb { background: #0070BA; border-radius: 4px; }

/* =====================================================
 * SMALL-BOX: Fondo blanco, azul oscuro vivo, negro
 * ===================================================== */

/* Base blanca para todas las tarjetas */
.small-box.bg-yellow,
.small-box.bg-aqua,
.small-box.bg-green,
.small-box.bg-red {
    background-color: #FFFFFF !important;
    color: #111111 !important;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

/* Total Views — borde azul cielo */
.small-box.bg-yellow {
    border-top: 4px solid #009CDE !important;
}
.small-box.bg-yellow .icon > i { color: #009CDE; }
.small-box.bg-yellow .small-box-footer {
    background-color: #F0FAFF;
    color: #007BAD;
    border-top: 1px solid #D0EEFA;
}

/* Total Earnings — borde azul PayPal */
.small-box.bg-aqua {
    border-top: 4px solid #0070BA !important;
}
.small-box.bg-aqua .icon > i { color: #0070BA; }
.small-box.bg-aqua .small-box-footer {
    background-color: #F0F7FF;
    color: #005EA6;
    border-top: 1px solid #C8DFF5;
}

/* Referral Earnings — borde azul navy */
.small-box.bg-green {
    border-top: 4px solid #003087 !important;
}
.small-box.bg-green .icon > i { color: #003087; }
.small-box.bg-green .small-box-footer {
    background-color: #F0F4FF;
    color: #002272;
    border-top: 1px solid #BFD0F0;
}

/* Average CPM — borde negro */
.small-box.bg-red {
    border-top: 4px solid #111111 !important;
}
.small-box.bg-red .icon > i { color: #111111; }
.small-box.bg-red .small-box-footer {
    background-color: #F5F5F5;
    color: #333333;
    border-top: 1px solid #DDDDDD;
}

/* Ícono interior — más grande y visible */
.small-box .icon > i {
    font-size: 72px;
    opacity: 0.18;
}

/* Números — azul oscuro intenso */
.small-box > .inner h3 {
    font-size: 34px;
    font-weight: 800;
    color: #003087;
    text-shadow: none;
}

/* Etiqueta — negro legible */
.small-box > .inner p {
    font-size: 13px;
    font-weight: 700;
    color: #444444;
    letter-spacing: 0.3px;
}

/* Footer de tarjeta */
.small-box > .small-box-footer {
    font-weight: 600;
    font-size: 12px;
}

/* ---- CONTENT HEADER ---- */
.content-header {
    background-color: #ffffff;
    border-bottom: 1px solid #E2E8F0;
    padding: 12px 20px;
    margin-bottom: 20px;
}

.content-header > h1 {
    font-size: 20px;
    font-weight: 700;
    color: #003087;
}

.content-header .breadcrumb {
    background-color: transparent;
    font-size: 12px;
    padding: 0;
    margin: 0;
    line-height: 2.2;
}

.breadcrumb > li + li::before {
    color: #CBD2D6;
}

.breadcrumb > .active {
    color: #0070BA;
    font-weight: 600;
}

/* ---- SIDEBAR: "New Shorten Link" botón ---- */
.sidebar-menu .shorten-button,
.sidebar .user-panel {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ---- WRAPPER y BODY FONDO ---- */
.content-wrapper,
.right-side {
    background-color: #FFFFFF;
}

/* ---- BOX header con borde azul ---- */
.box-header.with-border {
    border-bottom: 2px solid #E8F0F8;
}

.box-header .box-title {
    color: #003087;
    font-weight: 700;
    font-size: 14px;
}

.box-header > .fa,
.box-header > .glyphicon,
.box-header > .ion {
    color: #0070BA;
    margin-right: 6px;
}

/* ---- TABLAS: stripe azul suave ---- */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #F5F9FF;
}

.table-hover > tbody > tr:hover {
    background-color: #EBF4FF;
}

/* ---- FOOTER del layout ---- */
.main-footer {
    background-color: #ffffff;
    border-top: 1px solid #E2E8F0;
    color: #6C7378;
    font-size: 12px;
    padding: 10px 20px;
}

/* ---- SIDEBAR: logo area ---- */
.main-header .logo {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.5px;
}

/* ---- NAVBAR user dropdown ---- */
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,48,135,0.15);
    border: 1px solid #E2E8F0;
    min-width: 180px;
    margin-top: 4px;
}

/* ---- SIDEBAR user panel ---- */
.user-panel {
    padding: 14px 10px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.user-panel > .info > p {
    font-weight: 600;
    color: #ffffff;
    font-size: 13px;
}

.user-panel > .info > a {
    color: rgba(255,255,255,0.7) !important;
    font-size: 12px;
}

/* ---- SELECT / MONTH PICKER ---- */
.member-dashboard select.form-control,
.admin-dashboard select.form-control {
    border-radius: 6px;
    border-color: #CBD2D6;
    color: #2C2E2F;
    font-weight: 600;
    padding: 8px 12px;
    height: auto;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.member-dashboard select.form-control:focus,
.admin-dashboard select.form-control:focus {
    border-color: #0070BA;
    box-shadow: 0 0 0 3px rgba(0,112,186,0.12);
}

/* ---- CHART BOX ---- */
#chart_div {
    background-color: #FAFCFF;
    border-bottom: 1px solid #E2E8F0;
}

/* ---- SMALL-BOX MÓVIL ---- */
@media (max-width: 767px) {
    .small-box {
        margin-bottom: 14px;
    }

    .small-box > .inner {
        padding: 20px 18px 16px;
    }

    .small-box > .inner h3 {
        font-size: 42px;
        font-weight: 900;
        letter-spacing: -1px;
    }

    .small-box > .inner p {
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .small-box.bg-yellow,
    .small-box.bg-aqua,
    .small-box.bg-green,
    .small-box.bg-red {
        border-top-width: 5px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    }

    .small-box .icon {
        display: none;
    }

    .small-box > .small-box-footer {
        font-size: 13px;
        padding: 10px 18px;
    }
}