:root {
    --bg-white: #ffffff; 
    --white-colour: #ffffff; 
    --text-colour: #333333; 
    --text-gray-colour: #78909C; 
    --text-faded: #9fafb7; 
    --danger-colour: #c2305b; 
    --danger-colour-hover: #ff5e85; 
    --danger-background: #ffe5eb; 
    --success-colour: #00C853; 
    --success-background: #f2fcf6; 
    --lighter-success-colour: #defde9; 
    --link-colour: #0d6efd; 
    --link-colour-hover: #6AA4FF; 
    --secondary-background-colour: #eeeeee; 
    --lighter-secondary-background-colour: #f9f8fa; 
    --main-colour: #0076FF; 
    --main-border-colour: #0076FF; 
    --main-colour-selected: #004CCB; 
    --main-navigator-colour: #0076FF; 
    --main-navigator-colour-selected: #004CCB; 
    --main-colour-hover: #6AA4FF; 
    --main-btn-colour: #0076FF; 
    --main-btn-colour-hover: #6AA4FF; 
    --secondary-btn-colour: #ffffff; 
    --black-colour: #000000; 
    --light-border-colour: #eeeeee; 
    --gray-border-colour: #cccccc; 
    --light-gray-border-colour: #B0BEC5; 
    --gray-blue-border-colour: #CFD8DC; 
    --label-colour: #6c757d; 
    --placeholder-colour: #B0BEC5; 
    --disabled-colour: #5B5B5B; 
    --disabled-background: #e9ecef; 
    --input-colour: #212529; 
    --webkit-scrollbar-colour: #333333; 
    --webkit-scrollbar-corner: #999999; 
    --orange-colour: #FFA400; 
    --light-green-colour: #00c853; 
    --light-green-colour-hover: #8AE59F; 
    --white-svg-colour: #ffffff; 
    --main-svg-colour: #0076FF; 
    --warning-colour: #FFC107; 
    

    
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13,110,253;
    --bs-secondary-rgb: 108,117,125;
    --bs-success-rgb: 25,135,84;
    --bs-info-rgb: 13,202,240;
    --bs-warning-rgb: 255,193,7;
    --bs-danger-rgb: 220,53,69;
}


a:not([class*="ip-btn-"]) {
    color: #0d6efd !important;
}

body {
    
    font-family: 'Roboto', sans-serif;
}
h1,h2,h3,h4 {
    
    
    font-family: 'Roboto', sans-serif;
}
body .rounded-pill {
    
    border-radius: 50rem!important;
}

#headerMain {
    
    box-shadow: 0 3px 24px rgba(0,0,0,.09);
}

.fs-16px {
    font-size: 16px;
}
.breadcrumb-item {
    font-size: 0.75rem;
}



:root {
    
    --font-size: 1;              
    --border-width: 1;           
    --padding: 1;                
    --margin: 1;                 
    --width: 1;                  
    --font-weight: 1;            
    --rem: 1;                    

    
    --dimensions: 1;

    
    --margins: 1;

    
    --inputs: 1;

    
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
}



:root {
    
    
    --paragraph-font-size: calc(16px * var(--font-size));
    --paragraph-smaller-font-size: calc(14px * var(--font-size));
    --paragraph-small-font-size: calc(12px * var(--font-size));
    --alert-danger-border-width: calc(1px * var(--border-width));
    --badge-padding: calc(.35em * var(--padding)) 0;
    --alert-danger-margin: calc(10px * var(--margin)) auto;
    --page-container-width: calc(1200px * var(--width));
    --big-page-container-width: calc(1800px * var(--width));
    --medium-page-container-width: calc(800px * var(--width));
    --small-page-container-width: calc(336px * var(--width));
    --heading-1-font-size: calc(2.375rem * var(--rem));
    --heading-1-margin-bottom: calc(1.25rem * var(--rem));
    --heading-1-font-weight: calc(700 * var(--font-weight));
    --heading-1-font-style: normal;
    --heading-2-font-size: calc(1.9375rem * var(--rem));
    --heading-2-margin-bottom: calc(1.25rem * var(--rem));
    --heading-2-font-weight: calc(700 * var(--font-weight));
    --heading-2-font-style: normal;
    --heading-3-font-size: calc(1.5625rem * var(--rem));
    --heading-3-margin-bottom: calc(1.25rem * var(--rem));
    --heading-3-font-weight: calc(400 * var(--font-weight));
    --heading-3-font-style: normal;
    --heading-4-font-size: calc(1.5625rem * var(--rem));
    --heading-4-margin-bottom: calc(1.25rem * var(--rem));
    --heading-4-font-weight: calc(700 * var(--font-weight));
    --heading-4-font-style: normal;
    --heading-5-font-size: calc(1.25rem * var(--rem));
    --heading-5-margin-bottom: calc(1.25rem * var(--rem));
    --heading-5-font-weight: calc(700 * var(--font-weight));
    --heading-5-font-style: normal;
    --heading-6-font-size: calc(1rem * var(--rem));
    --heading-6-margin-bottom: calc(1.25rem * var(--rem));
    --heading-6-font-weight: calc(400 * var(--font-weight));
    --heading-6-font-style: normal;
    --25px-font-size: calc(25px * var(--font-size));
    --49px-font-size: calc(49px * var(--font-size));
    --before-line-font-size: calc(1rem * var(--rem));
    --before-line-width: 1.5rem;
    --before-line-margin: 0 0 0 -1.8rem;
    --carousel-margin: calc(3rem * var(--margin)) 0;
    --carousel-headline-font-size: calc(31px * var(--font-size));
    --carousel-headline-larger: calc(38px * var(--font-size));
    --carousel-headline-largest: calc(49px * var(--font-size));
    --big-section-padding: calc(80px * var(--padding)) 0;
    --blog-section-padding: 80px 0 0;
    --productBoxes-padding-top: calc(20px * var(--padding));
}



:root {

    --prodbox-min-height: calc(230px * var(--dimensions));
    --svg-holding-block-max-width: calc(570px * var(--dimensions));
    --svg-holding-block-max-height: calc(470px * var(--dimensions));


    --product-text-bottom: calc(20px * var(--margins));
    --product-text-left: calc(20px * var(--margins));


    
    --ip-mb-sm-37: calc(37px * var(--margins));
    --ip-mb-sm-30: calc(30px * var(--margins));
    --ip-mt-sm-30: calc(30px * var(--margins));
    --ip-mt-sm-40: calc(40px * var(--margins));
    --ip-mt-sm-80: calc(80px * var(--margins));
    --ip-mt-sm-70: calc(70px * var(--margins));
    --ip-mt-sm-50: calc(50px * var(--margins));
    --ip-mb-sm-50: calc(50px * var(--margins));
    --ip-mb-sm-80: calc(80px * var(--margins));
    --ip-mt-sm-14: calc(14px * var(--margins));
    --ip-mb-sm-14: calc(14px * var(--margins));
    --ip-mt-md-20: calc(20px * var(--margins));
    --ip-smaller-sm-input: calc(526px * var(--margins));
    --mw-sm-100: calc(100% * var(--margins));
    --ip-medium-sm-input: calc(800px * var(--margins));
    --ip-mb-md-37: calc(37px * var(--margins));
    --ip-mb-md-30: calc(30px * var(--margins));
    --ip-mt-md-30: calc(30px * var(--margins));
    --ip-mt-md-40: calc(40px * var(--margins));
    --ip-mt-md-80: calc(80px * var(--margins));
    --ip-mt-md-70: calc(70px * var(--margins));
    --ip-mt-md-50: calc(50px * var(--margins));
    --ip-mb-md-50: calc(50px * var(--margins));
    --ip-mb-md-80: calc(80px * var(--margins));
    --ip-mt-md-14: calc(14px * var(--margins));
    --ip-mb-md-14: calc(14px * var(--margins));
    --ip-smaller-md-input: calc(526px * var(--margins));
    --mw-md-100: calc(100% * var(--margins));
    --ip-medium-md-input: calc(800px * var(--margins));
    --ip-mb-lg-37: calc(37px * var(--margins));
    --ip-mb-lg-30: calc(30px * var(--margins));
    --ip-mt-lg-30: calc(30px * var(--margins));
    --ip-mt-lg-40: calc(40px * var(--margins));
    --ip-mt-lg-80: calc(80px * var(--margins));
    --ip-mt-lg-70: calc(70px * var(--margins));
    --ip-mt-lg-50: calc(50px * var(--margins));
    --ip-mb-lg-80: calc(80px * var(--margins));
    --ip-mt-lg-14: calc(14px * var(--margins));
    --ip-mb-lg-14: calc(14px * var(--margins));
    --ip-mb-lg-50: calc(50px * var(--margins));
    --ip-mt-lg-20: calc(20px * var(--margins));
    --ip-smaller-lg-input: calc(526px * var(--margins)); 
    --mw-lg-100: calc(100% * var(--margins)); 
    --ip-medium-lg-input: calc(800px * var(--margins)); 
    --ip-mb-xl-37: calc(37px * var(--margins)); 
    --ip-mb-xl-30: calc(30px * var(--margins));
    --ip-mt-xl-0: calc(0 * var(--margins)); 
    --ip-mt-xl-30: calc(30px * var(--margins));
    --ip-mt-xl-40: calc(40px * var(--margins));
    --ip-mt-xl-80: calc(80px * var(--margins));
    --ip-mt-xl-70: calc(70px * var(--margins));
    --ip-mt-xl-50: calc(50px * var(--margins));
    --ip-mb-xl-80: calc(80px * var(--margins));
    --ip-mt-xl-14: calc(14px * var(--margins));
    --ip-mb-xl-14: calc(14px * var(--margins));
    --ip-mb-xl-50: calc(50px * var(--margins));
    --ip-mt-xl-20: calc(20px * var(--margins));
    --ip-mb-37:  calc(37px * var(--margins));
    --ip-mb-30:  calc(30px * var(--margins));
    --ip-mt-10:  calc(10px * var(--margins));
    --ip-mt-30:  calc(30px * var(--margins));
    --ip-mt-40:  calc(40px * var(--margins));
    --ip-mt-70:  calc(70px * var(--margins));
    --ip-mt-80:  calc(80px * var(--margins));
    --ip-mt-50:  calc(50px * var(--margins));
    --ip-mb-50:  calc(50px * var(--margins));
    --ip-mb-80:  calc(80px * var(--margins));
    --ip-mt-14:  calc(14px * var(--margins));
    --ip-mb-14:  calc(14px * var(--margins));
    --ip-mt-20:  calc(20px * var(--margins));
    --ip-p-20: calc(20px * var(--margins));
    --ip-px-15:  calc(15px * var(--margins));
    --ip-br-8: calc(8px * var(--margins));
    --ip-smaller-xl-input: calc(526px * var(--inputs)); 
    --mw-xl-100: 100%; 
    --ip-medium-xl-input: calc(800px * var(--inputs)); 
}
:root {
    --bg-white: #ffffff;/* Kolor tła standardowego i wszystkich białych elementów */
    --white-colour: #ffffff;/* Kolor białych tekstów */
    --text-colour: #333333;/* Kolor głównego tekstu */
    --text-gray-colour: #78909C;/* Kolor tekstu wyszarzonego */
    --text-faded: #9fafb7;/* Kolor tekstu wytłumionego */
    --danger-colour: #c2305b;/* Kolor borderów i tekstów w alertach z błędami oraz elementów ważnych i wymagających uwagi */
    --danger-colour-hover: #ff5e85;/* Hover na elementach wymagających uwagi */
    --danger-background: #ffe5eb;/* Kolor tła alertów z błędami */
    --success-colour: #00C853;/* Kolor borderów i tekstów w alertach z sukcesem */
    --success-background: #f2fcf6;/* Kolor tła alertów z sukcesem */
    --lighter-success-colour: #defde9;/* Kolor tła w miejscach z zaznaczonymi elementami (książka adresowa - wybrany adres) */
    --link-colour: #0d6efd;/* Kolor linków */
    --link-colour-hover: #6AA4FF;/* Hover na linkach */
    --secondary-background-colour: #eeeeee;/* Kolor tła elementów pobocznych (np. szare główne tło) */
    --lighter-secondary-background-colour: #f9f8fa;/*Jaśniejsze tło elementów pobocznych (np. tło wyników preflight) */
    --main-colour: #0076FF;/* Kolor główny (Przyciski, radio, elementy użyteczne w stylu strzałek na sliderach etc.) */
    --main-colour-selected: #004CCB;/* Kolor główny po wybraniu (Active na Przyciskach, radio etc.) */
    --main-colour-hover: #6AA4FF;/* Hover na głównych elementach */
    --black-colour: #000000;/* Kolor czarnego tekstu */
    --light-border-colour: #eeeeee;/* Kolor borderów jasnych (np. checkboxów, przerw w panelach w menu etc.) */
    --gray-border-colour: #cccccc;/* Kolor borderów szarych (np. wynik preflight, szara linia za elementami.) */
    --light-gray-border-colour: #B0BEC5;/*Kolor borderów jasnoszarych (Tabelki w Custom view) */
    --gray-blue-border-colour: #CFD8DC;/* Kolor borderów szaro-niebieskich (Inputy, textarea, przyciski z białym tłem) */
    --label-colour: #6c757d;/* Kolor labeli */
    --placeholder-colour: #B0BEC5;/* Kolor placeholderów */
    --disabled-colour: #5B5B5B;/* Kolor elementów wyłączonych */
    --disabled-background: #e9ecef;/* Kolor tła elementów wyłączonych */
    --input-colour: #212529;/* Kolor tekstu inputów */
    --webkit-scrollbar-colour: #333333;/* Kolor scrollbarów */
    --webkit-scrollbar-corner: #999999;/* Kolor kącikóœ scrollbarów */
    --orange-colour: #FFA400;/* Kolor gwiazdek w opiniach etc. */
    --light-green-colour: #00c853;/* Kolor zielonych elementów (Głównie przyciski jasnozielone do zamówień) */
    --light-green-colour-hover: #8AE59F;/* Hover na zielonych przyciskach */
    --white-svg-colour: #ffffff;/* Kolor białych ikon */
    --main-svg-colour: #0076FF;/* Kolor głównych ikon */
    --warning-colour: #FFC107;/* Kolor tekstóœ warningów */
}