body {
    /* background:url("../images/mybg.png") */
}

html {
    /* background:url("../images/mybg.png")*/
}

.product:hover {
    cursor: pointer;
}


.btnclosepopup {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: #eee;
    float: right;
    z-index: 100;
    border: none;
    outline: none;
    color: #444;
    line-height: 30px;
    font-size: 30px;
    font-weight: bold;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.16), 0 0 5px rgba(0, 0, 0, 0.23);
    transition: .3s;
}

.btnclosepopup:hover {
    transform: rotate(360deg);
    transition: 0.5s all ease;
    background: rgba(38, 131, 196, 1);
    color: #ddd;
}

pre {
    padding: 8.5px;
    margin: 0 0 9px;
    font-size: 12px;
    line-height: 1.42857143;
    word-break: break-all;
    word-wrap: break-word;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 2px;
    overflow: auto;
    max-height: 100px;
}

.navigation_panel {
    position: fixed;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}

.products {
    width: 130px;
    height: 130px !important;
}

.products:hover {
    transform: scale(0.9);
    /* box-shadow: 0 0 5px #333; */
    z-index: -1;
}

.productModal {
    height: 235px !important;
}

.productModalMassive {
    height: 260px !important;
}

.product:hover {
    transform: scale(0.9);
    /* box-shadow: 0 0 5px #333; */
    z-index: -1;
}

.product {
    display: block;
    width: 100%;
    height: auto;
}

.product-col {
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.imgProductModal {
    position: relative;
}

.porductActive {
    position: absolute;
    bottom: 9px;
    left: 60%;
}

input[type="checkbox"][id^="massiveCost_"] {
    display: none;
}

input[type="checkbox"][id^="customerCost_"] {
    display: none;
}

input[type="checkbox"][id^="user_assign_"] {
    display: none;
}

.hide-price {
    display: none;
}

.bgtrans {
    background-color: #ffffff0d;
    margin-bottom: 5px;
}

.combo_product_label {
    border: 1px solid #fff;
    display: block;
    position: relative;
    cursor: pointer;
}

.combo_product_label:before {
    color: white;
    display: block;
    border-radius: 50%;
    border: 1px solid grey;
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    transition-duration: 0.4s;
}

:checked + .combo_product_label {
    border-color: #ddd;
}

:checked + .combo_product_label:before {
    content: "✓";
    background-color: grey;
    transform: scale(1);
}

:checked + .combo_product_label img {
    transform: scale(0.8);
    /* box-shadow: 0 0 5px #333; */
    z-index: -1;
}

.v-checkbox {
    position: relative;
    height: 16px;
    display: block;
    padding-left: 16px;
    cursor: pointer;
    background-color: transparent !important;

}

.v-label {
    float: left;
    display: block;

    padding-right: 7px;
}

.customer_name_b {
    font-size: 22px;
}

.customer_name_a {
    color: #3276b1;
    font-size: 18px;
    font-family: "Open Sans", Arial, Helvetica, Sans-Serif;
    line-height: 1.1;
    text-decoration: none;
}

.more_info {
    border-bottom: 1px dotted;
    position: relative;
}

.more_info .title {
    position: absolute;
    top: 20px;
    background: silver;
    padding: 4px;
    left: 0;
    white-space: nowrap;
}

.fondo {
    background: url(../images/fondo.jpeg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.loginBg {
    background: url(../images/login_meganet.jpg);
    -webkit-background-size: auto;
    -moz-background-size: auto;
    -o-background-size: auto;
    background-size: 100% 100%;
}

.btnLogin {
    background: url(../images/btn_login.png) no-repeat center;
    height: 50px;
    width: 100%;
    background-size: 100% 50px;
}

.recargate .package-item {
    background: #eeeeee;
    padding: 10px;
    margin-bottom: 10px;
    min-height: 80px;
    border-radius: 10px;
    border: 1px;
}

.recargate input[type=date] {
    height: 30px;
    border: 1px solid #ccc;
}

.recargate #shortcut {
    background-color: rgba(255, 255, 255, .9)
}

.recargate #shortcut ul {
    -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
    border-bottom: 1px solid #A8BADB
}

.recargate .superbox-list.active:before {
    color: #2C3742
}

.recargate .superbox-img-description {
    color: #9EA8B1 !important
}

.recargate .project-context > :first-child {
    text-shadow: none
}

.recargate .project-selector {
    color: #B2C1D5
}

.recargate .project-selector:hover {
    color: #fff
}

.recargate #logo-group span#activity {
    background: none !important;
    border: none !important;
    color: #C5C6CA
}

.recargate #logo-group span#sound {
    background: none !important;
    border: none !important;
    color: #C5C6CA
}

.recargate #logo-group span#sound:hover {
    color: #fff
}

.recargate #logo-group span#activity:hover {
    color: #fff
}

.recargate #logo-group > span .badge {
    background: #008DC4
}

.recargate .header-search > input[type=text] {
    background: #FFFFFF;
    border: 1px solid #0F1217;
    color: #0F1217;
    border-radius: 4px
}

.recargate #ribbon {
    background: #fff
}

.recargate .btn.btn-ribbon {
    background: #9498A0
}

.recargate aside {
    background: #F7F7F7;
    background: -webkit-gradient(linear, left top, right top, color-stop(99%, #f7f7f7), color-stop(100%, #cacaca));
    background: -webkit-linear-gradient(left, #f7f7f7 99%, #cacaca 100%);
    background: -webkit-gradient(linear, top left, top right, from(#f7f7f7), to(#cacaca));
    background: linear-gradient(to right, #f7f7f7 99%, #cacaca 100%);
    min-height: 100%
}

.recargate #left-panel {
    padding-left: 15px;
    padding-bottom: 15px;
    padding-top: 64px
}

.recargate .login-info {
    margin-bottom: 7px !important;
    height: auto
}

.recargate .login-info span {
    padding: 5px 10px 7px;
    background: #FFF;
    border-radius: 4px
}

.recargate .login-info a {
    font-size: 16px !important;
    color: #33455A;
    margin-top: 2px
}

.recargate .login-info a span {
    padding: 0;
    font-size: 16px !important;
    max-width: 150px
}

.recargate .login-info img {
    width: 35px
}

.recargate nav ul li a {
    color: #69737A !important;
    font-size: 12px !important
}

.recargate nav ul ul {
    background: 0 0
}

.recargate nav ul ul > li:hover b {
    color: #69737A !important
}

.recargate nav ul ul li > a {
    padding-left: 23px
}

.recargate nav ul ul ul li a {
    padding-left: 30px
}

.recargate nav ul ul ul ul li a {
    padding-left: 40px
}

.recargate nav ul ul ul ul ul li a {
    padding-left: 50px
}

.recargate nav ul ul ul ul ul ul li a {
    padding-left: 60px
}

.recargate nav > ul > li > a {
    padding-top: 16px;
    padding-bottom: 16px
}

.recargate nav > ul > li > a > i {
    font-size: 25px !important
}

.recargate nav > ul > li > a b {
    top: 16px
}

.recargate .jarviswidget-color-blueDark > header {
    background: #2C3742 !important;
    border-color: #2C3742 !important
}

.recargate .btn-success {
    background-color: #96bf48;
    border-color: #84A83E
}

.recargate .btn-danger {
    background-color: #DB4A67;
    border-color: #CA4862
}

.recargate .btn-warning {
    background-color: #E2B14A;
    border-color: #C99D42
}

.recargate .bg-color-red {
    background: #DB4A67 !important
}

.recargate .bg-color-blue {
    background: #4387bf !important
}

.recargate .smart-form .toggle i:before {
    background-color: #3b9ff3
}

.recargate .bg-color-greenLight {
    background-color: #89AD45 !important
}

.recargate .bg-color-orange {
    background-color: #D6A848 !important
}

.recargate .bg-color-teal {
    background-color: #5ba0a3 !important
}

.recargate .minifyme {
    background: #D7DAE2;
    border-bottom: 1px solid #818181;
    color: #7E7E7E
}

.recargate .minifyme:hover {
    color: #4E4E4E
}

.recargate .onoffswitch-inner:before {
    background: #3b9ff3;
    border-color: #3b9ff3 #257DC7 #2A7DC4
}

.recargate .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch:before {
    color: #84A83E
}

.recargate .ui-chatbox-titlebar {
    background: #576574 !important
}

.recargate .ui-chatbox-titlebar.ui-state-focus {
    background: #2C3742 !important
}

body.recargate {
    background: #fff
}

.recargate #hide-menu a > i, .recargate .btn-header > :first-child > a {
    background: 0 0;
    border: none !important;
    color: #C5C6CA !important;
    box-shadow: none !important
}

.recargate #hide-menu a:hover i, .recargate .btn-header > :first-child > a:hover {
    color: #fff !important;
    cursor: pointer !important
}

.recargate .header-dropdown-list a.dropdown-toggle, .recargate .header-search > button {
    color: #C5C6CA
}

.recargate.fixed-ribbon #ribbon {
    border-bottom: 1px solid #E0E0E0
}

.recargate #ribbon .breadcrumb, .recargate #ribbon .breadcrumb a, .recargate #ribbon .breadcrumb li:last-child, .recargate #ribbon .breadcrumb > .active {
    color: #7C7C7C !important
}

.menu-on-top.recargate #left-panel {
    padding-top: 49px !important
}

.recargate .login-info, .recargate .login-info span {
    border: 0 !important;
    box-shadow: none !important
}

.recargate nav ul .active > a, .recargate nav ul li.open > a, .recargate nav ul li.open > a b {
    color: #202427 !important;
    font-weight: 700
}

.recargate nav ul li a:hover, .recargate nav ul ul li > a:hover {
    color: #202427 !important;
    background: none !important
}

.recargate nav > ul ul li::before, .recargate nav > ul > li > ul::before {
    border: none !important
}

.recargate .btn-primary, .recargate .smart-form .button {
    background-color: #3b9ff3;
    border-color: #3292E2
}

.recargate .btn-primary.active, .recargate .btn-primary:active, .recargate .btn-primary:focus, .recargate .btn-primary:hover, .recargate .open .dropdown-toggle.btn-primary {
    background-color: #3E90D4;
    border-color: #2F7DBE
}

.recargate .dropdown-menu > li > a:focus, .recargate .dropdown-menu > li > a:hover {
    background-color: #3E90D4
}

.recargate .btn-success.active, .recargate .btn-success:active, .recargate .btn-success:focus, .recargate .btn-success:hover, .recargate .open .dropdown-toggle.btn-success {
    background-color: #89AD45;
    border-color: #78973B
}

.recargate .btn-danger.active, .recargate .btn-danger:active, .recargate .btn-danger:focus, .recargate .btn-danger:hover, .recargate .open .dropdown-toggle.btn-danger {
    background-color: #CF4762;
    border-color: #C0455E
}

.recargate .btn-warning.active, .recargate .btn-warning:active, .recargate .btn-warning:focus, .recargate .btn-warning:hover, .recargate .open .dropdown-toggle.btn-warning {
    background-color: #D6A848;
    border-color: #C09844
}

.recargate .pagination > .active > a, .recargate .pagination > .active > a:focus, .recargate .pagination > .active > a:hover, .recargate .pagination > .active > span, .recargate .pagination > .active > span:focus, .recargate .pagination > .active > span:hover {
    background-color: #3b9ff3
}

.recargate.minified .login-info {
    margin: 0 !important
}

.recargate.minified .login-info a {
    margin-top: 4px
}

.recargate.minified .login-info span {
    padding: 0
}

.recargate.minified #left-panel {
    padding: 0 !important;
    padding-top: 50px !important
}

.recargate.minified nav ul > li > a {
    padding: 12px 11px
}

.recargate.minified nav ul li.active > a:before {
    height: 23px;
    right: -19px;
    top: 7px;
    font-size: 20px;
    color: #FFF
}

.recargate.minified nav > ul > li {
    border-bottom: 1px solid #E6E6E6;
    border-top: 1px solid #FFF
}

.recargate.minified nav > ul > li > a > i {
    font-size: 18px !important
}

.recargate.minified nav > ul > li > ul, .recargate.minified nav > ul > li > ul > li, .recargate.minified nav > ul > li > ul > li > ul > li {
    background: #fff !important
}

.recargate .smart-form .checkbox input:checked + i, .recargate .smart-form .radio input:checked + i, .recargate .smart-form .toggle input:checked + i {
    border-color: #3b9ff3
}

.smart-form .rating input + label:hover, .smart-form .rating input + label:hover ~ label {
    color: #3b9ff3
}

.recargate.menu-on-top .menu-item-parent {
    font-size: 10px
}

.recargate.menu-on-top #left-panel {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0
}

.recargate.menu-on-top nav ul ul li > a {
    text-shadow: none !important;
    color: #646E75
}

.recargate.menu-on-top nav ul ul li a {
    padding-left: 10px !important;
    font-size: 13px
}

.recargate.menu-on-top nav ul ul li:hover > a {
    color: #fff !important;
    background-color: #5E6C88
}

.recargate.menu-on-top nav ul ul .active > a {
    color: #fff !important
}

.recargate.menu-on-top nav > ul ul ul {
    border-top: 1px solid #c7c7c7 !important
}

.recargate.menu-on-top nav > ul ul li:hover > ul {
    background: #333
}

.recargate.menu-on-top nav > ul > li > a:after {
    color: #8AA1B3 !important
}

.recargate.menu-on-top aside {
    background: inherit
}

.recargate.menu-on-top aside#left-panel {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 1px solid #B8B8B8;
    border-top: 1px solid #333
}

.recargate.menu-on-top aside#left-panel nav > ul > li {
    border-right: 1px solid transparent;
    border-left: 1px solid transparent
}

.recargate.menu-on-top aside#left-panel nav > ul > li > a {
    text-shadow: none !important;
    font-size: 13px;
    padding: 10px 9px !important
}

.recargate.menu-on-top aside#left-panel nav > ul > li > ul {
    background: #2C3742
}

.recargate.menu-on-top aside#left-panel nav > ul > li:hover {
    background: #2e3e57;
    border-right-color: #fff;
    border-left-color: #fff
}

.recargate.menu-on-top aside#left-panel nav > ul > li:hover > a {
    color: #F1F1F1 !important;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding-left: 8px !important;
    padding-right: 8px !important
}

.recargate.menu-on-top nav ul ul li a, .recargate.menu-on-top nav ul ul ul li a {
    color: #ADBED3 !important
}

.recargate.menu-on-top nav ul ul li a:hover, .recargate.menu-on-top nav ul ul ul li a:hover {
    color: #fff;
    background-color: #5E6C88 !important
}

.recargate.menu-on-top nav ul ul, .recargate.menu-on-top nav ul ul ul {
    background: #2e3e57 !important;
    border: 1px solid transparent
}

.recargate.menu-on-top nav ul ul li:hover > a:after, .recargate.menu-on-top nav > ul ul > li a:after, .recargate.menu-on-top nav > ul ul > li a:hover:after, .recargate.menu-on-top nav > ul > li > a:after {
    color: #D5D5D5
}

.recargate.menu-on-top nav ul ul li:hover > a:after, .recargate.menu-on-top nav > ul ul > li a:hover:after {
    color: #fff
}

.recargate.menu-on-top nav ul ul .active > a:hover, .recargate.menu-on-top nav ul ul li.active:hover > a {
    color: #fff !important
}
/* Estilo base del enlace */
#buy-balance-link {
    background-color: #1e90ff; /* Azul predeterminado */
    color: #fff; /* Texto blanco */
    font-weight: bold;
    border-radius: 5px;
    padding: 10px; /* Espaciado interno */
    text-align: center; /* Centrar texto */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
    text-decoration: none; /* Sin subrayado */
}

/* Estilo del ícono */
#buy-balance-link .fa-money-bill {
    color: #fff; /* Color blanco predeterminado */
    font-size: 1.3em; /* Tamaño del ícono */
    vertical-align: middle; /* Alineación con el texto */
    margin-right: 5px; /* Espaciado entre ícono y texto */
}

/* Estilo del texto */
#buy-balance-link .menu-item-parent {
    font-size: 1.1em; /* Tamaño del texto */
    color: #fff; /* Texto blanco predeterminado */
    vertical-align: middle; /* Alineación con el ícono */
}

/* Hover: Cambiar colores y agregar efecto */
#buy-balance-link:hover {
    background-color: #007bff; /* Azul más oscuro */
    color: #000; /* Texto negro */
}

#buy-balance-link:hover .fa-money-bill,
#buy-balance-link:hover .menu-item-parent {
    color: #000; /* Cambia ícono y texto a negro */
}