:root { /* === LightBonus — ciemny motyw === */ /*--bg-sea: #0c4a6e;*/ --bg-sea: #07121a; --font-size-xl: 1.7rem; --font-size-big: 1.5rem; --font-size-normal: 1rem; /* Tła */ --bg-page: #0A0A0B; --bg-main: #141416; --bg-nav: #1A1A1C; --bg-card: #1D1D1F; --bg-footer: #1a394b; --bg-card: #1D1D1F; /* Akcent */ --orange: #E96E10; --orange-light: #E96E10; /* --orange-light: #F0904A;*/ --orange2: #c55a08; /* Tekst */ --text-color: #F2F2F2; --text-secondary: #A5A5AA; --text-muted: #7C7C81; --grey: #A5A5AA; --dark-grey: #2A2A2C; /* Obramowania */ --border: #2A2A2C; --border-light: #3D3D42; /* Pozostałe */ --red: #ee2b2c; --green: #3f9d3d; --black: #0A0A0B; --white: #F2F2F2; --in-basket: #E96E10; --btn-yellow: #E96E10; --cyan: #E96E10; --cyan-03: rgba(233,110,16,0.03); --cyan-08: rgba(233,110,16,0.08); --cyan-20: rgba(233,110,16,0.20); --blue: #1D1D1F; --brown: #2A1D12; /* Rozmiary fontów (rem) */ --fs-xs: 0.6875rem; --fs-sm: 0.75rem; --fs-base: 0.8125rem; --fs-md: 0.875rem; --fs-lg: 1rem; --fs-xl: 1.375rem; --fs-2xl: 1.625rem; /* Zaokrąglenia */ --radius-card: 15px; --radius-sm: 8px; --radius-m: 10px; --radius-xl: 12px; /* Animacje */ --d: 2500ms; --angle: 90deg; --gradX: 10%; --gradY: 50%; --c1: rgba(233,110,16,1); --c2: rgba(233,110,16,0.1); } h1,h2,h3,h4,h5,h6 {font-weight:unset;font-size:unset;padding:unset;margin:unset} html { height:100%; position:relative; font-size:1rem; font-family: Arial, Helvetica, sans-serif; color: var(--text-color); background: linear-gradient(180deg, #0a1520 0%, #162334 60%, #1e3448 100%) no-repeat top center; background-color: #1e3448; min-height: 100vh; } body { margin:0; padding:0; color: var(--text-color); font-size: var(--fs-base); line-height: 1.5; min-height: 100%; background: url('/img/bg/box_light.webp') no-repeat top center / 100% auto, linear-gradient(180deg, #0a1520 0%, #162334 60%, #1e3448 100%); background-color: var(--bg-sea); background-position: center 100px, top center; } /* body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; min-height: 100vh; background-image: url('/img/bg/box_light.webp'); background-repeat: no-repeat; background-position: 0% 100px; background-size: 100% auto; z-index: 0; pointer-events: none; } */ /* Globalne nadpisanie tła kart i powierzchni */ .dashboard-box, .white-box, .card, .last-status-container, .news-container, .supervisor-data { background-color: var(--bg-card); border-color: var(--border); color: var(--text-color); } table { border-collapse: collapse; width: 100%; color: var(--text-color); } th { background-color: var(--bg-nav); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 600; } td { border-bottom: 1px solid var(--border); font-size: var(--fs-base); } a { color: var(--orange-light); } img {max-width:100%;height:auto} .container {max-width:1500px;width:100%;margin:0 auto;position: relative} .header {position: relative; width: 100%; min-height: 50px;top:0;z-index: 12;background-color: var(--bg-nav);} .header.absolute {position: absolute} .header-phone a{text-decoration: none;color:var(--text-color)} .menu-squares{position: absolute;top:1px;right:20px;display: grid;grid-template-columns: 1fr 1fr 1fr;justify-content: center;align-items: center;z-index: 9;cursor: pointer;z-index:12} .menu-squares .sq{position: relative;width: 7px;height: 7px;background-color: var(--text-color);border-radius: 2px;margin: 4px;pointer-events: none;} .menu-squares i{color:var(--text-color);font-size: 2rem} .menu-start { position: relative;top:30px;z-index: 10} .menu-start ul { display: flex; list-style: none; height: 100%; align-items: center; justify-content: center;padding:0;margin:0} .menu-start li a{color:var(--text-color);text-decoration: none;margin: 0px} .nav-container {flex-basis:100%;height:60px;position:relative;max-width:260px;} .dropdown-content {display:flex;flex-direction:column;} .drop:hover {background-color:transparent;color:var(--orange-light);} .drop:hover + .nav-hover-container {visibility:visible;opacity:1;} .drop-li:hover > .drop {background-color:transparent;color:var(--orange-light);font-weight:600;} .drop-li.hovered > .drop {color:var(--orange-light);font-weight:600;} .nav-container.hovered {background-color:transparent;} .drop-li:hover > .nav-hover-container {visibility:visible;opacity:1;} .nav-hover-container {display:block;transition:opacity 0.2s,visibility 0.2s;visibility:hidden;opacity:0;position:absolute;width:auto;min-width:180px;max-width:220px;background-color:var(--bg-page);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(0,0,0,0.5);top:100%;left:0;z-index:100;padding:6px 0;} .dropdown-icon-link {padding:9px 18px;color:var(--text-color);text-decoration:none;font-size:var(--fs-base);cursor:pointer;display:block;white-space:nowrap;} .dropdown-icon-link:hover {color:var(--orange-light);background:rgba(233,110,16,0.08);font-weight:normal;} .dropdown-title {text-align:left;} nav {display:block;position: relative;background-color:var(--bg-sea);border-bottom:1px solid var(--border);min-height:50px;top:0px;z-index: 11} nav .nav-container{display:flex;margin: auto;max-width:1500px;justify-content: space-between;align-items: center;height:60px;position: relative} nav .nav-item{color:var(--text-color);text-align: center;display: flex; align-items: center; justify-content: center;cursor:pointer;font-size:var(--fs-base);text-decoration: none;font-weight:600;padding: 0 20px;} nav .nav-item:hover {color:var(--orange-light);text-decoration: none} nav .nav-item.btn-nav-category:hover {text-decoration: none} nav .nav-item.btn-nav-category{color:var(--text-color);background-color:var(--bg-card);border:1px solid var(--border);padding:8px 5px; border-radius:var(--radius-sm);display: flex;flex-basis:250px} nav .nav-item.btn-nav-category span {flex-basis: 100%} nav .nav-item.btn-nav-category i.fa-bars {flex-basis: 10%} nav .nav-item.btn-nav-category i.fa-chevron-down {flex-basis: 10%} nav .nav-item.btn-free-dlv {background-color:#004ED3;color:var(--white);padding:10px;border-radius:5px;font-size:0.8rem} .user-nav-container {display:flex;gap:6px;padding:0 16px 0 0;align-items:center;background:var(--bg-sea);border-bottom:1px solid var(--border);} .user-nav-item2 {display:none;} .user-nav-item {padding:12px 8px;text-decoration:none;color:white;font-size:var(--font-size-big);cursor:pointer;display:inline-block;position:relative;white-space:nowrap;transition:color 0.2s;} .user-nav-item.logout {color:var(--orange)} .user-nav-item::after {content:"";position:absolute;bottom:0;left:0;width:0%;height:2px;background-color:var(--orange);transition:width 0.3s;} .user-nav-item.active {color:var(--text-color);} .user-nav-item.active::after {width:100%;} .user-nav-item:hover {color:var(--text-color);} .user-nav-item:hover::after {width:100%;} .user-nav-item i{margin-right:6px;} .user-nav-container .language-box {margin-left:auto;} .logo {position:relative;display:inline-block;z-index: 10;} .logo img{max-width:250px} .logo a{font-size:2rem;color:var(--white);;text-decoration: none} .logo a span{color:var(--orange)} .grid-logo {display:grid;grid-template-columns: 1fr 2fr 1fr 1fr 1fr 1fr;padding: 0px 0 0 0; position: relative;background-color: var(--black);justify-content: center;align-items: center} input[name="search"] {border: 2px solid var(--cyan); border-radius: 5px 0 0 5px; padding: 10px 10px; width: 90%; font-size: 0.9rem; color: var(--text-color);} .btn-search {display:inline-block;background-color:var(--cyan);color:white;padding:10.8px 20px;font-size:1rem;;cursor: pointe;font-weight:500} .search-container {display: flex; justify-content: center; align-items: center;} .grid-logo i {color:var(--orange);font-size: 1.2rem;} .nav-top .top-text {color:var(--white);font-size:1rem} .header-phone {position: relative;color:var(--text-color);grid-gap: 10px;} .header-point {position: relative;color:var(--text-color);grid-gap: 10px;} .header-mail {position: relative;color:var(--text-color);grid-gap: 10px;justify-content: center} .header-login {position: relative;color:var(--text-color);grid-gap: 10px;justify-content: center} .basket-icon {position: absolute; top: 15px; right: 20px;} .basket-icon i{font-size:1.5rem;color:var(--white)} .basketCount {position: absolute; top: -10px; left: -10px; background-color: var(--orange); color: black; display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 0.7rem;} .wcag_container {display: flex; justify-content: center; align-items: center; grid-gap: 10px;height:100%} .wcag_container .btn-font-size{border: 1px solid #666;padding: 3px 5px;border-radius: 3px;display: flex;justify-content:center;align-items: center;font-weight: bold;cursor: pointer;color:var(--white)} .wcag_container .btn-size-normal{font-size: 0.8rem;} .wcag_container .btn-size-bigger{font-size: 0.9rem;} .wcag_container .btn-size-biggest{font-size: 1rem;} .wcag_container .btn-contrast{cursor:pointer} .active-size {background-color:black;color:white} .language-box {position: relative;display: inline-block;z-index: 13;text-align: center;width:50px;flex-shrink:0;} .language-box .text-white{color:white;font-size:1rem} .language-box .dropbtn {background-color:var(--bg-card);color:var(--text-color);border:1px solid var(--border);} .language-box .dropbtn-footer {background-color:transparent;color:var(--text-secondary);border:none;font-size:1.2rem;width:100%;cursor:pointer;} .language-box .dropbtn-footer::after {display:none;} .language-box .dropbtn-footer:hover {background-color:transparent;color:var(--orange);border:none;} .language-box .dropbtn-footer i{ margin-right:10px} .language-box .dropdown-content-language { width: 200px;min-width:200px} .language-box header .container { } .dropdown-content-language {display:none;position:absolute;background-color:var(--bg-card);border:1px solid var(--border);min-width:380px;color:var(--text-color);z-index:12;right:0;box-shadow:0 8px 30px rgba(0,0,0,0.4);border-radius:var(--radius-card);padding:20px;font-size:var(--fs-base);text-align:left;} .show {display:block;} .dropdown-content-language span {color:var(--text-color);padding:5px;text-decoration:none;display:block;cursor:pointer;} .btn-lang.selected_lang {background-color:var(--dark-grey);color:var(--orange);border-radius:var(--radius-sm);} .btn-lang:hover {background-color:var(--dark-grey);color:var(--orange-light);border-radius:var(--radius-sm);} .nav-language-title {display:inline-block;padding:10px 0 10px 5px} .close-l-box {position: absolute; right: 10px; top: 4px;} .close-l-box i{font-size:1.2rem} .btn-lang img {padding:0 10px 0 0;vertical-align: middle} .slider_container {position: relative;;background-color: #1a2e4a} /* .slider_container .sliderBoxAppla {position: absolute;top:0;width:100%;height:100%;left:0;z-index: 2} .slider_container .sliderBoxAppla::after {position: absolute;width:100%;height:100%;content:"";background-image:url('/img/slider_appla.png');background-position: left top;background-size: contain;background-repeat: no-repeat;z-index: 1;top:0} */ .slider {position: relative;max-width:100%;margin:0 0 0 auto;color:black;line-height:0} .slider .slider-container {} .slider .slider-box-3 {display: grid !important; grid-template-columns: 54% 46%; grid-gap: 10px; width: calc(100% - 10px) !important; margin: 0 auto;} .slider .slider-box-3 img{max-width:100%} .slider .box-1{grid-row: 1/2 span;} .slider .sliderBox {;height:500px;background-position: center;background-repeat: no-repeat;background-size: cover;position:relative} .slider .sliderBoxContainer {position: relative;max-width:1500px; margin:8% auto 10px auto;z-index: 20;line-height: 100%} .slider .sliderBox .sliderTitle {font-size: 1.1rem; margin-bottom: 0px;color:var(--white)} .slider .sliderBox .sliderText1 {font-size: 4rem; margin-bottom: 20px; font-weight: 600;color: var(--white);line-height: 100%} .slider .sliderBox .sliderText2 {font-size: 1.6rem; margin-bottom: 0px; font-weight: 100;color:var(--white);line-height: 100%} .slider .sliderBox .sliderText3 {font-size: 2rem; color: var(--white); font-weight: 500;margin-top:10px} .slider .sliderBox .sliderText4 {font-size: 1.1rem; color: var(--white); font-weight: 500;margin-top:10px} .slider .sliderBox .sliderBtn {background-color:var(--cyan);color:white;;padding:10px 20px; ;font-size:1.2rem;display: inline-block;text-decoration: none;margin-top:30px} .slider .sliderBox .sliderBtn:hover {font-weight: bold} .slider .sliderBox .sliderBtnSlider {position: absolute;width:100%;height:100%;left:0;top:0} .slider .prev {position: absolute; left: 10px; top: calc(50% - 20px); z-index: 9; color: var(--white);} .slider .next {position: absolute; right: 10px; top: calc(50% - 20px); z-index: 9; color: var(--white);} .dashboard {position: relative;margin:20px auto } .dashboard .dashboard-box {background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;position: relative;color:var(--text-color);} .dashboard-box-title{font-size:var(--fs-xl);font-weight:normal;text-align: left;margin-bottom:20px;color:var(--text-color);} .dashboard .dashboard-box-info {display:flex;justify-content: flex-start;align-items: flex-start;grid-gap:30px;min-height: 120px;} .dashboard img {max-height:100px} .dashboard .box-value {color:black;font-size:2.0rem;font-weight:bold;text-decoration: none} .dashboard .grid-inst-dash {display: grid; grid-template-columns: 70px 1fr ; grid-gap: 0 10px;align-items: center} .dashboard .grid-inst-dash a{text-align: center} .dashboard .grid-inst-dash .box-value{font-size:2.7rem} .dashboard .icon-container{position: absolute;top:20px;right:10px;width:60px} .dashboard .progress-info {font-size:0.8rem} .dashboard .progress-container {position: absolute;top:0;right:-60%;width: 90%;} .dashboard .progress-bar-container {width: 100%;height: 15px;background-color: transparent; border-radius: 8px; position: relative; overflow: hidden;border:1px solid black;padding:2px} .dashboard .progressAdd {margin-top:50px} .db2-wrap { max-width:1300px; margin:0 auto; padding:0 16px 40px; } .header-glow::before {content: ''; left: 0; position: absolute; top: 40px; width: 100%; height: 200px; background-image: url('/img/bg/menu_light.webp'); background-repeat: no-repeat; background-position: top; background-size: 100%;z-index: 0;} /* Hero */ .db2-hero { text-align:center; padding:100px 0 50px;font-family: 'Inter', sans-serif; z-index: 1;position: relative} .db2-hero-name {background: linear-gradient(90deg, #404040 35%, #fff 50%, #fff 50%, #4a4a4a 70%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;font-size:5rem;font-weight: 500;} .db2-hero-sub {background: linear-gradient(90deg, #404040 35%, #fff 50%, #fff 50%, #4a4a4a 70%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;font-size:var(--font-size-big);font-weight: 300;margin-top:4px; } /* Gl�wna karta */ .db2-main { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-bottom:20px;z-index: 2;position: relative} .db2-main-start {grid-column: 1/2 span; background:linear-gradient(120deg, rgba(126,49,23,0.8) 2%, rgba(201,87,8,0.8) 44%, rgba(255,148,45,0.8) 88%); color:#fff; padding:45px 50px 28px 80px;border:1px solid #c75407;border-radius:var(--radius-card); display:grid;grid-template-columns: 1fr 1fr;align-items: flex-start;justify-content: flex-start} .db2-main-inst { background:rgba(255,165,0,.85); color:#fff; padding:28px 24px; } .db2-main-level { background:#132d3b; color:#fff; padding:28px 24px; min-width:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;border-radius:var(--radius-card);border:1px solid #0c4a6e } .db2-main-section-title { font-size:var(--font-size-big); font-weight:700; margin-bottom:8px; } .db2-main-big { font-size:3.8rem; font-weight:600; margin-bottom:6px; } .db2-main-big2 { font-size:var(--font-size-normal); font-weight:600; margin-bottom:6px; } .db2-main-text { font-size: var(--font-size-normal); position: relative; top: 10px;} .db2-btn-start { display: inline-block; background: #682d1880; color: white; font-weight: 700; font-size: var(--font-size-normal); padding: 9px 30px; border-radius: var(--radius-card); text-decoration: none; border: 1px solid #ffffff80;position: absolute;bottom:30px} .level-grid {width:100%;display:grid;grid-template-columns: 40% 60%;justify-content: center;align-items: center} /* K�lko poziomu */ .db2-circle { position: relative; width: 100%; max-width: 160px; aspect-ratio: 1; } .db2-circle svg { width: 100%; height: 100%; transform: rotate(-90deg); } .db2-circle-bg { fill:none; stroke:rgba(255,255,255,.15); stroke-width:20; } .db2-circle-fill { fill:none; stroke:var(--orange); stroke-width:20; stroke-linecap:round; transition:stroke-dasharray .6s; } .db2-circle-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .db2-circle-level { font-size:var(--font-size-big); font-weight:700; text-transform:uppercase; } .db2-circle-pct { font-size:var(--font-size-normal); font-weight:700; line-height:1;opacity:0.5 } .db2-level-to-next { font-size:var(--font-size-big); text-align:left;padding-left: 10px } .db2-level-hint { font-size:var(--font-size-normal); text-align:left; margin-top:4px;width: 100%; } .db2-inst-item { display:flex; align-items:center; gap:8px; font-size:var(--font-size-normal); margin-top:15px; } .db2-inst-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .grid-item {display: grid; grid-template-columns: 1fr 1fr 1fr;align-items: flex-start;justify-content: flex-start;margin-bottom: 30px} /* 3 huby */ .db2-hubs { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:16px; } .db2-hub { background:#132d3b; color:#fff; padding:28px 28px 28px 80px; gap:12px;border-radius:var(--radius-card);border:1px solid #0c4a6e;position: relative;text-decoration: none} .db2-hub-icon { font-size:var(--font-size-big); color:var(--orange); position: absolute;top:5px;left:15px} .db2-hub-title { font-size:var(--font-size-big); font-weight:700; text-decoration: none;line-height: 120%;margin-bottom:20px;} .db2-hub-sub { font-size:var(--font-size-normal); color:var(--grey);text-decoration: none } .db2-hub-item { font-size:var(--font-size-normal); color:var(--grey); } .db2-hub-item strong { color:var(--text); } .db2-hub-none { font-size:var(--font-size-normal); color:var(--grey); font-style:italic; } .box-link {position: absolute; font-size: 3rem; right: 20px; top: 30%; color: var(--orange);opacity: 0.3;} /* Akcje: promo + polecenie */ .db2-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px;position: relative;z-index: 2} .db2-action-box { background:#132d3b; ; border: 1px solid #0c4a6e; border-radius:var(--radius-card); padding:18px 20px 18px 80px; } .db2-action-label { font-size:var(--font-size-normal); font-weight:500; color:white; margin-bottom:20px; } .db2-promo-row { display:flex; gap:8px; align-items:flex-end; } .db2-promo-input { flex: 1; border: 1px solid #455a66; background: transparent; color: var(--text); border-radius: var(--radius-card); padding: 12px 12px; font-size: var(--font-size-normal);width:70%; } .db2-promo-input::placeholder { text-transform:none; } .db2-promo-btn { color:var(--orange); font-size:var(--font-size-normal); font-weight:500; cursor:pointer; background-color: transparent;border:none; } .db2-promo-btn :hover { text-decoration:underline; } .db2-promo-result { margin-top:8px; font-size:.82rem; } .db2-ref-text { font-size:var(--font-size-normal); color:#8b98a0; line-height:1.5; margin-bottom:10px; width:100%; } .db2-ref-link { font-size: var(--font-size-normal); font-weight: 500; color: var(--orange); text-decoration: none; width: 50%; text-align: right; } .db2-ref-link:hover { text-decoration:underline; } .inputPromoWraper {width:100%} .flex-ref {display:flex;align-items: flex-end;margin-top:30px} input:focus { outline: none !important; box-shadow: none } .newsBox {background:#132d3b; ; border: 1px solid #0c4a6e; border-radius:var(--radius-card); padding:18px 50px 18px 80px;position: relative;z-index: 2} .activityBox {background:#132d3b; ; border: 1px solid #0c4a6e; border-radius:var(--radius-card); padding:18px 50px 18px 80px;position: relative;z-index: 2} /* D�l: news + aktywnosc */ .db2-bottom { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .db2-section-label { font-size:var(--font-size-normal); font-weight:700; color:var(--orange); margin-bottom:20px; } .db2-news-item { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--border); } .db2-news-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; } .db2-news-title { font-size:var(--font-size-big); font-weight:700; margin-bottom:10px; } .db2-news-title a { color:var(--text); text-decoration:none; } .db2-news-title a:hover { color:var(--orange); } .db2-news-text { font-size:var(--font-size-normal); color:white; } .db2-news-more { font-size:var(--font-size-normal); color:var(--orange); font-weight:500; text-decoration:none; display:inline-block; margin-top:4px; } .db2-stat-main-title {font-size:var(--font-size-big); font-weight:700;} .db2-activity-empty { font-size:.82rem; color:var(--grey); line-height:1.6; } .db2-stat-item { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--border); } .db2-stat-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; } .db2-stat-ico { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:var(--font-size-normal); } .db2-stat-ico.ico-orange { background:rgba(255,130,0,.15); color:var(--orange); } .db2-stat-ico.ico-grey { background:var(--border); color:var(--grey); } .db2-stat-name { font-size:var(--font-size-normal); color:var(--grey); } .db2-stat-date { font-size:var(--font-size-normal); color:var(--grey); } .db2-stat-link a { font-size:var(--font-size-normal); color:var(--orange); text-decoration:none; } .db2-history-link {font-size:var(--font-size-normal); color:var(--orange); text-decoration:none; } .progress-bar { height: 100%; width: 0; text-align: center; line-height: 10px; color: white; border-radius: 8px;background-image: linear-gradient(90deg, #379d80 10px, transparent 0px); /*background-color: #4caf50;*/ background-size: 12px 100%;} .progress-text { position: relative; color: black;text-align: center;font-size:1rem} .btn-history-payoff {display:inline-block;font-size:var(--fs-sm);text-align:center;padding:7px 20px;color:var(--orange);border:1px solid var(--orange);border-radius:var(--radius-sm);cursor:pointer;position:relative;font-weight:normal;text-decoration:none;} .btn-history-payoff:hover {background-color:var(--orange);color:white;} .progres-info-text {color:var(--cyan);margin-top:10px;} .grid-dashboad {display: grid; grid-template-columns: 1fr 1fr 1fr; justify-content: flex-start; align-items: flex-start; grid-gap: 20px;} .last-status-container {background-color:var(--bg-card);padding:20px;border-radius:var(--radius-card);border:1px solid var(--border);} .supervisor-data {background-color:var(--bg-card);padding:20px;border-radius:var(--radius-card);border:1px solid var(--border);} .supervisor-data .supervisor-title{font-size:var(--fs-xl);font-weight:bold;margin-bottom:20px;color:var(--text-secondary);} .supervisor-data span{font-weight:bold} .supervisor-data .supervisor-item{margin-bottom:8px} .news-container .title{font-size:var(--fs-base);font-weight:700;text-align:left;margin-bottom:10px;color:var(--text-color);} .news-container .news-title{font-size:var(--fs-base);font-weight:700;color:var(--text-color);margin:0 0 4px;} .news-container .news-title a{color:var(--text-color);text-decoration:none;} .news-container .news-title a:hover{color:var(--orange-light);} .news-container .news-text{font-size:var(--fs-sm);color:var(--text-secondary);margin:0;} .news-container .news-box {background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:0.9rem 1rem;margin-bottom:10px;} .news-container .news-box:last-child{margin-bottom:0;} .news-container {background:transparent;padding:0;grid-column:1/2 span;} .last-status-container .title{font-size:var(--fs-xl);font-weight:bold;margin-bottom:20px;color:var(--text-color);} .last-status-container .stats-box {display:flex;gap:10px;align-items:flex-start;padding:0.6rem 0;border-bottom:1px solid var(--border);} .last-status-container .stats-box:last-of-type{border-bottom:none;} .last-status-container .stats-icon {width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;} .last-status-container .stats-icon.icon-orange{background:rgba(233,110,16,0.15);color:var(--orange);} .last-status-container .stats-icon.icon-grey{background:rgba(165,165,170,0.12);color:var(--text-secondary);} .last-status-container .stats-name{font-size:var(--fs-base);font-weight:normal;color:var(--text-color);margin:0 0 2px;} .last-status-container .stats-date{font-size:var(--fs-xs);color:var(--text-muted);} .last-status-container .stats-details a{font-size:var(--fs-xs);color:var(--orange-light);text-decoration:none;} .last-status-container .stats-details a:hover{text-decoration:underline;} .contact_container {position: relative;;background-color: var(--white);padding:20px 0} .contact {position: relative;max-width:1100px; margin:20px auto 0 auto} .contact .grid-contact {display: grid; grid-template-columns: 30% calc(70% - 50px); justify-content:flex-start; align-items: flex-start;grid-gap:0 50px ;} .contact .grid-contact-icon {display: grid; grid-template-columns: 20% 80%; justify-content: flex-start; align-items: center; margin-bottom:10px;border-bottom:1px solid #cecece; padding-bottom:10px} .contact .grid-contact-icon i {font-size:1.2rem;color:#616161} .contact .contact-right {background-color:#ebebeb;padding:20px} .contact .section-title {font-size:1.2rem;font-weight:bold;margin-bottom:10px} .form-input {position: relative;margin:10px 0;color:var(--text-secondary);font-size:var(--fs-md);width: calc(100% - 0px);} .form-label {position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s;color:var(--text-secondary);} .form-input input::placeholder { color: transparent;} .form-input input{ padding: 10px;width:calc(100% - 20px);background: #132d3b; border: 0.5px solid #24444B;;color:var(--grey);font-size:var(--fs-md);border-radius:var(--radius-card);} .form-input input:focus{ border:2px solid var(--orange) !important;box-shadow:unset;outline:none;} .form-input input:placeholder-shown ~ .form-label{position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s; } .form-input input:not(:placeholder-shown) ~ .form-label{ position: absolute; top: 0; display: block; transition:all 0.2s; color: var(--text-secondary); background-color: #132d3b; padding: 0 5px; border-radius: 5px;font-size:var(--fs-xs);} .form-input input:focus ~ .form-label { position: absolute; top: 0; display: block; transition:all 0.2s; color: white; background-color: #132d3b; padding: 0 5px; border-radius: 5px;font-size:var(--fs-xs);} .grid-form { display: grid;grid-template-columns: 1fr 1fr;justify-content: flex-start;align-items: flex-start;grid-gap:0 20px } .form-input input[name="agree"] {width:20px} .form-input input[name="agree"].required {border:1px solid red} .form-input .requiredCheckbox {border:1px solid red} .form-input span {color:black} .form-input select { width:100%} .form-input select::placeholder { color: transparent;} .form-input select{ padding:10px;} .form-input select:focus{ border:2px solid var(--orange) !important;box-shadow:unset} .form-input select:placeholder-shown ~ .form-label{position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s; } .form-input select:not(:placeholder-shown) ~ .form-label{ position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:#132d3b;padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} .form-input select:focus ~ .form-label { position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} .flex label {left:80px} .form-input textarea{width:calc(100% - 5px);height:200px;border-radius:5px;border:1px solid var(--border)} .form-input label{font-size:var(--fs-base);color:var(--text-secondary);font-family: "Arial";} .form-input textarea::placeholder{font-size:var(--fs-base);color:var(--text-muted);font-family: "Arial";} .form-input textarea:focus-visible{outline:2px solid var(--orange);} .form-input select{width:100%;;padding:10px 6px;background: #132d3b; border: 0.5px solid #24444B;;color:var(--text-color);font-size:var(--fs-base);border-radius:var(--radius-m);} .form-input select.phone_prefix {display: inline-block; width: 70px; margin-right: 5px;} .inst_name_icon {position: absolute;background-color:var(--cyan);padding:5px;border-radius:50%;left:13px;top:10px;width:25px;height:25px;text-align: center} .inst_name_icon img{max-width:100%} .inst_name_icon i{font-size: 1.6rem; color: white;} .step_1 .form-input input:placeholder-shown ~ .form-label{;left:60px;} .step_1 .form-input input{padding:20px 10px 20px 60px;width: calc(100% - 70px);} .step_1 .form-input select:placeholder-shown ~ .form-label{;left:60px;} .step_1 .form-input select{padding:20px 10px 20px 60px;width:100%;} .step_2 .form-input input:placeholder-shown ~ .form-label{;left:60px;} .step_2 .form-input input{padding:20px 10px 20px 60px;width: calc(100% - 70px);} .step_2 .form-input .selectDist::after{position: absolute;content:'\f077';width:20px;height:20px;right:10px;top:10px;color:var(--cyan);font-family: "Font Awesome 6 Free"; font-weight: 900; } .step_2 .form-input .selectDist::before{position: absolute;content:'\f107';width:20px;height:20px;right:10px;bottom:10px;color:var(--cyan);font-family: "Font Awesome 6 Free"; font-weight: 900; } .step_3 .form-input input{padding:20px 10px 20px 60px;width: calc(100% - 70px);} .step_3 .file-input { display: none; } .step_3 .btn-load-invoice {position: relative;background-color:transparent;color:var(--cyan);border:2px solid var(--cyan);padding:20px 20px; cursor:pointer;text-decoration: none;font-weight:bold;display:block} .step_3 .btn-load-invoice:hover {position: relative;background-color:var(--cyan);color:white;border:2px solid var(--cyan);padding:20px 20px; cursor:pointer;text-decoration: none;font-weight:bold;display:block} .step_3 .btn-load-invoice i {font-size:1.2rem} .step_3 .btn-load-invoice:hover { } .step_3 .form-input input:placeholder-shown ~ .form-label{;left:60px;} .step_3 .btn-load-preview {position: relative;background-color:transparent;color:var(--cyan);border:2px solid var(--cyan);padding:20px 20px;cursor:pointer;text-decoration: none;font-weight:bold;display:block} .step_3 .btn-load-preview:hover {position: relative;background-color:var(--cyan);border:2px solid var(--cyan);color:white;padding:20px 20px; ;cursor:pointer;text-decoration: none;font-weight:bold;display:block} .step_3 .btn-load-preview i {font-size:1.2rem} .step_3 .btn-load-preview:hover { } .step_3 .grid-dfv {display:grid;grid-template-columns: 30px 1fr;align-items: flex-start;justify-content: flex-start;text-align: left} .step_3 .grid-dfv input{width:20px} .step_3 .warning-duplicate.warning-box { background-color: #f6cbcb;} .step_3 .warning-duplicate.warning-box .warning-icon { background-color: #f6cbcb;} .contact-title{font-weight:600} .contact-text{font-weight:400;font-size:0.9rem;margin-top:5px} .btn-send{width: 200px; background-color: var(--orange); text-align: center; padding: 10px; border-radius: 5px; margin: 0 0 0 auto;} .id_aggre{position:absolute;top:25px;left:7px;background-color:var(--bg-card);border:1px solid var(--red);color:var(--red);padding:0 10px;font-size:var(--fs-xs);border-radius:3px;} .banners_container {position: relative;;background-color: transparent} .banners.banners_category {position: relative;max-width:1500px; margin:25px auto 25px auto} .banners {position: relative;max-width:100%;margin:0 0 0 auto;color:black;} .banners .bannersBox {;height:230px;background-position: center;background-repeat: no-repeat;background-size: cover;padding:20px;border-radius:10px} .banners .bannersBoxContainer {position:relative;z-index:1;height:100%} .banners .bannersBox .bannersTitle {font-size: 1.1rem; margin-bottom: 20px;color:white} .banners .bannersBox .bannersText1 {font-size: 2.6rem; margin-bottom: 0px; font-weight: 900;color:white} .banners .bannersBox .bannersText2 {font-size: 2.6rem; margin-bottom: 0px; font-weight: 900;color:var(--orange)} .banners .bannersBox .bannersText3 {font-size: 1.5rem; color: var(--white); font-weight: 700;position: absolute;bottom:20px} .banners .bannersBox .bannersBtn {background-color:var(--orange);color:white;padding:10px 20px; border-radius:5px;font-size:1.2rem;display: inline-block;text-decoration: none;margin-top:30px;} .banners .bannersBox{ position: relative} .banners .size50{ display: grid; grid-template-columns: 1fr 1fr; justify-content: center; align-items: center; grid-gap: 20px;} .banners .size33{ display: grid; grid-template-columns: 1fr 1fr 1fr; justify-content: center; align-items: center; grid-gap: 20px;} .banners .size25{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; justify-content: center; align-items: center; grid-gap: 20px;} .banners .size20{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; justify-content: center; align-items: center; grid-gap: 20px;} .banners .size100{ display: grid; grid-template-columns: 1fr ; justify-content: center; align-items: center; grid-gap: 20px;} .section-category {max-width:1500px;margin:50px auto;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px 0;} .section-category .title{font-size:1.2rem;text-align: center;font-weight:bold} .section-category .category-grid{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;grid-gap:10px;padding:10px} .section-category .category-item{display:block;padding:10px;border-radius:5px} .section-category .category-item .icon{font-size:3rem;text-align: center;min-height:91px} .section-category .category-item .name{font-size:1rem;text-align: center} .section-category .category-item .icon img{max-height:80px} .categoryImg {max-width:50%} .section-products-module {max-width:1500px;margin:50px auto;background-color:var(--bg-card);border:1px solid var(--border);padding:20px 0;position:relative;border-radius:var(--radius-card);} .section-products-module .section-title{font-size:var(--fs-lg);font-weight:bold;text-align:center;margin-bottom:20px;} .section-products-module .section-title span{color:var(--orange)} .section-products-module .section-items{display: flex;justify-content: center;align-items: center;;} .section-products-module .products-module{border:1px solid var(--border);text-decoration:none;padding-bottom:10px;border-radius:var(--radius-sm);background:var(--bg-main);} .section-products-module .products-module-foto {padding:20px;min-height:170px;text-align: center} .section-products-module .products-module-foto img{max-width:100%;max-height:170px;} .section-products-module .products-module-title {min-height:85px;padding:0 10px;-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;color:var(--text-color);font-weight:600;margin-bottom:10px;} .section-products-module .products-module-content {text-align: left} .section-products-module .products-module-price {text-align: left;color: var(--orange); font-size: 1.2rem;font-weight: bold;text-decoration: none;padding:0 10px} .section-products-module .btn-item-details {background-color:var(--orange);color:white;font-weight:bold;text-align: center;width:calc(100% - 40px);padding:10px;display:inline-block;margin-left:10px;border-radius:5px;margin-top:10px} .section-products-module .slick-slide {margin: 0 10px;} .section-products-module .slick-list { margin: 0 -10px; } .section-products-module .slick-slider { width:95% ;margin:0 auto} .section-products-module .slick-slide img { display: inline-block;} .line-thru {color:black;font-size:0.8rem;text-decoration-line: line-through;margin-right:10px} .section-news-module {max-width:1500px;margin:50px auto;background-color:var(--bg-card);border:1px solid var(--border);padding:20px 0;position:relative;border-radius:var(--radius-card);} .section-news-module .section-title{font-size:1.2rem;font-weight:bold;text-align: center;margin-bottom:20px} .section-news-module .section-title span{color:var(--orange)} .section-news-module .section-items-news{display: flex;justify-content: center;align-items:flex-start;;grid-gap:20px;padding:0 20px} .section-news-module .news-module{flex-basis:100%;border:1px solid var(--border);text-decoration:none;padding-bottom:10px;border-radius:var(--radius-sm);background:var(--bg-main);} .section-news-module .news-module-foto {padding:20px;min-height:170px;text-align:center;background-position:center;background-size:cover;background-repeat:no-repeat;} .section-news-module .news-module-foto img{max-width:100%;max-height:170px;} .section-news-module .news-module-title {min-height:40px;padding:0 10px;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;color:var(--text-color);font-weight:600;margin-bottom:10px;} .section-news-module .news-module-short {color:var(--text-secondary);font-weight:300;margin-bottom:10px;min-height:40px;padding:0 10px;} .section-news-module .news-module-content {text-align: left} .section-news-module .btn-item-details {background-color:var(--orange);color:white;font-weight:bold;text-align: center;width:calc(100% - 40px);padding:10px;display:inline-block;margin-left:10px;border-radius:5px;margin-top:10px} .news .section-items-news {display:grid;grid-template-columns:1fr;justify-content:flex-start;align-items:flex-start;grid-gap:20px;border-bottom:1px solid var(--border);margin-bottom:10px;padding-bottom:10px;} .news .section-items-news-list {display:grid;grid-template-columns:200px 1fr;justify-content:flex-start;align-items:flex-start;grid-gap:20px;border-bottom:1px solid var(--border);margin-bottom:10px;padding-bottom:10px;} .news .news-module-foto {min-height:150px;background-position: center;background-size: cover;background-repeat: no-repeat} .news .btn-item-details {background-color:var(--orange);color:white;font-weight:bold;text-align: center;width:200px;padding:10px;display:inline-block;border-radius:5px;margin-top:10px;text-decoration: none} .news .news-module-title {font-weight:bold;font-size:1.2rem;margin-bottom:10px} .news .section-title{font-size:1.2rem;font-weight:bold;margin:20px 0} .products .container {max-width:1500px;margin:20px auto;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;position:relative;} .products .section-items-products {display:grid;grid-template-columns:200px auto;justify-content:flex-start;align-items:flex-start;grid-gap:20px;border-bottom:1px solid var(--border);margin-bottom:10px;padding-bottom:10px;} .products .products-module-foto {min-height:150px;background-position: center;background-size: cover;background-repeat: no-repeat} .products .btn-item-details {background-color:var(--orange);color:white;font-weight:bold;text-align: center;width:200px;padding:10px;display:inline-block;border-radius:5px;margin-top:10px;text-decoration: none} .products .products-module-title {font-weight:bold;font-size:1.2rem;margin-bottom:10px} .products .section-title{font-size:1.2rem;font-weight:bold;margin:20px 0} .red-text {color:red;font-weight:bold;} .gm-ui-hover-effect { outline: none !important; box-shadow: none !important; border: none !important; } .gm-ui-hover-effect > span { background: black !important; } .workshop_details {display:grid;grid-template-columns: 30% 70%;grid-gap:20px;justify-content: flex-start;align-items: flex-start;padding:20px 0} .prevItem, .nextItem {display:inline-block;color:var(--text-color);cursor:pointer;z-index:9;position:absolute;top:45%;background-color:var(--bg-card);border:1px solid var(--border);border-radius:50%;box-shadow:0 0 29px -4px rgba(0,0,0,0.5);padding:10px;} .prevItem {left:-20px;} .nextItem {right: -20px;} .btn-yellow-std {display: inline-block;text-align: center;padding: 8px 20px;color: black;background-color: var(--btn-yellow);border-radius: 5px;cursor: pointer;min-width: 100px; position: relative;font-size: 0.8rem;} .btn-yellow-std:hover {background-color:var(--btn-yellow);color:black;} .btn-orange-ghost{display:inline-block; text-align: center;padding:8px 15px; color:orange; border-radius:5px;cursor:pointer;position:relative; border:1px solid orange;font-size:1rem;font-weight:normal} .btn-orange-ghost:hover { } .btn-black-small{display:inline-block;color:var(--text-color);cursor:pointer;position:relative;font-weight:normal;text-decoration:none;} .btn-black{display:inline-block;color:var(--text-color);cursor:pointer;position:relative;font-size:var(--fs-base);font-weight:normal;text-decoration:none;} .btn-black:hover { } .btn-cyan-ghost-small {display: inline-block;font-size: 0.8rem;text-align: center;padding: 7px 0px;color: var(--cyan);border-radius: 5px;border: 1px solid var(--cyan);cursor: pointer;min-width: 150px;max-width:200px; width:100%;position: relative;font-weight: normal;text-decoration: none;} .btn-cyan-ghost-small:hover { background-color: var(--cyan);color:white} .btn-red-ghost-small {display: inline-block;font-size: 0.8rem;text-align: center;padding: 7px 0px;color: var(--red);border-radius: 5px;border: 1px solid var(--red);cursor: pointer;min-width: 150px;max-width:200px; width:100%;position: relative;font-weight: normal;text-decoration: none;} .btn-red-ghost-small:hover { background-color: var(--red);color:white} .logon {height: 90%;padding:20px} .login.recov-container {max-width:60%} .login .title {padding:10px; font-size:1.5rem;font-weight:bold; text-align: center} .login .form-input {margin:15px 0 } .login input {background: #132d3b; border: 0.5px solid #24444B; color: var(--grey); font-size: var(--fs-md); border-radius: 12px} .login .form-content {max-width: 80%; margin: 0 auto;padding:20px} .login .login-remember {position: relative;left: 45%;text-align: left;} .login .login-remember label{text-align: left;margin-left:10px;font-size:0.8rem;} .login .remember-me {width:auto} .login .login-buttons {text-align: left} /*.login div {text-align: right;}*/ .login .login-info {font-size:0.8rem; ; margin-top:20px} .login .register-info {position:relative; padding:10px; border-radius:10px; border:3px solid var(--cyan); width:100%; text-align: center} .login .register-info a{font-size:1rem} .login .steps-box { position: relative; perspective: 1000;display: block;width: 100%;height: 100%;top: 0;} .login .logon-steps { transform-style: preserve-3d; transition: all ease-in-out 0.4s;height:100%} .login .changeToPass { transform: rotateY(180deg); } .login .changeToPass2 { transform: rotateY(0deg) !important; z-index:4 } .login .logon-step-one { position: absolute; width: 100%; height: 100%; backface-visibility: hidden;} .login .logon-step-two{transform: rotateY(180deg); position: absolute; width: 100%; height: 100%; backface-visibility: hidden;z-index:3} .login .logon-step-two-email{transform: rotateY(180deg); position: absolute; width: 100%; height: 100%; backface-visibility: hidden;z-index:3} .login .logon-step-three{transform: rotateY(180deg); position: absolute; width: 100%; height: 100%; backface-visibility: hidden;z-index:2} .login .login-container-left {display: block;position: relative;height: 100%;width:100%;margin: 0 0 0 auto;} .login .login-email-box {width: 58%;position: relative;display: inline-block;border-radius: 5px;border: 1px solid darkgray;} .login .login-phone-box {width: 100%;position: relative;display: inline-block;border-radius: 5px;border: 1px solid darkgray;} .login .login-sms-box {width: 100%;position: relative;display: inline-block;border-radius: 5px;border: 1px solid darkgray;} .login .viewPass {position:absolute;right: 10px; top: 7px; font-size:1.5rem;z-index:99;cursor:pointer;color:var(--cyan)} .login #a_login img {max-width: 100%} .login .btn-text-blue {color:var(--cyan);font-size:1rem;text-decoration: none} .login .btn-text-black {color:var(--text-color);} .login .viewPass:hover {color:black;} .login .remember-me-box label {padding-left:0;font-size: 0.8rem;;width:100%;text-align: right} .login .remember-me-box label input{width:30px; margin:0; padding:0;display:inline-block} .grid-login { display: grid; grid-template-columns: 28% 70%; align-items: flex-start;grid-gap:2%} .btn-login {width: 100%; display: block; padding: 12px 50px; background: linear-gradient(120deg, rgba(126,49,23,0.8) 2%, rgba(201,87,8,0.8) 44%, rgba(255,148,45,0.8) 88%); color: white; font-size: var(--font-size-normal); border: none; cursor: pointer; border-radius: var(--radius-card);margin-top:10px} .grid-log-reg {display:grid;grid-template-columns: 1fr 1fr; grid-gap:20px;width:80%; margin:0 auto} .btn-title-log {padding: 10px; font-size: 1.5rem; font-weight: bold; position: relative;display:inline-block;cursor:pointer} .btn-title-log.active::after {content:"";position: absolute;bottom:0;width:100%;height:2px;background-color: var(--cyan);left:0;transition: all 0.5s;} .btn-title-reg {padding: 10px; font-size: 1.5rem; font-weight: bold;text-align: right;display:inline-block;cursor:pointer;position: relative} .btn-title-reg.active::after {content:"";position: absolute;bottom:0;width:100%;height:2px;background-color: var(--cyan);left:0;transition: all 0.5s;} /* .login .form-input {position: relative;margin:15px 0;color:#cecece} .login .form-label {position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s;} .login .form-input input::placeholder { color: transparent;} .login .form-input input{ padding:10px;border-radius: 5px;} .login .form-input input:focus{ border:2px solid #00e42e !important;box-shadow:unset} .login .form-input input:placeholder-shown ~ .form-label{position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s; } .login .form-input input:not(:placeholder-shown) ~ .form-label{ position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} .login .form-input input:focus ~ .form-label { position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} */ .section-products-list {max-width:1400px;width:100%;box-sizing:border-box;margin:20px auto;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:30px;position:relative;} .section-products-list .logo-solar {position: absolute;top:45px;right:40px} .section-products-list .type-text {position: relative;padding:20px 25% 20px 0;font-size:1.2rem;line-height: 150%;} .section-products-list .nav-settings {margin-top:30px} .grid-product {} .product-img img{max-width:100%} .products-list-container {display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;justify-content: flex-start;align-items: center;grid-gap:50px;width:90%} .btn-title {color:var(--text-color);font-size:var(--fs-base);font-weight:normal;text-decoration:none;} .btn-title:hover {color:var(--orange)} .products-list-name {font-size:4rem;margin:0;font-weight:500} .section-products-list .nav-settings {display:block;} .section-products-list .nav-box.active::after {content:"";position: absolute;bottom:0;width:100%;height:2px;background-color: var(--cyan);left:0;transition: all 0.5s;} .section-products-list .nav-box {display:inline-block;padding:10px 0;color:var(--text-color);font-size:var(--fs-xl);text-align:center;position:relative;cursor:pointer;margin-right:50px;font-weight:bold;} .section-products-list .nav-box::after {content:"";position: absolute;bottom:0;width:0%;height:2px;background-color: var(--cyan);left:0;transition: all 0.5s;} .section-products-list .nav-box:hover::after {content:"";position: absolute;bottom:0;width:100%;height:2px;background-color: var(--cyan);left:0} .section-products-list .sec {text-align: center} .section-products-list .sec img{max-height:200px;max-width:100%} .register {height: 90%;padding:20px} .register .form-input{margin:15px 0} .register .title {padding:10px ; font-size:1.5rem;font-weight:bold; text-align: center } .register input {background: #132d3b; border: 0.5px solid #24444B; color: var(--grey); font-size: var(--fs-md); border-radius: 12px;} .register .form-content {max-width: 80%; margin: 0 auto;padding:20px} .register p {margin:0; padding:0;position:relative} .register .input-loader {position:absolute;display:none;text-align: left;top:15px;right:20px} .register .input-loader img {max-width:30px;} .register .checker {position: relative;text-align: left;} .register .checker label{margin-right:5%} .register .check-login-info {display:none; position:relative; font-size:0.8rem;} .register .check-email-info {display:none; position:relative; font-size:0.8rem; text-align: left;margin-left: 0%; color: green;} .register .pass-strong {display: none;position: relative;margin-left: 0%;font-size: 0.6rem;text-align: left;} #strength_score {display:inline-block;position:relative; font-size:0.6rem; } .register .error-info {position:relative; color:red;; font-size:0.8rem;display: block; } .register .newsletter {position: relative;text-align: right;margin:10px 0} .register .newsletter label{text-align: left; width:auto; margin-left:10px;font-size:0.8rem;} .register .subscribe-newsletter {width:auto} .register .register-info {font-size:0.8rem; ; margin-top:20px;text-align:right} .register .btn-check {font-size:0.8rem; ; position:absolute; right:10px; background-color:gray; color:white;top: 27%;padding: 8px;border-radius: 10px;cursor:pointer} .register .btn-check:hover {background-color:var(--light-blue)} .register .r_ok {background-color:var(--user)} .register .r_no {background-color:var(--red)} .register .r_no:hover {background-color:var(--red); cursor:unset} .register .r_ok:hover {background-color:var(--user); cursor:unset} .register .viewPass {position:absolute;right: 10px; top: 7px; font-size:1.5rem;z-index:9;cursor:pointer} .register .recomended {color:black;font-size:1.0rem;font-weight: bold; cursor:pointer} .register .register-buttons {text-align: left;margin-top:20px} .btn-register {width: 100%; display: block; padding: 12px 50px; background: linear-gradient(120deg, rgba(126,49,23,0.8) 2%, rgba(201,87,8,0.8) 44%, rgba(255,148,45,0.8) 88%); color: white; font-size: var(--font-size-normal); border: none; cursor: pointer; border-radius: var(--radius-card);} .register .regulation-check {width:20px;height:20px} .register .regulation {display:grid;grid-template-columns:20px 1fr;grid-gap:20px;border-top:1px solid var(--border);padding-top:5px;margin-top:5px;font-size:var(--fs-sm);} .register .regulation label {width:100%;text-align: left} .register .regulation .btn-text-blue {font-size: 0.9rem} .register .progress-bar {width: 100%;height: 5px;background-color: transparent;border-radius: 5px;margin-bottom: 15px;overflow: hidden;background-image: linear-gradient(90deg, #b3b3b3 7px, transparent 0px);} .register .progress {height: 100%;width: 0%;transition: width 0.3s;} .red { background-color: red; } .orange { background-color: orange; } .yellow { background-color: gold; } .green { background-color: var(--cyan); background-image: linear-gradient(90deg, var(--cyan) 10px, transparent 0px);} .register ul {list-style: none;padding: 0;} .register li {margin-bottom: 5px;color: #888;display: inline;margin-right:4px} .register li.valid {color: green;font-weight: nomal;} .register #passwordRules {font-size:0.55rem} /* .register .form-input {position: relative;margin:15px 0;color:#cecece} .register .form-label {position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s;} .register .form-input input::placeholder { color: transparent;} .register .form-input input{ padding:10px;border-radius: 5px;} .register .form-input input:focus{ border:2px solid #00e42e !important;box-shadow:unset} .register .form-input input:placeholder-shown ~ .form-label{position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s; } .register .form-input input:not(:placeholder-shown) ~ .form-label{ position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} .register .form-input input:focus ~ .form-label { position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} */ .steps {max-width:50%;margin:0 auto 50px auto} .step-container {display: flex;justify-content: space-between;position: relative;} .step-container .stepper-item {display: flex;flex-direction: column;align-items: center; position: relative;width:100%;cursor:pointer} .step-counter {width: 30px;height: 30px;border-radius: 50%;background-color: #172E33;display: flex;justify-content: center;align-items: center;font-weight: bold;color: white;transition:all 0.3s;padding:8px} .step-container .stepper-item.active .step-counter { background-color: #c7c7c7;} .step-container .stepper-item.completed .step-counter { background-color: var(--orange);} .step-container .stepper-item.active .step-counter { background-color: var(--orange);} .step-container .stepper-item:not(.active):not(.completed) .step-counter { background-color: var(--orange);} .step-container .stepper-item.completed:nth-child(1) .step-counter::before{ background-color: var(--orange);} .step-container .stepper-item.completed:nth-child(2) .step-counter::before{ background-color: var(--orange);} .step-counter::before {content: "";position: absolute;top: 33%;left: 60%;width: 80%;height: 2px;background-color: #172E33;z-index: 1;} .step-container .step-name {color: var(--orange);margin-top:5px} .step-container .stepper-item.grey-icon .step-counter {background-color:#172E33 !important} .step-container .stepper-item.blocked .step-counter {background-color:#172E33 !important;border: 0.5px solid #24444B;} .step-container .stepper-item.blocked .step-name {color:grey !important} .step-container .stepper-item.grey-icon .step-name {color:grey !important} /* Linie widoczne tylko dla dwóch pierwszych kroków */ .stepper-item:nth-child(1) .step-counter::before, .stepper-item:nth-child(2) .step-counter::before { content: ""; position: absolute; top: 33%; left: 65%; width: 70%; height: 2px; background-color: #172E33; z-index: 1; } /* Usunięcie linii dla 3. kroku i dalszych */ .stepper-item:nth-child(n+3) .step-counter::before { content: none; } .steps.container {margin:0px auto;position: relative;background-color:var(--white);padding:50px 0} .steps .section-title {font-size: 2rem; text-align: center; margin: 20px 0;} .steps .section-subtitle {font-size: 1.2rem; text-align: center; margin: 10px;} .steps .grid-account-type {display:flex;justify-content: center;align-items: center;grid-gap:20px;margin:50px 0} .steps .account-box {flex-basis: 100%;max-width:300px;border:1px solid #cecece;padding:15px 10px; border-radius:10px;text-align: center;cursor: pointer} .steps .account-box span{display:block;color:#363636;font-size:0.9rem;} .steps .account-box.active {border:1px solid var(--orange);outline:3px solid var(--orange);} .steps .btn-next {display:inline-block;padding:10px 30px;background-color:#c2c2c2;color:black;border-radius:5px;font-size:1.2rem;border:none;;cursor: pointer;text-decoration: none} .steps .btn-next.active {background-color:var(--orange)} .steps #form_steps {width:40%;margin:50px auto} .btn-container {text-align: center;} .steps .form-input input:placeholder-shown ~ .form-label[for="phone"] {left: 75px;} .btn-container-step-3 {display:flex;justify-content: center;align-items: center;grid-gap:10px; margin:0 auto} .btn-container-step-3 > button {flex-basis: 100%} .btn-container-step-3 > a {flex-basis: 100%} .btn-add-elem {display:block;padding:10px 30px;background-color:var(--orange);color:black;border-radius:5px;font-size:1rem;border:none;;cursor: pointer;text-decoration: none;margin:0 auto;width:300px} .btn-orders-details {width: 100%; position: relative; color: var(--orange); display: block; text-align: right; font-weight: bold; margin-top: 0px;text-decoration: none} .confirm.container {margin:50px auto;} .confirm .title {padding:10px 10px 10px 20px; font-size:1.5rem;font-weight:bold; text-align: center } .info-container {width:50%; margin:0 auto;padding:50px 0;color:white } .error {background-color:#FDCDCE; color:white; display:block;border-radius: 10px; } .error div {border-bottom:1px solid white; display:block; padding:20px} .correct {background-color:var(--dark-green); color:white; display:block;border-radius: 10px; } .correct div { display:block; padding:20px;font-size: var(--font-size-normal);} .forgot-container {width:400px; margin:0 auto} .forgot-container input[name='phone'] {padding:10px 15px} .forgot-form .title {text-align: center} .forgot-form .text-medium {text-align: center} .forgot-email-box { width: 100%; position: relative; display: inline-block; border: 1px solid darkgray;border-radius: 5px;} .btn-orange-small {display: inline-block;text-align: center;padding: 8px 20px;color: black;background-color: var(--orange);border-radius: 5px;cursor: pointer;min-width: 100px;position: relative;text-decoration: none;font-weight:normal;box-sizing: border-box;border:none} .btn-orange-small:hover {background-color: #ffb13f;} #pagination {list-style: none;padding:0;margin:0;position: relative;padding: 16px;} #pagination li {display:inline-block; background-color:#696c74; color:white; padding:8px 10px;cursor: pointer} #pagination .active {background-color:red} .product_details {background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);margin:20px auto;max-width:1500px;padding:20px;} .product-grid {display:grid;grid-template-columns:calc(45% - 20px) 55%;justify-content:flex-start;align-items:flex-start;grid-gap:20px;} .product-images {border-right:1px solid var(--border);text-align:center;} .product-images img{width:100%} .product-details {position: relative;margin-top:20px} .product-category {color:var(--dark-grey);font-size:0.9rem} .product-title {color:var(--text-color);font-size:2rem;} .product-rate {margin:10px 0 } .product-rate i {color:var(--orange);} .product-price {color:var(--orange);font-weight:500;font-size:2rem;margin:30px 0 } .product-params {margin:30px 0 10px 0 } .product-weight {margin:10px 0 10px 0 } .product_details .propose-offer-container {display:flex;grid-gap:20px 10px; margin-bottom: 1rem;flex-wrap: wrap;} .product_details .po-img {display:block;flex-basis:calc(33% - 8px);background-position:center;background-size:cover;background-repeat:no-repeat;border:1px solid var(--border);border-radius:var(--radius-sm);} .product_details .po-img-box {display:block;width:100%;height:120px;background-size:contain;background-repeat:no-repeat;background-position:center;} .product_details .po-link {color:var(--text-color);text-decoration:none;min-width:50px;} .product_details .po-text {margin-top:5px;position: relative;display: block;min-height:50px} .product_details .show-all-propose {display: block; max-width: unset; margin-top: 20px; position: relative;} .product_details .price-cs {font-weight: bold} .product_details .relatedType {border:1px solid var(--border);display:flex;justify-content:center;align-items:center;height:50px;padding:0 5px;} .product_details .input-group-prepend {display:inline-block;} .product_details .qty_input {width:50px;background-color:var(--bg-main);color:var(--text-color);text-align:center;border:1px solid var(--border);padding:10px 0;} .product_details .btn-number {background-color:var(--btn-yellow);color:black; font-size:1rem;text-align: center;padding:10px 10px;cursor:pointer;border: none;} .product_details input[type="number"] { -moz-appearance: textfield;} .product_details .payment_info img{max-width:150px } .product_details .dlv_info img{max-width:100px } .product_details .dlv_grid_logo{display:grid;grid-template-columns:1fr 1fr;justify-content: flex-start;align-items: center} .gallery_container {position: relative;;background-color: var(--orange);font-family: "Bahnschrift";} .gallery_container .title {color:white;text-align: center;padding:50px 0 ;font-size:1.6rem} .gallery .prevGallery {position:absolute;left:10px;top:calc(50% - 20px);z-index:9999;color:var(--orange);background-color:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:5px;cursor:pointer;} .gallery .prevGallery i,.gallery .nextGallery i{font-size:3rem;} .gallery .nextGallery {position:absolute;right:10px;top:calc(50% - 20px);z-index:9999;color:var(--orange);background-color:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:5px;cursor:pointer;} .gallery .galleryBox {;height:300px;background-position: center;background-repeat: no-repeat;background-size: cover;position:relative;border-radius:20px} .gallery .aGallery {;position:relative;} .gallery .gallery-container {padding:0 0 100px 0;width:calc(100% - 125px);margin:0 auto} .gallery .slick-slide { margin: 0 27px; } .gallery .slick-list { margin: 0 -27px; } .offer-accessories {background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);max-width:1500px;width:100%;margin:20px auto;position:relative;} .offer-accessories .accessories_container{padding:20px} .offer-accessories .title{font-weight:bold;font-size:1.2rem} .offer-accessories .accessories-offer-grid{display:flex;justify-content: flex-start;align-items: flex-start;grid-gap:20px} .offer-accessories .accessories-offer-grid .po-img{flex-basis: 20%;} .offer-accessories .accessories-offer-grid .po-img-box{height:220px;background-repeat: no-repeat;background-size:contain;border-radius:10px} .offer-accessories .po-link{text-decoration: none;colo:black} .offer-accessories .po-text{color:var(--text-secondary);min-height:60px;padding:0 10px;display:block;} .offer-accessories .price-cs{text-align:left;color:var(--orange);font-size:var(--fs-lg);font-weight:bold;padding:10px;} .offer-accessories .po-img{border:1px solid var(--border);border-radius:var(--radius-sm);} .offer-attrib {background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);max-width:1500px;width:100%;margin:20px auto;position:relative;} .offer-attrib .attrib_container{padding:20px} .offer-attrib .title{font-weight:bold;font-size:1.2rem} .offer-attrib .attribName{position: relative;padding-left:20px} .offer-attrib .attribName::after{position: absolute;width:10px; height:10px; content:'\f00c';top:0px;left:0; font-family:"Font Awesome 6 Free";font-weight: 900;} .offer-attrib .attrib-offer-grid{position: relative} .btn-download {font-size:1rem;margin:5px 0;color:var(--black) ;text-decoration: none;padding:5px 0;display: block} .btn-download:hover {color:var(--orange) } .poducts-details-nav {background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card) var(--radius-card) 0 0;max-width:1500px;width:100%;margin:20px auto 0 auto;position:relative;padding-top:10px;border-bottom:1px solid var(--border);} .poducts-details-nav .grid-details-nav{display:grid;grid-template-columns: 1fr 1fr;max-width:400px;margin:0 auto} .poducts-details-nav .grid-details-nav .btnNav{text-align: center;font-weight:bold;font-size:1.2rem;cursor:pointer} .poducts-details-nav .grid-details-nav .btnNav:hover{} .poducts-details-nav .grid-details-nav .btnNav.active{border-bottom:3px solid var(--orange);padding-bottom:10px;margin-bottom:0px} .product-description {padding:20px} .product-description .title{font-weight:bold;font-size:1.2rem} .product-description h1{font-weight:bold;font-size:1.2rem} .product-description h2{font-weight:bold;font-size:1.0rem} .product-description h3{font-weight:normal;font-size:1.0rem} .product-description h4{font-weight:normal;font-size:1.0rem} .product-description h6{font-weight:normal;font-size:0.9rem} .product_description_container {background-color:var(--bg-card);border:1px solid var(--border);border-radius:0 0 var(--radius-card) var(--radius-card);max-width:1500px;width:100%;margin:0 auto 20px auto;position:relative;} .product_details .basketInfo {width:calc(100% - 20px);} .invoices {margin:20px auto 30px auto;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;} .invoices .invoices-list-elem {display:grid;grid-template-columns:1fr 1fr 1fr 1fr;font-size:var(--fs-sm);padding:10px;background-color:transparent;align-items:flex-start;position:relative;border-bottom:1px solid var(--border);} .invoices .section-title {font-size:1rem;font-weight:bold;color:var(--text-color);margin-bottom: 5px; padding-bottom: 5px;position: relative} .invoices .btn-download-invoice {text-decoration: none; background-color:var(--orange);color:white;width:200px; padding:5px 20px; border-radius:5px} .invoices .invoices-btn {text-align: right} .invoices .btn-download-invoice {text-decoration: none; background-color:var(--orange);color:white;width:200px; padding:5px 20px; border-radius:5px} .zoomed-image {position: absolute;top: 10%;left: 50%;width: 300px;height: 300px;background-repeat: no-repeat;background-size: 500%;display: none;border:1px solid #cecece;z-index: 10} .settings .grid-user-settings{display:grid; grid-template-columns: 1fr 1fr 1fr;align-items: self-start; grid-gap:50px} .settings .form-user-container {max-width:1300px;width:100%;box-sizing:border-box;margin:20px auto;position:relative;b} .settings .form-user-container input{width:calc(100% - 20px);;padding:10px;background: #132d3b; border: 0.5px solid #24444B;;color:var(--text-color);} .settings .form-user-container input:focus{border-color:var(--orange);outline:none;} .settings .form-user-container select{width:100%;padding:10px 6px;background: #132d3b; border: 0.5px solid #24444B;;color:var(--text-color);font-size:var(--fs-base);border-radius: var(--radius-sm);} .settings .form-user-container textarea{width:calc(100% - 40px);border:1px solid var(--border);padding:5px;;min-height:100px;} .settings .form-user-container .checkbox{display:block;margin-top:10px} .settings .form-user-container .checkbox.hide{display:none} .settings .form-user-container input[type=checkbox]{width:25px;height:25px;border:1px solid var(--border);margin-right:10px;display: inline-block;} .settings .form-user-container input[type=radio]{width:25px;height:20px;border:1px solid var(--border);margin-left:10px;margin-bottom: 10px;top: 3px;position: relative;} .settings .form-user-container .title{font-size: 2rem; margin: 0 0 20px 0;} .settings .form-user-container .section-title{font-weight:bold} .settings .form-user-container .section-info{font-size: 0.9rem; margin-top:10px;} .settings .grid-b-r {border-right: 1px solid var(--border);margin-right: 0px;padding-right: 50px;} .settings input[name="email_code"] {border-radius:5px;padding:10px} .settings .section-info-cyan {color:var(--cyan)} /* .settings .form-input {position: relative;margin:10px 0;color:#cecece} .settings .form-label {position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s;} .settings .form-input input::placeholder { color: transparent;} .settings .form-input input{ padding:10px;border-radius: 5px;} .settings .form-input input:focus{ border:2px solid #00e42e !important;box-shadow:unset} .settings .form-input input:placeholder-shown ~ .form-label{position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s; } .settings .form-input input:not(:placeholder-shown) ~ .form-label{ position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} .settings .form-input input:focus ~ .form-label { position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} .form-input select { width:100%} .form-input select::placeholder { color: transparent;} .form-input select{ padding:10px;border-radius: 5px;} .form-input select:focus{ border:2px solid #00e42e !important;box-shadow:unset} .form-input select:placeholder-shown ~ .form-label{position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s; } .form-input select:not(:placeholder-shown) ~ .form-label{ position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} .form-input select:focus ~ .form-label { position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} */ .settings .userDataOK {color:var(--green);font-weight:bold;font-size:var(--fs-sm);border-top:1px solid var(--border);margin-top:20px;padding-top:10px;} .settings .userDataNO {color:var(--red);font-weight:bold;font-size:var(--fs-sm);border-top:1px solid var(--border);margin-top:20px;padding-top:10px;} .settings select.phone_prefix {display: inline-block; width: 70px; margin-right: 5px;} .settings .flex label {left:80px} .settings input[name="sms_code"] {padding: 10px; border-radius: 5px;} .settings .sms-flex {display:flex;justify-content: flex-start;align-items: center;grid-gap:20px} .settings .email-flex {display:flex;justify-content: flex-start;align-items: center;grid-gap:20px} .settings .hideSms {display:none} .settings .hideEmail {display:none} .settings input#add-check.required {outline:2px solid red !important} .settings .additional-chceck.required {outline:none;border:none !important} .settings .additional-chceck.required::after {position: relative;content:'Pole wymagane';display:block;color:red} .settings .nav-settings {display:block;} .settings .nav-box.active::after {content:"";position: absolute;bottom:0;width:100%;height:2px;background-color: var(--cyan);left:0;transition: all 0.5s;} .settings .nav-box {display:inline-block;padding:10px 0;color:var(--text-color);font-size:var(--fs-lg);text-align:center;position:relative;cursor:pointer;margin-right:30px;} .settings .nav-box::after {content:"";position: absolute;bottom:0;width:0%;height:2px;background-color: var(--cyan);left:0;transition: all 0.5s;} .settings .nav-box:hover::after {content:"";position: absolute;bottom:0;width:100%;height:2px;background-color: var(--cyan);left:0} .settings .foot_note {font-size:var(--fs-xs);color:var(--text-muted);} .payoffs {position: relative;} .payoffs .title{font-size: 2rem; margin: 0 0 20px 0;} .payoffs .payoffs-container {max-width:1500px;width:100%;box-sizing:border-box;margin:20px auto;position:relative;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;} .payoffs-list-elem {display:grid;grid-template-columns: 30% 20% 20% 20% 10%;justify-content: flex-start;align-items: center;padding:5px;border-bottom:1px solid var(--border);} .payoffs-list-elem:nth-child(even) {background-color:rgba(255,255,255,0.02)} .btn-add-payoffs {position: absolute;right:10px;top:10px;background-color:var(--orange);color:black;padding:10px 20px; border-radius:5px;cursor:pointer;text-decoration: none} .payoff-modal-container {width:100%;margin:0 auto;max-height: 60vh; overflow-y: auto; min-height: 200px;} .payoff-modal-header-grid {display:grid;grid-template-columns: 1fr 1fr 1fr 1fr;justify-content: flex-start;align-items: flex-start;grid-gap:20px;font-weight: bold;text-align: left;background-color:var(--dark-grey);padding:5px;border-radius:var(--radius-sm);} .payoff-modal-item-grid {display:grid;grid-template-columns: 1fr 1fr 1fr 1fr;justify-content: flex-start;align-items: center;grid-gap:20px;text-align: left;padding:5px;margin-bottom:5px;border-bottom:1px solid var(--border);} .btn-details-inst-payoff {color:var(--text-color);font-weight:normal;} .payoff-modal-sum-grid {display:grid;grid-template-columns:1fr 1fr 1fr 1fr;justify-content: flex-start;align-items: flex-start;grid-gap:20px;font-weight: bold;text-align: left;padding:5px} .btn-confirm-selected-payoff {position: relative;top:10px;background-color:var(--cyan);color:white;padding:10px 20px;cursor:pointer;text-decoration: none;margin:0 auto;text-align: center;display: inline-block;min-width:250px} .iconInfo i {color:var(--cyan);} .box-width-70 {width:70%;margin:20px auto;position:relative;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;} .box-width-40 {width:43%;margin:0 auto;position:relative;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;} .removeSection {position: absolute;top:0;right:0; background-colo:white;border:1px solid red;color:red;padding:5px 10px;border-radius:5px;font-size:0.8rem;cursor:pointer} .bonus-saldo {position:relative;bottom:0;text-align:center;background-color:var(--bg-main);border-top:1px solid var(--border);padding:20px;width:calc(100% + 40px);margin-left:-20px;} .bonus-saldo-all {position:sticky;bottom:0;text-align:center;background-color:var(--bg-main);border-top:1px solid var(--border);padding:20px 20px 10px 20px;width:calc(100% + 40px);margin-left:-20px;} .bonus-saldo-all span{font-weight:bold;color:var(--orange);font-size: 2rem;} .bonus-saldo-section {padding:20px 0 ;} .bonus-saldo-small-info {text-align: center;font-size:0.8rem;padding-bottom:50px} .installations-wraper {position: relative;width: 100%;min-height: calc(100vh - 340px);z-index: 2 } .installations-wraper .token{font-size:0.8rem;text-align: center;color:grey;position: absolute; right: 10px; top: 10px;} .installations-wraper .title{font-size: var(--font-size-xl); margin: 0 0 20px 0;;position: relative} .installations-wraper .title.text-left{font-size: var(--font-size-normal); margin: 0 0 20px 0;;position: relative;color:white} .installations-wraper .section-title{font-size: 1.2rem; margin:20px 0;text-align: center;} .installations-wraper .installations-container {max-width:1300px;width:100%;box-sizing:border-box;margin:20px auto;position:relative;} .installations-wraper .form-container {text-align: left;max-width:1300px;width:calc(100% - 32px);margin:0 auto} .installations-wraper .section-info {text-align: left;} .installations-wraper .form-container.text-center {text-align:center} .installations {position: relative;width: 100%; } .installations .token{font-size:0.8rem;text-align: center;color:grey;position: absolute; right: 10px; top: 10px;} .installations .title{font-size: var(--font-size-xl); margin: 0 0 20px 0;;position: relative} .installations .title.text-left{font-size: 2rem; margin: 0 0 20px 0;;position: relative} .installations .section-title{font-size: 1.2rem; margin:20px 0;text-align: center;} .installations .installations-container {max-width:1400px;width:100%;box-sizing:border-box;margin:20px auto;position:relative;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:30px;} .installations .form-container {text-align: center;max-width:600px;width:100%;margin:0 auto} .installations .section-info {text-align: left;} .installations-list-elem {display:grid;grid-template-columns: 5% 20% 15% 15% 17% 13% 10% 5%;justify-content: flex-start;align-items: center;padding:10px 5px} .installations-list-elem {border-bottom:1px solid var(--border);} .installations-list-elem:nth-of-type(even) {background-color:rgba(255,255,255,0.02)} .btn-add-installation {background: linear-gradient(120deg, rgba(126,49,23,0.8) 2%, rgba(201,87,8,0.8) 44%, rgba(255,148,45,0.8) 88%);;color:#fff;padding:11px 16px;border-radius: var(--radius-card);;cursor:pointer;font-weight:500;font-size:var(--fs-base);white-space:nowrap;display:inline-block;} .btn-add-installation:hover {background-color:var(--cyan);color:white} .btn-add-payoff {background: linear-gradient(120deg, rgba(126,49,23,0.8) 2%, rgba(201,87,8,0.8) 44%, rgba(255,148,45,0.8) 88%); color: #fff; padding: 11px 16px; border-radius: var(--radius-card); cursor: pointer; font-weight: 500; font-size: var(--fs-base); white-space: nowrap; display: inline-block;} .btn-add-payoff:hover {background-color:var(--cyan);color:white;border:1px solid var(--cyan);} .btn-add-payoff-all {position: relative;background-color:var(--cyan);color:white;padding: 10px 20px; cursor:pointer;text-decoration: none;display: inline-block} .btn-add-payoff-add {position: relative;border:1px solid var(--orange);color:var(--cyan);padding:5px 10px; cursor:pointer;text-decoration: none;display:block;text-align: center;} .btn-add-payoff-inst {position: relative;background-color:var(--cyan);color:white;padding: 10px 20px 10px 4px; cursor:pointer;text-decoration: none;display: inline-block;font-weight: bold} .btn-add-payoff-all {position: relative;background-color:var(--cyan);color:white;padding:10px; ;cursor:pointer;text-decoration: none;display: inline-block;font-weight: bold} .btn-select-all {position: relative;color:white;padding: 0 10px ; cursor:pointer;text-decoration: none;display: inline-block} .btn-select-single {position: relative;padding: 0 10px; cursor:pointer;text-decoration: none;display: inline-block} .btn-select-all input{border:none;border-radius:0} .btn-container-bonus {background-color:var(--cyan);display:inline-block} .iconInfo {color:var(--cyan);margin-top:10px} .installations-list-load .btn-remove i {color:red} .installations-list-load {position: relative;background: #132d3b; color: #fff; border-radius: var(--radius-card); padding: 20px;} .installations-list-load b {color:var(--grey)} .installations-products-load {display:grid;grid-template-columns: calc(45% - 50px) 15% 20% 20% 50px;justify-content: flex-start;align-items: center} .installations-images-load {display:flex;justify-content: flex-start;align-items: flex-start;grid-gap:10px;flex-wrap: wrap;} .installations-images-load .box-images {display:block;flex-basis: 31%;position: relative} .installations-images-load .btn-remove-images {position:absolute;top:-5px;right:-5px;cursor:pointer;background-color:var(--bg-card);border:1px solid var(--border);color:var(--red);padding:2px;border-radius:50%;} .installations-images-load .btn-remove-images i{color:red} .installations-invoices-load {display:block;position: relative; border: 1px solid #cecece; border-radius: 5px; padding: 10px;} .installations-invoices-load .box-invoices {display:grid;grid-template-columns: 90% 10%;justify-content: flex-start;align-items: flex-start;position: relative} .installations-invoices-load .box-invoices a{color:white;text-decoration: none;text-align: left} .installations-invoices-load .btn-remove-invoices {position: relative;;cursor:pointer;} .installations-invoices-load .btn-remove-invoices i{color:red} .installations-invoices-load .title-invoice{font-size:0.9rem;text-align: left;margin-bottom:10px } .instDetailsHeader {display: grid; grid-template-columns: 100px 3fr 200px 1fr;justify-content: flex-start;align-items: flex-start;;padding:5px;font-weight: bold;background-color: #E6E6E6} .instDetailsItems {display: grid; grid-template-columns: 100px 3fr 200px 1fr;justify-content: flex-start;align-items: flex-start;;padding:5px;font-weight: normal} .instDetailsItems:nth-child(odd) {background-color:#EDEDED} .archiveInfo {display: grid; grid-template-columns: 200px 1fr;justify-content: flex-start;align-items: flex-start;;padding:5px} .archiveBonusInfo {display: grid; grid-template-columns: 3fr 5fr;justify-content: flex-start;align-items: flex-start;padding:5px;grid-gap:0 20px} .archiveElemens {display: grid; grid-template-columns: 200px 1fr;justify-content: flex-start;align-items: flex-start;padding:5px} .archiveElementsHeader {display: grid; grid-template-columns: 2fr 1fr 5fr ;justify-content: flex-start;align-items: flex-start;font-weight: bold;grid-gap:10px;} .archiveElementsItems {display: grid; grid-template-columns: 2fr 1fr 5fr ;justify-content: flex-start;align-items: flex-start;padding:5px;grid-gap:10px} .formInfo {background-color: #B80093;color:white;padding:5px} .archiveBonusInfo {;padding:5px} .archiveBonusSum {;color:var(--orange);padding:5px} .grid-inst-details {display: grid; grid-template-columns: 200px 1fr;justify-content: flex-start;align-items: flex-start;;} .totalBonusSum {background-color: #359e80;color:white;display:inline-block;padding:10px;font-size:1.6rem;font-weight:bold} .search-container {display:grid;grid-template-columns: 80% 20%;max-width:600px; width:100%;margin:0 auto 20px auto} .btn-search-dist {background-color:var(--cyan);color:white;padding:10px 20px;cursor: pointer;font-weight: bold} .bonus .bonus-container {max-width:1300px;width:100%;box-sizing:border-box;margin:20px auto;position:relative;border-radius:var(--radius-card);z-index: 2} .bonus .title{font-size:var(--fs-xl);color:var(--text-color);margin:0 0 20px 0;} .bonus .bonus-list-header {display:grid;grid-template-columns: 30px 18% 15% calc(23% - 30px) 12% 17% 15%;justify-content: flex-start;align-items: center;font-weight: bold; border-bottom:1px solid var(--border) ;margin-bottom:10px; padding-bottom:10px;width: 100%;font-size:var(--fs-base);color:var(--text-secondary);} .bonus .bonus-list-elem {display:grid;grid-template-columns:50px calc(30% - 50px) 30% 30% 10%;justify-content: flex-start;align-items: center;padding:10px 0;font-size:var(--fs-base);border-bottom:1px solid var(--border);} .bonus .bonus-list-elem:last-child {border-bottom:none;} .btn-installation-details {color: var(--orange);text-decoration: none; font-size: var(--font-size-normal); font-weight: 500; cursor: pointer; background-color: transparent; border: none;} .btn-installation-details:hover {text-decoration: underline} .btn-bonus-details, .btn-bonus-details-add {color: var(--orange);text-decoration: none; font-size: var(--font-size-normal); font-weight: 500; cursor: pointer; background-color: transparent; border: none;} .btn-bonus-details, .btn-bonus-details-add:hover {text-decoration: underline} .btn-bonus-details:hover, .btn-bonus-details-add:hover {color:var(--orange);} .btn-inst-details {color:var(--text-color);text-decoration:none;} .btn-inst-details:hover {color:var(--orange-light);} .btn-black {color:var(--text-secondary);font-size:var(--fs-sm);text-decoration:none;} .btn-black:hover {color:var(--text-color);} .btn-bonus-details-add {padding:5px 0px;text-align:center;cursor:pointer} .bb-bonus-details {border-bottom:1px solid var(--cyan)} .bonus .bonus-list-header-add {display:grid;grid-template-columns:30px 20% calc(45% - 30px) 20% 15%;justify-content: flex-start;align-items: center;font-weight: bold; border-bottom:1px solid var(--border) ;margin-bottom:10px; padding-bottom:10px;width: 100%;font-size:var(--fs-base);color:var(--text-secondary);} .bonus .bonus-list-elem-add {display:grid;grid-template-columns: 30px 20% calc(45% - 30px) 20% 15%;justify-content: flex-start;align-items: center;padding:5px 0;font-size:var(--fs-base);border-bottom:1px solid var(--border);} .bonus .bonus-list-elem-add:last-child {border-bottom:none;} .bonus .bonus-list-elem-add:nth-child(odd) {background-color:rgba(255,255,255,0.02)} .bonus-add-details span{font-weight:bold} .bonus-add-details {background: #0F262C;;padding:10px 0 10px 50px;margin: 20px 0 0 0 } .bonus-add-details-text {;padding:10px 10px 10px 50px;margin-bottom:20px} .btn-inst-details {color:var(--text-color);text-decoration:none;word-wrap:break-word;} .dlv-order-bonus {color:var(--orange)} .dlv-order-actions {display:flex;flex-direction:column;gap:6px;align-items:flex-start;} .dlv-order-actions .btnSendStatus {margin-top:4px;border-top:1px solid var(--line-color);padding-top:6px;width:100%;} .inst-date-sub {font-size:.78rem;color:var(--grey);} .inst-est-badge {display:inline-block;background:var(--orange);color:#fff;border-radius:12px;padding:2px 9px;font-size:.75rem;font-weight:600;margin-top:5px;} .inst-no-bonus {color:var(--grey);} .bonus-list-grid {display:grid;grid-template-columns: calc(80% - 20px) 20%;justify-content: center;align-items: center} .bonus-list-grid-details {display:grid;grid-template-columns: 258px calc(80% - 298px) 20%;justify-content: flex-end;align-items: flex-end;position: relative} .bonus-list-grid-details bb{border-borom:1px solid var(--cyan)} .installation-list-grid {display:grid;grid-template-columns: 1fr;justify-content: center;align-items: center} .installation-list-grid-details {display:grid;grid-template-columns: 258px calc(80% - 298px) 20%;justify-content: flex-end;align-items: flex-end} .installation-list-grid-details bb{border-borom:1px solid var(--cyan)} .installation-list-elem {display:grid;grid-template-columns:calc(30% - 50px) 12.5% 25% 10% 22.5% 50px ;justify-content: flex-start;align-items: center;padding:10px 0;font-size:1rem;border-bottom: 1px solid #cecece;} .installation-list .bonus-list-grid-details {grid-template-columns: 258px calc(80% - 298px) 23%;} .installation-list-grid.grid-gap-2 {grid-gap:0 20px} .inst-details-grid {display: grid; grid-template-columns: 2fr 2fr 5fr; justify-content: flex-start; align-items: center; padding: 10px 0; font-size: 1rem;} .details-section-one {background-color:#f9fcfb} .details-section-two {background-color:#eff7f5} .details-section-three {background-color:#d7ece6} .fomularzTitle {font-size:1.2rem;font-weight:bold} .bb-cyan {border-bottom:1px solid var(--cyan);padding-bottom:10px;margin-bottom:10px} .bt-cyan {border-top:1px solid var(--cyan);padding-top:10px;margin-top:10px} .gallery-image-link {color:var(--cyan);text-decoration: none} span.form-control-character-count {display: inline;padding: .2em .6em .3em;font-size: 75%;font-weight: bold;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: baseline;border-radius: .25em; background-color: var(--blue); position: absolute;right: 10px;top: -5px;} aspan.form-control-character-count:hover,aspan.form-control-character-count:focus { color: #fff; text-decoration: none; cursor: pointer;} span.form-control-character-count:empty { display: none;} .btn span.form-control-character-count { position: relative; top: -1px;} span.form-control-character-count[href]:hover,span.form-control-character-count[href]:focus { background-color: #31b0d5;} span#charCount{ color:white} .grid-element-inst {display:grid;grid-template-columns:30px calc(75% - 50px) 10% 15%;justify-content: flex-start;align-items: flex-start;grid-gap:10px} .grid-type-elements-container {display:flex;justify-content: center;align-items: center;grid-gap:10px;flex-wrap: nowrap;margin-bottom: 20px} .grid-type-elements-container div{flex-basis: 300px;} .grid-type-elements-container .show-elements {border:1px solid #cecece;padding:10px;cursor:pointer} .grid-type-elements-container .show-elements.selected {background-color:var(--cyan);color:white} .bonus-sum-section {background-color:var(--blue);color:white;display:inline-block;padding:5px 10px;border-radius:5px;} .filterContainerInst {position: relative;display:grid;grid-template-columns: 1fr 1fr 300px;justify-content: flex-start;align-items: flex-end;float: right;top:-40px;;font-size:0.8em;grid-gap:20px} .filterContainerInst select{flex-basis: 300px;width:100%;background-color: transparent;border:1px solid var(--cyan);padding:5px;color:var(--cyan)} .filterContainerInst select option{background-color: transparent;color:black} .filterContainerInst .filter-item-select{flex-basis: 100%;} .status-icon {width:24px;margin-bottom:4px;} .status-icon img {max-width:100%} .dlv-order-status {position: relative;display:flex;flex-direction:column;align-items:flex-start;} .checkPopup {position: absolute; left: 20%; top: 0;} .filterContainer {position: relative;display:flex;justify-content: flex-start;align-items: flex-start;float: right;top:-40px;width:300px;font-size:0.8em} .filterContainer.fcAdd {width:35%;} .filterContainer input{background-color: transparent;border:1px solid #cecece;padding:5px;border-radius:5px} .filterContainer select{flex-basis: 100%;width:100%;background-color: transparent;border:1px solid var(--cyan);padding:5px;color:var(--cyan)} .filterContainer select option{background-color: transparent;color:black} .filterContainer .btn-filter{flex-basis: 20%;background-color: blue;color:white;padding:5px 10px;border-radius:5px;cursor:pointer} .filterContainer .btn-filter-add{flex-basis: 20%;background-color: blue;color:white;padding:5px 10px;border-radius:5px;cursor:pointer} .filterContainer .filter-item-input{flex-basis: 100%;} .filterContainer .filter-item-select{flex-basis: 100%;} #uploadBtn {position: relative;background-color:var(--cyan);color:white;padding:5px 10px; cursor:pointer;text-decoration: none;text-align: center;width: 200px; border: none; margin: 10px 0;font-weight:bold} .uploadBtnInvoice {position: relative;background-color:var(--cyan);color:black;padding:5px 10px; cursor:pointer;text-decoration: none;text-align: center;width: 200px; border: none; margin: 10px 0;} .btn-select-supervisors {position: absolute;right:-1px;top:0px;background-color:var(--cyan);color:black;padding:9.2px 20px; cursor:pointer;text-decoration: none} .btn-select-distributor {position: absolute;width:100%;height:100%;left:0;top:0;cursor:pointer} .btn-select {position: relative;background-color:var(--cyan);color:white;padding:5px 10px; cursor:pointer;text-decoration: none;text-align: center;font-weight: bold} .modal-distributor .nav-settings {display: grid; margin-bottom: 20px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;align-items: center} .modal-distributor .nav-box.active::after {content:"";position: absolute;bottom:0;width:100%;height:2px;background-color: var(--cyan);left:0;transition: all 0.5s;} .modal-distributor .nav-box {display:inline-block; padding:10px 0 ;color:black;font-size:1.6rem;text-align: center;position: relative;cursor:pointer;margin-right:40px;font-weight: bold} .modal-distributor .nav-box::after {content:"";position: absolute;bottom:0;width:0%;height:2px;background-color: var(--cyan);left:0;transition: all 0.5s;} .modal-distributor .nav-box:hover::after {content:"";position: absolute;bottom:0;width:100%;height:2px;background-color: var(--cyan);left:0} .modal-distributor .sec {text-align: left} .modal-distributor .sec img{max-height:200px;max-width:100%} .dist-select-grid {display:grid;grid-template-columns:30% 20% 20% 20% 10%;justify-content: flex-start;align-items: flex-start;text-align: left;padding:5px 0;border-bottom:1px solid #cecece} .dist-bonus-badge {display:inline-block;background:#e87722;color:#fff;font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:7px;white-space:nowrap;cursor:default;vertical-align:middle} .modal-distributor .modal-content {width:60%;} .modal-distributor .modal-tresc {padding:0 20px} .modal-supervisors .modal-content {width:60%;} .modal-supervisors .modal-tresc {padding:20px} .fal-select-grid {display:grid;grid-template-columns: 50px calc(60% - 50px) 15% 15% 10%;justify-content: flex-start;align-items: center;text-align: left;padding:5px 0;border-bottom:1px solid #cecece;} .fal-select-grid img {max-width:80%} .modal-elements .modal-content {width:80%;} .btn-select-elements {position: relative;background-color:transparent;color:var(--cyan);padding:20px 20px;cursor:pointer;text-decoration: none;font-weight:bold;border:2px solid var(--cyan)} .btn-select-elements:hover {position: relative;background-color:var(--cyan);color:white;padding:20px 20px; cursor:pointer;text-decoration: none;font-weight:bold;border:2px solid var(--cyan)} .btn-select-elements i {font-size:1.2rem;} .elem-select-grid-header {display:grid;grid-template-columns: 80px calc(55% - 180px) 20% 15% 10% ;justify-content: flex-start;align-items: center;text-align: left;padding:5px 0;border-bottom:1px solid #cecece;font-size:0.9rem;grid-gap:20px} .elem-select-grid {display:grid;grid-template-columns: 80px calc(55% - 180px) 20% 15% 10% ;justify-content: flex-start;align-items: center;text-align: left;padding:5px 0;border-bottom:1px solid #cecece;font-size:0.9rem;grid-gap:20px} .elem-select-grid img {max-width:50px} .elem-select-grid.selected {background-color:#FFF8EE} .input-group-prepend {display:inline-block} .qty_input {width:50px;background-color:var(--bg-main);color:var(--text-color);text-align:center;border:1px solid var(--border);padding:5px 0;} .btn-number {background-color:var(--cyan);color:white; font-size:1rem;text-align: center;padding:5px 10px;cursor:pointer;border: none;} input[type="number"] { -moz-appearance: textfield;} .modal-falownik .modal-content {width:60%;} .modal-falownik .modal-tresc {padding:0 20px} .product-link {text-decoration:none;color:var(--text-color);} .product-link:hover {text-decoration:underline;color:var(--orange-light);} .bat-select-grid {display:grid;grid-template-columns: 50px calc(60% - 50px) 15% 15% 10%;justify-content: flex-start;align-items: center;text-align: left;padding:5px 0;border-bottom:1px solid #cecece;} .bat-select-grid img {max-width:80%} .modal-battery .modal-content {width:60%;} .modal-battery .modal-tresc {padding:0 20px} .pv-select-grid {display:grid;grid-template-columns: 50px calc(60% - 50px) 15% 15% 10%;justify-content: flex-start;align-items: center;text-align: left;padding:5px 0;border-bottom:1px solid #cecece;} .pv-select-grid img {max-width:80%} .modal-pv .modal-content {width:60%;} .modal-pv .modal-tresc {padding:0 20px} .btn-popup {z-index:10;cursor:pointer} .btn-popup i{color:var(--orange);} .btn-popup-ok {z-index:10;cursor:pointer} .btn-popup-ok i{color:var(--green);} .btn-remove i{color:var(--cyan);} .btn-send-sms {display: inline-block;text-align: center;padding: 10px 20px;color: white;background-color: #667cd1;border-radius: 10px;cursor: pointer;min-width: 100px;position: relative;font-size:1rem;text-decoration: none} .btn-send-sms:hover {background-color:#00b9b9;color:white;} .btn-send-email {display: inline-block;text-align: center;padding: 10px 20px;color: white;background-color: #667cd1;border-radius: 10px;cursor: pointer;min-width: 100px;position: relative;font-size:1rem;text-decoration: none} .btn-send-email:hover {background-color:#00b9b9;color:white;} .pass-strong {display: none;position: relative;font-size: 0.7rem;text-align: left;} #strength_score {display:inline-block;position:relative; font-size:0.6rem; } .required {border:2px solid red !important} input.invoiceField.required {border:2px solid red !important} .error_info {position:absolute;top:-9px;right:10px;background-color:var(--bg-card);border:1px solid var(--red);color:var(--red);padding:0 10px;font-size:var(--fs-xs);border-radius:3px;} .distr .error_info {position:absolute;top:-9px;right:110px;background-color:var(--bg-card);border:1px solid var(--red);color:var(--red);padding:0 10px;font-size:var(--fs-xs);border-radius:3px;} .suprv .error_info {position:absolute;top:-9px;right:110px;background-color:var(--bg-card);border:1px solid var(--red);color:var(--red);padding:0 10px;font-size:var(--fs-xs);border-radius:3px;} .uploadedImages {text-align: left;color:var(--grey)} .btn-back {display:inline-block;padding:10px 30px;;font-size:var(--font-size-normal);text-align: center;text-decoration: none;background: #132d3b; border: 1px solid #0c4a6e;color:var(--grey); border-radius: var(--radius-card);} .btn-not-data {display:inline-block;padding:10px 30px;background-color:#444;color:white;border-radius:10px;font-size:1.2rem;border:none} .btn-grey {display:inline-block;padding:10px 30px;background-color:grey;color:white;font-size:1rem;border:none;cursor:pointer;text-align: center} .btn-green {display:inline-block;padding:10px 30px;background-color:green;color:white;font-size:1rem;border:none;cursor:pointer;text-align: center} .btn-save { display:block;padding:11px 30px;;color:var(--cyan);cursor:pointer; text-align: center; background: linear-gradient(120deg, rgba(126,49,23,0.8) 2%, rgba(201,87,8,0.8) 44%, rgba(255,148,45,0.8) 88%); color: white; font-size: var(--font-size-normal); border: none; cursor: pointer; border-radius: var(--radius-card); } .btn-save:hover {background-color: var(--cyan);color:white} .btn-save-pass {display:inline-block;background-color: transparent;padding:10px 30px;border:1px solid var(--cyan);color:var(--cyan);font-size:var(--font-size-normal);cursor:pointer} .btn-save-pass:hover {background-color: var(--cyan);color:white} .btn-next {display:inline-block;background-color: transparent;padding:10px 30px;border:1px solid green;color:green;font-size:var(--font-size-normal);cursor:pointer} .btn-accept {width:100%;display:block;padding:12px 50px;background: linear-gradient(120deg, rgba(126,49,23,0.8) 2%, rgba(201,87,8,0.8) 44%, rgba(255,148,45,0.8) 88%);color:white;;font-size:var(--font-size-normal);border:none;cursor:pointer;border-radius:var(--radius-card);} .btn-accept.disabled {background:linear-gradient(120deg,#2a2a2a 0%,#4a4a4a 50%,#3a3a3a 100%) !important;color:#fff !important;cursor:not-allowed !important;opacity:.7} .btn-save.disabled {background-color:#132d3b} .btn-gus {background-color: var(--cyan); display: inline-block; ; color: white; padding: 8px 10px; position: absolute; right: -1px;top:0px; cursor: pointer;border-radius: 0 12px 12px 0;} .btn-save[disabled] {background-color:grey} #message {position:fixed;top:-150px;left: 50%; transform: translate(-50%); max-width: 600px; background-color:var(--cyan); border-radius:10px;opacity:1;box-shadow: 0px 0px 65px -5px black;z-index: 999} #message .text{color:white;font-size:1rem; padding:30px 50px;line-height:200%;text-align: center} .btn-add-section { border:none; display: block; font-size: 1rem; text-align: center; padding: 20px 10px; color: var(--blue); background-color:transparent;border:2px solid var(--blue); cursor: pointer; position: relative; font-weight: bold; text-decoration: none; min-width: 100px; box-sizing: unset; margin: 10px 0; width: calc(100% - 20px);} .btn-add-section:hover { border:none; display: block; font-size: 1rem; text-align: center; padding: 20px 10px; color: white; background-color: var(--blue); border:2px solid var(--blue); cursor: pointer; position: relative; font-weight: bold; text-decoration: none; min-width: 100px; box-sizing: unset; margin: 10px 0; width: calc(100% - 20px);} .btn-add-section i {font-size:1.2rem} .btn-cyan-small { border:none; display: inline-block; font-size: 0.8rem; text-align: center; padding: 8px 10px; color: white; border-radius: 5px; background-color: var(--cyan); cursor: pointer; position: relative; font-weight: normal; text-decoration: none; min-width: 100px; box-sizing: unset; margin: 10px 0; max-width: 200px; width: calc(100% - 20px);} .btn-red-small {display:inline-block; text-align: center;padding:7px 20px; color: var(--red); border:2px solid var(--red);border-radius:5px;cursor:pointer;min-width:100px;position:relative;font-size:0.8rem} .btn-red-small:hover { background-color: var(--red);color:white} .btn-cyan { color: var(--cyan); position: relative; text-decoration: none} .btn-red {text-align: center;padding:10px 30px; color: white; background-color: var(--red);border-radius:10px;cursor:pointer;position:relative;font-size:1rem} .btn-red-small:hover { } .btn-ghost-red {text-align: center;padding:10px 30px; color: var(--red); background-color: transparent;cursor:pointer;position:relative;font-size:1rem;border:1px solid var(--red)} .btn-ghost-cyan {text-align: center;padding:10px 30px; color: darkcyan; background-color: transparent;cursor:pointer;position:relative;font-size:1rem;border:1px solid darkcyan} .btn-red-small:hover { } .btn-remove-inst { ;cursor:pointer;padding:0 5px;position: relative;left:0px;top:0px} .btn-remove-inst i{ color: var(--cyan);font-size:1rem} .address {margin:20px auto 30px auto;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;} .address .grid-pickup { display: grid; grid-template-columns: auto minmax(60px , 150px) minmax(60px , 150px); align-items: center; grid-gap: 10px; padding: 5px 0 5px 0;} .address .section-title {font-size:1rem;font-weight:bold;color:var(--text-color);margin-bottom: 5px; padding-bottom: 5px;position: relative} .address .btn-text{display:block;border-bottom:1px solid var(--border);padding:15px 20px;color:var(--text-color);} .address .addShipping{z-index: 9;position: absolute;top: 20px;right: 20px;cursor:pointer} .address .section-title{margin:0 0 20px 0 } .address .form-input input{width:calc(100% - 20px);border:1px solid var(--border);padding:5px;} .address .form-input select{width:calc(100% - 30px);border:1px solid var(--border);padding:6px;background-color:var(--bg-main);color:var(--text-color);font-size:var(--fs-base);} /* .address .form-input {position: relative;margin:10px 0;color:#cecece} .address .form-label {position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s;} .address .form-input input::placeholder { color: transparent;} .address .form-input input{ padding:10px;border-radius: 5px;} .address .form-input input:focus{ border:2px solid #00e42e !important;box-shadow:unset} .address .form-input input:placeholder-shown ~ .form-label{position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s; } .address .form-input input:not(:placeholder-shown) ~ .form-label{ position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} .address .form-input input:focus ~ .form-label { position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} .address .form-input select { width:100%} .address .form-input select::placeholder { color: transparent;} .address .form-input select{ padding:10px;border-radius: 5px;} .address .form-input select:focus{ border:2px solid #00e42e !important;box-shadow:unset} .address .form-input select:placeholder-shown ~ .form-label{position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s; } .address .form-input select:not(:placeholder-shown) ~ .form-label{ position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} .address .form-input select:focus ~ .form-label { position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} .address select.phone_prefix {display: inline-block; width: 70px; margin-right: 5px;} .address .flex label {left:80px !important} */ .address .defaultDlv {position: absolute;background-color:var(--orange);color:white;padding:5px 10px; border-radius:5px;top:-25%;right:0} .address .elem-dni {position: relative} .orders {margin:20px auto 30px auto;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;} .orders .ordered-list-elem {display:grid;grid-template-columns:40% 12% 12% 12% 12% 12%;font-size:var(--fs-sm);padding:10px;background-color:transparent;align-items:flex-start;position:relative;border-bottom:1px solid var(--border);} .orders .grid-order {display:grid;grid-template-columns:100px 1fr;} .orders .priceSmall {font-weight:bold} .orders img {max-height:50px} .orders .section-title {font-size:1rem;font-weight:bold;color:var(--text-color);margin-bottom: 5px; padding-bottom: 5px;position: relative} .orders .ordered-list-elem.canceled {background-color:rgba(238,43,44,0.08);} .order-details {margin:20px auto 30px auto;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;} .order-details .title {font-weight:bold;margin:10px 0;} .order-details .grid-details {display:grid;grid-template-columns:1fr 1fr;} .order-details .ordered-list-elem {display:grid;grid-template-columns:40% 12% 12% 12% 12% 12%;font-size:var(--fs-sm);padding:10px;background-color:transparent;align-items:flex-start;position:relative;border-bottom:1px solid var(--border);} .order-details .grid-order-header {display:grid;grid-template-columns:150px calc(65% - 350px) 15% 10% 10% 200px;font-weight:bold;background-color:var(--dark-grey);padding:5px 10px;border-radius:var(--radius-sm);} .order-details .grid-order {display:grid;grid-template-columns:150px calc(65% - 350px) 15% 10% 10% 200px;padding:5px 10px;border-bottom:1px solid var(--border);align-items:center;} .order-details .priceSmall {font-weight:bold} .order-details img {max-height:50px} .order-details .status1 {background-color:green;color:white;padding:5px 10px; border-radius:5px;position: relative;min-height: 15px; max-width: 100px;} .order-details .status1::before {content:'OPŁACONE';position: absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content: center;align-items: center;font-size:0.8rem} .order-details .status2 {background-color:orange;color:white;padding:5px 10px; border-radius:5px;position: relative;min-height: 15px; max-width: 100px;} .order-details .status2::before {content:'PRZETWAŻANE';position: absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content: center;align-items: center;font-size:0.8rem} .order-details .status3 {background-color:red;color:white;padding:5px 10px; border-radius:5px;position: relative;min-height: 15px; max-width: 100px;} .order-details .status3::before {content:'ANULOWANE';position: absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content: center;align-items: center;font-size:0.8rem} select[name="reason"] {width:calc(100% - 30px);border:1px solid var(--border);padding:6px;background-color:var(--bg-main);color:var(--text-color);font-size:var(--fs-base);border-radius:var(--radius-sm);} .rabatInfo {background-color:#8CFAA6;color:black;padding:3px 5px;border-radius:5px;display:inline-block} .cart .cart-left {background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;} .cart .cart-right {background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;} .cart-all-remove {text-align:center; color:#008080; cursor:pointer;display:inline-block;padding:5px 10px;font-weight:bold} .cart-all-remove:hover {color:var(--red) } .cart .cart-title {font-size: 1rem;font-weight: bold;color: var(--text-color);padding: 10px 0;} .cart .basket_product_grid {display:grid;grid-template-columns:70px calc(55% - 140px) 25% 20% 70px;border-bottom:1px solid var(--border);padding:10px 0;align-items:center;position:relative;} .cart .grid-cart {display:grid;grid-template-columns: 75% calc(25% - 20px) ;justify-content: flex-start;align-items: flex-start;grid-gap: 20px;} .cart .input-group-prepend {display:inline-block} .cart .qty_input {width:50px;background-color:var(--bg-main);color:var(--text-color);text-align:center;border:1px solid var(--border);padding:5px 0;} .cart .btn-number {background-color:var(--btn-yellow);color:black; font-size:1rem;text-align: center;padding:5px 10px;cursor:pointer;border: none;} .cart input[type="number"] { -moz-appearance: textfield;} .cart .cart_price {display: block; font-weight: bold; color: var(--orange);} .cart .price_cj {font-size: 0.8rem;margin-top:10px} .cart .cart-right .title {font-weight:bold;font-size: 1.2rem;margin-bottom:20px} .cart .priceInfo {margin-bottom:10px;} .cart .priceFullInfo {background-color:var(--dark-grey);border-top:1px solid var(--border);padding:20px;position:relative;left:-20px;width:calc(100% + 40px);margin-bottom:0;} .cart .form-input input{width:calc(100% - 20px);border:1px solid var(--border);padding:5px;} .cart .form-input select{width:calc(100% - 30px);border:1px solid var(--border);padding:8.5px 10px;background-color:var(--bg-main);color:var(--text-color);font-size:var(--fs-base);} /* .cart .form-input {position: relative;margin:10px 0;color:#cecece} .cart .form-label {position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s;} .cart .form-input input::placeholder { color: transparent;} .cart .form-input input{ padding:10px;border-radius: 5px;} .cart .form-input input:focus{ border:2px solid #00e42e !important;box-shadow:unset} .cart .form-input input:placeholder-shown ~ .form-label{position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s; } .cart .form-input input:not(:placeholder-shown) ~ .form-label{ position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} .cart .form-input input:focus ~ .form-label { position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} .cart .form-input select { width:100%} .cart .form-input select::placeholder { color: transparent;} .cart .form-input select{ padding:8.5px 10px;;border-radius: 5px;} .cart .form-input select:focus{ border:2px solid #00e42e !important;box-shadow:unset} .cart .form-input select:placeholder-shown ~ .form-label{position: absolute;top: 50%; transform: translateY(-50%);left:10px;transition: all 0.2s; } .cart .form-input select:not(:placeholder-shown) ~ .form-label{ position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} .cart .form-input select:focus ~ .form-label { position: absolute; top: 0; display: block; transition:all 0.2s; color:var(--text-color);background-color:var(--bg-card);padding:0 5px;border-radius:var(--radius-sm);font-size:var(--fs-xs);} .cart select.phone_prefix {display: inline-block; width: 70px; margin-right: 5px;} .cart select.company_phone_prefix {display: inline-block; width: 70px; margin-right: 5px;} .cart .flex label {left:80px !important} */ .cart .btn-delivery-address-book { right:20px; top:13px;display: inline-block; font-size: 0.8rem; text-align: center; color: var(--cyan); cursor: pointer; position: absolute;} .cart .btn-copy-address-book { right:0; top:13px;display: inline-block; font-size: 0.8rem; text-align: center; color: var(--cyan); cursor: pointer; position: absolute;} .btn-product-link { display: block; font-size: 1rem; text-align: left; color: var(--cyan); cursor: pointer; position: relative;text-decoration: none;font-weight:500} .cart .delivery-section {position:relative;border-top:1px solid var(--border);width:100%;left:-20px;padding:0 20px;} .cart .cart-remove {cursor:pointer} .cart .form-input-checkbox {display:inline-block} .cart .form-label-checkbox {display:inline-block} .cart .btn-rabat {position: absolute; background-color: #bcf7c8; padding: 9px 5px; border-radius: 5px; right: -1px; top: 0;color:black;cursor: pointer} .cart .rabatPriceInfo {background-color:#bcf7c8;color:black;padding:20px;left: -20px; width: calc(100% + 0px);position: relative} .cart .rabatSectionPayment {background-color:var(--dark-grey);color:var(--text-color);padding:20px;left:-20px;width:calc(100% + 40px);position:relative;} .cart .rabatError {color:red} .cart .payment_info img{max-width:150px } .cart .dlv_info img{max-width:100px } .cart .dlv_grid_logo{display:grid;grid-template-columns:1fr 1fr;justify-content: flex-start;align-items: center} .cart .payments-grid {display:grid;grid-template-columns: 1fr 1fr;justify-content: flex-start;align-items: center;grid-gap:10px;margin-top:20px} .cart .btn-payments-type {outline:2px solid var(--border-light);padding:5px 10px;border-radius:5px;color:var(--text-secondary);font-size:var(--fs-sm);text-align:center;cursor:pointer;} .cart .btn-payments-type.active {outline:0;background-color:var(--cyan);color:white} .cart .free-dlv-info.active {background-color: #6be407;} .cart .free-dlv-info {background-color: #959595; width: calc(100% + 30px); left: -20px; position: relative; border-radius: 0 0 5px 5px; padding: 5px;} .cart .free-dlv-left {display:inline;font-weight:bold} .cart .grid-paczkomat { display: grid; grid-template-columns: 250px 1fr;margin-bottom:10px;justify-content: flex-start; align-items: center;} .cart .grid-paczkomat .btn-cyan-small{ margin:0} .cart .id_paczkomat2 { width: calc(100% - 12px ); padding: 7px; border: 1px solid #dedede;border-radius:5px} .cart .basketLogin {margin:10px 0; padding-top:20px !important} .cart .cart-delivery {background-color:var(--bg-card);} .cart .delivery-options {display:grid;grid-template-columns:40px 1fr 100px;justify-content:flex-start;align-items:flex-start;padding:20px;border-radius:var(--radius-card);margin:10px 0;border:1px solid var(--border);cursor:pointer;} .cart .delivery-options .dlvSelected {display: none} .cart .delivery-options.active .dlvNotSelected {display: none} .cart .delivery-options.active .dlvSelected {display: grid;} .cart .delivery-options.active { outline:2px solid green} .cart .btn-container {text-align: right;float:right;margin-top:3px} .cart.headCart {} .cart .payment-options {display:grid;grid-template-columns:40px 1fr 100px;justify-content:flex-start;align-items:flex-start;padding:20px;border-radius:var(--radius-card);margin:10px 0;border:1px solid var(--border);cursor:pointer;} .cart .payment-options .paymentSelected {display: none} .cart .payment-options.active .paymentNotSelected {display: none} .cart .payment-options.active .paymentSelected {display: grid;} .cart .payment-options.active { outline:2px solid green} .cart .outlineTop {border-top:1px solid var(--border);width:100%;left:-20px;padding:0 20px;position:relative;} .cart .note-section {position: relative;} .cart .note-section input{width:20px;margin:0 10px 10px 0 } .cart .note-section textarea{height:100px;width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-main);color:var(--text-color);} .cart .note-section .form-input{color:var(--text-color);} .cart-check-email {padding:0 20px} .cart-check-email .btn-blue{background-color: #075FBA;color:white;padding:8px 10px;text-align: center;border-radius:5px;text-decoration: none} .cart-check-email .grid-2t{grid-gap:20px} input[disabled] {background-color:var(--dark-grey);color:var(--text-muted);cursor:not-allowed;} input[readonly] {background-color:var(--dark-grey);color:var(--text-muted);} .btn-payment {background-color: var(--orange); color: white; text-align: center; border-radius: 10px; padding: 20px; font-size: 1.2em; margin-top: 20px;} .btn-payment-login {display:block;background-color: var(--orange); color: white; text-align: center; border-radius: 10px; padding: 10px; font-size: 1em; margin-top: 20px;cursor:pointer} .btn-payment-no-login {display:block;border:1px solid var(--orange); color: var(--orange); text-align: center; border-radius: 10px; padding: 10px; font-size: 1em; margin-top: 20px;cursor:pointer} .modal-basket-login {padding:0 20px} .dlv-modal {display:none;z-index: 1000;position: fixed;left: 0;top: 0;width: 100%;height: 100%; background-color: rgba(0, 0, 0, 0.5);} .dlv-modal .slider_dlv{position:fixed;width:40%;background-color:var(--bg-card);border:1px solid var(--border);top:50%;left:50%;margin:0 auto;z-index:12;transform:translate(-50%,-50%);padding:20px;border-radius:var(--radius-card);padding-bottom:53px;} .dlv-modal .close-modal-delivery-sending { position: absolute; top: -2px; right: 0px; font-size: 2rem;} .dlv-modal .close-modal-delivery-address { position: absolute; top: -2px; right: 0px; font-size: 2rem;} .dlv-modal .select-modal-delivery {position:absolute;bottom:0;background-color:var(--bg-card);border-top:1px solid var(--border);z-index:16;width:calc(100% - 40px);text-align:center;padding:10px 0;} .dlv-modal .modal-delivery-scroll {max-height:55vh;overflow:auto;padding-right:5px;} .dlv-modal .box-dlv {border:1px solid var(--border);padding:10px;height:100%;border-radius:var(--radius-sm);cursor:pointer;position:relative;margin-bottom:10px;} .dlv-modal .box-dlv.selected { border: 3px solid var(--green);} .dlv-modal .dlvDefaultCart.active { background-color: var(--green); color: white;} .dlv-modal .dlvDefaultCart { width: calc(100% + 20px); left: -10px; position: relative; top: -10px; border-radius: 6px 6px 0 0; text-align: center; padding: 0px 0 3px 0; font-size: 0.8rem; height: 21px;} .dlv-modal.show-modal {display:block} .section-offer-box {position: relative;text-align: center;padding-bottom:100px;margin-bottom:200px} .section-offer-box .section-box{margin:0 auto;width:80%;display:flex;flex-wrap: wrap; grid-gap: 50px 0;margin-top:100px} .section-offer-box .section-title{;position: relative;font-size: var(--font-size-xl); color: white;display:inline-block} .section-offer-box .section-title span {color:var(--red)} .section-offer-box .section-title::after{content:'';position:absolute;bottom:-110px;left:50%;right:50%;width:100%;height:100%;max-width:80%;background-image: url('/img/claw.png');background-repeat: no-repeat;background-size: contain;transform: translate(-50%, -50%);} .section-offer-box .offer-box-item{position: relative;} .section-offer-box .offer-box-foto{position: relative; max-height:150px;z-index: 10 } .section-offer-box .offer-box-content{position: relative;} .section-offer-box .offer-box-title{position:relative;color:white;font-size:2.2rem;font-weight:bold;margin-bottom:10px;text-align: center} .section-offer-box .offer-box{flex-basis: auto;position: relative;min-width: 20%;text-decoration: none;color:white} .section-offer-box .offer-box img{max-height:125px;z-index: 11;position: relative;transition: all 0.3s;} .section-offer-box .offer-box::after {content:'';position:absolute;bottom:-110px;left:50%;right:50%;width:100%;height:100%;max-width:70%;background-image: url('/img/menu-shine.png');background-repeat: no-repeat;background-size: contain;transform: translate(-50%, -50%);z-index: -1;opacity: 0.2;} .section-offer-box .offer-box-item:hover > .offer-box-foto img{transform: scale(1.2)} .section-offer-details {position: relative;text-align: center;padding-bottom:100px} .section-offer-details .section-title{position: relative;font-size: var(--font-size-xl); color: white;display:inline-block} .section-offer-details .section-title span {color:var(--red)} .section-offer-details .section-title::after{content:'';position:absolute;bottom:-110px;left:50%;right:50%;width:100%;height:100%;max-width:80%;background-image: url('/img/claw.png');background-repeat: no-repeat;background-size: contain;transform: translate(-50%, -50%);min-width: 550px;} .section-offer-details .offer-details-container {width:70%;margin:50px auto 0 auto;padding:50px;background-color:black} .section-offer-details .offer-details-grid {display:grid;grid-template-columns: 20% calc(65% - 60px) 15%;justify-content: center;align-items: center;grid-gap:30px;border-bottom: 1px solid #ffffff40;} .section-offer-details .offer-details-name {color:var(--orange);text-align: left;font-size:2.5rem} .section-offer-details .offer-details-subname {color:white;text-align: left;font-size:1.5rem} .section-offer-details .offer-details-price {font-size: 3rem; color: var(--red);} .section-map #map {width: 100%; height: 90vh; } .section-footer {position:relative;padding:50px 0;background-color:var(--bg-sea);border-top:1px solid var(--border);color:var(--text-secondary);margin-top:50px;} .section-footer img{max-width:300px;margin-bottom:20px} .section-footer .footer-container{position: relative;max-width:80%;margin:0 auto;display:block;text-align: center;} .user-container {z-index: 2;position: relative;min-height: 65vh;} .section-offer-box-nav {position: relative;margin-bottom:30px} .section-offer-box-nav .offer-box-nav{display: flex; justify-content: center; align-items: center;flex-basis: 100%;height:100px;background-color: black;text-decoration: none;overflow: hidden;position: relative; border: 2px solid black; } .section-offer-box-nav .offer-box-item-nav{position: relative;height:60%;width:60%;background-position: center;background-size: contain;background-repeat: no-repeat;transition: all 0.3s;} .section-offer-box-nav .section-box-nav{display:flex;justify-content: flex-start;align-items: center;grid-gap: 0 10px;} .section-offer-box-nav .offer-box-title-nav{display:flex;width:100%;height:100%;justify-content: center;align-items: center;color:white;text-decoration: none;z-index: 2;position: absolute;transition: all 0.3s;top:0} .section-offer-box-nav .offer-box-title-nav h3{text-decoration: none} .section-offer-box-nav .offer-box-item-nav::before{position: absolute;content:"";width:100%;height:100%;top:0;left:0;background-color:RGB(0,0,0,0.4);z-index: 1;transition: all 0.3s;} .section-offer-box-nav .offer-box-nav:hover > .offer-box-title-nav{top:-100px} .section-offer-box-nav .offer-box-nav:hover .offer-box-item-nav::before {background-color:RGB(0,0,0,0.0)} .section-offer-box-nav .offer-box-nav:hover .offer-box-item-nav {transform: scale(1.4)} .section-offer-box-nav .offer-box-nav:hover {border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;animation: borderRotate var(--d) linear infinite forwards;background-color:#121212} .blue-icon {color:#099bd7} .gold-icon {color:#d77409} .green-icon {color:#2ab537} .text-yellow {color:var(--orange);} .text-red {color:var(--red);} .btn-blue-normal {font-size:2em; background-color:#0B74AE;color:white;padding:5px 20px;display: inline-block;font-weight:bold} .footer-content {background-color:var(--bg-sea);} /* .footer-content .language-box {position: absolute;display: inline-block;right: 20px;top: 10px;z-index: 13;text-align: left;} .footer-content .dropbtn { background-color: white; color: black;} .footer-content .dropbtn-footer { background-color: white; color: black;} .footer-content .dropdown-content-language { width: 200px;min-width:200px} */ .footer-content header .container { width: 100%;} footer {background-color:var(--bg-footer);;padding:10px 0;min-height:100px;margin-top:30px;z-index: 2;position: relative} .footer-glow {position: relative} .footer-glow::before { content: ''; left: 0; position: absolute; bottom: -60px; width: 100%; height: 200px; background-image: url('/img/bg/bottom_light.webp'); background-repeat: no-repeat; background-position: top; background-size: 100%; z-index: 0; } footer .countries {border-bottom:1px solid var(--border);padding-bottom:5px;} footer .countries ul {list-style:none; padding:0; margin:0; display: flex; justify-content: center;align-items: center} footer .countries li {display:inline;padding: 5px 10px;} footer .footer-logo img {max-width:50%} footer .footer-text {color:#fff; text-align: left; padding-top:50px} footer ul {list-style:none;padding:0;margin:0} footer .footer-offer {display: inline-flex;justify-content: space-between;} footer .footer-link {color:#b1b1b1; text-decoration:none;font-size:0.8rem;position:relative} footer .footer-link:hover {color:var(--orange); text-decoration:underline;} footer .footer-offer-title {color:#b1b1b1; font-weight:700} footer .text-center {text-align:center;font-size:var(--fs-sm);color:var(--text-muted);padding:10px 0;} footer .menu-container {display: flex;justify-content: center;width: 90%;margin: 0 auto;margin-top:30px;grid-gap:50px} footer h3 {font-size:0.8rem; color:white; font-weight:bold;text-decoration:none} footer .footer-box {position:relative;flex-basis: 100%} footer .footer-box a {text-decoration:none;} footer .footer-grid-grey {display:grid;grid-template-columns: 300px 1fr;grid-gap:20px;justify-content: flex-start;align-items: flex-start} footer .footer-contact-box {margin-top: 30px;;font-size:0.8em} footer .footer-contact-box-text {color:white} footer .footer-contact-box .grid-20-80 {justify-content: center;align-items: center} footer .footer-contact-box i {font-size:2rem;color:var(--orange)} footer .footer-phone {color:white;font-weight:bold;font-size:1.2rem} footer .footer-phone .footer-link{color:var(--orange);font-size:1rem} footer .supervisor-text{color:white;font-size:0.8rem;line-height: 150%} .footer-menu {display:flex} .grid-20-80 {display:grid; grid-template-columns: 20% calc(80% - 20px);align-items: flex-start; } #mobile-footer {opacity: 0;visibility: hidden;width: 100%;height: 100vh;left: 0;top: 0;background-color: RGBA(0,0,0,0.9);color: #fff;z-index: 9;display: block;position: fixed;transition: opacity .35s, visibility .35s, height .35s;;overflow-x: hidden;overflow-y: auto} .open {opacity: 1 !important;visibility: visible !important;display: block !important;overflow: auto;} #mobile-footer .mobile-menu {margin-top:0px;padding-bottom:60px} .btn-expand-arrow-footer {display:none} .footer-new {position: absolute;font-size: 0.6rem;left: 15%;background-color: var(--orange);color: black;padding: 2px;border-radius: 3px;top: -80%;} .header-footer {display:grid; grid-template-columns: 10% 89%; align-items: center;padding:10px;grid-gap:1%} .header-footer img{max-width:120px} .header-footer-nav {margin:0;padding:10px 20px;text-decoration:none;color:var(--text-color);display:block;border-right:1px solid var(--border);} .header-footer-nav:hover {text-decoration:none;border-bottom:5px solid black;} .footer-grid {display:none !important} .footer section {margin: 20px 0;} .footer .offer-title {font-size: 1rem;font-weight: bold;color: var(--text-color);padding: 10px 0;} .footer .offer-category select {padding:10px;border:1px solid var(--border);max-width:300px;margin:10px 0;width:90%;background:var(--bg-main);color:var(--text-color);} .footer .config-price select {padding:10px;border:1px solid var(--border);max-width:300px;margin:10px 0;width:90%;background:var(--bg-main);color:var(--text-color);} .footer .footer-calc input {padding:10px;border:1px solid var(--border);width:280px;margin:10px 0;background:var(--bg-main);color:var(--text-color);} .footer .footer-calc select {padding:10px;border:1px solid var(--border);width:300px;margin:10px 0;background:var(--bg-main);color:var(--text-color);} .footer .footer-calc .calculate {display:block;width: 300px;max-width:unset;padding:10px 0 } .footer .footer-calc .calculatedValue {display:block;margin:10px 0 ;padding:10px 0;} .footer-menu {margin-top:20px} .sub-header-footer {width:100%;max-width: 1500px; margin: 0 auto 20px auto;display:flex;text-align: center;margin-bottom: 5px;padding-bottom: 30px;position: relative} .sub-header-footer::after {content:"";position:absolute;left:0;bottom:0px;border-bottom: 3px solid gray;height:3px;width: calc(100vw - 8px); transform: translateX(-50vw); margin-left: 50%;} .sub-header-footer-2 {width:100%;display:block;color:black;text-align: left;margin-top:20px} .nav-footer-link {color:var(--text-secondary);padding:10px 15px;text-decoration:none;font-size:var(--fs-sm);border-right:1px solid var(--border);} .nav-footer-link:hover {color:var(--orange);border-bottom:3px solid var(--orange);margin-bottom:-3px;} .nav-footer-link-2 {color:var(--text-secondary);font-weight:bold;padding:10px 5px;text-decoration:none;border-bottom:1px solid var(--border);font-size:var(--fs-sm);display:block;align-items:center;} .nav-footer-link-2:hover {color:var(--orange);border-bottom:5px solid var(--orange);text-decoration:none;} .nav-footer-link-2:nth-child(n+6) {border-top:none} .nav-footer-link-2:nth-child(n+6) {border-top:none} .container-footer-right {padding-left:0px} .container-footer-right .i-popup {margin-left:3px} .nav-footer-link-3 {color:var(--text-color);font-weight:bold;background-color:var(--dark-grey);padding:10px 5px;text-decoration:none;border-bottom:1px solid var(--border);font-size:var(--fs-sm);border-top:1px solid var(--border);display:block;align-items:center;} .nav-footer-link-3:hover {color:var(--orange);border-bottom:5px solid var(--orange);text-decoration:none;} .mob-nav-subfooter {} .onlyMob {display:none} .footer select {background-color:var(--bg-main);color:var(--text-color);border:1px solid var(--border);} .footer .promoTitleCompany{background-color: var(--company);color: white;padding: 10px;margin-bottom: 10px;} .footer .promoTitlePrivate{background-color: var(--user);color: white;padding: 10px;margin-bottom: 10px;} .active-fl {text-decoration: none; border-bottom: 5px solid black;} .active-fl2 {text-decoration: none; border-bottom: 5px solid black;} .social-box-icon {display:inline-block; padding:0 10px} .social-icon {color:white;} .social-icon i { font-size:1.5rem} .social-media {display: flex;justify-content: end;margin-top: 30px;} .social-icon:hover {color:var(--orange);} .currentCategory {background-color:var(--dark-grey);color:var(--text-secondary);padding:4px;border-radius:var(--radius-sm);} .categoryBack {color:var(--orange);font-weight:bold;display:block} .elements .elements-title{position: relative;margin:20px 0 ;font-weight:bold;font-size:1.2rem} .elements .elements-content{margin:20px 0 50px 0 } .thumbnails {position:relative;background-color:var(--bg-nav);border-bottom:1px solid var(--border);font-size:var(--fs-sm);} .thumbnails a{color:var(--text-muted);text-decoration:none;font-size:var(--fs-sm);} .thumbnails-container {max-width:1500px;position: relative;margin:0 auto;text-align: left;padding:10px} .linearGradient::after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));; pointer-events: none;border-radius:10px} .linearGradientSlider::after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));; pointer-events: none;} .text-white-big {font-size:3rem; color:white;} .text-white-medium {font-size:2rem; color:white;} .text-white-normal {font-size:1rem; color:white;} .text-white-small {font-size:0.8rem; color:white;} .text-white-tiny {font-size:0.7rem; color:white;} .text-white-micro {font-size:0.6rem; color:white;} .text-big {font-size:4rem; } .text-medium {font-size:2.5rem;} .text-middle {font-size:2rem;} .text-normal {font-size:1rem;} .text-small {font-size:0.8rem; } .text-tiny {font-size:0.7rem;} .text-micro {font-size:0.6rem; } .font-big {font-size:3rem; } .font-medium {font-size:2rem;} .font-middle {font-size:1.5rem;} .font-normal {font-size:1rem;} .font-small {font-size:0.8rem; } .font-tiny {font-size:0.7rem;} .font-micro {font-size:0.6rem; } .text-1-2 {font-size:1.2rem; } .text-1-4 {font-size:1.4rem; } .text-1-6 {font-size:1.6rem; } .text-1-8 {font-size:1.8rem; } .t-100 {font-weight: 100} .t-200 {font-weight: 200} .t-300 {font-weight: 300} .t-500 {font-weight: 500} .t-700 {font-weight: 700} .t-900 {font-weight: 900} .text-italic {font-style: italic} .text-blue {color:#3d759c} .text-orange {color:var(--orange)} .text-quote {position: relative;} .text-quote::before {position: absolute;content: '“';width:60px;height:60px;left:-80px;top:-40px;font-size:5rem;color:var(--brown);font-weight: bold} .text-quote::after {position: absolute;content: '“';width:60px;height:60px;right:-80px;bottom:-40px;font-size:5rem;color:var(--brown);transform: rotate(180deg);font-weight: bold} .grid-2 {display:grid; grid-template-columns: 1fr 1fr ;align-items: flex-start;justify-content: flex-start} .grid-4 {display:grid; grid-template-columns: 1fr 1fr 1fr 1fr;align-items: flex-start;justify-content: flex-start} .grid-80-20 {display:grid; grid-template-columns: 90% 10%;align-items: center;justify-content: flex-start} .grid-gap-1 {grid-gap:10px} .grid-gap-2 {grid-gap:20px} .grid-gap-3 {grid-gap:30px} .grid-gap-4 {grid-gap:40px} .grid-gap-5 {grid-gap:50px} .grid-gap-0-2 {grid-gap:0 20px} .grid-3t {display:grid; grid-template-columns: 1fr 1fr 1fr;align-items: self-start; } .flex {display:flex} .grid {display:grid} .bb {border-bottom:1px solid var(--border);} .bt {border-top:1px solid var(--border);} .bt-w {border-top:1px solid white} .br {border-right:1px solid var(--border);} .mb-05 {margin-bottom:0.5rem} .mb-1 {margin-bottom:1rem} .ml-1 {margin-left:1rem } .ml-2 {margin-left:2rem} .ml-50 {margin-left:50px} .mb-20 {margin-bottom:20px} .mb-2 {margin-bottom:2rem} .mb-2-f {margin-bottom:2rem !important} .mr-2 {margin-right:2rem} .mr-1 {margin-right:1rem} .mb-3 {margin-bottom:3rem} .mb-4 {margin-bottom:4rem} .mb-5 {margin-bottom:5rem} .mb-6 {margin-bottom:6rem} .mb-8 {margin-bottom:8rem} .mt-03 {margin-top:0.3rem} .mt-1 {margin-top:1rem} .mt-10 {margin-top:10px} .mb-10 {margin-bottom:10px} .mt-2 {margin-top:2rem} .mt-3 {margin-top:3rem} .mt-4 {margin-top:4rem} .mt-5 {margin-top:5rem} .mt-6 {margin-top:6rem} .mt-8 {margin-top:8rem} .mt--10 {margin-top:-10px !important} .mt--9 {margin-top:-9px !important} .mt--5 {margin-top:-5px !important} .pb-03 {padding-bottom:3px} .pb-05 {padding-bottom:5px} .pb-06 {padding-bottom:6px} .pb-1 {padding-bottom:1rem} .pb-2 {padding-bottom:2rem} .pb-04 {padding-bottom:0.4rem} .pb-10 {padding-bottom:10px} .pb-20 {padding-bottom:20px} .pt-1 {padding-top:1rem} .pt-10 {padding-top:10px} .pl-1 {padding-left:1rem} .pl-2 {padding-left:2rem} .pl-10 {padding-left:10px} .pt-2 {padding-top:2rem} .pr-1 {padding-right:1rem} .pr-2 {padding-right:2rem} .pr-3 {padding-right:3rem} .pr-10 {padding-right:10px} .pr-50 {padding-right:50px} .pr-100 {padding-right:100px} .p1 {padding:1rem;} .p2 {padding:2rem;} .p5 {padding:5px;} .p10 {padding:10px;} .p20 {padding:20px;} .p30 {padding:30px;} .text-red {color:var(--red);font-weight:bold} .text-cyan {color:var(--cyan);font-weight:bold;text-decoration: none} .text-0-8 {font-size:0.8rem;} .text-1 {font-size:1rem;} .text-1-2 {font-size:1.2rem;} .text-1-4 {font-size:1.4rem;} .text-1-6 {font-size:1.6rem;} .disabled {background-color:#132d3b} .bold {font-weight:bold} .dark-grey-box {background-color:var(--dark-grey); color:white;border-radius:10px; padding:20px; } .hide {display:none} .hide-f {display:none !important} .text-center {text-align: center} .text-left {text-align: left} .text-right {text-align: right} .pr {position: relative} .oh {overflow: hidden} .lh-2 {line-height:200%} .w100 {width:100% !important} /* NEW */ .w50 {width:50% } /* NEW */ .w60 {width:60% } /* NEW */ .w70 {width:70% } /* NEW */ .w82 {width:82% } /* NEW */ .mw150 {min-width:150px} .db {display:block} .dib {display:inline-block} .btn-container-right {position: relative;text-align:right } .btn-container-center {position: relative;text-align:center} .ar {position:relative; margin-right:0;margin-left:auto} /* NEW */ .al {position:relative; text-align: left} /* NEW */ .link-orange {text-decoration:none;font-size:1rem;color:var(--orange);position: relative;display:block} .link-cyan {text-decoration:none;font-size:1rem;color:var(--cyan);position: relative;display:block} .link-orange:hover {text-decoration: underline} .link-text {text-decoration:none;font-size:0.8rem;color:var(--dark-grey);} .link-text:hover {text-decoration:underline;} .link-pdf {text-decoration:none;font-size:1rem;color:var(--orange);font-weight: bold} .link-pdf:hover {text-decoration:underline;} .auto-rows {grid-auto-rows: 1fr;align-items: unset} .h100 {height:100%;} .grid-cb {display:grid; grid-template-columns: 20% 80%; justify-content: center;align-items: center} .disabledBtn {background-color:grey !important;color:white !important} .disabledBtnFav {color:grey !important} .fr {float:right} .orange {color:orange} .dark-red {color:var(--red)} .emptyInfo {background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px;} .backToTop {position:sticky;bottom:20px;right:0;background-color:var(--bg-card);border:1px solid var(--border);color:var(--orange);border-radius:50%;padding:10px;box-shadow:0 0 35px -10px rgba(0,0,0,0.6);left:100%;display:inline-block;margin-bottom:20px;} .backToTop:hover {color:var(--red);} .hideBack {display:none !important} .gr13 {grid-row:1/3} .gr12 {grid-row:1/2} .gc914 {grid-column:9/14} .gc913 {grid-column:9/13} .v-center {display:block;align-items: center;height:100%} .v-center span {color:white} p {margin:0} .tar {text-align: right} .checkCont input[type="checkbox"],.checkCont input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;} .mh60 {min-height:60px} .mh80 {min-height:80px} .mh100 {min-height:100px} .mh150 {min-height:150px} .mh200 {min-height:200px} .mh300 {min-height:300px} .mh500 {min-height:500px} .pt-0 {padding-top:0} .colorYellow {color:#ff9700} .colorGreen {color:#3f9d3d} .colorBlue {color:#056eb0} .va-c {align-items: center} .btn-text {text-decoration: none;color:var(--cyan);cursor:pointer} .btn-text-white {text-decoration: none;color:var(--white);font-size:0.8rem} .btn-text-orange {text-decoration: none; color: #e05c0b; font-weight: bold;} .btn-text-cyan {text-decoration: none; color: var(--cyan); } .bg-white {background-color:var(--bg-card);} .to-right {float:right} .grid-2t {display:grid; grid-template-columns: 1fr 1fr;align-items: start; } .showMob {display:none} .flex-basic-60 {flex-basis: 60%;position: relative} .checkCont {display: inline-block;position: relative;padding-left: 35px;margin-bottom:0;cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .checkmark {position:absolute;top:-1px;left:0;height:20px;width:20px;background-color:var(--bg-main);border:2px solid var(--orange);border-radius:5px;} .checkCont:hover >.checkmark {background-color:var(--dark-grey);} .checkCont input:checked ~ .checkmark { background-color: #e96e10;} .checkCont .checkmark:after { content: ""; position: absolute; display: none;} .checkCont input:checked ~ .checkmark:after { display: block;} .checkCont .checkmark:after { left: 6px;top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} .btn-text-black-regular {text-decoration: none;color:var(--cyan);font-size:1rem;text-transform: lowercase; margin-top:10px;position: relative;display:block} .warning-box {padding:30px 20px 30px 85px;text-align:left;position:relative;font-size:var(--fs-base);display:flex;background-color:#132d3b;border: 0.5px solid #24444B;;border-radius:var(--radius-xl);} .warning-box .warning-icon{position:absolute;;height:100%;width:70px;top:0;left:0; border-radius: 7px 0 0 7px;display: flex;justify-content: center;align-items: center;font-size: 2rem;color: white;} .warning-box .title{text-align: center;} .warning-box .v-center{color:var(--grey);font-size:1rem} .warning-box-span {grid-column: 2/2 span;} .modal-info .warning-box {display:block} .loadeContainer {width:100%;min-height:100px; display: flex;align-items: center;justify-content: center} #nav-icon3 { width: 40px; height: 40px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } #nav-icon3 span { display: block; position: absolute; height: 9px; width: 100%; background: #d3531a; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #nav-icon3 span:nth-child(1) { top: 0px; } #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) { top: 18px; } #nav-icon3 span:nth-child(4) { top: 36px; } #nav-icon3.open span:nth-child(1) { top: 18px; width: 0%; left: 50%; } #nav-icon3.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #nav-icon3.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #nav-icon3.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; } @property --angle { syntax: ''; initial-value: 90deg; inherits: true; } @property --gradX { syntax: ''; initial-value: 50%; inherits: true; } @property --gradY { syntax: ''; initial-value: 0%; inherits: true; } @keyframes borderRotate { 100% { --angle: 420deg; } } @keyframes borderRadial { 20% { --gradX: 100%; --gradY: 50%; } 40% { --gradX: 100%; --gradY: 100%; } 60% { --gradX: 50%; --gradY: 100%; } 80% { --gradX: 0%; --gradY: 50%; } 100% { --gradX: 50%; --gradY: 0%; } } .dots-container {position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);opacity: 0;visibility: hidden;transform: scale(1.1);transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;z-index:9;} .show-dots {opacity: 1;visibility: visible;transform: scale(1.0);transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;z-index:999} .dots-close {position:absolute;right:0;margin:20px;cursor: pointer;z-index:10;top:0} .dots-content {background-color:var(--bg-card);border-left:1px solid var(--border);width:30%;right:0;position:absolute;height:calc(100% - 40px);padding:20px;overflow:auto;color:var(--text-color);} .dots-menu {text-align: center} .dots-title {font-size:var(--fs-xl);padding:20px 10px;border-bottom:1px solid var(--border);cursor:pointer;display:block;text-decoration:none;color:var(--text-color);background-color:var(--bg-card);} .dots-category {text-align: center;padding:10px 5px;background-color:var(--red);color:white;cursor:pointer;display: block;text-decoration: none;color:white} .dots-items {display:grid;grid-template-columns: 10% calc(80% - 50px) 10%;justify-content: flex-start;align-items: center;grid-gap:20px;cursor:pointer;color:white;border-bottom:1px solid white;text-decoration: none} .dots-img img{max-width:100%} .dots-items .dots-name{} .dots-category:hover {background-color:var(--orange2);color:white;} .dots-title:hover {background-color:var(--dark-grey);color:var(--orange-light);} .modal-category {position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);opacity: 0;visibility: hidden;transform: scale(1.1);transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;z-index:9;} .modal-category-content {background-color:var(--bg-card);border-right:1px solid var(--border);width:30%;max-width:400px;left:0;position:absolute;height:calc(100% - 40px);padding:20px;overflow:auto;} .modal-category-close {position:absolute;right:0;margin:10px;cursor:pointer;z-index:10;top:0;} .modal-category-close i {font-size:1.5rem;} .modal-category-items {display:block;cursor:pointer;color:var(--text-color);border-bottom:1px solid var(--border);text-decoration:none;padding:10px 0;} .show-modal-category {opacity: 1;visibility: visible;transform: scale(1.0);transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;z-index:999} .modal {position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);opacity: 0;visibility: hidden;transform: scale(1.1);transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;z-index:9;} .close-button {position: absolute; right: 0; margin: 20px; text-align: center; cursor: pointer; z-index: 10; top: -20px; font-size: 5rem; color: var(--cyan);} .close-button:hover {} .close-button-bonus-info {position:absolute;right:0;margin:20px;width:1.5rem;line-height:1.5rem;text-align:center;cursor:pointer;border-radius:0.25rem;background-color:var(--dark-grey);color:var(--text-color);z-index:10;top:0;} .close-button-bonus-info:hover {background-color: darkgray;} .show-modal {opacity: 1;visibility: visible;transform: scale(1.0);transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;z-index:999} .show-modal.modal-i .info-ghost-box{padding: 10px 20px 10px 85px;font-size: 2rem;text-align: center;} .modal-content {width:720px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);display:block;} .modal-text {text-align:center;background-color:var(--bg-card);border-radius:var(--radius-card);} .modal .powiadomienie { } .modal .modalScroll { max-height: 70vh; overflow: auto;height:75vh} .modal .msg-modal {text-align: left; padding:50px 20px 20px 20px;} .modal .msg-modal .temat_wiadomosci {margin-bottom:20px} .modal .title {font-weight:bold;font-size:1.2rem;margin:20px 0 } .modal-bonus-info .modal-content {width:400px} .modal-bonus-info .modal-tresc {text-align: left} .modal-bonus-info .title {font-weight: bold;font-size: 1.8rem; padding: 20px 0;background-color:#047857;border-radius:7px 7px 0 0 ;margin:0;color:white} .modal-bonus-info .title::after {position: absolute;width:20px; height:20px;content:'🎉';left:20px;font-size:4rem;top:0} .modal-bonus-info .bonus-title {font-weight: bold;font-size: 1.6rem; } .modal-bonus-info .bonus-value {font-weight: bold;font-size: 2.0rem; } .modal-bonus-info .bonus-info {font-weight: normal;font-size: 1rem; } .modal-bonus-info .close-button { margin: 20px; color: white; font-weight: bold; font-size: 3rem; background-color: transparent} .modal-bonus-info .close-button:hover { background-color: transparent} .modal-info .modal-content { background-color: #000000c9; border-radius: 3rem; display: block} .modal-info .modal-text { background-color:transparent} .modal-info .title { background-color:transparent;position: relative;width: 90%; margin: 20px 0 20px auto; text-align: left;position: relative;padding-bottom: 20px;font-size: 3rem} .modal-info .title::after {content:"";position: absolute;bottom:0;width:100%;height:2px;background-color: var(--cyan);left:0;transition: all 0.5s;} .modal-info .tc {text-align: left;padding-left:73px} .modal-info .modal-tresc.tc.p2 {padding-top:0} #mobile { opacity: 0; visibility: hidden; width: 100vw; height: 100vh; left: 0; top: 0; background-color: RGBA(0,0,0,0.9); color: #fff; z-index: 99; display: none; position: fixed; transition: opacity .35s, visibility .35s, height .35s;} .open { opacity: 1 !important; visibility: visible !important; display: block !important; } #mobile .menu-item { font-size: 4vw; color: white; padding: 10px 5px 10px 40px; text-transform: uppercase; display: inline-block; text-decoration: none;} #mobile ul, #mobile li { list-style: none;} #mobile .mobile-menu { position: relative; width: 100%; text-align: left; margin-top: 10%; display: inline-block; z-index: 2; left: 0%;} #mobile ul, #mobile li { list-style: none; padding: 0; margin: 0; margin-top: 0px;} .nav-hover-container-mob {background-color:var(--bg-main);color:var(--text-color);} .nav-hover-container {display:block;transition:opacity 0.2s,visibility 0.2s;visibility:hidden;opacity:0;position:relative;width:100%;background-color:var(--bg-page);top:0;} .dropdown-icon-link-mob { font-size: 4vw; color: white; padding: 5px 5px 5px 50px; text-transform: uppercase; display: block; text-decoration: none; } .navSticky {position:fixed;top:0;z-index:99;background-color:var(--bg-nav);border-bottom:1px solid var(--border);width:100%;grid-gap:1%;box-shadow:0 4px 20px rgba(0,0,0,0.4);} .navSticky .headerSticky { display: flex; align-items: center; padding: 10px; grid-gap: 1%;;} .navSticky .btn-nav-sticky { display: inline-block;text-align: center;text-decoration: none;color: var(--blue2);font-size:0.8rem;width:100%;position: relative;cursor:pointer} .navSticky .btn-nav-sticky:hover { color: var(--blue2);} .navSticky .btn-nav-sticky i{ font-size: 1.2rem;width:100%} .navSticky .btn-nav-sticky i.rotateIcon{ transform: rotate(45deg);left: 5px;top: 5px;} .navSticky .btn-nav-sticky:hover i{ color: var(--blue);} .navSticky .hamburger-inner::before{top:-7px} .navSticky .hamburger-inner::after{top:7px} .navSticky .cart-item { top: 2px; left: unset;right:10%;width: 12px;height: 12px;font-size: 0.6rem;} .navSticky .hamburger-inner, .navSticky .hamburger-inner::before, .navSticky .hamburger-inner::after { width: 30px;} .navSticky .hamburger-box { width: 30px;height:15px} .navSticky .hamburger-1.nol { text-align: center;width:100%;top:0} .navSticky .hamburger-text { display:block; text-align: center;font-size:0.8rem;color: var(--text);} .hamburger-1.hamburger {display:none } .hamburger-1.hamburger.is-active {display:block !important} .priceHistory {cursor:pointer;margin-bottom:10px} .priceHistory:hover {text-decoration: underline} .modal-right .modal-content {width:550px;position:absolute;top:0;right:0;background-color:var(--bg-card);border-left:1px solid var(--border);display:block;height:100%;left:unset;transform:unset;border-radius:0;} .modal-right .title {font-size:1rem;font-weight:normal} .modal-right .titleOffer {font-size:1rem;font-weight:bold;padding:10px} .modal-right .subTitle {font-size:1rem;color:var(--orange);font-weight:bold} .modal-right .discount { border-radius: 5px; padding: 3px 5px; font-size: 0.8rem; display: inline-block; font-weight: bold;} .modal-right .oldPrice { display: inline-block; text-decoration: line-through; font-size: 0.8rem; color: gray; margin: 10px;} .modal-right .newPrice { color: var(--orange); font-size: 1.8rem; font-weight: bold;} .modal-right .promoBox { display: inline-block; min-width: 30%;border-radius: 5px;padding: 5px;} .modal-right .tresc { padding:20px} .modal-right .btn-icon i { position: absolute; left: 10%; font-size: 1.2rem; top: 10px;} .modal-right .btn-orange-small{ min-width:200px} .modal-right .powiadomienie{ overflow: unset} .modal-right .text-left{ overflow: auto;max-height: calc(-415px + 100vh);} .modal-info .btn-orange-small.btn-icon{ min-width:200px} .modal-info .btn-orange-small.btn-icon i { position: absolute; left: 10%; font-size: 1.2rem; top: 10px;} .show-modal-quqi {opacity: 1;visibility: visible;transform: scale(1.0);transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;z-index:999} .quqi .modal-content {width:100%;position:absolute;top:unset;left:0;transform:unset;background-color:var(--bg-card);border-top:1px solid var(--border);border-radius:0;display:block;bottom:0;} .quqi .modal-content .modal-text .title {font-size:1.5rem} .quqi .modal-content .modal-tresc {font-size:0.8rem} .quqi .settings-quqi {max-width: 100%; margin: 0 auto; text-align: left;} .quqi .title { padding: 10px 0;position:relative;left:unset;top:unset;color:unset} .quqi label {font-weight: bold} .quqi .quqi-btn-container {text-align: center;display: flex;align-items: center;justify-content:center;grid-gap: 30px;position: relative;margin: 20px 0;} .quqi .quqi-item {margin: 20px 0;} .quqi .checkCont { padding-left: 45px;} .footer-quqi .settings-quqi {width:100%;max-width:100%} .footer-quqi .title {font-weight: bold; font-size: 1.5rem;} .quqi .btn-orange-small{min-width:150px} .quqi .set-quqi{min-width:200px} .quqi .more-info-quqi{min-width:200px} .quqi .btn-quqi-set{padding: 7px 10px;font-size: 0.8rem;} .btn-orange-small {display: inline-block;text-align: center;padding: 8px 20px;color: black;background-color: #7CEA8D;cursor: pointer;min-width: 100px;position: relative;text-decoration: none;font-weight: normal;box-sizing: border-box;} .btn-cyan-small {display: inline-block;font-size: 0.8rem;text-align: center;padding: 8px 10px;color: white;background-color: #4682F5;cursor: pointer;position: relative;font-weight: normal;text-decoration: none;min-width: 100px;box-sizing: unset;margin: 10px 0;max-width: 200px;width: calc(100% - 20px);} .btn-cyan-ghost-small {display: inline-block;font-size: 0.8rem;text-align: center;padding: 7px 10px;color: #7a7979;border: 1px solid #7a7979;cursor: pointer;min-width: 150px;max-width: 200px;width: 100%;position: relative;font-weight: normal;text-decoration: none;} .btn-red-ghost-small {display: inline-block;font-size: 0.8rem;text-align: center;padding: 7px 10px;color: #c72f00;border: 1px solid #AA0000;cursor: pointer;min-width: 150px;max-width: 200px;width: 100%;position: relative;font-weight: normal;text-decoration: none;} .btn-orange {display: inline-block;text-align: center;padding: 0 20px;color: var(--white);background-color: var(--cyan);;cursor: pointer;min-width: 100px;position: relative;text-decoration: none;font-weight: bold;box-sizing: border-box;} .btn-orange:hover { opacity: .85; } .btn-next {display: inline-block;text-align: center;padding: 11px 20px;color: var(--white);background-color: var(--cyan);cursor: pointer;min-width: 100px;position: absolute;text-decoration: none;font-weight: bold;box-sizing: border-box;right:20px;bottom:10px} .star { font-size: 10vh; cursor: pointer;color:#cecece} .one { color: rgb(255, 0, 0);} .two { color: rgb(255, 191, 0);} .three { color: rgb(164, 233, 95);} .four { color: rgb(5, 233, 83);} .five { color: rgb(24, 159, 14);} .textarea-rating {width: 500px; height: 100px;border-radius:5px;border:1px solid #cecece} .textarea-rating-produkt {border-radius: 5px; border: 1px solid #cecece; width: 90%; margin: 20px auto 0 auto; height: 100px; max-height: 100px; text-align: left;overflow-y: auto} .rate-star-bg {position:absolute;left:0;top:0;background-color:var(--cyan);z-index:0;height:18px} .rate-star-container {display:inline-block;position:relative;height:20px;width:100px;margin:0 10px 0 0} .rate-star-img {position:relative;z-index: 2} .rate-star-img img{max-width:100%;position: relative} .offer-rate {display: flex;} .grid-rate {display: grid;grid-template-columns: 30% 70%;justify-content: flex-start;align-items: flex-start} .grid-rate .star { font-size: 5vh;} .loadRating .modal-tresc {max-height:70vh;overflow-y:auto} .modal-show-rating .offer-rate {display: flex;justify-content: center} .loader {display:none} .loader {position: fixed;z-index: 9999;background-color: RGBA(255,255,255,0.5);width: 100%;height: 100%;text-align: center;display:none;top:0;left:0} .loader img {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);transform: -webkit-translate(-50%, -50%); transform: -moz-translate(-50%, -50%); transform: -ms-translate(-50%, -50%);} .loader-container {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);transform: -webkit-translate(-50%, -50%); transform: -moz-translate(-50%, -50%); transform: -ms-translate(-50%, -50%);} /* HTML:
*/ #loader { width: 60px; aspect-ratio: 1; display: grid; grid: 50%/50%; color: var(--cyan); --_g: no-repeat linear-gradient(currentColor 0 0); background: var(--_g),var(--_g),var(--_g); background-size: 50.1% 50.1%; animation: l6-0 1.5s infinite steps(1) alternate, l6-0-0 3s infinite steps(1); } #loader::before { content: ""; background: currentColor; transform: perspective(150px) rotateY(0deg) rotateX(0deg); transform-origin: bottom right; animation: l6-1 1.5s infinite linear alternate; } @keyframes l6-0 { 0% {background-position: 0 100%,100% 100%,100% 0} 33% {background-position: 100% 100%,100% 100%,100% 0} 66% {background-position: 100% 0 ,100% 0 ,100% 0} } @keyframes l6-0-0 { 0% {transform: scaleX(1) rotate(0deg)} 50% {transform: scaleX(-1) rotate(-90deg)} } @keyframes l6-1 { 16.5%{transform:perspective(150px) rotateX(-90deg) rotateY(0deg) rotateX(0deg);background-color: var(--orange); } 33% {transform:perspective(150px) rotateX(-180deg) rotateY(0deg) rotateX(0deg)} 66% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg)} 100% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);background-color: var(--orange); } } .section-payment {max-width:1500px;margin:50px auto;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:20px 0;} .section-payment .section-title{font-size:1.2rem;font-weight:bold;text-align: center;margin-bottom:20px} .section-payment .section-title span{color:var(--orange)} .section-payment .section-info {font-size:1rem;text-align: center;margin:50px 0} .section-payment .payment-link {text-align: center;margin:50px 0} .section-payment .btn-pay {display:none} .text-bold {font-weight:bold;} .category-nav {position:absolute;top:50px;background-color:var(--bg-card);border:1px solid var(--border);width:100%;text-align:left;border-radius:var(--radius-sm);transition:0.3s all;} .category-nav-item {position:relative;display:flex;flex-basis:200px;} .category-nav .nav-item {font-weight:normal;padding:10px 5px 10px 10px;text-align:left;align-items:flex-start;justify-content:flex-start;} .category-nav i{color:var(--text-muted);} .category-nav .category-nav-submenu {position:absolute;top:0;left:150px;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);width:200px;box-shadow:0 8px 30px rgba(0,0,0,0.4);} .category-nav .category-nav-menu {position:relative;} .category-nav .subcategory-nav-menu {position:relative;} .category-nav .subcategory-nav-submenu {position:absolute;top:0;left:150px;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);width:200px;box-shadow:0 8px 30px rgba(0,0,0,0.4);} .header-popup {background-color:var(--bg-nav);border-bottom:1px solid var(--border);height:50px;} .header-popup span {font-size:1.1rem} .header-popup .header-popup-container {display:flex;justify-content: center;align-items: center;font-size:-.9rem;color:var(--cyan);height: 100%;} .header-popup .close-popup-header {position: absolute;right:20px} .header-popup .close-popup-header i{font-size:2rem;} .summary-info {font-weight: bold} .adminSessionInfo {background-color: red;color:white;padding:10px 0;text-align: center} /* Dla Chrome, Safari, Edge, Opera */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Dla Firefox */ input[type=number] { -moz-appearance: textfield; } @media screen and (max-width : 1600px) { .slider .slider-box-container { width: 45%;} .slider .slider-box { min-height: 800px; } .slider .slider-title { font-size: 3.2vw;} .text-white-big { font-size: 2.5rem;} .text-white-medium { font-size: 1.5rem;} nav .nav-item { padding: 10px 15px;} .slider .slider-box-container {min-width: 400px;} .section-offer-box .section-box { width: 95%;} } @media screen and (max-width : 1440px) { nav .nav-item { padding: 10px 10px; } } @media screen and (max-width : 1360px) { nav .nav-item { padding: 10px 2px; } .header-point { right: 20%;} .slider .slider-title::after {bottom: -80px;} .slider .slider-box-container { width: 35%; top: 150px; margin-left: 0px;} .section-offer-box .offer-box img { max-width: 244px; } .section-about .about-flex { width: 95%; grid-gap:0 70px; } .section-about .section-text { font-size: 1.3rem;} .section-why-us .why-us-flex { width: 90%; grid-gap: 0 80px;} .section-why-us .why-us-title { font-size: 1.6rem;} .section-why-us .section-text { font-size: 1.2rem;} .section-big-box { margin-bottom: 200px; min-height: 700px; } .section-big-box .big-box-container { right: 2%;top:5%} .slider .slider-sub-title { font-size: 1.4rem;} .section-offer-details .offer-details-container { width: 90%;} .section-offer-box-nav .offer-box-nav { height: 70px;} .section-offer-box-nav .offer-box-title-nav { font-size: 0.6rem; } .section-offer-box .offer-box { min-width: 19%;} } @media screen and (max-width : 1200px) { nav .claim {display:none} } @media screen and (max-width : 720px) { body { background-size: 100% 170%;} .header-popup .header-popup-container { display: block;padding: 5px 50px 5px 5px;} .header-popup { height: auto;} .user-nav-item2 {display:none} nav {min-height:10px} .showMob { display: block;top:unset;bottom:0} .grid-nav-top {display:none} .grid-logo {display:block;} .header {height:auto;position: relative;margin-top:0px;} .container {max-width:100%;} nav {position: relative;top:0} nav .nav-container {display:none} .header-phone { top: 75px; left: 10%;} .header-phone img { max-width: 30px; max-height: 30px;} .header-point { display:none} .slick-list { max-width: 100%;} .showSubmenu { display: none; } .user-nav-item2 {display:none;} .nav-hover-container {display:block;transition:all 0.3s;visibility:visible;opacity:1;position:relative;width:100%;background-color:var(--bg-page);top:0;} .align-items-center.flex-col {display:none} .container-bg.sign-up::before { display:none} .container-bg.sign-in::before { display:none} body .contentOverflowHidden { overflow: unset; width: 100%; height:auto; position: relative; display: block; align-items: center; justify-content: center;} .form {width:calc(100% - 60px);margin:0 auto;} .register.form {width:calc(100% - 60px);margin:0 auto;} .login .form.sign-in {;margin:0 auto;} .btn-title-log { padding: 10px; font-size: 3.5vw;} .btn-title-reg { padding: 10px; font-size: 3.5vw;} .login.logon.bg-white.form {position: absolute; left: 20px;min-height: 300px;} .register.bg-white.form {position: absolute; left: 15px;min-height: 500px;} .rozwinMenu { background-color: var(--cyan); color: white; padding: 3px 10px; cursor: pointer; } .dropdown-icon-link-mob { font-size: 4vw; color: white; text-transform: uppercase; } .form {transition:all 0.3s;;} .dropdown-title { text-align: left} .slider { max-width:100% } .slider .slider-title { font-size: 8vw; margin-top: 80px; } .slider .slider-title::after { bottom: -60px; } .slider .slider-sub-title { font-size: 1rem; } .slider .text-number { font-size: 1.4rem;} .slider .text-price { font-size: 2rem;} .slider .slider-box { min-height: 80vh; } .section-category .category-grid { grid-template-columns: 1fr 1fr; } .slider .sliderBox { height: 180px; } .slider .sliderBoxContainer { left: 10px; top: 20px;max-width: 90%;margin:0 auto} .slider .sliderBox .sliderTitle { font-size: 0.8rem;} .slider .sliderBox .sliderText1 { font-size: 1.2rem;margin-bottom:10px;margin-top:0;text-shadow: 0 0 2px black;} .slider .sliderBox .sliderText2 { font-size: 1.0rem;margin-bottom:10px;margin-top:0;text-shadow: 0 0 2px black;} .slider .sliderBox .sliderText3 { font-size: 1.2rem;margin-bottom:10px;margin-top:0} .slider .sliderBox { background-size: cover;position: relative;} .slider .sliderBox .sliderBtn { padding: 5px 20px; font-size: 0.9rem; margin-top: 10px;} .nextItem { right: 10px;} .prevItem { left: 10px;} .section-products-module .products-module-foto { padding: 20px; min-height: 120px; } .section-products-module .btn-item-details {font-size:0.7rem} .section-products-module .products-module-price { font-size: 1.0rem;} .navSticky .btn-nav-sticky { font-size: 0.6rem; } .search-container { width: 98%; margin: 0 auto 10px auto;} input[name="search"] { padding: 5px 5px 6px 5px; } .navSticky .btn-nav-sticky i {color:var(--orange);margin-bottom:5px} .grid-category {display:block} .btn-item-details { font-size: 0.7rem; } .products-list-title { font-size: 0.8rem;} .section-products-list .list-items { grid-template-columns: 49% 49%;grid-gap:10px} #pagination { padding:0;margin-top:10px} #pagination li{ margin-bottom:5px} footer .menu-container { display: grid;grid-template-columns: 1fr 1fr;} footer {padding-bottom:60px} .user-nav-container {display:flex;flex-wrap:nowrap;overflow-x:auto;gap:16px;padding:0 12px;justify-content:flex-start;-webkit-overflow-scrolling:touch;} .user-nav-item {padding:12px 0;font-size:var(--fs-xs);} .nav-container {display: none} .dashboard .grid-3t { grid-template-columns: 1fr;} .dashboard .dashboard-box-title { font-size: 1.6rem;} .dashboard .box-value { font-size: 2.5rem;} .grid-dashboad { grid-template-columns: 1fr ;width: calc(100% - 20px);margin:0 auto} .dashboard.container { margin-top: -60px;} .dashboard .dashboard-box { margin-top: 0px;} .dashboard .dashboard-box-info { display: block;} .dashboard .progress-container { position: relative; top: 0; right: 0; width: 90%;} .dashboard .progressAdd { margin-top: 0px;} .dashboard .progres-info-text {display:none} .news-container .news-box { margin-bottom: 20px; display: grid; grid-template-columns: 1fr; grid-gap: 0px;} .last-status-container { width: calc(100% - 20px); } #lang a { color: white; text-decoration: none;} .open { visibility: visible !important;} #lang { display: block; position: relative; right: 0; left: 11%; margin-top:20px;max-width:80%} #lang .lang-box {display:inline;width:30px;margin-right:10px;font-size: 0} #lang .lang-box img {max-width:100%} .btn-lang {background-color: transparent;color:white;display:block;margin:5px 0;padding:5px } .btn-lang.selected_lang {background-color:var(--dark-grey);color:var(--orange);display:block;padding:5px;border-radius:var(--radius-sm);} .mobile-menu-box { max-height: 85vh; overflow-y: auto; } #mobile .close-hamburger-menu {position:fixed;right:0;bottom:65px;font-size:var(--fs-base);cursor:pointer;z-index:999;background-color:var(--dark-grey);border:1px solid var(--border);width:calc(100% - 60px);left:2.5%;text-align:center;padding:10px 20px;border-radius:var(--radius-sm);color:var(--text-color);} footer .footer-grid-grey { display: grid; grid-template-columns: 1fr 1fr;} .footer-box a {padding:5px 0;display:block} .login .grid-2 {display:block} .login label {width: 100%; text-align: center; margin-right: 0%;padding:0 5px} .login .login-email-box { width: 100%;} .logon { padding: 10px;} .login .title { padding-top: 0;} .login .form-content { padding: 0px;max-width:90%} .btn-login {width:100%} .btn-2 {margin-top:10px} .login .logon-step-one { position: relative;} .login .logon-step-two { } .login .logon-step-two-email { position: relative;} .installations .installations-container { width:calc(100% - 30px);padding:10px} .installations-wraper .installations-container { width:calc(100% - 30px);padding:10px} .installations-list {min-width:1400px;} .installations-list-load {overflow-y: scroll;max-width: calc(100% - 0px);} .filterContainer {position: relative;display:block;float: unset;top:0;width:100%;font-size:0.8em;margin-bottom:10px} .filterContainer input { width: 96%;} .filterContainer select { width: 100%; max-width: unset} .register {margin-top:20px;padding:10px} .register .checker label { margin-right: 0%; } .register input {width:calc(100% - 20px)} .filter-item-input {margin-bottom:7px} .btn-filter {padding:8px 20px !important; text-align: center;margin:10px auto} .bonus .bonus-container {width:calc(100% - 20px);padding:10px} .btn-add-installation {width: calc(100% - 42px); position: relative; display: block; margin: 0 auto; margin-top: 10px; right: unset; top: unset; margin-bottom: 10px} .bonus-list-load {overflow-y: scroll;max-width: calc(100% - 0px);} .bonus-list-elem {min-width:1000px;} .bonus-list-header {min-width:1000px;} .banners .bannersBox .bannersText1 { font-size: 8vw;} .banners .bannersBox .bannersText2 { font-size: 8vw;} .banners .bannersBox .bannersText3 { font-size: 8vw;} .banners .bannersBox { height: 200px;} .banners .size33 { grid-template-columns: 1fr;} .banners .size50 { grid-template-columns: 1fr;} .banners .size25 { grid-template-columns: 1fr;} .banners .size20 { grid-template-columns: 1fr;} .elements {padding:10px;width:calc(100% - 20px)} .fa-lock-alt {display:none !important} .register .viewPass { top: 10px;right:10px} .register .subscribe-newsletter { width: 30px; display: inline;} .btn-register {width:100%} .login .register-info {width:unset;text-align: left} .login .register-info a { font-size: 0.8rem; color: black;} .product-grid {display:block;padding:10px} .modal .grid-2 { display: block;} .btn-item-details { width: calc(100% - 20px);} .cart .grid-cart { display: block;} .cart .cart-left {padding:10px} .cart .cart_name {grid-column: 1/5 span;} .cart .cart_count {grid-column: 1/5 span;} .cart .cart_remove_item {position: absolute; top: 10px;right:10px;} .cart .cart-all-remove {position: absolute; right: 0; top: 4px;} .dots-content { width: 100%;padding:0;height:100%} .dashboard {padding:10px;width:calc(100% - 20px)} .dashboard .grid-3 {display:block;width: 100%;} .dashboard .dashboard-box {padding-right:0;border-right:none} .dashboard .dashboard-invoices-list-elem { display: grid; grid-template-columns: 1fr 1fr 131px; font-size: 0.8rem; padding: 10px 0;} .details .grid-2t {display:block} .details .grid-details {margin-bottom:10px} .details .btn-cyan-ghost-small {margin-bottom:10px} .details .grid-order-header{display:none} .details .grid-order { display: block;} .order-details { margin: 10px auto 0px auto;width:calc(100% - 40px)} .settings .form-user-container {max-width: 100%;width:calc(100% - 40px)} .settings .grid-user-settings {display:block} .settings .sms-flex {display:block} .settings .email-flex {display:block} .section-products-module .products-module-title { min-height: 60px;display:block} footer .menu-container {display:block} .footer.container section {padding:10px} .backToTop { bottom: 60px;k; left: 84%;} .modal-right .modal-content {width: 100%;} .section-products-list { width:calc(100% - 10px); margin:0; padding: 5px;} .products-list-name { font-size: 6vw; font-weight: 500;} .section-products-list .nav-settings {display:none} .section-products-list .logo-solar { position: absolute; top: 5px; right: 15px;width: 100px;} .products-list-container { display: grid; grid-template-columns: 1fr 1fr ; } .products .section-items-products { display: grid; grid-template-columns: 1fr;} .products .container { width:calc(100% - 10px); margin:0; padding: 5px;;} .products-module-content {padding:0 10px} .btn-container-bonus {width:100%} .installations { min-width: 1000px; } .container-bonus { overflow-y: scroll; max-width: calc(100% - 0px); } .filterContainerInst { grid-template-columns: 1fr;} .installations-wraper .title { font-size: 6vw;} .filterContainerInst { position: relative; display: block; float: unset; top: 0px;magin-bottom:10px} .filter-item-select {margin-bottom:10px} .steps { max-width: 100%; margin: 0 auto 30px auto;} .stepper-item:nth-child(1) .step-counter::before, .stepper-item:nth-child(2) .step-counter::before { content: ""; position: absolute; top: 33%; left: 71%; width: 65%;} .box-width-40 {width:100%;margin:0 auto;position:relative;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:10px;} .modal-distributor .modal-content { width: 95%;} .modal-distributor .nav-settings { display:none} .modal-distributor .title { text-align: left;padding-left:10px} .close-button { position: absolute; right: 15px; margin: 0px; text-align: center; cursor: pointer; z-index: 10; top: -10px; font-size: var(--font-size-xl); color: var(--cyan);} .search-container { display: grid; grid-template-columns: 60% 40%;} .btn-search-dist { padding: 6px 20px;} .modal-distributor .sec {font-size:0.8rem} .dist-select-grid { grid-template-columns: 20% 17% 25% 15% 20%;} .btn-select { padding: 5px 7px;} .bonus-saldo-all { width: calc(100% - 10px);} .bonus-saldo { width: calc(100% - 10px);} .modal-content { width: 95%;} .modal-info .title { font-size: 6vw;} .modal-info .tc { text-align: left; padding-left: 35px;} .grid-type-elements-container {display:none} .elem-select-grid-header {min-width:500px} .loadElements {min-width:500px} .settings .nav-box { font-size: 1.0rem;} .settings .grid-b-r { border-right: unset; margin-right: 0px; padding-right: 0px;} } /* ── Cookie popup (nowy design) ── */ .cookie-popup { position: fixed; bottom: 24px; left: 24px; z-index: 9999; display: none; } .cookie-popup.show-modal-quqi { display: block; } .cookie-popup__box { width: 400px; max-width: calc(100vw - 48px); background: var(--bg-card); border-radius: var(--radius-card); border: 1px solid var(--border); padding: 20px 22px; box-sizing: border-box; box-shadow: 0 4px 24px rgba(0,0,0,0.10); font-family: Calibri, var(--font-sans), sans-serif; } .cookie-popup__icon { width: 40px; height: 40px; border-radius: 50%; background: #E96E10; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .cookie-popup__icon i { font-size: 22px; color: #E96E10; } .cookie-popup__title { font-size: 15px; font-weight: 500; color: #d0d0d0; margin: 0 0 8px; } .cookie-popup__desc { font-size: 13px; line-height: 1.6; color: #666; margin: 0 0 18px; } .cookie-popup__actions { display: flex; flex-direction: column; gap: 8px; } .cookie-popup__btn { width: 100%; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; transition: opacity .15s; } .cookie-popup__btn:hover { opacity: .85; } .cookie-popup__btn--accept { height: 40px; border: none; background: #E96E10; color: #fff; } .cookie-popup__btn--decline { height: 40px; border: 1px solid var(--border); background: var(--bg-main); color: var(--text-color); } .cookie-popup__btn--custom { height: 32px; border: none; background: transparent; color: #666; font-size: 13px; text-decoration: underline; } .cookie-popup .settings-quqi { margin-top: 16px; text-align: left; } /* ===== UNIFIED BONUS VIEW ===== */ .bonus-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.5rem;} .bonus-tile{background: #132d3b; color: #fff; border-radius: var(--radius-card);padding:14px 16px;border: 1px solid #0c4a6e;} .bonus-tile-label{font-size:var(--fs-sm);color:var(--text-secondary);margin-bottom:6px;} .bonus-tile-val{font-size:1.375rem;font-weight:700;color:var(--text-color);} .bonus-tile-val.tile-available,.tile-available{color:var(--orange-light);} .bonus-tile-val.tile-pending,.tile-pending{color:#e6a800;} .bonus-tile-val.tile-inprogress,.tile-inprogress{color:#5ba3f5;} .bonus-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px;} .bonus-bar select{padding:6px 10px;color:var(--text-color);;font-size:var(--fs-base);cursor:pointer;background: #132d3b; border-radius: var(--radius-card); padding: 14px 16px; border: 1px solid #0c4a6e;} .bonus-bar input{padding:6px 10px;color:var(--text-color);;font-size:var(--fs-base);cursor:pointer;background: #132d3b; border-radius: var(--radius-card); padding: 14px 16px; border: 1px solid #0c4a6e;} .btn-pay-unified{background: linear-gradient(120deg, rgba(126,49,23,0.8) 2%, rgba(201,87,8,0.8) 44%, rgba(255,148,45,0.8) 88%);;color:#fff;padding:11px 16px;border-radius: var(--radius-card);;cursor:pointer;font-weight:700;font-size:var(--fs-base);white-space:nowrap;display:inline-block;} .btn-selall-unified{color:var(--orange-light);cursor:pointer;font-size:var(--fs-base);text-decoration:underline;} .bu-ed-group{background: #132d3b; color: #fff; border-radius: var(--radius-card);border: 1px solid #0c4a6e;;margin-bottom:14px;overflow:hidden;} .bu-ed-active{} .bu-ed-hdr{padding:10px 14px;cursor:pointer;background:transparent;border-bottom:1px solid var(--border);user-select:none;} .bu-ed-hdr:hover{background:rgba(255,255,255,0.03);} .bu-ed-hdr-top{display:flex;align-items:center;gap:10px;margin-bottom:4px;} .bu-ed-name{font-weight:700;font-size:var(--fs-md);} .bu-ed-badge{font-size:var(--fs-xs);padding:2px 8px;border-radius:20px;border:1px solid var(--border-light);} .bu-badge-active{border-color:var(--orange);color:var(--orange-light);} .bu-badge-closed{color:var(--text-muted);border-color:var(--border);} .bu-ed-count{font-size:var(--fs-sm);color:var(--text-muted);} .bu-ed-arrow{margin-left:auto;color:var(--text-muted);font-size:1rem;transition:transform .2s;} .bu-collapsed .bu-ed-arrow{transform:rotate(-90deg);} .bu-ed-hdr-bottom{font-size:var(--fs-sm);color:var(--text-secondary);display:flex;gap:16px;} .bu-avail-val{color:var(--orange-light);} .bu-ed-body{border-top:1px solid var(--border);} .bu-ed-collapsed{display:none;} .bu-row-hdr{display:grid;grid-template-columns:30px 90px 1fr 160px 90px 80px;gap:0 8px;padding:6px 12px;font-size:var(--fs-xs);font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;background: #132d3b; color: #fff; border: 1px solid #0c4a6e;;} .bu-row{display:grid;grid-template-columns:30px 90px 1fr 160px 90px 80px;gap:0 8px;padding:9px 12px;border-bottom:1px solid #0c4a6e;align-items:center;font-size:var(--fs-base);} .bu-row:last-of-type{border-bottom:none;} .bu-row:hover{background:var(--bg-nav);} .bu-payable{background: #132d3b; } .bu-cell-date{color:var(--text-secondary);white-space:nowrap;} .bu-cell-amt{text-align:right;font-weight:700;color:var(--text-color);} .bu-amt-avail{color:var(--orange-light);} .bu-cell-act span{cursor:pointer;color:var(--orange-light);font-size:var(--fs-sm);text-decoration:underline;} .bu-typ-badge{display:inline-block;font-size:var(--fs-xs);padding:1px 6px;border-radius:3px;margin-right:6px;font-weight:600;white-space:nowrap;} .bu-typ-inst{background:rgba(91,163,245,0.15);color:#5ba3f5;} .bu-typ-add{background:rgba(74,190,95,0.15);color:#4abe5f;} .bu-typ-promo{background:rgba(233,110,16,0.15);color:var(--orange-light);} .bu-empty{padding:30px;text-align:center;color:var(--text-muted);} .load_bonus_details{padding:0;} .tright{text-align:right;} /* ===== END UNIFIED BONUS VIEW ===== */ /* ===== DASHBOARD REDESIGN ===== */ .db-greeting{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.125rem;} .db-greeting-name{font-size:var(--fs-xl);font-weight:700;color:var(--text-color);} .db-greeting-sub{font-size:var(--fs-base);color:var(--text-secondary);margin-top:2px;} .db-hubs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1.125rem;} .db-hub{display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:14px;text-decoration:none;color:var(--text-color);position:relative;transition:box-shadow .15s;} .db-hub:hover{box-shadow:0 2px 16px rgba(0,0,0,.4);border-color:var(--border-light);} .db-hub-icon{width:34px;height:34px;border-radius:50%;background:var(--brown);display:flex;align-items:center;justify-content:center;margin-bottom:8px;color:var(--orange);font-size:0.9375rem;} .db-hub-title{font-size:var(--fs-base);font-weight:700;margin:0 0 3px;} .db-hub-sub{font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.4;min-height:28px;} .db-hub-line{display:block;width:16px;height:2px;background:var(--orange);border-radius:1px;margin-top:8px;} .db-hub-soon{opacity:.65;cursor:default;} .db-hub-badge-soon{position:absolute;top:10px;right:10px;font-size:var(--fs-xs);color:var(--text-muted);border:1px solid var(--border-light);border-radius:10px;padding:1px 7px;} .db-rank-list{display:flex;flex-direction:column;gap:5px;margin:6px 0 2px;} .db-rank-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-xs);} .db-rank-label{color:var(--text-secondary);} .db-rank-val{font-weight:700;color:var(--orange-light);} .db-rank-pos{font-weight:400;color:var(--text-muted);} .db-rank-none{color:var(--text-muted);font-size:var(--fs-xs);} .db-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:1.125rem;} .db-stat-tile{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-card);padding:16px;} .db-stat-label{font-size:var(--fs-sm);color:var(--text-secondary);margin-bottom:6px;} .db-stat-val{font-size:var(--fs-2xl);font-weight:700;margin-bottom:10px;color:var(--text-color);} .db-stat-val .db-stat-sub{font-size:var(--fs-sm);font-weight:400;color:var(--text-muted);margin-left:6px;} .db-stat-orange{color:var(--orange-light);} .db-stat-link{font-size:var(--fs-sm);color:var(--orange-light);text-decoration:none;} .db-stat-link:hover{text-decoration:underline;} .db-level-box{margin-bottom:14px;padding:14px 16px;border-radius:var(--radius-card);border:1px solid var(--border);background:var(--bg-card);} .db-level-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:var(--fs-base);} .db-level-next{font-size:var(--fs-sm);color:var(--orange-light);} .db-level-bar-wrap{height:6px;background:var(--border);border-radius:4px;overflow:visible;margin-bottom:8px;position:relative;} .db-level-bar{height:100%;background:var(--orange);border-radius:4px;transition:width .4s;} .db-level-mark{position:absolute;top:-3px;width:1px;height:12px;background:var(--border-light);} .db-level-labels{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--text-muted);flex-wrap:wrap;gap:4px;} .db-level-info{font-size:var(--fs-xs);color:var(--text-muted);margin-top:8px;} .db-promo-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:12px 16px;flex-wrap:wrap;border-radius:var(--radius-card);border:1px solid var(--border);background:var(--bg-card);} .db-promo-label{font-size:var(--fs-base);color:var(--text-color);white-space:nowrap;} .db-promo-input{flex:1;min-width:140px;border:1px solid var(--border-light);border-radius:var(--radius-sm);height:32px;padding:0 10px;font-size:var(--fs-base);background:var(--bg-main);color:var(--text-color);} .db-promo-btn{white-space:nowrap;padding:0 14px;line-height:32px;cursor:pointer;border-radius:var(--radius-sm);} .db-promo-result{font-size:var(--fs-sm);color:var(--text-secondary);} .db-promo-date{font-size:var(--fs-xs);color:var(--text-muted);} .msg-ok{color:var(--green);} .msg-error{color:var(--red);} .db-referral-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:1.25rem;padding:12px 16px;text-decoration:none;color:var(--text-color);border-radius:var(--radius-card);border:1px solid var(--border);background:var(--bg-card);} .db-referral-bar span{font-size:var(--fs-base);} .db-referral-link{font-size:var(--fs-sm);color:var(--orange-light);white-space:nowrap;} /* ===== DISTRIBUTORS BONUS PAGE ===== */ .distr-bonus-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;} .distr-bonus-card{background: #132d3b; border: 0.5px solid #24444B;border-radius:var(--radius-card);padding:16px;} .distr-bonus-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;} .distr-bonus-name{font-size:var(--fs-md);font-weight:700;} .distr-bonus-addr{font-size:var(--fs-sm);color:var(--text-secondary);margin-top:2px;} .distr-bonus-phone{font-size:var(--fs-sm);color:var(--text-secondary);white-space:nowrap;} .distr-bonus-bonuses{border-top:1px solid var(--border);padding-top:10px;display:flex;flex-direction:column;gap:6px;} .distr-bonus-row{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);} .distr-bonus-label{color:var(--text-secondary);} .distr-bonus-val{font-weight:700;color:var(--orange-light);} /* ===== END DISTRIBUTORS BONUS PAGE ===== */ /* ===== END DASHBOARD REDESIGN ===== */ /* ======================================================== MOBILE — wszystkie media queries zebrane na końcu pliku ======================================================== */ /* Tablet i mniejszy desktop */ @media (max-width: 1024px) { .db-hubs { grid-template-columns: repeat(2, 1fr); } .grid-dashboad { grid-template-columns: 1fr 1fr; } } /* Tablet */ @media (max-width: 900px) { .db-hubs { grid-template-columns: repeat(2, 1fr); } .db-stats { grid-template-columns: 1fr; } .distr-bonus-list { grid-template-columns: 1fr; } .bu-row, .bu-row-hdr { grid-template-columns: 30px 80px 1fr 90px; } .bu-cell-status, .bu-cell-act { display: none; } .bonus-tiles { grid-template-columns: repeat(2, 1fr); } } /* Smartfon duży */ @media (max-width: 700px) { .db-hubs { grid-template-columns: repeat(2, 1fr); } .db-stats { grid-template-columns: 1fr; } .grid-dashboad { grid-template-columns: 1fr; } .distr-bonus-list { grid-template-columns: 1fr; } nav .nav-item { font-size: var(--fs-sm); padding: 0 10px; } } /* Smartfon mały */ @media (max-width: 600px) { :root { --fs-base: 0.875rem; --fs-md: 0.9375rem; } .db-hubs { grid-template-columns: repeat(2, 1fr); gap: 8px; } .db-stats { grid-template-columns: 1fr; } .db-stat-val { font-size: 1.25rem; } .db-promo-bar { flex-direction: column; align-items: stretch; } .db-promo-input { min-width: unset; } .db-referral-bar { flex-direction: column; align-items: flex-start; gap: 6px; } .bonus-tiles { grid-template-columns: repeat(2, 1fr); } .bu-row, .bu-row-hdr { grid-template-columns: 1fr 90px; } .bu-cell-date, .bu-cell-status, .bu-cell-act { display: none; } .db-greeting-name { font-size: 1.25rem; } .container { padding: 0 12px; } } /* Smartfon bardzo mały */ @media (max-width: 400px) { .db-hubs { grid-template-columns: 1fr; } .bonus-tiles { grid-template-columns: 1fr 1fr; } .bu-row, .bu-row-hdr { grid-template-columns: 1fr; } } @media (max-width: 480px) { .cookie-popup { bottom: 0; left: 0; right: 0; } .cookie-popup__box { width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; } } /* ===== MULTI-SELECT BONUS (installations_bonus_settings) ===== */ .multi-modal-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0 12px; } .search-inline { flex: 1; min-width: 180px; background: var(--bg-main); color: var(--text-color); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: var(--fs-sm); } .search-inline:focus { outline: none; border-color: var(--orange); } .btn-sm-outline { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 6px; padding: 6px 12px; font-size: var(--fs-sm); cursor: pointer; transition: border-color .2s, color .2s; white-space: nowrap; } .btn-sm-outline:hover { border-color: var(--orange); color: var(--orange); } .dist-check-row:hover, .users-check-row:hover { background: var(--bg-card); } .dist-check-label { display: grid; grid-template-columns: 24px 50px 1fr 1fr 1fr 100px; gap: 6px; align-items: center; padding: 7px 6px; cursor: pointer; font-size: var(--fs-sm); color: var(--text-secondary); } .users-check-row .dist-check-label { grid-template-columns: 24px 1fr 1fr 120px; } .dist-check-label input[type=checkbox] { cursor: pointer; accent-color: var(--orange); } .dist-check-name { color: var(--text-color); font-weight: 500; } .multi-chips-list { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow-y: auto; padding: 2px 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .multi-chips-list::-webkit-scrollbar { width: 4px; } .multi-chips-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .multi-chip { display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px 6px 12px; font-size: var(--fs-sm); color: var(--text-color); transition: border-color .15s; } .multi-chip:hover { border-color: var(--border); } .chip-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-remove { cursor: pointer; color: #e05252; font-size: 1.1rem; line-height: 1; margin-left: 10px; flex-shrink: 0; transition: color .15s; font-weight: 700; } .chip-remove:hover { color: #c0392b; } .form-label-static { display: block; font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: 4px; } .mt-1 { margin-top: 8px; } .modal-content-wide { max-width: 720px !important; width: 90vw !important; } .list-collapsed { display: none !important; } .btn-toggle-list { display: flex; align-items: center; gap: 7px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 6px; padding: 6px 14px; font-size: var(--fs-sm); cursor: pointer; width: 100%; text-align: left; margin: 6px 0; transition: border-color .2s, color .2s; } .btn-toggle-list:hover { border-color: var(--orange); color: var(--text-color); } .btn-toggle-list i { color: var(--orange); font-size: .85rem; } .row-has-bonus { background: rgba(233,110,16,.06); } .row-has-bonus:hover { background: rgba(233,110,16,.12) !important; } .bonus-exists-badge { font-size: .72rem; color: var(--orange); white-space: nowrap; font-weight: 600; } /* === LightBonus custom additions === */ .cms-badge {display:inline-block;border-radius:3px;padding:1px 6px;font-size:.75rem;margin-left:6px;color:#fff;font-weight:600} .cms-badge-green {background:#27ae60} .cms-badge-red {background:#c0392b} .tabRow--error {background:rgba(192,57,43,0.12) !important;border-left:3px solid #c0392b} .form-input--highlight {background:var(--cyan-08);border:1px solid var(--cyan-30);border-radius:8px;padding:10px 14px;margin-bottom:8px} .lbc-note {font-size:.78rem;color:var(--text-muted,#888);margin-top:4px;line-height:1.4} /* === Rozpiska bonusu w szczegółach zgłoszenia === */ .inst-bonus-breakdown {max-width:640px;margin-top:12px} .ibb-total-card {background:linear-gradient(120deg,rgba(126,49,23,0.8) 2%,rgba(201,87,8,0.8) 44%,rgba(255,148,45,0.8) 88%);border-radius:12px;padding:18px 20px;margin-bottom:14px} .ibb-total-label {font-size:.8rem;opacity:.8;margin-bottom:4px;color:#fff} .ibb-total-amount {font-size:2rem;font-weight:700;color:#fff} .ibb-title {font-size:.85rem;font-weight:500;color:var(--text-color);margin-bottom:8px} .ibb-list {background:var(--dark-grey,#172E33);border:0.5px solid var(--border-color,#24444B);border-radius:12px;overflow:hidden} .ibb-row {display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:0.5px solid var(--border-color,#24444B)} .ibb-row:last-child {border-bottom:none} .ibb-row-name {font-size:.85rem;color:var(--text-color)} .ibb-row-desc {font-size:.72rem;color:var(--grey);margin-top:2px} .ibb-row-amount {font-size:.85rem;color:var(--orange);font-weight:500;white-space:nowrap;margin-left:12px} .ibb-footer {font-size:.72rem;color:var(--grey);margin-top:8px;padding:0 4px}