/* Estilos para ocultar las flechas de los input Number */

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

input[type=number] { -moz-appearance:textfield; }

/* Estilos para mantener abajo el footer */

body {
  display: flex;
  flex-direction: column;
}

#main-content {
  min-height: calc(100vh - 67px - 128px);
  background: linear-gradient(303deg, rgb(236 248 249) 3%, rgb(201 237 243) 40%, rgb(206 245 253) 50%, rgb(237 247 249) 85%);
}

/* Estilos generales */

html::-webkit-scrollbar {
  -webkit-appearance: none;
}

html::-webkit-scrollbar:vertical {
  width:7px;
}

html::-webkit-scrollbar-button:increment,html::-webkit-scrollbar-button {
  display: none;
} 

html::-webkit-scrollbar:horizontal {
  height: 10px;
}

html::-webkit-scrollbar-thumb {
  background-color: #06dbef;
  border-radius: 15px;
  border: 1px solid #073583;
}

html::-webkit-scrollbar-track {
  border-radius: 10px;  
}

.dropdown-toggle::after {
  display: none;
}

.iti {
  display: table-cell;
}
.iti .selected-flag {
  z-index: 4;
}
.iti .country-list {
  z-index: 5;
}
.input-group .iti .form-control {
  border-top-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 4px;
}

/* Header y Navbars */

.navbar {
  padding: .5rem 1rem;
}

.navbar-expand-lg .navbar-nav .nav-link {
  color: black;
  margin-left: 1rem;
  padding: .2rem .5rem;
  font-weight: 600;
  border-radius: .575rem;
  border: 1.5px solid #06dbef;
  transition: all .25s ease-in-out;
}

.navbar-expand-lg .navbar-nav .nav-link.sports-lnk {
  color: white;
}

.navbar-expand-lg .navbar-nav .nav-link:hover {
  background: #06dbef;
  border: 1.5px solid #073583;
}

.navbar-expand-lg .navbar-nav .nav-link.sports-lnk:hover {
  color: #06dbef;
}

.logo-home {
  width: 80%;
  height: 40px;
}

.products-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-dropdowns, .logout-elements, .logged-elements, .deskmenu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.header-dropdowns .logout-elements .btn {
  font-weight: bold;
  height: 40px;
}

.header-dropdowns .logout-elements .btn:not(:last-child) {
  margin-right: 1rem;
}

.header-dropdowns .logout-elements .login-btn {
  background: #26c126;
  color: white;
  border: 2px solid #06dbef;
}

.header-dropdowns .logout-elements .login-btn:hover {
  background: #009900;
}

.dropdown-menu.show {
  margin-top: 4px;
  border: 1px solid #073583;
}

.header-dropdowns .dropdown-menu .dropdown-item {
  font-weight: 600;
  font-size: 14px;
  color: #212529;
}

.minimenu .dropdown-toggle {
  padding: 0 .5rem;
}

.minimenu .dropdown-toggle i {
  font-size: 1.5rem;
}

#dropdown-profile .dropdown-toggle::after, #dropdown-currency .dropdown-toggle::after {
  display: inline-block;
}

.logged-elements .btn-deposit {
  --bs-btn-color: #1fd331;
  --bs-btn-border-color: #1fd331;
  display: flex;
  flex-wrap: nowrap;
}

.logged-elements .btn-deposit span {
  color: white;
}

.logged-elements .dropdown .user-menu {
  display: inline;
}

.navbar .balance-container {
  text-decoration: none;
}

.navbar .balance-container h6 {
  font-size: 13px;
}

.navbar .user-balance {
  display: flex;
  align-items: center;
  margin: .1rem 0 0 0;
  white-space: nowrap;
}

.navbar .user-balance .cash-icon {
  font-size: 1.5rem;
  color: #06dbef;
  padding: 0 .5rem .2rem 0;
}

.navbar .user-balance .balance-number {
  color: black;
  border-radius: .325rem;
  padding: 0 .5rem;
  font-style: italic;
  font-size: .9rem;
}

.navbar .user-balance .USD {
  background-color: #13d54d;
}

.navbar .user-balance .VES {
  background-color: #22c9c9;
}

.navbar .user-balance .COP {
  background-color: #ffde67;
}

.header-dropdowns .user-menu img {
  border-radius: 100%;
}

/* Modal de login */

.bs-icon {
  --bs-icon-size: 0.75rem;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: var(--bs-icon-size);
  width: calc(var(--bs-icon-size) * 2);
  height: calc(var(--bs-icon-size) * 2);
  color: var(--primary);
}

.bs-icon-xs {
  --bs-icon-size: 1rem;
  width: calc(var(--bs-icon-size) * 1.5);
  height: calc(var(--bs-icon-size) * 1.5);
}

.bs-icon-sm {
  --bs-icon-size: 1rem;
}

.bs-icon-md {
  --bs-icon-size: 1.5rem;
}

.bs-icon-lg {
  --bs-icon-size: 2rem;
}

.bs-icon-xl {
  --bs-icon-size: 2.5rem;
}

.bs-icon.bs-icon-primary {
  color: white;
  background: var(--bs-info);
}

.bs-icon.bs-icon-primary-light {
  color: var(--primary);
  background: rgba(0,123,255,0.2);
}

.bs-icon.bs-icon-semi-white {
  color: var(--white);
  background: rgba(255, 255, 255, .5);
}

.bs-icon.bs-icon-rounded {
  border-radius: .5rem;
}

.bs-icon.bs-icon-circle {
  border-radius: 50%;
}

#changePassword .modal-content {
  max-width: 25rem;
  height: 30rem;
}

#login_form .modal-dialog {
  display: flex;
  justify-content: center;
}

#login_form .modal-body {
  padding: 1rem 3rem;
}

#login_form .modal-content {
  border-radius: .25rem;
  width: 25rem;
  height: 30rem;
}

#login_form .form-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#login_form .form-title h3 {
  color: #073583;
}

#login_form p, #register_form p {
  margin: 0;
}

#login_form .input-group-text, #register_form .input-group-text {
  color: #073583;
}

/* Modal de registro */

#register_form .modal-dialog {
  display: flex;
  justify-content: center;
}

#register_form .modal-body {
  padding: 1.5rem 2.5rem;
}

#register_form .modal-content {
  display: flex;
  justify-content: center;
  width: 35rem;
  min-height: 30rem;
}

#register_form .btn-close {
  position: absolute;
}

#register_form h2, #register_form h6 {
  color: #073583;
  text-align: center;
}

#register_form h6 {
  margin-bottom: 2rem;
}

#register_form .iti {
  width: calc(100% - 42px);
  color: black;
}

#register_form #phoneDiv .invalid-feedback {
  display: block;
}

/* Separadores */

.separator {
  height: 1px;
  background-color: #0f46a3;
}

/* Carrusel */

.carousel-item {
  height: 120px;
  overflow: hidden;
}

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
  display: flex;
  justify-content: center;
}

/* iFrame */

.frame-container {
  height: calc(100vh - 106.5px);
}

.frame-container iframe {
  width: 100%;
  height: 100%;
}

/* Panel de Usuario */

.user-panel {
  padding: 1rem 1.5rem;
}

.user-panel .forms-card .panel-menu {
  padding: .3rem .5rem;
  margin-bottom: 1.5rem;
}

.panel-menu .profile-data .profile-avatar {
  width: 150px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto .5rem;
}

.panel-menu .profile-data .profile-avatar img {
  width: 100%;
  height: auto;
}

.profile-data .profile-level h5 {
  text-align: center;
  text-transform: uppercase;
  color: #073583;
}

.panel-menu .menu-divider {
  margin: 1rem 2rem;
}

.menu-nav .nav-item {
  margin-bottom: .1rem;
}

.menu-nav .nav-item .nav-link:hover, .menu-nav .nav-item .nav-link.active {
  color: var(--bs-nav-link-hover-color);
  background-color: rgba(0,0,0,.4);
}

.panel-title {
  text-align: center;
  color: white;
  padding: .3rem 1.5rem;
  background-color: #06dbef;
  width: 23rem;
  border-radius: .375rem;
}

.panel-title h5 {
  margin: 0;
}

.title-row {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.panel-content {
  padding: 0 1.5rem;
}

.panel-content label {
  font-weight: bold;
}

.payment-container .panel-content {
  justify-content: space-evenly;
}

.payment-container .payment-content {
  margin: 0 .5rem 2.5rem;
  background-color: rgba(53,62,73,.9);
  width: 250px;
  height: 150px;
  border-radius: 1.25rem;
  padding: 0;
}

.payment-method {
  width: 100%;
  border-radius: 1.25rem;
}

.payment-method .payment-img {
  height: 100%;
  padding: 1rem;
  text-align: center;
}

.payment-method .payment-img img {
  height: inherit;
  border-radius: 1.25rem;
}

.payment-method .payment-img .binance-img {
  width: 189px;
  height: 47px;
  margin-top: 36px;
}

#forms-container .modal-title {
  color: #06dbef;
}

#pagomovil-form .bancamiga-col {
  display: flex;
  justify-content: center;
}

#pagomovil-form .bank-link img {
  width: 200px;
}

#bancamiga-form .min-amount {
  color: #ff3b3b;
  text-align: center;
  text-transform: uppercase;
}

#transfer-form .bancamiga-img img {
  width: 220px;
}

#transfer-form .bancamiga-img {
  text-align: center;
  margin-bottom: 1.5rem;
}

#transfer-form .bank-data {
  text-align: center;
}

#transfer-form .bank-data h6 {
  color: #06dbef;
}

#transfer-form .transfer-note {
  text-align: center;
  color: #ff6b6b;
}

#transfer-form .transfer-form {
  margin: .5rem 3rem;
}

/* Contenedor de Productos */

#products {
  padding: .75rem 2rem;
  align-items: center;
}

#products .product-col {
  display: flex;
  justify-content: center;
}

#products .product-card {
  --bs-card-height: 21px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  min-width: 260px;
  height: 160px;
  border-radius: 25px;
  min-height: 160px;
  border: 2px solid #06dbef;
  transition: all .35s ease-in-out;
}

#products .product-card:hover {
  box-shadow: 0 0 20px 2px red;
}

.logo-div {
  width: 90%;
}

.product-img {
  margin: auto;
  overflow: scroll;
  width: 100%;
}

/* Footer */

.footer {
  padding: 1rem 0;
}

.elements-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-footer {
  text-align: center;
}

.social-footer {
  font-size: 1.2rem;
  margin-bottom: 0rem;
}

.social-icons {
  text-decoration: none;
}

.social-icons:not(:last-child) {
  margin-right: 10px;
}

.footer-text {
  color: #06dbef;
  font-weight: 500;
  margin: 0;
}

/* Media Querys */

@media (min-width: 576px) {
  .carousel-item {
    height: 185px;
  }

  #products {
    padding: .75rem 3rem;
  }

  #products .product-card {
    min-width: 210px;
    height: 130px;
    min-height: 130px;
  }
}

@media (min-width: 615px) {
  .frame-container {
    height: calc(100vh - 66px);
  }
}

@media (min-width: 768px) {
  .carousel-item {
    height: 205px;
  }

  .panel-content {
    padding: 0 3rem;
  }

  #products .product-card {
    min-width: 200px;
    height: 125px;
    min-height: 125px;
  }
}

@media (min-width: 992px) {
  .minimenu {
    display: none;
  }

  .carousel-item {
    height: 220px;
  }

  #products .product-card {
    min-width: 240px;
    height: 176px;
    min-height: 176px;
  }

  .navbar-expand-lg {
    justify-content: space-between;
  }

  .user-panel .forms-card .panel-menu {
    border-right: 1px solid #353637;
  }

  .menu-nav .nav {
    flex-direction: column;
  }
}

@media (min-width: 1200px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    margin-left: 1.7rem;
    padding: .2rem 2.2rem;
  }
  
  .header-dropdowns .deskmenu {
    margin-right: 1rem;
  }

  .carousel-item {
    height: auto;
  }
  
  .carousel .carousel-item img {
    width: 100%;
  }
  
  #products {
    padding: .75rem 7rem;
    padding-top: 33px;
  }
  
  #products .product-card {
    min-width: 300px;
    height: 215px;
    min-height: 215px;
  }
}

@media (max-width:991px) {
  #navbarResponsive {
    display: none;
  }

  .user-panel .forms-card .panel-menu {
    border-bottom: 1px solid #353637;
  }

  .panel-menu .menu-nav .nav {
    display: flex;
    justify-content: center;
  }

  .menu-nav .nav-item:not(:last-child) {
    border-right: 1px solid #d3d3d3;
  }
}

@media (max-width: 768px) {
  .card-img, .card-img-top, .card-img-bottom {
    width: 100%;
  }
  
  label {
    display: inline-block;
    font-size: 0.9rem;
  }
  
  .card {
    margin-top: 2%;
  }
}

@media (max-width: 767px) {
  .row {
    align-items: center;
  }
}

@media (max-width: 575px) {
  .products-nav {
    justify-content: space-between;
    margin-bottom: .5rem;
  }

  .header-dropdowns {
    justify-content: center;
  }

  .header-dropdowns .logout-elements .btn {
    width: 50%;
  }

  .panel-menu .menu-nav .nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .menu-nav .nav-item {
    width: 16%;
    display: flex;
    justify-content: center;
  }

  .menu-nav .nav-item span {
    display: none;
  }

  #register_form #newPasswordDiv {
    margin-bottom: 1rem;
  }
}

@media (max-width: 425px) {
  #products .product-card {
    height: 229px;
    min-height: 229px;
    min-width: 380px;
  }

  .logo-home {
    width: 100%;
    height: 40px;
  }
}

@media (max-width: 375px) {
  #products .product-card {
    min-width: 333px;
    height: 206px;
    min-height: 206px;
  }
  
  .logo-home {
    width: 100%;
    height: 40px;
  }
}

@media (max-width: 320px) {
  #products .product-card {
    --bs-card-height: 21px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    min-width: 302px;
    height: 185px;
    min-height: 185px;
  }
  
  .logo-home {
    width: 107%;
    height: 40px;
  }
}