:root {
  --main-white-color: white;
  --border-muted: #C76A00;
}

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  border: solid 1px #C76A00;
  border-radius: 20px;
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.25) 0%, rgba(255, 204, 0, 0.25) 100%);
}

.navbar-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.app-button--bold, .profile-sidebar__link--active {
  font-weight: 700;
  font-style: Bold;
  font-size: 17px;
  leading-trim: CAP_HEIGHT;
  line-height: 100%;
  letter-spacing: 0%;
}

.app-button, .profile-sidebar__link {
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.2) 0%, rgba(153, 123, 0, 0.2) 100%);
}

.app-button {
    border: solid 1px #C76A00;
}

.amount-control-counter-button:hover, .dropdown li:hover, .modal-primary-button:hover, .auth-btn:hover, .balance-btn:hover, .profile-btn:hover, .app-button:hover, .profile-sidebar__link:hover, .nav-link:hover {
  background: linear-gradient(93.14deg, #C76A00 0%, #D03F00 233.72%);
  color: white;
}

.amount-control-counter-button, .modal-primary-button, .app-button--active, .profile-sidebar__link--active, .active {
  background: linear-gradient(93.14deg, #C76A00 0%, #D03F00 233.72%);
}

.product-card {
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.15) 0%, rgba(153, 123, 0, 0.15) 100%);
}

.profile-info {
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.15) 0%, rgba(153, 123, 0, 0.15) 100%);
}

.profile-sidebar__header {
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.15) 0%, rgba(153, 123, 0, 0.15) 100%);
}

.monitoring {
  border: solid 1px #C76A00;
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.15) 0%, rgba(153, 123, 0, 0.15) 100%);
}

.table {
    border: solid 1px #C76A00;
}

.table thead {
  background: linear-gradient(93.14deg, #C76A00 0%, #D03F00 233.72%);
}

.table tbody, .dropdown {
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.15) 0%, rgba(153, 123, 0, 0.15) 100%);
}

.search-input, .text-input {
  color: #FFFFFFCC;
  border: 1px solid #C76A00;
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.2) 0%, rgba(153, 123, 0, 0.2) 100%);
}

.modal {
  border: 1px solid #C76A00;
  border-radius: 20px;
}

.form {
  border: 1px solid #C76A00;
  background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.15) 0%, rgba(153, 123, 0, 0.15) 100%);
}

.navbar-links {
  background-color: unset;
}

.product-card-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 15px 22px;
    text-align: center;
}

.product-card-footer > div {
    display: flex;
    justify-content: center;
    width: 100%;
}

.product-card-name {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
}

.product-card-price {
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    leading-trim: CAP_HEIGHT;
    line-height: 100%;
    letter-spacing: 0%;
    color: #d97706;
}

.nav-link-icon {
  width: 36px;
  height: 36px;
}

.product-modal-title,
.recharge-panel-header {
    position: relative;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 50px;
}

.product-modal-title::after,
.recharge-panel-header::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -26px;
    transform: translateX(-50%);
    width: 180px;
    height: 8px;
    background:
        linear-gradient(
            to right,
            transparent,
            rgba(214,123,16,.35),
            #d67b10,
            #ff9a1f
        ) left center/75px 2px no-repeat,

        linear-gradient(
            to left,
            transparent,
            rgba(214,123,16,.35),
            #d67b10,
            #ff9a1f
        ) right center/75px 2px no-repeat;

    filter: drop-shadow(0 0 4px rgba(255,140,0,.45));
}

.product-modal-title::before,
.recharge-panel-header::before {
    content: "◈";
    position: absolute;
    left: 50%;
    bottom: -35px;
    transform: translateX(-50%);
    color: #d67b10;
    font-size: 14px;
    text-shadow: 0 0 8px rgba(214,123,16,.7);
}

.empty-icon {
  background: linear-gradient(93.14deg, #C76A00 0%, #D03F00 233.72%);
}

.recharge-panel-bonus {
    background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.15) 0%, rgba(153, 123, 0, 0.15) 100%);
    color: #ca5900;
}

.recharge-panel-provider.selected {
  border: solid 1px #C76A00;
}

/* code */
.products-slider {
    position: relative;
    width: 100%;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(199, 106, 0);
    border-image: initial;
    border-radius: 20px;
    background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.25) 0%, rgba(255, 204, 0, 0.25) 100%);
    padding-right: 75px;
    padding-left: 75px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.products-types-buttons {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    gap: 10px;
    /* padding: 0 45px; */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.products-types-buttons::-webkit-scrollbar {
    display: none;
}

.products-types-buttons .app-button {
    flex: 0 0 clamp(140px, 18vw, 220px);
    white-space: nowrap;
}

.products-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(95.27deg, rgba(175, 73, 0, 0.2) 0%, rgba(153, 123, 0, 0.2) 100%);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 999;
}

.products-slider-prev {
    left: 5px;
}

.products-slider-next {
    right: 5px;
}

.products-slider-arrow:hover {
    opacity: .0.9;
}
/* code end */

.banner-wrapper > div {
  display: flex;
  column-gap: 20px;
}

.monitoring {
  width: 100%
}

.grid-wrapper {
  gap: unset;
}

@media (max-width: 768px) {
    .navbar {
        position: static;
    }

    .navbar-brand {
        position: static;
        transform: none;
    }

    .navbar-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
    }

    .navbar-brand-logo {
        height: 34px;
    }
}